chore: add registries in component registry

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

@@ -3,7 +3,10 @@
   "dependencies": [
     "@radix-ui/react-slot"
   ],
-  "files": [
-    "component/action-button.tsx"
+  "registries": [
+    {
+      "name": "action-button.tsx",
+      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/actionButton.css\";\n\nimport * as React from \"react\";\nimport clsx from \"clsx\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { actionButton, type ActionButtonVariantProps } from \"@seed-design/recipe/actionButton\";\n\nexport interface ActionButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    ActionButtonVariantProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n\n  asChild?: boolean;\n}\n\n/**\n * @see https://component.seed-design.io/components/box-button\n */\nexport const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(\n  (\n    {\n      className,\n      variant = \"brandSolid\",\n      size = \"medium\",\n      children,\n      prefixIcon,\n      suffixIcon,\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    return (\n      <Comp ref={ref} className={clsx(classNames.root, className)} {...otherProps}>\n        {prefixIcon && <Slot className={classNames.prefixIcon}>{prefixIcon}</Slot>}\n        {layout === \"withText\" ? (\n          <span className={classNames.label}>{children}</span>\n        ) : (\n          <Slot className={classNames.icon}>{children}</Slot>\n        )}\n        {suffixIcon && <Slot className={classNames.suffixIcon}>{suffixIcon}</Slot>}\n      </Comp>\n    );\n  },\n);\nActionButton.displayName = \"ActionButton\";\n"
+    }
   ]
 }

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

@@ -3,7 +3,10 @@
   "dependencies": [
     "@radix-ui/react-slot"
   ],
