@devup-ui/components 0.1.14 → 0.1.16

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

@@ -0,0 +1,15 @@
+import { Radio } from '.';
+declare const _default: {
+    title: string;
+    component: typeof Radio;
+};
+export default _default;
+export declare const Default: {
+    args: {
+        checked: undefined;
+        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;;;;;;;CAOnB,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?"8px 0 0 8px":k?"0 8px 8px 0":void 0,className:t,color:"var(--text, light-dark(#000, #fff))",cursor:"pointer","data-radio-button":!0,display:"flex",px:8,py:3,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 ? "8px 0 0 8px" : x ? "0 8px 8px 0" : void 0,
+            className: r,
+            color: "var(--text, light-dark(#000, #fff))",
+            cursor: "pointer",
+            "data-radio-button": !0,
+            display: "flex",
+            px: 8,
+            py: 3,
+            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,19 @@
+import { RadioGroup } from './index';
+declare const _default: {
+    title: string;
+    component: typeof RadioGroup;
+};
+export default _default;
+export declare const Default: {
+    args: {
+        disabled: boolean;
+        name: 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;;;;;;;;;;;CAqBnB,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/Toggle/Toggle.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Toggle } from './index';
+type Story = StoryObj<typeof meta>;
+declare const meta: Meta<typeof Toggle>;
+export declare const Default: Story;
+export default meta;
+//# sourceMappingURL=Toggle.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEhC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAU7B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAe,IAAI,CAAA"}

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

@@ -0,0 +1,27 @@
+interface ToggleProps {
+    defaultValue?: boolean | null;
+    value?: boolean | null;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+    variant?: 'default' | 'switch';
+    className?: string;
+    style?: React.CSSProperties;
+    classNames?: {
+        toggle?: string;
+    };
+    styles?: {
+        toggle?: React.CSSProperties;
+    };
+    colors?: {
+        primary?: string;
+        bg?: string;
+        hoverBg?: string;
+        primaryHoverBg?: string;
+        disabledBg?: string;
+        switchHoverOutline?: string;
+        switchShadow?: string;
+    };
+}
+export declare function Toggle({ defaultValue, value, onChange, disabled, className, style, variant, colors, classNames, styles, }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.tsx"],"names":[],"mappings":"AAIA,UAAU,WAAW;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,UAAU,CAAC,EAAE;QACX,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,MAAM,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;KAC7B,CAAA;IACD,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,kBAAkB,CAAC,EAAE,MAAM,CAAA;QAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;CACF;AAED,wBAAgB,MAAM,CAAC,EACrB,YAAmB,EACnB,KAAY,EACZ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAmB,EACnB,MAAM,EACN,UAAU,EACV,MAAM,GACP,EAAE,WAAW,2CAwFb"}

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.14",
+  "version": "0.1.16",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -41,18 +41,18 @@
     "@devup-ui/react": "1.0.17"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^9.1.4",
-    "@storybook/addon-onboarding": "^9.1.4",
-    "@storybook/react-vite": "^9.1.4",
+    "@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.4",
+    "eslint-plugin-storybook": "^9.1.5",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "storybook": "^9.1.4",
+    "storybook": "^9.1.5",
     "typescript": "^5.9.2",
-    "vite": "^7.1.4",
+    "vite": "^7.1.5",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4",
-    "@devup-ui/vite-plugin": "1.0.34"
+    "@devup-ui/vite-plugin": "1.0.36"
   },
   "peerDependencies": {
     "csstype": "*",