fix: re-generate registry

docs/public/__registry__/ui/action-button.json

@@ -7,7 +7,7 @@
     {
       "name": "action-button.tsx",
       "type": "ui",
-      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/progressCircle.css\";\nimport \"@seed-design/stylesheet/actionButton.css\";\n\nimport * as React from \"react\";\nimport clsx from \"clsx\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n  actionButton,\n  type ActionButtonVariantProps,\n} from \"@seed-design/recipe/actionButton\";\nimport { ProgressCircle } from \"./progress-circle\";\n\nexport interface ActionButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    ActionButtonVariantProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n\n  loading?: boolean;\n\n  /**\n   * @default false\n   */\n  asChild?: boolean;\n}\n\n/**\n * @see https://v3.seed-design.io/docs/react/components/action-button\n */\nexport const ActionButton = React.forwardRef<\n  HTMLButtonElement,\n  ActionButtonProps\n>(\n  (\n    {\n      className,\n      variant = \"brandSolid\",\n      size = \"medium\",\n      children,\n      prefixIcon,\n      suffixIcon,\n      loading = false,\n      layout = \"withText\",\n      asChild = false,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const classNames = actionButton({ variant, layout, size });\n    const dataProps = {\n      \"data-loading\": loading ? \"\" : undefined,\n      \"data-disabled\": otherProps.disabled ? \"\" : undefined,\n    };\n\n    if (\n      layout === \"iconOnly\" &&\n      !(otherProps[\"aria-label\"] || otherProps[\"aria-labelledby\"])\n    ) {\n      console.warn(\n        \"When layout is 'iconOnly', 'aria-label' or 'aria-labelledby' should be provided.\",\n      );\n    }\n\n    return (\n      <Comp\n        ref={ref}\n        className={clsx(classNames.root, className)}\n        {...dataProps}\n        {...otherProps}\n      >\n        {layout === \"withText\" ? (\n          <>\n            {prefixIcon && (\n              <Slot\n                aria-hidden\n                {...dataProps}\n                className={classNames.prefixIcon}\n              >\n                {prefixIcon}\n              </Slot>\n            )}\n            <span {...dataProps} className={classNames.label}>\n              {children}\n            </span>\n            {suffixIcon && (\n              <Slot\n                aria-hidden\n                {...dataProps}\n                className={classNames.suffixIcon}\n              >\n                {suffixIcon}\n              </Slot>\n            )}\n          </>\n        ) : (\n          <Slot aria-hidden {...dataProps} className={classNames.icon}>\n            {children}\n          </Slot>\n        )}\n        {loading ? (\n          <ProgressCircle\n            {...dataProps}\n            className={classNames.progressCircle}\n          />\n        ) : null}\n      </Comp>\n    );\n  },\n);\nActionButton.displayName = \"ActionButton\";\n"
+      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/progressCircle.css\";\n// TODO: we have to ensure load order between actionButton.css and progressCircle.css. should we bundle them together?\nimport \"@seed-design/stylesheet/actionButton.css\";\n\nimport { ActionButton as SeedActionButton } from \"@seed-design/react\";\nimport * as React from \"react\";\n\nexport interface ActionButtonProps extends SeedActionButton.RootProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n}\n\n/**\n * @see https://v3.seed-design.io/docs/react/components/action-button\n */\nexport const ActionButton = React.forwardRef<\n  React.ElementRef<typeof SeedActionButton.Root>,\n  ActionButtonProps\n>(\n  (\n    {\n      className,\n      loading = false,\n      layout = \"withText\",\n      prefixIcon,\n      suffixIcon,\n      children,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    return (\n      <SeedActionButton.Root\n        ref={ref}\n        loading={loading}\n        layout={layout}\n        {...otherProps}\n      >\n        {layout === \"withText\" ? (\n          <>\n            {prefixIcon && <SeedActionButton.PrefixIcon svg={prefixIcon} />}\n            <SeedActionButton.Label>{children}</SeedActionButton.Label>\n            {suffixIcon && <SeedActionButton.SuffixIcon svg={suffixIcon} />}\n          </>\n        ) : (\n          <SeedActionButton.Icon svg={children} />\n        )}\n        {loading ? <SeedActionButton.ProgressCircle /> : null}\n      </SeedActionButton.Root>\n    );\n  },\n);\nActionButton.displayName = \"ActionButton\";\n\n/**\n * This file is generated snippet from the Seed Design.\n * You can extend the functionality from this snippet if needed.\n */\n"
     }
   ]
 }

docs/public/__registry__/ui/action-chip.json

