@seed-design/figma 0.0.0-alpha-20260324091316

package/src/codegen/targets/react/component/handlers/field-button.ts

@@ -0,0 +1,192 @@
+import { defineComponentHandler } from "@/codegen/core";
+import * as sets from "@/entities/data/__generated__/component-sets";
+import * as components from "@/entities/data/__generated__/components";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import {
+  createFieldFooterHandler,
+  createFieldHeaderHandler,
+  type FieldFooterProps,
+  type FieldHeaderProps,
+} from "@/codegen/targets/react/component/handlers/field";
+import type {
+  FieldHeaderProperties,
+  FieldFooterProperties,
+  FieldButtonProperties,
+  InputButtonProperties,
+  InputButtonPrefixProperties,
+  InputButtonSuffixProperties,
+  ActionButtonGhostProperties,
+  GenericFieldButtonProps,
+} from "@/codegen/component-properties";
+import { findAllInstances, findOne } from "@/utils/figma-node";
+import type { NormalizedTextNode } from "@/normalizer";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("field-button");
+
+export const createFieldButtonHandler = (ctx: ComponentHandlerDeps) => {
+  const fieldHeaderHandler = createFieldHeaderHandler(ctx);
+  const fieldFooterHandler = createFieldFooterHandler(ctx);
+
+  return defineComponentHandler<FieldButtonProperties>(
+    sets.templateFieldButton.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const [inputButton] = findAllInstances<InputButtonProperties>({
+        node,
+        key: sets.componentInputButton.key,
+      });
+
+      const [clearButton] = findAllInstances<ActionButtonGhostProperties>({
+        node,
+        key: sets.componentActionButtonGhostButton.key,
+      });
+
+      const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
+        node,
+        key: sets.componentFieldHeader.key,
+      });
+      const [fieldFooter] = findAllInstances<FieldFooterProperties>({
+        node,
+        key: sets.componentFieldFooter.key,
+      });
+
+      // maxGraphemeCount and required can't be props of FieldButton
+      const { required: _required, ...headerProps } =
+        props["Show Header#40606:8"].value && fieldHeader
+          ? (fieldHeaderHandler.transform(fieldHeader, traverse).props as FieldHeaderProps)
+          : {};
+      const { maxGraphemeCount: _maxGraphemeCount, ...footerProps } =
+        props["Show Footer#40606:9"].value && fieldFooter
+          ? (fieldFooterHandler.transform(fieldFooter, traverse).props as FieldFooterProps)
+          : {};
+
+      const [prefix] = findAllInstances<InputButtonPrefixProperties>({
+        node: inputButton,
+        key: sets.privateComponentInputButtonPrefix.key,
+      });
+
+      const [suffix] = findAllInstances<InputButtonSuffixProperties>({
+        node: inputButton,
+        key: sets.privateComponentInputButtonSuffix.key,
+      });
+
+      const commonProps = {
+        ...(inputButton.componentProperties.State.value === "Disabled" && {
+          disabled: true,
+        }),
+        ...((inputButton.componentProperties.State.value === "Error" ||
+          inputButton.componentProperties.State.value === "Error Pressed") && {
+          invalid: true,
+        }),
+        ...(clearButton && {
+          showClearButton: true,
+        }),
+        ...(inputButton.componentProperties["Has Prefix#32514:10"].value === true &&
+          prefix &&
+          prefix.componentProperties.Type.value === "Icon" && {
+            prefixIcon: ctx.iconHandler.transform(prefix.componentProperties["Icon#34021:2"]),
+          }),
+        ...(inputButton.componentProperties["Has Suffix#32865:68"].value === true &&
+          suffix &&
+          suffix.componentProperties["Type (Figma Only)"].value === "Icon" && {
+            suffixIcon: ctx.iconHandler.transform(suffix.componentProperties["Icon#37963:0"]),
+          }),
+        ...(inputButton.componentProperties["Has Suffix#32865:68"].value === true &&
+          suffix &&
+          suffix.componentProperties["Type (Figma Only)"].value === "Text" && {
+            suffix: suffix.componentProperties["Suffix Text#34021:4"].value,
+          }),
+      };
+
+      // these can be fragile but better than having 9 different handlers
+      const placeholder = findOne(
+        node,
+        (node) => node.type === "TEXT" && node.name.toLowerCase().includes("placeholder"),
+      ) as NormalizedTextNode;
+
+      const value = findOne(
+        node,
+        (node) => node.type === "TEXT" && node.name.toLowerCase().includes("value"),
+      ) as NormalizedTextNode;
+
+      return createLocalSnippetElement(
+        "FieldButton",
+        { ...headerProps, ...footerProps, ...commonProps },
+        props["Has Value"].value === "True" && value
+          ? createLocalSnippetElement("FieldButtonValue", undefined, value.characters)
+          : placeholder
+            ? createLocalSnippetElement("FieldButtonPlaceholder", undefined, placeholder.characters)
+            : undefined,
+        { comment: "buttonProps를 통해 aria-label을 제공하세요." },
+      );
+    },
+  );
+};
+
+// TODO: those 4 are basically the same
+
+export const createSelectFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const fieldButtonHandler = createFieldButtonHandler(ctx);
+
+  return defineComponentHandler<GenericFieldButtonProps>(
+    components.privateTemplateSelectField.key,
+    (node, traverse) => {
+      const [fieldButton] = findAllInstances<FieldButtonProperties>({
+        node,
+        key: fieldButtonHandler.key,
+      });
+
+      return fieldButtonHandler.transform(fieldButton, traverse);
+    },
+  );
+};
+
+export const createDatePickerFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const fieldButtonHandler = createFieldButtonHandler(ctx);
+
+  return defineComponentHandler<GenericFieldButtonProps>(
+    components.privateTemplateDatePickerField.key,
+    (node, traverse) => {
+      const [fieldButton] = findAllInstances<FieldButtonProperties>({
+        node,
+        key: fieldButtonHandler.key,
+      });
+
+      return fieldButtonHandler.transform(fieldButton, traverse);
+    },
+  );
+};
+
+export const createTimePickerFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const fieldButtonHandler = createFieldButtonHandler(ctx);
+
+  return defineComponentHandler<GenericFieldButtonProps>(
+    components.privateTemplateTimePickerField.key,
+    (node, traverse) => {
+      const [fieldButton] = findAllInstances<FieldButtonProperties>({
+        node,
+        key: fieldButtonHandler.key,
+      });
+
+      return fieldButtonHandler.transform(fieldButton, traverse);
+    },
+  );
+};
+
+export const createAddressFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const fieldButtonHandler = createFieldButtonHandler(ctx);
+
+  return defineComponentHandler<GenericFieldButtonProps>(
+    components.privateTemplateAddressPickerField.key,
+    (node, traverse) => {
+      const [fieldButton] = findAllInstances<FieldButtonProperties>({
+        node,
+        key: fieldButtonHandler.key,
+      });
+
+      return fieldButtonHandler.transform(fieldButton, traverse);
+    },
+  );
+};

