@atom-learning/components 6.0.0-beta.36 → 6.0.0-beta.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/button/Button.js +1 -1
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/list/List.js +1 -1
- package/dist/components/list/List.js.map +1 -1
- package/dist/components/radio-button-field/RadioButtonField.js +1 -1
- package/dist/components/radio-button-field/RadioButtonField.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
- package/src/responsive-variant-classes.css +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{Loader as
|
|
1
|
+
import*as e from"react";import{Loader as p}from"../loader/Loader.js";import{styled as s}from"../../styled.js";import{getExternalAnchorProps as b}from"../../utilities/uri/index.js";const l=s("button",{base:["items-center","bg-[unset]","rounded-md","cursor-pointer","flex","font-body","font-semibold","justify-center","no-underline","transition-all","duration-100","ease-out","whitespace-nowrap","w-max","disabled:cursor-not-allowed","disabled:opacity-30"],variants:{theme:{primary:["[--base:var(--color-primary-800)]","[--interact:var(--color-primary-900)]","[--active:var(--color-primary-1000)]"],secondary:["[--base:var(--color-primary-1000)]","[--interact:var(--color-primary-1100)]","[--active:var(--color-primary-1200)]"],success:["[--base:var(--color-success)]","[--interact:var(--color-success-mid)]","[--active:var(--color-success-dark)]"],warning:["[--base:var(--color-warning)]","[--interact:var(--color-warning-mid)]","[--active:var(--color-warning-dark)]","[--text:var(--color-grey-800)]"],danger:["[--base:var(--color-danger)]","[--interact:var(--color-danger-mid)]","[--active:var(--color-danger-dark)]"],neutral:["[--base:white]","[--interact:rgba(255,255,255,0.9)]","[--active:rgba(255,255,255,0.75)]","[--text:var(--color-primary-800)]"]},appearance:{solid:["bg-(--base)","text-(--text,white)","disabled:opacity-30","disabled:cursor-not-allowed","not-disabled:hover:bg-(--interact)","not-disabled:hover:text-(--text,white)","not-disabled:focus:bg-(--interact)","not-disabled:focus:text-(--text,white)","not-disabled:active:bg-(--active)"],outline:["border","border-current","text-(--base)","disabled:opacity-30","disabled:cursor-not-allowed","not-disabled:hover:no-underline","not-disabled:hover:text-(--interact)","not-disabled:focus:no-underline","not-disabled:focus:text-(--interact)","not-disabled:active:text-(--active)"]},size:{sm:["text-sm","leading-[1.53]","h-8","px-4","gap-2","[&_svg]:size-4"],md:["text-md","leading-normal","h-10","px-8","gap-3","[&_svg]:size-5"],lg:["text-lg","leading-normal","h-12","px-8","gap-3","[&_svg]:size-[22px]"],xl:["text-lg","leading-normal","h-16","px-8","gap-3","[&_svg]:size-[22px]"]},isLoading:{true:["cursor-not-allowed opacity-60 pointer-events-none"]},fullWidth:{true:["w-full"],false:["w-max"]}},defaultVariants:{appearance:"solid",size:"md",theme:"primary"}},{enabledResponsiveVariants:!0}),v=s("span",{base:["items-center","flex","justify-center","invisible"],variants:{size:{sm:["gap-2"],md:["gap-3"],lg:["gap-3"],xl:["gap-3"]}},defaultVariants:{size:"md"}},{enabledResponsiveVariants:!0}),g=({size:a,children:r})=>e.createElement(e.Fragment,null,e.createElement(p,{className:"absolute"}),e.createElement(v,{size:a},r)),d=e.forwardRef(({children:a,as:r,href:t,isLoading:i=!1,onClick:c,disabled:o,...n},m)=>e.createElement(l,{as:r||(t?"a":void 0),...!o&&!i&&{href:t,onClick:c},isLoading:i,type:t?void 0:"button",disabled:o,...n,...b(t),ref:m},i?e.createElement(g,{size:n.size},a):a));d.displayName="Button";export{d as Button,l as StyledButton};
|
|
2
2
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Loader } from '~/components/loader'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nexport const StyledButton = styled(\n 'button',\n {\n base: [\n 'items-center',\n 'bg-[unset]',\n 'rounded-md',\n 'cursor-pointer',\n 'flex',\n 'font-body',\n 'font-semibold',\n 'justify-center',\n 'no-underline',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'whitespace-nowrap',\n 'w-max',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n theme: {\n primary: [\n '[--base:var(--color-primary-800)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1000)]'\n ],\n secondary: [\n '[--base:var(--color-primary-1000)]',\n '[--interact:var(--color-primary-1100)]',\n '[--active:var(--color-primary-1200)]'\n ],\n success: [\n '[--base:var(--color-success)]',\n '[--interact:var(--color-success-mid)]',\n '[--active:var(--color-success-dark)]'\n ],\n warning: [\n '[--base:var(--color-warning)]',\n '[--interact:var(--color-warning-mid)]',\n '[--active:var(--color-warning-dark)]',\n '[--text:var(--color-grey-800)]'\n ],\n danger: [\n '[--base:var(--color-danger)]',\n '[--interact:var(--color-danger-mid)]',\n '[--active:var(--color-danger-dark)]'\n ],\n neutral: [\n '[--base:white]',\n '[--interact:rgba(255,255,255,0.9)]',\n '[--active:rgba(255,255,255,0.75)]',\n '[--text:var(--color-
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Loader } from '~/components/loader'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nexport const StyledButton = styled(\n 'button',\n {\n base: [\n 'items-center',\n 'bg-[unset]',\n 'rounded-md',\n 'cursor-pointer',\n 'flex',\n 'font-body',\n 'font-semibold',\n 'justify-center',\n 'no-underline',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'whitespace-nowrap',\n 'w-max',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n theme: {\n primary: [\n '[--base:var(--color-primary-800)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1000)]'\n ],\n secondary: [\n '[--base:var(--color-primary-1000)]',\n '[--interact:var(--color-primary-1100)]',\n '[--active:var(--color-primary-1200)]'\n ],\n success: [\n '[--base:var(--color-success)]',\n '[--interact:var(--color-success-mid)]',\n '[--active:var(--color-success-dark)]'\n ],\n warning: [\n '[--base:var(--color-warning)]',\n '[--interact:var(--color-warning-mid)]',\n '[--active:var(--color-warning-dark)]',\n '[--text:var(--color-grey-800)]'\n ],\n danger: [\n '[--base:var(--color-danger)]',\n '[--interact:var(--color-danger-mid)]',\n '[--active:var(--color-danger-dark)]'\n ],\n neutral: [\n '[--base:white]',\n '[--interact:rgba(255,255,255,0.9)]',\n '[--active:rgba(255,255,255,0.75)]',\n '[--text:var(--color-primary-800)]'\n ]\n },\n appearance: {\n solid: [\n 'bg-(--base)',\n 'text-(--text,white)',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'not-disabled:hover:bg-(--interact)',\n 'not-disabled:hover:text-(--text,white)',\n 'not-disabled:focus:bg-(--interact)',\n 'not-disabled:focus:text-(--text,white)',\n 'not-disabled:active:bg-(--active)'\n ],\n outline: [\n 'border',\n 'border-current',\n 'text-(--base)',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'not-disabled:hover:no-underline',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:no-underline',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ]\n },\n size: {\n sm: [\n 'text-sm',\n 'leading-[1.53]',\n 'h-8',\n 'px-4',\n 'gap-2',\n '[&_svg]:size-4'\n ],\n md: [\n 'text-md',\n 'leading-normal',\n 'h-10',\n 'px-8',\n 'gap-3',\n '[&_svg]:size-5'\n ],\n lg: [\n 'text-lg',\n 'leading-normal',\n 'h-12',\n 'px-8',\n 'gap-3',\n '[&_svg]:size-[22px]'\n ],\n xl: [\n 'text-lg',\n 'leading-normal',\n 'h-16',\n 'px-8',\n 'gap-3',\n '[&_svg]:size-[22px]'\n ]\n },\n isLoading: {\n true: ['cursor-not-allowed opacity-60 pointer-events-none']\n },\n fullWidth: {\n true: ['w-full'],\n false: ['w-max']\n }\n },\n defaultVariants: {\n appearance: 'solid',\n size: 'md',\n theme: 'primary'\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\nconst LoaderContentsWrapper = styled(\n 'span',\n {\n base: ['items-center', 'flex', 'justify-center', 'invisible'],\n variants: {\n size: {\n sm: ['gap-2'],\n md: ['gap-3'],\n lg: ['gap-3'],\n xl: ['gap-3']\n }\n },\n defaultVariants: {\n size: 'md'\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\nconst WithLoader = ({\n size,\n children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n <>\n <Loader className=\"absolute\" />\n <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n </>\n)\n\ntype ButtonProps = Override<\n React.ComponentProps<typeof StyledButton>,\n {\n children: React.ReactNode\n href?: string\n isLoading?: boolean\n } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(\n (\n { children, as, href, isLoading = false, onClick, disabled, ...rest },\n ref\n ) => (\n <StyledButton\n as={as || (href ? 'a' : undefined)}\n {...(!disabled && !isLoading && { href, onClick })}\n isLoading={isLoading}\n type={!href ? 'button' : undefined}\n disabled={disabled}\n {...rest}\n {...getExternalAnchorProps(href)}\n ref={ref as any}\n >\n {isLoading ? (\n <WithLoader size={rest.size}>{children}</WithLoader>\n ) : (\n children\n )}\n </StyledButton>\n )\n)\n\nButton.displayName = 'Button'\n"],"names":["StyledButton","styled","LoaderContentsWrapper","WithLoader","size","children","React","Loader","Button","as","href","isLoading","onClick","disabled","rest","ref","getExternalAnchorProps"],"mappings":"oLAQO,MAAMA,EAAeC,EAC1B,SACA,CACE,KAAM,CACJ,eACA,aACA,aACA,iBACA,OACA,YACA,gBACA,iBACA,eACA,iBACA,eACA,WACA,oBACA,QACA,8BACA,qBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CACP,oCACA,wCACA,sCACF,EACA,UAAW,CACT,qCACA,yCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,uCACA,gCACF,EACA,OAAQ,CACN,+BACA,uCACA,qCACF,EACA,QAAS,CACP,iBACA,qCACA,oCACA,mCACF,CACF,EACA,WAAY,CACV,MAAO,CACL,cACA,sBACA,sBACA,8BACA,qCACA,yCACA,qCACA,yCACA,mCACF,EACA,QAAS,CACP,SACA,iBACA,gBACA,sBACA,8BACA,kCACA,uCACA,kCACA,uCACA,qCACF,CACF,EACA,KAAM,CACJ,GAAI,CACF,UACA,iBACA,MACA,OACA,QACA,gBACF,EACA,GAAI,CACF,UACA,iBACA,OACA,OACA,QACA,gBACF,EACA,GAAI,CACF,UACA,iBACA,OACA,OACA,QACA,qBACF,EACA,GAAI,CACF,UACA,iBACA,OACA,OACA,QACA,qBACF,CACF,EACA,UAAW,CACT,KAAM,CAAC,mDAAmD,CAC5D,EACA,UAAW,CACT,KAAM,CAAC,QAAQ,EACf,MAAO,CAAC,OAAO,CACjB,CACF,EACA,gBAAiB,CACf,WAAY,QACZ,KAAM,KACN,MAAO,SACT,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAEMC,EAAwBD,EAC5B,OACA,CACE,KAAM,CAAC,eAAgB,OAAQ,iBAAkB,WAAW,EAC5D,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,CACd,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAEME,EAAa,CAAC,CAClB,KAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAA,CAAO,UAAU,UAAW,CAAA,EAC7BD,EAAA,cAACJ,EAAA,CAAsB,KAAME,CAAOC,EAAAA,CAAS,CAC/C,EAYWG,EAASF,EAAM,WAC1B,CACE,CAAE,SAAAD,EAAU,GAAAI,EAAI,KAAAC,EAAM,UAAAC,EAAY,GAAO,QAAAC,EAAS,SAAAC,EAAU,GAAGC,CAAK,EACpEC,IAEAT,EAAA,cAACN,EAAA,CACC,GAAIS,IAAOC,EAAO,IAAM,QACvB,GAAI,CAACG,GAAY,CAACF,GAAa,CAAE,KAAAD,EAAM,QAAAE,CAAQ,EAChD,UAAWD,EACX,KAAOD,EAAkB,OAAX,SACd,SAAUG,EACT,GAAGC,EACH,GAAGE,EAAuBN,CAAI,EAC/B,IAAKK,CAAAA,EAEJJ,EACCL,EAAA,cAACH,EAAA,CAAW,KAAMW,EAAK,MAAOT,CAAS,EAEvCA,CAEJ,CAEJ,EAEAG,EAAO,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as i from"react";import{styled as t}from"../../styled.js";const
|
|
1
|
+
import*as i from"react";import{styled as t}from"../../styled.js";const l=t("li",{base:["last:mb-0","not-last:mb-2"]}),s=t("ul",{base:["list-inside","font-body"],variants:{size:{xs:["text-xs","leading-[1.6]","capsize-[0.4364]"],sm:["text-sm","leading-[1.53]","capsize-[0.4056]"],md:["text-md","leading-normal","capsize-[0.3864]"],lg:["text-lg","leading-[1.52]","capsize-[0.3983]"],xl:["text-xl","leading-[1.42]","capsize-[0.3506]"]},noCapsize:{true:["before:hidden!","after:hidden!"]},ordered:{true:["pl-4","list-decimal","[&_>_li]:pl-1","[&_>_li::marker]:font-medium","[&_>_li::marker]:text-sm"],false:["pl-3","list-disc","[&_>_li]:pl-2"]},theme:{primary:["marker:text-primary-800"]}}}),a=i.forwardRef(({size:r="md",noCapsize:d=!0,ordered:e=!1,...m},o)=>i.createElement(s,{ref:o,as:e?"ol":"ul",ordered:e,size:r,noCapsize:d,...m}));a.Item=l;export{a as List,l as StyledLi,s as StyledList};
|
|
2
2
|
//# sourceMappingURL=List.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sources":["../../../src/components/list/List.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const StyledLi = styled('li', {\n base: ['last:mb-0', 'not-last:mb-2']\n})\n\nexport const StyledList = styled('ul', {\n base: ['list-inside', 'font-body'],\n variants: {\n size: {\n xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]']\n },\n noCapsize: {\n true: ['before:hidden!', 'after:hidden!']\n },\n ordered: {\n true: ['pl-4', 'list-decimal', '[&_>_li]:pl-1'],\n false: ['pl-3', 'list-disc', '[&_>_li]:pl-2']\n },\n theme: {\n primary: ['marker:text-primary-800']\n }\n }\n})\n\ntype ListProps = React.ComponentProps<typeof StyledList> & {\n ordered?: boolean\n}\n\ntype ListType = ReturnType<\n typeof React.forwardRef<HTMLUListElement, ListProps>\n> & {\n Item: typeof StyledLi\n}\n\nexport const List = React.forwardRef<HTMLUListElement, ListProps>(\n (\n { size = 'md', noCapsize = true, ordered = false, ...remainingProps },\n ref\n ) => (\n <StyledList\n ref={ref}\n as={ordered ? 'ol' : 'ul'}\n ordered={ordered}\n size={size}\n noCapsize={noCapsize}\n {...remainingProps}\n />\n )\n) as ListType\n\nList.Item = StyledLi\n"],"names":["StyledLi","styled","StyledList","List","React","size","noCapsize","ordered","remainingProps","ref"],"mappings":"iEAIa,MAAAA,EAAWC,EAAO,KAAM,CACnC,KAAM,CAAC,YAAa,eAAe,CACrC,CAAC,EAEYC,EAAaD,EAAO,KAAM,CACrC,KAAM,CAAC,cAAe,WAAW,EACjC,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAW,gBAAiB,kBAAkB,EACnD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,CACtD,EACA,UAAW,CACT,KAAM,CAAC,iBAAkB,eAAe,CAC1C,EACA,QAAS,CACP,KAAM,CAAC,OAAQ,eAAgB,
|
|
1
|
+
{"version":3,"file":"List.js","sources":["../../../src/components/list/List.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const StyledLi = styled('li', {\n base: ['last:mb-0', 'not-last:mb-2']\n})\n\nexport const StyledList = styled('ul', {\n base: ['list-inside', 'font-body'],\n variants: {\n size: {\n xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]']\n },\n noCapsize: {\n true: ['before:hidden!', 'after:hidden!']\n },\n ordered: {\n true: ['pl-4', 'list-decimal', '[&_>_li]:pl-1', '[&_>_li::marker]:font-medium', '[&_>_li::marker]:text-sm'],\n false: ['pl-3', 'list-disc', '[&_>_li]:pl-2']\n },\n theme: {\n primary: ['marker:text-primary-800']\n }\n }\n})\n\ntype ListProps = React.ComponentProps<typeof StyledList> & {\n ordered?: boolean\n}\n\ntype ListType = ReturnType<\n typeof React.forwardRef<HTMLUListElement, ListProps>\n> & {\n Item: typeof StyledLi\n}\n\nexport const List = React.forwardRef<HTMLUListElement, ListProps>(\n (\n { size = 'md', noCapsize = true, ordered = false, ...remainingProps },\n ref\n ) => (\n <StyledList\n ref={ref}\n as={ordered ? 'ol' : 'ul'}\n ordered={ordered}\n size={size}\n noCapsize={noCapsize}\n {...remainingProps}\n />\n )\n) as ListType\n\nList.Item = StyledLi\n"],"names":["StyledLi","styled","StyledList","List","React","size","noCapsize","ordered","remainingProps","ref"],"mappings":"iEAIa,MAAAA,EAAWC,EAAO,KAAM,CACnC,KAAM,CAAC,YAAa,eAAe,CACrC,CAAC,EAEYC,EAAaD,EAAO,KAAM,CACrC,KAAM,CAAC,cAAe,WAAW,EACjC,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAW,gBAAiB,kBAAkB,EACnD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,CACtD,EACA,UAAW,CACT,KAAM,CAAC,iBAAkB,eAAe,CAC1C,EACA,QAAS,CACP,KAAM,CAAC,OAAQ,eAAgB,gBAAiB,+BAAgC,0BAA0B,EAC1G,MAAO,CAAC,OAAQ,YAAa,eAAe,CAC9C,EACA,MAAO,CACL,QAAS,CAAC,yBAAyB,CACrC,CACF,CACF,CAAC,EAYYE,EAAOC,EAAM,WACxB,CACE,CAAE,KAAAC,EAAO,KAAM,UAAAC,EAAY,GAAM,QAAAC,EAAU,GAAO,GAAGC,CAAe,EACpEC,IAEAL,EAAA,cAACF,EACC,CAAA,IAAKO,EACL,GAAIF,EAAU,KAAO,KACrB,QAASA,EACT,KAAMF,EACN,UAAWC,EACV,GAAGE,CAAAA,CACN,CAEJ,EAEAL,EAAK,KAAOH"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{useFormContext as C,useController as F}from"react-hook-form";import{Description as V}from"../field-wrapper/FieldDescription.js";import"../form/Form.js";import{useFieldError as h}from"../form/useFieldError.js";import"../form/useFormCustomContext.js";import{InlineMessage as v}from"../inline-message/InlineMessage.js";import{Label as B}from"../label/Label.js";import"../radio-button/RadioButton.js";import{RadioButtonGroup as R}from"../radio-button/RadioButtonGroup.js";import{styled as x}from"../../styled.js";import{RadioField as y}from"./RadioField.js";const q=x("fieldset",{base:["
|
|
1
|
+
import*as e from"react";import{useFormContext as C,useController as F}from"react-hook-form";import{Description as V}from"../field-wrapper/FieldDescription.js";import"../form/Form.js";import{useFieldError as h}from"../form/useFieldError.js";import"../form/useFormCustomContext.js";import{InlineMessage as v}from"../inline-message/InlineMessage.js";import{Label as B}from"../label/Label.js";import"../radio-button/RadioButton.js";import{RadioButtonGroup as R}from"../radio-button/RadioButtonGroup.js";import{styled as x}from"../../styled.js";import{RadioField as y}from"./RadioField.js";const q=x("fieldset",{base:["border-0","p-0","m-0","min-w-0"]}),u=({children:c,className:d,direction:p="column",defaultValue:t,value:r,description:a,label:f,name:l,validation:o,onValueChange:m,...b})=>{const{control:E}=C(),{field:{ref:N,onChange:n,value:g,name:j}}=F({name:l,control:E,rules:o,defaultValue:t}),{error:i}=h(l);return e.useEffect(()=>{typeof r<"u"&&n(r)},[r]),e.createElement(q,{className:d},e.createElement(B,{as:"legend",required:!!(o!=null&&o.required),className:"mb-3 p-0"},f),a&&e.createElement(V,{className:"mb-3"},a),e.createElement(R,{ref:N,direction:p,defaultValue:t,onValueChange:s=>{n(s),m==null||m(s)},value:g,...b},c),i&&e.createElement(v,{className:"mt-2"},i))},I=Object.assign(u,{Item:y});u.displayName="RadioButtonField";export{I as RadioButtonField};
|
|
2
2
|
//# sourceMappingURL=RadioButtonField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonField.js","sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldElementWrapperProps } from '~/components/field-wrapper'\nimport { Description as FieldDescription } from '~/components/field-wrapper/FieldDescription'\nimport { useFieldError } from '~/components/form'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { RadioButtonGroup } from '~/components/radio-button'\nimport { styled } from '~/styled'\n\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n base: ['
|
|
1
|
+
{"version":3,"file":"RadioButtonField.js","sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldElementWrapperProps } from '~/components/field-wrapper'\nimport { Description as FieldDescription } from '~/components/field-wrapper/FieldDescription'\nimport { useFieldError } from '~/components/form'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { RadioButtonGroup } from '~/components/radio-button'\nimport { styled } from '~/styled'\n\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n base: ['border-0', 'p-0', 'm-0', 'min-w-0']\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n children,\n className,\n direction = 'column',\n defaultValue,\n value,\n description,\n label,\n name,\n validation,\n onValueChange,\n ...remainingProps\n}: RadioButtonFieldProps) => {\n const { control } = useFormContext()\n const {\n field: { ref, onChange, value: innerValue, name: innerName }\n } = useController({\n name,\n control,\n rules: validation,\n defaultValue\n })\n const { error } = useFieldError(name)\n\n React.useEffect(() => {\n // Update the react-hook-form inner value to match what is passed in.\n if (typeof value !== 'undefined') onChange(value)\n }, [value])\n\n return (\n <Fieldset className={className}>\n <Label\n as=\"legend\"\n required={Boolean(validation?.required)}\n className=\"mb-3 p-0\"\n >\n {label}\n </Label>\n {description && (\n <FieldDescription className=\"mb-3\">{description}</FieldDescription>\n )}\n\n <RadioButtonGroup\n ref={ref}\n direction={direction}\n defaultValue={defaultValue}\n onValueChange={(newValue) => {\n onChange(newValue)\n onValueChange?.(newValue)\n }}\n value={innerValue}\n {...remainingProps}\n >\n {children}\n </RadioButtonGroup>\n\n {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n </Fieldset>\n )\n}\n\nexport const RadioButtonField = Object.assign(RadioButtonFieldComponent, {\n Item: RadioField\n})\n\nRadioButtonFieldComponent.displayName = 'RadioButtonField'\n"],"names":["Fieldset","styled","RadioButtonFieldComponent","children","className","direction","defaultValue","value","description","label","name","validation","onValueChange","remainingProps","control","useFormContext","ref","onChange","innerValue","innerName","useController","error","useFieldError","React","Label","FieldDescription","RadioButtonGroup","newValue","InlineMessage","RadioButtonField","RadioField"],"mappings":"ykBAaA,MAAMA,EAAWC,EAAO,WAAY,CAClC,KAAM,CAAC,WAAY,MAAO,MAAO,SAAS,CAC5C,CAAC,EAKKC,EAA4B,CAAC,CACjC,SAAAC,EACA,UAAAC,EACA,UAAAC,EAAY,SACZ,aAAAC,EACA,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IAA6B,CAC3B,KAAM,CAAE,QAAAC,CAAQ,EAAIC,EAAe,EAC7B,CACJ,MAAO,CAAE,IAAAC,EAAK,SAAAC,EAAU,MAAOC,EAAY,KAAMC,CAAU,CAC7D,EAAIC,EAAc,CAChB,KAAAV,EACA,QAAAI,EACA,MAAOH,EACP,aAAAL,CACF,CAAC,EACK,CAAE,MAAAe,CAAM,EAAIC,EAAcZ,CAAI,EAEpC,OAAAa,EAAM,UAAU,IAAM,CAEhB,OAAOhB,EAAU,KAAaU,EAASV,CAAK,CAClD,EAAG,CAACA,CAAK,CAAC,EAGRgB,EAAA,cAACvB,EAAA,CAAS,UAAWI,CAAAA,EACnBmB,EAAA,cAACC,EAAA,CACC,GAAG,SACH,SAAU,GAAQb,GAAA,MAAAA,EAAY,UAC9B,UAAU,UAAA,EAETF,CACH,EACCD,GACCe,EAAA,cAACE,EAAA,CAAiB,UAAU,MAAQjB,EAAAA,CAAY,EAGlDe,EAAA,cAACG,EAAA,CACC,IAAKV,EACL,UAAWX,EACX,aAAcC,EACd,cAAgBqB,GAAa,CAC3BV,EAASU,CAAQ,EACjBf,GAAA,MAAAA,EAAgBe,CAClB,CAAA,EACA,MAAOT,EACN,GAAGL,CAEHV,EAAAA,CACH,EAECkB,GAASE,EAAA,cAACK,EAAA,CAAc,UAAU,MAAQP,EAAAA,CAAM,CACnD,CAEJ,EAEaQ,EAAmB,OAAO,OAAO3B,EAA2B,CACvE,KAAM4B,CACR,CAAC,EAED5B,EAA0B,YAAc"}
|