@avenue-ticketing/ui 0.4.0 → 0.5.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 (73) hide show
  1. package/dist/react/avatar.d.ts +42 -0
  2. package/dist/react/avatar.js +159 -0
  3. package/dist/react/avatar.js.map +1 -0
  4. package/dist/react/badge.d.ts +12 -0
  5. package/dist/react/badge.js +35 -1
  6. package/dist/react/badge.js.map +1 -1
  7. package/dist/react/button.d.ts +1 -1
  8. package/dist/react/button.js +3 -3
  9. package/dist/react/button.js.map +1 -1
  10. package/dist/react/calendar.d.ts +13 -0
  11. package/dist/react/calendar.js +4639 -0
  12. package/dist/react/calendar.js.map +1 -0
  13. package/dist/react/card.d.ts +11 -0
  14. package/dist/react/card.js +113 -0
  15. package/dist/react/card.js.map +1 -0
  16. package/dist/react/checkbox.d.ts +11 -0
  17. package/dist/react/checkbox.js +131 -0
  18. package/dist/react/checkbox.js.map +1 -0
  19. package/dist/react/datetime-picker.d.ts +21 -0
  20. package/dist/react/datetime-picker.js +6124 -0
  21. package/dist/react/datetime-picker.js.map +1 -0
  22. package/dist/react/dialog.js +1 -1
  23. package/dist/react/dialog.js.map +1 -1
  24. package/dist/react/dropdown.d.ts +26 -9
  25. package/dist/react/dropdown.js +194 -96
  26. package/dist/react/dropdown.js.map +1 -1
  27. package/dist/react/input.d.ts +7 -0
  28. package/dist/react/input.js +15 -2
  29. package/dist/react/input.js.map +1 -1
  30. package/dist/react/pagination.d.ts +28 -0
  31. package/dist/react/pagination.js +262 -0
  32. package/dist/react/pagination.js.map +1 -0
  33. package/dist/react/popover.d.ts +76 -0
  34. package/dist/react/popover.js +564 -0
  35. package/dist/react/popover.js.map +1 -0
  36. package/dist/react/scroll-header.js +13 -1
  37. package/dist/react/scroll-header.js.map +1 -1
  38. package/dist/react/scroll-wheel.d.ts +45 -0
  39. package/dist/react/scroll-wheel.js +557 -0
  40. package/dist/react/scroll-wheel.js.map +1 -0
  41. package/dist/react/select.d.ts +62 -0
  42. package/dist/react/select.js +889 -0
  43. package/dist/react/select.js.map +1 -0
  44. package/dist/react/sheet.js +1 -1
  45. package/dist/react/sheet.js.map +1 -1
  46. package/dist/react/switch.d.ts +38 -0
  47. package/dist/react/switch.js +117 -0
  48. package/dist/react/switch.js.map +1 -0
  49. package/dist/react/table-pagination.d.ts +15 -0
  50. package/dist/react/table-pagination.js +1153 -0
  51. package/dist/react/table-pagination.js.map +1 -0
  52. package/dist/react/table-view/column-menu.d.ts +15 -0
  53. package/dist/react/table-view/column-menu.js +918 -0
  54. package/dist/react/table-view/column-menu.js.map +1 -0
  55. package/dist/react/table-view/index.d.ts +70 -0
  56. package/dist/react/table-view/index.js +2155 -0
  57. package/dist/react/table-view/index.js.map +1 -0
  58. package/dist/react/table.d.ts +86 -0
  59. package/dist/react/table.js +414 -0
  60. package/dist/react/table.js.map +1 -0
  61. package/dist/react/tabs.d.ts +9 -3
  62. package/dist/react/tabs.js +204 -48
  63. package/dist/react/tabs.js.map +1 -1
  64. package/dist/react/textarea.d.ts +6 -0
  65. package/dist/react/textarea.js +33 -0
  66. package/dist/react/textarea.js.map +1 -0
  67. package/dist/react/time-picker.d.ts +22 -0
  68. package/dist/react/time-picker.js +856 -0
  69. package/dist/react/time-picker.js.map +1 -0
  70. package/dist/react/tooltip.d.ts +45 -0
  71. package/dist/react/tooltip.js +540 -0
  72. package/dist/react/tooltip.js.map +1 -0
  73. package/package.json +1 -1
