@devup-ui/components 0.1.13 → 0.1.15

package/dist/components/Radio/Radio.stories.d.ts

@@ -0,0 +1,29 @@
+import { Radio } from '.';
+declare const _default: {
+    title: string;
+    component: typeof Radio;
+};
+export default _default;
+export declare const Default: {
+    args: {
+        checked: undefined;
+        colors: {
+            primary: string;
+            border: string;
+            text: string;
+            bg: string;
+            hoverBg: string;
+            hoverBorder: string;
+            hoverColor: string;
+            checkedBg: string;
+            checkedBorder: string;
+            checkedColor: string;
+            disabledBg: string;
+            disabledColor: string;
+        };
+        name: string;
+        children: string;
+        variant: string;
+    };
+};
+//# sourceMappingURL=Radio.stories.d.ts.map

package/dist/components/Radio/Radio.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,CAAA;;;;;AAEzB,wBAGC;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;CAqBnB,CAAA"}

package/dist/components/Radio/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),r=require("@devup-ui/react");function x({className:t,disabled:d,children:h,variant:g="default",checked:v,classNames:b,styles:u,style:n,firstButton:B,lastButton:k,colors:e,...p}){const a=g==="button";return i.jsxs(r.Box,{alignItems:a?void 0:"center","aria-disabled":d,as:"label",cursor:a?void 0:"pointer",display:a?void 0:"inline-flex",gap:a?void 0:2,selectors:{"&[aria-disabled=true]":{cursor:"default"}},children:[a?i.jsx(r.Input,{checked:v,className:t,"data-radio-input":!0,disabled:d,display:"none",opacity:0,styleOrder:1,type:"radio",...p}):i.jsx(r.Input,{_focus:{outline:"1px sold var(--border, var(--primary))"},appearance:"none",bg:"light-dark(#fff, #2E2E2E)",border:"1px solid",borderColor:"$border",borderRadius:"100%",checked:v,className:t,"data-radio-input":!0,disabled:d,height:"18px",m:0,selectors:{"&:checked:not(:disabled)":{bg:"var(--checkedBg, var(--primary, light-dark(#fff, #2E2E2E)))",border:"3px solid",borderColor:"var(--checkedBg, light-dark(#fff, #2E2E2E))",boxShadow:"0 0 0 1px var(--checkedBorder, var(--primary))"},"&:hover:not(:disabled,:checked)":{border:"1px solid var(--hoverBorder, var(--primary))",bg:"var(--hoverBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 90%), color-mix(in srgb, var(--primary) 10%, black 90%)))"},"&:is(:disabled, [aria-disabled=true])":{bgColor:"var(--disabledBg, light-dark(#F0F0F3, #47474A))"}},styleOrder:1,styleVars:{primary:e==null?void 0:e.primary,border:e==null?void 0:e.border,text:e==null?void 0:e.text,bg:e==null?void 0:e.bg,hoverBg:e==null?void 0:e.hoverBg,hoverBorder:e==null?void 0:e.hoverBorder,hoverColor:e==null?void 0:e.hoverColor,checkedBg:e==null?void 0:e.checkedBg,checkedBorder:e==null?void 0:e.checkedBorder,checkedColor:e==null?void 0:e.checkedColor,disabledBg:e==null?void 0:e.disabledBg,disabledColor:e==null?void 0:e.disabledColor},transition:".25s",type:"radio",width:"18px",...p}),g==="button"?i.jsx(r.Box,{_disabled:{cursor:"not-allowed"},"aria-disabled":d,bg:"var(--bg, light-dark(#fff, #2E2E2E))",border:"1px solid",borderColor:"$border",borderRadius:B?"6px 0 0 6px":k?"0 6px 6px 0":void 0,className:t,color:"var(--text, light-dark(#000, #fff))",cursor:"pointer","data-radio-button":!0,display:"flex",px:8,py:4,selectors:{"[data-radio-input]:checked + &:not([aria-disabled=true])":{fontWeight:600,bg:"var(--checkedBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 80%), color-mix(in srgb, var(--primary) 10%, black 80%)))",borderColor:"var(--checkedBorder, var(--primary))",color:"var(--checkedColor, var(--primary))"},"&:hover:not([aria-disabled=true])":{bg:"var(--hoverBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 90%), color-mix(in srgb, var(--primary) 10%, black 90%)))",borderColor:"var(--hoverBorder, var(--primary))"},"[data-radio-input]:disabled + &":{bg:"var(--disabledBg, light-dark(#F0F0F3, #47474A))",color:"var(--disabledColor, light-dark(#D6D7DE, #373737))"}},style:n,styleOrder:1,styleVars:{primary:e==null?void 0:e.primary,border:e==null?void 0:e.border,text:e==null?void 0:e.text,bg:e==null?void 0:e.bg,hoverBg:e==null?void 0:e.hoverBg,hoverBorder:e==null?void 0:e.hoverBorder,hoverColor:e==null?void 0:e.hoverColor,checkedBg:e==null?void 0:e.checkedBg,checkedBorder:e==null?void 0:e.checkedBorder,checkedColor:e==null?void 0:e.checkedColor,disabledBg:e==null?void 0:e.disabledBg,disabledColor:e==null?void 0:e.disabledColor},transition:"background-color 0.25s, border-color 0.25s",w:"fit-content",children:h}):i.jsx(r.Text,{"aria-disabled":d,className:b==null?void 0:b.label,color:"var(--text, light-dark(#000, #fff))",selectors:{"&[aria-disabled=true]":{color:"var(--disabledColor, light-dark(#D6D7DE, #373737))"}},style:n,styleOrder:1,styleVars:{primary:e==null?void 0:e.primary,border:e==null?void 0:e.border,text:e==null?void 0:e.text,bg:e==null?void 0:e.bg,hoverBg:e==null?void 0:e.hoverBg,hoverBorder:e==null?void 0:e.hoverBorder,hoverColor:e==null?void 0:e.hoverColor,checkedBg:e==null?void 0:e.checkedBg,checkedBorder:e==null?void 0:e.checkedBorder,checkedColor:e==null?void 0:e.checkedColor,disabledBg:e==null?void 0:e.disabledBg,disabledColor:e==null?void 0:e.disabledColor},children:h})]})}exports.Radio=x;

package/dist/components/Radio/index.d.ts