package/src/codegen/targets/react/component/handlers/field.ts

@@ -0,0 +1,164 @@
+import type {
+  FieldCharacterCountProperties,
+  FieldFooterProperties,
+  FieldHeaderProperties,
+  FieldIndicatorProperties,
+} from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { match } from "ts-pattern";
+import { findAllInstances } from "@/utils/figma-node";
+import { camelCase } from "change-case";
+
+export type FieldHeaderProps = FieldIndicatorProps & {
+  label?: string;
+  labelWeight?: string;
+};
+
+/**
+ * NOTE: only gives useful 'props' for field-related components but doesn't give fully functional code.
+ */
+export const createFieldHeaderHandler = (ctx: ComponentHandlerDeps) => {
+  const indicatorHandler = createFieldIndicatorHandler(ctx);
+
+  return defineComponentHandler<FieldHeaderProperties>(
+    metadata.componentFieldHeader.key,
+    (node, traverse) => {
+      const { componentProperties: props } = node;
+
+      const [indicator] = findAllInstances<FieldIndicatorProperties>({
+        node,
+        key: indicatorHandler.key,
+      });
+
+      // only returns some nice common props for Slider, TextField and more
+      return createSeedReactElement("__FieldHeader__", {
+        label: props["Label#34796:0"].value,
+        labelWeight: camelCase(props.Weight.value),
+        ...(indicator &&
+          (indicatorHandler.transform(indicator, traverse).props as FieldIndicatorProps)),
+      } satisfies FieldHeaderProps);
+    },
+  );
+};
+
+type FieldIndicatorProps = {
+  required?: boolean;
+  showRequiredIndicator?: boolean;
+  indicator?: string;
+};
+
+/**
+ * NOTE: only gives useful 'props' for field-related components but doesn't give fully functional code.
+ */
+const createFieldIndicatorHandler = (_ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<FieldIndicatorProperties>(
+    metadata.privateComponentFieldHeaderIndicator.key,
+    ({ componentProperties: props }) => {
+      const { required, showRequiredIndicator, indicator } = match(props.Type.value)
+        .with("Required Mark", () => ({
+          required: true,
+          showRequiredIndicator: true,
+          indicator: undefined,
+        }))
+        .with("Text", () => ({
+          required: undefined,
+          showRequiredIndicator: undefined,
+          indicator: props["Required Label#40606:3"].value,
+        }))
+        .exhaustive();
+
+      // only returns some nice common props for Slider, TextField and more
+      return createSeedReactElement("__FieldIndicator__", {
+        required,
+        showRequiredIndicator,
+        indicator,
+      } satisfies FieldIndicatorProps);
+    },
+  );
+};
+
+export type FieldFooterProps = FieldCharacterCountProps & {
+  description?: string;
+  maxGraphemeCount?: number;
+  invalid?: boolean;
+  errorMessage?: string;
+};
+
+/**
+ * NOTE: only gives useful 'props' for field-related components but doesn't give fully functional code.
+ */
+export const createFieldFooterHandler = (ctx: ComponentHandlerDeps) => {
+  const characterCountHandler = createFieldCharacterCountHandler(ctx);
+
+  return defineComponentHandler<FieldFooterProperties>(
+    metadata.componentFieldFooter.key,
+    (node, traverse) => {
+      const { componentProperties: props } = node;
+
+      const { description, maxGraphemeCount } = match(props.Type.value)
+        .with("Description", () => ({
+          description: props["Text#2770:0"].value,
+          maxGraphemeCount: undefined,
+        }))
+        .with("Description With Character Count", () => ({
+          description: props["Text#2770:0"].value,
+          maxGraphemeCount: undefined,
+        }))
+        .with("Character Count", () => {
+          const [characterCount] = findAllInstances<FieldCharacterCountProperties>({
+            node,
+            key: characterCountHandler.key,
+          });
+
+          return {
+            description: undefined,
+            ...(characterCount &&
+              (characterCountHandler.transform(characterCount, traverse)
+                .props as FieldCharacterCountProps)),
+          };
+        })
+        .exhaustive();
+
+      const { errorMessage, invalid } = match(props.Error.value === "true")
+        .with(true, () => ({
+          invalid: true,
+          errorMessage: props["Error Text#32821:0"].value,
+        }))
+        .with(false, () => ({
+          invalid: undefined,
+          errorMessage: undefined,
+        }))
+        .exhaustive();
+
+      // only returns some nice common props for Slider, TextField and more
+      return createSeedReactElement("__FieldFooter__", {
+        description,
+        maxGraphemeCount,
+        invalid,
+        errorMessage,
+      } satisfies FieldFooterProps);
+    },
+  );
+};
+
+type FieldCharacterCountProps = {
+  maxGraphemeCount?: number;
+};
+
+/**
+ * NOTE: only gives useful 'props' for field-related components but doesn't give fully functional code.
+ */
+const createFieldCharacterCountHandler = (_ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<FieldCharacterCountProperties>(
+    metadata.privateComponentFieldFooterCharacterCount.key,
+    ({ componentProperties: props }) => {
+      // only returns some nice common props for Slider, TextField and more
+      return createSeedReactElement("__FieldCharacterCount__", {
+        maxGraphemeCount: Number(props["Max Count#40960:4"].value),
+      } satisfies FieldCharacterCountProps);
+    },
+  );
+};