@@ -0,0 +1,42 @@
1
+ import * as React from 'react';
2
+
3
+ declare const avatarSizeClass: {
4
+ readonly sm: "h-8 w-8 min-h-8 min-w-8";
5
+ readonly md: "h-10 w-10 min-h-10 min-w-10";
6
+ readonly lg: "h-12 w-12 min-h-12 min-w-12";
7
+ };
8
+ type AvatarSize = keyof typeof avatarSizeClass;
9
+ type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
10
+ /** @default md */
11
+ size?: AvatarSize;
12
+ };
13
+ declare const Avatar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
14
+ /** @default md */
15
+ size?: AvatarSize;
16
+ } & React.RefAttributes<HTMLDivElement>>;
17
+ type AvatarImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
18
+ declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
19
+ type AvatarFallbackProps = React.HTMLAttributes<HTMLDivElement>;
20
+ declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLDivElement>>;
21
+ type AvatarGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
22
+ children: React.ReactNode;
23
+ /**
24
+ * show only the first `max` avatars; extra members become a +N chip (direct
25
+ * `Avatar` children only).
26
+ */
27
+ max?: number;
28
+ /** chip size; use the same `size` on each `Avatar` so the stack lines up */
29
+ size?: AvatarSize;
30
+ };
31
+ declare const AvatarGroup: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
32
+ children: React.ReactNode;
33
+ /**
34
+ * show only the first `max` avatars; extra members become a +N chip (direct
35
+ * `Avatar` children only).
36
+ */
37
+ max?: number;
38
+ /** chip size; use the same `size` on each `Avatar` so the stack lines up */
39
+ size?: AvatarSize;
40
+ } & React.RefAttributes<HTMLDivElement>>;
41
+
42
+ export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarSize };
@@ -0,0 +1,159 @@
1
+ import * as React from 'react';
2
+ import { useState, useEffect } from 'react';
3
+ import { clsx } from 'clsx';
4
+ import { twMerge } from 'tailwind-merge';
5
+ import { jsx, jsxs } from 'react/jsx-runtime';
6
+
7
+ function cn(...inputs) {
8
+ return twMerge(clsx(inputs));
9
+ }
10
+ var avatarSizeClass = {
11
+ sm: "h-8 w-8 min-h-8 min-w-8",
12
+ md: "h-10 w-10 min-h-10 min-w-10",
13
+ lg: "h-12 w-12 min-h-12 min-w-12"
14
+ };
15
+ var avatarFallbackTextClass = {
16
+ sm: "text-xs",
17
+ md: "text-sm",
18
+ lg: "text-base"
19
+ };
20
+ var AvatarSizeContext = React.createContext("md");
21
+ var avatarHideFallbackWhenImage = "[&:has([data-slot=avatar-image])_[data-slot=avatar-fallback]]:pointer-events-none [&:has([data-slot=avatar-image])_[data-slot=avatar-fallback]]:opacity-0";
22
+ var Avatar = React.forwardRef(
23
+ ({ className, size = "md", children, ...props }, ref) => {
24
+ return /* @__PURE__ */ jsx(AvatarSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
25
+ "div",
26
+ {
27
+ ref,
28
+ "data-slot": "avatar",
29
+ "data-size": size,
30
+ className: cn(
31
+ "relative flex shrink-0 overflow-hidden rounded-full",
32
+ avatarHideFallbackWhenImage,
33
+ avatarSizeClass[size],
34
+ className
35
+ ),
36
+ ...props,
37
+ children
38
+ }
39
+ ) });
40
+ }
41
+ );
42
+ Avatar.displayName = "Avatar";
43
+ var AvatarImage = React.forwardRef(
44
+ (props, ref) => {
45
+ const {
46
+ className,
47
+ onLoad,
48
+ onError,
49
+ alt = "",
50
+ ...imgProps
51
+ } = props;
52
+ const [failed, setFailed] = useState(false);
53
+ const src = imgProps.src;
54
+ useEffect(() => {
55
+ setFailed(false);
56
+ }, [src]);
57
+ if (!src || failed) {
58
+ return null;
59
+ }
60
+ return /* @__PURE__ */ jsx(
61
+ "img",
62
+ {
63
+ ref,
64
+ alt,
65
+ "data-slot": "avatar-image",
66
+ className: cn(
67
+ "absolute inset-0 z-10 h-full w-full object-cover",
68
+ className
69
+ ),
70
+ onLoad,
71
+ onError: (e) => {
72
+ setFailed(true);
73
+ onError?.(e);
74
+ },
75
+ ...imgProps
76
+ }
77
+ );
78
+ }
79
+ );
80
+ AvatarImage.displayName = "AvatarImage";
81
+ var AvatarFallback = React.forwardRef(
82
+ ({ className, ...props }, ref) => {
83
+ const size = React.useContext(AvatarSizeContext);
84
+ return /* @__PURE__ */ jsx(
85
+ "div",
86
+ {
87
+ ref,
88
+ "data-slot": "avatar-fallback",
89
+ className: cn(
90
+ "absolute inset-0 z-0 flex items-center justify-center rounded-full bg-primary/10 font-semibold text-primary select-none",
91
+ avatarFallbackTextClass[size],
92
+ className
93
+ ),
94
+ ...props
95
+ }
96
+ );
97
+ }
98
+ );
99
+ AvatarFallback.displayName = "AvatarFallback";
100
+ var avatarGroupOverflowTextClass = {
101
+ sm: "text-[10px]",
102
+ md: "text-xs",
103
+ lg: "text-sm"
104
+ };
105
+ var AvatarGroup = React.forwardRef(
106
+ ({ className, children, max, size = "md", ...rest }, ref) => {
107
+ const items = React.Children.toArray(children).filter(
108
+ (node) => React.isValidElement(node) && node.type === Avatar
109
+ );
110
+ const overflow = max != null && max > 0 && items.length > max ? items.length - max : 0;
111
+ const shown = max != null && max > 0 ? items.slice(0, max) : items;
112
+ return /* @__PURE__ */ jsxs(
113
+ "div",
114
+ {
115
+ ref,
116
+ "data-slot": "avatar-group",
117
+ "data-size": size,
118
+ className: cn("flex items-center -space-x-2", className),
119
+ ...rest,
120
+ children: [
121
+ shown.map(
122
+ (child, index) => React.cloneElement(child, {
123
+ key: child.key ?? `avatar-group-${index}`,
124
+ className: cn(
125
+ child.props.className,
126
+ "ring-background relative z-0 ring-2"
127
+ ),
128
+ style: {
129
+ ...child.props.style ?? {},
130
+ zIndex: index + 1
131
+ }
132
+ })
133
+ ),
134
+ overflow > 0 ? /* @__PURE__ */ jsxs(
135
+ "span",
136
+ {
137
+ "aria-label": `${overflow} more`,
138
+ className: cn(
139
+ "border-background text-primary bg-primary/15 ring-background relative flex shrink-0 items-center justify-center rounded-full border-2 font-semibold tabular-nums ring-2",
140
+ avatarSizeClass[size],
141
+ avatarGroupOverflowTextClass[size]
142
+ ),
143
+ style: { zIndex: shown.length + 1 },
144
+ children: [
145
+ "+",
146
+ overflow > 99 ? 99 : overflow
147
+ ]
148
+ }
149
+ ) : null
150
+ ]
151
+ }
152
+ );
153
+ }
154
+ );
155
+ AvatarGroup.displayName = "AvatarGroup";
156
+
157
+ export { Avatar, AvatarFallback, AvatarGroup, AvatarImage };
158
+ //# sourceMappingURL=avatar.js.map
159
+ //# sourceMappingURL=avatar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/lib/utils.ts","../../src/react/avatar.tsx"],"names":[],"mappings":"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","file":"avatar.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst avatarSizeClass = {\n sm: \"h-8 w-8 min-h-8 min-w-8\",\n md: \"h-10 w-10 min-h-10 min-w-10\",\n lg: \"h-12 w-12 min-h-12 min-w-12\",\n} as const;\n\nconst avatarFallbackTextClass = {\n sm: \"text-xs\",\n md: \"text-sm\",\n lg: \"text-base\",\n} as const;\n\nexport type AvatarSize = keyof typeof avatarSizeClass;\n\nconst AvatarSizeContext = React.createContext<AvatarSize>(\"md\");\n\nconst avatarHideFallbackWhenImage =\n \"[&:has([data-slot=avatar-image])_[data-slot=avatar-fallback]]:pointer-events-none [&:has([data-slot=avatar-image])_[data-slot=avatar-fallback]]:opacity-0\";\n\nexport type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {\n /** @default md */\n size?: AvatarSize;\n};\n\nconst Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n ({ className, size = \"md\", children, ...props }, ref) => {\n return (\n <AvatarSizeContext.Provider value={size}>\n <div\n ref={ref}\n data-slot=\"avatar\"\n data-size={size}\n className={cn(\n \"relative flex shrink-0 overflow-hidden rounded-full\",\n avatarHideFallbackWhenImage,\n avatarSizeClass[size],\n className,\n )}\n {...props}\n >\n {children}\n </div>\n </AvatarSizeContext.Provider>\n );\n },\n);\nAvatar.displayName = \"Avatar\";\n\nexport type AvatarImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nconst AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(\n (props, ref) => {\n /* eslint-disable react/prop-types -- props typed as AvatarImageProps */\n const {\n className,\n onLoad,\n onError,\n alt = \"\",\n ...imgProps\n } = props;\n /* eslint-enable react/prop-types */\n const [failed, setFailed] = useState(false);\n const src = imgProps.src;\n\n useEffect(() => {\n setFailed(false);\n }, [src]);\n\n if (!src || failed) {\n return null;\n }\n\n return (\n <img\n ref={ref}\n alt={alt}\n data-slot=\"avatar-image\"\n className={cn(\n \"absolute inset-0 z-10 h-full w-full object-cover\",\n className,\n )}\n onLoad={onLoad}\n onError={(e) => {\n setFailed(true);\n onError?.(e);\n }}\n {...imgProps}\n />\n );\n },\n);\nAvatarImage.displayName = \"AvatarImage\";\n\nexport type AvatarFallbackProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(\n ({ className, ...props }, ref) => {\n const size = React.useContext(AvatarSizeContext);\n\n return (\n <div\n ref={ref}\n data-slot=\"avatar-fallback\"\n className={cn(\n \"absolute inset-0 z-0 flex items-center justify-center rounded-full bg-primary/10 font-semibold text-primary select-none\",\n avatarFallbackTextClass[size],\n className,\n )}\n {...props}\n />\n );\n },\n);\nAvatarFallback.displayName = \"AvatarFallback\";\n\nconst avatarGroupOverflowTextClass: Record<AvatarSize, string> = {\n sm: \"text-[10px]\",\n md: \"text-xs\",\n lg: \"text-sm\",\n};\n\nexport type AvatarGroupProps = Omit<\n React.HTMLAttributes<HTMLDivElement>,\n \"children\"\n> & {\n children: React.ReactNode;\n /**\n * show only the first `max` avatars; extra members become a +N chip (direct\n * `Avatar` children only).\n */\n max?: number;\n /** chip size; use the same `size` on each `Avatar` so the stack lines up */\n size?: AvatarSize;\n};\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n (\n { className, children, max, size = \"md\", ...rest },\n ref,\n ) => {\n const items = React.Children.toArray(children).filter(\n (node): node is React.ReactElement =>\n React.isValidElement(node) && node.type === Avatar,\n );\n\n const overflow =\n max != null && max > 0 && items.length > max ? items.length - max : 0;\n const shown = max != null && max > 0 ? items.slice(0, max) : items;\n\n return (\n <div\n ref={ref}\n data-slot=\"avatar-group\"\n data-size={size}\n className={cn(\"flex items-center -space-x-2\", className)}\n {...rest}\n >\n {shown.map((child, index) =>\n React.cloneElement(child, {\n key: child.key ?? `avatar-group-${index}`,\n className: cn(\n (child.props as { className?: string }).className,\n \"ring-background relative z-0 ring-2\",\n ),\n style: {\n ...((child.props as { style?: React.CSSProperties }).style ??\n {}),\n zIndex: index + 1,\n },\n } as Partial<typeof child.props>),\n )}\n {overflow > 0 ? (\n <span\n aria-label={`${overflow} more`}\n className={cn(\n \"border-background text-primary bg-primary/15 ring-background relative flex shrink-0 items-center justify-center rounded-full border-2 font-semibold tabular-nums ring-2\",\n avatarSizeClass[size],\n avatarGroupOverflowTextClass[size],\n )}\n style={{ zIndex: shown.length + 1 }}\n >\n +{overflow > 99 ? 99 : overflow}\n </span>\n ) : null}\n </div>\n );\n },\n);\nAvatarGroup.displayName = \"AvatarGroup\";\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup };\n"]}
@@ -32,6 +32,12 @@ type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
32
32
  count?: number;