@@ -7,7 +7,7 @@
     {
       "name": "action-chip.tsx",
       "type": "ui",
-      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport {\n  actionChip,\n  type ActionChipVariantProps,\n} from \"@seed-design/recipe/actionChip\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/actionChip.css\";\n\nexport interface ActionChipProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    ActionChipVariantProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n\n  count?: number;\n\n  asChild?: boolean;\n}\n\nexport const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(\n  (\n    {\n      className,\n      size = \"medium\",\n      layout = \"withText\",\n      children,\n      prefixIcon,\n      suffixIcon,\n      count,\n      asChild = false,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const classNames = actionChip({ size, layout });\n    return (\n      <Comp\n        ref={ref}\n        className={clsx(classNames.root, className)}\n        {...otherProps}\n      >\n        {layout === \"withText\" ? (\n          <>\n            {prefixIcon && (\n              <Slot className={classNames.prefixIcon}>{prefixIcon}</Slot>\n            )}\n            <span className={classNames.label}>{children}</span>\n            {count && <span className={classNames.count}>{count}</span>}\n            {suffixIcon && (\n              <Slot className={classNames.suffixIcon}>{suffixIcon}</Slot>\n            )}\n          </>\n        ) : (\n          <Slot className={classNames.icon}>{children}</Slot>\n        )}\n      </Comp>\n    );\n  },\n);\nActionChip.displayName = \"ActionChip\";\n"
+      "content": "\"use client\";\n\nimport { ActionChip as SeedActionChip } from \"@seed-design/react\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/actionChip.css\";\n\nexport interface ActionChipProps extends SeedActionChip.RootProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n\n  count?: number;\n}\n\nexport const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(\n  (\n    {\n      className,\n      size = \"medium\",\n      layout = \"withText\",\n      children,\n      prefixIcon,\n      suffixIcon,\n      count,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    return (\n      <SeedActionChip.Root ref={ref} {...otherProps}>\n        {layout === \"withText\" ? (\n          <>\n            {prefixIcon && <SeedActionChip.PrefixIcon svg={prefixIcon} />}\n            <SeedActionChip.Label>{children}</SeedActionChip.Label>\n            {count && <SeedActionChip.Count>{count}</SeedActionChip.Count>}\n            {suffixIcon && <SeedActionChip.SuffixIcon svg={suffixIcon} />}\n          </>\n        ) : (\n          <SeedActionChip.Icon svg={children} />\n        )}\n      </SeedActionChip.Root>\n    );\n  },\n);\nActionChip.displayName = \"ActionChip\";\n\n/**\n * This file is generated snippet from the Seed Design.\n * You can extend the functionality from this snippet if needed.\n */\n"
     }
   ]
 }

docs/public/__registry__/ui/action-sheet.json

@@ -7,7 +7,7 @@
     {
       "name": "action-sheet.tsx",
       "type": "ui",
-      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/actionSheet.css\";\n\nimport { ActionSheet as SeedActionSheet } from \"@seed-design/stackflow\";\nimport { forwardRef } from \"react\";\n\nexport interface ActionSheetProps extends SeedActionSheet.RootProps {}\n\n/**\n * @see https://v3.seed-design.io/docs/react/components/stackflow/action-sheet\n */\nexport const ActionSheet = forwardRef<HTMLDivElement, ActionSheetProps>(\n  ({ children, ...otherProps }, ref) => {\n    return (\n      <SeedActionSheet.Root ref={ref} {...otherProps}>\n        <SeedActionSheet.Backdrop />\n        <SeedActionSheet.Content>\n          <SeedActionSheet.List>{children}</SeedActionSheet.List>\n          <SeedActionSheet.Footer>\n            {/* You may implement your own i18n for dismiss label */}\n            <SeedActionSheet.CloseButton>닫기</SeedActionSheet.CloseButton>\n          </SeedActionSheet.Footer>\n        </SeedActionSheet.Content>\n      </SeedActionSheet.Root>\n    );\n  },\n);\n\nActionSheet.displayName = \"ActionSheet\";\n\nexport const ActionSheetGroup = SeedActionSheet.Group;\n\nexport const ActionSheetItem = SeedActionSheet.Item;\n"
+      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/actionSheet.css\";\nimport \"@seed-design/stylesheet/actionSheetItem.css\";\nimport \"@seed-design/stylesheet/actionSheetCloseButton.css\";\n\nimport { ActionSheet as SeedActionSheet } from \"@seed-design/stackflow\";\nimport { forwardRef } from \"react\";\n\nexport interface ActionSheetProps extends SeedActionSheet.RootProps {}\n\n/**\n * @see https://v3.seed-design.io/docs/react/components/stackflow/action-sheet\n */\nexport const ActionSheet = forwardRef<HTMLDivElement, ActionSheetProps>(\n  ({ children, ...otherProps }, ref) => {\n    return (\n      <SeedActionSheet.Root ref={ref} {...otherProps}>\n        <SeedActionSheet.Backdrop />\n        <SeedActionSheet.Content>\n          <SeedActionSheet.List>{children}</SeedActionSheet.List>\n          <SeedActionSheet.Footer>\n            {/* You may implement your own i18n for dismiss label */}\n            <SeedActionSheet.CloseButton>닫기</SeedActionSheet.CloseButton>\n          </SeedActionSheet.Footer>\n        </SeedActionSheet.Content>\n      </SeedActionSheet.Root>\n    );\n  },\n);\n\nActionSheet.displayName = \"ActionSheet\";\n\nexport const ActionSheetGroup = SeedActionSheet.Group;\n\nexport interface ActionSheetItemProps extends SeedActionSheet.ItemProps {\n  label: React.ReactNode;\n\n  prefixIcon?: React.ReactNode;\n}\n\nexport const ActionSheetItem = forwardRef<\n  HTMLButtonElement,\n  ActionSheetItemProps\n>(({ label, prefixIcon, ...otherProps }, ref) => {\n  return (\n    <SeedActionSheet.Item ref={ref} {...otherProps}>\n      <SeedActionSheet.ItemPrefixIcon svg={prefixIcon} />\n      <SeedActionSheet.ItemLabel>{label}</SeedActionSheet.ItemLabel>\n    </SeedActionSheet.Item>\n  );\n});\n"
     }
   ]
 }