package/src/codegen/targets/react/component/handlers/floating-action-button.ts

@@ -0,0 +1,45 @@
+import type {
+  FloatingActionButtonButtonItemProperties,
+  FloatingActionButtonMenuItemProperties,
+  FloatingActionButtonProperties,
+} from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { findAllInstances } from "@/utils/figma-node";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("floating-action-button");
+
+export const createFloatingActionButtonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<FloatingActionButtonProperties>(
+    metadata.componentFloatingActionButton.key,
+    (node) => {
+      const [button] = findAllInstances<FloatingActionButtonButtonItemProperties>({
+        node,
+        key: metadata.privateComponentItemButtonType.key,
+      });
+      const [menu] = findAllInstances<FloatingActionButtonMenuItemProperties>({
+        node,
+        key: metadata.privateComponentItemMenuType.key,
+      });
+
+      const commonProps = (() => {
+        if (button)
+          return {
+            icon: ctx.iconHandler.transform(button.componentProperties["Icon#29766:18"]),
+            extended: button.componentProperties.Extended.value === "True",
+            label: button.componentProperties["Label#29808:0"].value,
+          };
+
+        if (menu)
+          return {
+            icon: ctx.iconHandler.transform(menu.componentProperties["Icon#29766:0"]),
+            extended: menu.componentProperties.Extended.value === "True",
+            label: menu.componentProperties["Label#29766:9"].value,
+          };
+      })();
+
+      return createLocalSnippetElement("FloatingActionButton", commonProps);
+    },
+  );