33
33
  /** Upper bound before showing `{max}+`. Default `99`. */
34
34
  max?: number;
35
+ /**
36
+ * Hex color (`#RGB`, `#RRGGBB`, or `#RRGGBBAA`) — tints the badge to that
37
+ * hue. When set, `variant` is ignored for colors. Invalid values are ignored
38
+ * and the badge falls back to `variant`.
39
+ */
40
+ overrideColor?: string;
35
41
  };
36
42
  declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
37
43
  /** @default secondary — same as Button default. */
@@ -50,6 +56,12 @@ declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSp
50
56
  count?: number;
51
57
  /** Upper bound before showing `{max}+`. Default `99`. */
52
58
  max?: number;
59
+ /**
60
+ * Hex color (`#RGB`, `#RRGGBB`, or `#RRGGBBAA`) — tints the badge to that
61
+ * hue. When set, `variant` is ignored for colors. Invalid values are ignored
62
+ * and the badge falls back to `variant`.
63
+ */
64
+ overrideColor?: string;
53
65
  } & React.RefAttributes<HTMLSpanElement>>;
54
66
 
55
67
  export { Badge, type BadgeProps };
@@ -19,6 +19,32 @@ var sizeClass = {
19
19
  md: "min-h-6 min-w-6 px-2 text-xs",
20
20
  lg: "min-h-7 min-w-7 px-2.5 text-sm"
21
21
  };