docs/public/__registry__/ui/avatar.json

@@ -11,7 +11,7 @@
     {
       "name": "avatar.tsx",
       "type": "ui",
-      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/avatar.css\";\nimport \"@seed-design/stylesheet/avatarStack.css\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { useAvatar, type UseAvatarProps } from \"@seed-design/react-avatar\";\nimport { avatar, type AvatarVariantProps } from \"@seed-design/recipe/avatar\";\nimport {\n  avatarStack,\n  type AvatarStackVariantProps,\n} from \"@seed-design/recipe/avatarStack\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport { createStyleContext } from \"../util/createStyleContext\";\n\nconst { rootSlot, childSlot } = createStyleContext(avatar);\n\nconst UseAvatarContext = React.createContext<ReturnType<\n  typeof useAvatar\n> | null>(null);\n\nconst AvatarGroupContext = React.createContext<AvatarVariantProps | null>(null);\n\nexport interface AvatarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    AvatarVariantProps,\n    UseAvatarProps {\n  asChild?: boolean;\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  ({ className, size, children, asChild = false, ...otherProps }, ref) => {\n    const Comp = asChild ? Slot : \"div\";\n    const groupProps = React.useContext(AvatarGroupContext);\n\n    const { classNames, StyleProvider } = rootSlot({\n      size: groupProps?.size ?? size,\n    });\n    const api = useAvatar({ ...otherProps });\n    return (\n      <Comp\n        ref={ref}\n        className={clsx(classNames.root, className)}\n        {...api.rootProps}\n        {...api.restProps}\n      >\n        <StyleProvider>\n          <UseAvatarContext.Provider value={api}>\n            {children}\n          </UseAvatarContext.Provider>\n        </StyleProvider>\n      </Comp>\n    );\n  },\n);\nAvatar.displayName = \"Avatar\";\n\nexport interface AvatarImageProps\n  extends React.ImgHTMLAttributes<HTMLImageElement> {\n  asChild?: boolean;\n}\n\nexport const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(\n  (props, ref) => {\n    const { asChild = false, className, src, ...otherProps } = props;\n\n    const Comp = asChild ? Slot : \"img\";\n    const { classNames } = childSlot();\n    const { getImageProps } = React.useContext(UseAvatarContext)!;\n    const imageProps = getImageProps({ src });\n\n    return (\n      <Comp\n        ref={ref}\n        className={clsx(classNames.image, className)}\n        {...imageProps}\n        {...otherProps}\n      />\n    );\n  },\n);\nAvatarImage.displayName = \"AvatarImage\";\n\nexport interface AvatarFallbackProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  asChild?: boolean;\n}\n\nexport const AvatarFallback = React.forwardRef<\n  HTMLDivElement,\n  AvatarFallbackProps\n>((props, ref) => {\n  const { asChild = false, className, ...otherProps } = props;\n\n  const Comp = asChild ? Slot : \"div\";\n  const { classNames } = childSlot();\n  const { fallbackProps } = React.useContext(UseAvatarContext)!;\n  return (\n    <Comp\n      ref={ref}\n      className={clsx(classNames.fallback, className)}\n      {...fallbackProps}\n      {...otherProps}\n    />\n  );\n});\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport interface AvatarBadgeProps extends React.HTMLAttributes<HTMLDivElement> {\n  asChild?: boolean;\n}\n\nexport const AvatarBadge = React.forwardRef<HTMLDivElement, AvatarBadgeProps>(\n  (props, ref) => {\n    const { asChild = false, className, ...otherProps } = props;\n\n    const Comp = asChild ? Slot : \"div\";\n    const { classNames } = childSlot();\n    return (\n      <Comp\n        ref={ref}\n        className={clsx(classNames.badge, className)}\n        {...otherProps}\n      />\n    );\n  },\n);\nAvatarBadge.displayName = \"AvatarBadge\";\n\ninterface AvatarStackProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    AvatarStackVariantProps {}\n\nexport const AvatarStack = React.forwardRef<HTMLDivElement, AvatarStackProps>(\n  ({ className, children, size, ...otherProps }, ref) => {\n    const classNames = avatarStack({ size });\n    const avatars = React.Children.toArray(children);\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.root, className)}\n        {...otherProps}\n      >\n        <AvatarGroupContext.Provider value={{ size }}>\n          {avatars.map((avatar, index) => (\n            <div\n              key={index}\n              className={classNames.item}\n              // style={{\n              //   zIndex: avatars.length - index,\n              // }}\n            >\n              {avatar}\n            </div>\n          ))}\n        </AvatarGroupContext.Provider>\n      </div>\n    );\n  },\n);\n"
+      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/avatar.css\";\nimport \"@seed-design/stylesheet/avatarStack.css\";\n\nimport { Avatar as SeedAvatar } from \"@seed-design/react\";\nimport * as React from \"react\";\n\nexport interface AvatarProps extends SeedAvatar.RootProps {\n  src?: string;\n\n  alt?: string;\n\n  fallback?: React.ReactNode;\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  ({ src, alt, fallback, children, ...otherProps }, ref) => {\n    return (\n      <SeedAvatar.Root ref={ref} {...otherProps}>\n        <SeedAvatar.Fallback>{fallback}</SeedAvatar.Fallback>\n        <SeedAvatar.Image src={src} alt={alt} />\n        {children}\n      </SeedAvatar.Root>\n    );\n  },\n);\nAvatar.displayName = \"Avatar\";\n\nexport interface AvatarBadgeProps extends SeedAvatar.BadgeProps {}\n\nexport const AvatarBadge = SeedAvatar.Badge;\n\nexport interface AvatarStackProps extends SeedAvatar.StackProps {}\n\nexport const AvatarStack = SeedAvatar.Stack;\n\n/**\n * This file is generated snippet from the Seed Design.\n * You can extend the functionality from this snippet if needed.\n */\n"
     }
   ]
 }

