@trsys-tech/matrix-library 0.6.3-canary-4 → 0.6.3-canary-6

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.
Files changed (22) hide show
  1. package/dist/badge.es.js +19 -25
  2. package/dist/badge.es.js.map +1 -1
  3. package/dist/components/badge/Badge.d.ts +41 -112
  4. package/dist/components/badge/Badge.d.ts.map +1 -1
  5. package/dist/components/form-time-picker/FormTimePicker.d.ts +3 -2
  6. package/dist/components/form-time-picker/FormTimePicker.d.ts.map +1 -1
  7. package/dist/components/icon-botton/IconButton.d.ts.map +1 -1
  8. package/dist/components/status/Status.d.ts +151 -0
  9. package/dist/components/status/Status.d.ts.map +1 -0
  10. package/dist/formtimepicker.es.js +18 -9
  11. package/dist/formtimepicker.es.js.map +1 -1
  12. package/dist/iconbutton.es.js +9 -9
  13. package/dist/iconbutton.es.js.map +1 -1
  14. package/dist/index.d.ts +1 -0
  15. package/dist/index.d.ts.map +1 -1
  16. package/dist/index.es.js +249 -248
  17. package/dist/multiselect.es.js +37 -37
  18. package/dist/multiselect.es.js.map +1 -1
  19. package/dist/status.es.js +34 -0
  20. package/dist/status.es.js.map +1 -0
  21. package/package.json +1 -1
  22. package/dist/styles.css +0 -1
package/dist/multiselect.es.js CHANGED
@@ -1,14 +1,14 @@
1
- import { jsxs as s, jsx as r, Fragment as S } from "react/jsx-runtime";
2
- import * as l from "react";
1
+ import { jsxs as l, jsx as r, Fragment as S } from "react/jsx-runtime";
2
+ import * as s from "react";
3
3
  import { tv as ae } from "tailwind-variants";
4
- import { XMark as I, CircleXmark as le, ChevronDown as se, Check as D } from "@trsys-tech/matrix-icons";
4
+ import { XMark as I, CircleXmark as se, ChevronDown as le, Check as D } from "@trsys-tech/matrix-icons";
5
5
  import { cn as f } from "./utils.es.js";
6
- import { Badge as T } from "./badge.es.js";
6
+ import { Status as T } from "./status.es.js";
7
7
  import { Button as oe } from "./button.es.js";
8
8
  import { Separator as A } from "./separator.es.js";
9
9
  import { Popover as ne, PopoverTrigger as ce, PopoverContent as ie } from "./popover.es.js";
10
10
  import { Command as de, CommandInput as ue, CommandList as me, CommandEmpty as pe, CommandGroup as R, CommandItem as w, CommandSeparator as fe } from "./command.es.js";