package/src/codegen/targets/react/component/handlers/help-bubble.ts

@@ -0,0 +1,73 @@
+import type { HelpBubbleProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("help-bubble");
+const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
+  createLocalSnippetHelper("action-button");
+
+export const createHelpBubbleHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<HelpBubbleProperties>(
+    metadata.componentHelpBubble.key,
+    ({ componentProperties: props }) => {
+      const placement:
+        | "top"
+        | "right"
+        | "bottom"
+        | "left"
+        | "top-end"
+        | "top-start"
+        | "right-end"
+        | "right-start"
+        | "bottom-end"
+        | "bottom-start"
+        | "left-end"
+        | "left-start" = (() => {
+        switch (props.Placement.value) {
+          case "Bottom-Left":
+            return "top-start";
+          case "Bottom-Center":
+            return "top";
+          case "Bottom-Right":
+            return "top-end";
+          case "Left-Top":
+            return "right-start";
+          case "Left-Center":
+            return "right";
+          case "Left-Bottom":
+            return "right-end";
+          case "Top-Left":
+            return "bottom-start";
+          case "Top-Center":
+            return "bottom";
+          case "Top-Right":
+            return "bottom-end";
+          case "Right-Top":
+            return "left-start";
+          case "Right-Center":
+            return "left";
+          case "Right-Bottom":
+            return "left-end";
+        }
+      })();
+
+      const commonProps = {
+        title: props["Title#62535:0"].value,
+        ...(props["Show Description#62499:0"].value && {
+          description: props["Description#62535:98"].value,
+        }),
+        defaultOpen: true,
+        showCloseButton: props["Show Close Button#40538:0"].value,
+        placement,
+      };
+
+      return createLocalSnippetElement(
+        "HelpBubbleTrigger",
+        commonProps,
+        createLocalSnippetElementTrigger("ActionButton", {}, "HelpBubble 열기"),
+        { comment: "필요에 따라 HelpBubbleAnchor로 변경하여 사용하세요." },
+      );
+    },
+  );

package/src/codegen/targets/react/component/handlers/identity-placeholder.ts

@@ -0,0 +1,20 @@
+import { defineComponentHandler } from "@/codegen/core";
+import { camelCase } from "change-case";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { IdentityPlaceholderProperties } from "@/codegen/component-properties";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("identity-placeholder");
+
+export const createIdentityPlaceholderHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<IdentityPlaceholderProperties>(
+    metadata.privateComponentIdentityPlaceholder.key,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        identity: camelCase(props.Identity.value),
+      };
+
+      return createLocalSnippetElement("IdentityPlaceholder", commonProps);
+    },
+  );

