@ratio-ui/core 0.2.0 → 0.4.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/catalogue.json +2690 -749
- package/dist/components/accordion/Accordion.d.ts +19 -0
- package/dist/components/accordion/Accordion.js +52 -0
- package/dist/components/accordion/index.d.ts +2 -0
- package/dist/components/accordion/index.js +1 -0
- package/dist/components/alert/Alert.d.ts +18 -0
- package/dist/components/alert/Alert.js +67 -0
- package/dist/components/alert/index.d.ts +2 -0
- package/dist/components/alert/index.js +1 -0
- package/dist/components/alert-dialog/AlertDialog.d.ts +48 -0
- package/dist/components/alert-dialog/AlertDialog.js +76 -0
- package/dist/components/alert-dialog/index.d.ts +2 -0
- package/dist/components/alert-dialog/index.js +1 -0
- package/dist/components/app-shell/AppShell.js +1 -1
- package/dist/components/breadcrumb/Breadcrumb.d.ts +19 -0
- package/dist/components/breadcrumb/Breadcrumb.js +50 -0
- package/dist/components/breadcrumb/index.d.ts +2 -0
- package/dist/components/breadcrumb/index.js +1 -0
- package/dist/components/calendar/Calendar.d.ts +20 -0
- package/dist/components/calendar/Calendar.js +119 -0
- package/dist/components/calendar/index.d.ts +2 -0
- package/dist/components/calendar/index.js +1 -0
- package/dist/components/chart/Chart.d.ts +137 -0
- package/dist/components/chart/Chart.js +238 -0
- package/dist/components/chart/index.d.ts +2 -0
- package/dist/components/chart/index.js +1 -0
- package/dist/components/checkbox-list/CheckboxList.d.ts +36 -0
- package/dist/components/checkbox-list/CheckboxList.js +93 -0
- package/dist/components/checkbox-list/index.d.ts +2 -0
- package/dist/components/checkbox-list/index.js +1 -0
- package/dist/components/collapsible/Collapsible.d.ts +24 -0
- package/dist/components/collapsible/Collapsible.js +58 -0
- package/dist/components/collapsible/index.d.ts +2 -0
- package/dist/components/collapsible/index.js +1 -0
- package/dist/components/combobox/Combobox.d.ts +52 -0
- package/dist/components/combobox/Combobox.js +92 -0
- package/dist/components/combobox/index.d.ts +2 -0
- package/dist/components/combobox/index.js +1 -0
- package/dist/components/data-table/DataTable.js +2 -2
- package/dist/components/date-picker/DatePicker.d.ts +34 -0
- package/dist/components/date-picker/DatePicker.js +108 -0
- package/dist/components/date-picker/index.d.ts +2 -0
- package/dist/components/date-picker/index.js +1 -0
- package/dist/components/date-range-picker/DateRangePicker.d.ts +40 -0
- package/dist/components/date-range-picker/DateRangePicker.js +146 -0
- package/dist/components/date-range-picker/index.d.ts +2 -0
- package/dist/components/date-range-picker/index.js +1 -0
- package/dist/components/drawer/Drawer.d.ts +52 -0
- package/dist/components/drawer/Drawer.js +120 -0
- package/dist/components/drawer/index.d.ts +2 -0
- package/dist/components/drawer/index.js +1 -0
- package/dist/components/field/Field.d.ts +38 -0
- package/dist/components/field/Field.js +73 -0
- package/dist/components/field/Label.d.ts +8 -0
- package/dist/components/field/Label.js +13 -0
- package/dist/components/field/index.d.ts +3 -0
- package/dist/components/field/index.js +3 -0
- package/dist/components/filter-tabs/FilterTabs.js +1 -1
- package/dist/components/global-search/GlobalSearch.js +1 -1
- package/dist/components/icon/registry.d.ts +2 -2
- package/dist/components/icon/registry.js +5 -1
- package/dist/components/input-group/InputGroup.js +1 -1
- package/dist/components/input-otp/InputOtp.d.ts +43 -0
- package/dist/components/input-otp/InputOtp.js +45 -0
- package/dist/components/input-otp/index.d.ts +2 -0
- package/dist/components/input-otp/index.js +1 -0
- package/dist/components/key-value-list/KeyValueList.d.ts +25 -0
- package/dist/components/key-value-list/KeyValueList.js +40 -0
- package/dist/components/key-value-list/index.d.ts +2 -0
- package/dist/components/key-value-list/index.js +1 -0
- package/dist/components/link/Link.d.ts +22 -0
- package/dist/components/link/Link.js +31 -0
- package/dist/components/link/index.d.ts +2 -0
- package/dist/components/link/index.js +1 -0
- package/dist/components/media-grid/MediaGrid.d.ts +49 -0
- package/dist/components/media-grid/MediaGrid.js +303 -0
- package/dist/components/media-grid/index.d.ts +2 -0
- package/dist/components/media-grid/index.js +1 -0
- package/dist/components/money-input/MoneyInput.d.ts +30 -0
- package/dist/components/money-input/MoneyInput.js +72 -0
- package/dist/components/money-input/index.d.ts +2 -0
- package/dist/components/money-input/index.js +1 -0
- package/dist/components/page-header/PageHeader.js +9 -9
- package/dist/components/progress/Progress.d.ts +25 -0
- package/dist/components/progress/Progress.js +38 -0
- package/dist/components/progress/index.d.ts +2 -0
- package/dist/components/progress/index.js +1 -0
- package/dist/components/radio-group/RadioGroup.d.ts +18 -0
- package/dist/components/radio-group/RadioGroup.js +32 -0
- package/dist/components/radio-group/index.d.ts +2 -0
- package/dist/components/radio-group/index.js +1 -0
- package/dist/components/save-bar/SaveBar.d.ts +27 -0
- package/dist/components/save-bar/SaveBar.js +37 -0
- package/dist/components/save-bar/index.d.ts +2 -0
- package/dist/components/save-bar/index.js +1 -0
- package/dist/components/scroll-area/ScrollArea.d.ts +12 -0
- package/dist/components/scroll-area/ScrollArea.js +34 -0
- package/dist/components/scroll-area/index.d.ts +2 -0
- package/dist/components/scroll-area/index.js +1 -0
- package/dist/components/search-field/SearchField.js +1 -1
- package/dist/components/select/Select.d.ts +40 -0
- package/dist/components/select/Select.js +84 -0
- package/dist/components/select/index.d.ts +2 -0
- package/dist/components/select/index.js +1 -0
- package/dist/components/separator/Separator.d.ts +15 -0
- package/dist/components/separator/Separator.js +25 -0
- package/dist/components/separator/index.d.ts +2 -0
- package/dist/components/separator/index.js +1 -0
- package/dist/components/sheet/Sheet.d.ts +52 -0
- package/dist/components/sheet/Sheet.js +89 -0
- package/dist/components/sheet/index.d.ts +2 -0
- package/dist/components/sheet/index.js +1 -0
- package/dist/components/side-nav/SideNav.js +3 -3
- package/dist/components/summary-chips/SummaryChips.d.ts +17 -0
- package/dist/components/summary-chips/SummaryChips.js +19 -0
- package/dist/components/summary-chips/index.d.ts +2 -0
- package/dist/components/summary-chips/index.js +1 -0
- package/dist/components/switch/Switch.d.ts +10 -0
- package/dist/components/switch/Switch.js +20 -0
- package/dist/components/switch/index.d.ts +2 -0
- package/dist/components/switch/index.js +1 -0
- package/dist/components/table/Table.js +1 -1
- package/dist/components/tag-input/TagInput.d.ts +44 -0
- package/dist/components/tag-input/TagInput.js +102 -0
- package/dist/components/tag-input/index.d.ts +2 -0
- package/dist/components/tag-input/index.js +1 -0
- package/dist/components/textarea/Textarea.d.ts +15 -0
- package/dist/components/textarea/Textarea.js +21 -0
- package/dist/components/textarea/index.d.ts +2 -0
- package/dist/components/textarea/index.js +1 -0
- package/dist/components/top-bar/StoreSwitcher.js +1 -1
- package/dist/components/top-bar/TopBar.js +2 -2
- package/dist/components/unit-input/UnitInput.d.ts +33 -0
- package/dist/components/unit-input/UnitInput.js +47 -0
- package/dist/components/unit-input/index.d.ts +2 -0
- package/dist/components/unit-input/index.js +1 -0
- package/dist/index.d.ts +70 -9
- package/dist/index.js +38 -7
- package/dist/lib/cn.js +9 -2
- package/dist/lib/format.d.ts +65 -4
- package/dist/lib/format.js +163 -6
- package/dist/styles.css +1 -1
- package/package.json +129 -1
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import { cn } from "../../lib/cn.js";
|
|
2
|
+
import { Icon } from "../icon/Icon.js";
|
|
3
|
+
import { Input } from "../input/Input.js";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { useRef, useState } from "react";
|
|
6
|
+
import { Combobox } from "@base-ui/react/combobox";
|
|
7
|
+
// src/components/tag-input/TagInput.tsx
|
|
8
|
+
/**
|
|
9
|
+
* Several values as chips in one field in the input's look. The picker offers the existing values (typing filters them),
|
|
10
|
+
* a small field below adds a new one on Enter, and a chip goes with its remove button or with Backspace in the empty
|
|
11
|
+
* picker. Base UI's combobox cannot accept a value it does not list, which is why new values have their own field.
|
|
12
|
+
*/
|
|
13
|
+
function TagInput({ options, value, defaultValue, onValueChange, creatable = true, addLabel = "Add value", placeholder, emptyText = "No matching values", name, disabled, id, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired }) {
|
|
14
|
+
const [own, setOwn] = useState(defaultValue ?? []);
|
|
15
|
+
const [draft, setDraft] = useState("");
|
|
16
|
+
const anchorRef = useRef(null);
|
|
17
|
+
const current = value ?? own;
|
|
18
|
+
const items = [...options, ...current.filter((item) => !options.includes(item))];
|
|
19
|
+
const change = (next) => {
|
|
20
|
+
if (value === void 0) setOwn(next);
|
|
21
|
+
onValueChange?.(next);
|
|
22
|
+
};
|
|
23
|
+
const add = (event) => {
|
|
24
|
+
if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
|
|
25
|
+
event.preventDefault();
|
|
26
|
+
const text = draft.trim();
|
|
27
|
+
setDraft("");
|
|
28
|
+
const same = (item) => item.toLowerCase() === text.toLowerCase();
|
|
29
|
+
if (text === "" || current.some(same)) return;
|
|
30
|
+
change([...current, options.find(same) ?? text]);
|
|
31
|
+
};
|
|
32
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
33
|
+
className: "rt:flex rt:w-full rt:flex-col rt:gap-1.5",
|
|
34
|
+
children: [/* @__PURE__ */ jsxs(Combobox.Root, {
|
|
35
|
+
multiple: true,
|
|
36
|
+
items,
|
|
37
|
+
value: [...current],
|
|
38
|
+
onValueChange: change,
|
|
39
|
+
disabled,
|
|
40
|
+
name,
|
|
41
|
+
children: [/* @__PURE__ */ jsxs(Combobox.Chips, {
|
|
42
|
+
ref: anchorRef,
|
|
43
|
+
"data-slot": "tag-input-chips",
|
|
44
|
+
className: cn("rt:flex rt:min-h-9 rt:w-full rt:min-w-0 rt:flex-wrap rt:items-center rt:gap-1 rt:rounded-lg rt:bg-background rt:py-2 rt:pr-3 rt:shadow-ring-subtle rt:transition-colors rt:forced-outline rt:focus-within:shadow-ring-focus rt:has-aria-invalid:shadow-ring-invalid rt:has-aria-invalid:focus-within:shadow-ring-invalid rt:has-disabled:opacity-50", current.length > 0 ? "rt:pl-2" : "rt:pl-3"),
|
|
45
|
+
children: [current.map((item) => /* @__PURE__ */ jsxs(Combobox.Chip, {
|
|
46
|
+
className: "rt:inline-flex rt:h-5 rt:items-center rt:gap-1 rt:rounded-sm rt:border rt:border-chip-border rt:bg-chip-background rt:pr-0.5 rt:pl-2 rt:text-c1 rt:whitespace-nowrap rt:text-chip-foreground rt:outline-none rt:focus-visible:focus-ring",
|
|
47
|
+
children: [item, /* @__PURE__ */ jsx(Combobox.ChipRemove, {
|
|
48
|
+
"aria-label": `Remove ${item}`,
|
|
49
|
+
className: "rt:flex rt:size-4 rt:items-center rt:justify-center rt:rounded-sm rt:text-muted-foreground rt:transition-colors rt:hover:text-foreground rt:focus-visible:focus-ring rt:disabled:pointer-events-none",
|
|
50
|
+
children: /* @__PURE__ */ jsx(Icon, { name: "x" })
|
|
51
|
+
})]
|
|
52
|
+
}, item)), /* @__PURE__ */ jsx(Combobox.Input, {
|
|
53
|
+
ref,
|
|
54
|
+
id,
|
|
55
|
+
"aria-label": ariaLabel,
|
|
56
|
+
"aria-labelledby": ariaLabelledBy,
|
|
57
|
+
"aria-describedby": ariaDescribedBy,
|
|
58
|
+
"aria-invalid": ariaInvalid,
|
|
59
|
+
"aria-required": ariaRequired,
|
|
60
|
+
placeholder: current.length === 0 ? placeholder : void 0,
|
|
61
|
+
className: "rt:h-5 rt:min-w-16 rt:flex-1 rt:bg-transparent rt:text-b3 rt:text-foreground rt:outline-none rt:placeholder:text-muted-foreground rt:disabled:cursor-not-allowed"
|
|
62
|
+
})]
|
|
63
|
+
}), /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
|
|
64
|
+
anchor: anchorRef,
|
|
65
|
+
side: "bottom",
|
|
66
|
+
sideOffset: 4,
|
|
67
|
+
align: "start",
|
|
68
|
+
className: "rt:isolate rt:z-50",
|
|
69
|
+
children: /* @__PURE__ */ jsxs(Combobox.Popup, {
|
|
70
|
+
className: "rt:max-h-available rt:w-anchor rt:max-w-available rt:overflow-y-auto rt:rounded-lg rt:border rt:border-border rt:bg-popover rt:py-1.5 rt:text-b3 rt:text-popover-foreground rt:outline-hidden rt:transition-colors",
|
|
71
|
+
children: [/* @__PURE__ */ jsx(Combobox.Empty, {
|
|
72
|
+
className: "rt:px-3 rt:py-1 rt:text-b3 rt:text-muted-foreground rt:empty:hidden",
|
|
73
|
+
children: emptyText
|
|
74
|
+
}), /* @__PURE__ */ jsx(Combobox.List, { children: (item) => /* @__PURE__ */ jsxs(Combobox.Item, {
|
|
75
|
+
value: item,
|
|
76
|
+
className: "rt:relative rt:flex rt:h-7 rt:cursor-default rt:items-center rt:gap-2 rt:pr-8 rt:pl-3 rt:text-b3 rt:text-foreground rt:outline-none rt:select-none rt:transition-colors rt:data-highlighted:bg-accent rt:data-highlighted:text-accent-foreground rt:data-disabled:pointer-events-none rt:data-disabled:opacity-50",
|
|
77
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
78
|
+
className: "rt:flex-1 rt:truncate",
|
|
79
|
+
children: item
|
|
80
|
+
}), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
|
|
81
|
+
render: /* @__PURE__ */ jsx("span", { className: "rt:pointer-events-none rt:absolute rt:right-3 rt:flex" }),
|
|
82
|
+
children: /* @__PURE__ */ jsx(Icon, { name: "check" })
|
|
83
|
+
})]
|
|
84
|
+
}, item) })]
|
|
85
|
+
})
|
|
86
|
+
}) })]
|
|
87
|
+
}), creatable ? /* @__PURE__ */ jsx("div", {
|
|
88
|
+
className: "rt:w-40",
|
|
89
|
+
children: /* @__PURE__ */ jsx(Input, {
|
|
90
|
+
size: 32,
|
|
91
|
+
"aria-label": addLabel,
|
|
92
|
+
placeholder: addLabel,
|
|
93
|
+
"aria-describedby": ariaDescribedBy,
|
|
94
|
+
value: draft,
|
|
95
|
+
onChange: (event) => setDraft(event.target.value),
|
|
96
|
+
onKeyDown: add,
|
|
97
|
+
disabled
|
|
98
|
+
})
|
|
99
|
+
}) : null]
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
export { TagInput };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { TagInput } from "./TagInput.js";
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { JSX, Ref, TextareaHTMLAttributes } from "react";
|
|
2
|
+
/** The minimum height of the field in px: 88 for a description, 64 for a compact one. */
|
|
3
|
+
export type TextareaSize = 88 | 64;
|
|
4
|
+
/**
|
|
5
|
+
* The props of Textarea: the HTML attributes of a textarea, except className, style and the HTML size, with the height.
|
|
6
|
+
* Mark an invalid field with aria-invalid, which draws the error ring.
|
|
7
|
+
*/
|
|
8
|
+
export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'style'> & {
|
|
9
|
+
/** The height in px: 88 by default, 64 compact. The field can still be dragged taller. */
|
|
10
|
+
size?: TextareaSize;
|
|
11
|
+
/** Receives the textarea element. */
|
|
12
|
+
ref?: Ref<HTMLTextAreaElement>;
|
|
13
|
+
};
|
|
14
|
+
/** A multi-line text field in the input's look: 8px radius, 1px ring that turns blue on focus, 10px 12px padding, 88px tall (64px compact). */
|
|
15
|
+
export declare function Textarea({ size, ref, ...rest }: TextareaProps): JSX.Element;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { cn } from "../../lib/cn.js";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
// src/components/textarea/Textarea.tsx
|
|
5
|
+
const textareaVariants = cva("rt:block rt:w-full rt:min-w-0 rt:resize-y rt:rounded-lg rt:bg-background rt:border-y-2 rt:border-transparent rt:px-3 rt:py-2 rt:text-b3 rt:text-foreground rt:placeholder:text-muted-foreground rt:shadow-ring-subtle rt:outline-none rt:transition-colors rt:forced-outline rt:focus-visible:shadow-ring-focus rt:aria-invalid:shadow-ring-invalid rt:aria-invalid:focus-visible:shadow-ring-invalid rt:disabled:pointer-events-none rt:disabled:cursor-not-allowed rt:disabled:opacity-50", {
|
|
6
|
+
variants: { size: {
|
|
7
|
+
88: "rt:min-h-22",
|
|
8
|
+
64: "rt:min-h-16"
|
|
9
|
+
} },
|
|
10
|
+
defaultVariants: { size: 88 }
|
|
11
|
+
});
|
|
12
|
+
/** A multi-line text field in the input's look: 8px radius, 1px ring that turns blue on focus, 10px 12px padding, 88px tall (64px compact). */
|
|
13
|
+
function Textarea({ size = 88, ref, ...rest }) {
|
|
14
|
+
return /* @__PURE__ */ jsx("textarea", {
|
|
15
|
+
"data-slot": "textarea",
|
|
16
|
+
ref,
|
|
17
|
+
className: cn(textareaVariants({ size })),
|
|
18
|
+
...rest
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
export { Textarea };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Textarea } from "./Textarea.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Avatar } from "../avatar/Avatar.js";
|
|
2
1
|
import { Icon } from "../icon/Icon.js";
|
|
2
|
+
import { Avatar } from "../avatar/Avatar.js";
|
|
3
3
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../dropdown-menu/DropdownMenu.js";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
// src/components/top-bar/StoreSwitcher.tsx
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { ShellNavContext } from "../app-shell/context.js";
|
|
2
1
|
import { Icon } from "../icon/Icon.js";
|
|
3
|
-
import {
|
|
2
|
+
import { ShellNavContext } from "../app-shell/context.js";
|
|
4
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { use } from "react";
|
|
5
5
|
// src/components/top-bar/TopBar.tsx
|
|
6
6
|
/**
|
|
7
7
|
* The bar across the top of every page: logo, search, actions, the store switcher and the account. It is 60px high on a
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { InputGroupSize } from "../input-group/InputGroup.js";
|
|
2
|
+
import "../input-group/index.js";
|
|
3
|
+
import { InputHTMLAttributes, JSX, Ref } from "react";
|
|
4
|
+
/**
|
|
5
|
+
* The props of UnitInput: the HTML attributes of an input, except className, style, size and the ones the field sets
|
|
6
|
+
* itself (type, inputMode, step, onChange), with the unit and the number in and out. Mark an invalid field with
|
|
7
|
+
* aria-invalid, which draws the error ring around the whole group.
|
|
8
|
+
*/
|
|
9
|
+
export type UnitInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'size' | 'type' | 'inputMode' | 'step' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> & {
|
|
10
|
+
/** The unit after the number, such as kg or cm. Screen readers read it as the field's description. */
|
|
11
|
+
unit: string;
|
|
12
|
+
/** The number, or null for an empty field. Pass it to control the field. */
|
|
13
|
+
value?: number | null;
|
|
14
|
+
/** The starting number when the field is not controlled. Defaults to empty. */
|
|
15
|
+
defaultValue?: number | null;
|
|
16
|
+
/** Called with the number as it is typed or cleared (null when empty), and with the rounded number on blur. */
|
|
17
|
+
onValueChange?: (value: number | null) => void;
|
|
18
|
+
/** The most decimals the number keeps; the field rounds to them on blur. Defaults to 3 (grams in kg). */
|
|
19
|
+
decimals?: number;
|
|
20
|
+
/** The smallest number; the field moves a smaller one up to it on blur. */
|
|
21
|
+
min?: number;
|
|
22
|
+
/** The largest number; the field moves a larger one down to it on blur. */
|
|
23
|
+
max?: number;
|
|
24
|
+
/** The height in px: 36 for forms, 32 for fields inside a table. Defaults to 36. */
|
|
25
|
+
size?: InputGroupSize;
|
|
26
|
+
/** Receives the input element. */
|
|
27
|
+
ref?: Ref<HTMLInputElement>;
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* A number field with its unit after it, inside one ring: a weight in kg, a length in cm. It takes and gives a number,
|
|
31
|
+
* written without thousands separators as counts are, and keeps at most `decimals` decimals.
|
|
32
|
+
*/
|
|
33
|
+
export declare function UnitInput({ unit, value, defaultValue, onValueChange, decimals, min, max, size, id, name, disabled, readOnly, required, 'aria-describedby': describedBy, ref, ...rest }: UnitInputProps): JSX.Element;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { FORMAT } from "../../lib/format.js";
|
|
2
|
+
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "../input-group/InputGroup.js";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { useId } from "react";
|
|
5
|
+
import { NumberField } from "@base-ui/react/number-field";
|
|
6
|
+
// src/components/unit-input/UnitInput.tsx
|
|
7
|
+
/**
|
|
8
|
+
* A number field with its unit after it, inside one ring: a weight in kg, a length in cm. It takes and gives a number,
|
|
9
|
+
* written without thousands separators as counts are, and keeps at most `decimals` decimals.
|
|
10
|
+
*/
|
|
11
|
+
function UnitInput({ unit, value, defaultValue, onValueChange, decimals = 3, min, max, size = 36, id, name, disabled, readOnly, required, "aria-describedby": describedBy, ref, ...rest }) {
|
|
12
|
+
const unitId = useId();
|
|
13
|
+
return /* @__PURE__ */ jsx(NumberField.Root, {
|
|
14
|
+
id,
|
|
15
|
+
name,
|
|
16
|
+
value,
|
|
17
|
+
defaultValue: defaultValue ?? void 0,
|
|
18
|
+
onValueChange: (next) => onValueChange?.(next),
|
|
19
|
+
locale: FORMAT.locale,
|
|
20
|
+
format: {
|
|
21
|
+
maximumFractionDigits: decimals,
|
|
22
|
+
useGrouping: false
|
|
23
|
+
},
|
|
24
|
+
min,
|
|
25
|
+
max,
|
|
26
|
+
disabled,
|
|
27
|
+
readOnly,
|
|
28
|
+
required,
|
|
29
|
+
children: /* @__PURE__ */ jsxs(InputGroup, {
|
|
30
|
+
size,
|
|
31
|
+
"aria-disabled": disabled || void 0,
|
|
32
|
+
children: [/* @__PURE__ */ jsx(NumberField.Input, {
|
|
33
|
+
render: /* @__PURE__ */ jsx(InputGroupInput, {}),
|
|
34
|
+
ref,
|
|
35
|
+
"aria-describedby": describedBy === void 0 ? unitId : `${unitId} ${describedBy}`,
|
|
36
|
+
...rest
|
|
37
|
+
}), /* @__PURE__ */ jsx(InputGroupAddon, {
|
|
38
|
+
align: "end",
|
|
39
|
+
children: /* @__PURE__ */ jsx(InputGroupText, {
|
|
40
|
+
id: unitId,
|
|
41
|
+
children: unit
|
|
42
|
+
})
|
|
43
|
+
})]
|
|
44
|
+
})
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
export { UnitInput };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { UnitInput } from "./UnitInput.js";
|
package/dist/index.d.ts
CHANGED
|
@@ -1,45 +1,84 @@
|
|
|
1
|
+
import { Accordion, AccordionContent, AccordionContentProps, AccordionItem, AccordionItemProps, AccordionProps, AccordionTrigger, AccordionTriggerProps } from "./components/accordion/Accordion.js";
|
|
2
|
+
import "./components/accordion/index.js";
|
|
3
|
+
import { Button, ButtonProps, ButtonVariant } from "./components/button/Button.js";
|
|
4
|
+
import "./components/button/index.js";
|
|
5
|
+
import { AlertDialog, AlertDialogAction, AlertDialogActionProps, AlertDialogCancel, AlertDialogCancelProps, AlertDialogContent, AlertDialogContentProps, AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogFooter, AlertDialogFooterProps, AlertDialogHeader, AlertDialogHeaderProps, AlertDialogTitle, AlertDialogTitleProps, AlertDialogTrigger, AlertDialogTriggerProps } from "./components/alert-dialog/AlertDialog.js";
|
|
6
|
+
import "./components/alert-dialog/index.js";
|
|
7
|
+
import { Alert, AlertProps, AlertTone } from "./components/alert/Alert.js";
|
|
8
|
+
import "./components/alert/index.js";
|
|
1
9
|
import { AppShell, AppShellProps } from "./components/app-shell/AppShell.js";
|
|
2
10
|
import "./components/app-shell/index.js";
|
|
3
11
|
import { Avatar, AvatarProps, AvatarShape, AvatarSize, getInitials } from "./components/avatar/Avatar.js";
|
|
4
12
|
import "./components/avatar/index.js";
|
|
5
|
-
import {
|
|
6
|
-
import "./components/
|
|
13
|
+
import { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from "./components/breadcrumb/Breadcrumb.js";
|
|
14
|
+
import "./components/breadcrumb/index.js";
|
|
15
|
+
import { Calendar, CalendarProps } from "./components/calendar/Calendar.js";
|
|
16
|
+
import "./components/calendar/index.js";
|
|
7
17
|
import { Card, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps } from "./components/card/Card.js";
|
|
8
18
|
import "./components/card/index.js";
|
|
19
|
+
import { IconName } from "./components/icon/registry.js";
|
|
20
|
+
import { Icon, IconProps, IconSize, IconTone } from "./components/icon/Icon.js";
|
|
21
|
+
import "./components/icon/index.js";
|
|
22
|
+
import { Chart, ChartAspect, ChartColor, ChartConfig, ChartLegend, ChartLegendContent, ChartLegendContentProps, ChartLegendProps, ChartProps, ChartSeriesConfig, ChartTable, ChartTooltip, ChartTooltipContent, ChartTooltipContentProps, ChartTooltipProps, chartColor } from "./components/chart/Chart.js";
|
|
23
|
+
import "./components/chart/index.js";
|
|
24
|
+
import { CheckboxList, CheckboxListItem, CheckboxListProps } from "./components/checkbox-list/CheckboxList.js";
|
|
25
|
+
import "./components/checkbox-list/index.js";
|
|
9
26
|
import { Checkbox, CheckboxProps } from "./components/checkbox/Checkbox.js";
|
|
10
27
|
import "./components/checkbox/index.js";
|
|
28
|
+
import { SummaryChip, SummaryChips, SummaryChipsProps } from "./components/summary-chips/SummaryChips.js";
|
|
29
|
+
import "./components/summary-chips/index.js";
|
|
30
|
+
import { Collapsible, CollapsibleProps } from "./components/collapsible/Collapsible.js";
|
|
31
|
+
import "./components/collapsible/index.js";
|
|
32
|
+
import { Combobox, ComboboxItem, ComboboxProps } from "./components/combobox/Combobox.js";
|
|
33
|
+
import "./components/combobox/index.js";
|
|
11
34
|
import { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableFooter, TableFooterProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps } from "./components/table/Table.js";
|
|
12
35
|
import "./components/table/index.js";
|
|
13
36
|
import { DataTable, DataTableColumn, DataTableProps, DataTableSort } from "./components/data-table/DataTable.js";
|
|
14
37
|
import "./components/data-table/index.js";
|
|
38
|
+
import { InputGroup, InputGroupAddon, InputGroupAddonAlign, InputGroupAddonProps, InputGroupInput, InputGroupInputProps, InputGroupProps, InputGroupShortcut, InputGroupShortcutProps, InputGroupSize, InputGroupText, InputGroupTextProps } from "./components/input-group/InputGroup.js";
|
|
39
|
+
import "./components/input-group/index.js";
|
|
40
|
+
import { DatePicker, DatePickerProps } from "./components/date-picker/DatePicker.js";
|
|
41
|
+
import "./components/date-picker/index.js";
|
|
42
|
+
import { DateRangePicker, DateRangePickerProps, DateRangeValue } from "./components/date-range-picker/DateRangePicker.js";
|
|
43
|
+
import "./components/date-range-picker/index.js";
|
|
15
44
|
import { Definition, DefinitionProps } from "./components/definition/Definition.js";
|
|
16
45
|
import "./components/definition/index.js";
|
|
17
46
|
import { Dialog, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps } from "./components/dialog/Dialog.js";
|
|
18
47
|
import "./components/dialog/index.js";
|
|
48
|
+
import { Drawer, DrawerClose, DrawerCloseProps, DrawerContent, DrawerContentProps, DrawerDescription, DrawerDescriptionProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerProps, DrawerTitle, DrawerTitleProps, DrawerTrigger, DrawerTriggerProps } from "./components/drawer/Drawer.js";
|
|
49
|
+
import "./components/drawer/index.js";
|
|
19
50
|
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemProps, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuGroupProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuLabelProps, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuShortcut, DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubContentProps, DropdownMenuSubProps, DropdownMenuSubTrigger, DropdownMenuSubTriggerProps, DropdownMenuTrigger, DropdownMenuTriggerProps } from "./components/dropdown-menu/DropdownMenu.js";
|
|
20
51
|
import "./components/dropdown-menu/index.js";
|
|
21
52
|
import { EmptyState, EmptyStateProps } from "./components/empty-state/EmptyState.js";
|
|
22
53
|
import "./components/empty-state/index.js";
|
|
54
|
+
import { Field, FieldControlProps, FieldProps } from "./components/field/Field.js";
|
|
55
|
+
import { Label, LabelProps } from "./components/field/Label.js";
|
|
56
|
+
import "./components/field/index.js";
|
|
23
57
|
import { FilterTabs, FilterTabsItem, FilterTabsProps } from "./components/filter-tabs/FilterTabs.js";
|
|
24
58
|
import "./components/filter-tabs/index.js";
|
|
25
|
-
import { IconName } from "./components/icon/registry.js";
|
|
26
|
-
import { Icon, IconProps, IconSize, IconTone } from "./components/icon/Icon.js";
|
|
27
|
-
import "./components/icon/index.js";
|
|
28
59
|
import { GlobalSearch, GlobalSearchGroup, GlobalSearchProps, GlobalSearchResult } from "./components/global-search/GlobalSearch.js";
|
|
29
60
|
import "./components/global-search/index.js";
|
|
30
61
|
import { Space } from "./lib/space.js";
|
|
31
62
|
import { Inline, InlineProps } from "./components/inline/Inline.js";
|
|
32
63
|
import "./components/inline/index.js";
|
|
33
|
-
import {
|
|
34
|
-
import "./components/input-
|
|
64
|
+
import { InputOtp, InputOtpProps } from "./components/input-otp/InputOtp.js";
|
|
65
|
+
import "./components/input-otp/index.js";
|
|
35
66
|
import { Input, InputProps, InputSize } from "./components/input/Input.js";
|
|
36
67
|
import "./components/input/index.js";
|
|
37
68
|
import { Kbd, KbdGroup, KbdGroupProps, KbdProps } from "./components/kbd/Kbd.js";
|
|
38
69
|
import "./components/kbd/index.js";
|
|
70
|
+
import { KeyValueItem, KeyValueList, KeyValueListProps } from "./components/key-value-list/KeyValueList.js";
|
|
71
|
+
import "./components/key-value-list/index.js";
|
|
39
72
|
import { LinkProvider, LinkProviderProps, LinkRender, LinkRenderProps } from "./components/link-provider/LinkProvider.js";
|
|
40
73
|
import "./components/link-provider/index.js";
|
|
74
|
+
import { Link, LinkProps } from "./components/link/Link.js";
|
|
75
|
+
import "./components/link/index.js";
|
|
76
|
+
import { MediaGrid, MediaGridItem, MediaGridProps } from "./components/media-grid/MediaGrid.js";
|
|
77
|
+
import "./components/media-grid/index.js";
|
|
41
78
|
import { MetricSegment, MetricStrip, MetricStripProps } from "./components/metric-strip/MetricStrip.js";
|
|
42
79
|
import "./components/metric-strip/index.js";
|
|
80
|
+
import { MoneyInput, MoneyInputProps } from "./components/money-input/MoneyInput.js";
|
|
81
|
+
import "./components/money-input/index.js";
|
|
43
82
|
import { StatusPill, StatusPillProps, StatusPillTone } from "./components/status-pill/StatusPill.js";
|
|
44
83
|
import "./components/status-pill/index.js";
|
|
45
84
|
import { PageHeader, PageHeaderMenuItem, PageHeaderProps } from "./components/page-header/PageHeader.js";
|
|
@@ -48,8 +87,22 @@ import { Pagination, PaginationProps } from "./components/pagination/Pagination.
|
|
|
48
87
|
import "./components/pagination/index.js";
|
|
49
88
|
import { Popover, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps } from "./components/popover/Popover.js";
|
|
50
89
|
import "./components/popover/index.js";
|
|
90
|
+
import { Progress, ProgressProps } from "./components/progress/Progress.js";
|
|
91
|
+
import "./components/progress/index.js";
|
|
92
|
+
import { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from "./components/radio-group/RadioGroup.js";
|
|
93
|
+
import "./components/radio-group/index.js";
|
|
94
|
+
import { SaveBar, SaveBarProps } from "./components/save-bar/SaveBar.js";
|
|
95
|
+
import "./components/save-bar/index.js";
|
|
96
|
+
import { ScrollArea, ScrollAreaProps } from "./components/scroll-area/ScrollArea.js";
|
|
97
|
+
import "./components/scroll-area/index.js";
|
|
51
98
|
import { SearchField, SearchFieldProps } from "./components/search-field/SearchField.js";
|
|
52
99
|
import "./components/search-field/index.js";
|
|
100
|
+
import { Select, SelectContent, SelectContentProps, SelectGroup, SelectGroupProps, SelectItem, SelectItemProps, SelectLabel, SelectLabelProps, SelectProps, SelectSeparator, SelectSeparatorProps, SelectSize, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps } from "./components/select/Select.js";
|
|
101
|
+
import "./components/select/index.js";
|
|
102
|
+
import { Separator, SeparatorProps } from "./components/separator/Separator.js";
|
|
103
|
+
import "./components/separator/index.js";
|
|
104
|
+
import { Sheet, SheetBody, SheetBodyProps, SheetClose, SheetCloseProps, SheetContent, SheetContentProps, SheetDescription, SheetDescriptionProps, SheetFooter, SheetFooterProps, SheetHeader, SheetHeaderProps, SheetSide, SheetTitle, SheetTitleProps, SheetTrigger, SheetTriggerProps } from "./components/sheet/Sheet.js";
|
|
105
|
+
import "./components/sheet/index.js";
|
|
53
106
|
import { SideNav, SideNavAccount, SideNavItem, SideNavProps, SideNavSection } from "./components/side-nav/SideNav.js";
|
|
54
107
|
import "./components/side-nav/index.js";
|
|
55
108
|
import { Skeleton, SkeletonProps, SkeletonShape } from "./components/skeleton/Skeleton.js";
|
|
@@ -58,12 +111,18 @@ import { Spinner, SpinnerProps } from "./components/spinner/Spinner.js";
|
|
|
58
111
|
import "./components/spinner/index.js";
|
|
59
112
|
import { Stack, StackProps } from "./components/stack/Stack.js";
|
|
60
113
|
import "./components/stack/index.js";
|
|
114
|
+
import { Switch, SwitchProps } from "./components/switch/Switch.js";
|
|
115
|
+
import "./components/switch/index.js";
|
|
61
116
|
import { TableLoader, TableLoaderColumn, TableLoaderProps } from "./components/table-loader/TableLoader.js";
|
|
62
117
|
import "./components/table-loader/index.js";
|
|
63
118
|
import { Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTrigger, TabsTriggerProps } from "./components/tabs/Tabs.js";
|
|
64
119
|
import "./components/tabs/index.js";
|
|
120
|
+
import { TagInput, TagInputProps } from "./components/tag-input/TagInput.js";
|
|
121
|
+
import "./components/tag-input/index.js";
|
|
65
122
|
import { Text, TextProps, TextTone, TextVariant } from "./components/text/Text.js";
|
|
66
123
|
import "./components/text/index.js";
|
|
124
|
+
import { Textarea, TextareaProps, TextareaSize } from "./components/textarea/Textarea.js";
|
|
125
|
+
import "./components/textarea/index.js";
|
|
67
126
|
import { ToastOptions, Toaster, ToasterProps, toast } from "./components/toaster/Toaster.js";
|
|
68
127
|
import "./components/toaster/index.js";
|
|
69
128
|
import { Tooltip, TooltipContent, TooltipContentProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps } from "./components/tooltip/Tooltip.js";
|
|
@@ -71,5 +130,7 @@ import "./components/tooltip/index.js";
|
|
|
71
130
|
import { TopBar, TopBarProps } from "./components/top-bar/TopBar.js";
|
|
72
131
|
import { StoreOption, StoreSwitcher, StoreSwitcherProps } from "./components/top-bar/StoreSwitcher.js";
|
|
73
132
|
import "./components/top-bar/index.js";
|
|
74
|
-
import {
|
|
75
|
-
|
|
133
|
+
import { UnitInput, UnitInputProps } from "./components/unit-input/UnitInput.js";
|
|
134
|
+
import "./components/unit-input/index.js";
|
|
135
|
+
import { DateInput, FORMAT, MONEY_NUMBER_FORMAT, amountToPaise, currencySymbol, formatCount, formatDate, formatIsoDate, formatMoney, formatPaise, formatPaiseForEditing, formatTime, numberSeparators, paiseToAmount, parseDate, parseMoney } from "./lib/format.js";
|
|
136
|
+
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, type AlertTone, AppShell, type AppShellProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, type ButtonVariant, Calendar, type CalendarProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Chart, type ChartAspect, type ChartColor, type ChartConfig, ChartLegend, ChartLegendContent, type ChartLegendContentProps, type ChartLegendProps, type ChartProps, type ChartSeriesConfig, type ChartTable, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, type ChartTooltipProps, Checkbox, CheckboxList, type CheckboxListItem, type CheckboxListProps, type CheckboxProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxItem, type ComboboxProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, DateInput, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type DateRangeValue, Definition, type DefinitionProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Drawer, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, FORMAT, Field, type FieldControlProps, type FieldProps, FilterTabs, type FilterTabsItem, type FilterTabsProps, GlobalSearch, type GlobalSearchGroup, type GlobalSearchProps, type GlobalSearchResult, Icon, type IconName, type IconProps, type IconSize, type IconTone, Inline, type InlineProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonAlign, type InputGroupAddonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupShortcut, type InputGroupShortcutProps, type InputGroupSize, InputGroupText, type InputGroupTextProps, InputOtp, type InputOtpProps, type InputProps, type InputSize, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, type KeyValueItem, KeyValueList, type KeyValueListProps, Label, type LabelProps, Link, type LinkProps, LinkProvider, type LinkProviderProps, type LinkRender, type LinkRenderProps, MONEY_NUMBER_FORMAT, MediaGrid, type MediaGridItem, type MediaGridProps, type MetricSegment, MetricStrip, type MetricStripProps, MoneyInput, type MoneyInputProps, PageHeader, type PageHeaderMenuItem, type PageHeaderProps, Pagination, type PaginationProps, Popover, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, PopoverHeader, type PopoverHeaderProps, type PopoverProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, SaveBar, type SaveBarProps, ScrollArea, type ScrollAreaProps, SearchField, type SearchFieldProps, Select, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, type SelectSize, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorProps, Sheet, SheetBody, type SheetBodyProps, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, type SheetDescriptionProps, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, type SheetSide, SheetTitle, type SheetTitleProps, SheetTrigger, type SheetTriggerProps, SideNav, type SideNavAccount, type SideNavItem, type SideNavProps, type SideNavSection, Skeleton, type SkeletonProps, type SkeletonShape, type Space, Spinner, type SpinnerProps, Stack, type StackProps, StatusPill, type StatusPillProps, type StatusPillTone, type StoreOption, StoreSwitcher, type StoreSwitcherProps, type SummaryChip, SummaryChips, type SummaryChipsProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableLoader, type TableLoaderColumn, type TableLoaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TagInput, type TagInputProps, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type TextareaSize, type ToastOptions, Toaster, type ToasterProps, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, TopBar, type TopBarProps, UnitInput, type UnitInputProps, amountToPaise, chartColor, currencySymbol, formatCount, formatDate, formatIsoDate, formatMoney, formatPaise, formatPaiseForEditing, formatTime, getInitials, numberSeparators, paiseToAmount, parseDate, parseMoney, toast };
|
package/dist/index.js
CHANGED
|
@@ -1,38 +1,69 @@
|
|
|
1
|
+
import { Icon } from "./components/icon/Icon.js";
|
|
2
|
+
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/accordion/Accordion.js";
|
|
3
|
+
import { Text } from "./components/text/Text.js";
|
|
4
|
+
import { Alert } from "./components/alert/Alert.js";
|
|
5
|
+
import { Button } from "./components/button/Button.js";
|
|
6
|
+
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "./components/alert-dialog/AlertDialog.js";
|
|
1
7
|
import { AppShell } from "./components/app-shell/AppShell.js";
|
|
2
8
|
import { Avatar, getInitials } from "./components/avatar/Avatar.js";
|
|
3
|
-
import {
|
|
9
|
+
import { Breadcrumb } from "./components/breadcrumb/Breadcrumb.js";
|
|
10
|
+
import { FORMAT, MONEY_NUMBER_FORMAT, amountToPaise, currencySymbol, formatCount, formatDate, formatIsoDate, formatMoney, formatPaise, formatPaiseForEditing, formatTime, numberSeparators, paiseToAmount, parseDate, parseMoney } from "./lib/format.js";
|
|
11
|
+
import { Calendar } from "./components/calendar/Calendar.js";
|
|
4
12
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/card/Card.js";
|
|
5
|
-
import {
|
|
13
|
+
import { Chart, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, chartColor } from "./components/chart/Chart.js";
|
|
6
14
|
import { Checkbox } from "./components/checkbox/Checkbox.js";
|
|
7
|
-
import {
|
|
15
|
+
import { CheckboxList } from "./components/checkbox-list/CheckboxList.js";
|
|
16
|
+
import { SummaryChips } from "./components/summary-chips/SummaryChips.js";
|
|
17
|
+
import { Collapsible } from "./components/collapsible/Collapsible.js";
|
|
18
|
+
import { Combobox } from "./components/combobox/Combobox.js";
|
|
8
19
|
import { Pagination } from "./components/pagination/Pagination.js";
|
|
9
20
|
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/table/Table.js";
|
|
10
21
|
import { DataTable } from "./components/data-table/DataTable.js";
|
|
22
|
+
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupShortcut, InputGroupText } from "./components/input-group/InputGroup.js";
|
|
23
|
+
import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "./components/popover/Popover.js";
|
|
24
|
+
import { DatePicker } from "./components/date-picker/DatePicker.js";
|
|
25
|
+
import { DateRangePicker } from "./components/date-range-picker/DateRangePicker.js";
|
|
11
26
|
import { Definition } from "./components/definition/Definition.js";
|
|
12
27
|
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./components/dialog/Dialog.js";
|
|
28
|
+
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./components/drawer/Drawer.js";
|
|
13
29
|
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/dropdown-menu/DropdownMenu.js";
|
|
14
|
-
import { Text } from "./components/text/Text.js";
|
|
15
30
|
import { EmptyState } from "./components/empty-state/EmptyState.js";
|
|
31
|
+
import { Label } from "./components/field/Label.js";
|
|
32
|
+
import { Field } from "./components/field/Field.js";
|
|
16
33
|
import { FilterTabs } from "./components/filter-tabs/FilterTabs.js";
|
|
17
|
-
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupShortcut, InputGroupText } from "./components/input-group/InputGroup.js";
|
|
18
34
|
import { Kbd, KbdGroup } from "./components/kbd/Kbd.js";
|
|
19
35
|
import { GlobalSearch } from "./components/global-search/GlobalSearch.js";
|
|
20
36
|
import { Inline } from "./components/inline/Inline.js";
|
|
21
37
|
import { Input } from "./components/input/Input.js";
|
|
38
|
+
import { InputOtp } from "./components/input-otp/InputOtp.js";
|
|
39
|
+
import { KeyValueList } from "./components/key-value-list/KeyValueList.js";
|
|
40
|
+
import { Link } from "./components/link/Link.js";
|
|
22
41
|
import { LinkProvider } from "./components/link-provider/LinkProvider.js";
|
|
42
|
+
import { MediaGrid } from "./components/media-grid/MediaGrid.js";
|
|
23
43
|
import { MetricStrip } from "./components/metric-strip/MetricStrip.js";
|
|
44
|
+
import { MoneyInput } from "./components/money-input/MoneyInput.js";
|
|
24
45
|
import { StatusPill } from "./components/status-pill/StatusPill.js";
|
|
25
46
|
import { PageHeader } from "./components/page-header/PageHeader.js";
|
|
26
|
-
import {
|
|
47
|
+
import { Progress } from "./components/progress/Progress.js";
|
|
48
|
+
import { RadioGroup, RadioGroupItem } from "./components/radio-group/RadioGroup.js";
|
|
49
|
+
import { SaveBar } from "./components/save-bar/SaveBar.js";
|
|
50
|
+
import { ScrollArea } from "./components/scroll-area/ScrollArea.js";
|
|
27
51
|
import { SearchField } from "./components/search-field/SearchField.js";
|
|
52
|
+
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "./components/select/Select.js";
|
|
53
|
+
import { Separator } from "./components/separator/Separator.js";
|
|
54
|
+
import { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./components/sheet/Sheet.js";
|
|
28
55
|
import { SideNav } from "./components/side-nav/SideNav.js";
|
|
29
56
|
import { Skeleton } from "./components/skeleton/Skeleton.js";
|
|
30
57
|
import { Spinner } from "./components/spinner/Spinner.js";
|
|
31
58
|
import { Stack } from "./components/stack/Stack.js";
|
|
59
|
+
import { Switch } from "./components/switch/Switch.js";
|
|
32
60
|
import { TableLoader } from "./components/table-loader/TableLoader.js";
|
|
33
61
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/tabs/Tabs.js";
|
|
62
|
+
import { TagInput } from "./components/tag-input/TagInput.js";
|
|
63
|
+
import { Textarea } from "./components/textarea/Textarea.js";
|
|
34
64
|
import { Toaster, toast } from "./components/toaster/Toaster.js";
|
|
35
65
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip/Tooltip.js";
|
|
36
66
|
import { TopBar } from "./components/top-bar/TopBar.js";
|
|
37
67
|
import { StoreSwitcher } from "./components/top-bar/StoreSwitcher.js";
|
|
38
|
-
|
|
68
|
+
import { UnitInput } from "./components/unit-input/UnitInput.js";
|
|
69
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AppShell, Avatar, Breadcrumb, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Chart, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxList, Collapsible, Combobox, DataTable, DatePicker, DateRangePicker, Definition, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FORMAT, Field, FilterTabs, GlobalSearch, Icon, Inline, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupShortcut, InputGroupText, InputOtp, Kbd, KbdGroup, KeyValueList, Label, Link, LinkProvider, MONEY_NUMBER_FORMAT, MediaGrid, MetricStrip, MoneyInput, PageHeader, Pagination, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SaveBar, ScrollArea, SearchField, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SideNav, Skeleton, Spinner, Stack, StatusPill, StoreSwitcher, SummaryChips, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableLoader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, Text, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, UnitInput, amountToPaise, chartColor, currencySymbol, formatCount, formatDate, formatIsoDate, formatMoney, formatPaise, formatPaiseForEditing, formatTime, getInitials, numberSeparators, paiseToAmount, parseDate, parseMoney, toast };
|
package/dist/lib/cn.js
CHANGED
|
@@ -20,7 +20,8 @@ const twMerge = extendTailwindMerge({
|
|
|
20
20
|
"c3",
|
|
21
21
|
"label",
|
|
22
22
|
"btn",
|
|
23
|
-
"btn-sm"
|
|
23
|
+
"btn-sm",
|
|
24
|
+
"otp"
|
|
24
25
|
],
|
|
25
26
|
shadow: [
|
|
26
27
|
"ring-subtle",
|
|
@@ -33,7 +34,13 @@ const twMerge = extendTailwindMerge({
|
|
|
33
34
|
],
|
|
34
35
|
container: ["content"]
|
|
35
36
|
},
|
|
36
|
-
classGroups: {
|
|
37
|
+
classGroups: {
|
|
38
|
+
h: [{ h: ["progress"] }],
|
|
39
|
+
w: [{ w: ["anchor"] }],
|
|
40
|
+
"min-w": [{ "min-w": ["anchor"] }],
|
|
41
|
+
"max-w": [{ "max-w": ["available"] }],
|
|
42
|
+
"max-h": [{ "max-h": ["available"] }]
|
|
43
|
+
}
|
|
37
44
|
}
|
|
38
45
|
});
|
|
39
46
|
/**
|