@jbpark/ui-kit 2.8.0 → 2.9.0

package/README.ko.md

@@ -141,13 +141,29 @@ function App() {
 
 ```tsx
 // Typography 컴포넌트
+// Button 컴포넌트
+import { Button } from '@jbpark/ui-kit/Button';
+// Card 컴포넌트
+import { Card } from '@jbpark/ui-kit/Card';
+// Layout 컴포넌트
+import { Layout } from '@jbpark/ui-kit/Layout';
 // Menu 컴포넌트
 import { Menu } from '@jbpark/ui-kit/Menu';
 // Reveals 컴포넌트
 import { Reveals } from '@jbpark/ui-kit/Reveals';
+// Space 컴포넌트
+import { Space } from '@jbpark/ui-kit/Space';
+// Tag 컴포넌트
+import { Tag } from '@jbpark/ui-kit/Tag';
 import { Typography } from '@jbpark/ui-kit/Typography';
 ```
 
+> 필요한 컴포넌트만 쓸 거라면 루트 `@jbpark/ui-kit` 대신 개별 import 경로를 쓰는 걸
+> 권장합니다. 루트 진입점은 organisms 전체(Swiper 포함)를 다시 export하는데,
+> `Swiper`가 `swiper`의 CSS를 사이드 이펙트로 불러오기 때문에 Node/SSR
+> 빌드(예: Astro static build)에서 순수 `.css` import를 처리 못 해 빌드가
+> 깨질 수 있습니다.
+
 ### 유틸리티 및 열거형 import
 
 ```tsx

package/README.md

@@ -141,13 +141,29 @@ function App() {
 
 ```tsx
 // Typography component
+// Button component
+import { Button } from '@jbpark/ui-kit/Button';
+// Card component
+import { Card } from '@jbpark/ui-kit/Card';
+// Layout component
+import { Layout } from '@jbpark/ui-kit/Layout';
 // Menu component
 import { Menu } from '@jbpark/ui-kit/Menu';
 // Reveals component
 import { Reveals } from '@jbpark/ui-kit/Reveals';
+// Space component
+import { Space } from '@jbpark/ui-kit/Space';
+// Tag component
+import { Tag } from '@jbpark/ui-kit/Tag';
 import { Typography } from '@jbpark/ui-kit/Typography';
 ```
 
+> Prefer these individual import paths over the root `@jbpark/ui-kit` entry when
+> you don't need every component. The root entry re-exports all organisms,
+> including `Swiper`, which pulls in `swiper`'s CSS as a side effect — this
+> can break Node/SSR builds (e.g. Astro static builds) that don't expect a
+> bare `.css` import.
+
 ### Import Utilities and Enums
 
 ```tsx

package/dist/{components/atoms/Button/index.d.mts → Button.d.mts}

@@ -1,5 +1,5 @@
-import { Props as Props$1 } from "../../../core/button.mjs";
-import "../../../core.mjs";
+import { Props as Props$1 } from "./core/button.mjs";
+import "./core.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/atoms/Button/index.d.ts
@@ -36,5 +36,5 @@ declare const Button: ({
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Button, Props };
-//# sourceMappingURL=index.d.mts.map
+export { Props, Button as default };
+//# sourceMappingURL=Button.d.mts.map

package/dist/Button.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.mts","names":[],"sources":["../src/components/atoms/Button/index.tsx"],"mappings":";;;;;KAQK,WAAA,GAAc,OAAA;AAAA,KAEd,YAAA;AAAA,UAeY,KAAA,SAAc,IAAA,CAAK,WAAA;EAClC,IAAA,GAAO,KAAA,CAAM,SAAA;EACb,KAAA;EACA,MAAA;EACA,QAAA;EACA,IAAA;EACA,IAAA;EACA,OAAA;EACA,KAAA;EACA,KAAA,GAAQ,YAAA;EACR,OAAA;IAAsB,IAAA,EAAM,KAAA,CAAM,SAAA;EAAA;AAAA;AAAA,cAkD9B,MAAA;EAAU,IAAA;EAAA,SAAA;EAAA,IAAA;EAAA,OAAA;EAAA,IAAA;EAAA,KAAA;EAAA,KAAA;EAAA,KAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,QAAA;EAAA,WAAA;EAAA,GAAA;AAAA,GAeb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/{components/atoms/Button/index.mjs → Button.mjs}

@@ -1,8 +1,8 @@
 'use client';
 
-import { cn } from "../../../utils.mjs";
-import { Button as Button$1 } from "../../../core/button.mjs";
-import "../../../core.mjs";
+import { cn } from "./utils.mjs";
+import { Button as Button$1 } from "./core/button.mjs";
+import "./core.mjs";
 import { LoaderCircle } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -66,4 +66,4 @@ const Button = ({ icon, className, type = "default", variant, size = "middle", c
 
 //#endregion
 export { Button as default };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=Button.mjs.map

package/dist/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","names":["button.Button"],"sources":["../src/components/atoms/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport { LoaderCircle } from 'lucide-react';\n\nimport { button } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst Core = button.Button;\ntype ButtonProps = button.Props;\n\ntype PresetColors =\n  | 'blue'\n  | 'purple'\n  | 'cyan'\n  | 'green'\n  | 'magenta'\n  | 'pink'\n  | 'red'\n  | 'orange'\n  | 'yellow'\n  | 'volcano'\n  | 'geekblue'\n  | 'lime'\n  | 'gold';\n\nexport interface Props extends Omit<ButtonProps, 'size' | 'variant' | 'type'> {\n  icon?: React.ReactNode;\n  block?: boolean;\n  danger?: boolean;\n  disabled?: boolean;\n  size?: 'small' | 'middle' | 'large';\n  type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n  variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';\n  shape?: 'default' | 'circle' | 'round';\n  color?: PresetColors | 'default' | 'primary' | 'danger';\n  loading?: boolean | { icon: React.ReactNode };\n}\n\nconst variantClasses: Record<string, string> = {\n  solid: '',\n  outlined: cn(\n    'border border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  dashed: cn(\n    'border border-dashed border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  filled: cn('bg-muted text-foreground', 'hover:bg-muted/80'),\n  text: cn('bg-transparent text-foreground', 'hover:bg-accent'),\n  link: cn(\n    'bg-transparent text-primary',\n    'underline-offset-4 hover:underline',\n    'hover:bg-primary/10',\n  ),\n};\n\nconst typeToVariant: Record<string, string> = {\n  primary: 'solid',\n  default: 'outlined',\n  dashed: 'dashed',\n  text: 'text',\n  link: 'link',\n};\n\nconst sizesClasses: Record<string, string> = {\n  small: 'h-6 px-3 text-sm',\n  middle: 'h-8 px-4 text-base',\n  large: 'h-10 px-5 text-lg',\n};\n\nconst iconClasses: Record<string, string> = {\n  small: `size-6 [&_svg:not([class*='size-'])]:size-3`,\n  middle: `size-8 [&_svg:not([class*='size-'])]:size-4`,\n  large: `size-10 [&_svg:not([class*='size-'])]:size-5`,\n};\n\nconst shapesClasses = {\n  default: 'rounded-sm',\n  circle: 'rounded-full',\n  round: 'rounded-2xl',\n};\n\nconst Button = ({\n  icon,\n  className,\n  type = 'default',\n  variant,\n  size = 'middle',\n  color = 'default',\n  shape = 'default',\n  block = false,\n  disabled,\n  loading,\n  danger,\n  children,\n  onMouseDown,\n  ...props\n}: Props) => {\n  const iconOnly = icon && !children;\n  const computedColor = danger ? 'danger' : color;\n  const colored = computedColor && computedColor !== 'default';\n  const resolvedVariant = variant ?? typeToVariant[type] ?? 'solid';\n\n  const displayIcon = loading ? (\n    typeof loading === 'object' ? (\n      loading.icon\n    ) : (\n      <LoaderCircle className=\"animate-spin\" />\n    )\n  ) : (\n    icon\n  );\n\n  return (\n    <Core\n      disabled={disabled}\n      variant=\"default\"\n      data-color={computedColor}\n      className={cn(\n        'inline-flex items-center justify-center gap-x-2',\n        'rounded-lg',\n        'cursor-pointer',\n        'h-auto py-0',\n        'transition-all',\n        variantClasses[resolvedVariant],\n        sizesClasses[size || 'medium'],\n        iconOnly && ['p-0', iconClasses[size || 'medium']],\n        shapesClasses[shape || 'default'],\n        block && 'w-full',\n        colored &&\n          (resolvedVariant === 'solid'\n            ? [\n                'bg-(--btn-bg)',\n                'hover:bg-(--btn-bg-hover)',\n                'active:bg-(--btn-bg-active)',\n                'text-(--btn-fg)',\n                'border-(--btn-border)',\n              ]\n            : [\n                'text-(--btn-bg)',\n                'border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n                //\n              ]),\n        className,\n        //\n      )}\n      onMouseDown={e => {\n        e.preventDefault();\n        onMouseDown?.(e);\n      }}\n      {...props}\n    >\n      {displayIcon}\n      {children}\n    </Core>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;;;AAOA,MAAM,OAAOA;AA+Bb,MAAM,iBAAyC;CAC7C,OAAO;CACP,UAAU,GACR,yEACA,iCACA,kBACD;CACD,QAAQ,GACN,uFACA,iCACA,kBACD;CACD,QAAQ,GAAG,4BAA4B,oBAAoB;CAC3D,MAAM,GAAG,kCAAkC,kBAAkB;CAC7D,MAAM,GACJ,+BACA,sCACA,sBACD;CACF;AAED,MAAM,gBAAwC;CAC5C,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;CACP;AAED,MAAM,eAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,cAAsC;CAC1C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,gBAAgB;CACpB,SAAS;CACT,QAAQ;CACR,OAAO;CACR;AAED,MAAM,UAAU,EACd,MACA,WACA,OAAO,WACP,SACA,OAAO,UACP,QAAQ,WACR,QAAQ,WACR,QAAQ,OACR,UACA,SACA,QACA,UACA,aACA,GAAG,YACQ;CACX,MAAM,WAAW,QAAQ,CAAC;CAC1B,MAAM,gBAAgB,SAAS,WAAW;CAC1C,MAAM,UAAU,iBAAiB,kBAAkB;CACnD,MAAM,kBAAkB,WAAW,cAAc,SAAS;CAE1D,MAAM,cAAc,UAClB,OAAO,YAAY,WACjB,QAAQ,OAER,oBAAC,gBAAa,WAAU,iBAAiB,GAG3C;AAGF,QACE,qBAAC;EACW;EACV,SAAQ;EACR,cAAY;EACZ,WAAW,GACT,mDACA,cACA,kBACA,eACA,kBACA,eAAe,kBACf,aAAa,QAAQ,WACrB,YAAY,CAAC,OAAO,YAAY,QAAQ,UAAU,EAClD,cAAc,SAAS,YACvB,SAAS,UACT,YACG,oBAAoB,UACjB;GACE;GACA;GACA;GACA;GACA;GACD,GACD,CACE,mBACA,iEAED,GACP,UAED;EACD,cAAa,MAAK;AAChB,KAAE,gBAAgB;AAClB,iBAAc,EAAE;;EAElB,GAAI;aAEH,aACA;GACI"}

package/dist/{components/molecules/Card/index.d.mts → Card.d.mts}

@@ -18,5 +18,5 @@ declare const Card: ({
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Card };
-//# sourceMappingURL=index.d.mts.map
+export { Card as default };
+//# sourceMappingURL=Card.d.mts.map

package/dist/Card.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.mts","names":[],"sources":["../src/components/molecules/Card/index.tsx"],"mappings":";;;UAEU,KAAA,SAAc,IAAA,CAAK,KAAA,CAAM,qBAAA;EACjC,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,OAAA;EACA,UAAA;IACE,KAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAIE,IAAA;EAAQ,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAOX,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/{components/molecules/Card/index.mjs → Card.mjs}

@@ -1,4 +1,4 @@
-import { cn, renderConditional } from "../../../utils.mjs";
+import { cn, renderConditional } from "./utils.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/molecules/Card/index.tsx
@@ -18,4 +18,4 @@ const Card = ({ title, children, className, classNames, variant = "outlined", ..
 
 //#endregion
 export { Card as default };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=Card.mjs.map

package/dist/Card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.mjs","names":[],"sources":["../src/components/molecules/Card/index.tsx"],"sourcesContent":["import { cn, renderConditional } from '@repo/ui/utils';\n\ninterface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'title'> {\n  title?: React.ReactNode;\n  variant?: 'outlined' | 'borderless';\n  classNames?: {\n    title?: string;\n    body?: string;\n  };\n}\n\nconst Card = ({\n  title,\n  children,\n  className,\n  classNames,\n  variant = 'outlined',\n  ...props\n}: Props) => {\n  return (\n    <div\n      className={cn(\n        'w-full',\n        'rounded-lg p-4',\n        'bg-card text-card-foreground shadow-sm transition-all',\n        variant === 'outlined' && 'border-border border',\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderConditional(title, v => (\n        <div\n          className={cn(\n            'mb-4 font-bold',\n            classNames?.title,\n            //\n          )}\n        >\n          {v}\n        </div>\n      ))}\n      <div\n        className={cn(\n          classNames?.body,\n          //\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Card;\n"],"mappings":";;;;AAWA,MAAM,QAAQ,EACZ,OACA,UACA,WACA,YACA,UAAU,YACV,GAAG,YACQ;AACX,QACE,qBAAC;EACC,WAAW,GACT,UACA,kBACA,yDACA,YAAY,cAAc,wBAC1B,UAED;EACD,GAAI;aAEH,kBAAkB,QAAO,MACxB,oBAAC;GACC,WAAW,GACT,kBACA,YAAY,MAEb;aAEA;IACG,CACN,EACF,oBAAC;GACC,WAAW,GACT,YAAY,KAEb;GAEA;IACG;GACF"}

package/dist/{components/templates/Layout/index.d.mts → Layout.d.mts}

@@ -1,32 +1,32 @@
-import { Props as Props$1 } from "./Content/index.mjs";
-import { Props as Props$2 } from "./Footer/index.mjs";
-import { Props as Props$3 } from "./Header/index.mjs";
-import { Props as Props$4 } from "./Sider/index.mjs";
+import { Props } from "./components/templates/Layout/Content/index.mjs";
+import { Props as Props$1 } from "./components/templates/Layout/Footer/index.mjs";
+import { Props as Props$2 } from "./components/templates/Layout/Header/index.mjs";
+import { Props as Props$4 } from "./components/templates/Layout/Sider/index.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/templates/Layout/index.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'div'> {}
+interface Props$3 extends React.ComponentPropsWithoutRef<'div'> {}
 declare const Layout: {
   ({
     children,
     className,
     ...props
-  }: Props): react_jsx_runtime0.JSX.Element;
+  }: Props$3): react_jsx_runtime0.JSX.Element;
   Content: ({
     children,
     className,
     ...props
-  }: Props$1) => react_jsx_runtime0.JSX.Element;
+  }: Props) => react_jsx_runtime0.JSX.Element;
   Footer: ({
     children,
     className,
     ...props
-  }: Props$2) => react_jsx_runtime0.JSX.Element;
+  }: Props$1) => react_jsx_runtime0.JSX.Element;
   Header: ({
     children,
     className,
     ...props
-  }: Props$3) => react_jsx_runtime0.JSX.Element;
+  }: Props$2) => react_jsx_runtime0.JSX.Element;
   Sider: ({
     children,
     className,
@@ -44,5 +44,5 @@ declare const Layout: {
   }: Props$4) => react_jsx_runtime0.JSX.Element;
 };
 //#endregion
-export { Layout };
-//# sourceMappingURL=index.d.mts.map
+export { type Props as ContentProps, type Props$1 as FooterProps, type Props$2 as HeaderProps, Props$3 as Props, type Props$4 as SiderProps, Layout as default };
+//# sourceMappingURL=Layout.d.mts.map

package/dist/Layout.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.d.mts","names":[],"sources":["../src/components/templates/Layout/index.tsx"],"mappings":";;;;;;;UAciB,OAAA,SAAc,KAAA,CAAM,wBAAA;AAAA,cAO/B,MAAA;EAAA;;;;KAA6C,OAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/{components/templates/Layout/index.mjs → Layout.mjs}

@@ -1,8 +1,8 @@
-import { cn } from "../../../utils.mjs";
-import Content from "./Content/index.mjs";
-import Footer from "./Footer/index.mjs";
-import Header from "./Header/index.mjs";
-import Sider from "./Sider/index.mjs";
+import { cn } from "./utils.mjs";
+import Content from "./components/templates/Layout/Content/index.mjs";
+import Footer from "./components/templates/Layout/Footer/index.mjs";
+import Header from "./components/templates/Layout/Header/index.mjs";
+import Sider from "./components/templates/Layout/Sider/index.mjs";
 import { Children, isValidElement } from "react";
 import { jsx } from "react/jsx-runtime";
 
@@ -22,4 +22,4 @@ Layout.Sider = Sider;
 
 //#endregion
 export { Layout as default };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=Layout.mjs.map

package/dist/Layout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.mjs","names":[],"sources":["../src/components/templates/Layout/index.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Content from './Content';\nimport Footer from './Footer';\nimport Header from './Header';\nimport Sider from './Sider';\n\nexport type { Props as ContentProps } from './Content';\nexport type { Props as FooterProps } from './Footer';\nexport type { Props as HeaderProps } from './Header';\nexport type { Props as SiderProps } from './Sider';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst hasSiderChild = (children: React.ReactNode) =>\n  Children.toArray(children).some(\n    child => isValidElement(child) && child.type === Sider,\n  );\n\nconst Layout = ({ children, className, ...props }: Props) => {\n  const isRow = hasSiderChild(children);\n\n  return (\n    <div\n      className={cn(\n        'flex min-h-0 w-full flex-1',\n        isRow ? 'flex-row' : 'flex-col',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nLayout.Content = Content;\nLayout.Footer = Footer;\nLayout.Header = Header;\nLayout.Sider = Sider;\n\nexport default Layout;\n"],"mappings":";;;;;;;;;AAgBA,MAAM,iBAAiB,aACrB,SAAS,QAAQ,SAAS,CAAC,MACzB,UAAS,eAAe,MAAM,IAAI,MAAM,SAAS,MAClD;AAEH,MAAM,UAAU,EAAE,UAAU,WAAW,GAAG,YAAmB;AAG3D,QACE,oBAAC;EACC,WAAW,GACT,8BALQ,cAAc,SAAS,GAMvB,aAAa,YACrB,UACD;EACD,GAAI;EAEH;GACG;;AAIV,OAAO,UAAU;AACjB,OAAO,SAAS;AAChB,OAAO,SAAS;AAChB,OAAO,QAAQ"}

package/dist/{components/molecules/Space/index.d.mts → Space.d.mts}

@@ -30,5 +30,5 @@ declare const Space: ({
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Space };
-//# sourceMappingURL=index.d.mts.map
+export { Space as default };
+//# sourceMappingURL=Space.d.mts.map

package/dist/Space.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Space.d.mts","names":[],"sources":["../src/components/molecules/Space/index.tsx"],"mappings":";;;UAMU,KAAA,SAAc,KAAA,CAAM,qBAAA;EAC5B,OAAA;EACA,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,WAAA;EACA,IAAA;EACA,KAAA;EACA,IAAA;EACA,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,IAAA;IACE,IAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAiBE,KAAA;EAAS,OAAA;EAAA,MAAA;EAAA,QAAA;EAAA,IAAA;EAAA,WAAA;EAAA,KAAA;EAAA,IAAA;EAAA,KAAA;EAAA,SAAA;EAAA,IAAA;EAAA,MAAA;EAAA,KAAA;EAAA,GAAA;AAAA,GAcZ,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/{components/molecules/Space/index.mjs → Space.mjs}

@@ -1,5 +1,5 @@
-import { cn } from "../../../utils.mjs";
-import Skeleton from "../../atoms/Skeleton/index.mjs";
+import { cn } from "./utils.mjs";
+import Skeleton from "./components/atoms/Skeleton/index.mjs";
 import { Children } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
@@ -38,4 +38,4 @@ const Space = ({ loading, loader, children, size = "middle", orientation = "hori
 
 //#endregion
 export { Space as default };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=Space.mjs.map

package/dist/Space.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Space.mjs","names":[],"sources":["../src/components/molecules/Space/index.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Skeleton from '../../atoms/Skeleton';\n\ninterface Props extends React.ComponentPropsWithRef<'div'> {\n  loading?: boolean;\n  loader?: React.ReactNode;\n  orientation?: 'horizontal' | 'vertical';\n  size?: 'small' | 'middle' | 'large' | number | number[];\n  align?: 'start' | 'end' | 'center' | 'baseline';\n  wrap?: boolean;\n  split?: React.ReactNode;\n  grid?: {\n    rows?: number;\n    cols?: number;\n  };\n}\n\nconst sizes: Record<string, number[]> = {\n  small: [4, 4],\n  middle: [8, 8],\n  large: [16, 16],\n};\n\nconst aligns: Record<string, string> = {\n  start: 'items-start text-start',\n  end: 'items-end text-end',\n  center: 'items-center text-center',\n  baseline: 'items-baseline text-baseline',\n};\n\nconst Space = ({\n  loading,\n  loader,\n  children,\n  size = 'middle',\n  orientation = 'horizontal',\n  align = 'center',\n  wrap = false,\n  split,\n  className,\n  grid,\n  hidden,\n  style,\n  ...props\n}: Props) => {\n  const [x, y] =\n    typeof size === 'string'\n      ? sizes[size] || [0, 0]\n      : Array.isArray(size)\n        ? size\n        : [size, size];\n  const count = Children.count(children);\n\n  if (loading) {\n    return <div className={cn(className)}>{loader || <Skeleton />}</div>;\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex flex-nowrap',\n        orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n        wrap && 'flex-wrap',\n        aligns[align],\n        grid && 'grid',\n        hidden && 'hidden',\n        className,\n      )}\n      style={{\n        columnGap: x,\n        rowGap: y,\n        gridTemplateRows: grid?.rows\n          ? `repeat(${grid.rows}, minmax(0, 1fr))`\n          : undefined,\n        gridTemplateColumns: grid?.cols\n          ? `repeat(${grid.cols}, minmax(0, 1fr))`\n          : undefined,\n        ...style,\n      }}\n      {...props}\n    >\n      {Children.map(children, (child, i) => (\n        <>\n          {child}\n          {split && i < count - 1 && split}\n        </>\n      ))}\n    </div>\n  );\n};\n\nexport default Space;\n"],"mappings":";;;;;;AAoBA,MAAM,QAAkC;CACtC,OAAO,CAAC,GAAG,EAAE;CACb,QAAQ,CAAC,GAAG,EAAE;CACd,OAAO,CAAC,IAAI,GAAG;CAChB;AAED,MAAM,SAAiC;CACrC,OAAO;CACP,KAAK;CACL,QAAQ;CACR,UAAU;CACX;AAED,MAAM,SAAS,EACb,SACA,QACA,UACA,OAAO,UACP,cAAc,cACd,QAAQ,UACR,OAAO,OACP,OACA,WACA,MACA,QACA,OACA,GAAG,YACQ;CACX,MAAM,CAAC,GAAG,KACR,OAAO,SAAS,WACZ,MAAM,SAAS,CAAC,GAAG,EAAE,GACrB,MAAM,QAAQ,KAAK,GACjB,OACA,CAAC,MAAM,KAAK;CACpB,MAAM,QAAQ,SAAS,MAAM,SAAS;AAEtC,KAAI,QACF,QAAO,oBAAC;EAAI,WAAW,GAAG,UAAU;YAAG,UAAU,oBAAC,aAAW;GAAO;AAGtE,QACE,oBAAC;EACC,WAAW,GACT,oBACA,gBAAgB,eAAe,aAAa,YAC5C,QAAQ,aACR,OAAO,QACP,QAAQ,QACR,UAAU,UACV,UACD;EACD,OAAO;GACL,WAAW;GACX,QAAQ;GACR,kBAAkB,MAAM,OACpB,UAAU,KAAK,KAAK,qBACpB;GACJ,qBAAqB,MAAM,OACvB,UAAU,KAAK,KAAK,qBACpB;GACJ,GAAG;GACJ;EACD,GAAI;YAEH,SAAS,IAAI,WAAW,OAAO,MAC9B,8CACG,OACA,SAAS,IAAI,QAAQ,KAAK,SAC1B,CACH;GACE"}

package/dist/{components/atoms/Tag/index.d.mts → Tag.d.mts}

@@ -13,5 +13,5 @@ declare const Tag: ({
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Tag };
-//# sourceMappingURL=index.d.mts.map
+export { Props, Tag as default };
+//# sourceMappingURL=Tag.d.mts.map

package/dist/Tag.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.mts","names":[],"sources":["../src/components/atoms/Tag/index.tsx"],"mappings":";;;UAEiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,OAAA;EACA,KAAA;AAAA;AAAA,cAmBI,GAAA;EAAO,SAAA;EAAA,OAAA;EAAA,KAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAMV,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/{components/atoms/Tag/index.mjs → Tag.mjs}

@@ -1,4 +1,4 @@
-import { cn } from "../../../utils.mjs";
+import { cn } from "./utils.mjs";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/atoms/Tag/index.tsx
@@ -26,4 +26,4 @@ const Tag = ({ className, variant = "default", color = "default", children, ...p
 
 //#endregion
 export { Tag as default };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=Tag.mjs.map

package/dist/Tag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.mjs","names":[],"sources":["../src/components/atoms/Tag/index.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'span'> {\n  variant?: 'default' | 'outlined';\n  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';\n}\n\nconst fillColorClasses: Record<string, string> = {\n  default: 'bg-muted text-muted-foreground',\n  primary: 'bg-primary/10 text-primary',\n  success: 'bg-green-500/10 text-green-600 dark:text-green-400',\n  warning: 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',\n  danger: 'bg-destructive/10 text-destructive',\n};\n\nconst outlinedColorClasses: Record<string, string> = {\n  default: 'border-border text-foreground',\n  primary: 'border-primary text-primary',\n  success: 'border-green-500 text-green-600 dark:text-green-400',\n  warning: 'border-yellow-500 text-yellow-600 dark:text-yellow-400',\n  danger: 'border-destructive text-destructive',\n};\n\nconst Tag = ({\n  className,\n  variant = 'default',\n  color = 'default',\n  children,\n  ...props\n}: Props) => {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center',\n        'rounded-full px-2.5 py-1',\n        'text-xs font-medium',\n        variant === 'default' && fillColorClasses[color],\n        variant === 'outlined' && ['border', outlinedColorClasses[color]],\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;AAOA,MAAM,mBAA2C;CAC/C,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACT;AAED,MAAM,uBAA+C;CACnD,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACT;AAED,MAAM,OAAO,EACX,WACA,UAAU,WACV,QAAQ,WACR,UACA,GAAG,YACQ;AACX,QACE,oBAAC;EACC,WAAW,GACT,4BACA,4BACA,uBACA,YAAY,aAAa,iBAAiB,QAC1C,YAAY,cAAc,CAAC,UAAU,qBAAqB,OAAO,EACjE,UAED;EACD,GAAI;EAEH;GACI"}

package/dist/components/atoms/FloatButton/BackTop/index.d.mts

@@ -1,4 +1,4 @@
-import { Props as Props$1 } from "../../Button/index.mjs";
+import { Props as Props$1 } from "../../../../Button.mjs";
 import { MouseEvent } from "react";
 import "react/jsx-runtime";
 

package/dist/components/atoms/FloatButton/index.d.mts

@@ -1,4 +1,4 @@
-import { Props as Props$1 } from "../Button/index.mjs";
+import { Props as Props$1 } from "../../../Button.mjs";
 import { Props as Props$2 } from "./BackTop/index.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/components/atoms/FloatButton/index.mjs

@@ -1,5 +1,5 @@
 import { cn } from "../../../utils.mjs";
-import Button from "../Button/index.mjs";
+import Button from "../../../Button.mjs";
 import BackTop from "./BackTop/index.mjs";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/atoms/Input/Search/index.mjs

@@ -3,7 +3,7 @@
 import { cn } from "../../../../utils.mjs";
 import { input_exports } from "../../../../core/input.mjs";
 import "../../../../core.mjs";
-import Button from "../../Button/index.mjs";
+import Button from "../../../../Button.mjs";
 import { CircleX, Search } from "lucide-react";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/atoms/Radio/Group/index.mjs

@@ -1,5 +1,5 @@
 import { cn } from "../../../../utils.mjs";
-import Button from "../../Button/index.mjs";
+import Button from "../../../../Button.mjs";
 import Radio from "../index.mjs";
 import "../../../../index.mjs";
 import { useState } from "react";

package/dist/components/atoms/index.d.mts

@@ -1,5 +1,6 @@
+import Button from "../../Button.mjs";
+import Tag from "../../Tag.mjs";
 import Typography from "../../Typography.mjs";
-import { Button } from "./Button/index.mjs";
 import { Checkbox } from "./Checkbox/index.mjs";
 import { ColorPicker } from "./ColorPicker/index.mjs";
 import { FloatButton } from "./FloatButton/index.mjs";
@@ -10,5 +11,4 @@ import { Radio } from "./Radio/index.mjs";
 import { Select } from "./Select/index.mjs";
 import { Skeleton } from "./Skeleton/index.mjs";
 import { Spin } from "./Spin/index.mjs";
-import { Switch } from "./Switch/index.mjs";
-import { Tag } from "./Tag/index.mjs";
+import { Switch } from "./Switch/index.mjs";

package/dist/components/atoms/index.mjs

@@ -1,4 +1,4 @@
-import Button from "./Button/index.mjs";
+import Button from "../../Button.mjs";
 import Checkbox from "./Checkbox/index.mjs";
 import Typography from "../../Typography.mjs";
 import Popover from "./Popover/index.mjs";
@@ -11,6 +11,6 @@ import Select from "./Select/index.mjs";
 import Skeleton from "./Skeleton/index.mjs";
 import Spin from "./Spin/index.mjs";
 import Switch from "./Switch/index.mjs";
-import Tag from "./Tag/index.mjs";
+import Tag from "../../Tag.mjs";
 
 export {  };

package/dist/components/molecules/index.d.mts

@@ -1,8 +1,8 @@
+import Card from "../../Card.mjs";
 import Menu from "../../Menu.mjs";
 import Reveals from "../../Reveals.mjs";
-import { Card } from "./Card/index.mjs";
+import Space from "../../Space.mjs";
 import { Collapse } from "./Collapse/index.mjs";
 import { Dropdown } from "./Dropdown/index.mjs";
 import { Marquees } from "./Marquees/index.mjs";
-import { Splitter } from "./Splitter/index.mjs";
-import { Space } from "./Space/index.mjs";
+import { Splitter } from "./Splitter/index.mjs";

package/dist/components/molecules/index.mjs

@@ -1,10 +1,10 @@
-import Card from "./Card/index.mjs";
+import Card from "../../Card.mjs";
 import Collapse from "./Collapse/index.mjs";
 import Menu from "../../Menu.mjs";
 import Dropdown from "./Dropdown/index.mjs";
 import Marquees from "./Marquees/index.mjs";
 import Reveals from "../../Reveals.mjs";
 import Splitter from "./Splitter/index.mjs";
-import Space from "./Space/index.mjs";
+import Space from "../../Space.mjs";
 
 export {  };

package/dist/components/organisms/Drawer/index.mjs

@@ -3,7 +3,7 @@
 import { cn, renderConditional } from "../../../utils.mjs";
 import { drawer_exports } from "../../../core/drawer.mjs";
 import "../../../core.mjs";
-import Button from "../../atoms/Button/index.mjs";
+import Button from "../../../Button.mjs";
 import { X } from "lucide-react";
 import { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/organisms/Modal/index.mjs

@@ -3,7 +3,7 @@
 import { cn } from "../../../utils.mjs";
 import { dialog_exports } from "../../../core/dialog.mjs";
 import "../../../core.mjs";
-import Button from "../../atoms/Button/index.mjs";
+import Button from "../../../Button.mjs";
 import "../../../index.mjs";
 import { Check, CircleQuestionMark, Info, OctagonAlert, OctagonX } from "lucide-react";
 import React, { useEffect, useState } from "react";

package/dist/components/templates/index.d.mts

@@ -1 +1 @@
-import { Layout } from "./Layout/index.mjs";
+import Layout from "../../Layout.mjs";

package/dist/components/templates/index.mjs

@@ -1,3 +1,3 @@
-import Layout from "./Layout/index.mjs";
+import Layout from "../../Layout.mjs";
 
 export {  };

package/dist/core/button.d.mts

@@ -9,7 +9,7 @@ declare namespace button_d_exports {
 }
 declare const buttonVariants: (props?: ({
   variant?: "link" | "default" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
-  size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type Props = React$1.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
   asChild?: boolean;

package/dist/core/dialog.mjs

@@ -2,7 +2,7 @@
 
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
-import Button from "../components/atoms/Button/index.mjs";
+import Button from "../Button.mjs";
 import "../index.mjs";
 import { XIcon } from "lucide-react";
 import "react";

package/dist/index.d.mts

@@ -1,7 +1,11 @@
+import Button from "./Button.mjs";
+import Tag from "./Tag.mjs";
 import Typography from "./Typography.mjs";
+import Card from "./Card.mjs";
 import Menu from "./Menu.mjs";
 import Reveals from "./Reveals.mjs";
-import { Button } from "./components/atoms/Button/index.mjs";
+import Space from "./Space.mjs";
+import Layout from "./Layout.mjs";
 import { Checkbox } from "./components/atoms/Checkbox/index.mjs";
 import { ColorPicker } from "./components/atoms/ColorPicker/index.mjs";
 import { FloatButton } from "./components/atoms/FloatButton/index.mjs";
@@ -13,21 +17,17 @@ import { Select } from "./components/atoms/Select/index.mjs";
 import { Skeleton } from "./components/atoms/Skeleton/index.mjs";
 import { Spin } from "./components/atoms/Spin/index.mjs";
 import { Switch } from "./components/atoms/Switch/index.mjs";
-import { Tag } from "./components/atoms/Tag/index.mjs";
 import "./components/atoms/index.mjs";
-import { Card } from "./components/molecules/Card/index.mjs";
 import { Collapse } from "./components/molecules/Collapse/index.mjs";
 import { Dropdown } from "./components/molecules/Dropdown/index.mjs";
 import { Marquees } from "./components/molecules/Marquees/index.mjs";
 import { Splitter } from "./components/molecules/Splitter/index.mjs";
-import { Space } from "./components/molecules/Space/index.mjs";
 import "./components/molecules/index.mjs";
 import { Drawer, Props as Props$1 } from "./components/organisms/Drawer/index.mjs";
 import { List } from "./components/organisms/List/index.mjs";
 import { Modal } from "./components/organisms/Modal/index.mjs";
 import { Swiper } from "./components/organisms/Swiper/index.mjs";
 import "./components/organisms/index.mjs";
-import { Layout } from "./components/templates/Layout/index.mjs";
 import "./components/templates/index.mjs";
 import { ThemeConfig, ThemeToken } from "./providers/Config/types.mjs";
 import { useConfig } from "./providers/Config/context.mjs";

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import "./style.mjs";
-import Button from "./components/atoms/Button/index.mjs";
+import Button from "./Button.mjs";
 import Checkbox from "./components/atoms/Checkbox/index.mjs";
 import Typography from "./Typography.mjs";
 import Popover from "./components/atoms/Popover/index.mjs";
@@ -12,23 +12,23 @@ import Select from "./components/atoms/Select/index.mjs";
 import Skeleton from "./components/atoms/Skeleton/index.mjs";
 import Spin from "./components/atoms/Spin/index.mjs";
 import Switch from "./components/atoms/Switch/index.mjs";
-import Tag from "./components/atoms/Tag/index.mjs";
+import Tag from "./Tag.mjs";
 import "./components/atoms/index.mjs";
-import Card from "./components/molecules/Card/index.mjs";
+import Card from "./Card.mjs";
 import Collapse from "./components/molecules/Collapse/index.mjs";
 import Menu from "./Menu.mjs";
 import Dropdown from "./components/molecules/Dropdown/index.mjs";
 import Marquees from "./components/molecules/Marquees/index.mjs";
 import Reveals from "./Reveals.mjs";
 import Splitter from "./components/molecules/Splitter/index.mjs";
-import Space from "./components/molecules/Space/index.mjs";
+import Space from "./Space.mjs";
 import "./components/molecules/index.mjs";
 import Drawer from "./components/organisms/Drawer/index.mjs";
 import List from "./components/organisms/List/index.mjs";
 import Modal from "./components/organisms/Modal/index.mjs";
 import Swiper from "./components/organisms/Swiper/index.mjs";
 import "./components/organisms/index.mjs";
-import Layout from "./components/templates/Layout/index.mjs";
+import Layout from "./Layout.mjs";
 import "./components/templates/index.mjs";
 import { useConfig } from "./providers/Config/context.mjs";
 import Config from "./providers/Config/index.mjs";

package/dist/style.css

@@ -231,6 +231,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .sticky {
     position: sticky;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
   "keywords": [
     "react",
@@ -46,6 +46,26 @@
       "import": "./dist/Typography.mjs",
       "default": "./dist/Typography.mjs"
     },
+    "./Button": {
+      "types": "./dist/Button.d.mts",
+      "import": "./dist/Button.mjs",
+      "default": "./dist/Button.mjs"
+    },
+    "./Tag": {
+      "types": "./dist/Tag.d.mts",
+      "import": "./dist/Tag.mjs",
+      "default": "./dist/Tag.mjs"
+    },
+    "./Card": {
+      "types": "./dist/Card.d.mts",
+      "import": "./dist/Card.mjs",
+      "default": "./dist/Card.mjs"
+    },
+    "./Space": {
+      "types": "./dist/Space.d.mts",
+      "import": "./dist/Space.mjs",
+      "default": "./dist/Space.mjs"
+    },
     "./Menu": {
       "types": "./dist/Menu.d.mts",
       "import": "./dist/Menu.mjs",
@@ -56,6 +76,11 @@
       "import": "./dist/Reveals.mjs",
       "default": "./dist/Reveals.mjs"
     },
+    "./Layout": {
+      "types": "./dist/Layout.d.mts",
+      "import": "./dist/Layout.mjs",
+      "default": "./dist/Layout.mjs"
+    },
     "./utils": {
       "types": "./dist/utils.d.mts",
       "import": "./dist/utils.mjs",

package/dist/components/atoms/Button/index.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/Button/index.tsx"],"mappings":";;;;;KAQK,WAAA,GAAc,OAAA;AAAA,KAEd,YAAA;AAAA,UAeY,KAAA,SAAc,IAAA,CAAK,WAAA;EAClC,IAAA,GAAO,KAAA,CAAM,SAAA;EACb,KAAA;EACA,MAAA;EACA,QAAA;EACA,IAAA;EACA,IAAA;EACA,OAAA;EACA,KAAA;EACA,KAAA,GAAQ,YAAA;EACR,OAAA;IAAsB,IAAA,EAAM,KAAA,CAAM,SAAA;EAAA;AAAA;AAAA,cAkD9B,MAAA;EAAU,IAAA;EAAA,SAAA;EAAA,IAAA;EAAA,OAAA;EAAA,IAAA;EAAA,KAAA;EAAA,KAAA;EAAA,KAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,QAAA;EAAA,WAAA;EAAA,GAAA;AAAA,GAeb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/Button/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":["button.Button"],"sources":["../../../../src/components/atoms/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport { LoaderCircle } from 'lucide-react';\n\nimport { button } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst Core = button.Button;\ntype ButtonProps = button.Props;\n\ntype PresetColors =\n  | 'blue'\n  | 'purple'\n  | 'cyan'\n  | 'green'\n  | 'magenta'\n  | 'pink'\n  | 'red'\n  | 'orange'\n  | 'yellow'\n  | 'volcano'\n  | 'geekblue'\n  | 'lime'\n  | 'gold';\n\nexport interface Props extends Omit<ButtonProps, 'size' | 'variant' | 'type'> {\n  icon?: React.ReactNode;\n  block?: boolean;\n  danger?: boolean;\n  disabled?: boolean;\n  size?: 'small' | 'middle' | 'large';\n  type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n  variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';\n  shape?: 'default' | 'circle' | 'round';\n  color?: PresetColors | 'default' | 'primary' | 'danger';\n  loading?: boolean | { icon: React.ReactNode };\n}\n\nconst variantClasses: Record<string, string> = {\n  solid: '',\n  outlined: cn(\n    'border border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  dashed: cn(\n    'border border-dashed border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  filled: cn('bg-muted text-foreground', 'hover:bg-muted/80'),\n  text: cn('bg-transparent text-foreground', 'hover:bg-accent'),\n  link: cn(\n    'bg-transparent text-primary',\n    'underline-offset-4 hover:underline',\n    'hover:bg-primary/10',\n  ),\n};\n\nconst typeToVariant: Record<string, string> = {\n  primary: 'solid',\n  default: 'outlined',\n  dashed: 'dashed',\n  text: 'text',\n  link: 'link',\n};\n\nconst sizesClasses: Record<string, string> = {\n  small: 'h-6 px-3 text-sm',\n  middle: 'h-8 px-4 text-base',\n  large: 'h-10 px-5 text-lg',\n};\n\nconst iconClasses: Record<string, string> = {\n  small: `size-6 [&_svg:not([class*='size-'])]:size-3`,\n  middle: `size-8 [&_svg:not([class*='size-'])]:size-4`,\n  large: `size-10 [&_svg:not([class*='size-'])]:size-5`,\n};\n\nconst shapesClasses = {\n  default: 'rounded-sm',\n  circle: 'rounded-full',\n  round: 'rounded-2xl',\n};\n\nconst Button = ({\n  icon,\n  className,\n  type = 'default',\n  variant,\n  size = 'middle',\n  color = 'default',\n  shape = 'default',\n  block = false,\n  disabled,\n  loading,\n  danger,\n  children,\n  onMouseDown,\n  ...props\n}: Props) => {\n  const iconOnly = icon && !children;\n  const computedColor = danger ? 'danger' : color;\n  const colored = computedColor && computedColor !== 'default';\n  const resolvedVariant = variant ?? typeToVariant[type] ?? 'solid';\n\n  const displayIcon = loading ? (\n    typeof loading === 'object' ? (\n      loading.icon\n    ) : (\n      <LoaderCircle className=\"animate-spin\" />\n    )\n  ) : (\n    icon\n  );\n\n  return (\n    <Core\n      disabled={disabled}\n      variant=\"default\"\n      data-color={computedColor}\n      className={cn(\n        'inline-flex items-center justify-center gap-x-2',\n        'rounded-lg',\n        'cursor-pointer',\n        'h-auto py-0',\n        'transition-all',\n        variantClasses[resolvedVariant],\n        sizesClasses[size || 'medium'],\n        iconOnly && ['p-0', iconClasses[size || 'medium']],\n        shapesClasses[shape || 'default'],\n        block && 'w-full',\n        colored &&\n          (resolvedVariant === 'solid'\n            ? [\n                'bg-(--btn-bg)',\n                'hover:bg-(--btn-bg-hover)',\n                'active:bg-(--btn-bg-active)',\n                'text-(--btn-fg)',\n                'border-(--btn-border)',\n              ]\n            : [\n                'text-(--btn-bg)',\n                'border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n                //\n              ]),\n        className,\n        //\n      )}\n      onMouseDown={e => {\n        e.preventDefault();\n        onMouseDown?.(e);\n      }}\n      {...props}\n    >\n      {displayIcon}\n      {children}\n    </Core>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;;;AAOA,MAAM,OAAOA;AA+Bb,MAAM,iBAAyC;CAC7C,OAAO;CACP,UAAU,GACR,yEACA,iCACA,kBACD;CACD,QAAQ,GACN,uFACA,iCACA,kBACD;CACD,QAAQ,GAAG,4BAA4B,oBAAoB;CAC3D,MAAM,GAAG,kCAAkC,kBAAkB;CAC7D,MAAM,GACJ,+BACA,sCACA,sBACD;CACF;AAED,MAAM,gBAAwC;CAC5C,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;CACP;AAED,MAAM,eAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,cAAsC;CAC1C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,gBAAgB;CACpB,SAAS;CACT,QAAQ;CACR,OAAO;CACR;AAED,MAAM,UAAU,EACd,MACA,WACA,OAAO,WACP,SACA,OAAO,UACP,QAAQ,WACR,QAAQ,WACR,QAAQ,OACR,UACA,SACA,QACA,UACA,aACA,GAAG,YACQ;CACX,MAAM,WAAW,QAAQ,CAAC;CAC1B,MAAM,gBAAgB,SAAS,WAAW;CAC1C,MAAM,UAAU,iBAAiB,kBAAkB;CACnD,MAAM,kBAAkB,WAAW,cAAc,SAAS;CAE1D,MAAM,cAAc,UAClB,OAAO,YAAY,WACjB,QAAQ,OAER,oBAAC,gBAAa,WAAU,iBAAiB,GAG3C;AAGF,QACE,qBAAC;EACW;EACV,SAAQ;EACR,cAAY;EACZ,WAAW,GACT,mDACA,cACA,kBACA,eACA,kBACA,eAAe,kBACf,aAAa,QAAQ,WACrB,YAAY,CAAC,OAAO,YAAY,QAAQ,UAAU,EAClD,cAAc,SAAS,YACvB,SAAS,UACT,YACG,oBAAoB,UACjB;GACE;GACA;GACA;GACA;GACA;GACD,GACD,CACE,mBACA,iEAED,GACP,UAED;EACD,cAAa,MAAK;AAChB,KAAE,gBAAgB;AAClB,iBAAc,EAAE;;EAElB,GAAI;aAEH,aACA;GACI"}

package/dist/components/atoms/Tag/index.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/Tag/index.tsx"],"mappings":";;;UAEiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,OAAA;EACA,KAAA;AAAA;AAAA,cAmBI,GAAA;EAAO,SAAA;EAAA,OAAA;EAAA,KAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAMV,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/Tag/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/atoms/Tag/index.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'span'> {\n  variant?: 'default' | 'outlined';\n  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';\n}\n\nconst fillColorClasses: Record<string, string> = {\n  default: 'bg-muted text-muted-foreground',\n  primary: 'bg-primary/10 text-primary',\n  success: 'bg-green-500/10 text-green-600 dark:text-green-400',\n  warning: 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',\n  danger: 'bg-destructive/10 text-destructive',\n};\n\nconst outlinedColorClasses: Record<string, string> = {\n  default: 'border-border text-foreground',\n  primary: 'border-primary text-primary',\n  success: 'border-green-500 text-green-600 dark:text-green-400',\n  warning: 'border-yellow-500 text-yellow-600 dark:text-yellow-400',\n  danger: 'border-destructive text-destructive',\n};\n\nconst Tag = ({\n  className,\n  variant = 'default',\n  color = 'default',\n  children,\n  ...props\n}: Props) => {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center',\n        'rounded-full px-2.5 py-1',\n        'text-xs font-medium',\n        variant === 'default' && fillColorClasses[color],\n        variant === 'outlined' && ['border', outlinedColorClasses[color]],\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;AAOA,MAAM,mBAA2C;CAC/C,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACT;AAED,MAAM,uBAA+C;CACnD,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACT;AAED,MAAM,OAAO,EACX,WACA,UAAU,WACV,QAAQ,WACR,UACA,GAAG,YACQ;AACX,QACE,oBAAC;EACC,WAAW,GACT,4BACA,4BACA,uBACA,YAAY,aAAa,iBAAiB,QAC1C,YAAY,cAAc,CAAC,UAAU,qBAAqB,OAAO,EACjE,UAED;EACD,GAAI;EAEH;GACI"}

package/dist/components/molecules/Card/index.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/molecules/Card/index.tsx"],"mappings":";;;UAEU,KAAA,SAAc,IAAA,CAAK,KAAA,CAAM,qBAAA;EACjC,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,OAAA;EACA,UAAA;IACE,KAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAIE,IAAA;EAAQ,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAOX,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/molecules/Card/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/molecules/Card/index.tsx"],"sourcesContent":["import { cn, renderConditional } from '@repo/ui/utils';\n\ninterface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'title'> {\n  title?: React.ReactNode;\n  variant?: 'outlined' | 'borderless';\n  classNames?: {\n    title?: string;\n    body?: string;\n  };\n}\n\nconst Card = ({\n  title,\n  children,\n  className,\n  classNames,\n  variant = 'outlined',\n  ...props\n}: Props) => {\n  return (\n    <div\n      className={cn(\n        'w-full',\n        'rounded-lg p-4',\n        'bg-card text-card-foreground shadow-sm transition-all',\n        variant === 'outlined' && 'border-border border',\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderConditional(title, v => (\n        <div\n          className={cn(\n            'mb-4 font-bold',\n            classNames?.title,\n            //\n          )}\n        >\n          {v}\n        </div>\n      ))}\n      <div\n        className={cn(\n          classNames?.body,\n          //\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Card;\n"],"mappings":";;;;AAWA,MAAM,QAAQ,EACZ,OACA,UACA,WACA,YACA,UAAU,YACV,GAAG,YACQ;AACX,QACE,qBAAC;EACC,WAAW,GACT,UACA,kBACA,yDACA,YAAY,cAAc,wBAC1B,UAED;EACD,GAAI;aAEH,kBAAkB,QAAO,MACxB,oBAAC;GACC,WAAW,GACT,kBACA,YAAY,MAEb;aAEA;IACG,CACN,EACF,oBAAC;GACC,WAAW,GACT,YAAY,KAEb;GAEA;IACG;GACF"}

package/dist/components/molecules/Space/index.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/molecules/Space/index.tsx"],"mappings":";;;UAMU,KAAA,SAAc,KAAA,CAAM,qBAAA;EAC5B,OAAA;EACA,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,WAAA;EACA,IAAA;EACA,KAAA;EACA,IAAA;EACA,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,IAAA;IACE,IAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAiBE,KAAA;EAAS,OAAA;EAAA,MAAA;EAAA,QAAA;EAAA,IAAA;EAAA,WAAA;EAAA,KAAA;EAAA,IAAA;EAAA,KAAA;EAAA,SAAA;EAAA,IAAA;EAAA,MAAA;EAAA,KAAA;EAAA,GAAA;AAAA,GAcZ,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/molecules/Space/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/molecules/Space/index.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Skeleton from '../../atoms/Skeleton';\n\ninterface Props extends React.ComponentPropsWithRef<'div'> {\n  loading?: boolean;\n  loader?: React.ReactNode;\n  orientation?: 'horizontal' | 'vertical';\n  size?: 'small' | 'middle' | 'large' | number | number[];\n  align?: 'start' | 'end' | 'center' | 'baseline';\n  wrap?: boolean;\n  split?: React.ReactNode;\n  grid?: {\n    rows?: number;\n    cols?: number;\n  };\n}\n\nconst sizes: Record<string, number[]> = {\n  small: [4, 4],\n  middle: [8, 8],\n  large: [16, 16],\n};\n\nconst aligns: Record<string, string> = {\n  start: 'items-start text-start',\n  end: 'items-end text-end',\n  center: 'items-center text-center',\n  baseline: 'items-baseline text-baseline',\n};\n\nconst Space = ({\n  loading,\n  loader,\n  children,\n  size = 'middle',\n  orientation = 'horizontal',\n  align = 'center',\n  wrap = false,\n  split,\n  className,\n  grid,\n  hidden,\n  style,\n  ...props\n}: Props) => {\n  const [x, y] =\n    typeof size === 'string'\n      ? sizes[size] || [0, 0]\n      : Array.isArray(size)\n        ? size\n        : [size, size];\n  const count = Children.count(children);\n\n  if (loading) {\n    return <div className={cn(className)}>{loader || <Skeleton />}</div>;\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex flex-nowrap',\n        orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n        wrap && 'flex-wrap',\n        aligns[align],\n        grid && 'grid',\n        hidden && 'hidden',\n        className,\n      )}\n      style={{\n        columnGap: x,\n        rowGap: y,\n        gridTemplateRows: grid?.rows\n          ? `repeat(${grid.rows}, minmax(0, 1fr))`\n          : undefined,\n        gridTemplateColumns: grid?.cols\n          ? `repeat(${grid.cols}, minmax(0, 1fr))`\n          : undefined,\n        ...style,\n      }}\n      {...props}\n    >\n      {Children.map(children, (child, i) => (\n        <>\n          {child}\n          {split && i < count - 1 && split}\n        </>\n      ))}\n    </div>\n  );\n};\n\nexport default Space;\n"],"mappings":";;;;;;AAoBA,MAAM,QAAkC;CACtC,OAAO,CAAC,GAAG,EAAE;CACb,QAAQ,CAAC,GAAG,EAAE;CACd,OAAO,CAAC,IAAI,GAAG;CAChB;AAED,MAAM,SAAiC;CACrC,OAAO;CACP,KAAK;CACL,QAAQ;CACR,UAAU;CACX;AAED,MAAM,SAAS,EACb,SACA,QACA,UACA,OAAO,UACP,cAAc,cACd,QAAQ,UACR,OAAO,OACP,OACA,WACA,MACA,QACA,OACA,GAAG,YACQ;CACX,MAAM,CAAC,GAAG,KACR,OAAO,SAAS,WACZ,MAAM,SAAS,CAAC,GAAG,EAAE,GACrB,MAAM,QAAQ,KAAK,GACjB,OACA,CAAC,MAAM,KAAK;CACpB,MAAM,QAAQ,SAAS,MAAM,SAAS;AAEtC,KAAI,QACF,QAAO,oBAAC;EAAI,WAAW,GAAG,UAAU;YAAG,UAAU,oBAAC,aAAW;GAAO;AAGtE,QACE,oBAAC;EACC,WAAW,GACT,oBACA,gBAAgB,eAAe,aAAa,YAC5C,QAAQ,aACR,OAAO,QACP,QAAQ,QACR,UAAU,UACV,UACD;EACD,OAAO;GACL,WAAW;GACX,QAAQ;GACR,kBAAkB,MAAM,OACpB,UAAU,KAAK,KAAK,qBACpB;GACJ,qBAAqB,MAAM,OACvB,UAAU,KAAK,KAAK,qBACpB;GACJ,GAAG;GACJ;EACD,GAAI;YAEH,SAAS,IAAI,WAAW,OAAO,MAC9B,8CACG,OACA,SAAS,IAAI,QAAQ,KAAK,SAC1B,CACH;GACE"}

package/dist/components/templates/Layout/index.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/templates/Layout/index.tsx"],"mappings":";;;;;;;UAciB,KAAA,SAAc,KAAA,CAAM,wBAAA;AAAA,cAO/B,MAAA;EAAA;;;;KAA6C,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/Layout/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/templates/Layout/index.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Content from './Content';\nimport Footer from './Footer';\nimport Header from './Header';\nimport Sider from './Sider';\n\nexport type { Props as ContentProps } from './Content';\nexport type { Props as FooterProps } from './Footer';\nexport type { Props as HeaderProps } from './Header';\nexport type { Props as SiderProps } from './Sider';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst hasSiderChild = (children: React.ReactNode) =>\n  Children.toArray(children).some(\n    child => isValidElement(child) && child.type === Sider,\n  );\n\nconst Layout = ({ children, className, ...props }: Props) => {\n  const isRow = hasSiderChild(children);\n\n  return (\n    <div\n      className={cn(\n        'flex min-h-0 w-full flex-1',\n        isRow ? 'flex-row' : 'flex-col',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nLayout.Content = Content;\nLayout.Footer = Footer;\nLayout.Header = Header;\nLayout.Sider = Sider;\n\nexport default Layout;\n"],"mappings":";;;;;;;;;AAgBA,MAAM,iBAAiB,aACrB,SAAS,QAAQ,SAAS,CAAC,MACzB,UAAS,eAAe,MAAM,IAAI,MAAM,SAAS,MAClD;AAEH,MAAM,UAAU,EAAE,UAAU,WAAW,GAAG,YAAmB;AAG3D,QACE,oBAAC;EACC,WAAW,GACT,8BALQ,cAAc,SAAS,GAMvB,aAAa,YACrB,UACD;EACD,GAAI;EAEH;GACG;;AAIV,OAAO,UAAU;AACjB,OAAO,SAAS;AAChB,OAAO,SAAS;AAChB,OAAO,QAAQ"}