@nlabs/gothamjs/storybook-static/components-RadioField-RadioField-stories.d85c4d8f.iframe.bundle.js

Platform

"use strict";(self.webpackChunk_nlabs_gothamjs=self.webpackChunk_nlabs_gothamjs||[]).push([[423],{"./src/components/RadioField/RadioField.stories.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:function(){return Default},WithDefaultValue:function(){return WithDefaultValue},WithLongDescriptions:function(){return WithLongDescriptions},__namedExportsOrder:function(){return __namedExportsOrder},default:function(){return RadioField_stories}});var index_esm=__webpack_require__("./node_modules/react-hook-form/dist/index.esm.mjs"),lib=__webpack_require__("./node_modules/@nlabs/utils/lib/index.js"),react=__webpack_require__("../lex/node_modules/react/index.js"),colorUtils=__webpack_require__("./src/utils/colorUtils.ts"),jsx_runtime=__webpack_require__("../lex/node_modules/react/jsx-runtime.js");const RadioField=({color:color="primary",defaultValue:defaultValue,label:label,name:name,optionClass:optionClass="cursor-pointer relative size-4 appearance-none rounded-full border border-neutral/70 dark:border-neutral-dark/70 bg-white dark:bg-black before:absolute before:inset-1 before:rounded-full before:bg-white dark:before:bg-black not-checked:before:hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary disabled:border-black/40 dark:disabled:border-white/40 disabled:bg-white/50 dark:disabled:bg-black/50 disabled:before:bg-black/40 dark:disabled:before:bg-white/50 forced-colors:appearance-auto forced-colors:before:hidden",options:options})=>{const{control:control,formState:{errors:errors},clearErrors:clearErrors,trigger:trigger}=(0,index_esm.xW)(),optionClasses=(0,react.useMemo)(()=>(0,lib.cn)(optionClass,(0,colorUtils.oj)(color)),[color,optionClass]);return(0,jsx_runtime.jsx)(index_esm.xI,{control:control,defaultValue:defaultValue,name:name,render:({field:field})=>(0,jsx_runtime.jsx)("fieldset",{"aria-label":label,children:(0,jsx_runtime.jsx)("div",{className:"space-y-1",children:options.map(option=>(0,jsx_runtime.jsxs)("div",{className:"flex items-start relative",children:[(0,jsx_runtime.jsx)("div",{className:"flex h-6 items-center",children:(0,jsx_runtime.jsx)("input",{...field,"aria-describedby":`${option.id||option.value}-description`,checked:field.value===option.value,className:optionClasses,id:option.id||option.value,name:name,onChange:()=>{field.onChange(option.value),trigger(name)},type:"radio"})}),(0,jsx_runtime.jsxs)("div",{className:"ml-3 text-sm/6",children:[option.label&&(0,jsx_runtime.jsx)("label",{htmlFor:option.id||option.value,className:"font-medium text-gray-900 dark:text-white",children:option.label}),option.description&&(0,jsx_runtime.jsx)("p",{id:`${option.id||option.value}-description`,className:"text-gray-500 dark:text-white",children:option.description})]})]},option.id||option.value))})})})};RadioField.__docgenInfo={description:"",methods:[],displayName:"RadioField",props:{color:{required:!1,tsType:{name:"union",raw:"'primary' | 'secondary' | 'tertiary' | 'link' | 'neutral' | 'white' | 'black' | 'error' | 'warning' | 'success' | 'info' | 'transparent'",elements:[{name:"literal",value:"'primary'"},{name:"literal",value:"'secondary'"},{name:"literal",value:"'tertiary'"},{name:"literal",value:"'link'"},{name:"literal",value:"'neutral'"},{name:"literal",value:"'white'"},{name:"literal",value:"'black'"},{name:"literal",value:"'error'"},{name:"literal",value:"'warning'"},{name:"literal",value:"'success'"},{name:"literal",value:"'info'"},{name:"literal",value:"'transparent'"}]},description:"",defaultValue:{value:"'primary'",computed:!1}},defaultValue:{required:!1,tsType:{name:"string"},description:""},label:{required:!1,tsType:{name:"string"},description:""},name:{required:!0,tsType:{name:"string"},description:""},optionClass:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'cursor-pointer relative size-4 appearance-none rounded-full border border-neutral/70 dark:border-neutral-dark/70 bg-white dark:bg-black before:absolute before:inset-1 before:rounded-full before:bg-white dark:before:bg-black not-checked:before:hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary disabled:border-black/40 dark:disabled:border-white/40 disabled:bg-white/50 dark:disabled:bg-black/50 disabled:before:bg-black/40 dark:disabled:before:bg-white/50 forced-colors:appearance-auto forced-colors:before:hidden'",computed:!1}},options:{required:!0,tsType:{name:"Array",elements:[{name:"RadioFieldItem"}],raw:"RadioFieldItem[]"},description:""}}};var RadioField_stories={argTypes:{color:{control:"select",description:"The color of the radio group",options:colorUtils.v1},defaultValue:{control:"text",description:"The default selected value"},label:{control:"text",description:"The label text for the radio group"},name:{control:"text",description:"The name of the radio group"},optionClass:{control:"text",description:"The class name for the radio options"},options:{control:"object",description:"Array of radio options"}},component:RadioField,decorators:[Story=>{const methods=(0,index_esm.mN)();return(0,jsx_runtime.jsx)(index_esm.Op,{...methods,children:(0,jsx_runtime.jsx)("div",{className:"p-4 max-w-md",children:(0,jsx_runtime.jsx)(Story,{})})})}],parameters:{backgrounds:{default:"light",values:[{name:"light",value:"#ffffff"},{name:"dark",value:"#1a1a1a"}]},layout:"centered"},title:"Components/RadioField"};const Default={args:{label:"Choose a Color",name:"colorSelection",options:[{id:"red",label:"Red",value:"red"},{id:"blue",label:"Blue",value:"blue"},{id:"green",label:"Green",value:"green"}]}},WithDefaultValue={args:{defaultValue:"2",label:"Select an Option",name:"radioGroupWithDefault",options:[{description:"This is the first option description",id:"option1",label:"First Option",value:"1"},{description:"This is the second option description",id:"option2",label:"Second Option",value:"2"},{description:"This is the third option description",id:"option3",label:"Third Option",value:"3"}]}},WithLongDescriptions={args:{label:"Select a Plan",name:"planSelection",options:[{description:"Perfect for individuals and small projects. Includes basic features and support.",id:"basic",label:"Basic Plan",value:"basic"},{description:"Ideal for growing businesses. Includes advanced features, priority support, and team collaboration tools.",id:"pro",label:"Professional Plan",value:"pro"},{description:"Enterprise-grade solution with all features, dedicated support, and custom integrations.",id:"enterprise",label:"Enterprise Plan",value:"enterprise"}]}},__namedExportsOrder=["Default","WithDefaultValue","WithLongDescriptions"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {\n    label: 'Choose a Color',\n    name: 'colorSelection',\n    options: [{\n      id: 'red',\n      label: 'Red',\n      value: 'red'\n    }, {\n      id: 'blue',\n      label: 'Blue',\n      value: 'blue'\n    }, {\n      id: 'green',\n      label: 'Green',\n      value: 'green'\n    }]\n  }\n}",...Default.parameters?.docs?.source}}},WithDefaultValue.parameters={...WithDefaultValue.parameters,docs:{...WithDefaultValue.parameters?.docs,source:{originalSource:"{\n  args: {\n    defaultValue: '2',\n    label: 'Select an Option',\n    name: 'radioGroupWithDefault',\n    options: defaultOptions\n  }\n}",...WithDefaultValue.parameters?.docs?.source}}},WithLongDescriptions.parameters={...WithLongDescriptions.parameters,docs:{...WithLongDescriptions.parameters?.docs,source:{originalSource:"{\n  args: {\n    label: 'Select a Plan',\n    name: 'planSelection',\n    options: [{\n      description: 'Perfect for individuals and small projects. Includes basic features and support.',\n      id: 'basic',\n      label: 'Basic Plan',\n      value: 'basic'\n    }, {\n      description: 'Ideal for growing businesses. Includes advanced features, priority support, and team collaboration tools.',\n      id: 'pro',\n      label: 'Professional Plan',\n      value: 'pro'\n    }, {\n      description: 'Enterprise-grade solution with all features, dedicated support, and custom integrations.',\n      id: 'enterprise',\n      label: 'Enterprise Plan',\n      value: 'enterprise'\n    }]\n  }\n}",...WithLongDescriptions.parameters?.docs?.source}}}},"./src/utils/colorUtils.ts":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{IR:function(){return getTextClasses},TL:function(){return getOutlineClasses},jr:function(){return getErrorClasses},kX:function(){return getPlaceholderClasses},nw:function(){return getBorderClasses},oj:function(){return getCheckedClasses},rt:function(){return getBackgroundClasses},v1:function(){return gothamColors}});const gothamColors=["primary","secondary","tertiary","link","neutral","black","white","error","warning","success","info"],getTextClasses=(color,options={})=>{const{hasFocus:hasFocus=!1,hasHover:hasHover=!1}=options,classes=[];return"primary"===color?(classes.push("text-primary dark:text-primary-dark"),hasHover&&classes.push("hover:text-primary-700 dark:hover:text-primary-dark-300"),hasFocus&&classes.push("focus:text-primary-700 dark:focus:text-primary-dark-300")):"secondary"===color?(classes.push("text-secondary dark:text-secondary-dark"),hasHover&&classes.push("hover:text-secondary-700 dark:hover:text-secondary-dark-300"),hasFocus&&classes.push("focus:text-secondary-700 dark:focus:text-secondary-dark-300")):"tertiary"===color?(classes.push("text-tertiary dark:text-tertiary-dark"),hasHover&&classes.push("hover:text-tertiary-700 dark:hover:text-tertiary-dark-300"),hasFocus&&classes.push("focus:text-tertiary-700 dark:focus:text-tertiary-dark-300")):"link"===color?(classes.push("text-link dark:text-link-dark"),hasHover&&classes.push("hover:text-link-700 dark:hover:text-link-dark-300"),hasFocus&&classes.push("focus:text-link-700 dark:focus:text-link-dark-300")):"neutral"===color?(classes.push("text-neutral dark:text-neutral-dark"),hasHover&&classes.push("hover:text-neutral-700 dark:hover:text-neutral-dark-300"),hasFocus&&classes.push("focus:text-neutral-700 dark:focus:text-neutral-dark-300")):"white"===color?(classes.push("text-white dark:text-white-dark"),hasHover&&classes.push("hover:text-white-300 dark:hover:text-white-dark-300"),hasFocus&&classes.push("focus:text-white-700 dark:focus:text-white-dark-700")):"error"===color?(classes.push("text-error dark:text-error-dark"),hasHover&&classes.push("hover:text-error-700 dark:hover:text-error-dark-300"),hasFocus&&classes.push("focus:text-error-700 dark:focus:text-error-dark-300")):"warning"===color?(classes.push("text-warning dark:text-warning-dark"),hasHover&&classes.push("hover:text-warning-700 dark:hover:text-warning-dark-300")):"success"===color?(classes.push("text-success dark:text-success-dark"),hasHover&&classes.push("hover:text-success-700 dark:hover:text-success-dark-300"),hasFocus&&classes.push("focus:text-success-700 dark:focus:text-success-dark-300")):"info"===color?(classes.push("text-info dark:text-info-dark"),hasHover&&classes.push("hover:text-info-700 dark:hover:text-info-dark-300"),hasFocus&&classes.push("focus:text-info-700 dark:focus:text-info-dark-300")):(classes.push("text-black dark:text-white"),hasHover&&classes.push("hover:text-black dark:hover:text-black-dark"),hasFocus&&classes.push("focus:text-black-900 dark:focus:text-black-dark-900")),classes.join(" ")},getPlaceholderClasses=(color,options={})=>{const{hasFocus:hasFocus=!1,hasHover:hasHover=!1}=options,classes=[];return"primary"===color?(classes.push("placeholder:text-primary dark:placeholder:text-primary-dark"),hasHover&&classes.push("hover:placeholder:text-primary-700 dark:hover:placeholder:text-primary-dark-300"),hasFocus&&classes.push("focus:placeholder:text-primary-700 dark:focus:placeholder:text-primary-dark-300")):"secondary"===color?(classes.push("placeholder:text-secondary dark:placeholder:text-secondary-dark"),hasHover&&classes.push("hover:placeholder:text-secondary-700 dark:hover:placeholder:text-secondary-dark-300"),hasFocus&&classes.push("focus:placeholder:text-secondary-700 dark:focus:placeholder:text-secondary-dark-300")):"tertiary"===color?(classes.push("placeholder:text-tertiary dark:placeholder:text-tertiary-dark"),hasHover&&classes.push("hover:placeholder:text-tertiary-700 dark:hover:placeholder:text-tertiary-dark-300"),hasFocus&&classes.push("focus:placeholder:text-tertiary-700 dark:focus:placeholder:text-tertiary-dark-300")):"link"===color?(classes.push("placeholder:text-link dark:placeholder:text-link-dark"),hasHover&&classes.push("hover:placeholder:text-link-700 dark:hover:placeholder:text-link-dark-300"),hasFocus&&classes.push("focus:placeholder:text-link-700 dark:focus:placeholder:text-link-dark-300")):"neutral"===color?(classes.push("placeholder:text-neutral dark:placeholder:text-neutral-dark"),hasHover&&classes.push("hover:placeholder:text-neutral-700 dark:hover:placeholder:text-neutral-dark-300"),hasFocus&&classes.push("focus:placeholder:text-neutral-700 dark:focus:placeholder:text-neutral-dark-300")):"white"===color?(classes.push("placeholder:text-white dark:placeholder:text-black"),hasHover&&classes.push("hover:placeholder:text-white-700 dark:hover:placeholder:text-black-dark-300"),hasFocus&&classes.push("focus:placeholder:text-white-700 dark:focus:placeholder:text-black-dark-300")):"error"===color?(classes.push("placeholder:text-error dark:placeholder:text-error-dark"),hasHover&&classes.push("hover:placeholder:text-error-700 dark:hover:placeholder:text-error-dark-300"),hasFocus&&classes.push("focus:placeholder:text-error-700 dark:focus:placeholder:text-error-dark-300")):"warning"===color?(classes.push("placeholder:text-warning dark:placeholder:text-warning-dark"),hasHover&&classes.push("hover:placeholder:text-warning-700 dark:hover:placeholder:text-warning-dark-300")):"success"===color?(classes.push("placeholder:text-success dark:placeholder:text-success-dark"),hasHover&&classes.push("hover:placeholder:text-success-700 dark:hover:placeholder:text-success-dark-300"),hasFocus&&classes.push("focus:placeholder:text-success-700 dark:focus:placeholder:text-success-dark-300")):"info"===color?(classes.push("placeholder:text-info dark:placeholder:text-info-dark"),hasHover&&classes.push("hover:placeholder:text-info-700 dark:hover:placeholder:text-info-dark-300"),hasFocus&&classes.push("focus:placeholder:text-info-700 dark:focus:placeholder:text-info-dark-300")):(classes.push("placeholder:text-black dark:placeholder:text-white"),hasHover&&classes.push("hover:placeholder:text-black dark:hover:placeholder:text-white"),hasFocus&&classes.push("focus:placeholder:text-black dark:focus:placeholder:text-white")),classes.join(" ")},getErrorClasses=errorColor=>"error"===errorColor?"text-error dark:text-error-dark":"warning"===errorColor?"text-warning dark:text-warning-dark":"success"===errorColor?"text-success dark:text-success-dark":"text-info dark:text-info-dark",getBorderClasses=(color,options={})=>{const{hasFocus:hasFocus=!1,hasHover:hasHover=!1}=options,classes=[];return"primary"===color?(classes.push("border-primary dark:border-primary-dark"),hasHover&&classes.push("hover:border-primary-700 dark:hover:border-primary-dark-300"),hasFocus&&classes.push("focus:border-primary-700 dark:focus:border-primary-dark-300")):"secondary"===color?(classes.push("border-secondary dark:border-secondary-dark"),hasHover&&classes.push("hover:border-secondary-700 dark:hover:border-secondary-dark-300"),hasFocus&&classes.push("focus:border-secondary-700 dark:focus:border-secondary-dark-300")):"tertiary"===color?(classes.push("border-tertiary dark:border-tertiary-dark"),hasHover&&classes.push("hover:border-tertiary-700 dark:hover:border-tertiary-dark-300"),hasFocus&&classes.push("focus:border-tertiary-700 dark:focus:border-tertiary-dark-300")):"error"===color?(classes.push("border-error dark:border-error-dark"),hasHover&&classes.push("hover:border-error-700 dark:hover:border-error-dark-300"),hasFocus&&classes.push("focus:border-error-700 dark:focus:border-error-dark-300")):"warning"===color?(classes.push("border-warning dark:border-warning-dark"),hasHover&&classes.push("hover:border-warning-700 dark:hover:border-warning-dark-300"),hasFocus&&classes.push("focus:border-warning-700 dark:focus:border-warning-dark-300")):"success"===color?(classes.push("border-success dark:border-success-dark"),hasHover&&classes.push("hover:border-success-700 dark:hover:border-success-dark-300"),hasFocus&&classes.push("focus:border-success-700 dark:focus:border-success-dark-300")):"info"===color?(classes.push("border-info dark:border-info-dark"),hasHover&&classes.push("hover:border-info-700 dark:hover:border-info-dark-300"),hasFocus&&classes.push("focus:border-info-700 dark:focus:border-info-dark-300")):(classes.push("border-black dark:border-white"),hasHover&&classes.push("hover:border-black dark:hover:border-white"),hasFocus&&classes.push("focus:border-black dark:focus:border-white")),classes.join(" ")},getOutlineClasses=(color,options={})=>{const{hasFocus:hasFocus=!1,hasHover:hasHover=!1}=options,classes=[];return"primary"===color?(classes.push("outline-primary dark:outline-primary-dark"),hasHover&&classes.push("hover:outline-primary-700 dark:hover:outline-primary-dark-300"),hasFocus&&classes.push("focus:outline-primary-700 dark:focus:outline-primary-dark-300")):"secondary"===color?(classes.push("outline-secondary dark:outline-secondary-dark"),hasHover&&classes.push("hover:outline-secondary-700 dark:hover:outline-secondary-dark-300"),hasFocus&&classes.push("focus:outline-secondary-700 dark:focus:outline-secondary-dark-300")):"tertiary"===color?(classes.push("outline-tertiary dark:outline-tertiary-dark"),hasHover&&classes.push("hover:outline-tertiary-700 dark:hover:outline-tertiary-dark-300"),hasFocus&&classes.push("focus:outline-tertiary-700 dark:focus:outline-tertiary-dark-300")):"error"===color?(classes.push("outline-error dark:outline-error-dark"),hasHover&&classes.push("hover:outline-error-700 dark:hover:outline-error-dark-300"),hasFocus&&classes.push("focus:outline-error-700 dark:focus:outline-error-dark-300")):"warning"===color?(classes.push("outline-warning dark:outline-warning-dark"),hasHover&&classes.push("hover:outline-warning-700 dark:hover:outline-warning-dark-300"),hasFocus&&classes.push("focus:outline-warning-700 dark:focus:outline-warning-dark-300")):"success"===color?(classes.push("outline-success dark:outline-success-dark"),hasHover&&classes.push("hover:outline-success-700 dark:hover:outline-success-dark-300"),hasFocus&&classes.push("focus:outline-success-700 dark:focus:outline-success-dark-300")):"info"===color?(classes.push("outline-info dark:outline-info-dark"),hasHover&&classes.push("hover:outline-info-700 dark:hover:outline-info-dark-300"),hasFocus&&classes.push("focus:outline-info-700 dark:focus:outline-info-dark-300")):(classes.push("outline-black dark:outline-white"),hasHover&&classes.push("hover:outline-black dark:hover:outline-white"),hasFocus&&classes.push("focus:outline-black dark:focus:outline-white")),classes.join(" ")},getCheckedClasses=color=>{const classes=[];return"primary"===color?classes.push("checked:border-primary-700 dark:checked:border-primary-dark-300 checked:bg-primary-700 dark:checked:bg-primary-dark-300"):"secondary"===color?classes.push("checked:border-secondary-700 dark:checked:border-secondary-dark-300 checked:bg-secondary-700 dark:checked:bg-secondary-dark-300"):"tertiary"===color?classes.push("checked:border-tertiary-700 dark:checked:border-tertiary-dark-300 checked:bg-tertiary-700 dark:checked:bg-tertiary-dark-300"):"neutral"===color?classes.push("checked:border-neutral-700 dark:checked:border-neutral-dark-300 checked:bg-neutral-700 dark:checked:bg-neutral-dark-300"):"error"===color?classes.push("checked:border-error-700 dark:checked:border-error-dark-300 checked:bg-error-700 dark:checked:bg-error-dark-300"):"warning"===color?classes.push("checked:border-warning-700 dark:checked:border-warning-dark-300 checked:bg-warning-700 dark:checked:bg-warning-dark-300"):"success"===color?classes.push("checked:border-success-700 dark:checked:border-success-dark-300 checked:bg-success-700 dark:checked:bg-success-dark-300"):"white"===color?classes.push("checked:border-white-700 dark:checked:border-black-dark-300 checked:bg-white-700 dark:checked:bg-black-dark-300"):"black"===color&&classes.push("checked:border-black-700 dark:checked:border-white-dark-300 checked:bg-black-700 dark:checked:bg-white-dark-300"),classes.join(" ")},getBackgroundClasses=(color,options={})=>{const{hasFocus:hasFocus=!1,hasHover:hasHover=!1}=options,classes=[];return"primary"===color?(classes.push("bg-primary dark:bg-primary-dark"),hasHover&&classes.push("hover:bg-primary-700 dark:hover:bg-primary-dark-300"),hasFocus&&classes.push("focus:bg-primary-700 dark:focus:bg-primary-dark-300")):"secondary"===color?(classes.push("bg-secondary dark:bg-secondary-dark"),hasHover&&classes.push("hover:bg-secondary-700 dark:hover:bg-secondary-dark-300"),hasFocus&&classes.push("focus:bg-secondary-700 dark:focus:bg-secondary-dark-300")):"tertiary"===color?(classes.push("bg-tertiary dark:bg-tertiary-dark"),hasHover&&classes.push("hover:bg-tertiary-700 dark:hover:bg-tertiary-dark-300"),hasFocus&&classes.push("focus:bg-tertiary-700 dark:focus:bg-tertiary-dark-300")):"neutral"===color?(classes.push("bg-neutral dark:bg-neutral-dark"),hasHover&&classes.push("hover:bg-neutral-700 dark:hover:bg-neutral-dark-300"),hasFocus&&classes.push("focus:bg-neutral-700 dark:focus:bg-neutral-dark-300")):"white"===color?(classes.push("bg-white dark:bg-black"),hasHover&&classes.push("hover:bg-white-700 dark:hover:bg-black-dark-300"),hasFocus&&classes.push("focus:bg-white-700 dark:focus:bg-black-dark-300")):"black"===color?(classes.push("bg-black dark:bg-white"),hasHover&&classes.push("hover:bg-black-700 dark:hover:bg-white-dark-300"),hasFocus&&classes.push("focus:bg-black-700 dark:focus:bg-white-dark-300")):"transparent"===color&&classes.push("bg-transparent"),classes.join(" ")}}}]);