22
+ var OVERRIDE_BG_ALPHA = 0.18;
23
+ var OVERRIDE_BORDER_ALPHA = 0.38;
24
+ function parseHexToRgb(value) {
25
+ const v = value.trim();
26
+ if (!v.startsWith("#") || v.length < 2) return null;
27
+ let h = v.slice(1);
28
+ if (h.length === 3) {
29
+ h = h.split("").map((c) => c + c).join("");
30
+ } else if (h.length === 8) {
31
+ h = h.slice(0, 6);
32
+ }
33
+ if (h.length !== 6 || !/^[0-9A-Fa-f]{6}$/i.test(h)) return null;
34
+ const r = parseInt(h.slice(0, 2), 16);
35
+ const g = parseInt(h.slice(2, 4), 16);
36
+ const b = parseInt(h.slice(4, 6), 16);
37
+ if ([r, g, b].some((n) => Number.isNaN(n))) return null;
38
+ return { r, g, b };
39
+ }
40
+ function overrideColorStyles(rgb) {
41
+ const { r, g, b } = rgb;
42
+ return {
43
+ backgroundColor: `rgba(${r},${g},${b},${OVERRIDE_BG_ALPHA})`,
44
+ color: `rgb(${r},${g},${b})`,
45
+ boxShadow: `inset 0 0 0 1px rgba(${r},${g},${b},${OVERRIDE_BORDER_ALPHA})`
46
+ };
47
+ }
22
48
  function formatCount(count, max) {
23
49
  if (count > max) return `${max}+`;
24
50
  return String(count);
@@ -33,9 +59,14 @@ var Badge = React.forwardRef(
33
59
  max = 99,
34
60
  children,
35
61
  "aria-label": ariaLabelProp,
62
+ overrideColor,
63
+ style,
36
64
  ...props
37
65
  }, ref) => {
38
66
  const content = count !== void 0 ? formatCount(count, max) : children;
67
+ const rgb = overrideColor && overrideColor.trim() !== "" ? parseHexToRgb(overrideColor) : null;
68
+ const useOverride = rgb != null;
69
+ const overrideStyle = useOverride ? overrideColorStyles(rgb) : void 0;
39
70
  return /* @__PURE__ */ jsx(
40
71
  "span",
41
72
  {
@@ -43,14 +74,17 @@ var Badge = React.forwardRef(
43
74
  "data-slot": "badge",
44
75
  "data-size": size,
45
76
  "data-rounded": rounded,
77
+ "data-override": useOverride ? "true" : void 0,
46
78
  "aria-label": ariaLabelProp,
47
79
  className: cn(
48
80
  "inline-flex shrink-0 items-center justify-center font-semibold leading-none tabular-nums",
49
81
  roundedClass[rounded],
50
82
  sizeClass[size],
51
- variantClass[variant],
83
+ !useOverride && variantClass[variant],
84
+ useOverride && "border-0",
52
85
  className
53
86
  ),
87
+ style: { ...overrideStyle, ...style },
54
88
  ...props,
55
89
  children: content
56
90
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/lib/utils.ts","../../src/react/badge.tsx"],"names":[],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACEA,IAAM,YAAA,GAAe;AAAA,EACnB,OAAA,EAAS,sDAAA;AAAA,EACT,SAAA,EAAW;AACb,CAAA;AAGA,IAAM,YAAA,GAAe;AAAA,EACnB,IAAA,EAAM,cAAA;AAAA,EACN,EAAA,EAAI,YAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,SAAA,GAAY;AAAA,EAChB,EAAA,EAAI,8BAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAqBA,SAAS,WAAA,CAAY,OAAe,GAAA,EAAqB;AACvD,EAAA,IAAI,KAAA,GAAQ,GAAA,EAAK,OAAO,CAAA,EAAG,GAAG,CAAA,CAAA,CAAA;AAC9B,EAAA,OAAO,OAAO,KAAK,CAAA;AACrB;AAEA,IAAM,KAAA,GAAc,KAAA,CAAA,UAAA;AAAA,EAClB,CACE;AAAA,IACE,SAAA;AAAA,IACA,OAAA,GAAU,WAAA;AAAA,IACV,IAAA,GAAO,IAAA;AAAA,IACP,OAAA,GAAU,MAAA;AAAA,IACV,KAAA;AAAA,IACA,GAAA,GAAM,EAAA;AAAA,IACN,QAAA;AAAA,IACA,YAAA,EAAc,aAAA;AAAA,IACd,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,UAAU,KAAA,KAAU,MAAA,GAAY,WAAA,CAAY,KAAA,EAAO,GAAG,CAAA,GAAI,QAAA;AAEhE,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,OAAA;AAAA,QACV,WAAA,EAAW,IAAA;AAAA,QACX,cAAA,EAAc,OAAA;AAAA,QACd,YAAA,EAAY,aAAA;AAAA,QACZ,SAAA,EAAW,EAAA;AAAA,UACT,0FAAA;AAAA,UACA,aAAa,OAAO,CAAA;AAAA,UACpB,UAAU,IAAI,CAAA;AAAA,UACd,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"badge.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/** Matches `button.tsx` primary / secondary — no separate outline variants. */\nconst variantClass = {\n primary: \"border border-transparent bg-primary text-background\",\n secondary: \"border border-primary/10 bg-transparent text-primary\",\n} as const;\n\n/** Same keys as `button.tsx` `roundedClass`. */\nconst roundedClass = {\n full: \"rounded-full\",\n lg: \"rounded-lg\",\n md: \"rounded-md\",\n} as const;\n\nconst sizeClass = {\n md: \"min-h-6 min-w-6 px-2 text-xs\",\n lg: \"min-h-7 min-w-7 px-2.5 text-sm\",\n} as const;\n\nexport type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\n /** @default secondary — same as Button default. */\n variant?: keyof typeof variantClass;\n /** @default md */\n size?: keyof typeof sizeClass;\n /**\n * Corner radius — same options as `Button` (`full` | `lg` | `md`).\n * @default full (pill)\n */\n rounded?: keyof typeof roundedClass;\n /**\n * When set, the label is the number capped at `max` with a \"+\" suffix\n * (e.g. `max={99}` → `99+`). Ignores `children` for the visible text.\n */\n count?: number;\n /** Upper bound before showing `{max}+`. Default `99`. */\n max?: number;\n};\n\nfunction formatCount(count: number, max: number): string {\n if (count > max) return `${max}+`;\n return String(count);\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n (\n {\n className,\n variant = \"secondary\",\n size = \"md\",\n rounded = \"full\",\n count,\n max = 99,\n children,\n \"aria-label\": ariaLabelProp,\n ...props\n },\n ref,\n ) => {\n const content = count !== undefined ? formatCount(count, max) : children;\n\n return (\n <span\n ref={ref}\n data-slot=\"badge\"\n data-size={size}\n data-rounded={rounded}\n aria-label={ariaLabelProp}\n className={cn(\n \"inline-flex shrink-0 items-center justify-center font-semibold leading-none tabular-nums\",\n roundedClass[rounded],\n sizeClass[size],\n variantClass[variant],\n className,\n )}\n {...props}\n >\n {content}\n </span>\n );\n },\n);\n\nBadge.displayName = \"Badge\";\n\nexport { Badge };\n"]}
1
+ {"version":3,"sources":["../../src/lib/utils.ts","../../src/react/badge.tsx"],"names":[],"mappings":"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","file":"badge.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/** Matches `button.tsx` primary / secondary — no separate outline variants. */\nconst variantClass = {\n primary:\n \"border border-transparent bg-primary text-background\",\n secondary:\n \"border border-primary/10 bg-transparent text-primary\",\n} as const;\n\n/** Same keys as `button.tsx` `roundedClass`. */\nconst roundedClass = {\n full: \"rounded-full\",\n lg: \"rounded-lg\",\n md: \"rounded-md\",\n} as const;\n\nconst sizeClass = {\n md: \"min-h-6 min-w-6 px-2 text-xs\",\n lg: \"min-h-7 min-w-7 px-2.5 text-sm\",\n} as const;\n\nconst OVERRIDE_BG_ALPHA = 0.18;\nconst OVERRIDE_BORDER_ALPHA = 0.38;\n\nfunction parseHexToRgb(\n value: string,\n): { r: number; g: number; b: number } | null {\n const v = value.trim();\n if (!v.startsWith(\"#\") || v.length < 2) return null;\n let h = v.slice(1);\n if (h.length === 3) {\n h = h\n .split(\"\")\n .map((c) => c + c)\n .join(\"\");\n } else if (h.length === 8) {\n h = h.slice(0, 6);\n }\n if (h.length !== 6 || !/^[0-9A-Fa-f]{6}$/i.test(h)) return null;\n const r = parseInt(h.slice(0, 2), 16);\n const g = parseInt(h.slice(2, 4), 16);\n const b = parseInt(h.slice(4, 6), 16);\n if ([r, g, b].some((n) => Number.isNaN(n))) return null;\n return { r, g, b };\n}\n\nfunction overrideColorStyles(rgb: { r: number; g: number; b: number }): {\n backgroundColor: string;\n color: string;\n boxShadow: string;\n} {\n const { r, g, b } = rgb;\n return {\n backgroundColor: `rgba(${r},${g},${b},${OVERRIDE_BG_ALPHA})`,\n color: `rgb(${r},${g},${b})`,\n boxShadow: `inset 0 0 0 1px rgba(${r},${g},${b},${OVERRIDE_BORDER_ALPHA})`,\n };\n}\n\nexport type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\n /** @default secondary — same as Button default. */\n variant?: keyof typeof variantClass;\n /** @default md */\n size?: keyof typeof sizeClass;\n /**\n * Corner radius — same options as `Button` (`full` | `lg` | `md`).\n * @default full (pill)\n */\n rounded?: keyof typeof roundedClass;\n /**\n * When set, the label is the number capped at `max` with a \"+\" suffix\n * (e.g. `max={99}` → `99+`). Ignores `children` for the visible text.\n */\n count?: number;\n /** Upper bound before showing `{max}+`. Default `99`. */\n max?: number;\n /**\n * Hex color (`#RGB`, `#RRGGBB`, or `#RRGGBBAA`) — tints the badge to that\n * hue. When set, `variant` is ignored for colors. Invalid values are ignored\n * and the badge falls back to `variant`.\n */\n overrideColor?: string;\n};\n\nfunction formatCount(count: number, max: number): string {\n if (count > max) return `${max}+`;\n return String(count);\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n (\n {\n className,\n variant = \"secondary\",\n size = \"md\",\n rounded = \"full\",\n count,\n max = 99,\n children,\n \"aria-label\": ariaLabelProp,\n overrideColor,\n style,\n ...props\n },\n ref,\n ) => {\n const content = count !== undefined ? formatCount(count, max) : children;\n const rgb =\n overrideColor && overrideColor.trim() !== \"\"\n ? parseHexToRgb(overrideColor)\n : null;\n const useOverride = rgb != null;\n const overrideStyle = useOverride\n ? overrideColorStyles(rgb)\n : undefined;\n\n return (\n <span\n ref={ref}\n data-slot=\"badge\"\n data-size={size}\n data-rounded={rounded}\n data-override={useOverride ? \"true\" : undefined}\n aria-label={ariaLabelProp}\n className={cn(\n \"inline-flex shrink-0 items-center justify-center font-semibold leading-none tabular-nums\",\n roundedClass[rounded],\n sizeClass[size],\n !useOverride && variantClass[variant],\n useOverride && \"border-0\",\n className,\n )}\n style={{ ...overrideStyle, ...style }}\n {...props}\n >\n {content}\n </span>\n );\n },\n);\n\nBadge.displayName = \"Badge\";\n\nexport { Badge };\n"]}
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
 
3
3
  declare const sizeClass: {
4
- readonly xs: "h-8 min-h-8 gap-2 px-4 text-xs has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3";
4
+ readonly xs: "h-8 min-h-8 gap-2 px-4 text-sm has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3";
5
5
  readonly default: "h-10 min-h-10 gap-2 px-5 text-sm has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4";
6
6
  readonly lg: "h-11 min-h-11 gap-2 px-6 text-base has-[>svg]:px-5 [&_svg:not([class*='size-'])]:size-5";
7
7
  };
@@ -8,7 +8,7 @@ function cn(...inputs) {
8
8
  return twMerge(clsx(inputs));
9
9
  }
10
10
  var sizeClass = {
11
- xs: "h-8 min-h-8 gap-2 px-4 text-xs has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3",
11
+ xs: "h-8 min-h-8 gap-2 px-4 text-sm has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3",
12
12
  default: "h-10 min-h-10 gap-2 px-5 text-sm has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4",
13
13
  lg: "h-11 min-h-11 gap-2 px-6 text-base has-[>svg]:px-5 [&_svg:not([class*='size-'])]:size-5"
14
14
  };
@@ -48,9 +48,9 @@ var Button = React.forwardRef(
48
48
  "data-slot": "button",
49
49
  "data-icon-only": iconOnly ? "" : void 0,
50
50
  className: cn(
51
- "inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap outline-none transition-[color,background-color,box-shadow,transform] duration-150 ease-out active:scale-[0.98] [&_svg]:pointer-events-none [&_svg]:shrink-0",
51
+ "inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap outline-none scale-100 transition-[color,background-color,box-shadow,transform] duration-150 ease-out active:scale-[0.98] active:duration-100 active:ease-linear [&_svg]:pointer-events-none [&_svg]:shrink-0",
52
52
  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
53
- "focus-visible:border-ring font-bold tracking-wide focus-visible:ring-ring/50 focus-visible:ring-[3px]",
53
+ "focus-visible:border-ring font-medium lg:tracking-wide focus-visible:ring-ring/50 focus-visible:ring-[3px]",
54
54
  iconOnly ? iconOnlySizeClass[size] : sizeClass[size],
55
55
  roundedClass[rounded],
56
56
  variantClass[variant],
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/lib/utils.ts","../../src/react/button.tsx"],"names":[],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,SAAA,GAAY;AAAA,EAChB,EAAA,EAAI,qFAAA;AAAA,EACJ,OAAA,EACE,uFAAA;AAAA,EACF,EAAA,EAAI;AACN,CAAA;AAGA,IAAM,iBAAA,GAAoB;AAAA,EACxB,EAAA,EAAI,uEAAA;AAAA,EACJ,OAAA,EACE,0EAAA;AAAA,EACF,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,YAAA,GAAe;AAAA,EACnB,IAAA,EAAM,cAAA;AAAA,EACN,EAAA,EAAI,YAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,YAAA,GAAe;AAAA,EACnB,OAAA,EACE,+FAAA;AAAA,EACF,SAAA,EACE,wEAAA;AAAA,EACF,WAAA,EACE,wEAAA;AAAA,EACF,OAAA,EACE;AACJ,CAAA;AAuBA,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA;AAAA,EACnB,CACE;AAAA,IACE,SAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,OAAA,GAAU,WAAA;AAAA,IACV,OAAA,EAAS,WAAA;AAAA,IACT,IAAA,GAAO,SAAA;AAAA,IACP,QAAA,GAAW,KAAA;AAAA,IACX,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,OAAA,GAAU,WAAA,KAAgB,QAAA,GAAW,IAAA,GAAO,MAAA,CAAA;AAElD,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA,EAAU,QAAA;AAAA,QACV,gBAAA,EAAgB,WAAW,EAAA,GAAK,MAAA;AAAA,QAChC,SAAA,EAAW,EAAA;AAAA,UACT,gPAAA;AAAA,UACA,8EAAA;AAAA,UACA,uGAAA;AAAA,UACA,QAAA,GAAW,iBAAA,CAAkB,IAAI,CAAA,GAAI,UAAU,IAAI,CAAA;AAAA,UACnD,aAAa,OAAO,CAAA;AAAA,UACpB,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"button.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst sizeClass = {\n xs: \"h-8 min-h-8 gap-2 px-4 text-xs has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3\",\n default:\n \"h-10 min-h-10 gap-2 px-5 text-sm has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4\",\n lg: \"h-11 min-h-11 gap-2 px-6 text-base has-[>svg]:px-5 [&_svg:not([class*='size-'])]:size-5\",\n} as const;\n\n/** Square hit targets for `iconOnly` — same keys as `sizeClass` (`default` | `lg`). */\nconst iconOnlySizeClass = {\n xs: \"size-8 min-h-8 min-w-8 gap-0 p-0 [&_svg:not([class*='size-'])]:size-3\",\n default:\n \"size-10 min-h-10 min-w-10 gap-0 p-0 [&_svg:not([class*='size-'])]:size-4\",\n lg: \"size-11 min-h-11 min-w-11 gap-0 p-0 [&_svg:not([class*='size-'])]:size-5\",\n} as const;\n\nconst roundedClass = {\n full: \"rounded-full\",\n lg: \"rounded-lg\",\n md: \"rounded-md\",\n} as const;\n\nconst variantClass = {\n primary:\n \"bg-primary text-background border border-transparent hover:bg-primary/90 active:bg-primary/85\",\n secondary:\n \"bg-background text-primary border border-primary/10 hover:bg-primary/5\",\n destructive:\n \"bg-background text-red-500 border border-red-500/25 hover:bg-red-500/5\",\n success:\n \"bg-background text-green-500 border border-green-500/25 hover:bg-green-500/5\",\n} as const;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> & {\n /**\n * Visual style: neutral (`secondary`, `primary`), or outline (`destructive`,\n * `success`) using Tailwind `red-500` / `green-500` text and matching borders on\n * `bg-background` (no solid fill).\n */\n variant?: keyof typeof variantClass;\n /**\n * Corner radius. Labeled buttons default to `full` (pill). `iconOnly` buttons\n * default to `md` (square corners) unless you pass `rounded` explicitly.\n */\n rounded?: keyof typeof roundedClass;\n /** Height and horizontal padding: `default` or `lg` only. */\n size?: keyof typeof sizeClass;\n /**\n * Square icon-only control; same `size` presets (`default` | `lg`). Pair with\n * `aria-label` (or `title`) when there is no visible text.\n */\n iconOnly?: boolean;\n};\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n type = \"button\",\n variant = \"secondary\",\n rounded: roundedProp,\n size = \"default\",\n iconOnly = false,\n disabled,\n ...props\n },\n ref,\n ) => {\n const rounded = roundedProp ?? (iconOnly ? \"md\" : \"full\");\n\n return (\n <button\n type={type}\n disabled={disabled}\n data-slot=\"button\"\n data-icon-only={iconOnly ? \"\" : undefined}\n className={cn(\n \"inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap outline-none transition-[color,background-color,box-shadow,transform] duration-150 ease-out active:scale-[0.98] [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n \"focus-visible:border-ring font-bold tracking-wide focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n iconOnly ? iconOnlySizeClass[size] : sizeClass[size],\n roundedClass[rounded],\n variantClass[variant],\n className,\n )}\n ref={ref}\n {...props}\n />\n );\n },\n);\nButton.displayName = \"Button\";\n\nexport { Button };\n"]}
1
+ {"version":3,"sources":["../../src/lib/utils.ts","../../src/react/button.tsx"],"names":[],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,SAAA,GAAY;AAAA,EAChB,EAAA,EAAI,qFAAA;AAAA,EACJ,OAAA,EACE,uFAAA;AAAA,EACF,EAAA,EAAI;AACN,CAAA;AAGA,IAAM,iBAAA,GAAoB;AAAA,EACxB,EAAA,EAAI,uEAAA;AAAA,EACJ,OAAA,EACE,0EAAA;AAAA,EACF,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,YAAA,GAAe;AAAA,EACnB,IAAA,EAAM,cAAA;AAAA,EACN,EAAA,EAAI,YAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,YAAA,GAAe;AAAA,EACnB,OAAA,EACE,+FAAA;AAAA,EACF,SAAA,EACE,wEAAA;AAAA,EACF,WAAA,EACE,wEAAA;AAAA,EACF,OAAA,EACE;AACJ,CAAA;AAuBA,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA;AAAA,EACnB,CACE;AAAA,IACE,SAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,OAAA,GAAU,WAAA;AAAA,IACV,OAAA,EAAS,WAAA;AAAA,IACT,IAAA,GAAO,SAAA;AAAA,IACP,QAAA,GAAW,KAAA;AAAA,IACX,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,OAAA,GAAU,WAAA,KAAgB,QAAA,GAAW,IAAA,GAAO,MAAA,CAAA;AAElD,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA,EAAU,QAAA;AAAA,QACV,gBAAA,EAAgB,WAAW,EAAA,GAAK,MAAA;AAAA,QAChC,SAAA,EAAW,EAAA;AAAA,UACT,iSAAA;AAAA,UACA,8EAAA;AAAA,UACA,4GAAA;AAAA,UACA,QAAA,GAAW,iBAAA,CAAkB,IAAI,CAAA,GAAI,UAAU,IAAI,CAAA;AAAA,UACnD,aAAa,OAAO,CAAA;AAAA,UACpB,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"button.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst sizeClass = {\n xs: \"h-8 min-h-8 gap-2 px-4 text-sm has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3\",\n default:\n \"h-10 min-h-10 gap-2 px-5 text-sm has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4\",\n lg: \"h-11 min-h-11 gap-2 px-6 text-base has-[>svg]:px-5 [&_svg:not([class*='size-'])]:size-5\",\n} as const;\n\n/** Square hit targets for `iconOnly` — same keys as `sizeClass` (`default` | `lg`). */\nconst iconOnlySizeClass = {\n xs: \"size-8 min-h-8 min-w-8 gap-0 p-0 [&_svg:not([class*='size-'])]:size-3\",\n default:\n \"size-10 min-h-10 min-w-10 gap-0 p-0 [&_svg:not([class*='size-'])]:size-4\",\n lg: \"size-11 min-h-11 min-w-11 gap-0 p-0 [&_svg:not([class*='size-'])]:size-5\",\n} as const;\n\nconst roundedClass = {\n full: \"rounded-full\",\n lg: \"rounded-lg\",\n md: \"rounded-md\",\n} as const;\n\nconst variantClass = {\n primary:\n \"bg-primary text-background border border-transparent hover:bg-primary/90 active:bg-primary/85\",\n secondary:\n \"bg-background text-primary border border-primary/10 hover:bg-primary/5\",\n destructive:\n \"bg-background text-red-500 border border-red-500/25 hover:bg-red-500/5\",\n success:\n \"bg-background text-green-500 border border-green-500/25 hover:bg-green-500/5\",\n} as const;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> & {\n /**\n * Visual style: neutral (`secondary`, `primary`), or outline (`destructive`,\n * `success`) using Tailwind `red-500` / `green-500` text and matching borders on\n * `bg-background` (no solid fill).\n */\n variant?: keyof typeof variantClass;\n /**\n * Corner radius. Labeled buttons default to `full` (pill). `iconOnly` buttons\n * default to `md` (square corners) unless you pass `rounded` explicitly.\n */\n rounded?: keyof typeof roundedClass;\n /** Height and horizontal padding: `default` or `lg` only. */\n size?: keyof typeof sizeClass;\n /**\n * Square icon-only control; same `size` presets (`default` | `lg`). Pair with\n * `aria-label` (or `title`) when there is no visible text.\n */\n iconOnly?: boolean;\n};\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n type = \"button\",\n variant = \"secondary\",\n rounded: roundedProp,\n size = \"default\",\n iconOnly = false,\n disabled,\n ...props\n },\n ref,\n ) => {\n const rounded = roundedProp ?? (iconOnly ? \"md\" : \"full\");\n\n return (\n <button\n type={type}\n disabled={disabled}\n data-slot=\"button\"\n data-icon-only={iconOnly ? \"\" : undefined}\n className={cn(\n \"inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap outline-none scale-100 transition-[color,background-color,box-shadow,transform] duration-150 ease-out active:scale-[0.98] active:duration-100 active:ease-linear [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n \"focus-visible:border-ring font-medium lg:tracking-wide focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n iconOnly ? iconOnlySizeClass[size] : sizeClass[size],\n roundedClass[rounded],\n variantClass[variant],\n className,\n )}\n ref={ref}\n {...props}\n />\n );\n },\n);\nButton.displayName = \"Button\";\n\nexport { Button };\n"]}
@@ -0,0 +1,13 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as react_day_picker from 'react-day-picker';
3
+ import { DayPicker } from 'react-day-picker';
4
+ export { DateRange } from 'react-day-picker';
5
+ import * as React from 'react';
6
+
7
+ declare const CalendarDayButton: React.ForwardRefExoticComponent<{
8
+ day: react_day_picker.CalendarDay;
9
+ modifiers: react_day_picker.Modifiers;
10
+ } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
11
+ declare function Calendar({ className, classNames, showOutsideDays, captionLayout, formatters, components, ...props }: React.ComponentProps<typeof DayPicker>): react_jsx_runtime.JSX.Element;
12
+
13
+ export { Calendar, CalendarDayButton };