@exem-ui/react 0.1.0-next.bf3c711

package/dist/chunk-4WAO7CUT.mjs

@@ -0,0 +1,95 @@
+import { cva, cn } from '@exem-ui/core/utils';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { createContext, forwardRef, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/tabs/Tabs.tsx
+var TabsContext = createContext({ type: "primary" });
+var useTabsContext = () => {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("useTabsContext must be used within a TabsProvider");
+  }
+  return context;
+};
+var tabsListVariants = cva("inline-flex items-center", {
+  variants: {
+    type: {
+      primary: "h-9 gap-5 border-b border-border-primary",
+      secondary: "h-8 gap-1"
+    }
+  },
+  defaultVariants: {
+    type: "primary"
+  }
+});
+var tabsTriggerVariants = cva(
+  "group inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-pretendard font-semibold text-body-2 leading-[140%] transition-all disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      type: {
+        primary: [
+          "h-9 border-b-2 border-transparent p-0 text-text-tertiary",
+          "hover:text-text-primary",
+          "data-[state=active]:border-border-focused data-[state=active]:text-text-primary"
+        ],
+        secondary: [
+          "h-8 rounded-strong px-2 text-text-tertiary",
+          "hover:text-text-primary",
+          "data-[state=active]:rounded-medium data-[state=active]:bg-elevation-elevation-2 data-[state=active]:text-text-primary"
+        ]
+      }
+    },
+    defaultVariants: {
+      type: "primary"
+    }
+  }
+);
+var Tabs = forwardRef(
+  ({ type = "primary", children, ...props }, ref) => /* @__PURE__ */ jsx(TabsContext.Provider, { value: { type }, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props, children }) })
+);
+Tabs.List = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { type } = useTabsContext();
+    return /* @__PURE__ */ jsx(
+      TabsPrimitive.List,
+      {
+        ref,
+        className: cn(tabsListVariants({ type }), className),
+        ...props
+      }
+    );
+  }
+);
+Tabs.Trigger = forwardRef(
+  ({ className, leftIcon, rightIcon, badge, children, ...props }, ref) => {
+    const { type } = useTabsContext();
+    return /* @__PURE__ */ jsxs(
+      TabsPrimitive.Trigger,
+      {
+        ref,
+        className: cn(tabsTriggerVariants({ type }), className),
+        ...props,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx("span", { className: "size-4", children: leftIcon }),
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+            children,
+            badge && /* @__PURE__ */ jsx("span", { className: "text-text-tertiary group-data-[state=active]:text-text-accent", children: badge })
+          ] }),
+          rightIcon && /* @__PURE__ */ jsx("span", { className: "size-4", children: rightIcon })
+        ]
+      }
+    );
+  }
+);
+Tabs.Content = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Content, { ref, className: cn(className), ...props })
+);
+Tabs.displayName = "Tabs";
+Tabs.List.displayName = "Tabs.List";
+Tabs.Trigger.displayName = "Tabs.Trigger";
+Tabs.Content.displayName = "Tabs.Content";
+
+export { Tabs };
+//# sourceMappingURL=chunk-4WAO7CUT.mjs.map
+//# sourceMappingURL=chunk-4WAO7CUT.mjs.map

