cschroeter / park-ui

Beautifully designed components built with Ark UI and Panda CSS that work with a variety of JS frameworks.
https://park-ui.com
MIT License
1.63k stars 71 forks source link

Missing `actionTrigger` from the toast recipe #335

Closed Asuka109 closed 2 months ago

Asuka109 commented 4 months ago
  System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1 Pro
    Memory: 73.84 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.2 - ~/Library/Caches/fnm_multishells/79455_1717259181420/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/79455_1717259181420/bin/yarn
    npm: 10.5.0 - ~/Library/Caches/fnm_multishells/79455_1717259181420/bin/npm
    pnpm: 8.10.5 - ~/Library/Caches/fnm_multishells/79455_1717259181420/bin/pnpm
    bun: 1.0.9 - ~/.bun/bin/bun
  Browsers:
    Edge: 125.0.2535.79
    Safari: 17.0
  npmPackages:
    @ark-ui/react: ^3.0.2 => 3.0.2 
    @pandacss/dev: ^0.40.1 => 0.40.1 
    @park-ui/panda-preset: ^0.37.1 => 0.37.1 
    @types/react: ~18.3.3 => 18.3.3 
    @types/react-dom: ~18.3.0 => 18.3.0 
    react: ~18.2.0 => 18.2.0 
    react-dom: ~18.2.0 => 18.2.0 

I just created a new project, integrated Park UI, and got a typing error.

src/components/ui/toast.tsx

import type { Assign } from '@ark-ui/react';
import { Toast } from '@ark-ui/react/toast';
import { type ToastVariantProps, toast } from 'styled-system/recipes';
import type { JsxStyleProps } from 'styled-system/types';
import { createStyleContext } from '~/lib/create-style-context';

const { withProvider, withContext } = createStyleContext(toast);

export interface RootProps
  extends Assign<JsxStyleProps, Toast.RootProps>,
    ToastVariantProps {}
export const Root = withProvider<HTMLDivElement, RootProps>(Toast.Root, 'root');

export const ActionTrigger = withContext<
  HTMLButtonElement,
  Assign<JsxStyleProps, Toast.ActionTriggerProps>
>(Toast.ActionTrigger, 'actionTrigger');
//                       ^? Argument of type '"actionTrigger"' is not assignable to parameter of type '"title" | "group" | "root" | "description" | "closeTrigger"'.ts(2345)

Seems the defination of actionTrigger is missing from:

node_modules/@park-ui/panda-preset/src/theme/recipes/toast.ts

import { toastAnatomy } from '@ark-ui/anatomy'
import { defineSlotRecipe } from '@pandacss/dev'

export const toast = defineSlotRecipe({
  className: 'toast',
  slots: toastAnatomy.keys(),
  base: {
    root: {},
    group: {},
    title: {},
    description: {},
    closeTrigger: {},
  },
})
cschroeter commented 2 months ago

@Asuka109

This issue should be resolved by now https://park-ui.com/react/docs/components/toast