package/src/codegen/targets/react/component/handlers/image-frame.ts

@@ -0,0 +1,147 @@
+import type {
+  BadgeProperties,
+  ContentPlaceholderProperties,
+  ImageFrameIconProperties,
+  ImageFrameOverlayIndicatorProperties,
+  ImageFrameProperties,
+  ImageFrameReactionButtonProperties,
+} from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import * as components from "@/entities/data/__generated__/components";
+import { findAll, findAllInstances, findOne } from "@/utils/figma-node";
+import { createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { createBadgeHandler } from "@/codegen/targets/react/component/handlers/badge";
+import { createContentPlaceholderHandler } from "@/codegen/targets/react/component/handlers/content-placeholder";
+
+const CORNER_CONFIGS = [
+  {
+    showKey: "ㄴ Left Top#58686:165",
+    placement: "top-start",
+  },
+  {
+    showKey: "ㄴ Right Top#58686:198",
+    placement: "top-end",
+  },
+  {
+    showKey: "ㄴ Left Bottom#58686:231",
+    placement: "bottom-start",
+  },
+  {
+    showKey: "ㄴ Right Bottom#58686:264",
+    placement: "bottom-end",
+  },
+] as const satisfies ReadonlyArray<{
+  showKey: keyof ImageFrameProperties;
+  placement: string;
+}>;
+
+function formatRatio(ratioStr: `${number}:${number}`): string {
+  const [w, h] = ratioStr.split(":");
+
+  return `${w} / ${h}`;
+}
+
+export const createImageFrameBadgeHandler = (ctx: ComponentHandlerDeps) => {
+  const badgeHandler = createBadgeHandler(ctx);
+
+  return defineComponentHandler<{}>(components.componentImageFrameBadge.key, (node, traverse) => {
+    const [badge] = findAllInstances<BadgeProperties>({
+      node,
+      key: badgeHandler.key,
+    });
+
+    if (!badge) throw new Error("Badge component not found within ImageFrameBadge");
+
+    return { ...badgeHandler.transform(badge, traverse), tag: "ImageFrameBadge" };
+  });
+};
+
+export const createImageFrameReactionButtonHandler = (_ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<ImageFrameReactionButtonProperties>(
+    metadata.componentImageFrameReactionButton.key,
+    ({ componentProperties: props }) => {
+      return createSeedReactElement("ImageFrameReactionButton", {
+        ...(props.Selected.value === "True" && { defaultPressed: true }),
+      });
+    },
+  );
+};
+
+export const createImageFrameOverlayIndicatorHandler = (_ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<ImageFrameOverlayIndicatorProperties>(
+    components.componentImageFrameOverlayIndicator.key,
+    ({ componentProperties: props }) => {
+      return createSeedReactElement("ImageFrameIndicator", undefined, props["Text#58708:0"].value);
+    },
+  );
+};
+
+export const createImageFrameIconHandler = (ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<ImageFrameIconProperties>(
+    components.componentImageFrameIcon.key,
+    ({ componentProperties: props }) => {
+      return createSeedReactElement("ImageFrameIcon", {
+        svg: ctx.iconHandler.transform(props["Icon#58686:297"]),
+      });
+    },
+  );
+};
+
+export const createImageFrameHandler = (ctx: ComponentHandlerDeps) => {
+  const contentPlaceholderHandler = createContentPlaceholderHandler(ctx);
+
+  return defineComponentHandler<ImageFrameProperties>(
+    metadata.componentImageFrame.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const [placeholder] = findAllInstances<ContentPlaceholderProperties>({
+        node,
+        key: contentPlaceholderHandler.key,
+      });
+
+      const floaters = [];
+      for (const { showKey, placement } of CORNER_CONFIGS) {
+        if (!props[showKey].value) continue;
+
+        const slotName = showKey.split("#")[0];
+        const slotNode = findOne(node, (n) => "name" in n && n.name === slotName);
+        if (!slotNode) continue;
+
+        const child = traverse(slotNode);
+        if (!child) continue;
+
+        floaters.push(createSeedReactElement("ImageFrameFloater", { placement }, child));
+      }
+
+      const commonProps = {
+        src: `https://placehold.co/${node.absoluteBoundingBox?.width ?? 100}x${node.absoluteBoundingBox?.height ?? 100}`,
+        alt: "",
+        ratio: formatRatio(props.Ratio.value),
+
+        ...(props.Rounded.value === "True" && {
+          borderRadius: ctx.valueResolver.getFormattedValue.topLeftRadius(node),
+        }),
+
+        ...(placeholder && {
+          fallback: contentPlaceholderHandler.transform(placeholder, traverse),
+        }),
+
+        ...(node.layoutGrow === 1
+          ? { flexGrow: true }
+          : node.layoutAlign === "STRETCH"
+            ? { alignSelf: "stretch" }
+            : { width: ctx.valueResolver.getFormattedValue.width(node) }),
+      };
+
+      return createSeedReactElement(
+        "ImageFrame",
+        commonProps,
+        props["Show Overlay#58686:33"].value && floaters.length > 0 ? floaters : undefined,
+        { comment: "alt 텍스트를 제공해야 합니다." },
+      );
+    },
+  );
+};

