@cryptlex/web-components 6.7.17 → 6.7.18
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.
|
@@ -14,8 +14,9 @@ export declare function SelectPopover({ className, ...props }: AriaPopoverProps)
|
|
|
14
14
|
export interface SingleSelectProps<T extends SelectOption> extends Omit<AriaSelectProps<T>, 'children'>, FormFieldProps {
|
|
15
15
|
items: Iterable<T>;
|
|
16
16
|
children: React.ReactNode | ((item: T) => React.ReactNode);
|
|
17
|
+
inputClassName?: string;
|
|
17
18
|
}
|
|
18
|
-
export declare function SingleSelect<T extends SelectOption>({ label, description, errorMessage, children, className, requiredIndicator, items, ...props }: SingleSelectProps<T>): import("react").JSX.Element;
|
|
19
|
+
export declare function SingleSelect<T extends SelectOption>({ label, description, errorMessage, children, className, inputClassName, requiredIndicator, items, ...props }: SingleSelectProps<T>): import("react").JSX.Element;
|
|
19
20
|
type TfSingleSelectProps<T extends SelectOption> = Omit<SingleSelectProps<T>, 'value' | 'setValue' | 'children'>;
|
|
20
21
|
export declare function TfSingleSelect<T extends SelectOption>({ ...props }: TfSingleSelectProps<T>): import("react").JSX.Element;
|
|
21
22
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{classNames as e}from"../utilities/theme.js";import{x as t}from"../icons.js";import{useFieldContext as n}from"../utilities/form-context.js";import{Button as r}from"./button.js";import{FormField as i}from"./form.js";import{ListBoxCollection as a,ListBoxHeader as o,ListBoxItem as s}from"./list-box.js";import{getFieldErrorMessage as c}from"../utilities/form.js";import{Popover as l}from"./popover.js";import{useId as u}from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{ListBox as m,Select as h,SelectValue as g,composeRenderProps as _}from"react-aria-components";var v=h,y=s,b=o,x=a,S=({className:t,...n})=>f(g,{className:_(t,t=>e(`line-clamp-1 data-[placeholder]:text-muted-foreground`,`[&>[slot=description]]:hidden`,t)),...n});function C({className:n,children:i,withChevron:a=!0,...o}){return f(r,{type:`button`,...o,className:e(`px-2 bg-surface-primary`,a&&`justify-between`,n),children:_(i,e=>p(d,{children:[f(`span`,{className:`inline-flex gap-1`,children:e}),a&&f(t,{"aria-hidden":`true`,className:`shrink-0`})]}))})}function w({className:t,...n}){return f(l,{className:_(t,t=>e(`w-auto min-w-(--trigger-width)`,t)),...n})}function T({className:t,...n}){return f(m,{className:_(t,t=>e(`overflow-auto p-1 outline-none`,t)),...n})}function E({label:t,description:n,errorMessage:r,children:a,className:o,
|
|
1
|
+
"use client";import{classNames as e}from"../utilities/theme.js";import{x as t}from"../icons.js";import{useFieldContext as n}from"../utilities/form-context.js";import{Button as r}from"./button.js";import{FormField as i}from"./form.js";import{ListBoxCollection as a,ListBoxHeader as o,ListBoxItem as s}from"./list-box.js";import{getFieldErrorMessage as c}from"../utilities/form.js";import{Popover as l}from"./popover.js";import{useId as u}from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{ListBox as m,Select as h,SelectValue as g,composeRenderProps as _}from"react-aria-components";var v=h,y=s,b=o,x=a,S=({className:t,...n})=>f(g,{className:_(t,t=>e(`line-clamp-1 data-[placeholder]:text-muted-foreground`,`[&>[slot=description]]:hidden`,t)),...n});function C({className:n,children:i,withChevron:a=!0,...o}){return f(r,{type:`button`,...o,className:e(`px-2 bg-surface-primary`,a&&`justify-between`,n),children:_(i,e=>p(d,{children:[f(`span`,{className:`inline-flex gap-1`,children:e}),a&&f(t,{"aria-hidden":`true`,className:`shrink-0`})]}))})}function w({className:t,...n}){return f(l,{className:_(t,t=>e(`w-auto min-w-(--trigger-width)`,t)),...n})}function T({className:t,...n}){return f(m,{className:_(t,t=>e(`overflow-auto p-1 outline-none`,t)),...n})}function E({label:t,description:n,errorMessage:r,children:a,className:o,inputClassName:s,requiredIndicator:c,items:l,...d}){let m=u(),h=d.id||m;return f(`div`,{className:e(`group form-field`,o),children:f(i,{label:t,description:n,errorMessage:r,requiredIndicator:c,htmlFor:h,children:p(v,{...d,placeholder:d.placeholder??``,children:[f(C,{className:e(`w-full`,s),id:h,children:f(S,{className:`inline-flex gap-1 items-center`})}),f(w,{children:f(T,{items:l,children:a})})]})})})}function D({...e}){let t=n({disabled:e.isDisabled});return f(E,{requiredIndicator:t.isRequired,selectedKey:t.state.value,onSelectionChange:e=>t.handleChange(e.toString()),onBlur:t.handleBlur,errorMessage:c(t),...e,isDisabled:e.isDisabled||t.isSubmitting,children:e=>f(y,{id:e.id,children:e.label},e.id)})}export{x as SelectCollection,b as SelectHeader,y as SelectItem,w as SelectPopover,C as SelectTrigger,S as SelectValue,E as SingleSelect,D as TfSingleSelect};
|
|
2
2
|
//# sourceMappingURL=select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","names":[],"sources":["../../lib/components/select.tsx"],"sourcesContent":["'use client';\nimport { useId } from 'react';\nimport {\n ListBox as AriaListBox,\n ListBoxProps as AriaListBoxProps,\n PopoverProps as AriaPopoverProps,\n Select as AriaSelect,\n SelectProps as AriaSelectProps,\n SelectValue as AriaSelectValue,\n SelectValueProps as AriaSelectValueProps,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport type { SelectOption } from '../components/select-options';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FormField, type FormFieldProps } from './form';\nimport { IcDown } from './icons';\nimport { ListBoxCollection, ListBoxHeader, ListBoxItem } from './list-box';\nimport { Popover } from './popover';\n\nconst ASelect = AriaSelect;\nexport const SelectItem = ListBoxItem;\nexport const SelectHeader = ListBoxHeader;\nexport const SelectCollection = ListBoxCollection;\n\nexport const SelectValue = <T extends object>({ className, ...props }: AriaSelectValueProps<T>) => (\n <AriaSelectValue\n className={composeRenderProps(className, className =>\n classNames(\n 'line-clamp-1 data-[placeholder]:text-muted-foreground',\n /* Description */\n '[&>[slot=description]]:hidden',\n className\n )\n )}\n {...props}\n />\n);\nexport function SelectTrigger({\n className,\n children,\n withChevron = true,\n ...props\n}: React.ComponentProps<typeof Button> & { withChevron?: boolean }) {\n return (\n <Button\n type=\"button\"\n {...props}\n className={classNames('px-2 bg-surface-primary', withChevron && 'justify-between', className)}\n >\n {composeRenderProps(children, children => (\n <>\n <span className=\"inline-flex gap-1\">{children}</span>\n {withChevron && <IcDown aria-hidden=\"true\" className=\"shrink-0\" />}\n </>\n ))}\n </Button>\n );\n}\n\nexport function SelectPopover({ className, ...props }: AriaPopoverProps) {\n return (\n <Popover\n className={composeRenderProps(className, className =>\n classNames('w-auto min-w-(--trigger-width)', className)\n )}\n {...props}\n />\n );\n}\n\nfunction SelectListBox<T extends object>({ className, ...props }: AriaListBoxProps<T>) {\n return (\n <AriaListBox\n className={composeRenderProps(className, className =>\n classNames('overflow-auto p-1 outline-none', className)\n )}\n {...props}\n />\n );\n}\n\nexport interface SingleSelectProps<T extends SelectOption>\n extends Omit<AriaSelectProps<T>, 'children'
|
|
1
|
+
{"version":3,"file":"select.js","names":[],"sources":["../../lib/components/select.tsx"],"sourcesContent":["'use client';\nimport { useId } from 'react';\nimport {\n ListBox as AriaListBox,\n ListBoxProps as AriaListBoxProps,\n PopoverProps as AriaPopoverProps,\n Select as AriaSelect,\n SelectProps as AriaSelectProps,\n SelectValue as AriaSelectValue,\n SelectValueProps as AriaSelectValueProps,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport type { SelectOption } from '../components/select-options';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FormField, type FormFieldProps } from './form';\nimport { IcDown } from './icons';\nimport { ListBoxCollection, ListBoxHeader, ListBoxItem } from './list-box';\nimport { Popover } from './popover';\n\nconst ASelect = AriaSelect;\nexport const SelectItem = ListBoxItem;\nexport const SelectHeader = ListBoxHeader;\nexport const SelectCollection = ListBoxCollection;\n\nexport const SelectValue = <T extends object>({ className, ...props }: AriaSelectValueProps<T>) => (\n <AriaSelectValue\n className={composeRenderProps(className, className =>\n classNames(\n 'line-clamp-1 data-[placeholder]:text-muted-foreground',\n /* Description */\n '[&>[slot=description]]:hidden',\n className\n )\n )}\n {...props}\n />\n);\nexport function SelectTrigger({\n className,\n children,\n withChevron = true,\n ...props\n}: React.ComponentProps<typeof Button> & { withChevron?: boolean }) {\n return (\n <Button\n type=\"button\"\n {...props}\n className={classNames('px-2 bg-surface-primary', withChevron && 'justify-between', className)}\n >\n {composeRenderProps(children, children => (\n <>\n <span className=\"inline-flex gap-1\">{children}</span>\n {withChevron && <IcDown aria-hidden=\"true\" className=\"shrink-0\" />}\n </>\n ))}\n </Button>\n );\n}\n\nexport function SelectPopover({ className, ...props }: AriaPopoverProps) {\n return (\n <Popover\n className={composeRenderProps(className, className =>\n classNames('w-auto min-w-(--trigger-width)', className)\n )}\n {...props}\n />\n );\n}\n\nfunction SelectListBox<T extends object>({ className, ...props }: AriaListBoxProps<T>) {\n return (\n <AriaListBox\n className={composeRenderProps(className, className =>\n classNames('overflow-auto p-1 outline-none', className)\n )}\n {...props}\n />\n );\n}\n\nexport interface SingleSelectProps<T extends SelectOption>\n extends Omit<AriaSelectProps<T>, 'children'>, FormFieldProps {\n items: Iterable<T>;\n children: React.ReactNode | ((item: T) => React.ReactNode);\n inputClassName?: string;\n}\n\nexport function SingleSelect<T extends SelectOption>({\n label,\n description,\n errorMessage,\n children,\n className,\n inputClassName,\n requiredIndicator,\n items,\n ...props\n}: SingleSelectProps<T>) {\n const generatedId = useId();\n const fieldId = props.id || generatedId;\n\n return (\n <div className={classNames('group form-field', className)}>\n <FormField {...{ label, description, errorMessage, requiredIndicator, htmlFor: fieldId }}>\n <ASelect {...props} placeholder={props.placeholder ?? ''}>\n <SelectTrigger className={classNames('w-full', inputClassName)} id={fieldId}>\n <SelectValue className={'inline-flex gap-1 items-center'} />\n </SelectTrigger>\n <SelectPopover>\n <SelectListBox items={items}>{children}</SelectListBox>\n </SelectPopover>\n </ASelect>\n </FormField>\n </div>\n );\n}\n\ntype TfSingleSelectProps<T extends SelectOption> = Omit<SingleSelectProps<T>, 'value' | 'setValue' | 'children'>;\n\nexport function TfSingleSelect<T extends SelectOption>({ ...props }: TfSingleSelectProps<T>) {\n const field = useFieldContext<string>({ disabled: props.isDisabled });\n\n return (\n <SingleSelect\n requiredIndicator={field.isRequired}\n selectedKey={field.state.value}\n onSelectionChange={e => field.handleChange(e!.toString())}\n onBlur={field.handleBlur}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n isDisabled={props.isDisabled || field.isSubmitting}\n >\n {item => (\n <SelectItem id={item.id} key={item.id}>\n {item.label}\n </SelectItem>\n )}\n </SingleSelect>\n );\n}\n"],"mappings":"smBAuBA,IAAM,EAAU,EACH,EAAa,EACb,EAAe,EACf,EAAmB,EAEnB,GAAiC,CAAE,YAAW,GAAG,KAC1D,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GACrC,EACI,wDAEA,gCACA,CACJ,CACJ,EACA,GAAI,CACP,CAAA,EAEL,SAAgB,EAAc,CAC1B,YACA,WACA,cAAc,GACd,GAAG,GAC6D,CAChE,OACI,EAAC,EAAD,CACI,KAAK,SACL,GAAI,EACJ,UAAW,EAAW,0BAA2B,GAAe,kBAAmB,CAAS,EAE3F,SAAA,EAAmB,EAAU,GAC1B,EAAA,EAAA,CAAA,SAAA,CACI,EAAC,OAAD,CAAM,UAAU,oBAAqB,UAAe,CAAA,EACnD,GAAe,EAAC,EAAD,CAAQ,cAAY,OAAO,UAAU,UAAY,CAAA,CACnE,CAAA,CAAA,CACL,CACG,CAAA,CAEhB,CAEA,SAAgB,EAAc,CAAE,YAAW,GAAG,GAA2B,CACrE,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GACrC,EAAW,iCAAkC,CAAS,CAC1D,EACA,GAAI,CACP,CAAA,CAET,CAEA,SAAS,EAAgC,CAAE,YAAW,GAAG,GAA8B,CACnF,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GACrC,EAAW,iCAAkC,CAAS,CAC1D,EACA,GAAI,CACP,CAAA,CAET,CASA,SAAgB,EAAqC,CACjD,QACA,cACA,eACA,WACA,YACA,iBACA,oBACA,QACA,GAAG,GACkB,CACrB,IAAM,EAAc,EAAM,EACpB,EAAU,EAAM,IAAM,EAE5B,OACI,EAAC,MAAD,CAAK,UAAW,EAAW,mBAAoB,CAAS,EACpD,SAAA,EAAC,EAAD,CAAiB,QAAO,cAAa,eAAc,oBAAmB,QAAS,EAC3E,SAAA,EAAC,EAAD,CAAS,GAAI,EAAO,YAAa,EAAM,aAAe,GAAtD,SAAA,CACI,EAAC,EAAD,CAAe,UAAW,EAAW,SAAU,CAAc,EAAG,GAAI,EAChE,SAAA,EAAC,EAAD,CAAa,UAAW,gCAAmC,CAAA,CAChD,CAAA,EACf,EAAC,EAAD,CAAA,SACI,EAAC,EAAD,CAAsB,QAAQ,UAAwB,CAAA,CAC3C,CAAA,CACV,GACF,CAAA,CACV,CAAA,CAEb,CAIA,SAAgB,EAAuC,CAAE,GAAG,GAAiC,CACzF,IAAM,EAAQ,EAAwB,CAAE,SAAU,EAAM,UAAW,CAAC,EAEpE,OACI,EAAC,EAAD,CACI,kBAAmB,EAAM,WACzB,YAAa,EAAM,MAAM,MACzB,kBAAmB,GAAK,EAAM,aAAa,EAAG,SAAS,CAAC,EACxD,OAAQ,EAAM,WACd,aAAc,EAAqB,CAAK,EACxC,GAAI,EACJ,WAAY,EAAM,YAAc,EAAM,aAErC,SAAA,GACG,EAAC,EAAD,CAAY,GAAI,EAAK,GAChB,SAAA,EAAK,KACE,EAFkB,EAAK,EAEvB,CAEN,CAAA,CAEtB"}
|