@luxfi/ui 7.1.0 → 7.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/alert.cjs +22 -50
  2. package/dist/alert.js +22 -50
  3. package/dist/bank.d.cts +1 -1
  4. package/dist/bank.d.ts +1 -1
  5. package/dist/index.cjs +105 -172
  6. package/dist/index.js +105 -172
  7. package/dist/input.cjs +25 -36
  8. package/dist/input.js +25 -36
  9. package/dist/tag.cjs +15 -35
  10. package/dist/tag.js +15 -35
  11. package/dist/textarea.cjs +25 -36
  12. package/dist/textarea.js +25 -36
  13. package/package.json +1 -2
  14. package/src/alert.tsx +23 -51
  15. package/src/input.tsx +27 -36
  16. package/src/tag.tsx +17 -35
  17. package/src/textarea.tsx +27 -36
package/dist/tag.cjs CHANGED
@@ -1,7 +1,6 @@
1
1
  "use client";
2
2
  'use strict';
3
3
 
4
- var classVarianceAuthority = require('class-variance-authority');
5
4
  var React3 = require('react');
6
5
  var clsx = require('clsx');
7
6
  var tailwindMerge = require('tailwind-merge');
@@ -423,39 +422,18 @@ var nbsp = String.fromCharCode(160);
423
422
  function TruncatedTextTooltip({ label, children }) {
424
423
  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
425
424
  }