package/src/codegen/targets/react/component/handlers/index.ts

@@ -0,0 +1,43 @@
+export * from "./action-button";
+export * from "./alert-dialog";
+export * from "./app-bar";
+export * from "./avatar";
+export * from "./avatar-stack";
+export * from "./badge";
+export * from "./bottom-sheet";
+export * from "./callout";
+export * from "./checkbox";
+export * from "./checkmark";
+export * from "./chip";
+export * from "./content-placeholder";
+export * from "./contextual-floating-button";
+export * from "./divider";
+export * from "./field-button";
+export * from "./floating-action-button";
+export * from "./help-bubble";
+export * from "./identity-placeholder";
+export * from "./image-frame";
+export * from "./legacy-select-box";
+export * from "./legacy-text-field";
+export * from "./list-header";
+export * from "./list-item";
+export * from "./manner-temp";
+export * from "./manner-temp-badge";
+export * from "./menu-sheet";
+export * from "./page-banner";
+export * from "./progress-circle";
+export * from "./radio-group";
+export * from "./radiomark";
+export * from "./reaction-button";
+export * from "./result-section";
+export * from "./segmented-control";
+export * from "./select-box";
+export * from "./skeleton";
+export * from "./slider";
+export * from "./snackbar";
+export * from "./switch";
+export * from "./switchmark";
+export * from "./tabs";
+export * from "./tag-group";
+export * from "./text-field";
+export * from "./toggle-button";