docs/public/__registry__/ui/badge.json

@@ -7,7 +7,7 @@
     {
       "name": "badge.tsx",
       "type": "ui",
-      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { badge, type BadgeVariantProps } from \"@seed-design/recipe/badge\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/badge.css\";\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    BadgeVariantProps {\n  asChild?: boolean;\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  (\n    {\n      className,\n      size = \"medium\",\n      shape = \"rectangle\",\n      variant = \"weak\",\n      tone = \"neutral\",\n      children,\n      asChild = false,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"span\";\n    const classNames = badge({ size, shape, variant, tone });\n    return (\n      <Comp\n        ref={ref}\n        className={clsx(classNames.root, className)}\n        {...otherProps}\n      >\n        <span className={classNames.label}>{children}</span>\n      </Comp>\n    );\n  },\n);\nBadge.displayName = \"Badge\";\n"
+      "content": "\"use client\";\n\nimport { Badge as SeedBadge } from \"@seed-design/react\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/badge.css\";\n\nexport interface BadgeProps extends SeedBadge.RootProps {}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ children, ...otherProps }, ref) => {\n    return (\n      <SeedBadge.Root ref={ref} {...otherProps}>\n        <SeedBadge.Label>{children}</SeedBadge.Label>\n      </SeedBadge.Root>\n    );\n  },\n);\nBadge.displayName = \"Badge\";\n"
     }
   ]
 }