@@ -0,0 +1,37 @@
+type RadioProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    checked?: boolean;
+    classNames?: {
+        label?: string;
+    };
+    color?: string;
+    hoverColor?: string;
+    styles?: {
+        label?: React.CSSProperties;
+    };
+    colors?: {
+        primary?: string;
+        border?: string;
+        text?: string;
+        bg?: string;
+        hoverBg?: string;
+        hoverBorder?: string;
+        hoverColor?: string;
+        checkedBg?: string;
+        checkedBorder?: string;
+        checkedColor?: string;
+        disabledBg?: string;
+        disabledColor?: string;
+    };
+    variant?: 'default' | 'button';
+} & ({
+    variant?: 'default';
+    firstButton?: undefined;
+    lastButton?: undefined;
+} | {
+    variant: 'button';
+    firstButton?: boolean;
+    lastButton?: boolean;
+});
+export declare function Radio({ className, disabled, children, variant, checked, classNames, styles, style, firstButton, lastButton, colors, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/index.tsx"],"names":[],"mappings":"AAEA,KAAK,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,GAAG;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,CAAA;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;KAC5B,CAAA;IACD,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,aAAa,CAAC,EAAE,MAAM,CAAA;KACvB,CAAA;IACD,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;CAC/B,GAAG,CACE;IACE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,UAAU,CAAC,EAAE,SAAS,CAAA;CACvB,GACD;IACE,OAAO,EAAE,QAAQ,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CACJ,CAAA;AAEH,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAmB,EACnB,OAAO,EACP,UAAU,EACV,MAAM,EACN,KAAK,EACL,WAAW,EACX,UAAU,EACV,MAAM,EACN,GAAG,KAAK,EACT,EAAE,UAAU,2CA8KZ"}

package/dist/components/Radio/index.js

@@ -0,0 +1,195 @@
+import { jsxs as y, jsx as i } from "react/jsx-runtime";
+import { Box as k, Input as n, Text as u } from "@devup-ui/react";
+function E({
+  className: r,
+  disabled: d,
+  children: b,
+  variant: h = "default",
+  checked: g,
+  classNames: t,
+  styles: f,
+  style: v,
+  firstButton: B,
+  lastButton: x,
+  colors: e,
+  ...p
+}) {
+  const a = h === "button";
+  return /* @__PURE__ */ y(
+    k,
+    {
+      alignItems: a ? void 0 : "center",
+      "aria-disabled": d,
+      as: "label",
+      cursor: a ? void 0 : "pointer",
+      display: a ? void 0 : "inline-flex",
+      gap: a ? void 0 : 2,
+      selectors: {
+        "&[aria-disabled=true]": {
+          cursor: "default"
+        }
+      },
+      children: [
+        a ? /* @__PURE__ */ i(
+          n,
+          {
+            checked: g,
+            className: r,
+            "data-radio-input": !0,
+            disabled: d,
+            display: "none",
+            opacity: 0,
+            styleOrder: 1,
+            type: "radio",
+            ...p
+          }
+        ) : /* @__PURE__ */ i(
+          n,
+          {
+            _focus: {
+              outline: "1px sold var(--border, var(--primary))"
+            },
+            appearance: "none",
+            bg: "light-dark(#fff, #2E2E2E)",
+            border: "1px solid",
+            borderColor: "$border",
+            borderRadius: "100%",
+            checked: g,
+            className: r,
+            "data-radio-input": !0,
+            disabled: d,
+            height: "18px",
+            m: 0,
+            selectors: {
+              // checked
+              "&:checked:not(:disabled)": {
+                bg: "var(--checkedBg, var(--primary, light-dark(#fff, #2E2E2E)))",
+                border: "3px solid",
+                borderColor: "var(--checkedBg, light-dark(#fff, #2E2E2E))",
+                boxShadow: "0 0 0 1px var(--checkedBorder, var(--primary))"
+              },
+              // hover
+              "&:hover:not(:disabled,:checked)": {
+                border: "1px solid var(--hoverBorder, var(--primary))",
+                bg: "var(--hoverBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 90%), color-mix(in srgb, var(--primary) 10%, black 90%)))"
+              },
+              // disabled
+              "&:is(:disabled, [aria-disabled=true])": {
+                bgColor: "var(--disabledBg, light-dark(#F0F0F3, #47474A))"
+              }
+            },
+            styleOrder: 1,
+            styleVars: {
+              primary: e == null ? void 0 : e.primary,
+              border: e == null ? void 0 : e.border,
+              text: e == null ? void 0 : e.text,
+              bg: e == null ? void 0 : e.bg,
+              hoverBg: e == null ? void 0 : e.hoverBg,
+              hoverBorder: e == null ? void 0 : e.hoverBorder,
+              hoverColor: e == null ? void 0 : e.hoverColor,
+              checkedBg: e == null ? void 0 : e.checkedBg,
+              checkedBorder: e == null ? void 0 : e.checkedBorder,
+              checkedColor: e == null ? void 0 : e.checkedColor,
+              disabledBg: e == null ? void 0 : e.disabledBg,
+              disabledColor: e == null ? void 0 : e.disabledColor
+            },
+            transition: ".25s",
+            type: "radio",
+            width: "18px",
+            ...p
+          }
+        ),
+        h === "button" ? /* @__PURE__ */ i(
+          k,
+          {
+            _disabled: {
+              cursor: "not-allowed"
+            },
+            "aria-disabled": d,
+            bg: "var(--bg, light-dark(#fff, #2E2E2E))",
+            border: "1px solid",
+            borderColor: "$border",
+            borderRadius: B ? "6px 0 0 6px" : x ? "0 6px 6px 0" : void 0,
+            className: r,
+            color: "var(--text, light-dark(#000, #fff))",
+            cursor: "pointer",
+            "data-radio-button": !0,
+            display: "flex",
+            px: 8,
+            py: 4,
+            selectors: {
+              // checked
+              "[data-radio-input]:checked + &:not([aria-disabled=true])": {
+                fontWeight: 600,
+                bg: "var(--checkedBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 80%), color-mix(in srgb, var(--primary) 10%, black 80%)))",
+                borderColor: "var(--checkedBorder, var(--primary))",
+                color: "var(--checkedColor, var(--primary))"
+              },
+              // hover
+              "&:hover:not([aria-disabled=true])": {
+                bg: "var(--hoverBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 90%), color-mix(in srgb, var(--primary) 10%, black 90%)))",
+                borderColor: "var(--hoverBorder, var(--primary))"
+              },
+              // disabled
+              "[data-radio-input]:disabled + &": {
+                bg: "var(--disabledBg, light-dark(#F0F0F3, #47474A))",
+                color: "var(--disabledColor, light-dark(#D6D7DE, #373737))"
+              }
+            },
+            style: v,
+            styleOrder: 1,
+            styleVars: {
+              primary: e == null ? void 0 : e.primary,
+              border: e == null ? void 0 : e.border,
+              text: e == null ? void 0 : e.text,
+              bg: e == null ? void 0 : e.bg,
+              hoverBg: e == null ? void 0 : e.hoverBg,
+              hoverBorder: e == null ? void 0 : e.hoverBorder,
+              hoverColor: e == null ? void 0 : e.hoverColor,
+              checkedBg: e == null ? void 0 : e.checkedBg,
+              checkedBorder: e == null ? void 0 : e.checkedBorder,
+              checkedColor: e == null ? void 0 : e.checkedColor,
+              disabledBg: e == null ? void 0 : e.disabledBg,
+              disabledColor: e == null ? void 0 : e.disabledColor
+            },
+            transition: "background-color 0.25s, border-color 0.25s",
+            w: "fit-content",
+            children: b
+          }
+        ) : /* @__PURE__ */ i(
+          u,
+          {
+            "aria-disabled": d,
+            className: t == null ? void 0 : t.label,
+            color: "var(--text, light-dark(#000, #fff))",
+            selectors: {
+              "&[aria-disabled=true]": {
+                color: "var(--disabledColor, light-dark(#D6D7DE, #373737))"
+              }
+            },
+            style: v,
+            styleOrder: 1,
+            styleVars: {
+              primary: e == null ? void 0 : e.primary,
+              border: e == null ? void 0 : e.border,
+              text: e == null ? void 0 : e.text,
+              bg: e == null ? void 0 : e.bg,
+              hoverBg: e == null ? void 0 : e.hoverBg,
+              hoverBorder: e == null ? void 0 : e.hoverBorder,
+              hoverColor: e == null ? void 0 : e.hoverColor,
+              checkedBg: e == null ? void 0 : e.checkedBg,
+              checkedBorder: e == null ? void 0 : e.checkedBorder,
+              checkedColor: e == null ? void 0 : e.checkedColor,
+              disabledBg: e == null ? void 0 : e.disabledBg,
+              disabledColor: e == null ? void 0 : e.disabledColor
+            },
+            children: b
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  E as Radio
+};

package/dist/components/RadioGroup/RadioGroup.stories.d.ts

@@ -0,0 +1,33 @@
+import { RadioGroup } from './index';
+declare const _default: {
+    title: string;
+    component: typeof RadioGroup;
+};
+export default _default;
+export declare const Default: {
+    args: {
+        disabled: boolean;
+        name: string;
+        colors: {
+            primary: string;
+            border: string;
+            text: string;
+            bg: string;
+            hoverBg: string;
+            hoverBorder: string;
+            hoverColor: string;
+            checkedBg: string;
+            checkedBorder: string;
+            checkedColor: string;
+            disabledBg: string;
+            disabledColor: string;
+        };
+        options: {
+            value: string;
+            label: string;
+        }[];
+        variant: string;
+        direction: string;
+    };
+};
+//# sourceMappingURL=RadioGroup.stories.d.ts.map

package/dist/components/RadioGroup/RadioGroup.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;;;;;AAEpC,wBAGC;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;CAmCnB,CAAA"}

package/dist/components/RadioGroup/index.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),k=require("@devup-ui/react"),D=require("react"),h=require("../Radio/index.cjs");function F({disabled:d,options:p,direction:x="row",variant:t="default",style:q,value:r,onChange:i,defaultValue:g,colors:S,className:b,classNames:n,styles:e}){const[w,V]=D.useState(r?String(r):g?String(g):void 0),B=r?String(r):w??"";function G(o){i==null||i(o),V(o)}return c.jsx(k.Flex,{className:n==null?void 0:n.container,flexDir:t==="button"?"row":x,gap:t==="button"?0:x==="row"?"30px":"16px",style:e==null?void 0:e.container,children:p.map(({value:o,label:f},j)=>{const u=String(o),R={checked:B===u,disabled:d,onChange:()=>!d&&G(u),className:b,classNames:n,styles:e,style:q};return t==="button"?c.jsx(h.Radio,{colors:S,firstButton:j===0,lastButton:j===p.length-1,variant:t,...R,children:f},u):c.jsx(h.Radio,{colors:S,variant:t,...R,children:f},u)})})}exports.RadioGroup=F;

package/dist/components/RadioGroup/index.d.ts

@@ -0,0 +1,39 @@
+interface RadioGroupProps {
+    options: {
+        value: string | number | boolean;
+        label: React.ReactNode;
+    }[];
+    disabled?: boolean;
+    direction?: 'row' | 'column';
+    variant?: 'default' | 'button';
+    style?: React.CSSProperties;
+    value?: string | number | boolean;
+    onChange?: (value: string | number | boolean) => void;
+    defaultValue?: string | number | boolean;
+    className?: string;
+    colors?: {
+        primary?: string;
+        border?: string;
+        text?: string;
+        bg?: string;
+        hoverBg?: string;
+        hoverBorder?: string;
+        hoverColor?: string;
+        checkedBg?: string;
+        checkedBorder?: string;
+        checkedColor?: string;
+        disabledBg?: string;
+        disabledColor?: string;
+    };
+    classNames?: {
+        label?: string;
+        container?: string;
+    };
+    styles?: {
+        label?: React.CSSProperties;
+        container?: React.CSSProperties;
+    };
+}
+export declare function RadioGroup({ disabled, options, direction, variant, style, value, onChange, defaultValue, colors, className, classNames, styles, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/RadioGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/index.tsx"],"names":[],"mappings":"AAMA,UAAU,eAAe;IACvB,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;QAChC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;KACvB,EAAE,CAAA;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,KAAK,IAAI,CAAA;IACrD,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,aAAa,CAAC,EAAE,MAAM,CAAA;KACvB,CAAA;IACD,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;IACD,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;QAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;KAChC,CAAA;CACF;AACD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,SAAiB,EACjB,OAAmB,EACnB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,SAAS,EACT,UAAU,EACV,MAAM,GACP,EAAE,eAAe,2CAgDjB"}

package/dist/components/RadioGroup/index.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as f } from "react/jsx-runtime";
+import { Flex as D } from "@devup-ui/react";
+import { useState as F } from "react";
+import { Radio as w } from "../Radio/index.js";
+function A({
+  disabled: c,
+  options: e,
+  direction: g = "row",
+  variant: r = "default",
+  style: V,
+  value: t,
+  onChange: p,
+  defaultValue: m,
+  colors: x,
+  className: B,
+  classNames: n,
+  styles: o
+}) {
+  const [R, b] = F(
+    t ? String(t) : m ? String(m) : void 0
+  ), j = t ? String(t) : R ?? "";
+  function k(i) {
+    p == null || p(i), b(i);
+  }
+  return /* @__PURE__ */ f(
+    D,
+    {
+      className: n == null ? void 0 : n.container,
+      flexDir: r === "button" ? "row" : g,
+      gap: r === "button" ? 0 : g === "row" ? "30px" : "16px",
+      style: o == null ? void 0 : o.container,
+      children: e.map(({ value: i, label: S }, d) => {
+        const u = String(i), h = {
+          checked: j === u,
+          disabled: c,
+          onChange: () => !c && k(u),
+          className: B,
+          classNames: n,
+          styles: o,
+          style: V
+        };
+        return r === "button" ? /* @__PURE__ */ f(
+          w,
+          {
+            colors: x,
+            firstButton: d === 0,
+            lastButton: d === e.length - 1,
+            variant: r,
+            ...h,
+            children: S
+          },
+          u
+        ) : /* @__PURE__ */ f(w, { colors: x, variant: r, ...h, children: S }, u);
+      })
+    }
+  );
+}
+export {
+  A as RadioGroup
+};

package/dist/components/Select/index.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),v=require("react"),c=require("@devup-ui/react"),A=require("clsx"),S=require("../../contexts/useSelect.cjs"),j=require("../Button/index.cjs"),w=require("./IconCheck.cjs");function O({type:n="default",children:u,defaultValue:f,value:s,onChange:d,defaultOpen:g,open:b,onOpenChange:o,colors:e,typography:p,options:a,...m}){const i=v.useRef(null),[h,l]=v.useState(g??!1),[x,k]=v.useState(f??(n==="checkbox"?[]:""));v.useEffect(()=>{const r=y=>{i.current&&i.current.contains(y.target)||l(!1)};return document.addEventListener("click",r),()=>document.removeEventListener("click",r)},[h,l]);const F=r=>{o==null||o(r),l(r)},E=r=>{if(d==null||d(r),n!=="default"){if(n==="radio"){k(r);return}Array.isArray(x)&&x.includes(r)?k(x.filter(y=>y!==r)):k([...x,r])}};return t.jsx(S.SelectContext.Provider,{value:{open:b??h,setOpen:F,value:s??x,setValue:E,type:n,ref:i},children:t.jsx(c.Box,{ref:i,display:"inline-block",h:"fit-content",selectors:{"&, & *":{boxSizing:"border-box"}},styleOrder:1,styleVars:{primary:e==null?void 0:e.primary,border:e==null?void 0:e.border,inputBackground:e==null?void 0:e.inputBackground,base10:e==null?void 0:e.base10,title:e==null?void 0:e.title,selectDisabled:e==null?void 0:e.selectDisabled,primaryBg:e==null?void 0:e.primaryBg,inputDisabledBackground:e==null?void 0:e.inputDisabledBackground,inputDisabledText:e==null?void 0:e.inputDisabledText},typography:p,...m,children:a?t.jsxs(t.Fragment,{children:[t.jsx(B,{children:u}),t.jsx(D,{children:a==null?void 0:a.map(r=>v.createElement(C,{...r,key:"option-"+r.value},r.label??r.value))})]}):u})})}function B({className:n,children:u,asChild:f,...s}){const{open:d,setOpen:g}=S.useSelect(),b=()=>{g(!d)};if(f){const o=v.Children.only(u),e=o.type;return t.jsx(e,{"aria-expanded":d,"aria-label":"Select toggle",onClick:b,...o.props})}return t.jsx(j.Button,{"aria-expanded":d,"aria-label":"Select toggle",className:A(c.css({borderRadius:"8px",styleOrder:2}),n),onClick:b,...s,children:u})}function D({children:n,showConfirmButton:u,confirmButtonText:f="완료",x:s=0,y:d=0,...g}){const{open:b,setOpen:o,type:e,ref:p}=S.useSelect();return b?t.jsxs(c.VStack,{ref:a=>{if(!p.current||!a)return;const m=p.current,i=()=>{const{width:h,height:l,x,y:k,top:F,left:E}=m.getBoundingClientRect(),r=a.offsetHeight+F+window.scrollY+l+d>document.documentElement.scrollHeight,y=a.offsetWidth+E+window.scrollX+h+s>document.documentElement.scrollWidth;r?a.style.bottom=`${window.innerHeight-k+10}px`:a.style.top=`${k+l+10+d}px`,y?a.style.left=`${x-a.offsetWidth+m.offsetWidth+s}px`:a.style.left=`${x+s}px`};return i(),window.addEventListener("scroll",i,!0),window.addEventListener("resize",i),()=>{window.removeEventListener("scroll",i,!0),window.removeEventListener("resize",i)}},"aria-label":"Select container",bg:"var(--inputBg, light-dark(#FFF,#2E2E2E))",border:"1px solid var(--border, light-dark(#E4E4E4,#434343))",borderRadius:"8px",bottom:"-4px",boxShadow:"0 2px 2px 0 var(--base10, light-dark(#0000001A,#FFFFFF1A))",boxSize:"fit-content",gap:"6px",minW:"232px",p:"10px",pos:"fixed",styleOrder:1,userSelect:"none",zIndex:1,...g,children:[n,u&&e==="checkbox"&&t.jsx(c.Flex,{justifyContent:"end",w:"100%",children:t.jsx(j.Button,{"aria-label":"Select confirm button",className:c.css({textAlign:"end",bg:"var(--primary, light-dark(#674DC7, #8163E1))",borderRadius:"8px",w:"fit-content",px:"30px",py:"10px",color:"#FFF",typography:"buttonS"}),onClick:()=>o(!1),variant:"primary",children:f})})]}):null}function C({disabled:n,onClick:u,children:f,value:s,showCheck:d=!0,...g}){const{setOpen:b,setValue:o,value:e,type:p}=S.useSelect(),a=()=>{p!=="checkbox"&&b(!1)},m=(l,x)=>{if(u){u(l,x);return}typeof l=="string"&&o(l),a()},i={default:!1,radio:e===s,checkbox:Array.isArray(e)&&s&&e.includes(s)}[p],h=!n&&!(p==="radio"&&i);return t.jsxs(c.Flex,{_hover:h&&{bg:"var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))"},alignItems:"center",borderRadius:"6px",color:n?"var(--selectDisabled, light-dark(#C4C5D1, #45464D))":i?"var(--primary, light-dark(#674DC7, #8163E1)":"var(--title, light-dark(#1A1A1A,#FAFAFA))",cursor:h?"pointer":"default","data-value":s,fontWeight:i?"700":"400",gap:{checkbox:"10px",radio:"6px",default:"0"}[p],h:"40px",onClick:n?void 0:l=>m(s,l),px:"10px",styleOrder:1,transition:"background-color 0.1s ease-in-out",...g,children:[d&&{checkbox:t.jsx(c.Box,{bg:n?"var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))":i?"var(--primary, light-dark(#674DC7, #8163E1)":"var(--border, light-dark(#E4E4E4, #434343))",borderRadius:"4px",boxSize:"18px",pos:"relative",transition:"background-color 0.1s ease-in-out",children:i&&t.jsx(w.IconCheck,{className:c.css({color:n?"var(--inputDisabledText, light-dark(#E5E5E5, #373737))":"#FFF",position:"absolute",top:"55%",left:"50%",transform:"translate(-50%, -50%)"})})}),radio:t.jsx(t.Fragment,{children:i&&t.jsx(c.Box,{borderRadius:"4px",boxSize:"18px",pos:"relative",transition:"background-color 0.1s ease-in-out",children:t.jsx(w.IconCheck,{className:c.css({position:"absolute",top:"55%",left:"50%",transform:"translate(-50%, -50%)",color:"inherit"})})})}),default:null}[p],f]})}function R({...n}){return t.jsx(c.Box,{bg:"var(--border, light-dark(#E4E4E4,#434343)",h:"1px",styleOrder:1,w:"100%",...n})}exports.Select=O;exports.SelectContainer=D;exports.SelectDivider=R;exports.SelectOption=C;exports.SelectTrigger=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),k=require("react"),c=require("@devup-ui/react"),A=require("clsx"),y=require("../../contexts/useSelect.cjs"),w=require("../Button/index.cjs"),j=require("./IconCheck.cjs");function O({type:n="default",children:u,defaultValue:g,value:s,onChange:l,defaultOpen:h,open:b,onOpenChange:o,colors:e,typography:x,options:a,...m}){const i=k.useRef(null),[f,d]=k.useState(h??!1),[p,v]=k.useState(g??(n==="checkbox"?[]:""));k.useEffect(()=>{const r=E=>{i.current&&i.current.contains(E.target)||d(!1)};return document.addEventListener("click",r),()=>document.removeEventListener("click",r)},[f,d]);const S=r=>{o==null||o(r),d(r)},F=r=>{if(l==null||l(r),n!=="default"){if(n==="radio"){v(r);return}Array.isArray(p)&&p.includes(r)?v(p.filter(E=>E!==r)):v([...p,r])}};return t.jsx(y.SelectContext.Provider,{value:{open:b??f,setOpen:S,value:s??p,setValue:F,type:n,ref:i},children:t.jsx(c.Box,{ref:i,display:"inline-block",h:"fit-content",selectors:{"&, & *":{boxSizing:"border-box"}},styleOrder:1,styleVars:{primary:e==null?void 0:e.primary,border:e==null?void 0:e.border,inputBackground:e==null?void 0:e.inputBackground,base10:e==null?void 0:e.base10,title:e==null?void 0:e.title,selectDisabled:e==null?void 0:e.selectDisabled,primaryBg:e==null?void 0:e.primaryBg,inputDisabledBackground:e==null?void 0:e.inputDisabledBackground,inputDisabledText:e==null?void 0:e.inputDisabledText},typography:x,...m,children:a?t.jsxs(t.Fragment,{children:[t.jsx(B,{children:u}),t.jsx(D,{children:a==null?void 0:a.map(r=>k.createElement(C,{...r,key:"option-"+r.value},r.label??r.value))})]}):u})})}function B({className:n,children:u,asChild:g,...s}){const{open:l,setOpen:h}=y.useSelect(),b=()=>{h(!l)};if(g){const o=k.Children.only(u),e=o.type;return t.jsx(e,{"aria-expanded":l,"aria-label":"Select toggle",onClick:b,...o.props})}return t.jsx(w.Button,{"aria-expanded":l,"aria-label":"Select toggle",className:A(c.css({borderRadius:"8px",styleOrder:2}),n),onClick:b,...s,children:u})}function D({children:n,showConfirmButton:u,confirmButtonText:g="완료",x:s=0,y:l=0,...h}){const{open:b,setOpen:o,type:e,ref:x}=y.useSelect();return b?t.jsxs(c.VStack,{ref:a=>{if(!x.current||!a)return;const m=x.current,i=()=>{const{height:f,x:d,y:p,top:v,left:S}=m.getBoundingClientRect(),F=a.offsetHeight+v+window.scrollY+f+l>document.documentElement.scrollHeight,r=a.offsetWidth+S+window.scrollX+s>document.documentElement.scrollWidth;F?a.style.bottom=`${window.innerHeight-p+10}px`:a.style.top=`${p+f+10+l}px`,r?a.style.left=`${Math.max(d-a.offsetWidth+m.offsetWidth,0)+s}px`:a.style.left=`${d+s}px`};return i(),window.addEventListener("scroll",i,!0),window.addEventListener("resize",i),()=>{window.removeEventListener("scroll",i,!0),window.removeEventListener("resize",i)}},"aria-label":"Select container",bg:"var(--inputBg, light-dark(#FFF,#2E2E2E))",border:"1px solid var(--border, light-dark(#E4E4E4,#434343))",borderRadius:"8px",bottom:"-4px",boxShadow:"0 2px 2px 0 var(--base10, light-dark(#0000001A,#FFFFFF1A))",boxSize:"fit-content",gap:"6px",minW:"232px",p:"10px",pos:"fixed",styleOrder:1,userSelect:"none",zIndex:1,...h,children:[n,u&&e==="checkbox"&&t.jsx(c.Flex,{justifyContent:"end",w:"100%",children:t.jsx(w.Button,{"aria-label":"Select confirm button",className:c.css({textAlign:"end",bg:"var(--primary, light-dark(#674DC7, #8163E1))",borderRadius:"8px",w:"fit-content",px:"30px",py:"10px",color:"#FFF",typography:"buttonS"}),onClick:()=>o(!1),variant:"primary",children:g})})]}):null}function C({disabled:n,onClick:u,children:g,value:s,showCheck:l=!0,...h}){const{setOpen:b,setValue:o,value:e,type:x}=y.useSelect(),a=()=>{x!=="checkbox"&&b(!1)},m=(d,p)=>{if(u){u(d,p);return}typeof d=="string"&&o(d),a()},i={default:!1,radio:e===s,checkbox:Array.isArray(e)&&s&&e.includes(s)}[x],f=!n&&!(x==="radio"&&i);return t.jsxs(c.Flex,{_hover:f&&{bg:"var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))"},alignItems:"center",borderRadius:"6px",color:n?"var(--selectDisabled, light-dark(#C4C5D1, #45464D))":i?"var(--primary, light-dark(#674DC7, #8163E1)":"var(--title, light-dark(#1A1A1A,#FAFAFA))",cursor:f?"pointer":"default","data-value":s,fontWeight:i?"700":"400",gap:{checkbox:"10px",radio:"6px",default:"0"}[x],h:"40px",onClick:n?void 0:d=>m(s,d),px:"10px",styleOrder:1,transition:"background-color 0.1s ease-in-out",...h,children:[l&&{checkbox:t.jsx(c.Box,{bg:n?"var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))":i?"var(--primary, light-dark(#674DC7, #8163E1)":"var(--border, light-dark(#E4E4E4, #434343))",borderRadius:"4px",boxSize:"18px",pos:"relative",transition:"background-color 0.1s ease-in-out",children:i&&t.jsx(j.IconCheck,{className:c.css({color:n?"var(--inputDisabledText, light-dark(#E5E5E5, #373737))":"#FFF",position:"absolute",top:"55%",left:"50%",transform:"translate(-50%, -50%)"})})}),radio:t.jsx(t.Fragment,{children:i&&t.jsx(c.Box,{borderRadius:"4px",boxSize:"18px",pos:"relative",transition:"background-color 0.1s ease-in-out",children:t.jsx(j.IconCheck,{className:c.css({position:"absolute",top:"55%",left:"50%",transform:"translate(-50%, -50%)",color:"inherit"})})})}),default:null}[x],g]})}function R({...n}){return t.jsx(c.Box,{bg:"var(--border, light-dark(#E4E4E4,#434343)",h:"1px",styleOrder:1,w:"100%",...n})}exports.Select=O;exports.SelectContainer=D;exports.SelectDivider=R;exports.SelectOption=C;exports.SelectTrigger=B;

package/dist/components/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Select/index.js

@@ -1,18 +1,18 @@
 "use client";
-import { jsx as a, jsxs as w, Fragment as B } from "react/jsx-runtime";
+import { jsx as a, jsxs as S, Fragment as B } from "react/jsx-runtime";
 import { useRef as R, useState as D, useEffect as z, createElement as L, Children as W } from "react";
-import { Box as v, VStack as H, Flex as C, css as y } from "@devup-ui/react";
+import { Box as k, VStack as H, Flex as C, css as v } from "@devup-ui/react";
 import N from "clsx";
-import { SelectContext as T, useSelect as S } from "../../contexts/useSelect.js";
+import { SelectContext as T, useSelect as w } from "../../contexts/useSelect.js";
 import { Button as O } from "../Button/index.js";
 import { IconCheck as A } from "./IconCheck.js";
-function J({
+function G({
   type: i = "default",
   children: o,
-  defaultValue: b,
+  defaultValue: m,
   value: d,
   onChange: l,
-  defaultOpen: m,
+  defaultOpen: x,
   open: f,
   onOpenChange: c,
   colors: e,
@@ -20,39 +20,39 @@ function J({
   options: n,
   ...h
 }) {
-  const r = R(null), [x, s] = D(m ?? !1), [p, g] = D(
-    b ?? (i === "checkbox" ? [] : "")
+  const r = R(null), [b, s] = D(x ?? !1), [p, g] = D(
+    m ?? (i === "checkbox" ? [] : "")
   );
   z(() => {
-    const t = (k) => {
-      r.current && r.current.contains(k.target) || s(!1);
+    const t = (E) => {
+      r.current && r.current.contains(E.target) || s(!1);
     };
     return document.addEventListener("click", t), () => document.removeEventListener("click", t);
-  }, [x, s]);
-  const F = (t) => {
+  }, [b, s]);
+  const y = (t) => {
     c == null || c(t), s(t);
-  }, E = (t) => {
+  }, F = (t) => {
     if (l == null || l(t), i !== "default") {
       if (i === "radio") {
         g(t);
         return;
       }
-      Array.isArray(p) && p.includes(t) ? g(p.filter((k) => k !== t)) : g([...p, t]);
+      Array.isArray(p) && p.includes(t) ? g(p.filter((E) => E !== t)) : g([...p, t]);
     }
   };
   return /* @__PURE__ */ a(
     T.Provider,
     {
       value: {
-        open: f ?? x,
-        setOpen: F,
+        open: f ?? b,
+        setOpen: y,
         value: d ?? p,
-        setValue: E,
+        setValue: F,
         type: i,
         ref: r
       },
       children: /* @__PURE__ */ a(
-        v,
+        k,
         {
           ref: r,
           display: "inline-block",
@@ -76,7 +76,7 @@ function J({
           },
           typography: u,
           ...h,
-          children: n ? /* @__PURE__ */ w(B, { children: [
+          children: n ? /* @__PURE__ */ S(B, { children: [
             /* @__PURE__ */ a($, { children: o }),
             /* @__PURE__ */ a(j, { children: n == null ? void 0 : n.map((t) => /* @__PURE__ */ L(I, { ...t, key: "option-" + t.value }, t.label ?? t.value)) })
           ] }) : o
@@ -88,13 +88,13 @@ function J({
 function $({
   className: i,
   children: o,
-  asChild: b,
+  asChild: m,
   ...d
 }) {
-  const { open: l, setOpen: m } = S(), f = () => {
-    m(!l);
+  const { open: l, setOpen: x } = w(), f = () => {
+    x(!l);
   };
-  if (b) {
+  if (m) {
     const c = W.only(o), e = c.type;
     return /* @__PURE__ */ a(
       e,
@@ -112,7 +112,7 @@ function $({
       "aria-expanded": l,
       "aria-label": "Select toggle",
       className: N(
-        y({
+        v({
           borderRadius: "8px",
           styleOrder: 2
         }),
@@ -127,27 +127,26 @@ function $({
 function j({
   children: i,
   showConfirmButton: o,
-  confirmButtonText: b = "완료",
+  confirmButtonText: m = "완료",
   x: d = 0,
   y: l = 0,
-  ...m
+  ...x
 }) {
-  const { open: f, setOpen: c, type: e, ref: u } = S();
-  return f ? /* @__PURE__ */ w(
+  const { open: f, setOpen: c, type: e, ref: u } = w();
+  return f ? /* @__PURE__ */ S(
     H,
     {
       ref: (n) => {
         if (!u.current || !n) return;
         const h = u.current, r = () => {
           const {
-            width: x,
-            height: s,
-            x: p,
-            y: g,
-            top: F,
-            left: E
-          } = h.getBoundingClientRect(), t = n.offsetHeight + F + window.scrollY + s + l > document.documentElement.scrollHeight, k = n.offsetWidth + E + window.scrollX + x + d > document.documentElement.scrollWidth;
-          t ? n.style.bottom = `${window.innerHeight - g + 10}px` : n.style.top = `${g + s + 10 + l}px`, k ? n.style.left = `${p - n.offsetWidth + h.offsetWidth + d}px` : n.style.left = `${p + d}px`;
+            height: b,
+            x: s,
+            y: p,
+            top: g,
+            left: y
+          } = h.getBoundingClientRect(), F = n.offsetHeight + g + window.scrollY + b + l > document.documentElement.scrollHeight, t = n.offsetWidth + y + window.scrollX + d > document.documentElement.scrollWidth;
+          F ? n.style.bottom = `${window.innerHeight - p + 10}px` : n.style.top = `${p + b + 10 + l}px`, t ? n.style.left = `${Math.max(s - n.offsetWidth + h.offsetWidth, 0) + d}px` : n.style.left = `${s + d}px`;
         };
         return r(), window.addEventListener("scroll", r, !0), window.addEventListener("resize", r), () => {
           window.removeEventListener("scroll", r, !0), window.removeEventListener("resize", r);
@@ -167,14 +166,14 @@ function j({
       styleOrder: 1,
       userSelect: "none",
       zIndex: 1,
-      ...m,
+      ...x,
       children: [
         i,
         o && e === "checkbox" && /* @__PURE__ */ a(C, { justifyContent: "end", w: "100%", children: /* @__PURE__ */ a(
           O,
           {
             "aria-label": "Select confirm button",
-            className: y({
+            className: v({
               textAlign: "end",
               bg: "var(--primary, light-dark(#674DC7, #8163E1))",
               borderRadius: "8px",
@@ -186,7 +185,7 @@ function j({
             }),
             onClick: () => c(!1),
             variant: "primary",
-            children: b
+            children: m
           }
         ) })
       ]
@@ -196,12 +195,12 @@ function j({
 function I({
   disabled: i,
   onClick: o,
-  children: b,
+  children: m,
   value: d,
   showCheck: l = !0,
-  ...m
+  ...x
 }) {
-  const { setOpen: f, setValue: c, value: e, type: u } = S(), n = () => {
+  const { setOpen: f, setValue: c, value: e, type: u } = w(), n = () => {
     u !== "checkbox" && f(!1);
   }, h = (s, p) => {
     if (o) {
@@ -213,17 +212,17 @@ function I({
     default: !1,
     radio: e === d,
     checkbox: Array.isArray(e) && d && e.includes(d)
-  }[u], x = !i && !(u === "radio" && r);
-  return /* @__PURE__ */ w(
+  }[u], b = !i && !(u === "radio" && r);
+  return /* @__PURE__ */ S(
     C,
     {
-      _hover: x && {
+      _hover: b && {
         bg: "var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))"
       },
       alignItems: "center",
       borderRadius: "6px",
       color: i ? "var(--selectDisabled, light-dark(#C4C5D1, #45464D))" : r ? "var(--primary, light-dark(#674DC7, #8163E1)" : "var(--title, light-dark(#1A1A1A,#FAFAFA))",
-      cursor: x ? "pointer" : "default",
+      cursor: b ? "pointer" : "default",
       "data-value": d,
       fontWeight: r ? "700" : "400",
       gap: {
@@ -236,11 +235,11 @@ function I({
       px: "10px",
       styleOrder: 1,
       transition: "background-color 0.1s ease-in-out",
-      ...m,
+      ...x,
       children: [
         l && {
           checkbox: /* @__PURE__ */ a(
-            v,
+            k,
             {
               bg: i ? "var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))" : r ? "var(--primary, light-dark(#674DC7, #8163E1)" : "var(--border, light-dark(#E4E4E4, #434343))",
               borderRadius: "4px",
@@ -250,7 +249,7 @@ function I({
               children: r && /* @__PURE__ */ a(
                 A,
                 {
-                  className: y({
+                  className: v({
                     color: i ? "var(--inputDisabledText, light-dark(#E5E5E5, #373737))" : "#FFF",
                     position: "absolute",
                     top: "55%",
@@ -262,7 +261,7 @@ function I({
             }
           ),
           radio: /* @__PURE__ */ a(B, { children: r && /* @__PURE__ */ a(
-            v,
+            k,
             {
               borderRadius: "4px",
               boxSize: "18px",
@@ -271,7 +270,7 @@ function I({
               children: /* @__PURE__ */ a(
                 A,
                 {
-                  className: y({
+                  className: v({
                     position: "absolute",
                     top: "55%",
                     left: "50%",
@@ -284,14 +283,14 @@ function I({
           ) }),
           default: null
         }[u],
-        b
+        m
       ]
     }
   );
 }
-function K({ ...i }) {
+function J({ ...i }) {
   return /* @__PURE__ */ a(
-    v,
+    k,
     {
       bg: "var(--border, light-dark(#E4E4E4,#434343)",
       h: "1px",
@@ -302,9 +301,9 @@ function K({ ...i }) {
   );
 }
 export {
-  J as Select,
+  G as Select,
   j as SelectContainer,
-  K as SelectDivider,
+  J as SelectDivider,
   I as SelectOption,
   $ as SelectTrigger
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./components/Button/index.cjs"),p=require("./components/Input/index.cjs"),t=require("./components/Select/index.cjs"),e=require("./components/Stepper/index.cjs"),r=require("./contexts/useSelect.cjs");exports.Button=n.Button;exports.Input=p.Input;exports.Select=t.Select;exports.SelectContainer=t.SelectContainer;exports.SelectDivider=t.SelectDivider;exports.SelectOption=t.SelectOption;exports.SelectTrigger=t.SelectTrigger;exports.Stepper=e.Stepper;exports.StepperContainer=e.StepperContainer;exports.StepperDecreaseButton=e.StepperDecreaseButton;exports.StepperIncreaseButton=e.StepperIncreaseButton;exports.StepperInput=e.StepperInput;exports.useStepper=e.useStepper;exports.SelectContext=r.SelectContext;exports.useSelect=r.useSelect;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./components/Button/index.cjs"),p=require("./components/Input/index.cjs"),i=require("./components/Radio/index.cjs"),o=require("./components/RadioGroup/index.cjs"),t=require("./components/Select/index.cjs"),e=require("./components/Stepper/index.cjs"),r=require("./contexts/useSelect.cjs");exports.Button=n.Button;exports.Input=p.Input;exports.Radio=i.Radio;exports.RadioGroup=o.RadioGroup;exports.Select=t.Select;exports.SelectContainer=t.SelectContainer;exports.SelectDivider=t.SelectDivider;exports.SelectOption=t.SelectOption;exports.SelectTrigger=t.SelectTrigger;exports.Stepper=e.Stepper;exports.StepperContainer=e.StepperContainer;exports.StepperDecreaseButton=e.StepperDecreaseButton;exports.StepperIncreaseButton=e.StepperIncreaseButton;exports.StepperInput=e.StepperInput;exports.useStepper=e.useStepper;exports.SelectContext=r.SelectContext;exports.useSelect=r.useSelect;

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { Button } from './components/Button';
 export { Input } from './components/Input';
+export { Radio } from './components/Radio';
+export { RadioGroup } from './components/RadioGroup';
 export { Select, SelectContainer, SelectDivider, SelectOption, SelectTrigger, } from './components/Select';
 export { Stepper, StepperContainer, StepperDecreaseButton, StepperIncreaseButton, StepperInput, useStepper, } from './components/Stepper';
 export { SelectContext, useSelect } from './contexts/useSelect';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EACL,MAAM,EACN,eAAe,EACf,aAAa,EACb,YAAY,EACZ,aAAa,GACd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,UAAU,GACX,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC/D,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,EACL,MAAM,EACN,eAAe,EACf,aAAa,EACb,YAAY,EACZ,aAAa,GACd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,UAAU,GACX,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC/D,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/index.js

@@ -1,22 +1,26 @@
 import { Button as r } from "./components/Button/index.js";
-import { Input as o } from "./components/Input/index.js";
-import { Select as n, SelectContainer as c, SelectDivider as l, SelectOption as u, SelectTrigger as i } from "./components/Select/index.js";
-import { Stepper as f, StepperContainer as m, StepperDecreaseButton as a, StepperIncreaseButton as s, StepperInput as B, useStepper as C } from "./components/Stepper/index.js";
-import { SelectContext as g, useSelect as D } from "./contexts/useSelect.js";
+import { Input as p } from "./components/Input/index.js";
+import { Radio as n } from "./components/Radio/index.js";
+import { RadioGroup as i } from "./components/RadioGroup/index.js";
+import { Select as x, SelectContainer as f, SelectDivider as l, SelectOption as m, SelectTrigger as a } from "./components/Select/index.js";
+import { Stepper as d, StepperContainer as B, StepperDecreaseButton as C, StepperIncreaseButton as I, StepperInput as g, useStepper as D } from "./components/Stepper/index.js";
+import { SelectContext as v, useSelect as G } from "./contexts/useSelect.js";
 export {
   r as Button,
-  o as Input,
-  n as Select,
-  c as SelectContainer,
-  g as SelectContext,
+  p as Input,
+  n as Radio,
+  i as RadioGroup,
+  x as Select,
+  f as SelectContainer,
+  v as SelectContext,
   l as SelectDivider,
-  u as SelectOption,
-  i as SelectTrigger,
-  f as Stepper,
-  m as StepperContainer,
-  a as StepperDecreaseButton,
-  s as StepperIncreaseButton,
-  B as StepperInput,
-  D as useSelect,
-  C as useStepper
+  m as SelectOption,
+  a as SelectTrigger,
+  d as Stepper,
+  B as StepperContainer,
+  C as StepperDecreaseButton,
+  I as StepperIncreaseButton,
+  g as StepperInput,
+  G as useSelect,
+  D as useStepper
 };

package/package.json

@@ -16,7 +16,7 @@
     "css-in-js-framework",
     "react"
   ],
-  "version": "0.1.13",
+  "version": "0.1.15",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -41,18 +41,18 @@
     "@devup-ui/react": "1.0.17"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^9.1.3",
-    "@storybook/addon-onboarding": "^9.1.3",
-    "@storybook/react-vite": "^9.1.3",
+    "@storybook/addon-docs": "^9.1.5",
+    "@storybook/addon-onboarding": "^9.1.5",
+    "@storybook/react-vite": "^9.1.5",
     "@types/react": "^19.1.12",
-    "eslint-plugin-storybook": "^9.1.3",
+    "eslint-plugin-storybook": "^9.1.5",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "storybook": "^9.1.3",
+    "storybook": "^9.1.5",
     "typescript": "^5.9.2",
-    "vite": "^7.1.3",
+    "vite": "^7.1.5",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4",
-    "@devup-ui/vite-plugin": "1.0.33"
+    "@devup-ui/vite-plugin": "1.0.35"
   },
   "peerDependencies": {
     "csstype": "*",