-  "files": [
-    "component/action-chip.tsx"
+  "registries": [
+    {
+      "name": "action-chip.tsx",
+      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { actionChip, type ActionChipVariantProps } 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  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      asChild = false,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const classNames = actionChip({ size, layout });\n    return (\n      <Comp ref={ref} className={clsx(classNames.root, className)} {...otherProps}>\n        {prefixIcon && <Slot className={classNames.prefix}>{prefixIcon}</Slot>}\n        {layout === \"withText\" ? (\n          <span className={classNames.label}>{children}</span>\n        ) : (\n          <Slot className={classNames.icon}>{children}</Slot>\n        )}\n        {suffixIcon && <Slot className={classNames.suffix}>{suffixIcon}</Slot>}\n      </Comp>\n    );\n  },\n);\nActionChip.displayName = \"ActionChip\";\n"
+    }
   ]
 }

component-docs/public/__registry__/component/alert-dialog.json

@@ -3,7 +3,10 @@
   "innerDependencies": [
     "action-button"
   ],
-  "files": [
-    "component/alert-dialog.tsx"
+  "registries": [
+    {
+      "name": "alert-dialog.tsx",
+      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/dialog.css\";\n\nimport * as React from \"react\";\nimport { dialog } from \"@seed-design/recipe/dialog\";\n\nimport { ActionButton } from \"./action-button\";\n\nexport type AlertDialogProps = {\n  title: string;\n  description: string;\n  onInteractOutside?: React.MouseEventHandler;\n};\n\n/**\n * @see https://component.seed-design.io/components/alert-dialog\n */\nexport const AlertDialog: React.FC<AlertDialogProps> = ({\n  title,\n  description,\n  onInteractOutside,\n}) => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const backdropRef = React.useRef<HTMLDivElement>(null);\n\n  const popLock = React.useRef(false);\n\n  const onClickOutside: React.MouseEventHandler = (e) => {\n    onInteractOutside?.(e);\n\n    if (e.defaultPrevented) {\n      return;\n    }\n\n    if (popLock.current) {\n      return;\n    }\n    popLock.current = true;\n  };\n  const onClickContent: React.MouseEventHandler = (e) => {\n    e.stopPropagation();\n  };\n\n  const classNames = dialog();\n\n  return (\n    <div\n      ref={containerRef}\n      role=\"alertdialog\"\n      className={classNames.container}\n      onClick={onClickOutside}\n    >\n      <div ref={backdropRef} className={classNames.backdrop} />\n      <div onClick={onClickContent} className={classNames.content}>\n        <div className={classNames.header}>\n          <h2 className={classNames.title}>{title}</h2>\n          <p className={classNames.description}>{description}</p>\n        </div>\n        <div className={classNames.footer}>\n          <ActionButton className={classNames.action}>lol</ActionButton>\n          <ActionButton className={classNames.action}>lol</ActionButton>\n        </div>\n      </div>\n    </div>\n  );\n};\nAlertDialog.displayName = \"AlertDialog\";\n"
+    }
   ]
 }

component-docs/public/__registry__/component/checkbox.json

@@ -3,7 +3,10 @@
   "dependencies": [
     "@seed-design/react-checkbox"
   ],
-  "files": [
-    "component/checkbox.tsx"
+  "registries": [
+    {
+      "name": "checkbox.tsx",
+      "content": "\"use client\";\n\nimport { type UseCheckboxProps, useCheckbox } from \"@seed-design/react-checkbox\";\nimport { type CheckboxVariantProps, checkbox } from \"@seed-design/recipe/checkbox\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport type { CSSProperties } from \"react\";\n\nimport \"@seed-design/stylesheet/checkbox.css\";\n\ntype Assign<T, U> = Omit<T, keyof U> & U;\n\nconst visuallyHidden: CSSProperties = {\n  border: 0,\n  clip: \"rect(0 0 0 0)\",\n  height: \"1px\",\n  margin: \"-1px\",\n  overflow: \"hidden\",\n  padding: 0,\n  position: \"absolute\",\n  whiteSpace: \"nowrap\",\n  width: \"1px\",\n};\n\nconst Checkmark = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>((props, ref) => (\n  <svg\n    aria-hidden=\"true\"\n    ref={ref}\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M17.5179 6.98877C17.9658 7.3118 18.0671 7.93681 17.7441 8.38478L11.7108 16.7515C11.5351 16.9952 11.2591 17.1469 10.9592 17.1648C10.6593 17.1827 10.3672 17.0647 10.1638 16.8436L6.33048 12.677C5.95655 12.2705 5.98291 11.6379 6.38935 11.264C6.7958 10.89 7.42841 10.9164 7.80234 11.3228L10.8056 14.5873L16.1219 7.21498C16.4449 6.76702 17.0699 6.66574 17.5179 6.98877Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n));\n\nexport interface CheckboxProps\n  extends Assign<React.HTMLAttributes<HTMLInputElement>, UseCheckboxProps>,\n    CheckboxVariantProps {\n  label: React.ReactNode;\n}\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, size = \"medium\", label, ...otherProps }, ref) => {\n    const { stateProps, restProps, controlProps, hiddenInputProps, rootProps } =\n      useCheckbox(otherProps);\n\n    const classNames = checkbox({ size });\n    return (\n      <label className={clsx(classNames.root, className)} {...rootProps}>\n        <div {...controlProps} className={classNames.control}>\n          <Checkmark {...stateProps} className={classNames.icon} />\n        </div>\n        <input ref={ref} {...hiddenInputProps} {...restProps} style={visuallyHidden} />\n        <span {...stateProps} className={classNames.label}>\n          {label}\n        </span>\n      </label>\n    );\n  },\n);\nCheckbox.displayName = \"Checkbox\";\n"
+    }
   ]
 }

component-docs/public/__registry__/component/chip-tabs.json

@@ -3,7 +3,10 @@
   "dependencies": [
     "@seed-design/react-tabs"
   ],
-  "files": [
-    "component/chip-tabs.tsx"
+  "registries": [
+    {
+      "name": "chip-tabs.tsx",
+      "content": "\"use client\";\n\nimport {\n  useLazyContents,\n  useTabs,\n  type ContentProps,\n  type TriggerProps,\n  type UseLazyContentsProps,\n  type UseTabsProps,\n} from \"@seed-design/react-tabs\";\nimport { chipTab } from \"@seed-design/recipe/chipTab\";\nimport { ChipTabsVariant, chipTabs } from \"@seed-design/recipe/chipTabs\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/chipTab.css\";\nimport \"@seed-design/stylesheet/chipTabs.css\";\n\ntype Assign<T, U> = Omit<T, keyof U> & U;\n\ninterface ChipTabsContextValue {\n  api: ReturnType<typeof useTabs>;\n  classNames: ReturnType<typeof chipTabs>;\n  shouldRender: (value: string) => boolean;\n  variant: ChipTabsVariant[\"variant\"];\n}\n\nconst ChipTabsContext = React.createContext<ChipTabsContextValue | null>(null);\n\nconst useChipTabsContext = () => {\n  const context = React.useContext(ChipTabsContext);\n  if (!context) {\n    throw new Error(\"Tabs cannot be rendered outside the Tabs\");\n  }\n  return context;\n};\n\nexport interface ChipTabsProps\n  extends Assign<React.HTMLAttributes<HTMLDivElement>, Omit<UseTabsProps, \"layout\">>,\n    ChipTabsVariant,\n    Omit<UseLazyContentsProps, \"currentValue\"> {}\n\nexport const ChipTabs = React.forwardRef<HTMLDivElement, ChipTabsProps>((props, ref) => {\n  const { className, lazyMode, isLazy, variant } = props;\n  const api = useTabs(props);\n  const classNames = chipTabs({\n    variant,\n  });\n  const { rootProps, value, restProps } = api;\n  const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy });\n\n  return (\n    <div ref={ref} {...rootProps} {...restProps} className={clsx(classNames.root, className)}>\n      <ChipTabsContext.Provider\n        value={{\n          api,\n          classNames,\n          shouldRender,\n          variant,\n        }}\n      >\n        {props.children}\n      </ChipTabsContext.Provider>\n    </div>\n  );\n});\nChipTabs.displayName = \"ChipTabs\";\n\nexport const ChipTabTriggerList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...otherProps }, ref) => {\n  const { api, classNames } = useChipTabsContext();\n  const { tabTriggerListProps, triggerSize } = api;\n  const { left } = triggerSize;\n  const { triggerList } = classNames;\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);\n\n  React.useEffect(() => {\n    if (containerRef.current) {\n      containerRef.current?.scrollTo({\n        // NOTE: 27px is half of tab's min-width\n        left: left - 27,\n        behavior: \"smooth\",\n      });\n    }\n  }, [left]);\n\n  return (\n    <div\n      ref={containerRef}\n      {...tabTriggerListProps}\n      className={clsx(triggerList, className)}\n      {...otherProps}\n    >\n      {children}\n    </div>\n  );\n});\nChipTabTriggerList.displayName = \"ChipTabTriggerList\";\n\nexport interface ChipTabTriggerProps\n  extends Assign<React.HTMLAttributes<HTMLButtonElement>, TriggerProps> {}\n\nexport const ChipTabTrigger = React.forwardRef<HTMLButtonElement, ChipTabTriggerProps>(\n  ({ className, children, value, isDisabled, ...otherProps }, ref) => {\n    const { api, variant } = useChipTabsContext();\n    const { getTabTriggerProps } = api;\n    const { label, root } = chipTab({\n      variant,\n    });\n    const { rootProps, labelProps } = getTabTriggerProps({ value, isDisabled });\n\n    return (\n      <button ref={ref} {...rootProps} className={clsx(root, className)} {...otherProps}>\n        <span className={label} {...labelProps}>\n          {children}\n        </span>\n      </button>\n    );\n  },\n);\nChipTabTrigger.displayName = \"ChipTabTrigger\";\n\nexport const ChipTabContent = React.forwardRef<\n  HTMLDivElement,\n  Assign<React.HTMLAttributes<HTMLDivElement>, ContentProps>\n>(({ className, children, value, ...otherProps }, ref) => {\n  const { api, classNames, shouldRender } = useChipTabsContext();\n  const { getTabContentProps } = api;\n  const { content } = classNames;\n  const tabContentProps = getTabContentProps({ value });\n  const isRender = shouldRender(value);\n\n  return (\n    <div ref={ref} {...tabContentProps} className={clsx(content, className)} {...otherProps}>\n      {isRender && children}\n    </div>\n  );\n});\nChipTabContent.displayName = \"ChipTabContent\";\n"
+    }
   ]
 }

component-docs/public/__registry__/component/control-chip.json

@@ -3,7 +3,10 @@
   "dependencies": [
     "@radix-ui/react-slot"
   ],
-  "files": [
-    "component/control-chip.tsx"
+  "registries": [
+    {
+      "name": "control-chip.tsx",
+      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { controlChip, type ControlChipVariantProps } from \"@seed-design/recipe/controlChip\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/controlChip.css\";\nimport { UseCheckboxProps, useCheckbox } from \"@seed-design/react-checkbox\";\nimport { visuallyHidden } from \"../util/visuallyHidden\";\n\nexport interface ControlChipToggleProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">,\n    UseCheckboxProps,\n    ControlChipVariantProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n}\n\nconst ControlChipToggle = React.forwardRef<HTMLInputElement, ControlChipToggleProps>(\n  (\n    {\n      className,\n      size = \"medium\",\n      layout = \"withText\",\n      children,\n      prefixIcon,\n      suffixIcon,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const classNames = controlChip({ size, layout });\n    const { rootProps, hiddenInputProps, stateProps, restProps } = useCheckbox(otherProps);\n    return (\n      <label {...rootProps} className={clsx(classNames.root, className)}>\n        {prefixIcon && (\n          <Slot {...stateProps} className={classNames.prefix}>\n            {prefixIcon}\n          </Slot>\n        )}\n        {layout === \"withText\" ? (\n          <span {...stateProps} className={classNames.label}>\n            {children}\n          </span>\n        ) : (\n          <Slot {...stateProps} className={classNames.icon}>\n            {children}\n          </Slot>\n        )}\n        {suffixIcon && (\n          <Slot {...stateProps} className={classNames.suffix}>\n            {suffixIcon}\n          </Slot>\n        )}\n        <input ref={ref} {...hiddenInputProps} {...restProps} style={visuallyHidden} />\n      </label>\n    );\n  },\n);\nControlChipToggle.displayName = \"ControlChip.Toggle\";\n\nexport const ControlChip = Object.assign(\n  () => {\n    console.warn(\n      \"ControlChip is a base component and should not be rendered. Use ControlChip.Toggle or ControlChip.Radio instead.\",\n    );\n  },\n  {\n    Toggle: ControlChipToggle,\n  },\n);\n"
+    }
   ]
 }

component-docs/public/__registry__/component/expand-button.json

@@ -3,7 +3,10 @@
   "dependencies": [
     "@radix-ui/react-slot"
   ],
-  "files": [
-    "component/expand-button.tsx"
+  "registries": [
+    {
+      "name": "expand-button.tsx",
+      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/expandButton.css\";\n\nimport * as React from \"react\";\nimport clsx from \"clsx\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { expandButton, type ExpandButtonVariantProps } from \"@seed-design/recipe/expandButton\";\n\nexport interface ExpandButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    ExpandButtonVariantProps {\n  suffixIcon?: React.ReactNode;\n\n  asChild?: boolean;\n}\n\n/**\n * @see https://component.seed-design.io/components/box-button\n */\nexport const ExpandButton = React.forwardRef<HTMLButtonElement, ExpandButtonProps>(\n  ({ className, children, suffixIcon, asChild = false, ...otherProps }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    const classNames = expandButton({});\n    return (\n      <Comp ref={ref} className={clsx(classNames.root, className)} {...otherProps}>\n        <span className={classNames.label}>{children}</span>\n        {suffixIcon && <Slot className={classNames.suffixIcon}>{suffixIcon}</Slot>}\n      </Comp>\n    );\n  },\n);\nExpandButton.displayName = \"ExpandButton\";\n"
+    }
   ]
 }

component-docs/public/__registry__/component/switch.json

@@ -3,7 +3,10 @@
   "dependencies": [
     "@seed-design/react-switch"
   ],
-  "files": [
-    "component/switch.tsx"
+  "registries": [
+    {
+      "name": "switch.tsx",
+      "content": "import { type UseSwitchProps, useSwitch } from \"@seed-design/react-switch\";\nimport { type SwitchVariantProps, switchStyle } from \"@seed-design/recipe/switch\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport type { Assign } from \"../util/types\";\nimport { visuallyHidden } from \"../util/visuallyHidden\";\n\nimport \"@seed-design/stylesheet/switch.css\";\n\nexport interface SwitchProps\n  extends Assign<React.HTMLAttributes<HTMLInputElement>, UseSwitchProps>,\n    SwitchVariantProps {}\n\nexport const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(\n  ({ className, size = \"medium\", ...otherProps }, ref) => {\n    const { restProps, controlProps, hiddenInputProps, rootProps, thumbProps } =\n      useSwitch(otherProps);\n    const classNames = switchStyle({ size });\n\n    return (\n      <label className={clsx(classNames.root, className)} {...rootProps}>\n        <div {...controlProps} className={classNames.control}>\n          <div {...thumbProps} className={classNames.thumb} />\n        </div>\n        <input ref={ref} {...hiddenInputProps} {...restProps} style={visuallyHidden} />\n      </label>\n    );\n  },\n);\nSwitch.displayName = \"Switch\";\n"
+    }
   ]
 }