update switch, action chip, control chip

component-docs/metadatas/component.ts

@@ -13,6 +13,18 @@ export const componentMetadatas: ComponentMetadataSchema[] = [
     dependencies: ["@radix-ui/react-slot"],
     snippets: ["component/action-button.tsx"],
   },
+  {
+    name: "action-chip",
+    type: "component",
+    dependencies: ["@radix-ui/react-slot"],
+    snippets: ["component/action-chip.tsx"],
+  },
+  {
+    name: "control-chip",
+    type: "component",
+    dependencies: ["@radix-ui/react-slot"],
+    snippets: ["component/control-chip.tsx"],
+  },
   {
     name: "checkbox",
     type: "component",

component-docs/public/__mdx__/component/action-chip.mdx

@@ -0,0 +1,46 @@
+```tsx copy filename="action-chip.tsx"
+import { Slot } from "@radix-ui/react-slot";
+import { actionChip, type ActionChipVariantProps } from "@seed-design/recipe/actionChip";
+import clsx from "clsx";
+import * as React from "react";
+
+import "@seed-design/stylesheet/actionChip.css";
+
+export interface ActionChipProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    ActionChipVariantProps {
+  prefixIcon?: React.ReactNode;
+
+  suffixIcon?: React.ReactNode;
+}
+
+export const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(
+  (
+    {
+      className,
+      size = "medium",
+      layout = "withText",
+      children,
+      prefixIcon,
+      suffixIcon,
+      ...otherProps
+    },
+    ref,
+  ) => {
+    const classNames = actionChip({ size, layout });
+    return (
+      <button ref={ref} className={clsx(classNames.root, className)} {...otherProps}>
+        {prefixIcon && <Slot className={classNames.prefix}>{prefixIcon}</Slot>}
+        {layout === "withText" ? (
+          <span className={classNames.label}>{children}</span>
+        ) : (
+          <Slot className={classNames.icon}>{children}</Slot>
+        )}
+        {suffixIcon && <Slot className={classNames.suffix}>{suffixIcon}</Slot>}
+      </button>
+    );
+  },
+);
+ActionChip.displayName = "ActionChip";
+
+```

component-docs/public/__mdx__/component/control-chip.mdx

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

component-docs/public/__mdx__/react/action-chip-icon-only.mdx

@@ -0,0 +1,13 @@
+```tsx copy
+import IconAddFill from "@seed-design/icon/IconAddFill";
+import { ActionChip } from "seed-design/ui/action-chip";
+
+export default function ActionChipIconOnly() {
+  return (
+    <ActionChip layout="iconOnly">
+      <IconAddFill />
+    </ActionChip>
+  );
+}
+
+```

component-docs/public/__mdx__/react/action-chip-medium.mdx

@@ -0,0 +1,8 @@
+```tsx copy
+import { ActionChip } from "seed-design/ui/action-chip";
+
+export default function ActionChipMedium() {
+  return <ActionChip size="medium">라벨</ActionChip>;
+}
+
+```

component-docs/public/__mdx__/react/action-chip-prefix-icon.mdx

@@ -0,0 +1,9 @@
+```tsx copy
+import IconAddFill from "@seed-design/icon/IconAddFill";
+import { ActionChip } from "seed-design/ui/action-chip";
+
+export default function ActionChipPrefixIcon() {
+  return <ActionChip prefixIcon={<IconAddFill />}>라벨</ActionChip>;
+}
+
+```

component-docs/public/__mdx__/react/action-chip-preview.mdx

@@ -0,0 +1,8 @@
+```tsx copy
+import { ActionChip } from "seed-design/ui/action-chip";
+
+export default function ActionChipPreview() {
+  return <ActionChip>라벨</ActionChip>;
+}
+
+```

component-docs/public/__mdx__/react/action-chip-small.mdx

@@ -0,0 +1,8 @@
+```tsx copy
+import { ActionChip } from "seed-design/ui/action-chip";
+
+export default function ActionChipSmall() {
+  return <ActionChip size="small">라벨</ActionChip>;
+}
+
+```

component-docs/public/__mdx__/react/control-chip-icon-only.mdx

@@ -0,0 +1,13 @@
+```tsx copy
+import IconAddFill from "@seed-design/icon/IconAddFill";
+import { ControlChip } from "seed-design/ui/control-chip";
+
+export default function ControlChipIconOnly() {
+  return (
+    <ControlChip.Toggle layout="iconOnly">
+      <IconAddFill />
+    </ControlChip.Toggle>
+  );
+}
+
+```

component-docs/public/__mdx__/react/control-chip-medium.mdx

@@ -0,0 +1,8 @@
+```tsx copy
+import { ControlChip } from "seed-design/ui/control-chip";
+
+export default function ActionChipMedium() {
+  return <ControlChip.Toggle size="medium">라벨</ControlChip.Toggle>;
+}
+
+```

component-docs/public/__mdx__/react/control-chip-prefix-icon.mdx

@@ -0,0 +1,9 @@
+```tsx copy
+import IconAddFill from "@seed-design/icon/IconAddFill";
+import { ControlChip } from "seed-design/ui/control-chip";
+
+export default function ControlChipPrefixIcon() {
+  return <ControlChip.Toggle prefixIcon={<IconAddFill />}>라벨</ControlChip.Toggle>;
+}
+
+```

component-docs/public/__mdx__/react/control-chip-preview.mdx

@@ -0,0 +1,8 @@
+```tsx copy
+import { ControlChip } from "seed-design/ui/control-chip";
+
+export default function ControlChipPreview() {
+  return <ControlChip.Toggle>라벨</ControlChip.Toggle>;
+}
+
+```

component-docs/public/__mdx__/react/control-chip-small.mdx

@@ -0,0 +1,8 @@
+```tsx copy
+import { ControlChip } from "seed-design/ui/control-chip";
+
+export default function ActionChipSmall() {
+  return <ControlChip.Toggle size="small">라벨</ControlChip.Toggle>;
+}
+
+```

component-docs/public/__mdx__/react/tabs-layout-fill.mdx

@@ -3,26 +3,24 @@ import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "se
 
 export default function TabsLayoutFill() {
   return (
-    <div style={{ width: "360px" }}>
-      <Tabs defaultValue="1" layout="fill">
-        <TabTriggerList>
-          <TabTrigger value="1">라벨1</TabTrigger>
-          <TabTrigger value="2">라벨2</TabTrigger>
-          <TabTrigger value="3">라벨3</TabTrigger>
-        </TabTriggerList>
-        <TabContentList>
-          <TabContent value="1">
-            <div>Content 1</div>
-          </TabContent>
-          <TabContent value="2">
-            <div>Content 2</div>
-          </TabContent>
-          <TabContent value="3">
-            <div>Content 3</div>
-          </TabContent>
-        </TabContentList>
-      </Tabs>
-    </div>
+    <Tabs defaultValue="1" layout="fill">
+      <TabTriggerList>
+        <TabTrigger value="1">라벨1</TabTrigger>
+        <TabTrigger value="2">라벨2</TabTrigger>
+        <TabTrigger value="3">라벨3</TabTrigger>
+      </TabTriggerList>
+      <TabContentList>
+        <TabContent value="1">
+          <div>Content 1</div>
+        </TabContent>
+        <TabContent value="2">
+          <div>Content 2</div>
+        </TabContent>
+        <TabContent value="3">
+          <div>Content 3</div>
+        </TabContent>
+      </TabContentList>
+    </Tabs>
   );
 }
 

component-docs/public/__mdx__/react/tabs-layout-hug.mdx

@@ -3,26 +3,24 @@ import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "se
 
 export default function TabsLayoutHug() {
   return (
-    <div style={{ width: "360px" }}>
-      <Tabs defaultValue="1" layout="hug">
-        <TabTriggerList>
-          <TabTrigger value="1">라벨1</TabTrigger>
-          <TabTrigger value="2">라벨2</TabTrigger>
-          <TabTrigger value="3">라벨3</TabTrigger>
-        </TabTriggerList>
-        <TabContentList>
-          <TabContent value="1">
-            <div>Content 1</div>
-          </TabContent>
-          <TabContent value="2">
-            <div>Content 2</div>
-          </TabContent>
-          <TabContent value="3">
-            <div>Content 3</div>
-          </TabContent>
-        </TabContentList>
-      </Tabs>
-    </div>
+    <Tabs defaultValue="1" layout="hug">
+      <TabTriggerList>
+        <TabTrigger value="1">라벨1</TabTrigger>
+        <TabTrigger value="2">라벨2</TabTrigger>
+        <TabTrigger value="3">라벨3</TabTrigger>
+      </TabTriggerList>
+      <TabContentList>
+        <TabContent value="1">
+          <div>Content 1</div>
+        </TabContent>
+        <TabContent value="2">
+          <div>Content 2</div>
+        </TabContent>
+        <TabContent value="3">
+          <div>Content 3</div>
+        </TabContent>
+      </TabContentList>
+    </Tabs>
   );
 }
 

component-docs/public/__mdx__/react/tabs-size-medium.mdx

@@ -3,26 +3,24 @@ import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "se
 
 export default function TabsSizeMedium() {
   return (
-    <div style={{ width: "360px" }}>
-      <Tabs defaultValue="1" size="medium">
-        <TabTriggerList>
-          <TabTrigger value="1">라벨1</TabTrigger>
-          <TabTrigger value="2">라벨2</TabTrigger>
-          <TabTrigger value="3">라벨3</TabTrigger>
-        </TabTriggerList>
-        <TabContentList>
-          <TabContent value="1">
-            <div>Content 1</div>
-          </TabContent>
-          <TabContent value="2">
-            <div>Content 2</div>
-          </TabContent>
-          <TabContent value="3">
-            <div>Content 3</div>
-          </TabContent>
-        </TabContentList>
-      </Tabs>
-    </div>
+    <Tabs defaultValue="1" size="medium">
+      <TabTriggerList>
+        <TabTrigger value="1">라벨1</TabTrigger>
+        <TabTrigger value="2">라벨2</TabTrigger>
+        <TabTrigger value="3">라벨3</TabTrigger>
+      </TabTriggerList>
+      <TabContentList>
+        <TabContent value="1">
+          <div>Content 1</div>
+        </TabContent>
+        <TabContent value="2">
+          <div>Content 2</div>
+        </TabContent>
+        <TabContent value="3">
+          <div>Content 3</div>
+        </TabContent>
+      </TabContentList>
+    </Tabs>
   );
 }