@medusajs/ui 2.0.0 → 2.2.0
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/cjs/components/button/button.js +8 -8
- package/dist/cjs/components/button/button.js.map +1 -1
- package/dist/cjs/components/calendar/calendar.js +1 -1
- package/dist/cjs/components/calendar/calendar.js.map +1 -1
- package/dist/cjs/components/checkbox/checkbox.js +1 -1
- package/dist/cjs/components/checkbox/checkbox.js.map +1 -1
- package/dist/cjs/components/command-bar/command-bar.js +5 -5
- package/dist/cjs/components/command-bar/command-bar.js.map +1 -1
- package/dist/cjs/components/currency-input/currency-input.js +10 -6
- package/dist/cjs/components/currency-input/currency-input.js.map +1 -1
- package/dist/cjs/components/date-picker/date-picker.js +165 -70
- package/dist/cjs/components/date-picker/date-picker.js.map +1 -1
- package/dist/cjs/components/dropdown-menu/dropdown-menu.js +7 -7
- package/dist/cjs/components/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/cjs/components/icon-button/icon-button.js +8 -8
- package/dist/cjs/components/icon-button/icon-button.js.map +1 -1
- package/dist/cjs/components/input/input.js +1 -1
- package/dist/cjs/components/input/input.js.map +1 -1
- package/dist/cjs/components/popover/index.d.ts +1 -0
- package/dist/cjs/components/popover/index.js +5 -0
- package/dist/cjs/components/popover/index.js.map +1 -0
- package/dist/cjs/components/popover/popover.d.ts +17 -0
- package/dist/cjs/components/popover/popover.js +41 -0
- package/dist/cjs/components/popover/popover.js.map +1 -0
- package/dist/cjs/components/radio-group/radio-group.d.ts +5 -0
- package/dist/cjs/components/radio-group/radio-group.js +25 -4
- package/dist/cjs/components/radio-group/radio-group.js.map +1 -1
- package/dist/cjs/components/select/select.js +3 -7
- package/dist/cjs/components/select/select.js.map +1 -1
- package/dist/cjs/components/table/table.js +3 -4
- package/dist/cjs/components/table/table.js.map +1 -1
- package/dist/cjs/components/text/text.d.ts +1 -0
- package/dist/cjs/components/text/text.js +64 -7
- package/dist/cjs/components/text/text.js.map +1 -1
- package/dist/cjs/components/textarea/textarea.js +1 -1
- package/dist/cjs/components/textarea/textarea.js.map +1 -1
- package/dist/cjs/components/time-input/time-input.js +1 -1
- package/dist/cjs/components/time-input/time-input.js.map +1 -1
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.js +3 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/button/button.js +8 -8
- package/dist/esm/components/button/button.js.map +1 -1
- package/dist/esm/components/calendar/calendar.js +1 -1
- package/dist/esm/components/calendar/calendar.js.map +1 -1
- package/dist/esm/components/checkbox/checkbox.js +1 -1
- package/dist/esm/components/checkbox/checkbox.js.map +1 -1
- package/dist/esm/components/command-bar/command-bar.js +5 -5
- package/dist/esm/components/command-bar/command-bar.js.map +1 -1
- package/dist/esm/components/currency-input/currency-input.js +10 -6
- package/dist/esm/components/currency-input/currency-input.js.map +1 -1
- package/dist/esm/components/date-picker/date-picker.js +165 -70
- package/dist/esm/components/date-picker/date-picker.js.map +1 -1
- package/dist/esm/components/dropdown-menu/dropdown-menu.js +7 -7
- package/dist/esm/components/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/esm/components/icon-button/icon-button.js +8 -8
- package/dist/esm/components/icon-button/icon-button.js.map +1 -1
- package/dist/esm/components/input/input.js +1 -1
- package/dist/esm/components/input/input.js.map +1 -1
- package/dist/esm/components/popover/index.d.ts +1 -0
- package/dist/esm/components/popover/index.js +2 -0
- package/dist/esm/components/popover/index.js.map +1 -0
- package/dist/esm/components/popover/popover.d.ts +17 -0
- package/dist/esm/components/popover/popover.js +37 -0
- package/dist/esm/components/popover/popover.js.map +1 -0
- package/dist/esm/components/radio-group/radio-group.d.ts +5 -0
- package/dist/esm/components/radio-group/radio-group.js +25 -4
- package/dist/esm/components/radio-group/radio-group.js.map +1 -1
- package/dist/esm/components/select/select.js +4 -8
- package/dist/esm/components/select/select.js.map +1 -1
- package/dist/esm/components/table/table.js +3 -4
- package/dist/esm/components/table/table.js.map +1 -1
- package/dist/esm/components/text/text.d.ts +1 -0
- package/dist/esm/components/text/text.js +64 -7
- package/dist/esm/components/text/text.js.map +1 -1
- package/dist/esm/components/textarea/textarea.js +1 -1
- package/dist/esm/components/textarea/textarea.js.map +1 -1
- package/dist/esm/components/time-input/time-input.js +1 -1
- package/dist/esm/components/time-input/time-input.js.map +1 -1
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -7,18 +7,18 @@ const class_variance_authority_1 = require("class-variance-authority");
|
|
|
7
7
|
const React = tslib_1.__importStar(require("react"));
|
|
8
8
|
const clx_1 = require("../../utils/clx");
|
|
9
9
|
const icons_1 = require("@medusajs/icons");
|
|
10
|
-
const buttonVariants = (0, class_variance_authority_1.cva)((0, clx_1.clx)("transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md
|
|
10
|
+
const buttonVariants = (0, class_variance_authority_1.cva)((0, clx_1.clx)("transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none", "disabled:bg-ui-bg-disabled disabled:border-ui-border-base disabled:text-ui-fg-disabled disabled:shadow-buttons-neutral disabled:after:hidden", "after:transition-fg after:absolute after:inset-0 after:content-['']"), {
|
|
11
11
|
variants: {
|
|
12
12
|
variant: {
|
|
13
|
-
primary: (0, clx_1.clx)("shadow-buttons-
|
|
14
|
-
secondary: (0, clx_1.clx)("shadow-buttons-neutral text-ui-fg-base
|
|
15
|
-
transparent: (0, clx_1.clx)("text-ui-fg-base
|
|
16
|
-
danger: (0, clx_1.clx)("shadow-buttons-
|
|
13
|
+
primary: (0, clx_1.clx)("shadow-buttons-inverted text-ui-fg-on-inverted bg-ui-button-inverted after:button-inverted-gradient", "hover:bg-ui-button-inverted-hover hover:after:button-inverted-hover-gradient", "active:bg-ui-button-inverted-pressed active:after:button-inverted-pressed-gradient", "focus:!shadow-buttons-inverted-focus"),
|
|
14
|
+
secondary: (0, clx_1.clx)("shadow-buttons-neutral text-ui-fg-base bg-ui-button-neutral after:button-neutral-gradient", "hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient", "active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient", "focus:shadow-buttons-neutral-focus"),
|
|
15
|
+
transparent: (0, clx_1.clx)("after:hidden", "text-ui-fg-base bg-ui-button-transparent", "hover:bg-ui-button-transparent-hover", "active:bg-ui-button-transparent-pressed", "focus:shadow-buttons-neutral-focus focus:bg-ui-bg-base", "disabled:!bg-transparent disabled:!shadow-none"),
|
|
16
|
+
danger: (0, clx_1.clx)("shadow-buttons-colored shadow-buttons-danger text-ui-fg-on-color bg-ui-button-danger after:button-danger-gradient", "hover:bg-ui-button-danger-hover hover:after:button-danger-hover-gradient", "active:bg-ui-button-danger-pressed active:after:button-danger-pressed-gradient", "focus:shadow-buttons-danger-focus"),
|
|
17
17
|
},
|
|
18
18
|
size: {
|
|
19
|
-
base: "txt-compact-small-plus gap-x-1 px-
|
|
20
|
-
large: "txt-compact-medium-plus gap-x-1 px-
|
|
21
|
-
xlarge: "txt-compact-large-plus gap-x-1 px-
|
|
19
|
+
base: "txt-compact-small-plus gap-x-1.5 px-3 py-1.5",
|
|
20
|
+
large: "txt-compact-medium-plus gap-x-1.5 px-4 py-2.5",
|
|
21
|
+
xlarge: "txt-compact-large-plus gap-x-1.5 px-5 py-3.5",
|
|
22
22
|
},
|
|
23
23
|
},
|
|
24
24
|
defaultVariants: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/button/button.tsx"],"names":[],"mappings":";;;;AAAA,qDAA2C;AAC3C,uEAAiE;AACjE,qDAA8B;AAE9B,qCAAiC;AACjC,2CAAyC;AAEzC,MAAM,cAAc,GAAG,IAAA,8BAAG,EACxB,IAAA,SAAG,EACD,
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/button/button.tsx"],"names":[],"mappings":";;;;AAAA,qDAA2C;AAC3C,uEAAiE;AACjE,qDAA8B;AAE9B,qCAAiC;AACjC,2CAAyC;AAEzC,MAAM,cAAc,GAAG,IAAA,8BAAG,EACxB,IAAA,SAAG,EACD,8GAA8G,EAC9G,8IAA8I,EAC9I,qEAAqE,CACtE,EACD;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,IAAA,SAAG,EACV,qGAAqG,EACrG,8EAA8E,EAC9E,oFAAoF,EACpF,sCAAsC,CACvC;YACD,SAAS,EAAE,IAAA,SAAG,EACZ,2FAA2F,EAC3F,4EAA4E,EAC5E,kFAAkF,EAClF,oCAAoC,CACrC;YACD,WAAW,EAAE,IAAA,SAAG,EACd,cAAc,EACd,0CAA0C,EAC1C,sCAAsC,EACtC,yCAAyC,EACzC,wDAAwD,EACxD,gDAAgD,CACjD;YACD,MAAM,EAAE,IAAA,SAAG,EACT,mHAAmH,EACnH,0EAA0E,EAC1E,gFAAgF,EAChF,mCAAmC,CACpC;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,8CAA8C;YACpD,KAAK,EAAE,+CAA+C;YACtD,MAAM,EAAE,8CAA8C;SACvD;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAA;AA+DgB,wCAAc;AAtD/B,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CACE,EACE,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,SAAS,EACT,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,QAAQ,CAAA;IAE3C;;;;OAIG;IACH,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,SAAS,EAAE;YACb,OAAO,CACL,8BAAM,SAAS,EAAC,qBAAqB;gBACnC,6BACE,SAAS,EAAE,IAAA,SAAG,EACZ,gFAAgF,CACjF;oBAED,oBAAC,eAAO,IAAC,SAAS,EAAC,cAAc,GAAG,CAChC;gBACL,QAAQ,CACJ,CACR,CAAA;SACF;QAED,OAAO,QAAQ,CAAA;IACjB,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,SAAS,EAAE,IAAA,SAAG,EAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,EAC5D,QAAQ,EAAE,QAAQ,IAAI,SAAS,IAE9B,WAAW,EAAE,CACJ,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAGQ,wBAAM;AAFf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA","sourcesContent":["import { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\nimport { Spinner } from \"@medusajs/icons\"\n\nconst buttonVariants = cva(\n clx(\n \"transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none\",\n \"disabled:bg-ui-bg-disabled disabled:border-ui-border-base disabled:text-ui-fg-disabled disabled:shadow-buttons-neutral disabled:after:hidden\",\n \"after:transition-fg after:absolute after:inset-0 after:content-['']\"\n ),\n {\n variants: {\n variant: {\n primary: clx(\n \"shadow-buttons-inverted text-ui-fg-on-inverted bg-ui-button-inverted after:button-inverted-gradient\",\n \"hover:bg-ui-button-inverted-hover hover:after:button-inverted-hover-gradient\",\n \"active:bg-ui-button-inverted-pressed active:after:button-inverted-pressed-gradient\",\n \"focus:!shadow-buttons-inverted-focus\"\n ),\n secondary: clx(\n \"shadow-buttons-neutral text-ui-fg-base bg-ui-button-neutral after:button-neutral-gradient\",\n \"hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient\",\n \"active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient\",\n \"focus:shadow-buttons-neutral-focus\"\n ),\n transparent: clx(\n \"after:hidden\",\n \"text-ui-fg-base bg-ui-button-transparent\",\n \"hover:bg-ui-button-transparent-hover\",\n \"active:bg-ui-button-transparent-pressed\",\n \"focus:shadow-buttons-neutral-focus focus:bg-ui-bg-base\",\n \"disabled:!bg-transparent disabled:!shadow-none\"\n ),\n danger: clx(\n \"shadow-buttons-colored shadow-buttons-danger text-ui-fg-on-color bg-ui-button-danger after:button-danger-gradient\",\n \"hover:bg-ui-button-danger-hover hover:after:button-danger-hover-gradient\",\n \"active:bg-ui-button-danger-pressed active:after:button-danger-pressed-gradient\",\n \"focus:shadow-buttons-danger-focus\"\n ),\n },\n size: {\n base: \"txt-compact-small-plus gap-x-1.5 px-3 py-1.5\",\n large: \"txt-compact-medium-plus gap-x-1.5 px-4 py-2.5\",\n xlarge: \"txt-compact-large-plus gap-x-1.5 px-5 py-3.5\",\n },\n },\n defaultVariants: {\n size: \"base\",\n variant: \"primary\",\n },\n }\n)\n\ninterface ButtonProps\n extends React.ComponentPropsWithoutRef<\"button\">,\n VariantProps<typeof buttonVariants> {\n isLoading?: boolean\n asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = \"primary\",\n size = \"base\",\n className,\n asChild = false,\n children,\n isLoading = false,\n disabled,\n ...props\n },\n ref\n ) => {\n const Component = asChild ? Slot : \"button\"\n\n /**\n * In the case of a button where asChild is true, and isLoading is true, we ensure that\n * only on element is passed as a child to the Slot component. This is because the Slot\n * component only accepts a single child.\n */\n const renderInner = () => {\n if (isLoading) {\n return (\n <span className=\"pointer-events-none\">\n <div\n className={clx(\n \"bg-ui-bg-disabled absolute inset-0 flex items-center justify-center rounded-md\"\n )}\n >\n <Spinner className=\"animate-spin\" />\n </div>\n {children}\n </span>\n )\n }\n\n return children\n }\n\n return (\n <Component\n ref={ref}\n {...props}\n className={clx(buttonVariants({ variant, size }), className)}\n disabled={disabled || isLoading}\n >\n {renderInner()}\n </Component>\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"]}
|
|
@@ -23,7 +23,7 @@ const Calendar = ({ className, classNames, mode = "single", showOutsideDays = tr
|
|
|
23
23
|
head_cell: (0, clx_1.clx)("txt-compact-small-plus text-ui-fg-muted m-0 box-border flex h-8 w-8 items-center justify-center p-0"),
|
|
24
24
|
row: "flex w-full mt-2 gap-x-2",
|
|
25
25
|
cell: "txt-compact-small-plus relative rounded-md p-0 text-center focus-within:relative",
|
|
26
|
-
day: "txt-compact-small-plus text-ui-fg-base bg-ui-bg-base
|
|
26
|
+
day: "txt-compact-small-plus text-ui-fg-base bg-ui-bg-base hover:bg-ui-bg-base-hover focus:shadow-borders-interactive-with-focus h-8 w-8 rounded-md p-0 text-center outline-none transition-all",
|
|
27
27
|
day_selected: "bg-ui-bg-interactive text-ui-fg-on-color hover:bg-ui-bg-interactive focus:bg-ui-bg-interactive",
|
|
28
28
|
day_outside: "text-ui-fg-disabled aria-selected:text-ui-fg-on-color",
|
|
29
29
|
day_disabled: "text-ui-fg-disabled",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar.js","sourceRoot":"","sources":["../../../../src/components/calendar/calendar.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,2CAAmE;AACnE,qDAA8B;AAC9B,uDAMyB;AAEzB,qCAAiC;AACjC,gDAAmD;AAsBnD,MAAM,QAAQ,GAAG,CAAC,EAChB,SAAS,EACT,UAAU,EACV,IAAI,GAAG,QAAQ,EACf,eAAe,GAAG,IAAI,EACtB,GAAG,KAAK,EACM,EAAE,EAAE;IAClB,OAAO,CACL,oBAAC,4BAAS,IACR,IAAI,EAAE,IAAI,EACV,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,IAAA,SAAG,EAAC,SAAS,CAAC,EACzB,UAAU,EAAE;YACV,MAAM,EAAE,2BAA2B;YACnC,KAAK,EAAE,eAAe;YACtB,OAAO,EAAE,+CAA+C;YACxD,aAAa,EACX,gHAAgH;YAClH,GAAG,EAAE,kGAAkG;YACvG,UAAU,EAAE,IAAA,SAAG,EACb,IAAA,gCAAkB,EAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CACzD;YACD,mBAAmB,EAAE,oBAAoB;YACzC,eAAe,EAAE,qBAAqB;YACtC,KAAK,EAAE,kCAAkC;YACzC,QAAQ,EAAE,qBAAqB;YAC/B,SAAS,EAAE,IAAA,SAAG,EACZ,qGAAqG,CACtG;YACD,GAAG,EAAE,0BAA0B;YAC/B,IAAI,EAAE,kFAAkF;YACxF,GAAG,EAAE,
|
|
1
|
+
{"version":3,"file":"calendar.js","sourceRoot":"","sources":["../../../../src/components/calendar/calendar.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport { ChevronLeftMini, ChevronRightMini } from \"@medusajs/icons\"\nimport * as React from \"react\"\nimport {\n DayPicker,\n useDayRender,\n type DayPickerRangeProps,\n type DayPickerSingleProps,\n type DayProps,\n} from \"react-day-picker\"\n\nimport { clx } from \"@/utils/clx\"\nimport { iconButtonVariants } from \"../icon-button\"\n\ntype OmitKeys<T, K extends keyof T> = {\n [P in keyof T as P extends K ? never : P]: T[P]\n}\n\ntype KeysToOmit = \"showWeekNumber\" | \"captionLayout\" | \"mode\"\n\ntype SingleProps = OmitKeys<DayPickerSingleProps, KeysToOmit>\ntype RangeProps = OmitKeys<DayPickerRangeProps, KeysToOmit>\n\ntype CalendarProps =\n | ({\n mode: \"single\"\n } & SingleProps)\n | ({\n mode?: undefined\n } & SingleProps)\n | ({\n mode: \"range\"\n } & RangeProps)\n\nconst Calendar = ({\n className,\n classNames,\n mode = \"single\",\n showOutsideDays = true,\n ...props\n}: CalendarProps) => {\n return (\n <DayPicker\n mode={mode}\n showOutsideDays={showOutsideDays}\n className={clx(className)}\n classNames={{\n months: \"flex flex-col sm:flex-row\",\n month: \"space-y-2 p-3\",\n caption: \"flex justify-center relative items-center h-9\",\n caption_label:\n \"txt-compact-small-plus absolute bottom-0 left-0 right-0 top-1 flex items-center justify-center text-ui-fg-base\",\n nav: \"space-x-1 flex items-center bg-ui-bg-base-pressed rounded-md w-full h-full justify-between p-0.5\",\n nav_button: clx(\n iconButtonVariants({ variant: \"primary\", size: \"base\" })\n ),\n nav_button_previous: \"!absolute left-0.5\",\n nav_button_next: \"!absolute right-0.5\",\n table: \"w-full border-collapse space-y-1\",\n head_row: \"flex w-full gap-x-2\",\n head_cell: clx(\n \"txt-compact-small-plus text-ui-fg-muted m-0 box-border flex h-8 w-8 items-center justify-center p-0\"\n ),\n row: \"flex w-full mt-2 gap-x-2\",\n cell: \"txt-compact-small-plus relative rounded-md p-0 text-center focus-within:relative\",\n day: \"txt-compact-small-plus text-ui-fg-base bg-ui-bg-base hover:bg-ui-bg-base-hover focus:shadow-borders-interactive-with-focus h-8 w-8 rounded-md p-0 text-center outline-none transition-all\",\n day_selected:\n \"bg-ui-bg-interactive text-ui-fg-on-color hover:bg-ui-bg-interactive focus:bg-ui-bg-interactive\",\n day_outside: \"text-ui-fg-disabled aria-selected:text-ui-fg-on-color\",\n day_disabled: \"text-ui-fg-disabled\",\n day_range_middle:\n \"aria-selected:!bg-ui-bg-highlight aria-selected:!text-ui-fg-interactive\",\n day_hidden: \"invisible\",\n ...classNames,\n }}\n components={{\n IconLeft: () => <ChevronLeftMini />,\n IconRight: () => <ChevronRightMini />,\n Day: Day,\n }}\n {...(props as SingleProps & RangeProps)}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nconst Day = ({ date, displayMonth }: DayProps) => {\n const ref = React.useRef<HTMLButtonElement>(null)\n const { activeModifiers, buttonProps, divProps, isButton, isHidden } =\n useDayRender(date, displayMonth, ref)\n\n const { selected, today, disabled, range_middle } = activeModifiers\n\n React.useEffect(() => {\n if (selected) {\n ref.current?.focus()\n }\n }, [selected])\n\n if (isHidden) {\n return <></>\n }\n\n if (!isButton) {\n return (\n <div\n {...divProps}\n className={clx(\"flex items-center justify-center\", divProps.className)}\n />\n )\n }\n\n const {\n children: buttonChildren,\n className: buttonClassName,\n ...buttonPropsRest\n } = buttonProps\n\n return (\n <button\n ref={ref}\n {...buttonPropsRest}\n type=\"button\"\n className={clx(\"relative\", buttonClassName)}\n >\n {buttonChildren}\n {today && (\n <span\n className={clx(\n \"absolute right-[5px] top-[5px] h-1 w-1 rounded-full\",\n {\n \"bg-ui-fg-interactive\": !selected,\n \"bg-ui-fg-on-color\": selected,\n \"!bg-ui-fg-interactive\": selected && range_middle,\n \"bg-ui-fg-disabled\": disabled,\n }\n )}\n />\n )}\n </button>\n )\n}\n\nexport { Calendar }\n"]}
|
|
@@ -9,7 +9,7 @@ const React = tslib_1.__importStar(require("react"));
|
|
|
9
9
|
const clx_1 = require("../../utils/clx");
|
|
10
10
|
const Checkbox = React.forwardRef(({ className, checked, ...props }, ref) => {
|
|
11
11
|
return (React.createElement(Primitives.Root, { ...props, ref: ref, checked: checked, className: (0, clx_1.clx)("group relative inline-flex h-5 w-5 items-center justify-center outline-none ", className) },
|
|
12
|
-
React.createElement("div", { className: "text-ui-fg-on-inverted bg-ui-bg-base shadow-borders-base
|
|
12
|
+
React.createElement("div", { className: "text-ui-fg-on-inverted bg-ui-bg-base shadow-borders-base group-hover:bg-ui-bg-base-hover group-focus:!shadow-borders-interactive-with-focus group-data-[state=checked]:bg-ui-bg-interactive group-data-[state=checked]:shadow-borders-interactive-with-shadow group-data-[state=indeterminate]:bg-ui-bg-interactive group-data-[state=indeterminate]:shadow-borders-interactive-with-shadow [&_path]:shadow-details-contrast-on-bg-interactive group-disabled:text-ui-fg-disabled group-disabled:!bg-ui-bg-disabled group-disabled:!shadow-borders-base transition-fg h-[14px] w-[14px] rounded-[3px]" },
|
|
13
13
|
React.createElement(Primitives.Indicator, { className: "absolute inset-0" }, checked === "indeterminate" ? React.createElement(icons_1.MinusMini, null) : React.createElement(icons_1.CheckMini, null)))));
|
|
14
14
|
});
|
|
15
15
|
exports.Checkbox = Checkbox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,2CAAsD;AACtD,6EAAsD;AACtD,qDAA8B;AAE9B,qCAAiC;AAEjC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG/B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1C,OAAO,CACL,oBAAC,UAAU,CAAC,IAAI,OACV,KAAK,EACT,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,IAAA,SAAG,EACZ,8EAA8E,EAC9E,SAAS,CACV;QAED,6BAAK,SAAS,EAAC,
|
|
1
|
+
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,2CAAsD;AACtD,6EAAsD;AACtD,qDAA8B;AAE9B,qCAAiC;AAEjC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG/B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1C,OAAO,CACL,oBAAC,UAAU,CAAC,IAAI,OACV,KAAK,EACT,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,IAAA,SAAG,EACZ,8EAA8E,EAC9E,SAAS,CACV;QAED,6BAAK,SAAS,EAAC,ukBAAukB;YACplB,oBAAC,UAAU,CAAC,SAAS,IAAC,SAAS,EAAC,kBAAkB,IAC/C,OAAO,KAAK,eAAe,CAAC,CAAC,CAAC,oBAAC,iBAAS,OAAG,CAAC,CAAC,CAAC,oBAAC,iBAAS,OAAG,CACvC,CACnB,CACU,CACnB,CAAA;AACH,CAAC,CAAC,CAAA;AAGO,4BAAQ;AAFjB,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA","sourcesContent":["\"use client\"\n\nimport { CheckMini, MinusMini } from \"@medusajs/icons\"\nimport * as Primitives from \"@radix-ui/react-checkbox\"\nimport * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof Primitives.Root>,\n React.ComponentPropsWithoutRef<typeof Primitives.Root>\n>(({ className, checked, ...props }, ref) => {\n return (\n <Primitives.Root\n {...props}\n ref={ref}\n checked={checked}\n className={clx(\n \"group relative inline-flex h-5 w-5 items-center justify-center outline-none \",\n className\n )}\n >\n <div className=\"text-ui-fg-on-inverted bg-ui-bg-base shadow-borders-base group-hover:bg-ui-bg-base-hover group-focus:!shadow-borders-interactive-with-focus group-data-[state=checked]:bg-ui-bg-interactive group-data-[state=checked]:shadow-borders-interactive-with-shadow group-data-[state=indeterminate]:bg-ui-bg-interactive group-data-[state=indeterminate]:shadow-borders-interactive-with-shadow [&_path]:shadow-details-contrast-on-bg-interactive group-disabled:text-ui-fg-disabled group-disabled:!bg-ui-bg-disabled group-disabled:!shadow-borders-base transition-fg h-[14px] w-[14px] rounded-[3px]\">\n <Primitives.Indicator className=\"absolute inset-0\">\n {checked === \"indeterminate\" ? <MinusMini /> : <CheckMini />}\n </Primitives.Indicator>\n </div>\n </Primitives.Root>\n )\n})\nCheckbox.displayName = \"Checkbox\"\n\nexport { Checkbox }\n"]}
|
|
@@ -21,15 +21,15 @@ const Root = ({ open = false, onOpenChange, defaultOpen = false, disableAutoFocu
|
|
|
21
21
|
};
|
|
22
22
|
Root.displayName = "CommandBar";
|
|
23
23
|
const Value = React.forwardRef(({ className, ...props }, ref) => {
|
|
24
|
-
return (React.createElement("div", { ref: ref, className: (0, clx_1.clx)("txt-compact-small-plus text-ui-fg-
|
|
24
|
+
return (React.createElement("div", { ref: ref, className: (0, clx_1.clx)("txt-compact-small-plus text-ui-contrast-fg-secondary px-3 py-2.5", className), ...props }));
|
|
25
25
|
});
|
|
26
26
|
Value.displayName = "CommandBar.Value";
|
|
27
27
|
const Bar = React.forwardRef(({ className, ...props }, ref) => {
|
|
28
|
-
return (React.createElement("div", { ref: ref, className: (0, clx_1.clx)("
|
|
28
|
+
return (React.createElement("div", { ref: ref, className: (0, clx_1.clx)("bg-ui-contrast-bg-base relative flex items-center overflow-hidden rounded-full px-1", "after:shadow-elevation-flyout after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:content-['']", className), ...props }));
|
|
29
29
|
});
|
|
30
30
|
Bar.displayName = "CommandBar.Bar";
|
|
31
31
|
const Seperator = React.forwardRef(({ className, ...props }, ref) => {
|
|
32
|
-
return (React.createElement("div", { ref: ref, className: (0, clx_1.clx)("bg-ui-border-base h-10 w-px", className), ...props }));
|
|
32
|
+
return (React.createElement("div", { ref: ref, className: (0, clx_1.clx)("bg-ui-contrast-border-base h-10 w-px", className), ...props }));
|
|
33
33
|
});
|
|
34
34
|
Seperator.displayName = "CommandBar.Seperator";
|
|
35
35
|
const Command = React.forwardRef(({ className, type = "button", label, action, shortcut, disabled, ...props }, ref) => {
|
|
@@ -48,9 +48,9 @@ const Command = React.forwardRef(({ className, type = "button", label, action, s
|
|
|
48
48
|
document.removeEventListener("keydown", handleKeyDown);
|
|
49
49
|
};
|
|
50
50
|
}, [action, shortcut, disabled]);
|
|
51
|
-
return (React.createElement("button", { ref: ref, className: (0, clx_1.clx)("bg-ui-bg-base txt-compact-small-plus transition-fg text-ui-fg-
|
|
51
|
+
return (React.createElement("button", { ref: ref, className: (0, clx_1.clx)("bg-ui-contrast-bg-base txt-compact-small-plus transition-fg text-ui-contrast-fg-primary flex items-center gap-x-2 px-3 py-2.5 outline-none", "focus:bg-ui-contrast-bg-highlight focus:hover:bg-ui-contrast-bg-base-hover hover:bg-ui-contrast-bg-base-hover active:bg-ui-contrast-bg-base-pressed focus:active:bg-ui-contrast-bg-base-pressed disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled", "last-of-type:-mr-1 last-of-type:pr-4", className), type: type, onClick: action, ...props },
|
|
52
52
|
React.createElement("span", null, label),
|
|
53
|
-
React.createElement(kbd_1.Kbd,
|
|
53
|
+
React.createElement(kbd_1.Kbd, { className: "bg-ui-contrast-bg-subtle border-ui-contrast-border-base text-ui-contrast-fg-secondary" }, shortcut.toUpperCase())));
|
|
54
54
|
});
|
|
55
55
|
Command.displayName = "CommandBar.Command";
|
|
56
56
|
const CommandBar = Object.assign(Root, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command-bar.js","sourceRoot":"","sources":["../../../../src/components/command-bar/command-bar.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,yEAAkD;AAClD,uEAAgD;AAChD,qDAA8B;AAE9B,0CAAsC;AACtC,qCAAiC;AASjC,MAAM,IAAI,GAAG,CAAC,EACZ,IAAI,GAAG,KAAK,EACZ,YAAY,EACZ,WAAW,GAAG,KAAK,EACnB,gBAAgB,GAAG,IAAI,EACvB,QAAQ,GACQ,EAAE,EAAE;IACpB,OAAO,CACL,oBAAC,OAAO,CAAC,IAAI,IACX,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW;QAExB,oBAAC,MAAM,CAAC,IAAI;YACV,oBAAC,OAAO,CAAC,MAAM,IACb,SAAS,EAAE,IAAA,SAAG,EAAC,oDAAoD,CAAC,GACpE,CACU;QACd,oBAAC,OAAO,CAAC,MAAM;YACb,oBAAC,OAAO,CAAC,OAAO,IACd,IAAI,EAAC,KAAK,EACV,UAAU,EAAE,CAAC,EACb,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;oBACrB,IAAI,gBAAgB,EAAE;wBACpB,CAAC,CAAC,cAAc,EAAE,CAAA;qBACnB;gBACH,CAAC,EACD,SAAS,EAAE,IAAA,SAAG,EACZ,kVAAkV,CACnV,IAEA,QAAQ,CACO,CACH,CACJ,CAChB,CAAA;AACH,CAAC,CAAA;AACD,IAAI,CAAC,WAAW,GAAG,YAAY,CAAA;AAE/B,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAG5B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjC,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,SAAG,EACZ,
|
|
1
|
+
{"version":3,"file":"command-bar.js","sourceRoot":"","sources":["../../../../src/components/command-bar/command-bar.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,yEAAkD;AAClD,uEAAgD;AAChD,qDAA8B;AAE9B,0CAAsC;AACtC,qCAAiC;AASjC,MAAM,IAAI,GAAG,CAAC,EACZ,IAAI,GAAG,KAAK,EACZ,YAAY,EACZ,WAAW,GAAG,KAAK,EACnB,gBAAgB,GAAG,IAAI,EACvB,QAAQ,GACQ,EAAE,EAAE;IACpB,OAAO,CACL,oBAAC,OAAO,CAAC,IAAI,IACX,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW;QAExB,oBAAC,MAAM,CAAC,IAAI;YACV,oBAAC,OAAO,CAAC,MAAM,IACb,SAAS,EAAE,IAAA,SAAG,EAAC,oDAAoD,CAAC,GACpE,CACU;QACd,oBAAC,OAAO,CAAC,MAAM;YACb,oBAAC,OAAO,CAAC,OAAO,IACd,IAAI,EAAC,KAAK,EACV,UAAU,EAAE,CAAC,EACb,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;oBACrB,IAAI,gBAAgB,EAAE;wBACpB,CAAC,CAAC,cAAc,EAAE,CAAA;qBACnB;gBACH,CAAC,EACD,SAAS,EAAE,IAAA,SAAG,EACZ,kVAAkV,CACnV,IAEA,QAAQ,CACO,CACH,CACJ,CAChB,CAAA;AACH,CAAC,CAAA;AACD,IAAI,CAAC,WAAW,GAAG,YAAY,CAAA;AAE/B,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAG5B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjC,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,SAAG,EACZ,kEAAkE,EAClE,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AACF,KAAK,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEtC,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAG1B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjC,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,SAAG,EACZ,qFAAqF,EACrF,4HAA4H,EAC5H,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AACF,GAAG,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAElC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjC,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,SAAG,EAAC,sCAAsC,EAAE,SAAS,CAAC,KAC7D,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AACF,SAAS,CAAC,WAAW,GAAG,sBAAsB,CAAA;AAY9C,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAC9B,CACE,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAC3E,GAAG,EACH,EAAE;IACF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC7C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBAC1B,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,KAAK,CAAC,eAAe,EAAE,CAAA;gBACvB,MAAM,EAAE,CAAA;aACT;QACH,CAAC,CAAA;QAED,IAAI,CAAC,QAAQ,EAAE;YACb,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;SACpD;QAED,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;QACxD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEhC,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,SAAG,EACZ,4IAA4I,EAC5I,2PAA2P,EAC3P,sCAAsC,EACtC,SAAS,CACV,EACD,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,MAAM,KACX,KAAK;QAET,kCAAO,KAAK,CAAQ;QACpB,oBAAC,SAAG,IAAC,SAAS,EAAC,uFAAuF,IACnG,QAAQ,CAAC,WAAW,EAAE,CACnB,CACC,CACV,CAAA;AACH,CAAC,CACF,CAAA;AACD,OAAO,CAAC,WAAW,GAAG,oBAAoB,CAAA;AAE1C,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;IACrC,OAAO;IACP,KAAK;IACL,GAAG;IACH,SAAS;CACV,CAAC,CAAA;AAEO,gCAAU","sourcesContent":["\"use client\"\n\nimport * as Popover from \"@radix-ui/react-popover\"\nimport * as Portal from \"@radix-ui/react-portal\"\nimport * as React from \"react\"\n\nimport { Kbd } from \"@/components/kbd\"\nimport { clx } from \"@/utils/clx\"\n\ntype CommandBarProps = React.PropsWithChildren<{\n open?: boolean\n onOpenChange?: (open: boolean) => void\n defaultOpen?: boolean\n disableAutoFocus?: boolean\n}>\n\nconst Root = ({\n open = false,\n onOpenChange,\n defaultOpen = false,\n disableAutoFocus = true,\n children,\n}: CommandBarProps) => {\n return (\n <Popover.Root\n open={open}\n onOpenChange={onOpenChange}\n defaultOpen={defaultOpen}\n >\n <Portal.Root>\n <Popover.Anchor\n className={clx(\"fixed bottom-8 left-1/2 h-px w-px -translate-x-1/2\")}\n />\n </Portal.Root>\n <Popover.Portal>\n <Popover.Content\n side=\"top\"\n sideOffset={0}\n onOpenAutoFocus={(e) => {\n if (disableAutoFocus) {\n e.preventDefault()\n }\n }}\n className={clx(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n )}\n >\n {children}\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n )\n}\nRoot.displayName = \"CommandBar\"\n\nconst Value = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={clx(\n \"txt-compact-small-plus text-ui-contrast-fg-secondary px-3 py-2.5\",\n className\n )}\n {...props}\n />\n )\n})\nValue.displayName = \"CommandBar.Value\"\n\nconst Bar = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={clx(\n \"bg-ui-contrast-bg-base relative flex items-center overflow-hidden rounded-full px-1\",\n \"after:shadow-elevation-flyout after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:content-['']\",\n className\n )}\n {...props}\n />\n )\n})\nBar.displayName = \"CommandBar.Bar\"\n\nconst Seperator = React.forwardRef<\n HTMLDivElement,\n Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">\n>(({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={clx(\"bg-ui-contrast-border-base h-10 w-px\", className)}\n {...props}\n />\n )\n})\nSeperator.displayName = \"CommandBar.Seperator\"\n\ninterface CommandProps\n extends Omit<\n React.ComponentPropsWithoutRef<\"button\">,\n \"children\" | \"onClick\"\n > {\n action: () => void | Promise<void>\n label: string\n shortcut: string\n}\n\nconst Command = React.forwardRef<HTMLButtonElement, CommandProps>(\n (\n { className, type = \"button\", label, action, shortcut, disabled, ...props },\n ref\n ) => {\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === shortcut) {\n event.preventDefault()\n event.stopPropagation()\n action()\n }\n }\n\n if (!disabled) {\n document.addEventListener(\"keydown\", handleKeyDown)\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown)\n }\n }, [action, shortcut, disabled])\n\n return (\n <button\n ref={ref}\n className={clx(\n \"bg-ui-contrast-bg-base txt-compact-small-plus transition-fg text-ui-contrast-fg-primary flex items-center gap-x-2 px-3 py-2.5 outline-none\",\n \"focus:bg-ui-contrast-bg-highlight focus:hover:bg-ui-contrast-bg-base-hover hover:bg-ui-contrast-bg-base-hover active:bg-ui-contrast-bg-base-pressed focus:active:bg-ui-contrast-bg-base-pressed disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled\",\n \"last-of-type:-mr-1 last-of-type:pr-4\",\n className\n )}\n type={type}\n onClick={action}\n {...props}\n >\n <span>{label}</span>\n <Kbd className=\"bg-ui-contrast-bg-subtle border-ui-contrast-border-base text-ui-contrast-fg-secondary\">\n {shortcut.toUpperCase()}\n </Kbd>\n </button>\n )\n }\n)\nCommand.displayName = \"CommandBar.Command\"\n\nconst CommandBar = Object.assign(Root, {\n Command,\n Value,\n Bar,\n Seperator,\n})\n\nexport { CommandBar }\n"]}
|
|
@@ -8,7 +8,7 @@ const react_currency_input_field_1 = tslib_1.__importDefault(require("react-curr
|
|
|
8
8
|
const text_1 = require("../text");
|
|
9
9
|
const clx_1 = require("../../utils/clx");
|
|
10
10
|
const class_variance_authority_1 = require("class-variance-authority");
|
|
11
|
-
const currencyInputVariants = (0, class_variance_authority_1.cva)((0, clx_1.clx)("flex items-center gap-x-1", "bg-ui-bg-field hover:bg-ui-bg-field-hover
|
|
11
|
+
const currencyInputVariants = (0, class_variance_authority_1.cva)((0, clx_1.clx)("flex items-center gap-x-1", "bg-ui-bg-field hover:bg-ui-bg-field-hover shadow-buttons-neutral placeholder-ui-fg-muted text-ui-fg-base transition-fg relative w-full rounded-md", "focus-within:shadow-borders-interactive-with-active"), {
|
|
12
12
|
variants: {
|
|
13
13
|
size: {
|
|
14
14
|
base: "txt-compact-medium h-10 px-3",
|
|
@@ -34,20 +34,24 @@ const CurrencyInput = React.forwardRef(({ size = "base", symbol, code, disabled,
|
|
|
34
34
|
innerRef.current.focus();
|
|
35
35
|
}
|
|
36
36
|
}, className: (0, clx_1.clx)("w-full cursor-text justify-between overflow-hidden", currencyInputVariants({ size }), {
|
|
37
|
-
"text-ui-fg-disabled !bg-ui-bg-disabled !
|
|
38
|
-
"
|
|
37
|
+
"text-ui-fg-disabled !bg-ui-bg-disabled !shadow-buttons-neutral !placeholder-ui-fg-disabled cursor-not-allowed": disabled,
|
|
38
|
+
"!shadow-borders-error invalid:!shadow-borders-error": props["aria-invalid"] || !valid,
|
|
39
39
|
}, className) },
|
|
40
40
|
React.createElement("span", { className: (0, clx_1.clx)("w-fit", {
|
|
41
41
|
"py-[9px]": size === "base",
|
|
42
42
|
"py-[5px]": size === "small",
|
|
43
43
|
}), role: "presentation" },
|
|
44
|
-
React.createElement(text_1.Text, { className: "text-ui-fg-muted pointer-events-none select-none uppercase"
|
|
45
|
-
|
|
44
|
+
React.createElement(text_1.Text, { className: (0, clx_1.clx)("text-ui-fg-muted pointer-events-none select-none uppercase", {
|
|
45
|
+
"text-ui-fg-disabled": disabled,
|
|
46
|
+
}) }, code)),
|
|
47
|
+
React.createElement(react_currency_input_field_1.default, { className: "h-full min-w-0 flex-1 appearance-none bg-transparent text-right outline-none disabled:cursor-not-allowed", disabled: disabled, onInvalid: onInnerInvalid, ref: innerRef, ...props }),
|
|
46
48
|
React.createElement("span", { className: (0, clx_1.clx)("w-fit min-w-[16px] text-right", {
|
|
47
49
|
"py-[9px]": size === "base",
|
|
48
50
|
"py-[5px]": size === "small",
|
|
49
51
|
}), role: "presentation" },
|
|
50
|
-
React.createElement(text_1.Text, { className: "text-ui-fg-muted pointer-events-none select-none"
|
|
52
|
+
React.createElement(text_1.Text, { className: (0, clx_1.clx)("text-ui-fg-muted pointer-events-none select-none", {
|
|
53
|
+
"text-ui-fg-disabled": disabled,
|
|
54
|
+
}) }, symbol))));
|
|
51
55
|
});
|
|
52
56
|
exports.CurrencyInput = CurrencyInput;
|
|
53
57
|
CurrencyInput.displayName = "CurrencyInput";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"currency-input.js","sourceRoot":"","sources":["../../../../src/components/currency-input/currency-input.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,qDAA8B;AAC9B,oGAAkD;AAElD,4CAAwC;AACxC,qCAAiC;AACjC,uEAA4D;AAE5D,MAAM,qBAAqB,GAAG,IAAA,8BAAG,EAC/B,IAAA,SAAG,EACD,2BAA2B,EAC3B,
|
|
1
|
+
{"version":3,"file":"currency-input.js","sourceRoot":"","sources":["../../../../src/components/currency-input/currency-input.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,qDAA8B;AAC9B,oGAAkD;AAElD,4CAAwC;AACxC,qCAAiC;AACjC,uEAA4D;AAE5D,MAAM,qBAAqB,GAAG,IAAA,8BAAG,EAC/B,IAAA,SAAG,EACD,2BAA2B,EAC3B,mJAAmJ,EACnJ,qDAAqD,CACtD,EACD;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,8BAA8B;YACpC,KAAK,EAAE,4BAA4B;SACpC;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,MAAM;KACb;CACF,CACF,CAAA;AAYD,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CACpC,CACE,EAAE,IAAI,GAAG,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACzE,GAAG,EACH,EAAE;IACF,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAA;IAErD,KAAK,CAAC,mBAAmB,CACvB,GAAG,EACH,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CACvB,CAAA;IAED,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAE9C,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,KAAwC,EAAE,EAAE;QAC3C,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QAE5C,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,KAAK,CAAC,CAAA;SACjB;IACH,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAA;IAED,OAAO,CACL,6BACE,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACpB,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;aACzB;QACH,CAAC,EACD,SAAS,EAAE,IAAA,SAAG,EACZ,oDAAoD,EACpD,qBAAqB,CAAC,EAAE,IAAI,EAAE,CAAC,EAC/B;YACE,+GAA+G,EAC7G,QAAQ;YACV,qDAAqD,EACnD,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK;SAClC,EACD,SAAS,CACV;QAED,8BACE,SAAS,EAAE,IAAA,SAAG,EAAC,OAAO,EAAE;gBACtB,UAAU,EAAE,IAAI,KAAK,MAAM;gBAC3B,UAAU,EAAE,IAAI,KAAK,OAAO;aAC7B,CAAC,EACF,IAAI,EAAC,cAAc;YAEnB,oBAAC,WAAI,IACH,SAAS,EAAE,IAAA,SAAG,EACZ,4DAA4D,EAC5D;oBACE,qBAAqB,EAAE,QAAQ;iBAChC,CACF,IAEA,IAAI,CACA,CACF;QACP,oBAAC,oCAAS,IACR,SAAS,EAAC,0GAA0G,EACpH,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,cAAc,EACzB,GAAG,EAAE,QAAQ,KACT,KAAK,GACT;QACF,8BACE,SAAS,EAAE,IAAA,SAAG,EAAC,+BAA+B,EAAE;gBAC9C,UAAU,EAAE,IAAI,KAAK,MAAM;gBAC3B,UAAU,EAAE,IAAI,KAAK,OAAO;aAC7B,CAAC,EACF,IAAI,EAAC,cAAc;YAEnB,oBAAC,WAAI,IACH,SAAS,EAAE,IAAA,SAAG,EAAC,kDAAkD,EAAE;oBACjE,qBAAqB,EAAE,QAAQ;iBAChC,CAAC,IAED,MAAM,CACF,CACF,CACH,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAGQ,sCAAa;AAFtB,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport Primitive from \"react-currency-input-field\"\n\nimport { Text } from \"@/components/text\"\nimport { clx } from \"@/utils/clx\"\nimport { VariantProps, cva } from \"class-variance-authority\"\n\nconst currencyInputVariants = cva(\n clx(\n \"flex items-center gap-x-1\",\n \"bg-ui-bg-field hover:bg-ui-bg-field-hover shadow-buttons-neutral placeholder-ui-fg-muted text-ui-fg-base transition-fg relative w-full rounded-md\",\n \"focus-within:shadow-borders-interactive-with-active\"\n ),\n {\n variants: {\n size: {\n base: \"txt-compact-medium h-10 px-3\",\n small: \"txt-compact-small h-8 px-2\",\n },\n },\n defaultVariants: {\n size: \"base\",\n },\n }\n)\n\ninterface CurrencyInputProps\n extends Omit<\n React.ComponentPropsWithoutRef<typeof Primitive>,\n \"prefix\" | \"suffix\" | \"size\"\n >,\n VariantProps<typeof currencyInputVariants> {\n symbol: string\n code: string\n}\n\nconst CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(\n (\n { size = \"base\", symbol, code, disabled, onInvalid, className, ...props },\n ref\n ) => {\n const innerRef = React.useRef<HTMLInputElement>(null)\n\n React.useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n ref,\n () => innerRef.current\n )\n\n const [valid, setValid] = React.useState(true)\n\n const onInnerInvalid = React.useCallback(\n (event: React.FormEvent<HTMLInputElement>) => {\n setValid(event.currentTarget.validity.valid)\n\n if (onInvalid) {\n onInvalid(event)\n }\n },\n [onInvalid]\n )\n\n return (\n <div\n onClick={() => {\n if (innerRef.current) {\n innerRef.current.focus()\n }\n }}\n className={clx(\n \"w-full cursor-text justify-between overflow-hidden\",\n currencyInputVariants({ size }),\n {\n \"text-ui-fg-disabled !bg-ui-bg-disabled !shadow-buttons-neutral !placeholder-ui-fg-disabled cursor-not-allowed\":\n disabled,\n \"!shadow-borders-error invalid:!shadow-borders-error\":\n props[\"aria-invalid\"] || !valid,\n },\n className\n )}\n >\n <span\n className={clx(\"w-fit\", {\n \"py-[9px]\": size === \"base\",\n \"py-[5px]\": size === \"small\",\n })}\n role=\"presentation\"\n >\n <Text\n className={clx(\n \"text-ui-fg-muted pointer-events-none select-none uppercase\",\n {\n \"text-ui-fg-disabled\": disabled,\n }\n )}\n >\n {code}\n </Text>\n </span>\n <Primitive\n className=\"h-full min-w-0 flex-1 appearance-none bg-transparent text-right outline-none disabled:cursor-not-allowed\"\n disabled={disabled}\n onInvalid={onInnerInvalid}\n ref={innerRef}\n {...props}\n />\n <span\n className={clx(\"w-fit min-w-[16px] text-right\", {\n \"py-[9px]\": size === \"base\",\n \"py-[5px]\": size === \"small\",\n })}\n role=\"presentation\"\n >\n <Text\n className={clx(\"text-ui-fg-muted pointer-events-none select-none\", {\n \"text-ui-fg-disabled\": disabled,\n })}\n >\n {symbol}\n </Text>\n </span>\n </div>\n )\n }\n)\nCurrencyInput.displayName = \"CurrencyInput\"\n\nexport { CurrencyInput }\n"]}
|