package/dist/chunk-4WAO7CUT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tabs/Tabs.tsx"],"names":[],"mappings":"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","file":"chunk-4WAO7CUT.mjs","sourcesContent":["import { cn, cva } from '@exem-ui/core/utils';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport type React from 'react';\nimport { createContext, forwardRef, useContext } from 'react';\n\ntype TabsType = 'primary' | 'secondary';\n\ntype TabsContextType = {\n  type: TabsType;\n};\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n  /**\n   * 탭 스타일 유형\n   * @default 'primary'\n   */\n  type?: TabsType;\n};\n\ntype TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;\n\ntype TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {\n  /** 텍스트 왼쪽에 표시할 아이콘 요소 */\n  leftIcon?: React.ReactElement<{ className?: string }>;\n  /** 텍스트 오른쪽에 표시할 아이콘 요소 */\n  rightIcon?: React.ReactElement<{ className?: string }>;\n  /** 탭 라벨 옆에 표시할 배지 텍스트 */\n  badge?: string | number;\n};\n\ntype TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;\n\ntype TabsComponent = React.ForwardRefExoticComponent<\n  TabsRootProps & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Root>>\n> & {\n  List: React.ForwardRefExoticComponent<TabsListProps>;\n  Trigger: React.ForwardRefExoticComponent<TabsTriggerProps>;\n  Content: React.ForwardRefExoticComponent<TabsContentProps>;\n};\n\nconst TabsContext = createContext<TabsContextType>({ type: 'primary' });\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('useTabsContext must be used within a TabsProvider');\n  }\n  return context;\n};\n\n// TabsList variants\nconst tabsListVariants = cva('inline-flex items-center', {\n  variants: {\n    type: {\n      primary: 'h-9 gap-5 border-b border-border-primary',\n      secondary: 'h-8 gap-1',\n    },\n  },\n  defaultVariants: {\n    type: 'primary',\n  },\n});\n\n// TabsTrigger variants\nconst tabsTriggerVariants = cva(\n  'group inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-pretendard font-semibold text-body-2 leading-[140%] transition-all disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      type: {\n        primary: [\n          'h-9 border-b-2 border-transparent p-0 text-text-tertiary',\n          'hover:text-text-primary',\n          'data-[state=active]:border-border-focused data-[state=active]:text-text-primary',\n        ],\n        secondary: [\n          'h-8 rounded-strong px-2 text-text-tertiary',\n          'hover:text-text-primary',\n          'data-[state=active]:rounded-medium data-[state=active]:bg-elevation-elevation-2 data-[state=active]:text-text-primary',\n        ],\n      },\n    },\n    defaultVariants: {\n      type: 'primary',\n    },\n  },\n);\n\n/**\n * 탭 형태의 콘텐츠 전환 컴포넌트입니다.\n * Compound Component 패턴으로 `Tabs.List`, `Tabs.Trigger`, `Tabs.Content`와 함께 사용합니다.\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"tab1\" type=\"primary\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"tab1\">첫 번째</Tabs.Trigger>\n *     <Tabs.Trigger value=\"tab2\">두 번째</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"tab1\">첫 번째 내용</Tabs.Content>\n *   <Tabs.Content value=\"tab2\">두 번째 내용</Tabs.Content>\n * </Tabs>\n * ```\n *\n * @see {@link TabsRootProps} 루트 props 상세\n * @see {@link TabsTriggerProps} 트리거 props 상세\n */\nconst Tabs = forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, TabsRootProps>(\n  ({ type = 'primary', children, ...props }, ref) => (\n    <TabsContext.Provider value={{ type }}>\n      <TabsPrimitive.Root ref={ref} {...props}>\n        {children}\n      </TabsPrimitive.Root>\n    </TabsContext.Provider>\n  ),\n) as TabsComponent;\n\nTabs.List = forwardRef<React.ElementRef<typeof TabsPrimitive.List>, TabsListProps>(\n  ({ className, ...props }, ref) => {\n    const { type } = useTabsContext();\n    return (\n      <TabsPrimitive.List\n        ref={ref}\n        className={cn(tabsListVariants({ type }), className)}\n        {...props}\n      />\n    );\n  },\n) as TabsComponent['List'];\n\nTabs.Trigger = forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>(\n  ({ className, leftIcon, rightIcon, badge, children, ...props }, ref) => {\n    const { type } = useTabsContext();\n    return (\n      <TabsPrimitive.Trigger\n        ref={ref}\n        className={cn(tabsTriggerVariants({ type }), className)}\n        {...props}\n      >\n        {leftIcon && <span className=\"size-4\">{leftIcon}</span>}\n        <span className=\"flex items-center gap-1\">\n          {children}\n          {badge && (\n            <span className=\"text-text-tertiary group-data-[state=active]:text-text-accent\">\n              {badge}\n            </span>\n          )}\n        </span>\n        {rightIcon && <span className=\"size-4\">{rightIcon}</span>}\n      </TabsPrimitive.Trigger>\n    );\n  },\n) as TabsComponent['Trigger'];\n\nTabs.Content = forwardRef<React.ElementRef<typeof TabsPrimitive.Content>, TabsContentProps>(\n  ({ className, ...props }, ref) => (\n    <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />\n  ),\n) as TabsComponent['Content'];\n\nTabs.displayName = 'Tabs';\nTabs.List.displayName = 'Tabs.List';\nTabs.Trigger.displayName = 'Tabs.Trigger';\nTabs.Content.displayName = 'Tabs.Content';\n\nexport { Tabs };\nexport type { TabsComponent, TabsRootProps, TabsListProps, TabsTriggerProps, TabsContentProps };\n"]}