426
- var tagVariants = classVarianceAuthority.cva(
427
- [
428
- "inline-flex items-center align-top max-w-full select-text rounded-sm",
429
- "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500"
430
- ].join(" "),
431
- {
432
- variants: {
433
- variant: {
434
- subtle: "bg-[var(--color-tag-subtle-bg)] text-[var(--color-tag-subtle-fg)]",
435
- clickable: [
436
- "cursor-pointer",
437
- "bg-[var(--color-tag-clickable-bg)] text-[var(--color-tag-clickable-fg)]",
438
- "hover:opacity-76"
439
- ].join(" "),
440
- filter: "bg-[var(--color-tag-filter-bg)]",
441
- select: [
442
- "cursor-pointer",
443
- "bg-[var(--color-tag-select-bg)] text-[var(--color-tag-select-fg)]",
444
- "hover:text-[var(--color-hover)] hover:opacity-76"
445
- ].join(" ")
446
- },
447
- size: {
448
- sm: "px-1 py-0.5 min-h-5 gap-1 text-xs",
449
- md: "px-1 py-0.5 min-h-6 gap-1 text-sm",
450
- lg: "px-1.5 py-1.5 min-h-8 min-w-8 gap-1 text-sm"
451
- }
452
- },
453
- defaultVariants: {
454
- variant: "subtle",
455
- size: "md"
456
- }
457
- }
458
- );
425
+ var TAG_BASE = "inline-flex items-center align-top max-w-full select-text rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500";
426
+ var TAG_VARIANT_CLASSES = {
427
+ subtle: "bg-[var(--color-tag-subtle-bg)] text-[var(--color-tag-subtle-fg)]",
428
+ clickable: "cursor-pointer bg-[var(--color-tag-clickable-bg)] text-[var(--color-tag-clickable-fg)] hover:opacity-76",
429
+ filter: "bg-[var(--color-tag-filter-bg)]",
430
+ select: "cursor-pointer bg-[var(--color-tag-select-bg)] text-[var(--color-tag-select-fg)] hover:text-[var(--color-hover)] hover:opacity-76"
431
+ };
432
+ var TAG_SIZE_CLASSES = {
433
+ sm: "px-1 py-0.5 min-h-5 gap-1 text-xs",
434
+ md: "px-1 py-0.5 min-h-6 gap-1 text-sm",
435
+ lg: "px-1.5 py-1.5 min-h-8 min-w-8 gap-1 text-sm"
436
+ };
459
437
  var TAG_SELECTED_CLASSES = [
460
438
  "bg-[var(--color-tag-select-selected-bg)]",
461
439
  "text-[var(--color-tag-select-selected-fg)]",
@@ -497,7 +475,9 @@ var Tag = React3__namespace.forwardRef(
497
475
  {
498
476
  ref,
499
477
  className: cn(
500
- tagVariants({ variant, size }),
478
+ TAG_BASE,
479
+ TAG_VARIANT_CLASSES[variant ?? "subtle"],
480
+ TAG_SIZE_CLASSES[size ?? "md"],
501
481
  selected && !loading && TAG_SELECTED_CLASSES,
502
482
  disabled && TAG_DISABLED_CLASSES,
503
483
  className
package/dist/tag.js CHANGED
@@ -1,5 +1,4 @@
1
1
  "use client";
2
- import { cva } from 'class-variance-authority';
3
2
  import * as React3 from 'react';
4
3
  import { clsx } from 'clsx';
5
4
  import { twMerge } from 'tailwind-merge';
@@ -401,39 +400,18 @@ var nbsp = String.fromCharCode(160);
401
400
  function TruncatedTextTooltip({ label, children }) {
402
401
  return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
403
402
  }
404
- var tagVariants = cva(
405
- [
406
- "inline-flex items-center align-top max-w-full select-text rounded-sm",
407
- "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500"
408
- ].join(" "),
409
- {
410
- variants: {
411
- variant: {
412
- subtle: "bg-[var(--color-tag-subtle-bg)] text-[var(--color-tag-subtle-fg)]",
413
- clickable: [
414
- "cursor-pointer",
415
- "bg-[var(--color-tag-clickable-bg)] text-[var(--color-tag-clickable-fg)]",
416
- "hover:opacity-76"
417
- ].join(" "),
418
- filter: "bg-[var(--color-tag-filter-bg)]",
419
- select: [
420
- "cursor-pointer",
421
- "bg-[var(--color-tag-select-bg)] text-[var(--color-tag-select-fg)]",
422
- "hover:text-[var(--color-hover)] hover:opacity-76"
423
- ].join(" ")
424
- },
425
- size: {
426
- sm: "px-1 py-0.5 min-h-5 gap-1 text-xs",
427
- md: "px-1 py-0.5 min-h-6 gap-1 text-sm",
428
- lg: "px-1.5 py-1.5 min-h-8 min-w-8 gap-1 text-sm"
429
- }
430
- },
431
- defaultVariants: {
432
- variant: "subtle",
433
- size: "md"
434
- }
435
- }
436
- );
403
+ var TAG_BASE = "inline-flex items-center align-top max-w-full select-text rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500";
404
+ var TAG_VARIANT_CLASSES = {
405
+ subtle: "bg-[var(--color-tag-subtle-bg)] text-[var(--color-tag-subtle-fg)]",
406
+ clickable: "cursor-pointer bg-[var(--color-tag-clickable-bg)] text-[var(--color-tag-clickable-fg)] hover:opacity-76",
407
+ filter: "bg-[var(--color-tag-filter-bg)]",
408
+ select: "cursor-pointer bg-[var(--color-tag-select-bg)] text-[var(--color-tag-select-fg)] hover:text-[var(--color-hover)] hover:opacity-76"
409
+ };
410
+ var TAG_SIZE_CLASSES = {
411
+ sm: "px-1 py-0.5 min-h-5 gap-1 text-xs",
412
+ md: "px-1 py-0.5 min-h-6 gap-1 text-sm",
413
+ lg: "px-1.5 py-1.5 min-h-8 min-w-8 gap-1 text-sm"
414
+ };
437
415
  var TAG_SELECTED_CLASSES = [
438
416
  "bg-[var(--color-tag-select-selected-bg)]",
439
417
  "text-[var(--color-tag-select-selected-fg)]",
@@ -475,7 +453,9 @@ var Tag = React3.forwardRef(
475
453
  {
476
454
  ref,
477
455
  className: cn(
478
- tagVariants({ variant, size }),
456
+ TAG_BASE,
457
+ TAG_VARIANT_CLASSES[variant ?? "subtle"],
458
+ TAG_SIZE_CLASSES[size ?? "md"],
479
459
  selected && !loading && TAG_SELECTED_CLASSES,
480
460
  disabled && TAG_DISABLED_CLASSES,
481
461
  className
package/dist/textarea.cjs CHANGED
@@ -1,7 +1,6 @@
1
1
  "use client";
2
2
  'use strict';
3
3
 
4
- var classVarianceAuthority = require('class-variance-authority');
5
4
  var React = require('react');
6
5
  var clsx = require('clsx');
7
6
  var tailwindMerge = require('tailwind-merge');
@@ -15,46 +14,36 @@ var React__default = /*#__PURE__*/_interopDefault(React);
15
14
  function cn(...inputs) {
16
15
  return tailwindMerge.twMerge(clsx.clsx(inputs));
17
16
  }
18
- var textareaVariants = classVarianceAuthority.cva(
19
- [
20
- "w-full appearance-none outline-none transition-colors resize-y",
21
- "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
22
- "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
23
- "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
24
- "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
25
- "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
26
- "disabled:opacity-40 disabled:cursor-not-allowed",
27
- "read-only:opacity-70",
28
- "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
29
- ].join(" "),
30
- {
31
- variants: {
32
- size: {
33
- xs: "px-2 py-1 text-xs rounded",
34
- sm: "px-3 py-2 text-sm rounded-md",
35
- md: "px-4 py-2 text-base rounded-md",
36
- lg: "px-4 py-3 text-lg rounded-lg",
37
- "2xl": "px-4 py-3 text-xl rounded-lg"
38
- },
39
- variant: {
40
- outline: "border border-solid",
41
- filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
42
- unstyled: "border-0 bg-transparent p-0"
43
- }
44
- },
45
- defaultVariants: {
46
- size: "md",
47
- variant: "outline"
48
- }
49
- }
50
- );
17
+ var TEXTAREA_BASE = [
18
+ "w-full appearance-none outline-none transition-colors resize-y",
19
+ "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
20
+ "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
21
+ "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
22
+ "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
23
+ "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
24
+ "disabled:opacity-40 disabled:cursor-not-allowed",
25
+ "read-only:opacity-70",
26
+ "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
27
+ ].join(" ");
28
+ var TEXTAREA_SIZE_CLASSES = {
29
+ xs: "px-2 py-1 text-xs rounded",
30
+ sm: "px-3 py-2 text-sm rounded-md",
31
+ md: "px-4 py-2 text-base rounded-md",
32
+ lg: "px-4 py-3 text-lg rounded-lg",
33
+ "2xl": "px-4 py-3 text-xl rounded-lg"
34
+ };
35
+ var TEXTAREA_VARIANT_CLASSES = {
36
+ outline: "border border-solid",
37
+ filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
38
+ unstyled: "border-0 bg-transparent p-0"
39
+ };
51
40
  var Textarea = React__default.default.forwardRef(
52
- ({ size, variant, className, ...rest }, ref) => {
41
+ ({ size = "md", variant = "outline", className, ...rest }, ref) => {
53
42
  return /* @__PURE__ */ jsxRuntime.jsx(
54
43
  "textarea",
55
44
  {
56
45
  ref,
57
- className: cn(textareaVariants({ size, variant }), className),
46
+ className: cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className),
58
47
  ...rest
59
48
  }
60
49
  );
package/dist/textarea.js CHANGED
@@ -1,5 +1,4 @@
1
1
  "use client";
2
- import { cva } from 'class-variance-authority';
3
2
  import React from 'react';
4
3
  import { clsx } from 'clsx';
5
4
  import { twMerge } from 'tailwind-merge';
@@ -9,46 +8,36 @@ import { jsx } from 'react/jsx-runtime';
9
8
  function cn(...inputs) {
10
9
  return twMerge(clsx(inputs));
11
10
  }
12
- var textareaVariants = cva(
13
- [
14
- "w-full appearance-none outline-none transition-colors resize-y",
15
- "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
16
- "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
17
- "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
18
- "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
19
- "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
20
- "disabled:opacity-40 disabled:cursor-not-allowed",
21
- "read-only:opacity-70",
22
- "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
23
- ].join(" "),
24
- {
25
- variants: {
26
- size: {
27
- xs: "px-2 py-1 text-xs rounded",
28
- sm: "px-3 py-2 text-sm rounded-md",
29
- md: "px-4 py-2 text-base rounded-md",
30
- lg: "px-4 py-3 text-lg rounded-lg",
31
- "2xl": "px-4 py-3 text-xl rounded-lg"
32
- },
33
- variant: {
34
- outline: "border border-solid",
35
- filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
36
- unstyled: "border-0 bg-transparent p-0"
37
- }
38
- },
39
- defaultVariants: {
40
- size: "md",
41
- variant: "outline"
42
- }
43
- }
44
- );
11
+ var TEXTAREA_BASE = [
12
+ "w-full appearance-none outline-none transition-colors resize-y",
13
+ "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
14
+ "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
15
+ "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
16
+ "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
17
+ "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
18
+ "disabled:opacity-40 disabled:cursor-not-allowed",
19
+ "read-only:opacity-70",
20
+ "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
21
+ ].join(" ");
22
+ var TEXTAREA_SIZE_CLASSES = {
23
+ xs: "px-2 py-1 text-xs rounded",
24
+ sm: "px-3 py-2 text-sm rounded-md",
25
+ md: "px-4 py-2 text-base rounded-md",
26
+ lg: "px-4 py-3 text-lg rounded-lg",
27
+ "2xl": "px-4 py-3 text-xl rounded-lg"
28
+ };
29
+ var TEXTAREA_VARIANT_CLASSES = {
30
+ outline: "border border-solid",
31
+ filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
32
+ unstyled: "border-0 bg-transparent p-0"
33
+ };
45
34
  var Textarea = React.forwardRef(
46
- ({ size, variant, className, ...rest }, ref) => {
35
+ ({ size = "md", variant = "outline", className, ...rest }, ref) => {
47
36
  return /* @__PURE__ */ jsx(
48
37
  "textarea",
49
38
  {
50
39
  ref,
51
- className: cn(textareaVariants({ size, variant }), className),
40
+ className: cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className),
52
41
  ...rest
53
42
  }
54
43
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luxfi/ui",
3
- "version": "7.1.0",
3
+ "version": "7.2.0",
4
4
  "description": "Radix + Tailwind UI primitives for Lux apps. Drop-in replacements for Chakra compound components.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -273,7 +273,6 @@
273
273
  "@radix-ui/react-switch": "^1.2.6",
274
274
  "@radix-ui/react-tabs": "^1.1.13",
275
275
  "@uidotdev/usehooks": "^2.4.1",
276
- "class-variance-authority": "^0.7.1",
277
276
  "clsx": "^2.1.1",
278
277
  "es-toolkit": "^1.31.0",
279
278
  "react-icons": "^5.4.0",
package/src/alert.tsx CHANGED
@@ -1,4 +1,3 @@
1
- import { cva } from 'class-variance-authority';
2
1
  import * as React from 'react';
3
2
 
4
3
  import { cn } from './utils';
@@ -20,58 +19,28 @@ import { Skeleton } from './skeleton';
20
19
  type AlertStatus = 'info' | 'warning' | 'warning_table' | 'success' | 'error';
21
20
 
22
21
  /* ------------------------------------------------------------------ */
23
- /* CVA variants */
22
+ /* Class maps (replaced CVA) */
24
23
  /* ------------------------------------------------------------------ */
25
24
 
26
- const alertRoot = cva(
27
- // base
28
- 'w-full flex items-start relative rounded text-[var(--color-alert-fg)]',
29
- {
30
- variants: {
31
- status: {
32
- info: 'bg-[var(--color-alert-bg-info)]',
33
- warning: 'bg-[var(--color-alert-bg-warning)]',
34
- warning_table: 'bg-[var(--color-alert-bg-warning-table)]',
35
- success: 'bg-[var(--color-alert-bg-success)]',
36
- error: 'bg-[var(--color-alert-bg-error)]',
37
- },
38
- size: {
39
- sm: 'gap-2 px-2 py-2 text-xs',
40
- md: 'gap-2 px-3 py-2 text-base',
41
- },
42
- },
43
- defaultVariants: {
44
- status: 'info',
45
- size: 'md',
46
- },
47
- },
48
- );
25
+ const ALERT_BASE = 'w-full flex items-start relative rounded text-[var(--color-alert-fg)]';
49
26
 
50
- const alertContent = cva('flex flex-1', {
51
- variants: {
52
- inline: {
53
- 'true': 'inline-flex flex-row items-center',
54
- 'false': 'flex flex-col',
55
- },
56
- },
57
- defaultVariants: {
58
- inline: true,
59
- },
60
- });
27
+ const STATUS_CLASSES: Record<AlertStatus, string> = {
28
+ info: 'bg-[var(--color-alert-bg-info)]',
29
+ warning: 'bg-[var(--color-alert-bg-warning)]',
30
+ warning_table: 'bg-[var(--color-alert-bg-warning-table)]',
31
+ success: 'bg-[var(--color-alert-bg-success)]',
32
+ error: 'bg-[var(--color-alert-bg-error)]',
33
+ };
61
34
 
62
- const INDICATOR_BASE = 'inline-flex items-center justify-center shrink-0 w-5 h-5 text-[var(--color-alert-fg)] [&>svg]:w-full [&>svg]:h-full';
35
+ const SIZE_CLASSES: Record<string, string> = {
36
+ sm: 'gap-2 px-2 py-2 text-xs',
37
+ md: 'gap-2 px-3 py-2 text-base',
38
+ };
63
39
 
64
- const indicatorVariants = cva(INDICATOR_BASE, {
65
- variants: {
66
- size: {
67
- sm: 'w-5 h-5 my-0',
68
- md: 'w-5 h-5 my-[2px]',
69
- },
70
- },
71
- defaultVariants: {
72
- size: 'md',
73
- },
74
- });
40
+ const INDICATOR_SIZE_CLASSES: Record<string, string> = {
41
+ sm: 'w-5 h-5 my-0',
42
+ md: 'w-5 h-5 my-[2px]',
43
+ };
75
44
 
76
45
  /* ------------------------------------------------------------------ */
77
46
  /* Props */
@@ -153,7 +122,10 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
153
122
  }
154
123
 
155
124
  return (
156
- <span className={ indicatorVariants({ size: resolvedSize }) }>
125
+ <span className={ cn(
126
+ 'inline-flex items-center justify-center shrink-0 text-[var(--color-alert-fg)] [&>svg]:w-full [&>svg]:h-full',
127
+ INDICATOR_SIZE_CLASSES[resolvedSize],
128
+ ) }>
157
129
  { icon || defaultIcon }
158
130
  </span>
159
131
  );
@@ -188,13 +160,13 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
188
160
  <Skeleton loading={ loading }>
189
161
  <div
190
162
  ref={ ref }
191
- className={ cn(alertRoot({ status, size: resolvedSize }), className) }
163
+ className={ cn(ALERT_BASE, STATUS_CLASSES[status], SIZE_CLASSES[resolvedSize], className) }
192
164
  style={ alertStyle }
193
165
  { ...alertRest }
194
166
  >
195
167
  { iconElement }
196
168
  { children ? (
197
- <div className={ alertContent({ inline }) }>
169
+ <div className={ cn('flex flex-1', inline ? 'inline-flex flex-row items-center' : 'flex flex-col') }>
198
170
  { title && <div className="font-semibold">{ title }</div> }
199
171
  <div
200
172
  className={ cn('inline-flex flex-wrap', descClassName) }
package/src/input.tsx CHANGED
@@ -1,41 +1,32 @@
1
- import { cva } from 'class-variance-authority';
2
1
  import React from 'react';
3
2
 
4
3
  import { cn } from './utils';
5
4
 
6
- const inputVariants = cva(
7
- [
8
- 'w-full appearance-none outline-none transition-colors',
9
- 'bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]',
10
- 'placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]',
11
- 'hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]',
12
- 'focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]',
13
- 'focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]',
14
- 'disabled:opacity-40 disabled:cursor-not-allowed',
15
- 'read-only:opacity-70',
16
- 'data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]',
17
- ].join(' '),
18
- {
19
- variants: {
20
- size: {
21
- xs: 'h-6 px-2 text-xs rounded',
22
- sm: 'h-8 px-3 text-sm rounded-md',
23
- md: 'h-10 px-4 text-base rounded-md',
24
- lg: 'h-12 px-4 text-lg rounded-lg',
25
- '2xl': 'h-14 px-4 text-xl rounded-lg',
26
- },
27
- variant: {
28
- outline: 'border border-solid',
29
- filled: 'border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]',
30
- unstyled: 'border-0 bg-transparent p-0 h-auto',
31
- },
32
- },
33
- defaultVariants: {
34
- size: 'md',
35
- variant: 'outline',
36
- },
37
- },
38
- );
5
+ const INPUT_BASE = [
6
+ 'w-full appearance-none outline-none transition-colors',
7
+ 'bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]',
8
+ 'placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]',
9
+ 'hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]',
10
+ 'focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]',
11
+ 'focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]',
12
+ 'disabled:opacity-40 disabled:cursor-not-allowed',
13
+ 'read-only:opacity-70',
14
+ 'data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]',
15
+ ].join(' ');
16
+
17
+ const INPUT_SIZE_CLASSES: Record<string, string> = {
18
+ xs: 'h-6 px-2 text-xs rounded',
19
+ sm: 'h-8 px-3 text-sm rounded-md',
20
+ md: 'h-10 px-4 text-base rounded-md',
21
+ lg: 'h-12 px-4 text-lg rounded-lg',
22
+ '2xl': 'h-14 px-4 text-xl rounded-lg',
23
+ };
24
+
25
+ const INPUT_VARIANT_CLASSES: Record<string, string> = {
26
+ outline: 'border border-solid',
27
+ filled: 'border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]',
28
+ unstyled: 'border-0 bg-transparent p-0 h-auto',
29
+ };
39
30
 
40
31
  type InputSize = 'xs' | 'sm' | 'md' | 'lg' | '2xl';
41
32
  type InputVariant = 'outline' | 'filled' | 'unstyled';
@@ -46,11 +37,11 @@ export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, '
46
37
  }
47
38
 
48
39
  export const Input = React.forwardRef<HTMLInputElement, InputProps>(
49
- ({ size, variant, className, ...rest }, ref) => {
40
+ ({ size = 'md', variant = 'outline', className, ...rest }, ref) => {
50
41
  return (
51
42
  <input
52
43
  ref={ ref }
53
- className={ cn(inputVariants({ size, variant }), className) }
44
+ className={ cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className) }
54
45
  { ...rest }
55
46
  />
56
47
  );
package/src/tag.tsx CHANGED
@@ -1,4 +1,3 @@
1
- import { cva } from 'class-variance-authority';
2
1
  import * as React from 'react';
3
2
 
4
3
  import { cn } from './utils';
@@ -22,39 +21,20 @@ function TruncatedTextTooltip({ label, children }: { readonly label: React.React
22
21
  type TagVariant = 'subtle' | 'clickable' | 'filter' | 'select';
23
22
  type TagSize = 'sm' | 'md' | 'lg';
24
23
 
25
- const tagVariants = cva(
26
- [
27
- 'inline-flex items-center align-top max-w-full select-text rounded-sm',
28
- 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500',
29
- ].join(' '),
30
- {
31
- variants: {
32
- variant: {
33
- subtle: 'bg-[var(--color-tag-subtle-bg)] text-[var(--color-tag-subtle-fg)]',
34
- clickable: [
35
- 'cursor-pointer',
36
- 'bg-[var(--color-tag-clickable-bg)] text-[var(--color-tag-clickable-fg)]',
37
- 'hover:opacity-76',
38
- ].join(' '),
39
- filter: 'bg-[var(--color-tag-filter-bg)]',
40
- select: [
41
- 'cursor-pointer',
42
- 'bg-[var(--color-tag-select-bg)] text-[var(--color-tag-select-fg)]',
43
- 'hover:text-[var(--color-hover)] hover:opacity-76',
44
- ].join(' '),
45
- },
46
- size: {
47
- sm: 'px-1 py-0.5 min-h-5 gap-1 text-xs',
48
- md: 'px-1 py-0.5 min-h-6 gap-1 text-sm',
49
- lg: 'px-1.5 py-1.5 min-h-8 min-w-8 gap-1 text-sm',
50
- },
51
- },
52
- defaultVariants: {
53
- variant: 'subtle',
54
- size: 'md',
55
- },
56
- },
57
- );
24
+ const TAG_BASE = 'inline-flex items-center align-top max-w-full select-text rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500';
25
+
26
+ const TAG_VARIANT_CLASSES: Record<TagVariant, string> = {
27
+ subtle: 'bg-[var(--color-tag-subtle-bg)] text-[var(--color-tag-subtle-fg)]',
28
+ clickable: 'cursor-pointer bg-[var(--color-tag-clickable-bg)] text-[var(--color-tag-clickable-fg)] hover:opacity-76',
29
+ filter: 'bg-[var(--color-tag-filter-bg)]',
30
+ select: 'cursor-pointer bg-[var(--color-tag-select-bg)] text-[var(--color-tag-select-fg)] hover:text-[var(--color-hover)] hover:opacity-76',
31
+ };
32
+
33
+ const TAG_SIZE_CLASSES: Record<TagSize, string> = {
34
+ sm: 'px-1 py-0.5 min-h-5 gap-1 text-xs',
35
+ md: 'px-1 py-0.5 min-h-6 gap-1 text-sm',
36
+ lg: 'px-1.5 py-1.5 min-h-8 min-w-8 gap-1 text-sm',
37
+ };
58
38
 
59
39
  const TAG_SELECTED_CLASSES = [
60
40
  'bg-[var(--color-tag-select-selected-bg)]',
@@ -121,7 +101,9 @@ export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
121
101
  <span
122
102
  ref={ ref }
123
103
  className={ cn(
124
- tagVariants({ variant, size }),
104
+ TAG_BASE,
105
+ TAG_VARIANT_CLASSES[variant ?? 'subtle'],
106
+ TAG_SIZE_CLASSES[size ?? 'md'],
125
107
  selected && !loading && TAG_SELECTED_CLASSES,
126
108
  disabled && TAG_DISABLED_CLASSES,
127
109
  className,