@cryptlex/web-components 6.6.6-alpha38 → 6.6.6-alpha40
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/charts.js +1 -1
- package/dist/components/charts.js.map +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/date-picker.js +1 -1
- package/dist/components/date-picker.js.map +1 -1
- package/dist/components/datefield.js.map +1 -1
- package/dist/components/dialog-menu.js +1 -1
- package/dist/components/dialog-menu.js.map +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/disclosure.js +1 -1
- package/dist/components/disclosure.js.map +1 -1
- package/dist/components/duration-field.js.map +1 -1
- package/dist/components/id-search.js +1 -1
- package/dist/components/id-search.js.map +1 -1
- package/dist/components/multi-select.js +1 -1
- package/dist/components/multi-select.js.map +1 -1
- package/dist/components/numberfield.js +1 -1
- package/dist/components/numberfield.js.map +1 -1
- package/dist/components/textfield.js +1 -1
- package/dist/components/textfield.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as r,jsxs as l}from"react/jsx-runtime";import{XAxis as
|
|
1
|
+
"use client";import{jsx as r,jsxs as l}from"react/jsx-runtime";import{XAxis as p,YAxis as v,CartesianGrid as y,Legend as f,Tooltip as g,ResponsiveContainer as c,LineChart as x,Line as C,BarChart as k,Bar as S}from"recharts";function s({...o}){return r(p,{stroke:"var(--color-neutral-6)",...o})}function d({...o}){return r(v,{stroke:"var(--color-neutral-6)",...o})}function u({...o}){return r(y,{stroke:"var(--color-neutral-4)",...o})}function h({...o}){return r(f,{iconSize:12,formatter:t=>r("span",{className:"text-foreground",children:t}),wrapperStyle:{background:"var(--color-elevation-1)"},...o})}function m({...o}){return r(g,{contentStyle:{backgroundColor:"var(--color-elevation-2)",border:"var(--color-border)"},labelStyle:{color:"var(--color-muted-foreground)",fontWeight:"600",marginBottom:"0.5rem"},itemStyle:{color:"var(--color-foreground)",padding:"0"},...o})}function L({className:o,data:t,config:e,...n}){return r(c,{...n,children:l(x,{className:"body-sm",data:t,children:[r(u,{strokeDasharray:"3 3"}),r(s,{dataKey:e.xAxis.toString()}),r(d,{}),r(m,{}),r(h,{iconType:"plainline"}),e.lines.map((i,a)=>r(C,{strokeWidth:2,type:"monotone",dataKey:i.toString(),stroke:`var(--color-chart-${a%5+1}`}))]})})}function B({className:o,data:t,config:e,...n}){return r(c,{className:o,...n,children:l(k,{className:"body-sm",data:t,children:[r(u,{strokeDasharray:"3 3"}),r(s,{dataKey:e.xAxis.toString()}),r(d,{}),r(m,{}),r(h,{}),e.bars.map((i,a)=>r(S,{dataKey:i.toString(),fill:`var(--color-chart-${a%5+1}`,stroke:`var(--color-chart-${a%5+1}`}))]})})}export{B as Barchart,u as ChartCartesianGrid,h as ChartLegend,m as ChartTooltip,s as ChartXAxis,d as ChartYAxis,L as Linechart};
|
|
2
2
|
//# sourceMappingURL=charts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"charts.js","sources":["../../lib/components/charts.tsx"],"sourcesContent":["'use client';\nimport {\n Bar,\n BarChart,\n Line,\n LineChart,\n CartesianGrid as RechartsCartesianGrid,\n Legend as RechartsLegend,\n Tooltip as RechartsTooltip,\n XAxis as RechartsXAxis,\n YAxis as RechartsYAxis,\n ResponsiveContainer,\n} from 'recharts';\n\nexport function ChartXAxis({ ...props }: React.ComponentProps<typeof RechartsXAxis>) {\n return <RechartsXAxis stroke=\"var(--color-
|
|
1
|
+
{"version":3,"file":"charts.js","sources":["../../lib/components/charts.tsx"],"sourcesContent":["'use client';\nimport {\n Bar,\n BarChart,\n Line,\n LineChart,\n CartesianGrid as RechartsCartesianGrid,\n Legend as RechartsLegend,\n Tooltip as RechartsTooltip,\n XAxis as RechartsXAxis,\n YAxis as RechartsYAxis,\n ResponsiveContainer,\n} from 'recharts';\n\nexport function ChartXAxis({ ...props }: React.ComponentProps<typeof RechartsXAxis>) {\n return <RechartsXAxis stroke=\"var(--color-neutral-6)\" {...props} />;\n}\n\nexport function ChartYAxis({ ...props }: React.ComponentProps<typeof RechartsYAxis>) {\n return <RechartsYAxis stroke=\"var(--color-neutral-6)\" {...props} />;\n}\n\nexport function ChartCartesianGrid({ ...props }: React.ComponentProps<typeof RechartsCartesianGrid>) {\n return <RechartsCartesianGrid stroke=\"var(--color-neutral-4)\" {...props} />;\n}\n\nexport function ChartLegend({ ...props }: React.ComponentProps<typeof RechartsLegend>) {\n return (\n <RechartsLegend\n iconSize={12}\n formatter={v => <span className=\"text-foreground\">{v}</span>}\n wrapperStyle={{ background: 'var(--color-elevation-1)' }}\n {...props}\n />\n );\n}\n\nexport function ChartTooltip({ ...props }: React.ComponentProps<typeof RechartsTooltip>) {\n return (\n <RechartsTooltip\n contentStyle={{\n backgroundColor: 'var(--color-elevation-2)',\n border: 'var(--color-border)',\n }}\n labelStyle={{\n color: 'var(--color-muted-foreground)',\n fontWeight: '600',\n marginBottom: '0.5rem',\n }}\n itemStyle={{\n color: 'var(--color-foreground)',\n padding: '0',\n }}\n {...props}\n />\n );\n}\nexport function Linechart<T extends object>({\n className,\n data,\n config,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T[];\n config: {\n xAxis: keyof T;\n lines: (keyof T)[];\n };\n}) {\n return (\n <ResponsiveContainer {...props}>\n <LineChart className=\"body-sm\" data={data}>\n <ChartCartesianGrid strokeDasharray=\"3 3\" />\n <ChartXAxis dataKey={config.xAxis.toString()} />\n <ChartYAxis />\n <ChartTooltip />\n <ChartLegend iconType=\"plainline\" />\n {config.lines.map((l, i) => (\n <Line\n strokeWidth={2}\n type=\"monotone\"\n dataKey={l.toString()}\n stroke={`var(--color-chart-${(i % 5) + 1}`}\n />\n ))}\n </LineChart>\n </ResponsiveContainer>\n );\n}\n\nexport function Barchart<T>({\n className,\n data,\n config,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T[];\n config: {\n xAxis: keyof T;\n bars: (keyof T)[];\n };\n}) {\n return (\n <ResponsiveContainer className={className} {...props}>\n <BarChart className=\"body-sm\" data={data}>\n <ChartCartesianGrid strokeDasharray=\"3 3\" />\n <ChartXAxis dataKey={config.xAxis.toString()} />\n <ChartYAxis />\n <ChartTooltip />\n <ChartLegend />\n {config.bars.map((b, i) => (\n <Bar\n dataKey={b.toString()}\n fill={`var(--color-chart-${(i % 5) + 1}`}\n stroke={`var(--color-chart-${(i % 5) + 1}`}\n />\n ))}\n </BarChart>\n </ResponsiveContainer>\n );\n}\n"],"names":["ChartXAxis","props","jsx","RechartsXAxis","ChartYAxis","RechartsYAxis","ChartCartesianGrid","RechartsCartesianGrid","ChartLegend","RechartsLegend","v","ChartTooltip","RechartsTooltip","Linechart","className","data","config","ResponsiveContainer","LineChart","l","i","Line","Barchart","jsxs","BarChart","b","Bar"],"mappings":"gOAcO,SAASA,EAAW,CAAE,GAAGC,GAAqD,CACjF,OAAOC,EAACC,EAAA,CAAc,OAAO,yBAA0B,GAAGF,EAAO,CACrE,CAEO,SAASG,EAAW,CAAE,GAAGH,GAAqD,CACjF,OAAOC,EAACG,EAAA,CAAc,OAAO,yBAA0B,GAAGJ,EAAO,CACrE,CAEO,SAASK,EAAmB,CAAE,GAAGL,GAA6D,CACjG,OAAOC,EAACK,EAAA,CAAsB,OAAO,yBAA0B,GAAGN,EAAO,CAC7E,CAEO,SAASO,EAAY,CAAE,GAAGP,GAAsD,CACnF,OACIC,EAACO,EAAA,CACG,SAAU,GACV,UAAWC,GAAKR,EAAC,OAAA,CAAK,UAAU,kBAAmB,SAAAQ,EAAE,EACrD,aAAc,CAAE,WAAY,0BAAA,EAC3B,GAAGT,CAAA,CAAA,CAGhB,CAEO,SAASU,EAAa,CAAE,GAAGV,GAAuD,CACrF,OACIC,EAACU,EAAA,CACG,aAAc,CACV,gBAAiB,2BACjB,OAAQ,qBAAA,EAEZ,WAAY,CACR,MAAO,gCACP,WAAY,MACZ,aAAc,QAAA,EAElB,UAAW,CACP,MAAO,0BACP,QAAS,GAAA,EAEZ,GAAGX,CAAA,CAAA,CAGhB,CACO,SAASY,EAA4B,CACxC,UAAAC,EACA,KAAAC,EACA,OAAAC,EACA,GAAGf,CACP,EAMG,CACC,OACIC,EAACe,GAAqB,GAAGhB,EACrB,WAACiB,EAAA,CAAU,UAAU,UAAU,KAAAH,EAC3B,SAAA,CAAAb,EAACI,EAAA,CAAmB,gBAAgB,KAAA,CAAM,IACzCN,EAAA,CAAW,QAASgB,EAAO,MAAM,WAAY,IAC7CZ,EAAA,EAAW,IACXO,EAAA,EAAa,EACdT,EAACM,EAAA,CAAY,SAAS,WAAA,CAAY,EACjCQ,EAAO,MAAM,IAAI,CAACG,EAAGC,IAClBlB,EAACmB,EAAA,CACG,YAAa,EACb,KAAK,WACL,QAASF,EAAE,SAAA,EACX,OAAQ,qBAAsBC,EAAI,EAAK,CAAC,EAAA,CAAA,CAE/C,CAAA,CAAA,CACL,CAAA,CACJ,CAER,CAEO,SAASE,EAAY,CACxB,UAAAR,EACA,KAAAC,EACA,OAAAC,EACA,GAAGf,CACP,EAMG,CACC,OACIC,EAACe,GAAoB,UAAAH,EAAuB,GAAGb,EAC3C,SAAAsB,EAACC,EAAA,CAAS,UAAU,UAAU,KAAAT,EAC1B,SAAA,CAAAb,EAACI,EAAA,CAAmB,gBAAgB,KAAA,CAAM,IACzCN,EAAA,CAAW,QAASgB,EAAO,MAAM,WAAY,IAC7CZ,EAAA,EAAW,IACXO,EAAA,EAAa,IACbH,EAAA,EAAY,EACZQ,EAAO,KAAK,IAAI,CAACS,EAAGL,IACjBlB,EAACwB,EAAA,CACG,QAASD,EAAE,SAAA,EACX,KAAM,qBAAsBL,EAAI,EAAK,CAAC,GACtC,OAAQ,qBAAsBA,EAAI,EAAK,CAAC,EAAA,CAAA,CAE/C,CAAA,CAAA,CACL,CAAA,CACJ,CAER"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,Fragment as d}from"react/jsx-runtime";import{useId as h}from"react";import{Checkbox as p,composeRenderProps as n,CheckboxGroup as g}from"react-aria-components";import{useFieldContext as x}from"../utilities/form-context.js";import{classNames as s}from"../utilities/theme.js";import{FormField as f,labelVariants as k}from"./form.js";import{IcMinus as v,IcCheck as C}from"./icons.js";import"@tanstack/react-form";import"clsx";import"class-variance-authority";const w=g;function y({className:r,label:o,description:l,errorMessage:u,requiredIndicator:m,...t}){const b=h(),i=t.id||b;return e("div",{className:"group form-field",children:e(f,{label:o,description:l,errorMessage:u,requiredIndicator:m,htmlFor:i,children:e(p,{className:n(r,c=>s("group/checkbox cursor-pointer relative focus-ring flex items-center gap-x-2","disabled-muted",k,c)),id:i,...t,children:n(e(d,{}),(c,a)=>e(d,{children:e("div",{className:s("flex size-input shrink-0 items-center bg-elevation-2 justify-center border border-input text-current ring-offset-background","group-data-[indeterminate]/checkbox:bg-primary group-data-[selected]/checkbox:bg-primary group-data-[indeterminate]/checkbox:text-primary-foreground group-data-[selected]/checkbox:text-primary-foreground","group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50","group-data-[invalid]/checkbox:border-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground","focus:outline-none focus-visible:outline-none"),children:a.isIndeterminate?e(v,{className:"size-icon"}):a.isSelected?e(C,{className:"size-icon"}):null})}))})})})}function M({...r}){const o=x({disabled:r.isDisabled});return e(y,{isSelected:o.state.value,isDisabled:o.form.state.isSubmitting||r.isDisabled,onChange:()=>o.handleChange(!o.state.value),onBlur:o.handleBlur,...r})}export{y as Checkbox,w as CheckboxGroup,M as TfCheckbox};
|
|
1
|
+
"use client";import{jsx as e,Fragment as d}from"react/jsx-runtime";import{useId as h}from"react";import{Checkbox as p,composeRenderProps as n,CheckboxGroup as g}from"react-aria-components";import{useFieldContext as x}from"../utilities/form-context.js";import{classNames as s}from"../utilities/theme.js";import{FormField as f,labelVariants as k}from"./form.js";import{IcMinus as v,IcCheck as C}from"./icons.js";import"@tanstack/react-form";import"clsx";import"class-variance-authority";const w=g;function y({className:r,label:o,description:l,errorMessage:u,requiredIndicator:m,...t}){const b=h(),i=t.id||b;return e("div",{className:"group form-field",children:e(f,{label:o,description:l,errorMessage:u,requiredIndicator:m,htmlFor:i,children:e(p,{className:n(r,c=>s("group/checkbox cursor-pointer relative focus-ring flex items-center gap-x-2","disabled-muted",k,c)),id:i,...t,children:n(e(d,{}),(c,a)=>e(d,{children:e("div",{className:s("flex size-input shrink-0 items-center bg-elevation-2 justify-center border border-input text-current ring-offset-background","group-data-[indeterminate]/checkbox:bg-primary group-data-[selected]/checkbox:bg-primary group-data-[indeterminate]/checkbox:text-primary-foreground group-data-[selected]/checkbox:text-primary-foreground","group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50","group-data-[invalid]/checkbox:border-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground","focus:outline-none focus-visible:outline-none"),children:a.isIndeterminate?e(v,{className:"size-icon"}):a.isSelected?e(C,{className:"size-icon"}):null})}))})})})}function M({...r}){const o=x({disabled:r.isDisabled});return e(y,{isSelected:o.state.value,isDisabled:o.form.state.isSubmitting||r.isDisabled,onChange:()=>o.handleChange(!o.state.value),onBlur:o.handleBlur,...r})}export{y as Checkbox,w as CheckboxGroup,M as TfCheckbox};
|
|
2
2
|
//# sourceMappingURL=checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sources":["../../lib/components/checkbox.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"checkbox.js","sources":["../../lib/components/checkbox.tsx"],"sourcesContent":["'use client';\nimport { useId } from 'react';\nimport {\n Checkbox as AriaCheckbox,\n CheckboxGroup as AriaCheckboxGroup,\n composeRenderProps,\n type CheckboxProps as AriaCheckboxProps,\n} from 'react-aria-components';\n\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FormField, labelVariants, type FormFieldProps } from './form';\nimport { IcCheck, IcMinus } from './icons';\n\nexport const CheckboxGroup = AriaCheckboxGroup;\ntype CheckboxProps = AriaCheckboxProps & FormFieldProps;\nexport function Checkbox({\n className,\n label,\n description,\n errorMessage,\n requiredIndicator,\n ...props\n}: Omit<CheckboxProps, 'children'>) {\n const generatedId = useId();\n const fieldId = props.id || generatedId;\n return (\n <div className=\"group form-field\">\n <FormField {...{ label, description, errorMessage, requiredIndicator, htmlFor: fieldId }}>\n <AriaCheckbox\n className={composeRenderProps(className, className =>\n classNames(\n 'group/checkbox cursor-pointer relative focus-ring flex items-center gap-x-2',\n /* Disabled */\n 'disabled-muted',\n labelVariants,\n className\n )\n )}\n id={fieldId}\n {...props}\n >\n {composeRenderProps(<></>, (_, renderProps) => (\n <>\n <div\n className={classNames(\n 'flex size-input shrink-0 items-center bg-elevation-2 justify-center border border-input text-current ring-offset-background',\n /* Selected */\n 'group-data-[indeterminate]/checkbox:bg-primary group-data-[selected]/checkbox:bg-primary group-data-[indeterminate]/checkbox:text-primary-foreground group-data-[selected]/checkbox:text-primary-foreground',\n /* Disabled */\n 'group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50',\n /* Invalid */\n 'group-data-[invalid]/checkbox:border-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground',\n /* Resets */\n 'focus:outline-none focus-visible:outline-none'\n )}\n >\n {renderProps.isIndeterminate ? (\n <IcMinus className=\"size-icon\" />\n ) : renderProps.isSelected ? (\n <IcCheck className=\"size-icon\" />\n ) : null}\n </div>\n </>\n ))}\n </AriaCheckbox>\n </FormField>\n </div>\n );\n}\n\nexport type TfCheckboxProps = Omit<React.ComponentProps<typeof Checkbox>, 'onChange' | 'onBlur' | 'isChecked'>;\nexport function TfCheckbox({ ...props }: TfCheckboxProps) {\n const field = useFieldContext<boolean>({ disabled: props.isDisabled });\n return (\n <Checkbox\n isSelected={field.state.value}\n isDisabled={field.form.state.isSubmitting || props.isDisabled}\n onChange={() => field.handleChange(!field.state.value)}\n onBlur={field.handleBlur}\n {...props}\n />\n );\n}\n"],"names":["CheckboxGroup","AriaCheckboxGroup","Checkbox","className","label","description","errorMessage","requiredIndicator","props","generatedId","useId","fieldId","jsx","FormField","AriaCheckbox","composeRenderProps","classNames","labelVariants","Fragment","_","renderProps","IcMinus","IcCheck","TfCheckbox","field","useFieldContext"],"mappings":"qeAcO,MAAMA,EAAgBC,EAEtB,SAASC,EAAS,CACrB,UAAAC,EACA,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,GAAGC,CACP,EAAoC,CAChC,MAAMC,EAAcC,EAAA,EACdC,EAAUH,EAAM,IAAMC,EAC5B,OACIG,EAAC,MAAA,CAAI,UAAU,mBACX,WAACC,EAAA,CAAgB,MAAAT,EAAO,YAAAC,EAAa,aAAAC,EAAc,kBAAAC,EAAmB,QAASI,EAC3E,SAAAC,EAACE,EAAA,CACG,UAAWC,EAAmBZ,EAAWA,GACrCa,EACI,8EAEA,iBACAC,EACAd,CAAA,CACJ,EAEJ,GAAIQ,EACH,GAAGH,EAEH,WAAmBI,EAAAM,EAAA,CAAA,CAAE,EAAK,CAACC,EAAGC,IAC3BR,EAAAM,EAAA,CACI,SAAAN,EAAC,MAAA,CACG,UAAWI,EACP,8HAEA,+MAEA,8FAEA,wNAEA,+CAAA,EAGH,SAAAI,EAAY,gBACTR,EAACS,EAAA,CAAQ,UAAU,WAAA,CAAY,EAC/BD,EAAY,WACZR,EAACU,EAAA,CAAQ,UAAU,YAAY,EAC/B,IAAA,CAAA,EAEZ,CACH,CAAA,CAAA,EAET,CAAA,CACJ,CAER,CAGO,SAASC,EAAW,CAAE,GAAGf,GAA0B,CACtD,MAAMgB,EAAQC,EAAyB,CAAE,SAAUjB,EAAM,WAAY,EACrE,OACII,EAACV,EAAA,CACG,WAAYsB,EAAM,MAAM,MACxB,WAAYA,EAAM,KAAK,MAAM,cAAgBhB,EAAM,WACnD,SAAU,IAAMgB,EAAM,aAAa,CAACA,EAAM,MAAM,KAAK,EACrD,OAAQA,EAAM,WACb,GAAGhB,CAAA,CAAA,CAGhB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as o,jsx as e}from"react/jsx-runtime";import{DatePicker as D,composeRenderProps as c,DateRangePicker as b,Popover as v,Dialog as N}from"react-aria-components";import{parseAbsolute as P,getLocalTimeZone as k}from"@internationalized/date";import{Button as u}from"./button.js";import{Calendar as C,RangeCalendar as F}from"./calendar.js";import{DateInput as m}from"./datefield.js";import{getFieldErrorMessage as d}from"../utilities/form.js";import{useFieldContext as R}from"../utilities/form-context.js";import{classNames as l}from"../utilities/theme.js";import{FormField as f,FieldGroup as g}from"./form.js";import{IcDate as p}from"./icons.js";import"class-variance-authority";import"./loader.js";import"react";import"@tanstack/react-form";import"clsx";const h=({className:a,popoverClassName:r,...i})=>e(v,{className:c(r,t=>l("w-auto p-3 bg-elevation-2 border",t)),children:e(N,{className:l("flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0",a),...i})});function w({label:a,description:r,errorMessage:i,requiredIndicator:t,className:n,...s}){return o(D,{className:c(n,x=>l("group flex flex-col gap-2",x)),...s,children:[e(f,{label:a,description:r,errorMessage:i,requiredIndicator:t,children:o(g,{children:[e(m,{className:"flex-1",variant:"ghost"}),e(u,{variant:"ghost",size:"icon",className:"-me-2 ms-2",children:e(p,{"aria-hidden":!0})})]})}),e(h,{children:e(C,{})})]})}function J({...a}){const r=R({disabled:a.isDisabled});return e(w,{hideTimeZone:!0,isDisabled:a.isDisabled||r.form.state.isSubmitting,value:r.state.value?P(r.state.value,k()):null,onChange:i=>i?r.handleChange(i.toAbsoluteString()):r.handleChange(null),onBlur:r.handleBlur,isInvalid:!!d(r),errorMessage:d(r),...a})}function K({label:a,description:r,errorMessage:i,className:t,...n}){return o(b,{className:c(t,s=>l("group flex flex-col gap-2",s)),...n,children:[e(f,{label:a,errorMessage:i,description:r,children:o(g,{children:[e(m,{variant:"ghost",slot:"start"}),e("span",{"aria-hidden":!0,className:"px-2 body-sm text-muted-foreground",children:"-"}),e(m,{className:"flex-1",variant:"ghost",slot:"end"}),e(u,{variant:"ghost",size:"icon",className:"mr-1 data-[focus-visible]:ring-offset-0",children:e(p,{"aria-hidden":!0})})]})}),e(h,{children:e(F,{})})]})}export{w as DatePicker,K as DateRangePicker,J as TfDatePicker};
|
|
1
|
+
"use client";import{jsxs as o,jsx as e}from"react/jsx-runtime";import{DatePicker as D,composeRenderProps as c,DateRangePicker as b,Popover as v,Dialog as N}from"react-aria-components";import{parseAbsolute as P,getLocalTimeZone as k}from"@internationalized/date";import{Button as u}from"./button.js";import{Calendar as C,RangeCalendar as F}from"./calendar.js";import{DateInput as m}from"./datefield.js";import{getFieldErrorMessage as d}from"../utilities/form.js";import{useFieldContext as R}from"../utilities/form-context.js";import{classNames as l}from"../utilities/theme.js";import{FormField as f,FieldGroup as g}from"./form.js";import{IcDate as p}from"./icons.js";import"class-variance-authority";import"./loader.js";import"react";import"@tanstack/react-form";import"clsx";const h=({className:a,popoverClassName:r,...i})=>e(v,{className:c(r,t=>l("w-auto p-3 bg-elevation-2 border",t)),children:e(N,{className:l("flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0",a),...i})});function w({label:a,description:r,errorMessage:i,requiredIndicator:t,className:n,...s}){return o(D,{className:c(n,x=>l("group flex flex-col gap-2",x)),...s,children:[e(f,{label:a,description:r,errorMessage:i,requiredIndicator:t,children:o(g,{children:[e(m,{className:"flex-1",variant:"ghost"}),e(u,{variant:"ghost",size:"icon",className:"-me-2 ms-2",children:e(p,{"aria-hidden":!0})})]})}),e(h,{children:e(C,{})})]})}function J({...a}){const r=R({disabled:a.isDisabled});return e(w,{hideTimeZone:!0,isDisabled:a.isDisabled||r.form.state.isSubmitting,value:r.state.value?P(r.state.value,k()):null,onChange:i=>i?r.handleChange(i.toAbsoluteString()):r.handleChange(null),onBlur:r.handleBlur,isInvalid:!!d(r),errorMessage:d(r),...a})}function K({label:a,description:r,errorMessage:i,className:t,...n}){return o(b,{className:c(t,s=>l("group flex flex-col gap-2",s)),...n,children:[e(f,{label:a,errorMessage:i,description:r,children:o(g,{children:[e(m,{variant:"ghost",slot:"start"}),e("span",{"aria-hidden":!0,className:"px-2 body-sm text-muted-foreground",children:"-"}),e(m,{className:"flex-1",variant:"ghost",slot:"end"}),e(u,{variant:"ghost",size:"icon",className:"mr-1 data-[focus-visible]:ring-offset-0",children:e(p,{"aria-hidden":!0})})]})}),e(h,{children:e(F,{})})]})}export{w as DatePicker,K as DateRangePicker,J as TfDatePicker};
|
|
2
2
|
//# sourceMappingURL=date-picker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.js","sources":["../../lib/components/date-picker.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"date-picker.js","sources":["../../lib/components/date-picker.tsx"],"sourcesContent":["'use client';\nimport {\n DatePicker as AriaDatePicker,\n DatePickerProps as AriaDatePickerProps,\n DateRangePicker as AriaDateRangePicker,\n DateRangePickerProps as AriaDateRangePickerProps,\n DateValue as AriaDateValue,\n Dialog as AriaDialog,\n DialogProps as AriaDialogProps,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Popover,\n} from 'react-aria-components';\n\nimport { getLocalTimeZone, parseAbsolute, type ZonedDateTime } from '@internationalized/date';\nimport { Button } from '../components/button';\nimport { Calendar, RangeCalendar } from '../components/calendar';\nimport { DateInput } from '../components/datefield';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FieldGroup, FormField, type FormFieldProps } from './form';\nimport { IcDate } from './icons';\n\n/**\n * Popover container for date picker content.\n *\n * @remarks\n * Provides consistent styling and positioning for the calendar popup.\n */\nconst DatePickerContent = ({\n className,\n popoverClassName,\n ...props\n}: AriaDialogProps & { popoverClassName?: AriaPopoverProps['className'] }) => (\n <Popover\n className={composeRenderProps(popoverClassName, className =>\n classNames('w-auto p-3 bg-elevation-2 border', className)\n )}\n >\n <AriaDialog\n className={classNames(\n 'flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0',\n className\n )}\n {...props}\n />\n </Popover>\n);\n\ninterface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps {}\n\n/**\n * Date picker component for selecting single dates.\n *\n * @remarks\n * Built with React Aria for accessibility and internationalization support.\n * Supports date validation, min/max values, and custom date formatting.\n *\n * @example\n * ```tsx\n * <DatePicker\n * label=\"Event Date\"\n * isRequired\n * minValue={today(getLocalTimeZone())}\n * />\n * ```\n */\nexport function DatePicker<T extends AriaDateValue>({\n label,\n description,\n errorMessage,\n requiredIndicator,\n className,\n ...props\n}: DatePickerProps<T>) {\n return (\n <AriaDatePicker\n className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n {...props}\n >\n <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n <FieldGroup>\n <DateInput className=\"flex-1\" variant=\"ghost\" />\n <Button variant=\"ghost\" size=\"icon\" className={'-me-2 ms-2'}>\n <IcDate aria-hidden />\n </Button>\n </FieldGroup>\n </FormField>\n <DatePickerContent>\n <Calendar />\n </DatePickerContent>\n </AriaDatePicker>\n );\n}\n\n/**\n * Form-integrated date picker that works with TanStack Form.\n *\n * @remarks\n * Automatically handles form state, validation, and error messages.\n * Uses the field context to connect with the form's validation system.\n */\nexport function TfDatePicker({\n ...props\n}: Omit<DatePickerProps<ZonedDateTime>, 'value' | 'onChange' | 'onBlur' | 'isInvalid' | 'errorMessage'>) {\n const field = useFieldContext<string | null>({ disabled: props.isDisabled });\n return (\n <DatePicker\n hideTimeZone\n isDisabled={props.isDisabled || field.form.state.isSubmitting}\n value={field.state.value ? parseAbsolute(field.state.value, getLocalTimeZone()) : null}\n onChange={v => (v ? field.handleChange(v.toAbsoluteString()) : field.handleChange(null))}\n onBlur={field.handleBlur}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n />\n );\n}\n\ninterface DateRangePickerProps<T extends AriaDateValue> extends AriaDateRangePickerProps<T>, FormFieldProps {}\n\n/**\n * Date range picker component for selecting start and end dates.\n *\n * @remarks\n * Allows users to select a date range with start and end values.\n * Built with React Aria for accessibility and internationalization support.\n * Features separate input fields for start and end dates with range validation.\n *\n * @example\n * ```tsx\n * <DateRangePicker\n * label=\"Booking Period\"\n * description=\"Select your stay dates\"\n * isRequired\n * />\n * ```\n */\nexport function DateRangePicker<T extends AriaDateValue>({\n label,\n description,\n errorMessage,\n className,\n ...props\n}: DateRangePickerProps<T>) {\n return (\n <AriaDateRangePicker\n className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n {...props}\n >\n <FormField label={label} errorMessage={errorMessage} description={description}>\n <FieldGroup>\n <DateInput variant=\"ghost\" slot={'start'} />\n <span aria-hidden className=\"px-2 body-sm text-muted-foreground\">\n -\n </span>\n <DateInput className=\"flex-1\" variant=\"ghost\" slot={'end'} />\n <Button variant=\"ghost\" size=\"icon\" className=\"mr-1 data-[focus-visible]:ring-offset-0\">\n <IcDate aria-hidden />\n </Button>\n </FieldGroup>\n </FormField>\n <DatePickerContent>\n <RangeCalendar />\n </DatePickerContent>\n </AriaDateRangePicker>\n );\n}\n"],"names":["DatePickerContent","className","popoverClassName","props","jsx","Popover","composeRenderProps","classNames","AriaDialog","DatePicker","label","description","errorMessage","requiredIndicator","jsxs","AriaDatePicker","FormField","FieldGroup","DateInput","Button","IcDate","Calendar","TfDatePicker","field","useFieldContext","parseAbsolute","getLocalTimeZone","v","getFieldErrorMessage","DateRangePicker","AriaDateRangePicker","RangeCalendar"],"mappings":"uwBA8BA,MAAMA,EAAoB,CAAC,CACvB,UAAAC,EACA,iBAAAC,EACA,GAAGC,CACP,IACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAkBD,GAC5CM,EAAW,mCAAoCN,CAAS,CAAA,EAG5D,SAAAG,EAACI,EAAA,CACG,UAAWD,EACP,iFACAN,CAAA,EAEH,GAAGE,CAAA,CAAA,CACR,CACJ,EAqBG,SAASM,EAAoC,CAChD,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,UAAAZ,EACA,GAAGE,CACP,EAAuB,CACnB,OACIW,EAACC,EAAA,CACG,UAAWT,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACY,EAAA,CAAgB,MAAAN,EAAO,YAAAC,EAAa,aAAAC,EAAc,kBAAAC,EAC/C,SAAAC,EAACG,EAAA,CACG,SAAA,CAAAb,EAACc,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,EAC9Cd,EAACe,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAW,aAC3C,SAAAf,EAACgB,EAAA,CAAO,cAAW,EAAA,CAAC,CAAA,CACxB,CAAA,CAAA,CACJ,CAAA,CACJ,EACAhB,EAACJ,EAAA,CACG,SAAAI,EAACiB,EAAA,CAAA,CAAS,CAAA,CACd,CAAA,CAAA,CAAA,CAGZ,CASO,SAASC,EAAa,CACzB,GAAGnB,CACP,EAAyG,CACrG,MAAMoB,EAAQC,EAA+B,CAAE,SAAUrB,EAAM,WAAY,EAC3E,OACIC,EAACK,EAAA,CACG,aAAY,GACZ,WAAYN,EAAM,YAAcoB,EAAM,KAAK,MAAM,aACjD,MAAOA,EAAM,MAAM,MAAQE,EAAcF,EAAM,MAAM,MAAOG,EAAA,CAAkB,EAAI,KAClF,SAAUC,GAAMA,EAAIJ,EAAM,aAAaI,EAAE,kBAAkB,EAAIJ,EAAM,aAAa,IAAI,EACtF,OAAQA,EAAM,WACd,UAAW,CAAC,CAACK,EAAqBL,CAAK,EACvC,aAAcK,EAAqBL,CAAK,EACvC,GAAGpB,CAAA,CAAA,CAGhB,CAqBO,SAAS0B,EAAyC,CACrD,MAAAnB,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACP,EAA4B,CACxB,OACIW,EAACgB,EAAA,CACG,UAAWxB,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACY,EAAA,CAAU,MAAAN,EAAc,aAAAE,EAA4B,YAAAD,EACjD,WAACM,EAAA,CACG,SAAA,CAAAb,EAACc,EAAA,CAAU,QAAQ,QAAQ,KAAM,QAAS,IACzC,OAAA,CAAK,cAAW,GAAC,UAAU,qCAAqC,SAAA,IAEjE,IACCA,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,KAAM,MAAO,EAC3Dd,EAACe,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAU,0CAC1C,SAAAf,EAACgB,EAAA,CAAO,cAAW,EAAA,CAAC,CAAA,CACxB,CAAA,CAAA,CACJ,CAAA,CACJ,EACAhB,EAACJ,EAAA,CACG,SAAAI,EAAC2B,EAAA,CAAA,CAAc,CAAA,CACnB,CAAA,CAAA,CAAA,CAGZ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datefield.js","sources":["../../lib/components/datefield.tsx"],"sourcesContent":["'use client';\
|
|
1
|
+
{"version":3,"file":"datefield.js","sources":["../../lib/components/datefield.tsx"],"sourcesContent":["'use client';\nimport { VariantProps } from 'class-variance-authority';\nimport {\n DateField as AriaDateField,\n DateFieldProps as AriaDateFieldProps,\n DateInput as AriaDateInput,\n DateInputProps as AriaDateInputProps,\n DateSegment as AriaDateSegment,\n DateSegmentProps as AriaDateSegmentProps,\n DateValue as AriaDateValue,\n TimeField as AriaTimeField,\n TimeFieldProps as AriaTimeFieldProps,\n TimeValue as AriaTimeValue,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { fieldGroupVariants, FormField, type FormFieldProps } from './form';\n\nexport function DateSegment({ className, ...props }: AriaDateSegmentProps) {\n return (\n <AriaDateSegment\n className={composeRenderProps(className, className =>\n classNames(\n 'inline caret-transparent outline-0',\n /* Placeholder */\n 'data-[placeholder]:text-muted-foreground',\n /* Disabled */\n 'disabled-muted',\n /* Focused */\n 'data-[focused]:bg-accent data-[focused]:text-accent-foreground',\n /* Invalid */\n 'data-[invalid]:data-[focused]:bg-destructive data-[invalid]:data-[focused]:data-[placeholder]:text-destructive-foreground data-[invalid]:data-[focused]:text-destructive-foreground data-[invalid]:data-[placeholder]:text-destructive data-[invalid]:text-destructive',\n className\n )\n )}\n {...props}\n />\n );\n}\n\ninterface DateInputProps extends AriaDateInputProps, VariantProps<typeof fieldGroupVariants> {}\n\nexport function DateInput({ className, variant, ...props }: Omit<DateInputProps, 'children'>) {\n return (\n <AriaDateInput\n className={composeRenderProps(className, className =>\n classNames(fieldGroupVariants({ variant }), 'body-sm', className)\n )}\n {...props}\n >\n {segment => <DateSegment segment={segment} />}\n </AriaDateInput>\n );\n}\n\ninterface DateFieldProps<T extends AriaDateValue> extends AriaDateFieldProps<T>, FormFieldProps {}\n\nexport function DateField<T extends AriaDateValue>({\n label,\n description,\n className,\n errorMessage,\n ...props\n}: DateFieldProps<T>) {\n return (\n <AriaDateField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField label={label} description={description} errorMessage={errorMessage}>\n <DateInput />\n </FormField>\n </AriaDateField>\n );\n}\n\ninterface TimeFieldProps<T extends AriaTimeValue> extends AriaTimeFieldProps<T>, FormFieldProps {}\n\n/**\n * Time field component for time values.\n *\n * @remarks\n * Built with React Aria for accessibility and internationalization support.\n * Supports 12/24-hour formats, granularity control, and time constraints.\n * Features segmented input for hours, minutes, seconds, and AM/PM.\n *\n * @example\n * ```tsx\n * <TimeField\n * label=\"Meeting Time\"\n * minValue={parseTime('09:00')}\n * maxValue={parseTime('17:00')}\n * />\n * ```\n */\nexport function TimeField<T extends AriaTimeValue>({\n label,\n description,\n errorMessage,\n className,\n ...props\n}: TimeFieldProps<T>) {\n return (\n <AriaTimeField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField label={label} description={description} errorMessage={errorMessage}>\n <DateInput />\n </FormField>\n </AriaTimeField>\n );\n}\n"],"names":["DateSegment","className","props","jsx","AriaDateSegment","composeRenderProps","classNames","DateInput","variant","AriaDateInput","fieldGroupVariants","segment","DateField","label","description","errorMessage","AriaDateField","FormField","TimeField","AriaTimeField"],"mappings":"8WAmBO,SAASA,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAA+B,CACvE,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,qCAEA,2CAEA,iBAEA,iEAEA,yQACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAIO,SAASK,EAAU,CAAE,UAAAN,EAAW,QAAAO,EAAS,GAAGN,GAA2C,CAC1F,OACIC,EAACM,EAAA,CACG,UAAWJ,EAAmBJ,EAAWA,GACrCK,EAAWI,EAAmB,CAAE,QAAAF,CAAA,CAAS,EAAG,UAAWP,CAAS,CAAA,EAEnE,GAAGC,EAEH,SAAAS,GAAWR,EAACH,EAAA,CAAY,QAAAW,CAAA,CAAkB,CAAA,CAAA,CAGvD,CAIO,SAASC,EAAmC,CAC/C,MAAAC,EACA,YAAAC,EACA,UAAAb,EACA,aAAAc,EACA,GAAGb,CACP,EAAsB,CAClB,OACIC,EAACa,EAAA,CACG,UAAWX,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAZ,EAACI,IAAU,CAAA,CACf,CAAA,CAAA,CAGZ,CAqBO,SAASW,EAAmC,CAC/C,MAAAL,EACA,YAAAC,EACA,aAAAC,EACA,UAAAd,EACA,GAAGC,CACP,EAAsB,CAClB,OACIC,EAACgB,EAAA,CACG,UAAWd,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAZ,EAACI,IAAU,CAAA,CACf,CAAA,CAAA,CAGZ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
"use client";import{jsxs as m,Fragment as d,jsx as r}from"react/jsx-runtime";import{useState as g}from"react";import{DialogTrigger as b,DialogOverlay as D,DialogContent as h}from"./dialog.js";import{EasyMenu as y,MenuItem as A}from"./menu.js";import"class-variance-authority";import"react-aria-components";import"./button.js";import"../utilities/theme.js";import"clsx";import"./loader.js";import"./icons.js";import"./list-box.js";import"./select.js";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"./form.js";import"./popover.js";function p(i){return i.trim().toLowerCase().replace(/\s+/g,"-")}function M(i){return i.type==="action"}function a(i){return i.type==="dialog"}function f(i,t){return i.isDisabled?i.isDisabled(t):!1}function G({label:i,items:t,data:l}){const[s,u]=g(null);return m(d,{children:[r(y,{"aria-label":"Actions",label:i,size:"icon",onAction:n=>{if(typeof n!="string")return;const e=t.find(c=>p(c.label)===n);!e||f(e,l)||(M(e)?e.onPress(l):a(e)&&u(n))},children:t.map(n=>{const e=p(n.label),o=n.icon,c=f(n,l);return m(A,{id:e,isDisabled:c,children:[r(o,{className:"size-icon"})," ",n.label]},e)})}),r(b,{isOpen:s!==null,onOpenChange:n=>{n||u(null)},children:s!==null&&(()=>{const n=t.find(o=>p(o.label)===s);if(!n||!a(n))return null;const e=n.component;return r(D,{children:r(h,{children:({close:o})=>r(e,{close:o,data:l})})})})()})]})}export{G as DialogMenu};
|
|
2
2
|
//# sourceMappingURL=dialog-menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-menu.js","sources":["../../lib/components/dialog-menu.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"dialog-menu.js","sources":["../../lib/components/dialog-menu.tsx"],"sourcesContent":["'use client';\nimport { useState } from 'react';\nimport { DialogContent, DialogOverlay, DialogTrigger } from './dialog';\nimport type { CtxIcon } from './icons';\nimport { EasyMenu, MenuItem } from './menu';\n\nfunction normalizeLabel(label: string): string {\n return label.trim().toLowerCase().replace(/\\s+/g, '-');\n}\n\nexport type DialogMenuContentProps<T> = {\n /** Callback to close the dialog */\n close: () => void;\n /** The data passed to the dialog */\n data: T;\n};\n\n/** Base properties shared by all menu actions */\nexport type MenuActionBase<T> = {\n label: string;\n /** Optional function to determine if the action is disabled. Receives the data and returns a boolean. Defaults to false if not provided */\n isDisabled?: (data: T) => boolean;\n icon: CtxIcon;\n};\n\n/** Action that triggers a callback */\nexport type MenuActionAction<T> = MenuActionBase<T> & {\n type: 'action';\n /** Callback triggered when the action is pressed. Receives the data as parameter */\n onPress: (data: T) => void;\n};\n\n/** Action that opens a dialog */\nexport type MenuActionDialog<T> = MenuActionBase<T> & {\n type: 'dialog';\n /** Component to render in the dialog */\n component: React.ComponentType<DialogMenuContentProps<T>>;\n};\n\n/** Common menu action type that works for both DialogMenu and table row actions */\nexport type DialogMenuAction<T> = MenuActionAction<T> | MenuActionDialog<T>;\n\nfunction isMenuActionAction<T>(item: DialogMenuAction<T>): item is MenuActionAction<T> {\n return item.type === 'action';\n}\n\nfunction isMenuActionDialog<T>(item: DialogMenuAction<T>): item is MenuActionDialog<T> {\n return item.type === 'dialog';\n}\n\nfunction getIsDisabled<T>(item: DialogMenuAction<T>, data: T): boolean {\n return item.isDisabled ? item.isDisabled(data) : false;\n}\n\nexport type DialogMenuProps<T> = {\n label: React.ReactNode;\n items: DialogMenuAction<T>[];\n data: T;\n};\n\nexport function DialogMenu<T>({ label, items, data }: DialogMenuProps<T>) {\n const [openKey, setOpenKey] = useState<string | null>(null);\n\n return (\n <>\n <EasyMenu\n aria-label=\"Actions\"\n label={label}\n size={'icon'}\n onAction={key => {\n if (typeof key !== 'string') return;\n const found = items.find(it => normalizeLabel(it.label) === key);\n if (!found) return;\n\n const isDisabled = getIsDisabled(found, data);\n if (isDisabled) return;\n\n if (isMenuActionAction(found)) {\n found.onPress(data);\n } else if (isMenuActionDialog(found)) {\n setOpenKey(key);\n }\n }}\n >\n {items.map(it => {\n const id = normalizeLabel(it.label);\n const Icon = it.icon;\n const isDisabled = getIsDisabled(it, data);\n return (\n <MenuItem key={id} id={id} isDisabled={isDisabled}>\n {<Icon className=\"size-icon\" />} {it.label}\n </MenuItem>\n );\n })}\n </EasyMenu>\n\n <DialogTrigger\n isOpen={openKey !== null}\n onOpenChange={open => {\n if (!open) setOpenKey(null);\n }}\n >\n {openKey !== null &&\n (() => {\n const renderItem = items.find(it => normalizeLabel(it.label) === openKey);\n if (!renderItem || !isMenuActionDialog(renderItem)) return null;\n\n const Component = renderItem.component;\n\n return (\n <DialogOverlay>\n <DialogContent>{({ close }) => <Component close={close} data={data} />}</DialogContent>\n </DialogOverlay>\n );\n })()}\n </DialogTrigger>\n </>\n );\n}\n"],"names":["normalizeLabel","label","isMenuActionAction","item","isMenuActionDialog","getIsDisabled","data","DialogMenu","items","openKey","setOpenKey","useState","jsxs","Fragment","jsx","EasyMenu","key","found","it","id","Icon","isDisabled","MenuItem","DialogTrigger","open","renderItem","Component","DialogOverlay","DialogContent","close"],"mappings":"wkBAMA,SAASA,EAAeC,EAAuB,CAC3C,OAAOA,EAAM,OAAO,cAAc,QAAQ,OAAQ,GAAG,CACzD,CAkCA,SAASC,EAAsBC,EAAwD,CACnF,OAAOA,EAAK,OAAS,QACzB,CAEA,SAASC,EAAsBD,EAAwD,CACnF,OAAOA,EAAK,OAAS,QACzB,CAEA,SAASE,EAAiBF,EAA2BG,EAAkB,CACnE,OAAOH,EAAK,WAAaA,EAAK,WAAWG,CAAI,EAAI,EACrD,CAQO,SAASC,EAAc,CAAE,MAAAN,EAAO,MAAAO,EAAO,KAAAF,GAA4B,CACtE,KAAM,CAACG,EAASC,CAAU,EAAIC,EAAwB,IAAI,EAE1D,OACIC,EAAAC,EAAA,CACI,SAAA,CAAAC,EAACC,EAAA,CACG,aAAW,UACX,MAAAd,EACA,KAAM,OACN,SAAUe,GAAO,CACb,GAAI,OAAOA,GAAQ,SAAU,OAC7B,MAAMC,EAAQT,EAAM,KAAKU,GAAMlB,EAAekB,EAAG,KAAK,IAAMF,CAAG,EAC3D,CAACC,GAEcZ,EAAcY,EAAOX,CAAI,IAGxCJ,EAAmBe,CAAK,EACxBA,EAAM,QAAQX,CAAI,EACXF,EAAmBa,CAAK,GAC/BP,EAAWM,CAAG,EAEtB,EAEC,SAAAR,EAAM,IAAIU,GAAM,CACb,MAAMC,EAAKnB,EAAekB,EAAG,KAAK,EAC5BE,EAAOF,EAAG,KACVG,EAAahB,EAAca,EAAIZ,CAAI,EACzC,OACIM,EAACU,EAAA,CAAkB,GAAAH,EAAQ,WAAAE,EACtB,SAAA,CAAAP,EAACM,EAAA,CAAK,UAAU,WAAA,CAAY,EAAG,IAAEF,EAAG,KAAA,CAAA,EAD1BC,CAEf,CAER,CAAC,CAAA,CAAA,EAGLL,EAACS,EAAA,CACG,OAAQd,IAAY,KACpB,aAAce,GAAQ,CACbA,GAAMd,EAAW,IAAI,CAC9B,EAEC,SAAAD,IAAY,OACR,IAAM,CACH,MAAMgB,EAAajB,EAAM,KAAKU,GAAMlB,EAAekB,EAAG,KAAK,IAAMT,CAAO,EACxE,GAAI,CAACgB,GAAc,CAACrB,EAAmBqB,CAAU,EAAG,OAAO,KAE3D,MAAMC,EAAYD,EAAW,UAE7B,OACIX,EAACa,EAAA,CACG,SAAAb,EAACc,EAAA,CAAe,SAAA,CAAC,CAAE,MAAAC,CAAA,IAAYf,EAACY,EAAA,CAAU,MAAAG,EAAc,KAAAvB,CAAA,CAAY,EAAG,EAC3E,CAER,GAAA,CAAG,CAAA,CACX,EACJ,CAER"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as a,jsxs as s,Fragment as f}from"react/jsx-runtime";import{cva as u}from"class-variance-authority";import{DialogTrigger as c,ModalOverlay as x,composeRenderProps as l,Modal as p,Dialog as h,Heading as b}from"react-aria-components";import{Button as v}from"./button.js";import{classNames as i}from"../utilities/theme.js";import{IcClose as N}from"./icons.js";import"./loader.js";import"clsx";import"react";const D=u(["fixed z-50 gap-icon bg-elevation-1 transition ease-in-out","data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200 data-[exiting]:animate-out data-[exiting]:fade-out-0"],{variants:{side:{top:"inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table",bottom:"inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table",left:"inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm",right:"inset-y-0 right-0 h-full w-3/4 border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm"}}}),M=c,O=({className:t,isDismissable:e=!0,...n})=>a(x,{isDismissable:e,className:l(t,o=>i("fixed inset-0 z-50 bg-background/10","data-[exiting]:duration-100 data-[exiting]:animate-out","data-[entering]:animate-in",o)),...n});function P({className:t,children:e,side:n,role:o,closeButton:d=!0,...g}){return a(p,{className:l(t,r=>i(n?D({side:n,className:"h-full p-6"}):["fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border bg-elevation-1 p-icon duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full"],r)),...g,children:a(h,{role:o,className:i(!n&&"grid h-full gap-icon relative","h-full outline-none"),children:l(e,(r,m)=>s(f,{children:[r,d&&a("div",{className:"absolute right-2 top-1",children:s(v,{size:"icon",variant:"neutral",onPress:m.close,className:"rounded-full",children:[a(N,{}),a("span",{className:"sr-only",children:"Close"})]})})]}))})})}function B({className:t,...e}){return a("div",{className:i("flex flex-col gap-y-2 text-center sm:text-left",t),...e})}function I({className:t,...e}){return a("div",{className:i("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2",t),...e})}function R({className:t,...e}){return a(b,{slot:"title",className:i("heading-3 font-semibold leading-none tracking-tight",t),...e})}function V({className:t,...e}){return a("p",{className:i("flex flex-col gap-y-1 text-center sm:text-left",t),...e})}export{P as DialogContent,V as DialogDescription,I as DialogFooter,B as DialogHeader,O as DialogOverlay,R as DialogTitle,M as DialogTrigger};
|
|
1
|
+
"use client";import{jsx as a,jsxs as s,Fragment as f}from"react/jsx-runtime";import{cva as u}from"class-variance-authority";import{DialogTrigger as c,ModalOverlay as x,composeRenderProps as l,Modal as p,Dialog as h,Heading as b}from"react-aria-components";import{Button as v}from"./button.js";import{classNames as i}from"../utilities/theme.js";import{IcClose as N}from"./icons.js";import"./loader.js";import"clsx";import"react";const D=u(["fixed z-50 gap-icon bg-elevation-1 transition ease-in-out","data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200 data-[exiting]:animate-out data-[exiting]:fade-out-0"],{variants:{side:{top:"inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table",bottom:"inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table",left:"inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm",right:"inset-y-0 right-0 h-full w-3/4 border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm"}}}),M=c,O=({className:t,isDismissable:e=!0,...n})=>a(x,{isDismissable:e,className:l(t,o=>i("fixed inset-0 z-50 bg-background/10","data-[exiting]:duration-100 data-[exiting]:animate-out","data-[entering]:animate-in",o)),...n});function P({className:t,children:e,side:n,role:o,closeButton:d=!0,...g}){return a(p,{className:l(t,r=>i(n?D({side:n,className:"h-full p-6"}):["fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border bg-elevation-1 p-icon duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full"],r)),...g,children:a(h,{role:o,className:i(!n&&"grid h-full gap-icon relative","h-full outline-none"),children:l(e,(r,m)=>s(f,{children:[r,d&&a("div",{className:"absolute right-2 top-1",children:s(v,{size:"icon",variant:"neutral",onPress:m.close,className:"rounded-full",children:[a(N,{}),a("span",{className:"sr-only",children:"Close"})]})})]}))})})}function B({className:t,...e}){return a("div",{className:i("flex flex-col gap-y-2 text-center sm:text-left",t),...e})}function I({className:t,...e}){return a("div",{className:i("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2",t),...e})}function R({className:t,...e}){return a(b,{slot:"title",className:i("heading-3 font-semibold leading-none tracking-tight",t),...e})}function V({className:t,...e}){return a("p",{className:i("flex flex-col gap-y-1 text-center sm:text-left",t),...e})}export{P as DialogContent,V as DialogDescription,I as DialogFooter,B as DialogHeader,O as DialogOverlay,R as DialogTitle,M as DialogTrigger};
|
|
2
2
|
//# sourceMappingURL=dialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sources":["../../lib/components/dialog.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"dialog.js","sources":["../../lib/components/dialog.tsx"],"sourcesContent":["'use client';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n Dialog as AriaDialog,\n DialogProps as AriaDialogProps,\n DialogTrigger as AriaDialogTrigger,\n Heading as AriaHeading,\n HeadingProps as AriaHeadingProps,\n Modal as AriaModal,\n ModalOverlay as AriaModalOverlay,\n ModalOverlayProps as AriaModalOverlayProps,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utilities/theme';\nimport { IcClose } from './icons';\n\n/**\n * Visual variants for the sheet-style dialog (slide in from an edge).\n *\n * @remarks\n * Internally used to style `<DialogContent side=\"...\">`.\n */\nconst sheetVariants = cva(\n [\n 'fixed z-50 gap-icon bg-elevation-1 transition ease-in-out',\n 'data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200 data-[exiting]:animate-out data-[exiting]:fade-out-0',\n ],\n {\n variants: {\n side: {\n top: 'inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table',\n bottom: 'inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table',\n left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm',\n right: 'inset-y-0 right-0 h-full w-3/4 border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm',\n },\n },\n }\n);\n\n/**\n * Opens the dialog when interacted with (click/press).\n *\n * @remarks\n * Compose this around any control that should open the dialog.\n *\n * @example\n * ```tsx\n * <DialogTrigger>\n * <Button>Open</Button>\n * <DialogOverlay>\n * <DialogContent>...</DialogContent>\n * </DialogOverlay>\n * </DialogTrigger>\n * ```\n */\nexport const DialogTrigger = AriaDialogTrigger;\n\nexport const DialogOverlay = ({ className, isDismissable = true, ...props }: AriaModalOverlayProps) => (\n <AriaModalOverlay\n isDismissable={isDismissable}\n className={composeRenderProps(className, className =>\n classNames(\n 'fixed inset-0 z-50 bg-background/10',\n /* Exiting */\n 'data-[exiting]:duration-100 data-[exiting]:animate-out',\n /* Entering */\n 'data-[entering]:animate-in',\n className\n )\n )}\n {...props}\n />\n);\n\n/** Props for {@link DialogContent}. */\nexport interface DialogContentProps\n extends Omit<React.ComponentProps<typeof AriaModal>, 'children'>,\n VariantProps<typeof sheetVariants> {\n /**\n * Render function or nodes for the dialog panel contents.\n */\n children?: AriaDialogProps['children'];\n\n /**\n * ARIA role of the dialog.\n *\n * Use `\"alertdialog\"` for destructive/confirmation flows that require\n * explicit acknowledgement.\n * @defaultValue \"dialog\"\n */\n role?: AriaDialogProps['role'];\n\n /**\n * Show a built-in close button in the top-right corner.\n * @defaultValue true\n */\n closeButton?: boolean;\n}\n\n/**\n * Dialog panel container. Renders either a centered modal or a sheet\n * from an edge when `side` is provided.\n *\n * @example Basic\n * ```tsx\n * <DialogTrigger>\n * <Button>Open</Button>\n * <DialogOverlay>\n * <DialogContent>\n * <DialogHeader>\n * <DialogTitle>Sign up</DialogTitle>\n * </DialogHeader>\n * ...\n * </DialogContent>\n * </DialogOverlay>\n * </DialogTrigger>\n * ```\n */\nexport function DialogContent({ className, children, side, role, closeButton = true, ...props }: DialogContentProps) {\n return (\n <AriaModal\n className={composeRenderProps(className, className =>\n classNames(\n side\n ? sheetVariants({ side, className: 'h-full p-6' })\n : [\n 'fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border bg-elevation-1 p-icon duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full',\n ],\n className\n )\n )}\n {...props}\n >\n <AriaDialog\n role={role}\n className={classNames(!side && 'grid h-full gap-icon relative', 'h-full outline-none')}\n >\n {composeRenderProps(children, (children, renderProps) => (\n <>\n {children}\n {closeButton && (\n <div className=\"absolute right-2 top-1\">\n <Button\n size={'icon'}\n variant={'neutral'}\n onPress={renderProps.close}\n className=\"rounded-full\"\n >\n <IcClose />\n <span className=\"sr-only\">Close</span>\n </Button>\n </div>\n )}\n </>\n ))}\n </AriaDialog>\n </AriaModal>\n );\n}\n\n/**\n * Header region for the dialog panel.\n *\n * @example\n * ```tsx\n * <DialogHeader>\n * <DialogTitle>Settings</DialogTitle>\n * </DialogHeader>\n * ```\n */\nexport function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n return <div className={classNames('flex flex-col gap-y-2 text-center sm:text-left', className)} {...props} />;\n}\n\n/**\n * Footer region that aligns action buttons.\n *\n * @example\n * ```tsx\n * <DialogFooter>\n * <Button variant=\"outline\">Cancel</Button>\n * <Button>Save</Button>\n * </DialogFooter>\n * ```\n */\nexport function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n return (\n <div\n className={classNames('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', className)}\n {...props}\n />\n );\n}\n\n/**\n * Heading element mapped to the dialog title (announced by screen readers).\n *\n * @remarks\n * Sets `slot=\"title\"` so RAC wires it to the dialog.\n */\nexport function DialogTitle({ className, ...props }: AriaHeadingProps) {\n return (\n <AriaHeading\n slot=\"title\"\n className={classNames('heading-3 font-semibold leading-none tracking-tight', className)}\n {...props}\n />\n );\n}\n\n/**\n * Short explanatory text under the title.\n *\n * @example\n * ```tsx\n * <DialogDescription>\n * This action cannot be undone.\n * </DialogDescription>\n * ```\n */\nexport function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {\n return <p className={classNames('flex flex-col gap-y-1 text-center sm:text-left', className)} {...props} />;\n}\n"],"names":["sheetVariants","cva","DialogTrigger","AriaDialogTrigger","DialogOverlay","className","isDismissable","props","jsx","AriaModalOverlay","composeRenderProps","classNames","DialogContent","children","side","role","closeButton","AriaModal","AriaDialog","renderProps","jsxs","Fragment","Button","IcClose","DialogHeader","DialogFooter","DialogTitle","AriaHeading","DialogDescription"],"mappings":"4aAwBA,MAAMA,EAAgBC,EAClB,CACI,4DACA,qKAAA,EAEJ,CACI,SAAU,CACN,KAAM,CACF,IAAK,yGACL,OAAQ,kHACR,KAAM,yHACN,MAAO,4HAAA,CACX,CACJ,CAER,EAkBaC,EAAgBC,EAEhBC,EAAgB,CAAC,CAAE,UAAAC,EAAW,cAAAC,EAAgB,GAAM,GAAGC,KAChEC,EAACC,EAAA,CACG,cAAAH,EACA,UAAWI,EAAmBL,EAAWA,GACrCM,EACI,sCAEA,yDAEA,6BACAN,CAAA,CACJ,EAEH,GAAGE,CAAA,CACR,EA+CG,SAASK,EAAc,CAAE,UAAAP,EAAW,SAAAQ,EAAU,KAAAC,EAAM,KAAAC,EAAM,YAAAC,EAAc,GAAM,GAAGT,GAA6B,CACjH,OACIC,EAACS,EAAA,CACG,UAAWP,EAAmBL,EAAWA,GACrCM,EACIG,EACMd,EAAc,CAAE,KAAAc,EAAM,UAAW,YAAA,CAAc,EAC/C,CACI,kUAAA,EAEVT,CAAA,CACJ,EAEH,GAAGE,EAEJ,SAAAC,EAACU,EAAA,CACG,KAAAH,EACA,UAAWJ,EAAW,CAACG,GAAQ,gCAAiC,qBAAqB,EAEpF,SAAAJ,EAAmBG,EAAU,CAACA,EAAUM,IACrCC,EAAAC,EAAA,CACK,SAAA,CAAAR,EACAG,GACGR,EAAC,MAAA,CAAI,UAAU,yBACX,SAAAY,EAACE,EAAA,CACG,KAAM,OACN,QAAS,UACT,QAASH,EAAY,MACrB,UAAU,eAEV,SAAA,CAAAX,EAACe,EAAA,EAAQ,EACTf,EAAC,OAAA,CAAK,UAAU,UAAU,SAAA,OAAA,CAAK,CAAA,CAAA,CAAA,CACnC,CACJ,CAAA,EAER,CACH,CAAA,CAAA,CACL,CAAA,CAGZ,CAYO,SAASgB,EAAa,CAAE,UAAAnB,EAAW,GAAGE,GAA+C,CACxF,OAAOC,EAAC,OAAI,UAAWG,EAAW,iDAAkDN,CAAS,EAAI,GAAGE,EAAO,CAC/G,CAaO,SAASkB,EAAa,CAAE,UAAApB,EAAW,GAAGE,GAA+C,CACxF,OACIC,EAAC,MAAA,CACG,UAAWG,EAAW,8DAA+DN,CAAS,EAC7F,GAAGE,CAAA,CAAA,CAGhB,CAQO,SAASmB,EAAY,CAAE,UAAArB,EAAW,GAAGE,GAA2B,CACnE,OACIC,EAACmB,EAAA,CACG,KAAK,QACL,UAAWhB,EAAW,sDAAuDN,CAAS,EACrF,GAAGE,CAAA,CAAA,CAGhB,CAYO,SAASqB,EAAkB,CAAE,UAAAvB,EAAW,GAAGE,GAAqD,CACnG,OAAOC,EAAC,KAAE,UAAWG,EAAW,iDAAkDN,CAAS,EAAI,GAAGE,EAAO,CAC7G"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as u,Fragment as l}from"react/jsx-runtime";import{useContext as c}from"react";import{DisclosureGroupStateContext as m,Disclosure as p,composeRenderProps as i,DisclosurePanel as d,DisclosureGroup as D}from"react-aria-components";import{Button as f}from"./button.js";import{classNames as a}from"../utilities/theme.js";import{IcDown as N}from"./icons.js";import"class-variance-authority";import"./loader.js";import"clsx";function _({children:r,className:s,...o}){let t=c(m)!==null;return e(p,{...o,className:i(s,(n,b)=>a("group",t&&"border-0 border-b last:border-b-0",n)),children:r})}function v({children:r,className:s,...o}){return e(f,{slot:"trigger",type:"button",variant:"ghost",className:a(s),...o,children:i(r,t=>u(l,{children:[e("span",{children:t}),e(N,{"aria-hidden":!0,className:a("transition-transform duration-200","group-data-[expanded]:rotate-180")})]}))})}function w({children:r,className:s,...o}){return e(d,{...o,className:"transition-all",children:r})}function y({children:r,className:s,...o}){return e(D,{...o,className:i(s,(t,n)=>a("",t)),children:r})}export{_ as Disclosure,y as DisclosureGroup,v as DisclosureHeader,w as DisclosurePanel};
|
|
1
|
+
"use client";import{jsx as e,jsxs as u,Fragment as l}from"react/jsx-runtime";import{useContext as c}from"react";import{DisclosureGroupStateContext as m,Disclosure as p,composeRenderProps as i,DisclosurePanel as d,DisclosureGroup as D}from"react-aria-components";import{Button as f}from"./button.js";import{classNames as a}from"../utilities/theme.js";import{IcDown as N}from"./icons.js";import"class-variance-authority";import"./loader.js";import"clsx";function _({children:r,className:s,...o}){let t=c(m)!==null;return e(p,{...o,className:i(s,(n,b)=>a("group",t&&"border-0 border-b last:border-b-0",n)),children:r})}function v({children:r,className:s,...o}){return e(f,{slot:"trigger",type:"button",variant:"ghost",className:a(s),...o,children:i(r,t=>u(l,{children:[e("span",{children:t}),e(N,{"aria-hidden":!0,className:a("transition-transform duration-200","group-data-[expanded]:rotate-180")})]}))})}function w({children:r,className:s,...o}){return e(d,{...o,className:"transition-all",children:r})}function y({children:r,className:s,...o}){return e(D,{...o,className:i(s,(t,n)=>a("",t)),children:r})}export{_ as Disclosure,y as DisclosureGroup,v as DisclosureHeader,w as DisclosurePanel};
|
|
2
2
|
//# sourceMappingURL=disclosure.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"disclosure.js","sources":["../../lib/components/disclosure.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"disclosure.js","sources":["../../lib/components/disclosure.tsx"],"sourcesContent":["'use client';\nimport { useContext } from 'react';\nimport {\n Disclosure as AriaDisclosure,\n DisclosureGroup as AriaDisclosureGroup,\n DisclosureGroupProps as AriaDisclosureGroupProps,\n DisclosurePanel as AriaDisclosurePanel,\n DisclosurePanelProps as AriaDisclosurePanelProps,\n DisclosureProps as AriaDisclosureProps,\n composeRenderProps,\n DisclosureGroupStateContext,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utilities/theme';\nimport { IcDown } from './icons';\n\nexport interface DisclosureProps extends AriaDisclosureProps {\n children: React.ReactNode;\n}\n\nexport function Disclosure({ children, className, ...props }: DisclosureProps) {\n let isInGroup = useContext(DisclosureGroupStateContext) !== null;\n return (\n <AriaDisclosure\n {...props}\n className={composeRenderProps(className, (className, _) =>\n classNames('group', isInGroup && 'border-0 border-b last:border-b-0', className)\n )}\n >\n {children}\n </AriaDisclosure>\n );\n}\n\nexport function DisclosureHeader({ children, className, ...props }: React.ComponentProps<typeof Button>) {\n return (\n <Button slot=\"trigger\" type=\"button\" variant={'ghost'} className={classNames(className)} {...props}>\n {composeRenderProps(children, children => (\n <>\n <span>{children}</span>\n <IcDown\n aria-hidden\n className={classNames('transition-transform duration-200', 'group-data-[expanded]:rotate-180')}\n />\n </>\n ))}\n </Button>\n );\n}\n\nexport interface DisclosurePanelProps extends AriaDisclosurePanelProps {\n children: React.ReactNode;\n}\n\nexport function DisclosurePanel({ children, className, ...props }: DisclosurePanelProps) {\n return (\n <AriaDisclosurePanel {...props} className={'transition-all'}>\n {children}\n </AriaDisclosurePanel>\n );\n}\n\nexport interface DisclosureGroupProps extends AriaDisclosureGroupProps {\n children: React.ReactNode;\n}\n\nexport function DisclosureGroup({ children, className, ...props }: DisclosureGroupProps) {\n return (\n <AriaDisclosureGroup\n {...props}\n className={composeRenderProps(className, (className, _) => classNames('', className))}\n >\n {children}\n </AriaDisclosureGroup>\n );\n}\n"],"names":["Disclosure","children","className","props","isInGroup","useContext","DisclosureGroupStateContext","jsx","AriaDisclosure","composeRenderProps","_","classNames","DisclosureHeader","Button","jsxs","Fragment","IcDown","DisclosurePanel","AriaDisclosurePanel","DisclosureGroup","AriaDisclosureGroup"],"mappings":"ocAqBO,SAASA,EAAW,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,GAA0B,CAC3E,IAAIC,EAAYC,EAAWC,CAA2B,IAAM,KAC5D,OACIC,EAACC,EAAA,CACI,GAAGL,EACJ,UAAWM,EAAmBP,EAAW,CAACA,EAAWQ,IACjDC,EAAW,QAASP,GAAa,oCAAqCF,CAAS,CAAA,EAGlF,SAAAD,CAAA,CAAA,CAGb,CAEO,SAASW,EAAiB,CAAE,SAAAX,EAAU,UAAAC,EAAW,GAAGC,GAA8C,CACrG,SACKU,EAAA,CAAO,KAAK,UAAU,KAAK,SAAS,QAAS,QAAS,UAAWF,EAAWT,CAAS,EAAI,GAAGC,EACxF,WAAmBF,EAAUA,GAC1Ba,EAAAC,EAAA,CACI,SAAA,CAAAR,EAAC,OAAA,CAAM,SAAAN,CAAAA,CAAS,EAChBM,EAACS,EAAA,CACG,cAAW,GACX,UAAWL,EAAW,oCAAqC,kCAAkC,CAAA,CAAA,CACjG,CAAA,CACJ,CACH,CAAA,CACL,CAER,CAMO,SAASM,EAAgB,CAAE,SAAAhB,EAAU,UAAAC,EAAW,GAAGC,GAA+B,CACrF,SACKe,EAAA,CAAqB,GAAGf,EAAO,UAAW,iBACtC,SAAAF,EACL,CAER,CAMO,SAASkB,EAAgB,CAAE,SAAAlB,EAAU,UAAAC,EAAW,GAAGC,GAA+B,CACrF,OACII,EAACa,EAAA,CACI,GAAGjB,EACJ,UAAWM,EAAmBP,EAAW,CAACA,EAAWQ,IAAMC,EAAW,GAAIT,CAAS,CAAC,EAEnF,SAAAD,CAAA,CAAA,CAGb"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"duration-field.js","sources":["../../lib/components/duration-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo, useState } from 'react';\nimport { NumberField as AriaNumberField, NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';\nimport { Duration } from '../utilities/duration';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { Button } from './button';\nimport { FieldGroup, FormField, type FormFieldProps } from './form';\nimport { IcLeft, IcRight } from './icons';\nimport { NumberFieldInput } from './numberfield';\n\nconst ANumberField = AriaNumberField;\n\ntype DurationPartKey = keyof Duration;\n\n/**\n * Segment configurations with both full and short labels\n * https://learn.microsoft.com/en-us/style-guide/a-z-word-list-term-collections/term-collections/date-time-terms\n * https://en.wikipedia.org/wiki/Hour\n */\nconst SEGMENT_LABELS: Record<DurationPartKey, { full: string; short: string }> = {\n years: { full: 'Years', short: 'yr' },\n months: { full: 'Months', short: 'mo' },\n weeks: { full: 'Weeks', short: 'wk' },\n days: { full: 'Days', short: 'd' },\n hours: { full: 'Hours', short: 'hr' },\n minutes: { full: 'Minutes', short: 'min' },\n seconds: { full: 'Seconds', short: 'sec' },\n};\n\nconst DATE_KEYS: DurationPartKey[] = ['years', 'months', 'days'];\nconst TIME_KEYS: DurationPartKey[] = ['hours', 'minutes', 'seconds'];\n\n/**\n * Props for DurationSegment component\n */\ninterface DurationSegmentProps {\n /** Unique identifier for the input field */\n id: string;\n /** Current numeric value */\n value: number;\n /** Callback when value changes */\n onChange: (value: number) => void;\n /** Callback when field loses focus */\n onBlur: () => void;\n /** Display label for the segment */\n label: string;\n /** Whether the field has validation errors */\n isInvalid: boolean;\n /** Whether the field is disabled */\n isDisabled: boolean;\n}\n\nfunction DurationSegment({ id, value, onChange, onBlur, label, isInvalid, isDisabled }: DurationSegmentProps) {\n return (\n <div className=\"flex items-center flex-1 min-w-0 relative\">\n <ANumberField\n aria-label={label}\n isInvalid={isInvalid}\n isDisabled={isDisabled}\n value={value}\n onChange={newValue => onChange(newValue)}\n onBlur={onBlur}\n minValue={0}\n className=\"w-full\"\n >\n <NumberFieldInput id={id} className=\"w-full pr-input\" />\n </ANumberField>\n <div className=\"absolute right-1 select-none text-muted pointer-events-none\">{label}</div>\n </div>\n );\n}\n\ninterface Iso8601DurationFieldBaseProps {\n value: string;\n onChange: (value: string) => void;\n onBlur?: () => void;\n}\n\nexport interface Iso8601DurationFieldProps\n extends Iso8601DurationFieldBaseProps,\n FormFieldProps,\n Omit<AriaNumberFieldProps, 'value' | 'onChange' | 'onBlur'> {\n id?: string;\n}\n\nexport function Iso8601DurationField({\n value,\n onChange,\n onBlur,\n label,\n description,\n errorMessage,\n requiredIndicator,\n isDisabled,\n id,\n}: Iso8601DurationFieldProps) {\n const [showTime, setShowTime] = useState(false);\n\n const duration = useMemo((): Duration => {\n if (!value || value === '') {\n return {};\n }\n try {\n return Duration.parse(value);\n } catch {\n return {};\n }\n }, [value]);\n\n const handlePartChange = useCallback(\n (part: DurationPartKey, partValue: number) => {\n const updatedDuration: Duration = {\n ...duration,\n [part]: partValue > 0 ? partValue : undefined,\n };\n onChange(Duration.serialize(updatedDuration));\n },\n [duration, onChange]\n );\n\n const handleToggleTime = () => {\n setShowTime(prev => !prev);\n };\n\n const isInvalid = !!errorMessage;\n const fieldId = id || 'duration-field';\n\n const renderSegments = useCallback(\n (includeTime: boolean) => {\n const keys = includeTime ? [...DATE_KEYS, ...TIME_KEYS] : DATE_KEYS;\n const labelType = includeTime ? 'short' : 'full';\n\n return keys.map((key, index) => (\n <div key={key} className=\"contents\">\n <DurationSegment\n id={`${fieldId}-${key}`}\n value={duration[key] ?? 0}\n onChange={segmentValue => handlePartChange(key, segmentValue)}\n onBlur={onBlur || (() => {})}\n label={SEGMENT_LABELS[key][labelType]}\n isInvalid={isInvalid}\n isDisabled={isDisabled || false}\n />\n {index < keys.length - 1 && (\n <div\n key={`sep-${key}`}\n className=\"self-stretch w-px bg-input mx-2 flex-shrink-0\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n ));\n },\n [fieldId, duration, handlePartChange, onBlur, isInvalid, isDisabled, showTime]\n );\n\n return (\n <div className={classNames('group form-field')} data-invalid={isInvalid ? '' : undefined}>\n <FormField\n label={label}\n description={description}\n errorMessage={errorMessage}\n requiredIndicator={requiredIndicator}\n htmlFor={`${fieldId}-years`}\n >\n <div className=\"flex-1 flex items-center gap-1\">\n <FieldGroup\n data-invalid={isInvalid ? '' : undefined}\n className=\"flex flex-row items-stretch w-full overflow-hidden\"\n >\n {renderSegments(showTime)}\n </FieldGroup>\n <Button\n type=\"button\"\n size=\"icon\"\n onPress={handleToggleTime}\n isDisabled={isDisabled}\n aria-label={showTime ? 'Hide time components' : 'Show time components'}\n aria-expanded={showTime}\n className={classNames('flex-shrink-0')}\n >\n {showTime ? <IcLeft className=\"size-icon\" /> : <IcRight className=\"size-icon\" />}\n </Button>\n </div>\n </FormField>\n </div>\n );\n}\n\nexport interface TfIso8601DurationFieldProps extends Omit<Iso8601DurationFieldProps, 'value' | 'onChange'> {}\n\nexport function TfIso8601DurationField({ isDisabled, ...props }: TfIso8601DurationFieldProps) {\n const field = useFieldContext<string>({ disabled: isDisabled });\n\n return (\n <Iso8601DurationField\n value={field.state.value}\n onChange={field.handleChange}\n onBlur={field.handleBlur}\n errorMessage={getFieldErrorMessage(field)}\n isDisabled={isDisabled || field.form.state.isSubmitting}\n id={field.name}\n {...props}\n />\n );\n}\n"],"names":["ANumberField","AriaNumberField","SEGMENT_LABELS","DATE_KEYS","TIME_KEYS","DurationSegment","id","value","onChange","onBlur","label","isInvalid","isDisabled","jsxs","jsx","newValue","NumberFieldInput","Iso8601DurationField","description","errorMessage","requiredIndicator","showTime","setShowTime","useState","duration","useMemo","Duration","handlePartChange","useCallback","part","partValue","updatedDuration","handleToggleTime","prev","fieldId","renderSegments","includeTime","keys","labelType","key","index","segmentValue","classNames","FormField","FieldGroup","Button","IcLeft","IcRight","TfIso8601DurationField","props","field","useFieldContext","getFieldErrorMessage"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"duration-field.js","sources":["../../lib/components/duration-field.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useMemo, useState } from 'react';\nimport { NumberField as AriaNumberField, NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';\nimport { Duration } from '../utilities/duration';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { Button } from './button';\nimport { FieldGroup, FormField, type FormFieldProps } from './form';\nimport { IcLeft, IcRight } from './icons';\nimport { NumberFieldInput } from './numberfield';\n\nconst ANumberField = AriaNumberField;\n\ntype DurationPartKey = keyof Duration;\n\n/**\n * Segment configurations with both full and short labels\n * https://learn.microsoft.com/en-us/style-guide/a-z-word-list-term-collections/term-collections/date-time-terms\n * https://en.wikipedia.org/wiki/Hour\n */\nconst SEGMENT_LABELS: Record<DurationPartKey, { full: string; short: string }> = {\n years: { full: 'Years', short: 'yr' },\n months: { full: 'Months', short: 'mo' },\n weeks: { full: 'Weeks', short: 'wk' },\n days: { full: 'Days', short: 'd' },\n hours: { full: 'Hours', short: 'hr' },\n minutes: { full: 'Minutes', short: 'min' },\n seconds: { full: 'Seconds', short: 'sec' },\n};\n\nconst DATE_KEYS: DurationPartKey[] = ['years', 'months', 'days'];\nconst TIME_KEYS: DurationPartKey[] = ['hours', 'minutes', 'seconds'];\n\n/**\n * Props for DurationSegment component\n */\ninterface DurationSegmentProps {\n /** Unique identifier for the input field */\n id: string;\n /** Current numeric value */\n value: number;\n /** Callback when value changes */\n onChange: (value: number) => void;\n /** Callback when field loses focus */\n onBlur: () => void;\n /** Display label for the segment */\n label: string;\n /** Whether the field has validation errors */\n isInvalid: boolean;\n /** Whether the field is disabled */\n isDisabled: boolean;\n}\n\nfunction DurationSegment({ id, value, onChange, onBlur, label, isInvalid, isDisabled }: DurationSegmentProps) {\n return (\n <div className=\"flex items-center flex-1 min-w-0 relative\">\n <ANumberField\n aria-label={label}\n isInvalid={isInvalid}\n isDisabled={isDisabled}\n value={value}\n onChange={newValue => onChange(newValue)}\n onBlur={onBlur}\n minValue={0}\n className=\"w-full\"\n >\n <NumberFieldInput id={id} className=\"w-full pr-input\" />\n </ANumberField>\n <div className=\"absolute right-1 select-none text-muted pointer-events-none\">{label}</div>\n </div>\n );\n}\n\ninterface Iso8601DurationFieldBaseProps {\n value: string;\n onChange: (value: string) => void;\n onBlur?: () => void;\n}\n\nexport interface Iso8601DurationFieldProps\n extends Iso8601DurationFieldBaseProps,\n FormFieldProps,\n Omit<AriaNumberFieldProps, 'value' | 'onChange' | 'onBlur'> {\n id?: string;\n}\n\nexport function Iso8601DurationField({\n value,\n onChange,\n onBlur,\n label,\n description,\n errorMessage,\n requiredIndicator,\n isDisabled,\n id,\n}: Iso8601DurationFieldProps) {\n const [showTime, setShowTime] = useState(false);\n\n const duration = useMemo((): Duration => {\n if (!value || value === '') {\n return {};\n }\n try {\n return Duration.parse(value);\n } catch {\n return {};\n }\n }, [value]);\n\n const handlePartChange = useCallback(\n (part: DurationPartKey, partValue: number) => {\n const updatedDuration: Duration = {\n ...duration,\n [part]: partValue > 0 ? partValue : undefined,\n };\n onChange(Duration.serialize(updatedDuration));\n },\n [duration, onChange]\n );\n\n const handleToggleTime = () => {\n setShowTime(prev => !prev);\n };\n\n const isInvalid = !!errorMessage;\n const fieldId = id || 'duration-field';\n\n const renderSegments = useCallback(\n (includeTime: boolean) => {\n const keys = includeTime ? [...DATE_KEYS, ...TIME_KEYS] : DATE_KEYS;\n const labelType = includeTime ? 'short' : 'full';\n\n return keys.map((key, index) => (\n <div key={key} className=\"contents\">\n <DurationSegment\n id={`${fieldId}-${key}`}\n value={duration[key] ?? 0}\n onChange={segmentValue => handlePartChange(key, segmentValue)}\n onBlur={onBlur || (() => {})}\n label={SEGMENT_LABELS[key][labelType]}\n isInvalid={isInvalid}\n isDisabled={isDisabled || false}\n />\n {index < keys.length - 1 && (\n <div\n key={`sep-${key}`}\n className=\"self-stretch w-px bg-input mx-2 flex-shrink-0\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n ));\n },\n [fieldId, duration, handlePartChange, onBlur, isInvalid, isDisabled, showTime]\n );\n\n return (\n <div className={classNames('group form-field')} data-invalid={isInvalid ? '' : undefined}>\n <FormField\n label={label}\n description={description}\n errorMessage={errorMessage}\n requiredIndicator={requiredIndicator}\n htmlFor={`${fieldId}-years`}\n >\n <div className=\"flex-1 flex items-center gap-1\">\n <FieldGroup\n data-invalid={isInvalid ? '' : undefined}\n className=\"flex flex-row items-stretch w-full overflow-hidden\"\n >\n {renderSegments(showTime)}\n </FieldGroup>\n <Button\n type=\"button\"\n size=\"icon\"\n onPress={handleToggleTime}\n isDisabled={isDisabled}\n aria-label={showTime ? 'Hide time components' : 'Show time components'}\n aria-expanded={showTime}\n className={classNames('flex-shrink-0')}\n >\n {showTime ? <IcLeft className=\"size-icon\" /> : <IcRight className=\"size-icon\" />}\n </Button>\n </div>\n </FormField>\n </div>\n );\n}\n\nexport interface TfIso8601DurationFieldProps extends Omit<Iso8601DurationFieldProps, 'value' | 'onChange'> {}\n\nexport function TfIso8601DurationField({ isDisabled, ...props }: TfIso8601DurationFieldProps) {\n const field = useFieldContext<string>({ disabled: isDisabled });\n\n return (\n <Iso8601DurationField\n value={field.state.value}\n onChange={field.handleChange}\n onBlur={field.handleBlur}\n errorMessage={getFieldErrorMessage(field)}\n isDisabled={isDisabled || field.form.state.isSubmitting}\n id={field.name}\n {...props}\n />\n );\n}\n"],"names":["ANumberField","AriaNumberField","SEGMENT_LABELS","DATE_KEYS","TIME_KEYS","DurationSegment","id","value","onChange","onBlur","label","isInvalid","isDisabled","jsxs","jsx","newValue","NumberFieldInput","Iso8601DurationField","description","errorMessage","requiredIndicator","showTime","setShowTime","useState","duration","useMemo","Duration","handlePartChange","useCallback","part","partValue","updatedDuration","handleToggleTime","prev","fieldId","renderSegments","includeTime","keys","labelType","key","index","segmentValue","classNames","FormField","FieldGroup","Button","IcLeft","IcRight","TfIso8601DurationField","props","field","useFieldContext","getFieldErrorMessage"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as r,jsxs as g}from"react/jsx-runtime";import{useQuery as x}from"@tanstack/react-query";import{useId as B,useState as T}from"react";import{Select as j,Autocomplete as A}from"react-aria-components";import{Loader as E}from"./loader.js";import{Menu as K,MenuItem as L}from"./menu.js";import{PopoverTrigger as _}from"./popover.js";import{SearchField as q}from"./searchfield.js";import{getFieldErrorMessage as a}from"../utilities/form.js";import{useFieldContext as S}from"../utilities/form-context.js";import{FormField as P}from"./form.js";import{SelectTrigger as w,SelectPopover as O}from"./select.js";import"../utilities/theme.js";import"clsx";import"./icons.js";import"./list-box.js";import"./button.js";import"class-variance-authority";import"@tanstack/react-form";function I({label:t,description:n,errorMessage:e,requiredIndicator:i,searchFn:l,isDisabled:v,isInvalid:s,onBlur:y,resource:C,onChange:k,value:m,renderLabel:b,...c}){const F=B(),u=c.id||F,[d,M]=T(""),{data:h,isError:f,isFetching:p,error:N}=x({queryKey:[C,"id",d],queryFn:()=>l(d)});return r("div",{className:"group form-field","data-invalid":s?"":void 0,children:r(P,{label:t,description:n,errorMessage:e,requiredIndicator:i,htmlFor:u,children:r(j,{isInvalid:s,children:g(_,{onOpenChange:o=>{o||y?.(m)},children:[r(w,{id:u,isDisabled:v,className:"w-full",children:b(m,h)}),r(O,{placement:"bottom start",children:g(A,{inputValue:d,onInputChange:M,children:[r(q,{className:"p-2",autoFocus:!0}),p&&r("div",{className:"p-input",children:r(E,{className:"mx-auto"})}),!p&&!f&&r(K,{...c,className:"max-h-48",items:h,renderEmptyState:()=>r("div",{className:"body-sm p-2",children:"No results found."}),children:o=>r(L,{id:o.id,children:o.name},o.id)}),f&&r("div",{className:"text-destructive p-icon body-sm",children:N.message})]})})]})})})})}function Q({...t}){return r(I,{selectedKeys:[t.value],onSelectionChange:n=>t.onChange(Array.from(n).filter(e=>typeof e=="string")[0]),renderLabel:(n,e)=>e?.find(i=>i.id===n)?.name??n,selectionMode:"single",...t})}function V({...t}){return r(I,{selectedKeys:t.value,onSelectionChange:n=>t.onChange(Array.from(n).filter(e=>typeof e=="string")),selectionMode:"multiple",renderLabel:(n,e)=>n?.map(i=>e?.find(l=>l.id===i)?.name??i).join(","),...t})}function le({isDisabled:t,...n}){const e=S({disabled:t});return r(Q,{...n,isDisabled:t||e.form.state.isSubmitting,value:e.state.value,onBlur:i=>e.handleBlur(),onChange:i=>e.handleChange(i),isInvalid:!!a(e),errorMessage:a(e)})}function de({isDisabled:t,...n}){const e=S({disabled:t});return r(V,{...n,isDisabled:t||e.form.state.isSubmitting,value:e.state.value,onBlur:i=>e.handleBlur(),onChange:i=>e.handleChange(i),isInvalid:!!a(e),errorMessage:a(e)})}export{V as MultipleIdSearchInput,Q as SingleIdSearchInput,de as TfMultipleIdSearchInput,le as TfSingleIdSearchInput};
|
|
1
|
+
"use client";import{jsx as r,jsxs as g}from"react/jsx-runtime";import{useQuery as x}from"@tanstack/react-query";import{useId as B,useState as T}from"react";import{Select as j,Autocomplete as A}from"react-aria-components";import{Loader as E}from"./loader.js";import{Menu as K,MenuItem as L}from"./menu.js";import{PopoverTrigger as _}from"./popover.js";import{SearchField as q}from"./searchfield.js";import{getFieldErrorMessage as a}from"../utilities/form.js";import{useFieldContext as S}from"../utilities/form-context.js";import{FormField as P}from"./form.js";import{SelectTrigger as w,SelectPopover as O}from"./select.js";import"../utilities/theme.js";import"clsx";import"./icons.js";import"./list-box.js";import"./button.js";import"class-variance-authority";import"@tanstack/react-form";function I({label:t,description:n,errorMessage:e,requiredIndicator:i,searchFn:l,isDisabled:v,isInvalid:s,onBlur:y,resource:C,onChange:k,value:m,renderLabel:b,...c}){const F=B(),u=c.id||F,[d,M]=T(""),{data:h,isError:f,isFetching:p,error:N}=x({queryKey:[C,"id",d],queryFn:()=>l(d)});return r("div",{className:"group form-field","data-invalid":s?"":void 0,children:r(P,{label:t,description:n,errorMessage:e,requiredIndicator:i,htmlFor:u,children:r(j,{isInvalid:s,children:g(_,{onOpenChange:o=>{o||y?.(m)},children:[r(w,{id:u,isDisabled:v,className:"w-full",children:b(m,h)}),r(O,{placement:"bottom start",children:g(A,{inputValue:d,onInputChange:M,children:[r(q,{className:"p-2",autoFocus:!0}),p&&r("div",{className:"p-input",children:r(E,{className:"mx-auto"})}),!p&&!f&&r(K,{...c,className:"max-h-48",items:h,renderEmptyState:()=>r("div",{className:"body-sm p-2",children:"No results found."}),children:o=>r(L,{id:o.id,children:o.name},o.id)}),f&&r("div",{className:"text-destructive p-icon body-sm",children:N.message})]})})]})})})})}function Q({...t}){return r(I,{selectedKeys:[t.value],onSelectionChange:n=>t.onChange(Array.from(n).filter(e=>typeof e=="string")[0]),renderLabel:(n,e)=>e?.find(i=>i.id===n)?.name??n,selectionMode:"single",...t})}function V({...t}){return r(I,{selectedKeys:t.value,onSelectionChange:n=>t.onChange(Array.from(n).filter(e=>typeof e=="string")),selectionMode:"multiple",renderLabel:(n,e)=>n?.map(i=>e?.find(l=>l.id===i)?.name??i).join(","),...t})}function le({isDisabled:t,...n}){const e=S({disabled:t});return r(Q,{...n,isDisabled:t||e.form.state.isSubmitting,value:e.state.value,onBlur:i=>e.handleBlur(),onChange:i=>e.handleChange(i),isInvalid:!!a(e),errorMessage:a(e)})}function de({isDisabled:t,...n}){const e=S({disabled:t});return r(V,{...n,isDisabled:t||e.form.state.isSubmitting,value:e.state.value,onBlur:i=>e.handleBlur(),onChange:i=>e.handleChange(i),isInvalid:!!a(e),errorMessage:a(e)})}export{V as MultipleIdSearchInput,Q as SingleIdSearchInput,de as TfMultipleIdSearchInput,le as TfSingleIdSearchInput};
|
|
2
2
|
//# sourceMappingURL=id-search.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"id-search.js","sources":["../../lib/components/id-search.tsx"],"sourcesContent":["import { useQuery } from '@tanstack/react-query';\nimport { useId, useState } from 'react';\nimport { Select as AriaSelect, Autocomplete } from 'react-aria-components';\n\nimport { Loader } from '../components/loader';\nimport { Menu, MenuItem } from '../components/menu';\nimport { PopoverTrigger } from '../components/popover';\nimport { SearchField } from '../components/searchfield';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport type { CtxResourceName } from '../utilities/resources';\nimport { FormField, type FormFieldProps } from './form';\nimport { SelectPopover, SelectTrigger } from './select';\n\n/**\n * Minimal resource shape used by the ID search inputs.\n * Only `id` and `name` are required.\n *\n * @example\n * const user: BaseSearchableResource = { id: 'u_123', name: 'Nabeel Farooq' };\n */\ntype BaseSearchableResource = {\n /** Unique identifier used as the input value. */\n id: string;\n /** Human-readable label shown to users. */\n name: string;\n};\n\n/**\n * - Generic, accessible ID-search building block.\n * - Search (powered by react-query)\n * - Renders an accessible Autocomplete + Menu listbox\n * - Exposes a controlled `value`/`onChange` contract so callers (and wrappers) can manage state\n * - Clear separation of concerns: this component only handles UI search/display; callers provide `searchFn`\n *\n * @template T - resource type extending `BaseSearchableResource` (must have `id` and `name`)\n * @template V - controlled value type (e.g. `string` for single-select or `string[]` for multi-select)\n *\n * @param props - props object (see inline property JSDoc for the most important fields)\n *\n * @remarks\n * - `searchFn` should return `Promise<T[] | undefined>`. Returning `undefined` indicates no results / handled error.\n * - When the popover closes, `onBlur` (if provided) is called with the current `value`.\n * - `renderLabel` must convert `value` to a readable string for the control button.\n *\n * @example\n * <BaseIdSearchInput\n * label=\"Owner\"\n * searchFn={q => api.searchUsers(q)}\n * value={ownerId}\n * onChange={setOwnerId}\n * renderLabel={(v, data) => data?.find(d => d.id === v)?.name ?? v}\n * />\n *\n * @testing\n * - Mock `searchFn` in unit tests; assert keyboard navigation, open/close behavior, and `onBlur` call on popover close.\n */\nfunction BaseIdSearchInput<T extends BaseSearchableResource, V>({\n label,\n description,\n errorMessage,\n requiredIndicator,\n searchFn,\n isDisabled,\n isInvalid,\n onBlur,\n resource,\n onChange,\n value,\n renderLabel,\n ...props\n}: FormFieldProps & {\n resource: CtxResourceName;\n /** Function that returns matching resources for the current query. */\n searchFn: (q: string) => Promise<T[] | undefined>;\n /** Disable interactions. */\n isDisabled?: boolean;\n /** Whether the field is invalid. */\n isInvalid?: boolean;\n /** Key used to access an alternate display accessor on item (kept for compatibility). */\n accessor: keyof BaseSearchableResource;\n /** Controlled value. */\n value: V;\n /** Called when popover closes or the field blurs with the current value. */\n onBlur?: (v: V) => void;\n /** Controlled change handler. */\n onChange: (v: V) => void;\n /** Render a human-readable label for the current value using the latest data. */\n renderLabel: (v: V, data: T[] | undefined) => string;\n} & Omit<React.ComponentProps<typeof Menu>, 'items' | 'className'>) {\n const generatedId = useId();\n const fieldId = props.id || generatedId;\n\n const [search, _setSearch] = useState('');\n const { data, isError, isFetching, error } = useQuery({\n queryKey: [resource, 'id', search],\n queryFn: () => searchFn(search),\n });\n\n return (\n <div className=\"group form-field\" data-invalid={isInvalid ? '' : undefined}>\n <FormField {...{ label, description, errorMessage, requiredIndicator, htmlFor: fieldId }}>\n <AriaSelect isInvalid={isInvalid}>\n <PopoverTrigger\n onOpenChange={o => {\n if (!o) {\n // searchInputRef.current?.focus();\n onBlur?.(value);\n }\n }}\n >\n <SelectTrigger id={fieldId} isDisabled={isDisabled} className={'w-full'}>\n {renderLabel(value, data)}\n </SelectTrigger>\n <SelectPopover placement=\"bottom start\">\n <Autocomplete inputValue={search} onInputChange={_setSearch}>\n <SearchField className={'p-2'} autoFocus />\n {isFetching && (\n <div className=\"p-input\">\n <Loader className=\"mx-auto\" />\n </div>\n )}\n {!isFetching && !isError && (\n <Menu\n {...props}\n className={'max-h-48'}\n items={data}\n renderEmptyState={() => <div className=\"body-sm p-2\">No results found.</div>}\n >\n {item => (\n <MenuItem key={item['id']} id={item['id']}>\n {item.name}\n </MenuItem>\n )}\n </Menu>\n )}\n {isError && <div className=\"text-destructive p-icon body-sm\">{error.message}</div>}\n </Autocomplete>\n </SelectPopover>\n </PopoverTrigger>\n </AriaSelect>\n </FormField>\n </div>\n );\n}\n\n/**\n * Single-selection ID search input.\n *\n * Thin, typed wrapper around `BaseIdSearchInput` specialized for the very common single-ID case.\n * Adapts the internal selection events into `onChange(id?: string)` and renders the selected label.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <SingleIdSearchInput\n * label=\"Reporter\"\n * value={reporterId}\n * onChange={setReporterId}\n * searchFn={q => api.searchUsers(q)}\n * />\n *\n */\nexport function SingleIdSearchInput<T extends BaseSearchableResource>({\n ...props\n}: Omit<\n React.ComponentProps<typeof BaseIdSearchInput<T, string>>,\n 'onSelectionChange' | 'selectionMode' | 'selectedKeys' | 'renderLabel'\n>) {\n return (\n <BaseIdSearchInput\n selectedKeys={[props.value]}\n onSelectionChange={e => props.onChange(Array.from(e).filter(v => typeof v === 'string')[0])}\n renderLabel={(v, d) => d?.find(di => di.id === v)?.name ?? v}\n selectionMode=\"single\"\n {...props}\n />\n );\n}\n\n/**\n * Multi-selection ID search input.\n *\n * Thin wrapper around `BaseIdSearchInput` for the multiple-ID (`string[]`) case.\n * Adapts internal selection events into `onChange(ids: string[])`.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <MultipleIdSearchInput\n * label=\"Reviewers\"\n * value={reviewerIds}\n * onChange={setReviewerIds}\n * searchFn={q => api.searchUsers(q)}\n * />\n *\n * @remarks\n * - The `renderLabel` joins selected item names with commas for compact display.\n */\nexport function MultipleIdSearchInput<T extends BaseSearchableResource>({\n ...props\n}: Omit<\n React.ComponentProps<typeof BaseIdSearchInput<T, string[]>>,\n 'renderLabel' | 'onSelectionChange' | 'selectionMode' | 'selectedKeys'\n>) {\n return (\n <BaseIdSearchInput\n selectedKeys={props.value}\n onSelectionChange={e => props.onChange(Array.from(e).filter(v => typeof v === 'string'))}\n selectionMode=\"multiple\"\n renderLabel={(v, d) => v?.map(vi => d?.find(di => di.id === vi)?.name ?? vi).join(',')}\n {...props}\n />\n );\n}\n\n/**\n * Form-integrated single-select ID input (field wrapper).\n *\n * Integrates `SingleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfSingleIdSearchInput name=\"ownerId\" label=\"Owner\" searchFn={q => api.searchUsers(q)} />\n \n */\nexport function TfSingleIdSearchInput({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof SingleIdSearchInput>, 'value' | 'onChange' | 'onBlur'>) {\n const field = useFieldContext<string>({ disabled: isDisabled });\n return (\n <SingleIdSearchInput\n {...props}\n isDisabled={isDisabled || field.form.state.isSubmitting}\n value={field.state.value}\n onBlur={_ => field.handleBlur()}\n onChange={e => field.handleChange(e)}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n />\n );\n}\n\n/**\n * Form-integrated multi-select ID input (field wrapper).\n *\n * Integrates `MultipleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfMultipleIdSearchInput name=\"reviewerIds\" label=\"Reviewers\" searchFn={q => api.searchUsers(q)} />\n *\n */\nexport function TfMultipleIdSearchInput({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof MultipleIdSearchInput>, 'value' | 'onChange'>) {\n const field = useFieldContext<string[]>({ disabled: isDisabled });\n return (\n <MultipleIdSearchInput\n {...props}\n isDisabled={isDisabled || field.form.state.isSubmitting}\n value={field.state.value}\n onBlur={_ => field.handleBlur()}\n onChange={e => field.handleChange(e)}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n />\n );\n}\n"],"names":["BaseIdSearchInput","label","description","errorMessage","requiredIndicator","searchFn","isDisabled","isInvalid","onBlur","resource","onChange","value","renderLabel","props","generatedId","useId","fieldId","search","_setSearch","useState","data","isError","isFetching","error","useQuery","jsx","FormField","AriaSelect","jsxs","PopoverTrigger","SelectTrigger","SelectPopover","Autocomplete","SearchField","Loader","Menu","item","MenuItem","SingleIdSearchInput","e","v","d","di","MultipleIdSearchInput","vi","TfSingleIdSearchInput","field","useFieldContext","_","getFieldErrorMessage","TfMultipleIdSearchInput"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"id-search.js","sources":["../../lib/components/id-search.tsx"],"sourcesContent":["'use client';\nimport { useQuery } from '@tanstack/react-query';\nimport { useId, useState } from 'react';\nimport { Select as AriaSelect, Autocomplete } from 'react-aria-components';\n\nimport { Loader } from '../components/loader';\nimport { Menu, MenuItem } from '../components/menu';\nimport { PopoverTrigger } from '../components/popover';\nimport { SearchField } from '../components/searchfield';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport type { CtxResourceName } from '../utilities/resources';\nimport { FormField, type FormFieldProps } from './form';\nimport { SelectPopover, SelectTrigger } from './select';\n\n/**\n * Minimal resource shape used by the ID search inputs.\n * Only `id` and `name` are required.\n *\n * @example\n * const user: BaseSearchableResource = { id: 'u_123', name: 'Nabeel Farooq' };\n */\ntype BaseSearchableResource = {\n /** Unique identifier used as the input value. */\n id: string;\n /** Human-readable label shown to users. */\n name: string;\n};\n\n/**\n * - Generic, accessible ID-search building block.\n * - Search (powered by react-query)\n * - Renders an accessible Autocomplete + Menu listbox\n * - Exposes a controlled `value`/`onChange` contract so callers (and wrappers) can manage state\n * - Clear separation of concerns: this component only handles UI search/display; callers provide `searchFn`\n *\n * @template T - resource type extending `BaseSearchableResource` (must have `id` and `name`)\n * @template V - controlled value type (e.g. `string` for single-select or `string[]` for multi-select)\n *\n * @param props - props object (see inline property JSDoc for the most important fields)\n *\n * @remarks\n * - `searchFn` should return `Promise<T[] | undefined>`. Returning `undefined` indicates no results / handled error.\n * - When the popover closes, `onBlur` (if provided) is called with the current `value`.\n * - `renderLabel` must convert `value` to a readable string for the control button.\n *\n * @example\n * <BaseIdSearchInput\n * label=\"Owner\"\n * searchFn={q => api.searchUsers(q)}\n * value={ownerId}\n * onChange={setOwnerId}\n * renderLabel={(v, data) => data?.find(d => d.id === v)?.name ?? v}\n * />\n *\n * @testing\n * - Mock `searchFn` in unit tests; assert keyboard navigation, open/close behavior, and `onBlur` call on popover close.\n */\nfunction BaseIdSearchInput<T extends BaseSearchableResource, V>({\n label,\n description,\n errorMessage,\n requiredIndicator,\n searchFn,\n isDisabled,\n isInvalid,\n onBlur,\n resource,\n onChange,\n value,\n renderLabel,\n ...props\n}: FormFieldProps & {\n resource: CtxResourceName;\n /** Function that returns matching resources for the current query. */\n searchFn: (q: string) => Promise<T[] | undefined>;\n /** Disable interactions. */\n isDisabled?: boolean;\n /** Whether the field is invalid. */\n isInvalid?: boolean;\n /** Key used to access an alternate display accessor on item (kept for compatibility). */\n accessor: keyof BaseSearchableResource;\n /** Controlled value. */\n value: V;\n /** Called when popover closes or the field blurs with the current value. */\n onBlur?: (v: V) => void;\n /** Controlled change handler. */\n onChange: (v: V) => void;\n /** Render a human-readable label for the current value using the latest data. */\n renderLabel: (v: V, data: T[] | undefined) => string;\n} & Omit<React.ComponentProps<typeof Menu>, 'items' | 'className'>) {\n const generatedId = useId();\n const fieldId = props.id || generatedId;\n\n const [search, _setSearch] = useState('');\n const { data, isError, isFetching, error } = useQuery({\n queryKey: [resource, 'id', search],\n queryFn: () => searchFn(search),\n });\n\n return (\n <div className=\"group form-field\" data-invalid={isInvalid ? '' : undefined}>\n <FormField {...{ label, description, errorMessage, requiredIndicator, htmlFor: fieldId }}>\n <AriaSelect isInvalid={isInvalid}>\n <PopoverTrigger\n onOpenChange={o => {\n if (!o) {\n // searchInputRef.current?.focus();\n onBlur?.(value);\n }\n }}\n >\n <SelectTrigger id={fieldId} isDisabled={isDisabled} className={'w-full'}>\n {renderLabel(value, data)}\n </SelectTrigger>\n <SelectPopover placement=\"bottom start\">\n <Autocomplete inputValue={search} onInputChange={_setSearch}>\n <SearchField className={'p-2'} autoFocus />\n {isFetching && (\n <div className=\"p-input\">\n <Loader className=\"mx-auto\" />\n </div>\n )}\n {!isFetching && !isError && (\n <Menu\n {...props}\n className={'max-h-48'}\n items={data}\n renderEmptyState={() => <div className=\"body-sm p-2\">No results found.</div>}\n >\n {item => (\n <MenuItem key={item['id']} id={item['id']}>\n {item.name}\n </MenuItem>\n )}\n </Menu>\n )}\n {isError && <div className=\"text-destructive p-icon body-sm\">{error.message}</div>}\n </Autocomplete>\n </SelectPopover>\n </PopoverTrigger>\n </AriaSelect>\n </FormField>\n </div>\n );\n}\n\n/**\n * Single-selection ID search input.\n *\n * Thin, typed wrapper around `BaseIdSearchInput` specialized for the very common single-ID case.\n * Adapts the internal selection events into `onChange(id?: string)` and renders the selected label.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <SingleIdSearchInput\n * label=\"Reporter\"\n * value={reporterId}\n * onChange={setReporterId}\n * searchFn={q => api.searchUsers(q)}\n * />\n *\n */\nexport function SingleIdSearchInput<T extends BaseSearchableResource>({\n ...props\n}: Omit<\n React.ComponentProps<typeof BaseIdSearchInput<T, string>>,\n 'onSelectionChange' | 'selectionMode' | 'selectedKeys' | 'renderLabel'\n>) {\n return (\n <BaseIdSearchInput\n selectedKeys={[props.value]}\n onSelectionChange={e => props.onChange(Array.from(e).filter(v => typeof v === 'string')[0])}\n renderLabel={(v, d) => d?.find(di => di.id === v)?.name ?? v}\n selectionMode=\"single\"\n {...props}\n />\n );\n}\n\n/**\n * Multi-selection ID search input.\n *\n * Thin wrapper around `BaseIdSearchInput` for the multiple-ID (`string[]`) case.\n * Adapts internal selection events into `onChange(ids: string[])`.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <MultipleIdSearchInput\n * label=\"Reviewers\"\n * value={reviewerIds}\n * onChange={setReviewerIds}\n * searchFn={q => api.searchUsers(q)}\n * />\n *\n * @remarks\n * - The `renderLabel` joins selected item names with commas for compact display.\n */\nexport function MultipleIdSearchInput<T extends BaseSearchableResource>({\n ...props\n}: Omit<\n React.ComponentProps<typeof BaseIdSearchInput<T, string[]>>,\n 'renderLabel' | 'onSelectionChange' | 'selectionMode' | 'selectedKeys'\n>) {\n return (\n <BaseIdSearchInput\n selectedKeys={props.value}\n onSelectionChange={e => props.onChange(Array.from(e).filter(v => typeof v === 'string'))}\n selectionMode=\"multiple\"\n renderLabel={(v, d) => v?.map(vi => d?.find(di => di.id === vi)?.name ?? vi).join(',')}\n {...props}\n />\n );\n}\n\n/**\n * Form-integrated single-select ID input (field wrapper).\n *\n * Integrates `SingleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfSingleIdSearchInput name=\"ownerId\" label=\"Owner\" searchFn={q => api.searchUsers(q)} />\n \n */\nexport function TfSingleIdSearchInput({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof SingleIdSearchInput>, 'value' | 'onChange' | 'onBlur'>) {\n const field = useFieldContext<string>({ disabled: isDisabled });\n return (\n <SingleIdSearchInput\n {...props}\n isDisabled={isDisabled || field.form.state.isSubmitting}\n value={field.state.value}\n onBlur={_ => field.handleBlur()}\n onChange={e => field.handleChange(e)}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n />\n );\n}\n\n/**\n * Form-integrated multi-select ID input (field wrapper).\n *\n * Integrates `MultipleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfMultipleIdSearchInput name=\"reviewerIds\" label=\"Reviewers\" searchFn={q => api.searchUsers(q)} />\n *\n */\nexport function TfMultipleIdSearchInput({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof MultipleIdSearchInput>, 'value' | 'onChange'>) {\n const field = useFieldContext<string[]>({ disabled: isDisabled });\n return (\n <MultipleIdSearchInput\n {...props}\n isDisabled={isDisabled || field.form.state.isSubmitting}\n value={field.state.value}\n onBlur={_ => field.handleBlur()}\n onChange={e => field.handleChange(e)}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n />\n );\n}\n"],"names":["BaseIdSearchInput","label","description","errorMessage","requiredIndicator","searchFn","isDisabled","isInvalid","onBlur","resource","onChange","value","renderLabel","props","generatedId","useId","fieldId","search","_setSearch","useState","data","isError","isFetching","error","useQuery","jsx","FormField","AriaSelect","jsxs","PopoverTrigger","SelectTrigger","SelectPopover","Autocomplete","SearchField","Loader","Menu","item","MenuItem","SingleIdSearchInput","e","v","d","di","MultipleIdSearchInput","vi","TfSingleIdSearchInput","field","useFieldContext","_","getFieldErrorMessage","TfMultipleIdSearchInput"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as i}from"react/jsx-runtime";import{useId as c}from"react";import{EasyMenu as f,MenuItem as p}from"./menu.js";import{getFieldErrorMessage as g}from"../utilities/form.js";import{useFieldContext as h}from"../utilities/form-context.js";import{FormField as b}from"./form.js";import"react-aria-components";import"../utilities/theme.js";import"clsx";import"./icons.js";import"./list-box.js";import"./select.js";import"./button.js";import"class-variance-authority";import"./loader.js";import"./popover.js";import"@tanstack/react-form";function M({items:
|
|
1
|
+
"use client";import{jsx as i}from"react/jsx-runtime";import{useId as c}from"react";import{EasyMenu as f,MenuItem as p}from"./menu.js";import{getFieldErrorMessage as g}from"../utilities/form.js";import{useFieldContext as h}from"../utilities/form-context.js";import{FormField as b}from"./form.js";import"react-aria-components";import"../utilities/theme.js";import"clsx";import"./icons.js";import"./list-box.js";import"./select.js";import"./button.js";import"class-variance-authority";import"./loader.js";import"./popover.js";import"@tanstack/react-form";function M({items:t,value:e,onChange:o,label:d,errorMessage:s,description:m,requiredIndicator:a,...l}){const u=c(),n=l.id||u;return i("div",{className:"group form-field",children:i(b,{label:d,description:m,errorMessage:s,requiredIndicator:a,htmlFor:n,children:i(f,{id:n,isNonModal:!1,selectionMode:"multiple",selectedKeys:e,onSelectionChange:r=>{typeof r!="string"&&o(r)},items:t,label:l.triggerLabel??i("span",{className:"tabular-nums",children:e.size}),...l,children:r=>i(p,{id:r.id,isDisabled:r?.disabled,children:r.label},r.id)})})})}function T({...t}){const e=h({disabled:t.isDisabled});return i(M,{value:new Set(e.state.value),onChange:o=>e.setValue(Array.from(o)),onClose:e.handleBlur,errorMessage:g(e),...t})}export{M as MultiSelect,T as TfMultiSelect};
|
|
2
2
|
//# sourceMappingURL=multi-select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multi-select.js","sources":["../../lib/components/multi-select.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"multi-select.js","sources":["../../lib/components/multi-select.tsx"],"sourcesContent":["'use client';\nimport React, { useId } from 'react';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport type { SelectOption } from '../components/select-options';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { FormField, type FormFieldProps } from './form';\n\ninterface MultipleSelectionProps {\n value: Set<string | number>;\n onChange: (v: Set<string | number>) => void;\n buttonLabel?: React.ReactNode;\n items: SelectOption[];\n}\n\nexport interface MultiSelectProps\n extends MultipleSelectionProps,\n FormFieldProps,\n Omit<React.ComponentProps<typeof EasyMenu>, 'label' | 'items'> {\n triggerLabel?: React.ReactNode;\n}\n\nexport function MultiSelect({\n items,\n value,\n onChange: setValue,\n label,\n errorMessage,\n description,\n requiredIndicator,\n ...props\n}: MultiSelectProps) {\n const generatedId = useId();\n const fieldId = props.id || generatedId;\n\n return (\n <div className=\"group form-field\">\n <FormField {...{ label, description, errorMessage, requiredIndicator, htmlFor: fieldId }}>\n <EasyMenu\n id={fieldId}\n isNonModal={false}\n selectionMode=\"multiple\"\n selectedKeys={value}\n onSelectionChange={v => {\n if (typeof v === 'string') return;\n setValue(v);\n }}\n items={items}\n label={props.triggerLabel ?? <span className=\"tabular-nums\">{value.size}</span>}\n {...props}\n >\n {item => (\n <MenuItem id={item.id} key={item.id} isDisabled={item?.disabled}>\n {item.label}\n </MenuItem>\n )}\n </EasyMenu>\n </FormField>\n </div>\n );\n}\n\nexport interface TfMultiSelectProps extends Omit<MultiSelectProps, 'value' | 'onChange'> {}\nexport function TfMultiSelect({ ...props }: TfMultiSelectProps) {\n const field = useFieldContext<string[]>({\n disabled: props.isDisabled,\n });\n\n return (\n <MultiSelect\n value={new Set(field.state.value)}\n // @ts-expect-error\n onChange={e => field.setValue(Array.from(e))}\n onClose={field.handleBlur}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n />\n );\n}\n"],"names":["MultiSelect","items","value","setValue","label","errorMessage","description","requiredIndicator","props","generatedId","useId","fieldId","jsx","FormField","EasyMenu","v","item","MenuItem","TfMultiSelect","field","useFieldContext","e","getFieldErrorMessage"],"mappings":"wiBAsBO,SAASA,EAAY,CACxB,MAAAC,EACA,MAAAC,EACA,SAAUC,EACV,MAAAC,EACA,aAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,GAAGC,CACP,EAAqB,CACjB,MAAMC,EAAcC,EAAA,EACdC,EAAUH,EAAM,IAAMC,EAE5B,OACIG,EAAC,MAAA,CAAI,UAAU,mBACX,WAACC,EAAA,CAAgB,MAAAT,EAAO,YAAAE,EAAa,aAAAD,EAAc,kBAAAE,EAAmB,QAASI,EAC3E,SAAAC,EAACE,EAAA,CACG,GAAIH,EACJ,WAAY,GACZ,cAAc,WACd,aAAcT,EACd,kBAAmBa,GAAK,CAChB,OAAOA,GAAM,UACjBZ,EAASY,CAAC,CACd,EACA,MAAAd,EACA,MAAOO,EAAM,cAAgBI,EAAC,QAAK,UAAU,eAAgB,WAAM,IAAA,CAAK,EACvE,GAAGJ,EAEH,SAAAQ,GACGJ,EAACK,EAAA,CAAS,GAAID,EAAK,GAAkB,WAAYA,GAAM,SAClD,SAAAA,EAAK,KAAA,EADkBA,EAAK,EAEjC,CAAA,CAAA,EAGZ,CAAA,CACJ,CAER,CAGO,SAASE,EAAc,CAAE,GAAGV,GAA6B,CAC5D,MAAMW,EAAQC,EAA0B,CACpC,SAAUZ,EAAM,UAAA,CACnB,EAED,OACII,EAACZ,EAAA,CACG,MAAO,IAAI,IAAImB,EAAM,MAAM,KAAK,EAEhC,SAAUE,GAAKF,EAAM,SAAS,MAAM,KAAKE,CAAC,CAAC,EAC3C,QAASF,EAAM,WACf,aAAcG,EAAqBH,CAAK,EACvC,GAAGX,CAAA,CAAA,CAGhB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as r,jsxs as
|
|
1
|
+
"use client";import{jsx as r,jsxs as m}from"react/jsx-runtime";import{NumberField as F,composeRenderProps as u,Input as v}from"react-aria-components";import{Button as x}from"./button.js";import{getFieldErrorMessage as d}from"../utilities/form.js";import{useFieldContext as p}from"../utilities/form-context.js";import{classNames as a}from"../utilities/theme.js";import{FormField as f,FieldGroup as h}from"./form.js";import{IcUp as C,IcDown as w}from"./icons.js";import"class-variance-authority";import"./loader.js";import"clsx";import"react";import"@tanstack/react-form";const b=F;function N({className:t,...n}){return r(v,{className:u(t,e=>a("w-fit min-w-0 flex-1 border-r border-transparent bg-elevation-2 outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",e)),...n})}function D({className:t,...n}){return m("div",{className:a("absolute right-0 flex h-full flex-col border-l",t),...n,children:[r(c,{slot:"increment",children:r(C,{"aria-hidden":!0,className:"size-icon"})}),r("div",{className:"border-b"}),r(c,{slot:"decrement",children:r(w,{"aria-hidden":!0,className:"size-icon"})})]})}function c({className:t,...n}){return r(x,{className:u(t,e=>a("w-auto grow h-3 px-0.5 text-muted-foreground",e)),variant:"ghost",size:"none",...n})}function I({label:t,description:n,errorMessage:e,requiredIndicator:i,className:o,...l}){return r(b,{className:u(o,s=>a("group form-field",s)),...l,children:r(f,{label:t,description:n,errorMessage:e,requiredIndicator:i,children:m(h,{children:[r(N,{className:"pr-input"}),r(D,{})]})})})}function O({isDisabled:t,...n}){const e=p({disabled:t});return r(I,{isInvalid:!!d(e),isDisabled:t||e.form.state.isSubmitting,value:e.state.value,id:e.name,onChange:e.handleChange,onBlur:e.handleBlur,errorMessage:d(e),...n})}function S({label:t,description:n,errorMessage:e,requiredIndicator:i,className:o,...l}){return r(b,{className:u(o,s=>a("group form-field",s)),...l,children:r(f,{label:t,description:n,errorMessage:e,requiredIndicator:i,children:m(h,{children:[r(N,{className:"pr-input"}),r("div",{className:"absolute right-1 select-none text-muted",children:"days"})]})})})}function U({isDisabled:t,...n}){const e=p({disabled:t}),i=86400,o=e.state.value!=null?e.state.value/i:void 0,l=s=>{const g=s*i;e.handleChange(g)};return r(S,{isInvalid:!!d(e),isDisabled:t||e.form.state.isSubmitting,value:o,id:e.name,onChange:l,onBlur:e.handleBlur,errorMessage:d(e),...n})}export{S as DaysField,I as NumberField,N as NumberFieldInput,U as TfDaysField,O as TfNumberField};
|
|
2
2
|
//# sourceMappingURL=numberfield.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"numberfield.js","sources":["../../lib/components/numberfield.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"numberfield.js","sources":["../../lib/components/numberfield.tsx"],"sourcesContent":["'use client';\nimport {\n ButtonProps as AriaButtonProps,\n Input as AriaInput,\n InputProps as AriaInputProps,\n NumberField as AriaNumberField,\n NumberFieldProps as AriaNumberFieldProps,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FieldGroup, FormField, type FormFieldProps } from './form';\nimport { IcDown, IcUp } from './icons';\n\nconst ANumberField = AriaNumberField;\n\nexport function NumberFieldInput({ className, ...props }: AriaInputProps) {\n return (\n <AriaInput\n className={composeRenderProps(className, className =>\n classNames(\n 'w-fit min-w-0 flex-1 border-r border-transparent bg-elevation-2 outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden',\n className\n )\n )}\n {...props}\n />\n );\n}\n\nfunction NumberFieldSteppers({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div className={classNames('absolute right-0 flex h-full flex-col border-l', className)} {...props}>\n <NumberFieldStepper slot=\"increment\">\n <IcUp aria-hidden className=\"size-icon\" />\n </NumberFieldStepper>\n <div className=\"border-b\" />\n <NumberFieldStepper slot=\"decrement\">\n <IcDown aria-hidden className=\"size-icon\" />\n </NumberFieldStepper>\n </div>\n );\n}\n\nfunction NumberFieldStepper({ className, ...props }: AriaButtonProps) {\n return (\n <Button\n className={composeRenderProps(className, className =>\n classNames('w-auto grow h-3 px-0.5 text-muted-foreground', className)\n )}\n variant={'ghost'}\n size={'none'}\n {...props}\n />\n );\n}\n\nexport type NumberFieldProps = AriaNumberFieldProps & FormFieldProps;\nexport function NumberField({\n label,\n description,\n errorMessage,\n requiredIndicator,\n className,\n ...props\n}: NumberFieldProps) {\n return (\n <ANumberField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n <FieldGroup>\n <NumberFieldInput className={'pr-input'} />\n <NumberFieldSteppers />\n </FieldGroup>\n </FormField>\n </ANumberField>\n );\n}\n\nexport function TfNumberField({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof NumberField>, 'value' | 'id' | 'onChange' | 'onBlur'>) {\n const field = useFieldContext<number>({ disabled: isDisabled });\n\n return (\n <NumberField\n isInvalid={!!getFieldErrorMessage(field)}\n isDisabled={isDisabled || field.form.state.isSubmitting}\n value={field.state.value}\n id={field.name}\n onChange={field.handleChange}\n onBlur={field.handleBlur}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n />\n );\n}\n\nexport function DaysField({\n label,\n description,\n errorMessage,\n requiredIndicator,\n className,\n ...props\n}: NumberFieldProps) {\n return (\n <ANumberField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n <FieldGroup>\n <NumberFieldInput className={'pr-input'} />\n <div className=\"absolute right-1 select-none text-muted\">days</div>\n </FieldGroup>\n </FormField>\n </ANumberField>\n );\n}\n\nexport function TfDaysField({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof DaysField>, 'value' | 'id' | 'onChange' | 'onBlur'>) {\n const field = useFieldContext<number>({ disabled: isDisabled });\n\n const SECONDS_PER_DAY = 86400; // 24 * 60 * 60\n\n // Convert seconds to days for display\n const daysValue = field.state.value != null ? field.state.value / SECONDS_PER_DAY : undefined;\n\n // Convert days to seconds when value changes\n const handleDaysChange = (days: number) => {\n const seconds = days * SECONDS_PER_DAY;\n field.handleChange(seconds);\n };\n\n return (\n <DaysField\n isInvalid={!!getFieldErrorMessage(field)}\n isDisabled={isDisabled || field.form.state.isSubmitting}\n value={daysValue}\n id={field.name}\n onChange={handleDaysChange}\n onBlur={field.handleBlur}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n />\n );\n}\n"],"names":["ANumberField","AriaNumberField","NumberFieldInput","className","props","jsx","AriaInput","composeRenderProps","classNames","NumberFieldSteppers","jsxs","NumberFieldStepper","IcUp","IcDown","Button","NumberField","label","description","errorMessage","requiredIndicator","FormField","FieldGroup","TfNumberField","isDisabled","field","useFieldContext","getFieldErrorMessage","DaysField","TfDaysField","SECONDS_PER_DAY","daysValue","handleDaysChange","days","seconds"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as i}from"react/jsx-runtime";import{TextField as c,composeRenderProps as o,TextArea as x,Input as g}from"react-aria-components";import{getFieldErrorMessage as m}from"../utilities/form.js";import{useFieldContext as F}from"../utilities/form-context.js";import{classNames as n}from"../utilities/theme.js";import{FormField as T,fieldGroupVariants as s}from"./form.js";import"@tanstack/react-form";import"react";import"clsx";import"class-variance-authority";import"./icons.js";const h=c;function b({className:r,...t}){return i(g,{className:o(r,e=>n(s(),"file:border-0 file:bg-transparent file:body-sm file:font-medium","disabled-muted","focus-ring",e)),...t})}function N({className:r,...t}){return i(x,{className:o(r,e=>n(s(),"h-full min-h-32",e)),...t})}function A({label:r,description:t,errorMessage:e,textArea:l,className:d,inputClassName:a,requiredIndicator:f,...u}){return i(h,{className:o(d,p=>n("group form-field",p)),...u,children:i(T,{label:r,description:t,errorMessage:e,requiredIndicator:f,children:l?i(N,{className:a}):i(b,{className:a})})})}function R({isDisabled:r,...t}){const e=F({disabled:r});return i(A,{isDisabled:r||e.form.state.isSubmitting,value:e.state.value,id:e.name,name:e.name,onBlur:e.handleBlur,onChange:e.handleChange,isInvalid:!!m(e),errorMessage:m(e),...t})}export{A as TextField,R as TfTextField};
|
|
1
|
+
"use client";import{jsx as i}from"react/jsx-runtime";import{TextField as c,composeRenderProps as o,TextArea as x,Input as g}from"react-aria-components";import{getFieldErrorMessage as m}from"../utilities/form.js";import{useFieldContext as F}from"../utilities/form-context.js";import{classNames as n}from"../utilities/theme.js";import{FormField as T,fieldGroupVariants as s}from"./form.js";import"@tanstack/react-form";import"react";import"clsx";import"class-variance-authority";import"./icons.js";const h=c;function b({className:r,...t}){return i(g,{className:o(r,e=>n(s(),"file:border-0 file:bg-transparent file:body-sm file:font-medium","disabled-muted","focus-ring",e)),...t})}function N({className:r,...t}){return i(x,{className:o(r,e=>n(s(),"h-full min-h-32",e)),...t})}function A({label:r,description:t,errorMessage:e,textArea:l,className:d,inputClassName:a,requiredIndicator:f,...u}){return i(h,{className:o(d,p=>n("group form-field",p)),...u,children:i(T,{label:r,description:t,errorMessage:e,requiredIndicator:f,children:l?i(N,{className:a}):i(b,{className:a})})})}function R({isDisabled:r,...t}){const e=F({disabled:r});return i(A,{isDisabled:r||e.form.state.isSubmitting,value:e.state.value,id:e.name,name:e.name,onBlur:e.handleBlur,onChange:e.handleChange,isInvalid:!!m(e),errorMessage:m(e),...t})}export{A as TextField,R as TfTextField};
|
|
2
2
|
//# sourceMappingURL=textfield.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textfield.js","sources":["../../lib/components/textfield.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"textfield.js","sources":["../../lib/components/textfield.tsx"],"sourcesContent":["'use client';\nimport {\n Input as AriaInput,\n InputProps as AriaInputProps,\n TextArea as AriaTextArea,\n TextAreaProps as AriaTextAreaProps,\n TextField as AriaTextField,\n TextFieldProps as AriaTextFieldProps,\n composeRenderProps,\n} from 'react-aria-components';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { fieldGroupVariants, FormField, type FormFieldProps } from './form';\n\nconst ATextField = AriaTextField;\n\nfunction Input({ className, ...props }: AriaInputProps) {\n return (\n <AriaInput\n className={composeRenderProps(className, className =>\n classNames(\n fieldGroupVariants(),\n 'file:border-0 file:bg-transparent file:body-sm file:font-medium',\n /* Disabled */\n 'disabled-muted',\n /* Focused */\n 'focus-ring',\n className\n )\n )}\n {...props}\n />\n );\n}\n\nfunction TextArea({ className, ...props }: AriaTextAreaProps) {\n return (\n <AriaTextArea\n className={composeRenderProps(className, className =>\n classNames(fieldGroupVariants(), 'h-full min-h-32', className)\n )}\n {...props}\n />\n );\n}\n\nexport interface TextFieldProps extends AriaTextFieldProps, FormFieldProps {\n textArea?: boolean;\n inputClassName?: string;\n}\n\nexport function TextField({\n label,\n description,\n errorMessage,\n textArea,\n className,\n inputClassName,\n requiredIndicator,\n ...props\n}: TextFieldProps) {\n return (\n <ATextField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n {textArea ? <TextArea className={inputClassName} /> : <Input className={inputClassName} />}\n </FormField>\n </ATextField>\n );\n}\n\nexport function TfTextField({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof TextField>, 'onBlur' | 'onChange'>) {\n const field = useFieldContext<string>({ disabled: isDisabled });\n\n return (\n <TextField\n isDisabled={isDisabled || field.form.state.isSubmitting}\n value={field.state.value}\n id={field.name}\n name={field.name}\n onBlur={field.handleBlur}\n onChange={field.handleChange}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n />\n );\n}\n"],"names":["ATextField","AriaTextField","Input","className","props","jsx","AriaInput","composeRenderProps","classNames","fieldGroupVariants","TextArea","AriaTextArea","TextField","label","description","errorMessage","textArea","inputClassName","requiredIndicator","FormField","TfTextField","isDisabled","field","useFieldContext","getFieldErrorMessage"],"mappings":"gfAeA,MAAMA,EAAaC,EAEnB,SAASC,EAAM,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CACpD,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACIC,EAAA,EACA,kEAEA,iBAEA,aACAN,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASM,EAAS,CAAE,UAAAP,EAAW,GAAGC,GAA4B,CAC1D,OACIC,EAACM,EAAA,CACG,UAAWJ,EAAmBJ,EAAWA,GACrCK,EAAWC,EAAA,EAAsB,kBAAmBN,CAAS,CAAA,EAEhE,GAAGC,CAAA,CAAA,CAGhB,CAOO,SAASQ,EAAU,CACtB,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAC,EACA,UAAAb,EACA,eAAAc,EACA,kBAAAC,EACA,GAAGd,CACP,EAAmB,CACf,OACIC,EAACL,EAAA,CACG,UAAWO,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAgB,MAAAN,EAAO,YAAAC,EAAa,aAAAC,EAAc,kBAAAG,EAC9C,WAAWb,EAACK,EAAA,CAAS,UAAWO,EAAgB,IAAMf,EAAA,CAAM,UAAWe,EAAgB,CAAA,CAC5F,CAAA,CAAA,CAGZ,CAEO,SAASG,EAAY,CACxB,WAAAC,EACA,GAAGjB,CACP,EAAwE,CACpE,MAAMkB,EAAQC,EAAwB,CAAE,SAAUF,EAAY,EAE9D,OACIhB,EAACO,EAAA,CACG,WAAYS,GAAcC,EAAM,KAAK,MAAM,aAC3C,MAAOA,EAAM,MAAM,MACnB,GAAIA,EAAM,KACV,KAAMA,EAAM,KACZ,OAAQA,EAAM,WACd,SAAUA,EAAM,aAChB,UAAW,CAAC,CAACE,EAAqBF,CAAK,EACvC,aAAcE,EAAqBF,CAAK,EACvC,GAAGlB,CAAA,CAAA,CAGhB"}
|