@trsys-tech/matrix-library 0.5.1-alpha.1 → 0.5.1-beta.1
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/combobox.es.js +1 -1
- package/dist/combobox.es.js.map +1 -1
- package/dist/components/form-multi-select/FormMultiSelect.d.ts +3 -3
- package/dist/components/form-multi-select/FormMultiSelect.d.ts.map +1 -1
- package/dist/components/multi-select/MultiSelect.d.ts +11 -7
- package/dist/components/multi-select/MultiSelect.d.ts.map +1 -1
- package/dist/desktopdatepicker.es.js +1 -1
- package/dist/desktopdatepicker.es.js.map +1 -1
- package/dist/desktopdaterangepicker.es.js +1 -1
- package/dist/desktopdaterangepicker.es.js.map +1 -1
- package/dist/desktoptimepicker.es.js +1 -1
- package/dist/desktoptimepicker.es.js.map +1 -1
- package/dist/duration.es.js +1 -1
- package/dist/duration.es.js.map +1 -1
- package/dist/formmultiselect.es.js +43 -45
- package/dist/formmultiselect.es.js.map +1 -1
- package/dist/mobiledatepicker.es.js +1 -1
- package/dist/mobiledatepicker.es.js.map +1 -1
- package/dist/mobiledaterangepicker.es.js +5 -5
- package/dist/mobiledaterangepicker.es.js.map +1 -1
- package/dist/mobiletimepicker.es.js +1 -1
- package/dist/mobiletimepicker.es.js.map +1 -1
- package/dist/multiselect.es.js +161 -163
- package/dist/multiselect.es.js.map +1 -1
- package/dist/select.es.js +8 -8
- package/dist/select.es.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/textfield.es.js +1 -1
- package/dist/textfield.es.js.map +1 -1
- package/dist/timepickercontent.es.js +3 -3
- package/dist/timepickercontent.es.js.map +1 -1
- package/package.json +1 -1
package/dist/combobox.es.js
CHANGED
|
@@ -57,7 +57,7 @@ const ae = ({
|
|
|
57
57
|
type: "button",
|
|
58
58
|
"aria-expanded": m,
|
|
59
59
|
className: v(
|
|
60
|
-
"group flex h-8 w-full items-center justify-between whitespace-nowrap overflow-hidden rounded-sm border border-input bg-transparent px-3 py-1.5 text-
|
|
60
|
+
"group flex h-8 w-full items-center justify-between whitespace-nowrap overflow-hidden rounded-sm border border-input bg-transparent px-3 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&_svg]:disabled:text-text-300",
|
|
61
61
|
x
|
|
62
62
|
),
|
|
63
63
|
"data-value": r,
|
package/dist/combobox.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.es.js","sources":["../src/components/combobox/Combobox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useEffect, useRef } from \"react\";\r\nimport { Check, ChevronDown, XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from \"../command/Command\";\r\n\r\ntype ComboboxProps<T extends string | number> = React.HTMLAttributes<HTMLButtonElement> & {\r\n /**\r\n * The options to display in the combobox.\r\n * Each option should have a label and a value.\r\n * The label is what is displayed in the combobox.\r\n * The value is what is returned when the option is selected.\r\n */\r\n options: { label: string; value: T }[];\r\n\r\n /**\r\n * The value of the combobox.\r\n */\r\n value?: T;\r\n\r\n /**\r\n * A function that is called when the value of the combobox changes.\r\n */\r\n onValueChange?: (value: T) => void;\r\n\r\n /**\r\n * Placeholder text to be displayed when no values are selected.\r\n * @default \"Select an option\"\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * The modality of the popover. When set to true, interaction with outside elements\r\n * will be disabled and only popover content will be visible to screen readers.\r\n * Optional\r\n * @default false\r\n */\r\n modalPopover?: boolean;\r\n\r\n /**\r\n * The text to display in the search input.\r\n * @default \"Search...\"\r\n */\r\n searchText?: string;\r\n\r\n /**\r\n * The text to display when no results are found.\r\n * @default \"No results found\"\r\n */\r\n noResultsText?: string;\r\n\r\n /**\r\n * Whether the popover should close when an option is selected.\r\n * @default true\r\n */\r\n closeOnSelect?: boolean;\r\n\r\n /**\r\n * Whether the combobox is loading.\r\n * @default false\r\n */\r\n loading?: boolean;\r\n\r\n /**\r\n * Whether the combobox is disabled.\r\n * @default false\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * The text to display when the combobox is loading.\r\n * @default \"Loading...\"\r\n */\r\n loadingText?: string;\r\n\r\n /**\r\n * The text to display when there are no options.\r\n * @default \"No Items\"\r\n */\r\n emptyOptionsText?: string;\r\n\r\n /**\r\n * Whether to show the search input.\r\n * @default true\r\n */\r\n showSearchInput?: boolean;\r\n\r\n /**\r\n * Whether to show the clear button.\r\n * @default false\r\n */\r\n clearable?: boolean;\r\n};\r\n\r\nconst Combobox = <T extends string | number>({\r\n onValueChange,\r\n options,\r\n value,\r\n className,\r\n clearable = false,\r\n closeOnSelect = true,\r\n loading,\r\n disabled,\r\n placeholder = \"Select an option\",\r\n searchText = \"Search...\",\r\n noResultsText = \"No results found\",\r\n loadingText = \"Loading...\",\r\n emptyOptionsText = \"No Items\",\r\n showSearchInput = true,\r\n modalPopover,\r\n ...props\r\n}: ComboboxProps<T>) => {\r\n const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n const commandRef = useRef<HTMLDivElement>(null);\r\n\r\n const [currentSelectedValue, setCurrentSelectedValue] = React.useState<T | undefined>(value);\r\n\r\n const handleInputKeyDown = React.useCallback(\r\n (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (event.key === \"Enter\") {\r\n setIsPopoverOpen(true);\r\n } else if (event.key === \"Backspace\" && !event.currentTarget.value) {\r\n setCurrentSelectedValue(currentSelectedValue);\r\n onValueChange?.(currentSelectedValue!);\r\n if (closeOnSelect) setIsPopoverOpen(false);\r\n }\r\n },\r\n [currentSelectedValue, onValueChange, closeOnSelect],\r\n );\r\n\r\n const handleSelect = React.useCallback(\r\n (currentValue: T) => {\r\n setCurrentSelectedValue(currentValue);\r\n onValueChange?.(currentValue);\r\n if (closeOnSelect) setIsPopoverOpen(false);\r\n },\r\n [onValueChange, closeOnSelect],\r\n );\r\n\r\n const handleClear = React.useCallback(\r\n (e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n onValueChange?.(undefined as unknown as T);\r\n setCurrentSelectedValue(undefined);\r\n },\r\n [onValueChange],\r\n );\r\n\r\n const handleFilter = React.useCallback((value: string, search: string, keywords: string[] = [\"\"]) => {\r\n return keywords.join(\"\").toLocaleLowerCase().includes(search.toLocaleLowerCase()) ? 1 : 0;\r\n }, []);\r\n\r\n // when search input is not shown, we need to focus on the command manually to enable keyboard navigation\r\n const handleOpenAutoFocus = React.useCallback(\r\n (e: Event) => {\r\n if (!showSearchInput) {\r\n e.preventDefault();\r\n commandRef.current?.focus();\r\n }\r\n },\r\n [showSearchInput],\r\n );\r\n\r\n useEffect(() => {\r\n setCurrentSelectedValue(value);\r\n }, [value]);\r\n\r\n const showPlaceholder = currentSelectedValue === undefined || currentSelectedValue === \"\";\r\n\r\n return (\r\n <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n variant=\"text\"\r\n role=\"combobox\"\r\n type=\"button\"\r\n aria-expanded={isPopoverOpen}\r\n className={cn(\r\n \"group flex h-8 w-full items-center justify-between whitespace-nowrap overflow-hidden rounded-sm border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&_svg]:disabled:text-text-300\",\r\n className,\r\n )}\r\n data-value={currentSelectedValue}\r\n data-placeholder={showPlaceholder ? \"\" : undefined}\r\n loading={loading}\r\n disabled={disabled}\r\n endIcon={\r\n <ChevronDown\r\n role=\"button\"\r\n aria-label=\"Expand dropdown\"\r\n className=\"!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform ms-auto\"\r\n />\r\n }\r\n {...props}\r\n >\r\n <span className=\"text-start text-ellipsis whitespace-nowrap overflow-hidden flex-1 max-w-[calc(100%-24px)]\">\r\n {!showPlaceholder ? options.find(option => option.value === currentSelectedValue)?.label : loading ? loadingText : placeholder}\r\n </span>\r\n {clearable && currentSelectedValue !== undefined && currentSelectedValue !== null ? (\r\n <span\r\n onClick={handleClear}\r\n className=\"p-0 rounded-sm text-xs font-normal transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:bg-muted disabled:text-gray-500 text-primary hover:bg-primary-50 focus:bg-transparent focus:ring active:bg-primary-50 active:text-primary-700 [&>svg]:h-4.5 [&>svg]:w-4.5\"\r\n role=\"button\"\r\n aria-label=\"Clear selection\"\r\n >\r\n <XMark />\r\n </span>\r\n ) : null}\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)} onOpenAutoFocus={handleOpenAutoFocus}>\r\n <Command\r\n className=\"w-[--radix-popper-anchor-width] focus-visible:outline-none\"\r\n filter={handleFilter}\r\n defaultValue={currentSelectedValue !== undefined && currentSelectedValue !== null ? String(currentSelectedValue) : undefined} // highlight selected value on open\r\n ref={commandRef}\r\n >\r\n {showSearchInput && <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} />}\r\n <CommandList>\r\n {!loading && <CommandEmpty>{noResultsText}</CommandEmpty>}\r\n {!loading && !options.length ? (\r\n <CommandItem value=\"8fdcaeb67c8ad943c80fe54c3b1059b700d9254389a38a4a1fc39a6eee7564623\" disabled>\r\n {emptyOptionsText}\r\n </CommandItem>\r\n ) : null}\r\n <CommandGroup>\r\n {options.map(option => (\r\n <CommandItem\r\n key={String(option.value)}\r\n value={option.value}\r\n keywords={[option.label]}\r\n onSelect={handleSelect as React.ComponentProps<typeof CommandItem>[\"onSelect\"]}\r\n >\r\n {option.label}\r\n <Check className={cn(\"ml-auto\", currentSelectedValue === option.value ? \"opacity-100\" : \"opacity-0\")} />\r\n </CommandItem>\r\n ))}\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n};\r\nexport { Combobox, type ComboboxProps };\r\n"],"names":["Combobox","onValueChange","options","value","className","clearable","closeOnSelect","loading","disabled","placeholder","searchText","noResultsText","loadingText","emptyOptionsText","showSearchInput","modalPopover","props","isPopoverOpen","setIsPopoverOpen","React","commandRef","useRef","currentSelectedValue","setCurrentSelectedValue","handleInputKeyDown","event","handleSelect","currentValue","handleClear","handleFilter","search","keywords","handleOpenAutoFocus","useEffect","showPlaceholder","Popover","jsx","PopoverTrigger","jsxs","Button","cn","ChevronDown","option","XMark","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandItem","CommandGroup","Check"],"mappings":";;;;;;;AAkGA,MAAMA,KAAW,CAA4B;AAAA,EAC3C,eAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,eAAAC,IAAgB;AAAA,EAChB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,eAAAC,IAAgB;AAAA,EAChB,aAAAC,IAAc;AAAA,EACd,kBAAAC,IAAmB;AAAA,EACnB,iBAAAC,IAAkB;AAAA,EAClB,cAAAC;AAAA,EACA,GAAGC;AACL,MAAwB;AACtB,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAM,SAAS,EAAK,GACxDC,IAAaC,EAAuB,IAAI,GAExC,CAACC,GAAsBC,CAAuB,IAAIJ,EAAM,SAAwBhB,CAAK,GAErFqB,IAAqBL,EAAM;AAAA,IAC/B,CAACM,MAAiD;AAChD,MAAIA,EAAM,QAAQ,UAChBP,EAAiB,EAAI,IACZO,EAAM,QAAQ,eAAe,CAACA,EAAM,cAAc,UAC3DF,EAAwBD,CAAoB,GAC5CrB,IAAgBqB,CAAqB,GACjChB,OAAgC,EAAK;AAAA,IAE7C;AAAA,IACA,CAACgB,GAAsBrB,GAAeK,CAAa;AAAA,EAAA,GAG/CoB,IAAeP,EAAM;AAAA,IACzB,CAACQ,MAAoB;AACnB,MAAAJ,EAAwBI,CAAY,GACpC1B,IAAgB0B,CAAY,GACxBrB,OAAgC,EAAK;AAAA,IAC3C;AAAA,IACA,CAACL,GAAeK,CAAa;AAAA,EAAA,GAGzBsB,IAAcT,EAAM;AAAA,IACxB,CAAC,MAAwB;AACvB,QAAE,gBAAA,GACFlB,IAAgB,MAAyB,GACzCsB,EAAwB,MAAS;AAAA,IACnC;AAAA,IACA,CAACtB,CAAa;AAAA,EAAA,GAGV4B,IAAeV,EAAM,YAAY,CAAChB,GAAe2B,GAAgBC,IAAqB,CAAC,EAAE,MACtFA,EAAS,KAAK,EAAE,EAAE,kBAAA,EAAoB,SAASD,EAAO,mBAAmB,IAAI,IAAI,GACvF,CAAA,CAAE,GAGCE,IAAsBb,EAAM;AAAA,IAChC,CAAC,MAAa;AACZ,MAAKL,MACH,EAAE,eAAA,GACFM,EAAW,SAAS,MAAA;AAAA,IAExB;AAAA,IACA,CAACN,CAAe;AAAA,EAAA;AAGlB,EAAAmB,EAAU,MAAM;AACd,IAAAV,EAAwBpB,CAAK;AAAA,EAC/B,GAAG,CAACA,CAAK,CAAC;AAEV,QAAM+B,IAAkBZ,MAAyB,UAAaA,MAAyB;AAEvF,2BACGa,GAAA,EAAQ,MAAMlB,GAAe,cAAcC,GAAkB,OAAOH,GACnE,UAAA;AAAA,IAAA,gBAAAqB,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,MAAK;AAAA,QACL,iBAAetB;AAAA,QACf,WAAWuB;AAAA,UACT;AAAA,UACApC;AAAA,QAAA;AAAA,QAEF,cAAYkB;AAAA,QACZ,oBAAkBY,IAAkB,KAAK;AAAA,QACzC,SAAA3B;AAAA,QACA,UAAAC;AAAA,QACA,SACE,gBAAA4B;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGb,GAAGzB;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAoB,EAAC,QAAA,EAAK,WAAU,6FACb,UAACF,IAAyF3B,IAAUK,IAAcH,IAA/FP,EAAQ,KAAK,CAAAwC,MAAUA,EAAO,UAAUpB,CAAoB,GAAG,OACrF;AAAA,UACCjB,KAAaiB,MAAyB,UAAaA,MAAyB,OAC3E,gBAAAc;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAASR;AAAA,cACT,WAAU;AAAA,cACV,MAAK;AAAA,cACL,cAAW;AAAA,cAEX,4BAACe,GAAA,CAAA,CAAM;AAAA,YAAA;AAAA,UAAA,IAEP;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,IACA,gBAAAP,EAACQ,GAAA,EAAe,WAAU,cAAa,OAAM,SAAQ,iBAAiB,MAAM1B,EAAiB,EAAK,GAAG,iBAAiBc,GACpH,UAAA,gBAAAM;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,QAAQhB;AAAA,QACR,cAAoDP,KAAyB,OAAO,OAAOA,CAAoB,IAAI;AAAA,QACnH,KAAKF;AAAA,QAEJ,UAAA;AAAA,UAAAN,KAAmB,gBAAAsB,EAACU,GAAA,EAAa,aAAapC,GAAY,WAAWc,GAAoB;AAAA,4BACzFuB,GAAA,EACE,UAAA;AAAA,YAAA,CAACxC,KAAW,gBAAA6B,EAACY,GAAA,EAAc,UAAArC,EAAA,CAAc;AAAA,YACzC,CAACJ,KAAW,CAACL,EAAQ,SACpB,gBAAAkC,EAACa,GAAA,EAAY,OAAM,qEAAoE,UAAQ,IAC5F,UAAApC,EAAA,CACH,IACE;AAAA,YACJ,gBAAAuB,EAACc,GAAA,EACE,UAAAhD,EAAQ,IAAI,CAAAwC,MACX,gBAAAJ;AAAA,cAACW;AAAA,cAAA;AAAA,gBAEC,OAAOP,EAAO;AAAA,gBACd,UAAU,CAACA,EAAO,KAAK;AAAA,gBACvB,UAAUhB;AAAA,gBAET,UAAA;AAAA,kBAAAgB,EAAO;AAAA,kBACR,gBAAAN,EAACe,GAAA,EAAM,WAAWX,EAAG,WAAWlB,MAAyBoB,EAAO,QAAQ,gBAAgB,WAAW,EAAA,CAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,cANjG,OAAOA,EAAO,KAAK;AAAA,YAAA,CAQ3B,EAAA,CACH;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EACF,CACF;AAAA,EAAA,GACF;AAEJ;"}
|
|
1
|
+
{"version":3,"file":"combobox.es.js","sources":["../src/components/combobox/Combobox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useEffect, useRef } from \"react\";\r\nimport { Check, ChevronDown, XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from \"../command/Command\";\r\n\r\ntype ComboboxProps<T extends string | number> = React.HTMLAttributes<HTMLButtonElement> & {\r\n /**\r\n * The options to display in the combobox.\r\n * Each option should have a label and a value.\r\n * The label is what is displayed in the combobox.\r\n * The value is what is returned when the option is selected.\r\n */\r\n options: { label: string; value: T }[];\r\n\r\n /**\r\n * The value of the combobox.\r\n */\r\n value?: T;\r\n\r\n /**\r\n * A function that is called when the value of the combobox changes.\r\n */\r\n onValueChange?: (value: T) => void;\r\n\r\n /**\r\n * Placeholder text to be displayed when no values are selected.\r\n * @default \"Select an option\"\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * The modality of the popover. When set to true, interaction with outside elements\r\n * will be disabled and only popover content will be visible to screen readers.\r\n * Optional\r\n * @default false\r\n */\r\n modalPopover?: boolean;\r\n\r\n /**\r\n * The text to display in the search input.\r\n * @default \"Search...\"\r\n */\r\n searchText?: string;\r\n\r\n /**\r\n * The text to display when no results are found.\r\n * @default \"No results found\"\r\n */\r\n noResultsText?: string;\r\n\r\n /**\r\n * Whether the popover should close when an option is selected.\r\n * @default true\r\n */\r\n closeOnSelect?: boolean;\r\n\r\n /**\r\n * Whether the combobox is loading.\r\n * @default false\r\n */\r\n loading?: boolean;\r\n\r\n /**\r\n * Whether the combobox is disabled.\r\n * @default false\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * The text to display when the combobox is loading.\r\n * @default \"Loading...\"\r\n */\r\n loadingText?: string;\r\n\r\n /**\r\n * The text to display when there are no options.\r\n * @default \"No Items\"\r\n */\r\n emptyOptionsText?: string;\r\n\r\n /**\r\n * Whether to show the search input.\r\n * @default true\r\n */\r\n showSearchInput?: boolean;\r\n\r\n /**\r\n * Whether to show the clear button.\r\n * @default false\r\n */\r\n clearable?: boolean;\r\n};\r\n\r\nconst Combobox = <T extends string | number>({\r\n onValueChange,\r\n options,\r\n value,\r\n className,\r\n clearable = false,\r\n closeOnSelect = true,\r\n loading,\r\n disabled,\r\n placeholder = \"Select an option\",\r\n searchText = \"Search...\",\r\n noResultsText = \"No results found\",\r\n loadingText = \"Loading...\",\r\n emptyOptionsText = \"No Items\",\r\n showSearchInput = true,\r\n modalPopover,\r\n ...props\r\n}: ComboboxProps<T>) => {\r\n const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n const commandRef = useRef<HTMLDivElement>(null);\r\n\r\n const [currentSelectedValue, setCurrentSelectedValue] = React.useState<T | undefined>(value);\r\n\r\n const handleInputKeyDown = React.useCallback(\r\n (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (event.key === \"Enter\") {\r\n setIsPopoverOpen(true);\r\n } else if (event.key === \"Backspace\" && !event.currentTarget.value) {\r\n setCurrentSelectedValue(currentSelectedValue);\r\n onValueChange?.(currentSelectedValue!);\r\n if (closeOnSelect) setIsPopoverOpen(false);\r\n }\r\n },\r\n [currentSelectedValue, onValueChange, closeOnSelect],\r\n );\r\n\r\n const handleSelect = React.useCallback(\r\n (currentValue: T) => {\r\n setCurrentSelectedValue(currentValue);\r\n onValueChange?.(currentValue);\r\n if (closeOnSelect) setIsPopoverOpen(false);\r\n },\r\n [onValueChange, closeOnSelect],\r\n );\r\n\r\n const handleClear = React.useCallback(\r\n (e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n onValueChange?.(undefined as unknown as T);\r\n setCurrentSelectedValue(undefined);\r\n },\r\n [onValueChange],\r\n );\r\n\r\n const handleFilter = React.useCallback((value: string, search: string, keywords: string[] = [\"\"]) => {\r\n return keywords.join(\"\").toLocaleLowerCase().includes(search.toLocaleLowerCase()) ? 1 : 0;\r\n }, []);\r\n\r\n // when search input is not shown, we need to focus on the command manually to enable keyboard navigation\r\n const handleOpenAutoFocus = React.useCallback(\r\n (e: Event) => {\r\n if (!showSearchInput) {\r\n e.preventDefault();\r\n commandRef.current?.focus();\r\n }\r\n },\r\n [showSearchInput],\r\n );\r\n\r\n useEffect(() => {\r\n setCurrentSelectedValue(value);\r\n }, [value]);\r\n\r\n const showPlaceholder = currentSelectedValue === undefined || currentSelectedValue === \"\";\r\n\r\n return (\r\n <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n variant=\"text\"\r\n role=\"combobox\"\r\n type=\"button\"\r\n aria-expanded={isPopoverOpen}\r\n className={cn(\r\n \"group flex h-8 w-full items-center justify-between whitespace-nowrap overflow-hidden rounded-sm border border-input bg-transparent px-3 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&_svg]:disabled:text-text-300\",\r\n className,\r\n )}\r\n data-value={currentSelectedValue}\r\n data-placeholder={showPlaceholder ? \"\" : undefined}\r\n loading={loading}\r\n disabled={disabled}\r\n endIcon={\r\n <ChevronDown\r\n role=\"button\"\r\n aria-label=\"Expand dropdown\"\r\n className=\"!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform ms-auto\"\r\n />\r\n }\r\n {...props}\r\n >\r\n <span className=\"text-start text-ellipsis whitespace-nowrap overflow-hidden flex-1 max-w-[calc(100%-24px)]\">\r\n {!showPlaceholder ? options.find(option => option.value === currentSelectedValue)?.label : loading ? loadingText : placeholder}\r\n </span>\r\n {clearable && currentSelectedValue !== undefined && currentSelectedValue !== null ? (\r\n <span\r\n onClick={handleClear}\r\n className=\"p-0 rounded-sm text-xs font-normal transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:bg-muted disabled:text-gray-500 text-primary hover:bg-primary-50 focus:bg-transparent focus:ring active:bg-primary-50 active:text-primary-700 [&>svg]:h-4.5 [&>svg]:w-4.5\"\r\n role=\"button\"\r\n aria-label=\"Clear selection\"\r\n >\r\n <XMark />\r\n </span>\r\n ) : null}\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)} onOpenAutoFocus={handleOpenAutoFocus}>\r\n <Command\r\n className=\"w-[--radix-popper-anchor-width] focus-visible:outline-none\"\r\n filter={handleFilter}\r\n defaultValue={currentSelectedValue !== undefined && currentSelectedValue !== null ? String(currentSelectedValue) : undefined} // highlight selected value on open\r\n ref={commandRef}\r\n >\r\n {showSearchInput && <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} />}\r\n <CommandList>\r\n {!loading && <CommandEmpty>{noResultsText}</CommandEmpty>}\r\n {!loading && !options.length ? (\r\n <CommandItem value=\"8fdcaeb67c8ad943c80fe54c3b1059b700d9254389a38a4a1fc39a6eee7564623\" disabled>\r\n {emptyOptionsText}\r\n </CommandItem>\r\n ) : null}\r\n <CommandGroup>\r\n {options.map(option => (\r\n <CommandItem\r\n key={String(option.value)}\r\n value={option.value}\r\n keywords={[option.label]}\r\n onSelect={handleSelect as React.ComponentProps<typeof CommandItem>[\"onSelect\"]}\r\n >\r\n {option.label}\r\n <Check className={cn(\"ml-auto\", currentSelectedValue === option.value ? \"opacity-100\" : \"opacity-0\")} />\r\n </CommandItem>\r\n ))}\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n};\r\nexport { Combobox, type ComboboxProps };\r\n"],"names":["Combobox","onValueChange","options","value","className","clearable","closeOnSelect","loading","disabled","placeholder","searchText","noResultsText","loadingText","emptyOptionsText","showSearchInput","modalPopover","props","isPopoverOpen","setIsPopoverOpen","React","commandRef","useRef","currentSelectedValue","setCurrentSelectedValue","handleInputKeyDown","event","handleSelect","currentValue","handleClear","handleFilter","search","keywords","handleOpenAutoFocus","useEffect","showPlaceholder","Popover","jsx","PopoverTrigger","jsxs","Button","cn","ChevronDown","option","XMark","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandItem","CommandGroup","Check"],"mappings":"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"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
|
|
2
2
|
import { FormItem } from '../form/Form';
|
|
3
|
-
import { MultiSelectProps } from '../multi-select/MultiSelect';
|
|
3
|
+
import { MultiSelect, MultiSelectProps } from '../multi-select/MultiSelect';
|
|
4
4
|
type FormMultiSelectProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<ControllerProps<TFieldValues, TName>, "render"> & React.ComponentProps<typeof FormItem> & {
|
|
5
5
|
label: string;
|
|
6
6
|
loading?: boolean;
|
|
7
7
|
loadingText?: string;
|
|
8
|
-
options: MultiSelectProps["options"];
|
|
8
|
+
options: MultiSelectProps<string>["options"];
|
|
9
9
|
placeholder?: string;
|
|
10
10
|
required?: boolean;
|
|
11
11
|
readOnly?: boolean;
|
|
12
12
|
slotProps?: {
|
|
13
|
-
multiSelectProps?:
|
|
13
|
+
multiSelectProps?: Omit<React.ComponentProps<typeof MultiSelect>, "onValueChange" | "value" | "options" | "loading" | "loadingText" | "placeholder" | "disabled">;
|
|
14
14
|
formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;
|
|
15
15
|
formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;
|
|
16
16
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/form-multi-select/FormMultiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"FormMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/form-multi-select/FormMultiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE1E,OAAO,EAA0B,QAAQ,EAA0B,MAAM,cAAc,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE5E,KAAK,oBAAoB,CAAC,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,IAAI,IAAI,CACjI,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,EACpC,QAAQ,CACT,GACC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE;QACV,gBAAgB,CAAC,EAAE,IAAI,CACrB,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,GAAG,UAAU,CAC/F,CAAC;QACF,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAChG,gBAAgB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;KAC3G,CAAC;CACH,CAAC;AAEJ,QAAA,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,mCACvF,oBAAoB,CAAC,YAAY,EAAE,KAAK,CAAC,4CAwDjD,CAAC;AACF,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,CAAC"}
|
|
@@ -58,7 +58,7 @@ declare const multiSelectVariants: TVReturnType<{
|
|
|
58
58
|
/**
|
|
59
59
|
* Props for MultiSelect component
|
|
60
60
|
*/
|
|
61
|
-
interface MultiSelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof multiSelectVariants> {
|
|
61
|
+
interface MultiSelectProps<T extends string | number> extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "defaultValue">, VariantProps<typeof multiSelectVariants> {
|
|
62
62
|
/**
|
|
63
63
|
* An array of option objects to be displayed in the multi-select component.
|
|
64
64
|
* Each option object has a label, value, and an optional icon.
|
|
@@ -67,7 +67,7 @@ interface MultiSelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
67
67
|
/** The text to display for the option. */
|
|
68
68
|
label: string;
|
|
69
69
|
/** The unique value associated with the option. */
|
|
70
|
-
value:
|
|
70
|
+
value: T;
|
|
71
71
|
/** Optional icon component to display alongside the option. */
|
|
72
72
|
icon?: React.ComponentType<{
|
|
73
73
|
className?: string;
|
|
@@ -77,13 +77,13 @@ interface MultiSelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
77
77
|
* Callback function triggered when the selected values change.
|
|
78
78
|
* Receives an array of the new selected values.
|
|
79
79
|
*/
|
|
80
|
-
onValueChange: (value:
|
|
80
|
+
onValueChange: (value: T[]) => void;
|
|
81
81
|
/**
|
|
82
82
|
* selected values in the multi-select component.
|
|
83
83
|
*/
|
|
84
|
-
value?:
|
|
84
|
+
value?: T[];
|
|
85
85
|
/** The default selected values when the component mounts. */
|
|
86
|
-
defaultValue?:
|
|
86
|
+
defaultValue?: T[];
|
|
87
87
|
/**
|
|
88
88
|
* Placeholder text to be displayed when no values are selected.
|
|
89
89
|
* Optional, defaults to "Select options".
|
|
@@ -139,6 +139,10 @@ interface MultiSelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
139
139
|
*/
|
|
140
140
|
loadingText?: string;
|
|
141
141
|
}
|
|
142
|
-
declare const
|
|
143
|
-
|
|
142
|
+
declare const ForwardedMultiSelect: (<T extends string | number>(props: MultiSelectProps<T> & {
|
|
143
|
+
ref?: React.Ref<HTMLButtonElement>;
|
|
144
|
+
}) => React.ReactElement) & {
|
|
145
|
+
displayName?: string;
|
|
146
|
+
};
|
|
147
|
+
export { ForwardedMultiSelect as MultiSelect, type MultiSelectProps };
|
|
144
148
|
//# sourceMappingURL=MultiSelect.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/MultiSelect.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAU1D;;;GAGG;AACH,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAavB,CAAC;AAEH;;GAEG;AACH,UAAU,
|
|
1
|
+
{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/MultiSelect.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAU1D;;;GAGG;AACH,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAavB,CAAC;AAEH;;GAEG;AACH,UAAU,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAClD,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,EACnF,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C;;;OAGG;IACH,OAAO,EAAE;QACP,0CAA0C;QAC1C,KAAK,EAAE,MAAM,CAAC;QACd,mDAAmD;QACnD,KAAK,EAAE,CAAC,CAAC;QACT,+DAA+D;QAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;YAAE,SAAS,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KACpD,EAAE,CAAC;IAEJ;;;OAGG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IAEZ,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAgOD,QAAA,MAAM,oBAAoB,EAAoC,CAAC,CAAC,CAAyB,SAAf,MAAM,GAAG,MAAM,EACvF,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,YAAY,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,OAAO,EAAE,oBAAoB,IAAI,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAC"}
|
|
@@ -26,7 +26,7 @@ const I = ({
|
|
|
26
26
|
{
|
|
27
27
|
variant: "text",
|
|
28
28
|
className: w(
|
|
29
|
-
"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-
|
|
29
|
+
"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
|
|
30
30
|
d
|
|
31
31
|
),
|
|
32
32
|
"data-placeholder": e ? void 0 : "",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"desktopdatepicker.es.js","sources":["../src/components/date-picker/DesktopDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsSingle, DayEventHandler } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDatePickerProps = PropsBase &\r\n Omit<PropsSingle, \"mode\"> & {\r\n formatStr?: string;\r\n placeholder?: string;\r\n calendarClassName?: string;\r\n selected?: Date;\r\n required?: boolean;\r\n closeOnSelect?: boolean;\r\n disabled?: boolean;\r\n };\r\n\r\nconst DesktopDatePicker: React.FC<DesktopDatePickerProps> = ({\r\n formatStr,\r\n selected,\r\n placeholder,\r\n className,\r\n calendarClassName,\r\n closeOnSelect = true,\r\n onDayClick,\r\n disabled,\r\n ...props\r\n}) => {\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n const handleDayClick: DayEventHandler<React.MouseEvent<Element, MouseEvent>> = (date, modifiers, e) => {\r\n onDayClick?.(date, modifiers, e);\r\n if (closeOnSelect) setIsOpen(false);\r\n };\r\n\r\n return (\r\n <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n variant=\"text\"\r\n className={cn(\r\n \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-
|
|
1
|
+
{"version":3,"file":"desktopdatepicker.es.js","sources":["../src/components/date-picker/DesktopDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsSingle, DayEventHandler } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDatePickerProps = PropsBase &\r\n Omit<PropsSingle, \"mode\"> & {\r\n formatStr?: string;\r\n placeholder?: string;\r\n calendarClassName?: string;\r\n selected?: Date;\r\n required?: boolean;\r\n closeOnSelect?: boolean;\r\n disabled?: boolean;\r\n };\r\n\r\nconst DesktopDatePicker: React.FC<DesktopDatePickerProps> = ({\r\n formatStr,\r\n selected,\r\n placeholder,\r\n className,\r\n calendarClassName,\r\n closeOnSelect = true,\r\n onDayClick,\r\n disabled,\r\n ...props\r\n}) => {\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n const handleDayClick: DayEventHandler<React.MouseEvent<Element, MouseEvent>> = (date, modifiers, e) => {\r\n onDayClick?.(date, modifiers, e);\r\n if (closeOnSelect) setIsOpen(false);\r\n };\r\n\r\n return (\r\n <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n variant=\"text\"\r\n className={cn(\r\n \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n className,\r\n )}\r\n data-placeholder={!selected ? \"\" : undefined}\r\n aria-label={selected ? `Selected date: ${format(selected, formatStr ?? \"yyyy/MM/dd\")}` : \"Pick a date\"}\r\n disabled={disabled}\r\n >\r\n {selected ? format(selected, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"Pick a date\"}</span>}\r\n <CalendarIcon className=\"mr-2 ms-auto\" />\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\">\r\n <Calendar\r\n defaultMonth={selected}\r\n startMonth={new Date(2000, 0, 1)}\r\n endMonth={new Date(new Date().getFullYear() + 2, 11, 31)}\r\n {...props}\r\n mode=\"single\"\r\n selected={selected}\r\n captionLayout=\"dropdown-years\"\r\n className={calendarClassName}\r\n onDayClick={handleDayClick}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n};\r\n\r\nexport { DesktopDatePicker, type DesktopDatePickerProps };\r\n"],"names":["DesktopDatePicker","formatStr","selected","placeholder","className","calendarClassName","closeOnSelect","onDayClick","disabled","props","isOpen","setIsOpen","React","handleDayClick","date","modifiers","e","jsxs","Popover","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;AAuBA,MAAMA,IAAsD,CAAC;AAAA,EAC3D,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK,GAE1CC,IAAyE,CAACC,GAAMC,GAAWC,MAAM;AACrG,IAAAT,IAAaO,GAAMC,GAAWC,CAAC,GAC3BV,OAAyB,EAAK;AAAA,EACpC;AAEA,SACE,gBAAAW,EAACC,GAAA,EAAQ,MAAMR,GAAQ,cAAcC,GACnC,UAAA;AAAA,IAAA,gBAAAQ,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAWC;AAAA,UACT;AAAA,UACAlB;AAAA,QAAA;AAAA,QAEF,oBAAmBF,IAAgB,SAAL;AAAA,QAC9B,cAAYA,IAAW,kBAAkBqB,EAAOrB,GAAUD,KAAa,YAAY,CAAC,KAAK;AAAA,QACzF,UAAAO;AAAA,QAEC,UAAA;AAAA,UAAAN,IAAWqB,EAAOrB,GAAUD,KAAa,YAAY,IAAI,gBAAAkB,EAAC,QAAA,EAAM,eAAe,cAAA,CAAc;AAAA,UAC9F,gBAAAA,EAACK,GAAA,EAAa,WAAU,eAAA,CAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAE3C;AAAA,IACA,gBAAAL,EAACM,GAAA,EAAe,WAAU,cACxB,UAAA,gBAAAN;AAAA,MAACO;AAAAA,MAAA;AAAA,QACC,cAAcxB;AAAA,QACd,YAAY,IAAI,KAAK,KAAM,GAAG,CAAC;AAAA,QAC/B,UAAU,IAAI,MAAK,oBAAI,KAAA,GAAO,gBAAgB,GAAG,IAAI,EAAE;AAAA,QACtD,GAAGO;AAAA,QACJ,MAAK;AAAA,QACL,UAAAP;AAAA,QACA,eAAc;AAAA,QACd,WAAWG;AAAA,QACX,YAAYQ;AAAA,MAAA;AAAA,IAAA,EACd,CACF;AAAA,EAAA,GACF;AAEJ;"}
|
|
@@ -31,7 +31,7 @@ const R = ({
|
|
|
31
31
|
{
|
|
32
32
|
variant: "text",
|
|
33
33
|
className: i(
|
|
34
|
-
"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-
|
|
34
|
+
"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
|
|
35
35
|
s
|
|
36
36
|
),
|
|
37
37
|
"data-placeholder": r ? void 0 : "",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"desktopdaterangepicker.es.js","sources":["../src/components/date-picker/DesktopDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { PropsBase, PropsRange, DateRange } from \"react-day-picker\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDateRangePickerProps = PropsBase &\r\n Omit<PropsRange, \"mode\"> & {\r\n formatStr?: string;\r\n placeholder?: string;\r\n calendarClassName?: string;\r\n selected?: DateRange;\r\n required?: boolean;\r\n fromText?: string;\r\n toText?: string;\r\n disabled?: boolean;\r\n };\r\n\r\nconst DesktopDateRangePicker: React.FC<DesktopDateRangePickerProps> = ({\r\n formatStr,\r\n selected,\r\n placeholder,\r\n className,\r\n calendarClassName,\r\n fromText,\r\n toText,\r\n disabled,\r\n ...props\r\n}) => {\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n return (\r\n <Popover\r\n open={isOpen}\r\n onOpenChange={open => {\r\n setIsOpen(open);\r\n }}\r\n >\r\n <PopoverTrigger asChild>\r\n <Button\r\n variant=\"text\"\r\n className={cn(\r\n \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-
|
|
1
|
+
{"version":3,"file":"desktopdaterangepicker.es.js","sources":["../src/components/date-picker/DesktopDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { PropsBase, PropsRange, DateRange } from \"react-day-picker\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDateRangePickerProps = PropsBase &\r\n Omit<PropsRange, \"mode\"> & {\r\n formatStr?: string;\r\n placeholder?: string;\r\n calendarClassName?: string;\r\n selected?: DateRange;\r\n required?: boolean;\r\n fromText?: string;\r\n toText?: string;\r\n disabled?: boolean;\r\n };\r\n\r\nconst DesktopDateRangePicker: React.FC<DesktopDateRangePickerProps> = ({\r\n formatStr,\r\n selected,\r\n placeholder,\r\n className,\r\n calendarClassName,\r\n fromText,\r\n toText,\r\n disabled,\r\n ...props\r\n}) => {\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n return (\r\n <Popover\r\n open={isOpen}\r\n onOpenChange={open => {\r\n setIsOpen(open);\r\n }}\r\n >\r\n <PopoverTrigger asChild>\r\n <Button\r\n variant=\"text\"\r\n className={cn(\r\n \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n className,\r\n )}\r\n data-placeholder={!selected ? \"\" : undefined}\r\n aria-label={\r\n selected\r\n ? `Selected date: ${selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n : placeholder\r\n }\r\n disabled={disabled}\r\n >\r\n {selected ? (\r\n <div className=\"grid grid-cols-2 flex-1 justify-items-start\">\r\n <span>\r\n {fromText ?? \"From\"}: {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n </span>{\" \"}\r\n <span>\r\n {toText ?? \"To\"}: {selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n </span>\r\n </div>\r\n ) : (\r\n <span>{placeholder ?? \"Pick a Range\"}</span>\r\n )}\r\n <CalendarIcon className=\"mr-2 h-5 w-4 ms-auto\" />\r\n </Button>\r\n {/* <div className=\"flex gap-2\">\r\n <Button\r\n variant={\"outline\"}\r\n className={cn(\r\n \"border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start\",\r\n !selected && \"text-muted-foreground\",\r\n className,\r\n )}\r\n >\r\n {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"From\"}</span>}\r\n <CalendarIcon className=\"mr-2 h-5 w-5 ms-auto\" />\r\n </Button>\r\n <Button\r\n variant={\"outline\"}\r\n className={cn(\r\n \"border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start\",\r\n !selected && \"text-muted-foreground\",\r\n className,\r\n )}\r\n >\r\n {selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"To\"}</span>}\r\n <CalendarIcon className=\"mr-2 h-5 w-5 ms-auto\" />\r\n </Button>\r\n </div> */}\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n <Calendar\r\n defaultMonth={selected?.from}\r\n startMonth={new Date(2000, 0, 1)}\r\n endMonth={new Date(new Date().getFullYear() + 2, 11, 31)}\r\n {...props}\r\n mode=\"range\"\r\n selected={selected}\r\n className={cn(calendarClassName, \"md:max-w-full md:w-[36rem]\")}\r\n numberOfMonths={2}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n};\r\n\r\nexport { DesktopDateRangePicker, type DesktopDateRangePickerProps };\r\n"],"names":["DesktopDateRangePicker","formatStr","selected","placeholder","className","calendarClassName","fromText","toText","disabled","props","isOpen","setIsOpen","React","jsxs","Popover","open","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;AAwBA,MAAMA,IAAgE,CAAC;AAAA,EACrE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK;AAEhD,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMJ;AAAA,MACN,cAAc,CAAAK,MAAQ;AACpB,QAAAJ,EAAUI,CAAI;AAAA,MAChB;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAWC;AAAA,cACT;AAAA,cACAf;AAAA,YAAA;AAAA,YAEF,oBAAmBF,IAAgB,SAAL;AAAA,YAC9B,cACEA,IACI,kBAAkBA,GAAU,OAAOkB,EAAOlB,EAAS,MAAMD,KAAa,YAAY,IAAI,EAAE,MAAMC,GAAU,KAAKkB,EAAOlB,EAAS,IAAID,KAAa,YAAY,IAAI,EAAE,KAChKE;AAAA,YAEN,UAAAK;AAAA,YAEC,UAAA;AAAA,cAAAN,IACC,gBAAAW,EAAC,OAAA,EAAI,WAAU,+CACb,UAAA;AAAA,gBAAA,gBAAAA,EAAC,QAAA,EACE,UAAA;AAAA,kBAAAP,KAAY;AAAA,kBAAO;AAAA,kBAAGJ,GAAU,OAAOkB,EAAOlB,EAAS,MAAMD,KAAa,YAAY,IAAI;AAAA,gBAAA,GAC7F;AAAA,gBAAQ;AAAA,kCACP,QAAA,EACE,UAAA;AAAA,kBAAAM,KAAU;AAAA,kBAAK;AAAA,kBAAGL,GAAU,KAAKkB,EAAOlB,EAAS,IAAID,KAAa,YAAY,IAAI;AAAA,gBAAA,EAAA,CACrF;AAAA,cAAA,EAAA,CACF,IAEA,gBAAAe,EAAC,QAAA,EAAM,UAAAb,KAAe,gBAAe;AAAA,cAEvC,gBAAAa,EAACK,GAAA,EAAa,WAAU,uBAAA,CAAuB;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GA0BnD;AAAA,QACA,gBAAAL,EAACM,GAAA,EAAe,WAAU,cAAa,OAAM,SAC3C,UAAA,gBAAAN;AAAA,UAACO;AAAAA,UAAA;AAAA,YACC,cAAcrB,GAAU;AAAA,YACxB,YAAY,IAAI,KAAK,KAAM,GAAG,CAAC;AAAA,YAC/B,UAAU,IAAI,MAAK,oBAAI,KAAA,GAAO,gBAAgB,GAAG,IAAI,EAAE;AAAA,YACtD,GAAGO;AAAA,YACJ,MAAK;AAAA,YACL,UAAAP;AAAA,YACA,WAAWiB,EAAGd,GAAmB,4BAA4B;AAAA,YAC7D,gBAAgB;AAAA,UAAA;AAAA,QAAA,EAClB,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -19,7 +19,7 @@ const $ = ({
|
|
|
19
19
|
{
|
|
20
20
|
variant: "text",
|
|
21
21
|
className: a(
|
|
22
|
-
"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-
|
|
22
|
+
"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
|
|
23
23
|
d
|
|
24
24
|
),
|
|
25
25
|
"data-placeholder": e ? void 0 : "",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"desktoptimepicker.es.js","sources":["../src/components/date-picker/DesktopTimePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { HTMLAttributes, useState } from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Time, TimePickerContent } from \"./TimePickerContent\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n time: Time | undefined;\r\n onTimeChange: (time: Time | undefined) => void;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n slotsProps?: {\r\n content?: HTMLAttributes<HTMLDivElement>;\r\n };\r\n};\r\n\r\nconst DesktopTimePicker: React.FC<DesktopTimePickerProps> = ({\r\n time,\r\n onTimeChange,\r\n className,\r\n slotsProps,\r\n placeholder = \"Pick a Time\",\r\n ...restProps\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n return (\r\n <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n variant=\"text\"\r\n className={cn(\r\n \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-
|
|
1
|
+
{"version":3,"file":"desktoptimepicker.es.js","sources":["../src/components/date-picker/DesktopTimePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { HTMLAttributes, useState } from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Time, TimePickerContent } from \"./TimePickerContent\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n time: Time | undefined;\r\n onTimeChange: (time: Time | undefined) => void;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n slotsProps?: {\r\n content?: HTMLAttributes<HTMLDivElement>;\r\n };\r\n};\r\n\r\nconst DesktopTimePicker: React.FC<DesktopTimePickerProps> = ({\r\n time,\r\n onTimeChange,\r\n className,\r\n slotsProps,\r\n placeholder = \"Pick a Time\",\r\n ...restProps\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n return (\r\n <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n variant=\"text\"\r\n className={cn(\r\n \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n className,\r\n )}\r\n data-placeholder={!time ? \"\" : undefined}\r\n aria-label={time?.hour ? `Selected time: ${time.hour}:${time.minute} ${time.ampm}` : placeholder}\r\n {...restProps}\r\n >\r\n {`${time?.hour?.toString()?.padStart(2, \"0\") ?? \"--\"} : ${time?.minute?.toString()?.padStart(2, \"0\") ?? \"--\"} ${time?.ampm ?? \"--\"}`}\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent {...(slotsProps?.content ?? {})} className={cn(\"w-auto p-0\", slotsProps?.content?.className)}>\r\n <TimePickerContent isOpen={isOpen} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n};\r\nexport { DesktopTimePicker, type DesktopTimePickerProps };\r\n"],"names":["DesktopTimePicker","time","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","Popover","jsx","PopoverTrigger","Button","cn","PopoverContent","TimePickerContent"],"mappings":";;;;;;AAmBA,MAAMA,IAAsD,CAAC;AAAA,EAC3D,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,SACE,gBAAAC,EAACC,GAAA,EAAQ,MAAMJ,GAAQ,cAAcC,GACnC,UAAA;AAAA,IAAA,gBAAAI,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAWC;AAAA,UACT;AAAA,UACAZ;AAAA,QAAA;AAAA,QAEF,oBAAmBF,IAAY,SAAL;AAAA,QAC1B,cAAYA,GAAM,OAAO,kBAAkBA,EAAK,IAAI,IAAIA,EAAK,MAAM,IAAIA,EAAK,IAAI,KAAKI;AAAA,QACpF,GAAGC;AAAA,QAEH,UAAA,GAAGL,GAAM,MAAM,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,MAAMA,GAAM,QAAQ,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,IAAIA,GAAM,QAAQ,IAAI;AAAA,MAAA;AAAA,IAAA,GAEtI;AAAA,IACA,gBAAAW,EAACI,KAAgB,GAAIZ,GAAY,WAAW,CAAA,GAAK,WAAWW,EAAG,cAAcX,GAAY,SAAS,SAAS,GACzG,UAAA,gBAAAQ,EAACK,GAAA,EAAkB,QAAAV,GAAgB,cAAAL,GAA4B,MAAAD,GAAY,YAAAG,GAAwB,EAAA,CACrG;AAAA,EAAA,GACF;AAEJ;"}
|
package/dist/duration.es.js
CHANGED
|
@@ -4,7 +4,7 @@ import { tv as F } from "tailwind-variants";
|
|
|
4
4
|
import { cn as y } from "./utils.es.js";
|
|
5
5
|
const H = F({
|
|
6
6
|
base: [
|
|
7
|
-
"flex items-center w-full rounded-sm border border-input text-text bg-transparent p-0 text-xs font-medium shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
|
|
7
|
+
"flex items-center w-full rounded-sm border border-input text-text bg-transparent p-0 text-xs [&_input]:text-xs font-medium shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
|
|
8
8
|
"placeholder:text-text-300 hover:border-primary-400 focus-within:border-primary-400 focus-within:outline-none focus-within:ring focus-within:ring-primary-100",
|
|
9
9
|
"aria-disabled:text-text-300 aria-disabled:bg-gray-100 aria-disabled:border-gray-100"
|
|
10
10
|
],
|
package/dist/duration.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"duration.es.js","sources":["../src/components/duration/Duration.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst textFieldVariants = tv({\r\n base: [\r\n \"flex items-center w-full rounded-sm border border-input text-text bg-transparent p-0 text-xs font-medium shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\r\n \"placeholder:text-text-300 hover:border-primary-400 focus-within:border-primary-400 focus-within:outline-none focus-within:ring focus-within:ring-primary-100\",\r\n \"aria-disabled:text-text-300 aria-disabled:bg-gray-100 aria-disabled:border-gray-100\",\r\n ],\r\n variants: {\r\n size: {\r\n sm: \"h-7\",\r\n md: \"h-8\",\r\n lg: \"h-11\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n },\r\n});\r\n\r\ninterface DurationProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof textFieldVariants> {\r\n disabled?: boolean;\r\n endAdornment?: React.ReactNode;\r\n startAdornment?: React.ReactNode;\r\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n value?: string;\r\n defaultValue?: string;\r\n showSeconds?: boolean;\r\n slotProps?: {\r\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\r\n };\r\n}\r\n\r\nconst Duration = React.forwardRef<HTMLInputElement, DurationProps>(\r\n (\r\n { className, slotProps, endAdornment, startAdornment, size, value: _value, onChange, defaultValue, disabled, showSeconds = false, ...props },\r\n ref,\r\n ) => {\r\n const getFormattedValue = React.useCallback(\r\n (val: string) => {\r\n const digits = val.replace(/\\D/g, \"\");\r\n const maxLength = showSeconds ? 6 : 4;\r\n const limitedDigits = digits.substring(0, maxLength).padEnd(maxLength, \"0\");\r\n\r\n let hours = limitedDigits.substring(0, 2);\r\n let minutes = limitedDigits.substring(2, 4);\r\n let seconds = showSeconds ? limitedDigits.substring(4, 6) : \"\";\r\n\r\n if (parseInt(hours, 10) > 23) hours = \"23\";\r\n if (parseInt(minutes, 10) > 59) minutes = \"59\";\r\n if (showSeconds && parseInt(seconds, 10) > 59) seconds = \"59\";\r\n\r\n let formatted = hours;\r\n if (maxLength >= 4) formatted += `:${minutes}`;\r\n if (showSeconds) formatted += `:${seconds}`;\r\n\r\n return formatted;\r\n },\r\n [showSeconds],\r\n );\r\n\r\n const [value, setValue] = React.useState(() => getFormattedValue(defaultValue || \"\"));\r\n const inputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\r\n\r\n React.useEffect(() => {\r\n if (_value !== undefined) {\r\n setValue(getFormattedValue(_value));\r\n }\r\n }, [_value, getFormattedValue]);\r\n\r\n const handleNumericInput = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n e.preventDefault();\r\n const input = e.currentTarget;\r\n const { key } = e;\r\n const selection = input.selectionStart ?? 0;\r\n const nextValue = value.substring(0, selection) + key + value.substring(selection + 1);\r\n const formatted = getFormattedValue(nextValue);\r\n setValue(formatted);\r\n\r\n if (onChange) {\r\n const syntheticEvent = { ...e, target: { ...e.target, value: formatted } };\r\n onChange(syntheticEvent as unknown as React.ChangeEvent<HTMLInputElement>);\r\n }\r\n\r\n requestAnimationFrame(() => {\r\n let nextCursor = selection + 1;\r\n if (formatted[nextCursor] === \":\") {\r\n nextCursor++;\r\n }\r\n input.setSelectionRange(nextCursor, nextCursor);\r\n });\r\n };\r\n\r\n const handleBackspace = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n e.preventDefault();\r\n const input = e.currentTarget;\r\n const selection = input.selectionStart ?? 0;\r\n if (selection === 0) return;\r\n\r\n let nextValue = \"\";\r\n let nextCursor = selection - 1;\r\n\r\n if (value[selection - 1] === \":\") {\r\n nextValue = `${value.substring(0, selection - 2)}0${value.substring(selection - 1)}`;\r\n nextCursor = selection - 2;\r\n } else {\r\n const currentValue = value.replace(/\\D/g, \"\");\r\n const cursorIndex = selection - Math.floor((selection - 1) / 3);\r\n const nextDigits = `${currentValue.substring(0, cursorIndex - 1)}0${currentValue.substring(cursorIndex)}`;\r\n nextValue = getFormattedValue(nextDigits);\r\n }\r\n\r\n const formatted = getFormattedValue(nextValue);\r\n setValue(formatted);\r\n\r\n if (onChange) {\r\n const syntheticEvent = { ...e, target: { ...e.target, value: formatted } };\r\n onChange(syntheticEvent as unknown as React.ChangeEvent<HTMLInputElement>);\r\n }\r\n\r\n requestAnimationFrame(() => {\r\n input.setSelectionRange(nextCursor, nextCursor);\r\n });\r\n };\r\n\r\n const handleArrowKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n e.preventDefault();\r\n const input = e.currentTarget;\r\n const { key } = e;\r\n const increment = key === \"ArrowUp\" ? 1 : -1;\r\n const parts = value.split(\":\").map(Number);\r\n const selection = input.selectionStart ?? 0;\r\n\r\n if (selection <= 2) {\r\n // Hours\r\n parts[0] = (parts[0] + increment + 24) % 24;\r\n } else if (selection >= 3 && selection <= 5) {\r\n // Minutes\r\n const newMinutes = parts[1] + increment;\r\n if (newMinutes >= 60) {\r\n parts[0] = (parts[0] + 1) % 24;\r\n parts[1] = newMinutes % 60;\r\n } else if (newMinutes < 0) {\r\n parts[0] = (parts[0] - 1 + 24) % 24;\r\n parts[1] = 59;\r\n } else {\r\n parts[1] = newMinutes;\r\n }\r\n } else if (showSeconds && selection >= 6) {\r\n // Seconds\r\n const newSeconds = parts[2] + increment;\r\n if (newSeconds >= 60) {\r\n parts[1] += 1;\r\n parts[2] = newSeconds % 60;\r\n } else if (newSeconds < 0) {\r\n parts[1] -= 1;\r\n parts[2] = 59;\r\n } else {\r\n parts[2] = newSeconds;\r\n }\r\n\r\n if (parts[1] >= 60) {\r\n parts[0] = (parts[0] + 1) % 24;\r\n parts[1] %= 60;\r\n } else if (parts[1] < 0) {\r\n parts[0] = (parts[0] - 1 + 24) % 24;\r\n parts[1] = 59;\r\n }\r\n }\r\n\r\n const newValue = parts.map(part => String(part).padStart(2, \"0\")).join(\":\");\r\n setValue(newValue);\r\n if (onChange) {\r\n onChange({ target: { value: newValue } } as React.ChangeEvent<HTMLInputElement>);\r\n }\r\n requestAnimationFrame(() => {\r\n input.setSelectionRange(selection, selection);\r\n });\r\n };\r\n\r\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n const { key, currentTarget } = e;\r\n const { selectionStart, selectionEnd } = currentTarget;\r\n\r\n if (key.length === 1 && /\\d/.test(key)) {\r\n handleNumericInput(e);\r\n } else if (key === \"Backspace\") {\r\n handleBackspace(e);\r\n } else if (key === \"ArrowUp\" || key === \"ArrowDown\") {\r\n handleArrowKey(e);\r\n } else if (key === \"ArrowRight\" || key === \"ArrowLeft\" || key.length > 1 || selectionStart !== selectionEnd) {\r\n // Allow navigation, control keys, and replacing a selection\r\n } else {\r\n e.preventDefault();\r\n }\r\n };\r\n\r\n return (\r\n <div {...props} className={cn(textFieldVariants({ size, className }))} aria-disabled={disabled}>\r\n {startAdornment}\r\n <input\r\n type=\"text\"\r\n inputMode=\"numeric\"\r\n ref={inputRef}\r\n onKeyDown={handleKeyDown}\r\n onChange={() => {}}\r\n value={value}\r\n placeholder={showSeconds ? \"HH:MM:SS\" : \"HH:MM\"}\r\n disabled={disabled}\r\n {...(slotProps?.inputProps ?? {})}\r\n className={cn(\r\n \"focus:outline-none w-full h-full py-1 rounded-sm file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-300\",\r\n !startAdornment ? \"px-3\" : \"ps-1 pe-3\",\r\n slotProps?.inputProps?.className,\r\n )}\r\n />\r\n\r\n {endAdornment}\r\n </div>\r\n );\r\n },\r\n);\r\nDuration.displayName = \"Duration\";\r\n\r\nexport { Duration, type DurationProps };\r\n"],"names":["textFieldVariants","tv","Duration","React","className","slotProps","endAdornment","startAdornment","size","_value","onChange","defaultValue","disabled","showSeconds","props","ref","getFormattedValue","val","digits","maxLength","limitedDigits","hours","minutes","seconds","formatted","value","setValue","inputRef","handleNumericInput","input","key","selection","nextValue","syntheticEvent","nextCursor","handleBackspace","currentValue","cursorIndex","nextDigits","handleArrowKey","increment","parts","newMinutes","newSeconds","newValue","part","handleKeyDown","currentTarget","selectionStart","selectionEnd","jsxs","cn","jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"duration.es.js","sources":["../src/components/duration/Duration.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst textFieldVariants = tv({\r\n base: [\r\n \"flex items-center w-full rounded-sm border border-input text-text bg-transparent p-0 text-xs [&_input]:text-xs font-medium shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\r\n \"placeholder:text-text-300 hover:border-primary-400 focus-within:border-primary-400 focus-within:outline-none focus-within:ring focus-within:ring-primary-100\",\r\n \"aria-disabled:text-text-300 aria-disabled:bg-gray-100 aria-disabled:border-gray-100\",\r\n ],\r\n variants: {\r\n size: {\r\n sm: \"h-7\",\r\n md: \"h-8\",\r\n lg: \"h-11\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n },\r\n});\r\n\r\ninterface DurationProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof textFieldVariants> {\r\n disabled?: boolean;\r\n endAdornment?: React.ReactNode;\r\n startAdornment?: React.ReactNode;\r\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n value?: string;\r\n defaultValue?: string;\r\n showSeconds?: boolean;\r\n slotProps?: {\r\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\r\n };\r\n}\r\n\r\nconst Duration = React.forwardRef<HTMLInputElement, DurationProps>(\r\n (\r\n { className, slotProps, endAdornment, startAdornment, size, value: _value, onChange, defaultValue, disabled, showSeconds = false, ...props },\r\n ref,\r\n ) => {\r\n const getFormattedValue = React.useCallback(\r\n (val: string) => {\r\n const digits = val.replace(/\\D/g, \"\");\r\n const maxLength = showSeconds ? 6 : 4;\r\n const limitedDigits = digits.substring(0, maxLength).padEnd(maxLength, \"0\");\r\n\r\n let hours = limitedDigits.substring(0, 2);\r\n let minutes = limitedDigits.substring(2, 4);\r\n let seconds = showSeconds ? limitedDigits.substring(4, 6) : \"\";\r\n\r\n if (parseInt(hours, 10) > 23) hours = \"23\";\r\n if (parseInt(minutes, 10) > 59) minutes = \"59\";\r\n if (showSeconds && parseInt(seconds, 10) > 59) seconds = \"59\";\r\n\r\n let formatted = hours;\r\n if (maxLength >= 4) formatted += `:${minutes}`;\r\n if (showSeconds) formatted += `:${seconds}`;\r\n\r\n return formatted;\r\n },\r\n [showSeconds],\r\n );\r\n\r\n const [value, setValue] = React.useState(() => getFormattedValue(defaultValue || \"\"));\r\n const inputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\r\n\r\n React.useEffect(() => {\r\n if (_value !== undefined) {\r\n setValue(getFormattedValue(_value));\r\n }\r\n }, [_value, getFormattedValue]);\r\n\r\n const handleNumericInput = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n e.preventDefault();\r\n const input = e.currentTarget;\r\n const { key } = e;\r\n const selection = input.selectionStart ?? 0;\r\n const nextValue = value.substring(0, selection) + key + value.substring(selection + 1);\r\n const formatted = getFormattedValue(nextValue);\r\n setValue(formatted);\r\n\r\n if (onChange) {\r\n const syntheticEvent = { ...e, target: { ...e.target, value: formatted } };\r\n onChange(syntheticEvent as unknown as React.ChangeEvent<HTMLInputElement>);\r\n }\r\n\r\n requestAnimationFrame(() => {\r\n let nextCursor = selection + 1;\r\n if (formatted[nextCursor] === \":\") {\r\n nextCursor++;\r\n }\r\n input.setSelectionRange(nextCursor, nextCursor);\r\n });\r\n };\r\n\r\n const handleBackspace = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n e.preventDefault();\r\n const input = e.currentTarget;\r\n const selection = input.selectionStart ?? 0;\r\n if (selection === 0) return;\r\n\r\n let nextValue = \"\";\r\n let nextCursor = selection - 1;\r\n\r\n if (value[selection - 1] === \":\") {\r\n nextValue = `${value.substring(0, selection - 2)}0${value.substring(selection - 1)}`;\r\n nextCursor = selection - 2;\r\n } else {\r\n const currentValue = value.replace(/\\D/g, \"\");\r\n const cursorIndex = selection - Math.floor((selection - 1) / 3);\r\n const nextDigits = `${currentValue.substring(0, cursorIndex - 1)}0${currentValue.substring(cursorIndex)}`;\r\n nextValue = getFormattedValue(nextDigits);\r\n }\r\n\r\n const formatted = getFormattedValue(nextValue);\r\n setValue(formatted);\r\n\r\n if (onChange) {\r\n const syntheticEvent = { ...e, target: { ...e.target, value: formatted } };\r\n onChange(syntheticEvent as unknown as React.ChangeEvent<HTMLInputElement>);\r\n }\r\n\r\n requestAnimationFrame(() => {\r\n input.setSelectionRange(nextCursor, nextCursor);\r\n });\r\n };\r\n\r\n const handleArrowKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n e.preventDefault();\r\n const input = e.currentTarget;\r\n const { key } = e;\r\n const increment = key === \"ArrowUp\" ? 1 : -1;\r\n const parts = value.split(\":\").map(Number);\r\n const selection = input.selectionStart ?? 0;\r\n\r\n if (selection <= 2) {\r\n // Hours\r\n parts[0] = (parts[0] + increment + 24) % 24;\r\n } else if (selection >= 3 && selection <= 5) {\r\n // Minutes\r\n const newMinutes = parts[1] + increment;\r\n if (newMinutes >= 60) {\r\n parts[0] = (parts[0] + 1) % 24;\r\n parts[1] = newMinutes % 60;\r\n } else if (newMinutes < 0) {\r\n parts[0] = (parts[0] - 1 + 24) % 24;\r\n parts[1] = 59;\r\n } else {\r\n parts[1] = newMinutes;\r\n }\r\n } else if (showSeconds && selection >= 6) {\r\n // Seconds\r\n const newSeconds = parts[2] + increment;\r\n if (newSeconds >= 60) {\r\n parts[1] += 1;\r\n parts[2] = newSeconds % 60;\r\n } else if (newSeconds < 0) {\r\n parts[1] -= 1;\r\n parts[2] = 59;\r\n } else {\r\n parts[2] = newSeconds;\r\n }\r\n\r\n if (parts[1] >= 60) {\r\n parts[0] = (parts[0] + 1) % 24;\r\n parts[1] %= 60;\r\n } else if (parts[1] < 0) {\r\n parts[0] = (parts[0] - 1 + 24) % 24;\r\n parts[1] = 59;\r\n }\r\n }\r\n\r\n const newValue = parts.map(part => String(part).padStart(2, \"0\")).join(\":\");\r\n setValue(newValue);\r\n if (onChange) {\r\n onChange({ target: { value: newValue } } as React.ChangeEvent<HTMLInputElement>);\r\n }\r\n requestAnimationFrame(() => {\r\n input.setSelectionRange(selection, selection);\r\n });\r\n };\r\n\r\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n const { key, currentTarget } = e;\r\n const { selectionStart, selectionEnd } = currentTarget;\r\n\r\n if (key.length === 1 && /\\d/.test(key)) {\r\n handleNumericInput(e);\r\n } else if (key === \"Backspace\") {\r\n handleBackspace(e);\r\n } else if (key === \"ArrowUp\" || key === \"ArrowDown\") {\r\n handleArrowKey(e);\r\n } else if (key === \"ArrowRight\" || key === \"ArrowLeft\" || key.length > 1 || selectionStart !== selectionEnd) {\r\n // Allow navigation, control keys, and replacing a selection\r\n } else {\r\n e.preventDefault();\r\n }\r\n };\r\n\r\n return (\r\n <div {...props} className={cn(textFieldVariants({ size, className }))} aria-disabled={disabled}>\r\n {startAdornment}\r\n <input\r\n type=\"text\"\r\n inputMode=\"numeric\"\r\n ref={inputRef}\r\n onKeyDown={handleKeyDown}\r\n onChange={() => {}}\r\n value={value}\r\n placeholder={showSeconds ? \"HH:MM:SS\" : \"HH:MM\"}\r\n disabled={disabled}\r\n {...(slotProps?.inputProps ?? {})}\r\n className={cn(\r\n \"focus:outline-none w-full h-full py-1 rounded-sm file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-300\",\r\n !startAdornment ? \"px-3\" : \"ps-1 pe-3\",\r\n slotProps?.inputProps?.className,\r\n )}\r\n />\r\n\r\n {endAdornment}\r\n </div>\r\n );\r\n },\r\n);\r\nDuration.displayName = \"Duration\";\r\n\r\nexport { Duration, type DurationProps };\r\n"],"names":["textFieldVariants","tv","Duration","React","className","slotProps","endAdornment","startAdornment","size","_value","onChange","defaultValue","disabled","showSeconds","props","ref","getFormattedValue","val","digits","maxLength","limitedDigits","hours","minutes","seconds","formatted","value","setValue","inputRef","handleNumericInput","input","key","selection","nextValue","syntheticEvent","nextCursor","handleBackspace","currentValue","cursorIndex","nextDigits","handleArrowKey","increment","parts","newMinutes","newSeconds","newValue","part","handleKeyDown","currentTarget","selectionStart","selectionEnd","jsxs","cn","jsx"],"mappings":"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"}
|
|
@@ -1,61 +1,59 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
const O = (u) => {
|
|
1
|
+
import { jsx as e, jsxs as a } from "react/jsx-runtime";
|
|
2
|
+
import { FormField as f, FormItem as M, FormLabel as P, FormControl as S, FormMessage as C } from "./form.es.js";
|
|
3
|
+
import { MultiSelect as j } from "./multiselect.es.js";
|
|
4
|
+
const I = (n) => {
|
|
6
5
|
const {
|
|
7
|
-
name:
|
|
8
|
-
control:
|
|
9
|
-
defaultValue:
|
|
10
|
-
disabled:
|
|
11
|
-
readOnly:
|
|
12
|
-
rules:
|
|
13
|
-
shouldUnregister:
|
|
6
|
+
name: s,
|
|
7
|
+
control: m,
|
|
8
|
+
defaultValue: d,
|
|
9
|
+
disabled: l,
|
|
10
|
+
readOnly: i,
|
|
11
|
+
rules: u,
|
|
12
|
+
shouldUnregister: c,
|
|
14
13
|
label: p,
|
|
15
|
-
options:
|
|
16
|
-
loading:
|
|
17
|
-
loadingText:
|
|
18
|
-
placeholder:
|
|
19
|
-
slotProps:
|
|
20
|
-
required:
|
|
21
|
-
...
|
|
22
|
-
} =
|
|
23
|
-
b.onChange(l);
|
|
24
|
-
};
|
|
14
|
+
options: g,
|
|
15
|
+
loading: h,
|
|
16
|
+
loadingText: F,
|
|
17
|
+
placeholder: x,
|
|
18
|
+
slotProps: r,
|
|
19
|
+
required: t,
|
|
20
|
+
...b
|
|
21
|
+
} = n;
|
|
25
22
|
return /* @__PURE__ */ e(
|
|
26
|
-
|
|
23
|
+
f,
|
|
27
24
|
{
|
|
28
|
-
control:
|
|
29
|
-
name:
|
|
30
|
-
defaultValue:
|
|
31
|
-
disabled:
|
|
32
|
-
rules:
|
|
33
|
-
shouldUnregister:
|
|
34
|
-
render: ({ field:
|
|
35
|
-
/* @__PURE__ */
|
|
25
|
+
control: m,
|
|
26
|
+
name: s,
|
|
27
|
+
defaultValue: d,
|
|
28
|
+
disabled: l,
|
|
29
|
+
rules: u,
|
|
30
|
+
shouldUnregister: c,
|
|
31
|
+
render: ({ field: o }) => /* @__PURE__ */ a(M, { ...b, children: [
|
|
32
|
+
/* @__PURE__ */ a(P, { ...r?.formLabelProps ?? {}, children: [
|
|
36
33
|
p,
|
|
37
|
-
|
|
34
|
+
t && /* @__PURE__ */ e("span", { className: "text-danger text-sm leading-4", children: "*" })
|
|
38
35
|
] }),
|
|
39
|
-
/* @__PURE__ */ e(
|
|
40
|
-
|
|
36
|
+
/* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(
|
|
37
|
+
j,
|
|
41
38
|
{
|
|
42
|
-
"aria-required":
|
|
43
|
-
options:
|
|
44
|
-
onValueChange:
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
39
|
+
"aria-required": t,
|
|
40
|
+
options: g,
|
|
41
|
+
onValueChange: o.onChange,
|
|
42
|
+
onBlur: o.onBlur,
|
|
43
|
+
placeholder: x,
|
|
44
|
+
value: o.value,
|
|
45
|
+
loading: h,
|
|
46
|
+
loadingText: F,
|
|
47
|
+
disabled: l || i,
|
|
48
|
+
...r?.multiSelectProps ?? {}
|
|
51
49
|
}
|
|
52
50
|
) }),
|
|
53
|
-
/* @__PURE__ */ e(
|
|
51
|
+
/* @__PURE__ */ e(C, { ...r?.formMessageProps ?? {} })
|
|
54
52
|
] })
|
|
55
53
|
}
|
|
56
54
|
);
|
|
57
55
|
};
|
|
58
56
|
export {
|
|
59
|
-
|
|
57
|
+
I as FormMultiSelect
|
|
60
58
|
};
|
|
61
59
|
//# sourceMappingURL=formmultiselect.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formmultiselect.es.js","sources":["../src/components/form-multi-select/FormMultiSelect.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ControllerProps, FieldPath, FieldValues
|
|
1
|
+
{"version":3,"file":"formmultiselect.es.js","sources":["../src/components/form-multi-select/FormMultiSelect.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ControllerProps, FieldPath, FieldValues } from \"react-hook-form\";\r\n\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { MultiSelect, MultiSelectProps } from \"../multi-select/MultiSelect\";\r\n\r\ntype FormMultiSelectProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<\r\n ControllerProps<TFieldValues, TName>,\r\n \"render\"\r\n> &\r\n React.ComponentProps<typeof FormItem> & {\r\n label: string;\r\n loading?: boolean;\r\n loadingText?: string;\r\n options: MultiSelectProps<string>[\"options\"];\r\n placeholder?: string;\r\n required?: boolean;\r\n readOnly?: boolean;\r\n slotProps?: {\r\n multiSelectProps?: Omit<\r\n React.ComponentProps<typeof MultiSelect>,\r\n \"onValueChange\" | \"value\" | \"options\" | \"loading\" | \"loadingText\" | \"placeholder\" | \"disabled\"\r\n >;\r\n formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n };\r\n };\r\n\r\nconst FormMultiSelect = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(\r\n props: FormMultiSelectProps<TFieldValues, TName>,\r\n) => {\r\n const {\r\n name,\r\n control,\r\n defaultValue,\r\n disabled,\r\n readOnly,\r\n rules,\r\n shouldUnregister,\r\n label,\r\n options,\r\n loading,\r\n loadingText,\r\n placeholder,\r\n slotProps,\r\n required,\r\n ...formItemProps\r\n } = props;\r\n\r\n return (\r\n <FormField\r\n control={control}\r\n name={name}\r\n defaultValue={defaultValue}\r\n disabled={disabled}\r\n rules={rules}\r\n shouldUnregister={shouldUnregister}\r\n render={({ field }) => {\r\n return (\r\n <FormItem {...formItemProps}>\r\n <FormLabel {...(slotProps?.formLabelProps ?? {})}>\r\n {label}\r\n {required && <span className=\"text-danger text-sm leading-4\">*</span>}\r\n </FormLabel>\r\n <FormControl>\r\n <MultiSelect\r\n aria-required={required}\r\n options={options}\r\n onValueChange={field.onChange}\r\n onBlur={field.onBlur}\r\n placeholder={placeholder}\r\n value={field.value}\r\n loading={loading}\r\n loadingText={loadingText}\r\n disabled={disabled || readOnly}\r\n {...(slotProps?.multiSelectProps ?? {})}\r\n />\r\n </FormControl>\r\n\r\n <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n </FormItem>\r\n );\r\n }}\r\n />\r\n );\r\n};\r\nexport { FormMultiSelect, type FormMultiSelectProps };\r\n"],"names":["FormMultiSelect","props","name","control","defaultValue","disabled","readOnly","rules","shouldUnregister","label","options","loading","loadingText","placeholder","slotProps","required","formItemProps","jsx","FormField","field","jsxs","FormItem","FormLabel","FormControl","MultiSelect","FormMessage"],"mappings":";;;AA6BA,MAAMA,IAAkB,CACtBC,MACG;AACH,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDf;AAEJ,SACE,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAf;AAAA,MACA,MAAAD;AAAA,MACA,cAAAE;AAAA,MACA,UAAAC;AAAA,MACA,OAAAE;AAAA,MACA,kBAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAW,QAEP,gBAAAC,EAACC,GAAA,EAAU,GAAGL,GACZ,UAAA;AAAA,QAAA,gBAAAI,EAACE,GAAA,EAAW,GAAIR,GAAW,kBAAkB,CAAA,GAC1C,UAAA;AAAA,UAAAL;AAAA,UACAM,KAAY,gBAAAE,EAAC,QAAA,EAAK,WAAU,iCAAgC,UAAA,IAAA,CAAC;AAAA,QAAA,GAChE;AAAA,0BACCM,GAAA,EACC,UAAA,gBAAAN;AAAA,UAACO;AAAAA,UAAA;AAAA,YACC,iBAAeT;AAAA,YACf,SAAAL;AAAA,YACA,eAAeS,EAAM;AAAA,YACrB,QAAQA,EAAM;AAAA,YACd,aAAAN;AAAA,YACA,OAAOM,EAAM;AAAA,YACb,SAAAR;AAAA,YACA,aAAAC;AAAA,YACA,UAAUP,KAAYC;AAAA,YACrB,GAAIQ,GAAW,oBAAoB,CAAA;AAAA,UAAC;AAAA,QAAA,GAEzC;AAAA,0BAECW,GAAA,EAAa,GAAIX,GAAW,oBAAoB,CAAA,EAAC,CAAI;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EAAA;AAGN;"}
|
|
@@ -30,7 +30,7 @@ const T = ({
|
|
|
30
30
|
{
|
|
31
31
|
variant: "text",
|
|
32
32
|
className: m(
|
|
33
|
-
"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-
|
|
33
|
+
"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
|
|
34
34
|
h
|
|
35
35
|
),
|
|
36
36
|
"data-placeholder": a ? void 0 : "",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobiledatepicker.es.js","sources":["../src/components/date-picker/MobileDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { PropsBase, PropsSingle } from \"react-day-picker\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"../dialog/Dialog\";\r\n\r\ntype MobileDatePickerProps = PropsBase &\r\n Omit<PropsSingle, \"mode\"> & {\r\n formatStr?: string;\r\n placeholder?: string;\r\n calendarClassName?: string;\r\n selected?: Date;\r\n required?: boolean;\r\n cancelText?: string;\r\n applyText?: string;\r\n onSelect?: (date: Date | undefined) => void;\r\n disabled?: boolean;\r\n };\r\n\r\nconst MobileDatePicker: React.FC<MobileDatePickerProps> = ({\r\n formatStr,\r\n selected,\r\n placeholder,\r\n className,\r\n calendarClassName,\r\n cancelText,\r\n applyText,\r\n onSelect,\r\n disabled,\r\n ...props\r\n}) => {\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(selected);\r\n\r\n const handleCancel = () => {\r\n setIsOpen(false);\r\n setSelectedDate(selected);\r\n };\r\n\r\n const handleApply = () => {\r\n onSelect?.(selectedDate);\r\n setIsOpen(false);\r\n };\r\n\r\n return (\r\n <>\r\n <Button\r\n variant=\"text\"\r\n className={cn(\r\n \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-
|
|
1
|
+
{"version":3,"file":"mobiledatepicker.es.js","sources":["../src/components/date-picker/MobileDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { PropsBase, PropsSingle } from \"react-day-picker\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"../dialog/Dialog\";\r\n\r\ntype MobileDatePickerProps = PropsBase &\r\n Omit<PropsSingle, \"mode\"> & {\r\n formatStr?: string;\r\n placeholder?: string;\r\n calendarClassName?: string;\r\n selected?: Date;\r\n required?: boolean;\r\n cancelText?: string;\r\n applyText?: string;\r\n onSelect?: (date: Date | undefined) => void;\r\n disabled?: boolean;\r\n };\r\n\r\nconst MobileDatePicker: React.FC<MobileDatePickerProps> = ({\r\n formatStr,\r\n selected,\r\n placeholder,\r\n className,\r\n calendarClassName,\r\n cancelText,\r\n applyText,\r\n onSelect,\r\n disabled,\r\n ...props\r\n}) => {\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(selected);\r\n\r\n const handleCancel = () => {\r\n setIsOpen(false);\r\n setSelectedDate(selected);\r\n };\r\n\r\n const handleApply = () => {\r\n onSelect?.(selectedDate);\r\n setIsOpen(false);\r\n };\r\n\r\n return (\r\n <>\r\n <Button\r\n variant=\"text\"\r\n className={cn(\r\n \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n className,\r\n )}\r\n data-placeholder={!selected ? \"\" : undefined}\r\n onClick={() => setIsOpen(true)}\r\n aria-label={selected ? `Selected date: ${format(selected, formatStr ?? \"yyyy/MM/dd\")}` : \"Pick a date\"}\r\n disabled={disabled}\r\n >\r\n {selected ? format(selected, formatStr ?? \"eee, MMM dd\") : <span>{placeholder ?? \"Pick a date\"}</span>}\r\n <CalendarIcon className=\"mr-2 h-5 w-5 ms-auto\" />\r\n </Button>\r\n <Dialog open={isOpen} onOpenChange={handleCancel}>\r\n <DialogContent className=\"h-dscreen w-screen p-0 flex flex-col gap-0 data-[state=open]:animate-slide-from-bottom data-[state=closed]:animate-slide-to-bottom overflow-auto max-w-screen-2xl sm:rounded-none\">\r\n <DialogHeader className=\"p-4 border-b border-b-gray-200\">\r\n <DialogTitle asChild>\r\n <div className=\"text-sm font-bold space-y-1 mt-3\">\r\n <h5 className=\"text-text-300\">{selectedDate?.getFullYear() ?? <pre> </pre>}</h5>\r\n <h6 className=\"\">{selectedDate ? format(selectedDate, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\r\n </div>\r\n </DialogTitle>\r\n <VisuallyHidden>\r\n <DialogDescription>{\"Date Picker\"}</DialogDescription>\r\n </VisuallyHidden>\r\n </DialogHeader>\r\n <div className=\"flex-1 flex flex-col items-center p-4\">\r\n <Calendar\r\n defaultMonth={selected}\r\n startMonth={new Date(2000, 0, 1)}\r\n endMonth={new Date(new Date().getFullYear() + 2, 11, 31)}\r\n {...props}\r\n mode=\"single\"\r\n selected={selectedDate}\r\n onSelect={setSelectedDate}\r\n className={cn(\"p-0\", calendarClassName)}\r\n />\r\n <div className=\"flex justify-center items-center gap-4 mt-auto w-full\">\r\n <Button variant=\"text\" className=\"flex-1 h-10\" onClick={handleCancel}>\r\n {cancelText ?? \"Cancel\"}\r\n </Button>\r\n <Button variant=\"primary\" className=\"flex-1 h-10\" onClick={handleApply}>\r\n {applyText ?? \"Apply\"}\r\n </Button>\r\n </div>\r\n </div>\r\n </DialogContent>\r\n </Dialog>\r\n </>\r\n );\r\n};\r\n\r\nexport { MobileDatePicker, type MobileDatePickerProps };\r\n"],"names":["MobileDatePicker","formatStr","selected","placeholder","className","calendarClassName","cancelText","applyText","onSelect","disabled","props","isOpen","setIsOpen","React","selectedDate","setSelectedDate","handleCancel","handleApply","jsxs","Fragment","Button","cn","format","jsx","CalendarIcon","Dialog","DialogContent","DialogHeader","DialogTitle","VisuallyHidden","DialogDescription","Calendar"],"mappings":"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"}
|