11
- const B = ae({
11
+ const K = ae({
12
12
  base: "flex gap-1 items-center py-0.5 px-2 rounded-xl",
13
13
  variants: {
14
14
  variant: {
@@ -27,12 +27,12 @@ const B = ae({
27
27
  value: k,
28
28
  variant: C,
29
29
  disabled: j,
30
- defaultValue: K = [],
31
- placeholder: L = "Select options",
30
+ defaultValue: L = [],
31
+ placeholder: V = "Select options",
32
32
  maxCount: p = 3,
33
- modalPopover: V = !1,
33
+ modalPopover: z = !1,
34
34
  // asChild = false,
35
- className: z,
35
+ className: B,
36
36
  moreText: W = "more",
37
37
  clearText: X = "Clear",
38
38
  closeText: $ = "Close",
@@ -45,9 +45,9 @@ const B = ae({
45
45
  loadingText: g = "Loading...",
46
46
  ...J
47
47
  }, Q) => {
48
- const o = k !== void 0, [U, d] = l.useState(K), t = o ? k : U, [Y, u] = l.useState(!1), v = l.useRef(null), [Z, P] = l.useState(""), [F, M] = l.useState(!1), [c, x] = l.useState(
48
+ const o = k !== void 0, [U, d] = s.useState(L), t = o ? k : U, [Y, u] = s.useState(!1), v = s.useRef(null), [Z, P] = s.useState(""), [F, M] = s.useState(!1), [c, x] = s.useState(
49
49
  new Map(m.map((e) => [e.value, e]))
50
- ), _ = l.useCallback(
50
+ ), _ = s.useCallback(
51
51
  (e) => {
52
52
  if (e.key === "Enter" && h) {
53
53
  if (u(!0), e.preventDefault(), e.stopPropagation(), !e.currentTarget.value) return;
@@ -65,20 +65,20 @@ const B = ae({
65
65
  }
66
66
  },
67
67
  [h, n, c, t, o]
68
- ), E = l.useCallback(
68
+ ), E = s.useCallback(
69
69
  (e) => {
70
70
  const a = t.includes(e) ? t.filter((i) => i !== e) : [...t, e];
71
71
  o || d(a), n(a);
72
72
  },
73
73
  [n, t, o]
74
- ), y = l.useCallback(() => {
74
+ ), y = s.useCallback(() => {
75
75
  o || d([]), n([]), h && x(new Map(m.map((e) => [e.value, e])));
76
- }, [n, h, m, o]), ee = l.useCallback(() => {
76
+ }, [n, h, m, o]), ee = s.useCallback(() => {
77
77
  u((e) => !e);
78
- }, []), re = l.useCallback(() => {
78
+ }, []), re = s.useCallback(() => {
79
79
  const e = t.slice(0, p);
80
80
  o || d(e), n(e);
81
- }, [p, t, n, o]), te = l.useCallback(() => {
81
+ }, [p, t, n, o]), te = s.useCallback(() => {
82
82
  if (t.length === c.size)
83
83
  y();
84
84
  else {
@@ -86,11 +86,11 @@ const B = ae({
86
86
  o || d(e), n(e);
87
87
  }
88
88
  }, [y, n, c, t.length, o]);
89
- return l.useEffect(() => {
89
+ return s.useEffect(() => {
90
90
  x(new Map(m.map((e) => [e.value, e])));
91
- }, [m]), l.useLayoutEffect(() => {
91
+ }, [m]), s.useLayoutEffect(() => {
92
92
  v.current && (v?.current?.firstChild?.offsetTop < v?.current?.lastChild?.offsetTop ? M(!0) : M(!1));
93
- }, [t]), /* @__PURE__ */ s(ne, { open: Y, onOpenChange: u, modal: V, children: [
93
+ }, [t]), /* @__PURE__ */ l(ne, { open: Y, onOpenChange: u, modal: z, children: [
94
94
  /* @__PURE__ */ r(ce, { asChild: !0, children: /* @__PURE__ */ r(
95
95
  oe,
96
96
  {
@@ -104,22 +104,22 @@ const B = ae({
104
104
  className: f(
105
105
  "group flex max-h-14 h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
106
106
  F && "h-auto",
107
- z
107
+ B
108
108
  ),
109
109
  "data-placeholder": t.length ? void 0 : "",
110
110
  endIcon: /* @__PURE__ */ r(
111
- se,
111
+ le,
112
112
  {
113
113
  role: "button",
114
114
  "aria-label": "Expand dropdown",
115
115
  className: "!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform"
116
116
  }
117
117
  ),
118
- children: /* @__PURE__ */ r(S, { children: t.length > 0 ? /* @__PURE__ */ s("div", { className: "flex justify-between items-center w-full", children: [
119
- /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center gap-2", ref: v, children: [
118
+ children: /* @__PURE__ */ r(S, { children: t.length > 0 ? /* @__PURE__ */ l("div", { className: "flex justify-between items-center w-full", children: [
119
+ /* @__PURE__ */ l("div", { className: "flex flex-wrap items-center gap-2", ref: v, children: [
120
120
  t.slice(0, p).map((e) => {
121
121
  const a = c.get(e), i = a?.icon;
122
- return /* @__PURE__ */ s(T, { className: f(B({ variant: C }), { "text-gray-400 bg-gray-200": j || b }), children: [
122
+ return /* @__PURE__ */ l(T, { className: f(K({ variant: C }), { "text-gray-400 bg-gray-200": j || b }), children: [
123
123
  /* @__PURE__ */ r(
124
124
  I,
125
125
  {
@@ -133,10 +133,10 @@ const B = ae({
133
133
  a?.label
134
134
  ] }, e);
135
135
  }),
136
- t.length > p && /* @__PURE__ */ s(T, { className: f(B({ variant: C })), children: [
136
+ t.length > p && /* @__PURE__ */ l(T, { className: f(K({ variant: C })), children: [
137
137
  `+ ${t.length - p} ${W}`,
138
138
  /* @__PURE__ */ r(
139
- le,
139
+ se,
140
140
  {
141
141
  role: "button",
142
142
  className: "ml-2 h-4.5 w-4.5 cursor-pointer",
@@ -148,7 +148,7 @@ const B = ae({
148
148
  ] }),
149
149
  b && g ? g : null
150
150
  ] }),
151
- /* @__PURE__ */ s("div", { className: "flex items-center justify-between gap-1", children: [
151
+ /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-1", children: [
152
152
  /* @__PURE__ */ r(
153
153
  I,
154
154
  {
@@ -162,15 +162,15 @@ const B = ae({
162
162
  ),
163
163
  /* @__PURE__ */ r(A, { orientation: "vertical", className: "flex min-h-5 h-full" })
164
164
  ] })
165
- ] }) : /* @__PURE__ */ r(S, { children: b && g ? g : L }) })
165
+ ] }) : /* @__PURE__ */ r(S, { children: b && g ? g : V }) })
166
166
  }
167
167
  ) }),
168
- /* @__PURE__ */ r(ie, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => u(!1), children: /* @__PURE__ */ s(de, { className: "w-[--radix-popper-anchor-width] max-h-[--radix-popper-available-height]", children: [
168
+ /* @__PURE__ */ r(ie, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => u(!1), children: /* @__PURE__ */ l(de, { className: "w-[--radix-popper-anchor-width] max-h-[--radix-popper-available-height]", children: [
169
169
  /* @__PURE__ */ r(ue, { placeholder: q, onKeyDown: _, value: Z, onValueChange: P }),
170
- /* @__PURE__ */ s(me, { className: "", children: [
170
+ /* @__PURE__ */ l(me, { className: "", children: [
171
171
  /* @__PURE__ */ r(pe, { children: O }),
172
- /* @__PURE__ */ s(R, { children: [
173
- H && /* @__PURE__ */ s(w, { onSelect: te, className: "cursor-pointer", children: [
172
+ /* @__PURE__ */ l(R, { children: [
173
+ H && /* @__PURE__ */ l(w, { onSelect: te, className: "cursor-pointer", children: [
174
174
  /* @__PURE__ */ r(
175
175
  "div",
176
176
  {
@@ -181,7 +181,7 @@ const B = ae({
181
181
  children: /* @__PURE__ */ r(D, { className: "h-4.5 w-4.5" })
182
182
  }
183
183
  ),
184
- /* @__PURE__ */ s("span", { children: [
184
+ /* @__PURE__ */ l("span", { children: [
185
185
  "(",
186
186
  G,
187
187
  ")"
@@ -189,7 +189,7 @@ const B = ae({
189
189
  ] }, "all"),
190
190
  Array.from(c.values()).map((e) => {
191
191
  const a = t.includes(e.value);
192
- return /* @__PURE__ */ s(w, { onSelect: () => E(e.value), className: "cursor-pointer", children: [
192
+ return /* @__PURE__ */ l(w, { onSelect: () => E(e.value), className: "cursor-pointer", children: [
193
193
  /* @__PURE__ */ r(
194
194
  "div",
195
195
  {
@@ -206,8 +206,8 @@ const B = ae({
206
206
  })
207
207
  ] }),
208
208
  /* @__PURE__ */ r(fe, {}),
209
- /* @__PURE__ */ r(R, { children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
210
- t.length > 0 && /* @__PURE__ */ s(S, { children: [
209
+ /* @__PURE__ */ r(R, { children: /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
210
+ t.length > 0 && /* @__PURE__ */ l(S, { children: [
211
211
  /* @__PURE__ */ r(w, { onSelect: y, className: "flex-1 justify-center cursor-pointer", children: X }),
212
212
  /* @__PURE__ */ r(A, { orientation: "vertical", className: "flex min-h-6 h-full" })
213
213
  ] }),
@@ -216,7 +216,7 @@ const B = ae({
216
216
  ] })
217
217
  ] }) })
218
218
  ] });
219
- }, be = l.forwardRef(he);
219
+ }, be = s.forwardRef(he);
220
220
  be.displayName = "MultiSelect";
221
221
  export {
222
222
  be as MultiSelect
package/dist/multiselect.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"multiselect.es.js","sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\nimport { Check, ChevronDown, CircleXmark, XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Badge } from \"../badge/Badge\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Separator } from \"../separator/Separator\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from \"../command/Command\";\r\n\r\n/**\r\n * Variants for the multi-select component to handle different styles.\r\n * Uses tailwind-variants (cva) to define different styles based on \"variant\" prop.\r\n */\r\nconst multiSelectVariants = tv({\r\n base: \"flex gap-1 items-center py-0.5 px-2 rounded-xl\",\r\n variants: {\r\n variant: {\r\n default: \"border-none shadow-none bg-primary-50 text-primary hover:bg-primary-50\",\r\n secondary: \"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n destructive: \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\r\n inverted: \"inverted\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n});\r\n\r\n/**\r\n * Props for MultiSelect component\r\n */\r\ninterface MultiSelectProps<T extends string | number>\r\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\" | \"defaultValue\">,\r\n VariantProps<typeof multiSelectVariants> {\r\n /**\r\n * An array of option objects to be displayed in the multi-select component.\r\n * Each option object has a label, value, and an optional icon.\r\n *\r\n * *Important: Use a constant Array*\r\n */\r\n options: {\r\n /** The text to display for the option. */\r\n label: string;\r\n /** The unique value associated with the option. */\r\n value: T;\r\n /** Optional icon component to display alongside the option. */\r\n icon?: React.ComponentType<{ className?: string }>;\r\n }[];\r\n\r\n /**\r\n * Callback function triggered when the selected values change.\r\n * Receives an array of the new selected values.\r\n */\r\n onValueChange: (value: T[]) => void;\r\n\r\n /**\r\n * selected values in the multi-select component.\r\n */\r\n value?: T[];\r\n\r\n /** The default selected values when the component mounts. */\r\n defaultValue?: T[];\r\n\r\n /**\r\n * Placeholder text to be displayed when no values are selected.\r\n * Optional, defaults to \"Select options\".\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Maximum number of items to display. Extra selected items will be summarized.\r\n * Optional, defaults to 3.\r\n */\r\n maxCount?: number;\r\n\r\n /**\r\n * The modality of the popover. When set to true, interaction with outside elements\r\n * will be disabled and only popover content will be visible to screen readers.\r\n * Optional, defaults to false.\r\n */\r\n modalPopover?: boolean;\r\n\r\n /**\r\n * If true, renders the multi-select component as a child of another component.\r\n * Optional, defaults to false.\r\n */\r\n asChild?: boolean;\r\n\r\n /**\r\n * Additional class names to apply custom styles to the multi-select component.\r\n * Optional, can be used to add custom styles.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Text to display on the close button when the multi-select component is open.\r\n */\r\n closeText?: string;\r\n\r\n /**\r\n * Whether to show the select all option or not\r\n */\r\n showSelectAll?: boolean;\r\n\r\n /**\r\n * Text to display on the select all button when the multi-select component is open.\r\n */\r\n selectAllText?: string;\r\n\r\n /**\r\n * Text to display in the search input.\r\n */\r\n searchText?: string;\r\n\r\n /**\r\n * If true, a new option will be added when the user submits a search query if it doesn't already exist.\r\n * Optional, defaults to false.\r\n */\r\n addOptionOnSearchNotFound?: boolean;\r\n\r\n /**\r\n * Text to display on the clear button when the multi-select component is open.\r\n */\r\n clearText?: string;\r\n\r\n /**\r\n * Text to display on the more button when the multi-select component is open.\r\n */\r\n moreText?: string;\r\n\r\n /**\r\n * Text to display when no results are found in the search input.\r\n */\r\n noResultsText?: string;\r\n\r\n /**\r\n * If true, the multi-select component will be in a loading state.\r\n */\r\n loading?: boolean;\r\n\r\n /**\r\n * Text to display when the multi-select component is in a loading state.\r\n */\r\n loadingText?: string;\r\n}\r\n\r\nconst MultiSelect = <T extends string | number>(\r\n {\r\n options: _options,\r\n onValueChange,\r\n value,\r\n variant,\r\n disabled,\r\n defaultValue = [],\r\n placeholder = \"Select options\",\r\n maxCount = 3,\r\n modalPopover = false,\r\n // asChild = false,\r\n className,\r\n moreText = \"more\",\r\n clearText = \"Clear\",\r\n closeText = \"Close\",\r\n selectAllText = \"Select All\",\r\n noResultsText = \"No results found.\",\r\n searchText = \"Search...\",\r\n addOptionOnSearchNotFound = false,\r\n showSelectAll = true,\r\n loading,\r\n loadingText = \"Loading...\",\r\n ...props\r\n }: MultiSelectProps<T>,\r\n ref: React.ForwardedRef<HTMLButtonElement>,\r\n) => {\r\n const isControlled = value !== undefined;\r\n const [internalSelectedValues, setInternalSelectedValues] = React.useState<T[]>(defaultValue);\r\n const selectedValues = isControlled ? value : internalSelectedValues;\r\n const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n const containerRef = React.useRef<HTMLDivElement>(null);\r\n const [searchValue, setSearchValue] = React.useState(\"\");\r\n const [isWrapped, setIsWrapped] = React.useState(false);\r\n const [options, setOptions] = React.useState<Map<T, MultiSelectProps<T>[\"options\"][number]>>(\r\n new Map(_options.map(option => [option.value, option])),\r\n );\r\n\r\n const handleInputKeyDown = React.useCallback(\r\n (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (event.key === \"Enter\" && addOptionOnSearchNotFound) {\r\n setIsPopoverOpen(true);\r\n event.preventDefault();\r\n event.stopPropagation();\r\n if (!event.currentTarget.value) return;\r\n const newOption = { value: event.currentTarget.value as T, label: event.currentTarget.value };\r\n if (options.get(newOption.value) === undefined) {\r\n setOptions(prev => {\r\n return new Map(prev).set(newOption.value, newOption);\r\n });\r\n const newSelectedValues = [...selectedValues, newOption.value];\r\n if (!isControlled) {\r\n setInternalSelectedValues(newSelectedValues);\r\n }\r\n onValueChange(newSelectedValues);\r\n setSearchValue(\"\");\r\n }\r\n } else if (event.key === \"Enter\") {\r\n setIsPopoverOpen(true);\r\n } else if (event.key === \"Backspace\" && !event.currentTarget.value) {\r\n const newSelectedValues = [...selectedValues];\r\n newSelectedValues.pop();\r\n if (!isControlled) {\r\n setInternalSelectedValues(newSelectedValues);\r\n }\r\n onValueChange(newSelectedValues);\r\n }\r\n },\r\n [addOptionOnSearchNotFound, onValueChange, options, selectedValues, isControlled],\r\n );\r\n\r\n const toggleOption = React.useCallback(\r\n (option: T) => {\r\n const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter(value => value !== option) : [...selectedValues, option];\r\n if (!isControlled) {\r\n setInternalSelectedValues(newSelectedValues);\r\n }\r\n onValueChange(newSelectedValues);\r\n },\r\n [onValueChange, selectedValues, isControlled],\r\n );\r\n\r\n const handleClear = React.useCallback(() => {\r\n if (!isControlled) {\r\n setInternalSelectedValues([]);\r\n }\r\n onValueChange([]);\r\n if (addOptionOnSearchNotFound) {\r\n setOptions(new Map(_options.map(option => [option.value, option])));\r\n }\r\n }, [onValueChange, addOptionOnSearchNotFound, _options, isControlled]);\r\n\r\n const handleTogglePopover = React.useCallback(() => {\r\n setIsPopoverOpen(prev => !prev);\r\n }, []);\r\n\r\n const clearExtraOptions = React.useCallback(() => {\r\n const newSelectedValues = selectedValues.slice(0, maxCount);\r\n if (!isControlled) {\r\n setInternalSelectedValues(newSelectedValues);\r\n }\r\n onValueChange(newSelectedValues);\r\n }, [maxCount, selectedValues, onValueChange, isControlled]);\r\n\r\n const toggleAll = React.useCallback(() => {\r\n if (selectedValues.length === options.size) {\r\n handleClear();\r\n } else {\r\n const allValues = Array.from(options.keys());\r\n if (!isControlled) {\r\n setInternalSelectedValues(allValues);\r\n }\r\n onValueChange(allValues);\r\n }\r\n }, [handleClear, onValueChange, options, selectedValues.length, isControlled]);\r\n\r\n React.useEffect(() => {\r\n setOptions(new Map(_options.map(option => [option.value, option])));\r\n }, [_options]);\r\n\r\n React.useLayoutEffect(() => {\r\n if (containerRef.current) {\r\n if ((containerRef?.current?.firstChild as HTMLElement)?.offsetTop < (containerRef?.current?.lastChild as HTMLElement)?.offsetTop) {\r\n setIsWrapped(true);\r\n } else {\r\n setIsWrapped(false);\r\n }\r\n }\r\n }, [selectedValues]);\r\n\r\n return (\r\n <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n type=\"button\"\r\n ref={ref}\r\n variant=\"text\"\r\n loading={loading}\r\n disabled={disabled}\r\n {...props}\r\n onClick={handleTogglePopover}\r\n className={cn(\r\n \"group flex max-h-14 h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n isWrapped && \"h-auto\",\r\n className,\r\n )}\r\n data-placeholder={!selectedValues.length ? \"\" : undefined}\r\n endIcon={\r\n <ChevronDown\r\n role=\"button\"\r\n aria-label=\"Expand dropdown\"\r\n className=\"!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform\"\r\n />\r\n }\r\n >\r\n <>\r\n {selectedValues.length > 0 ? (\r\n <div className=\"flex justify-between items-center w-full\">\r\n <div className=\"flex flex-wrap items-center gap-2\" ref={containerRef}>\r\n {selectedValues.slice(0, maxCount).map(value => {\r\n const option = options.get(value);\r\n const IconComponent = option?.icon;\r\n return (\r\n <Badge key={value} className={cn(multiSelectVariants({ variant }), { \"text-gray-400 bg-gray-200\": disabled || loading })}>\r\n <XMark\r\n className=\"h-4 w-4 cursor-pointer\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n toggleOption(value);\r\n }}\r\n />\r\n {IconComponent && <IconComponent className=\"h-4 w-4 mr-2\" />}\r\n {option?.label}\r\n </Badge>\r\n );\r\n })}\r\n {selectedValues.length > maxCount && (\r\n <Badge className={cn(multiSelectVariants({ variant }))}>\r\n {`+ ${selectedValues.length - maxCount} ${moreText}`}\r\n <CircleXmark\r\n role=\"button\"\r\n className=\"ml-2 h-4.5 w-4.5 cursor-pointer\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n clearExtraOptions();\r\n }}\r\n />\r\n </Badge>\r\n )}\r\n {loading && loadingText ? loadingText : null}\r\n </div>\r\n <div className=\"flex items-center justify-between gap-1\">\r\n <XMark\r\n role=\"button\"\r\n className=\"h-5 w-5 text-muted-foreground cursor-pointer\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n handleClear();\r\n }}\r\n aria-label=\"Clear\"\r\n />\r\n <Separator orientation=\"vertical\" className=\"flex min-h-5 h-full\" />\r\n </div>\r\n </div>\r\n ) : (\r\n <>{loading && loadingText ? loadingText : placeholder}</>\r\n )}\r\n </>\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)}>\r\n <Command className=\"w-[--radix-popper-anchor-width] max-h-[--radix-popper-available-height]\">\r\n <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} value={searchValue} onValueChange={setSearchValue} />\r\n <CommandList className=\"\">\r\n <CommandEmpty>{noResultsText}</CommandEmpty>\r\n <CommandGroup>\r\n {showSelectAll && (\r\n <CommandItem key=\"all\" onSelect={toggleAll} className=\"cursor-pointer\">\r\n <div\r\n className={cn(\r\n \"mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary\",\r\n selectedValues.length === options.size ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n )}\r\n >\r\n <Check className=\"h-4.5 w-4.5\" />\r\n </div>\r\n <span>({selectAllText})</span>\r\n </CommandItem>\r\n )}\r\n {Array.from(options.values()).map(option => {\r\n const isSelected = selectedValues.includes(option.value);\r\n return (\r\n <CommandItem key={option.value} onSelect={() => toggleOption(option.value)} className=\"cursor-pointer\">\r\n <div\r\n className={cn(\r\n \"mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary\",\r\n isSelected ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n )}\r\n >\r\n <Check className=\"h-4.5 w-4.5\" />\r\n </div>\r\n {option.icon && <option.icon className=\"mr-2 h-4.5 w-4.5 text-muted-foreground\" />}\r\n <span>{option.label}</span>\r\n </CommandItem>\r\n );\r\n })}\r\n </CommandGroup>\r\n <CommandSeparator />\r\n <CommandGroup>\r\n <div className=\"flex items-center justify-between\">\r\n {selectedValues.length > 0 && (\r\n <>\r\n <CommandItem onSelect={handleClear} className=\"flex-1 justify-center cursor-pointer\">\r\n {clearText}\r\n </CommandItem>\r\n <Separator orientation=\"vertical\" className=\"flex min-h-6 h-full\" />\r\n </>\r\n )}\r\n <CommandItem onSelect={() => setIsPopoverOpen(false)} className=\"flex-1 justify-center cursor-pointer max-w-full\">\r\n {closeText}\r\n </CommandItem>\r\n </div>\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n};\r\n\r\nconst ForwardedMultiSelect = React.forwardRef(MultiSelect) as (<T extends string | number>(\r\n props: MultiSelectProps<T> & { ref?: React.Ref<HTMLButtonElement> },\r\n) => React.ReactElement) & { displayName?: string };\r\n\r\nForwardedMultiSelect.displayName = \"MultiSelect\";\r\n\r\nexport { ForwardedMultiSelect as MultiSelect, type MultiSelectProps };\r\n"],"names":["multiSelectVariants","tv","MultiSelect","_options","onValueChange","value","variant","disabled","defaultValue","placeholder","maxCount","modalPopover","className","moreText","clearText","closeText","selectAllText","noResultsText","searchText","addOptionOnSearchNotFound","showSelectAll","loading","loadingText","props","ref","isControlled","internalSelectedValues","setInternalSelectedValues","React","selectedValues","isPopoverOpen","setIsPopoverOpen","containerRef","searchValue","setSearchValue","isWrapped","setIsWrapped","options","setOptions","option","handleInputKeyDown","event","newOption","prev","newSelectedValues","toggleOption","handleClear","handleTogglePopover","clearExtraOptions","toggleAll","allValues","Popover","jsx","PopoverTrigger","Button","cn","ChevronDown","jsxs","IconComponent","Badge","XMark","CircleXmark","Separator","Fragment","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","CommandSeparator","ForwardedMultiSelect"],"mappings":"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"}
1
+ {"version":3,"file":"multiselect.es.js","sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\nimport { Check, ChevronDown, CircleXmark, XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Status } from \"../status/Status\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Separator } from \"../separator/Separator\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from \"../command/Command\";\r\n\r\n/**\r\n * Variants for the multi-select component to handle different styles.\r\n * Uses tailwind-variants (cva) to define different styles based on \"variant\" prop.\r\n */\r\nconst multiSelectVariants = tv({\r\n base: \"flex gap-1 items-center py-0.5 px-2 rounded-xl\",\r\n variants: {\r\n variant: {\r\n default: \"border-none shadow-none bg-primary-50 text-primary hover:bg-primary-50\",\r\n secondary: \"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n destructive: \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\r\n inverted: \"inverted\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n});\r\n\r\n/**\r\n * Props for MultiSelect component\r\n */\r\ninterface MultiSelectProps<T extends string | number>\r\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\" | \"defaultValue\">,\r\n VariantProps<typeof multiSelectVariants> {\r\n /**\r\n * An array of option objects to be displayed in the multi-select component.\r\n * Each option object has a label, value, and an optional icon.\r\n *\r\n * *Important: Use a constant Array*\r\n */\r\n options: {\r\n /** The text to display for the option. */\r\n label: string;\r\n /** The unique value associated with the option. */\r\n value: T;\r\n /** Optional icon component to display alongside the option. */\r\n icon?: React.ComponentType<{ className?: string }>;\r\n }[];\r\n\r\n /**\r\n * Callback function triggered when the selected values change.\r\n * Receives an array of the new selected values.\r\n */\r\n onValueChange: (value: T[]) => void;\r\n\r\n /**\r\n * selected values in the multi-select component.\r\n */\r\n value?: T[];\r\n\r\n /** The default selected values when the component mounts. */\r\n defaultValue?: T[];\r\n\r\n /**\r\n * Placeholder text to be displayed when no values are selected.\r\n * Optional, defaults to \"Select options\".\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Maximum number of items to display. Extra selected items will be summarized.\r\n * Optional, defaults to 3.\r\n */\r\n maxCount?: number;\r\n\r\n /**\r\n * The modality of the popover. When set to true, interaction with outside elements\r\n * will be disabled and only popover content will be visible to screen readers.\r\n * Optional, defaults to false.\r\n */\r\n modalPopover?: boolean;\r\n\r\n /**\r\n * If true, renders the multi-select component as a child of another component.\r\n * Optional, defaults to false.\r\n */\r\n asChild?: boolean;\r\n\r\n /**\r\n * Additional class names to apply custom styles to the multi-select component.\r\n * Optional, can be used to add custom styles.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Text to display on the close button when the multi-select component is open.\r\n */\r\n closeText?: string;\r\n\r\n /**\r\n * Whether to show the select all option or not\r\n */\r\n showSelectAll?: boolean;\r\n\r\n /**\r\n * Text to display on the select all button when the multi-select component is open.\r\n */\r\n selectAllText?: string;\r\n\r\n /**\r\n * Text to display in the search input.\r\n */\r\n searchText?: string;\r\n\r\n /**\r\n * If true, a new option will be added when the user submits a search query if it doesn't already exist.\r\n * Optional, defaults to false.\r\n */\r\n addOptionOnSearchNotFound?: boolean;\r\n\r\n /**\r\n * Text to display on the clear button when the multi-select component is open.\r\n */\r\n clearText?: string;\r\n\r\n /**\r\n * Text to display on the more button when the multi-select component is open.\r\n */\r\n moreText?: string;\r\n\r\n /**\r\n * Text to display when no results are found in the search input.\r\n */\r\n noResultsText?: string;\r\n\r\n /**\r\n * If true, the multi-select component will be in a loading state.\r\n */\r\n loading?: boolean;\r\n\r\n /**\r\n * Text to display when the multi-select component is in a loading state.\r\n */\r\n loadingText?: string;\r\n}\r\n\r\nconst MultiSelect = <T extends string | number>(\r\n {\r\n options: _options,\r\n onValueChange,\r\n value,\r\n variant,\r\n disabled,\r\n defaultValue = [],\r\n placeholder = \"Select options\",\r\n maxCount = 3,\r\n modalPopover = false,\r\n // asChild = false,\r\n className,\r\n moreText = \"more\",\r\n clearText = \"Clear\",\r\n closeText = \"Close\",\r\n selectAllText = \"Select All\",\r\n noResultsText = \"No results found.\",\r\n searchText = \"Search...\",\r\n addOptionOnSearchNotFound = false,\r\n showSelectAll = true,\r\n loading,\r\n loadingText = \"Loading...\",\r\n ...props\r\n }: MultiSelectProps<T>,\r\n ref: React.ForwardedRef<HTMLButtonElement>,\r\n) => {\r\n const isControlled = value !== undefined;\r\n const [internalSelectedValues, setInternalSelectedValues] = React.useState<T[]>(defaultValue);\r\n const selectedValues = isControlled ? value : internalSelectedValues;\r\n const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n const containerRef = React.useRef<HTMLDivElement>(null);\r\n const [searchValue, setSearchValue] = React.useState(\"\");\r\n const [isWrapped, setIsWrapped] = React.useState(false);\r\n const [options, setOptions] = React.useState<Map<T, MultiSelectProps<T>[\"options\"][number]>>(\r\n new Map(_options.map(option => [option.value, option])),\r\n );\r\n\r\n const handleInputKeyDown = React.useCallback(\r\n (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (event.key === \"Enter\" && addOptionOnSearchNotFound) {\r\n setIsPopoverOpen(true);\r\n event.preventDefault();\r\n event.stopPropagation();\r\n if (!event.currentTarget.value) return;\r\n const newOption = { value: event.currentTarget.value as T, label: event.currentTarget.value };\r\n if (options.get(newOption.value) === undefined) {\r\n setOptions(prev => {\r\n return new Map(prev).set(newOption.value, newOption);\r\n });\r\n const newSelectedValues = [...selectedValues, newOption.value];\r\n if (!isControlled) {\r\n setInternalSelectedValues(newSelectedValues);\r\n }\r\n onValueChange(newSelectedValues);\r\n setSearchValue(\"\");\r\n }\r\n } else if (event.key === \"Enter\") {\r\n setIsPopoverOpen(true);\r\n } else if (event.key === \"Backspace\" && !event.currentTarget.value) {\r\n const newSelectedValues = [...selectedValues];\r\n newSelectedValues.pop();\r\n if (!isControlled) {\r\n setInternalSelectedValues(newSelectedValues);\r\n }\r\n onValueChange(newSelectedValues);\r\n }\r\n },\r\n [addOptionOnSearchNotFound, onValueChange, options, selectedValues, isControlled],\r\n );\r\n\r\n const toggleOption = React.useCallback(\r\n (option: T) => {\r\n const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter(value => value !== option) : [...selectedValues, option];\r\n if (!isControlled) {\r\n setInternalSelectedValues(newSelectedValues);\r\n }\r\n onValueChange(newSelectedValues);\r\n },\r\n [onValueChange, selectedValues, isControlled],\r\n );\r\n\r\n const handleClear = React.useCallback(() => {\r\n if (!isControlled) {\r\n setInternalSelectedValues([]);\r\n }\r\n onValueChange([]);\r\n if (addOptionOnSearchNotFound) {\r\n setOptions(new Map(_options.map(option => [option.value, option])));\r\n }\r\n }, [onValueChange, addOptionOnSearchNotFound, _options, isControlled]);\r\n\r\n const handleTogglePopover = React.useCallback(() => {\r\n setIsPopoverOpen(prev => !prev);\r\n }, []);\r\n\r\n const clearExtraOptions = React.useCallback(() => {\r\n const newSelectedValues = selectedValues.slice(0, maxCount);\r\n if (!isControlled) {\r\n setInternalSelectedValues(newSelectedValues);\r\n }\r\n onValueChange(newSelectedValues);\r\n }, [maxCount, selectedValues, onValueChange, isControlled]);\r\n\r\n const toggleAll = React.useCallback(() => {\r\n if (selectedValues.length === options.size) {\r\n handleClear();\r\n } else {\r\n const allValues = Array.from(options.keys());\r\n if (!isControlled) {\r\n setInternalSelectedValues(allValues);\r\n }\r\n onValueChange(allValues);\r\n }\r\n }, [handleClear, onValueChange, options, selectedValues.length, isControlled]);\r\n\r\n React.useEffect(() => {\r\n setOptions(new Map(_options.map(option => [option.value, option])));\r\n }, [_options]);\r\n\r\n React.useLayoutEffect(() => {\r\n if (containerRef.current) {\r\n if ((containerRef?.current?.firstChild as HTMLElement)?.offsetTop < (containerRef?.current?.lastChild as HTMLElement)?.offsetTop) {\r\n setIsWrapped(true);\r\n } else {\r\n setIsWrapped(false);\r\n }\r\n }\r\n }, [selectedValues]);\r\n\r\n return (\r\n <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n type=\"button\"\r\n ref={ref}\r\n variant=\"text\"\r\n loading={loading}\r\n disabled={disabled}\r\n {...props}\r\n onClick={handleTogglePopover}\r\n className={cn(\r\n \"group flex max-h-14 h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n isWrapped && \"h-auto\",\r\n className,\r\n )}\r\n data-placeholder={!selectedValues.length ? \"\" : undefined}\r\n endIcon={\r\n <ChevronDown\r\n role=\"button\"\r\n aria-label=\"Expand dropdown\"\r\n className=\"!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform\"\r\n />\r\n }\r\n >\r\n <>\r\n {selectedValues.length > 0 ? (\r\n <div className=\"flex justify-between items-center w-full\">\r\n <div className=\"flex flex-wrap items-center gap-2\" ref={containerRef}>\r\n {selectedValues.slice(0, maxCount).map(value => {\r\n const option = options.get(value);\r\n const IconComponent = option?.icon;\r\n return (\r\n <Status key={value} className={cn(multiSelectVariants({ variant }), { \"text-gray-400 bg-gray-200\": disabled || loading })}>\r\n <XMark\r\n className=\"h-4 w-4 cursor-pointer\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n toggleOption(value);\r\n }}\r\n />\r\n {IconComponent && <IconComponent className=\"h-4 w-4 mr-2\" />}\r\n {option?.label}\r\n </Status>\r\n );\r\n })}\r\n {selectedValues.length > maxCount && (\r\n <Status className={cn(multiSelectVariants({ variant }))}>\r\n {`+ ${selectedValues.length - maxCount} ${moreText}`}\r\n <CircleXmark\r\n role=\"button\"\r\n className=\"ml-2 h-4.5 w-4.5 cursor-pointer\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n clearExtraOptions();\r\n }}\r\n />\r\n </Status>\r\n )}\r\n {loading && loadingText ? loadingText : null}\r\n </div>\r\n <div className=\"flex items-center justify-between gap-1\">\r\n <XMark\r\n role=\"button\"\r\n className=\"h-5 w-5 text-muted-foreground cursor-pointer\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n handleClear();\r\n }}\r\n aria-label=\"Clear\"\r\n />\r\n <Separator orientation=\"vertical\" className=\"flex min-h-5 h-full\" />\r\n </div>\r\n </div>\r\n ) : (\r\n <>{loading && loadingText ? loadingText : placeholder}</>\r\n )}\r\n </>\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)}>\r\n <Command className=\"w-[--radix-popper-anchor-width] max-h-[--radix-popper-available-height]\">\r\n <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} value={searchValue} onValueChange={setSearchValue} />\r\n <CommandList className=\"\">\r\n <CommandEmpty>{noResultsText}</CommandEmpty>\r\n <CommandGroup>\r\n {showSelectAll && (\r\n <CommandItem key=\"all\" onSelect={toggleAll} className=\"cursor-pointer\">\r\n <div\r\n className={cn(\r\n \"mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary\",\r\n selectedValues.length === options.size ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n )}\r\n >\r\n <Check className=\"h-4.5 w-4.5\" />\r\n </div>\r\n <span>({selectAllText})</span>\r\n </CommandItem>\r\n )}\r\n {Array.from(options.values()).map(option => {\r\n const isSelected = selectedValues.includes(option.value);\r\n return (\r\n <CommandItem key={option.value} onSelect={() => toggleOption(option.value)} className=\"cursor-pointer\">\r\n <div\r\n className={cn(\r\n \"mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary\",\r\n isSelected ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n )}\r\n >\r\n <Check className=\"h-4.5 w-4.5\" />\r\n </div>\r\n {option.icon && <option.icon className=\"mr-2 h-4.5 w-4.5 text-muted-foreground\" />}\r\n <span>{option.label}</span>\r\n </CommandItem>\r\n );\r\n })}\r\n </CommandGroup>\r\n <CommandSeparator />\r\n <CommandGroup>\r\n <div className=\"flex items-center justify-between\">\r\n {selectedValues.length > 0 && (\r\n <>\r\n <CommandItem onSelect={handleClear} className=\"flex-1 justify-center cursor-pointer\">\r\n {clearText}\r\n </CommandItem>\r\n <Separator orientation=\"vertical\" className=\"flex min-h-6 h-full\" />\r\n </>\r\n )}\r\n <CommandItem onSelect={() => setIsPopoverOpen(false)} className=\"flex-1 justify-center cursor-pointer max-w-full\">\r\n {closeText}\r\n </CommandItem>\r\n </div>\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n};\r\n\r\nconst ForwardedMultiSelect = React.forwardRef(MultiSelect) as (<T extends string | number>(\r\n props: MultiSelectProps<T> & { ref?: React.Ref<HTMLButtonElement> },\r\n) => React.ReactElement) & { displayName?: string };\r\n\r\nForwardedMultiSelect.displayName = \"MultiSelect\";\r\n\r\nexport { ForwardedMultiSelect as MultiSelect, type MultiSelectProps };\r\n"],"names":["multiSelectVariants","tv","MultiSelect","_options","onValueChange","value","variant","disabled","defaultValue","placeholder","maxCount","modalPopover","className","moreText","clearText","closeText","selectAllText","noResultsText","searchText","addOptionOnSearchNotFound","showSelectAll","loading","loadingText","props","ref","isControlled","internalSelectedValues","setInternalSelectedValues","React","selectedValues","isPopoverOpen","setIsPopoverOpen","containerRef","searchValue","setSearchValue","isWrapped","setIsWrapped","options","setOptions","option","handleInputKeyDown","event","newOption","prev","newSelectedValues","toggleOption","handleClear","handleTogglePopover","clearExtraOptions","toggleAll","allValues","Popover","jsx","PopoverTrigger","Button","cn","ChevronDown","jsxs","IconComponent","Status","XMark","CircleXmark","Separator","Fragment","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","CommandSeparator","ForwardedMultiSelect"],"mappings":"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"}
package/dist/status.es.js ADDED
@@ -0,0 +1,34 @@
1
+ import { jsx as o } from "react/jsx-runtime";
2
+ import { tv as t } from "tailwind-variants";
3
+ import { cn as i } from "./utils.es.js";
4
+ const s = t({
5
+ base: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent",
6
+ variants: {
7
+ variant: {
8
+ primary: "bg-primary text-primary-foreground hover:bg-primary-600",
9
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-600",
10
+ outline: "border border-primary text-primary hover:bg-primary-50",
11
+ danger: "bg-danger text-danger-foreground hover:bg-danger-600",
12
+ success: "bg-success text-success-foreground hover:bg-success-600",
13
+ warning: "bg-warning text-warning-foreground hover:bg-warning-600",
14
+ info: "bg-info text-info-foreground hover:bg-info-600",
15
+ "primary-inverse": "bg-primary-100 text-primary-700 hover:bg-primary-50",
16
+ "success-inverse": "bg-success-300 text-success-700 hover:bg-success-200",
17
+ "danger-inverse": "bg-danger-300 text-danger-600 hover:bg-danger-200",
18
+ "warning-inverse": "bg-warning-300 text-warning-800 hover:bg-warning-200",
19
+ "info-inverse": "bg-info-300 text-info-700 hover:bg-info-200",
20
+ "purple-inverse": "bg-purple-200 text-purple-500 hover:bg-purple-100",
21
+ "coral-inverse": "bg-coral-300 text-coral-600 hover:bg-coral-200",
22
+ "turquoise-inverse": "bg-turquoise-200 text-turquoise-600 hover:bg-turquoise-100",
23
+ "lime-inverse": "bg-lime-300 text-lime-700 hover:bg-lime-200",
24
+ "gray-inverse": "bg-gray-300 text-text-500 hover:bg-gray-200"
25
+ }
26
+ },
27
+ defaultVariants: {
28
+ variant: "primary"
29
+ }
30
+ }), u = ({ className: r, variant: e, ...n }) => /* @__PURE__ */ o("div", { className: i(s({ variant: e }), r), ...n });
31
+ export {
32
+ u as Status
33
+ };
34
+ //# sourceMappingURL=status.es.js.map
package/dist/status.es.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"status.es.js","sources":["../src/components/status/Status.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst statusVariants = tv({\r\n base: \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent\",\r\n variants: {\r\n variant: {\r\n primary: \"bg-primary text-primary-foreground hover:bg-primary-600\",\r\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary-600\",\r\n outline: \"border border-primary text-primary hover:bg-primary-50\",\r\n danger: \"bg-danger text-danger-foreground hover:bg-danger-600\",\r\n success: \"bg-success text-success-foreground hover:bg-success-600\",\r\n warning: \"bg-warning text-warning-foreground hover:bg-warning-600\",\r\n info: \"bg-info text-info-foreground hover:bg-info-600\",\r\n \"primary-inverse\": \"bg-primary-100 text-primary-700 hover:bg-primary-50\",\r\n \"success-inverse\": \"bg-success-300 text-success-700 hover:bg-success-200\",\r\n \"danger-inverse\": \"bg-danger-300 text-danger-600 hover:bg-danger-200\",\r\n \"warning-inverse\": \"bg-warning-300 text-warning-800 hover:bg-warning-200\",\r\n \"info-inverse\": \"bg-info-300 text-info-700 hover:bg-info-200\",\r\n \"purple-inverse\": \"bg-purple-200 text-purple-500 hover:bg-purple-100\",\r\n \"coral-inverse\": \"bg-coral-300 text-coral-600 hover:bg-coral-200\",\r\n \"turquoise-inverse\": \"bg-turquoise-200 text-turquoise-600 hover:bg-turquoise-100\",\r\n \"lime-inverse\": \"bg-lime-300 text-lime-700 hover:bg-lime-200\",\r\n \"gray-inverse\": \"bg-gray-300 text-text-500 hover:bg-gray-200\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"primary\",\r\n },\r\n});\r\n\r\nexport type StatusVariant = VariantProps<typeof statusVariants>[\"variant\"];\r\n\r\ninterface StatusProps extends React.HTMLAttributes<HTMLDivElement> {\r\n variant?: StatusVariant;\r\n}\r\n\r\nconst Status: React.FC<StatusProps> = ({ className, variant, ...props }) => {\r\n return <div className={cn(statusVariants({ variant }), className)} {...props} />;\r\n};\r\n\r\nexport { Status, type StatusProps };\r\n"],"names":["statusVariants","tv","Status","className","variant","props","jsx","cn"],"mappings":";;;AAOA,MAAMA,IAAiBC,EAAG;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,MACN,mBAAmB;AAAA,MACnB,mBAAmB;AAAA,MACnB,kBAAkB;AAAA,MAClB,mBAAmB;AAAA,MACnB,gBAAgB;AAAA,MAChB,kBAAkB;AAAA,MAClB,iBAAiB;AAAA,MACjB,qBAAqB;AAAA,MACrB,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,IAAA;AAAA,EAClB;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC,GAQKC,IAAgC,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,GAAGC,QACvD,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAGP,EAAe,EAAE,SAAAI,EAAA,CAAS,GAAGD,CAAS,GAAI,GAAGE,EAAA,CAAO;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@trsys-tech/matrix-library",
3
3
  "description": "MatrixUI Library",
4
4
  "private": false,
5
- "version": "0.6.3-canary-4",
5
+ "version": "0.6.3-canary-6",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.es.js",