@flikk/ui 1.0.0-beta.6 → 1.0.0-beta.7

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 (18) hide show
  1. package/dist/components/ai/PromptInput/PromptInput.js +5 -124
  2. package/dist/components/core/Badge/Badge.theme.js +4 -4
  3. package/dist/components/core/Button/Button.theme.js +5 -5
  4. package/dist/components/core/Calendar/Calendar.theme.js +3 -3
  5. package/dist/components/core/CommandPalette/CommandPalette.theme.js +1 -1
  6. package/dist/components/core/MenuItem/MenuItem.theme.js +2 -2
  7. package/dist/components/core/OfflineIndicator/OfflineIndicator.theme.js +1 -1
  8. package/dist/components/core/Progress/Progress.theme.js +1 -1
  9. package/dist/components/data-display/Table/TableFilter.js +1 -1
  10. package/dist/components/data-display/Timeline/Timeline.theme.js +2 -2
  11. package/dist/components/forms/FileUpload/FileUpload.js +0 -78
  12. package/dist/components/forms/TimePicker/TimePickerContent.js +1 -78
  13. package/dist/components/forms/index.js +0 -78
  14. package/dist/components/layout/FormLayout/FormLayoutBody.js +1 -79
  15. package/dist/index.js +191 -197
  16. package/dist/styles.css +1 -1
  17. package/package.json +1 -1
  18. package/src/styles/theme.css +10 -0
package/dist/components/ai/PromptInput/PromptInput.js CHANGED
@@ -1,43 +1,11 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import React__default, { useState, useRef, useId, useEffect, useCallback } from 'react';
3
3
  import { AnimatePresence, motion } from 'motion/react';
4
- import '../../forms/Input/Input.js';
5
- import '../../forms/Input/Input.theme.js';
6
- import '../../forms/Select/Select.js';
7
- import '../../forms/Select/Select.theme.js';
4
+ import { cn } from '../../../utils/cn.js';
5
+ import { CloudArrowUpIcon, DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, MicrophoneIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
6
+ import { promptInputTheme } from './PromptInput.theme.js';
8
7
  import { Textarea } from '../../forms/Textarea/Textarea.js';
9
8
  import '../../forms/Textarea/Textarea.theme.js';
10
- import '../../forms/FormLabel/FormLabel.js';
11
- import '../../forms/Radio/Radio.js';
12
- import '../../forms/Checkbox/Checkbox.js';
13
- import '../../forms/Switch/Switch.js';
14
- import '../../forms/DatePicker/DatePicker.js';
15
- import '../../forms/DatePicker/DatePicker.theme.js';
16
- import '../../forms/FileUpload/FileUpload.js';
17
- import '../../forms/TimePicker/TimePicker.js';
18
- import { CloudArrowUpIcon, DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, MicrophoneIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
19
- import { cn } from '../../../utils/cn.js';
20
- import 'react-dom';
21
- import '../../core/Accordion/Accordion.js';
22
- import '../../core/AlertDialog/AlertDialog.js';
23
- import '../../core/AspectRatio/AspectRatio.js';
24
- import '../../core/Avatar/Avatar.js';
25
- import '../../core/AvatarGroup/AvatarGroup.js';
26
- import '../../core/Badge/Badge.js';
27
- import '../../core/Breadcrumbs/Breadcrumbs.js';
28
- import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
29
- import { Button } from '../../core/Button/Button.js';
30
- import '../../core/ButtonGroup/ButtonGroup.js';
31
- import '../../core/ButtonGroup/ButtonGroupSeparator.js';
32
- import '../../core/ButtonGroup/ButtonGroupText.js';
33
- import '../../core/Calendar/Calendar.js';
34
- import '../../core/Calendar/CalendarMini/CalendarMini.js';
35
- import '../../core/Card/Card.js';
36
- import '../../core/CardStack/CardStack.js';
37
- import '../../core/Carousel/Carousel.js';
38
- import '../../core/CommandPalette/CommandPalette.js';
39
- import '../../core/Separator/Separator.js';
40
- import '../../core/Drawer/Drawer.js';
41
9
  import { Dropdown } from '../../core/Dropdown/Dropdown.js';
42
10
  import '../../core/Dropdown/DropdownTrigger.js';
43
11
  import '../../core/Dropdown/DropdownMenu.js';
@@ -45,94 +13,7 @@ import '../../core/Dropdown/DropdownItem.js';
45
13
  import '../../core/Dropdown/DropdownSection.js';
46
14
  import '../../core/Dropdown/DropdownSeparator.js';
47
15
  import '../../core/Dropdown/Dropdown.theme.js';
48
- import '../../core/Kbd/Kbd.js';
49
- import '../../core/MenuItem/MenuItem.js';
50
- import '../../core/Link/Link.js';
51
- import '../../core/Loader/Loader.js';
52
- import '../../core/Modal/Modal.js';
53
- import '../../core/ModalStack/ModalStack.js';
54
- import '../../core/PageHeading/PageHeading.js';
55
- import '../../core/Pagination/Pagination.js';
56
- import '../../core/Popover/Popover.js';
57
- import '../../core/Popover/PopoverContext.js';
58
- import '../../core/Progress/Progress.js';
59
- import '../../core/Rating/Rating.js';
60
- import '../../core/ScrollArea/ScrollArea.js';
61
- import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
62
- import '../../core/Segmented/Segmented.js';
63
- import '../../core/Skeleton/Skeleton.js';
64
- import '../../core/SlidingNumber/SlidingNumber.js';
65
- import '../../core/Tabs/Tabs.js';
66
- import '../../core/Tabs/TabsList.js';
67
- import '../../core/Tabs/TabsTrigger.js';
68
- import '../../core/Tabs/TabsContent.js';
69
- import '../../core/Tabs/TabsContext.js';
70
- import '../../core/Tooltip/Tooltip.js';
71
- import '../../core/Tooltip/Tooltip.animations.js';
72
- import '../../core/Tree/Tree.js';
73
- import '../../core/Tag/Tag.js';
74
- import '../../core/Alert/Alert.js';
75
- import '../../core/Toast/Toast.js';
76
- import '../../core/Toast/ToastProvider.js';
77
- import '@heroicons/react/24/solid';
78
- import '../../core/Spinner/Spinner.js';
79
- import '../../core/Message/Message.js';
80
- import '../../core/Message/TypeWriter.js';
81
- import '../../core/Empty/Empty.js';
82
- import '../../core/Masonry/Masonry.js';
83
- import '../../core/DragDrop/DragDrop.js';
84
- import '../../core/Sortable/Sortable.js';
85
- import '../../core/NavItem/NavItem.js';
86
- import '../../core/Sidebar/Sidebar.js';
87
- import '../../core/Sidebar/SidebarHeader.js';
88
- import '../../core/Sidebar/SidebarContent.js';
89
- import '../../core/Sidebar/SidebarFooter.js';
90
- import '../../core/Sidebar/SidebarNav.js';
91
- import '../../core/Sidebar/SidebarNavGroup.js';
92
- import '../../core/Sidebar/SidebarToggle.js';
93
- import '../../core/Sidebar/SidebarContext.js';
94
- import '../../core/OfflineIndicator/OfflineIndicator.js';
95
- import '../../core/ContextMenu/ContextMenu.js';
96
- import '../../core/ContextMenu/ContextMenu.theme.js';
97
- import '../../core/Pill/Pill.js';
98
- import '../../core/SocialIcon/SocialIcon.js';
99
- import '../../forms/TimePicker/WheelColumn.js';
100
- import '../../forms/TimePicker/TimePicker.theme.js';
101
- import '../../forms/Slider/Slider.js';
102
- import '../../forms/Slider/Slider.theme.js';
103
- import '../../forms/Signature/Signature.js';
104
- import '../../forms/Signature/Signature.theme.js';
105
- import '../../forms/RichTextEditor/RichTextEditor.js';
106
- import '../../forms/RichTextEditor/RichTextEditor.theme.js';
107
- import '../../forms/InputOTP/InputOTP.js';
108
- import '../../forms/InputOTP/InputOTP.theme.js';
109
- import '../../forms/InputCreditCard/InputCreditCard.js';
110
- import '../../forms/InputCreditCard/InputCreditCard.theme.js';
111
- import '../../forms/InputAddress/InputAddress.js';
112
- import '../../forms/InputAddress/InputAddress.theme.js';
113
- import '../../forms/InputDate/InputDate.js';
114
- import '../../forms/InputCounter/InputCounter.js';
115
- import '../../forms/InputTag/InputTag.js';
116
- import '../../forms/InputTag/InputTag.theme.js';
117
- import '../../forms/Combobox/Combobox.js';
118
- import '../../forms/Combobox/Combobox.theme.js';
119
- import '../../forms/ColorPicker/ColorPicker.js';
120
- import '../../forms/ColorPicker/ColorPickerTrigger.js';
121
- import '../../forms/ColorPicker/ColorPickerContent.js';
122
- import '../../forms/ColorPicker/ColorPicker2DCanvas.js';
123
- import '../../forms/ColorPicker/ColorPickerSwatch.js';
124
- import '../../forms/ColorPicker/ColorPickerSliders.js';
125
- import '../../forms/ColorPicker/ColorPickerInput.js';
126
- import '../../forms/ColorPicker/ColorPickerFormatSelector.js';
127
- import '../../forms/ColorPicker/ColorPickerEyeDropper.js';
128
- import '../../forms/ColorPicker/ColorPickerPresets.js';
129
- import '../../forms/SelectableCard/SelectableCard.js';
130
- import '../../forms/TransferList/TransferList.js';
131
- import '../../forms/Mention/Mention.js';
132
- import '../../forms/Mention/Mention.theme.js';
133
- import '../../forms/CronInput/CronInput.js';
134
- import '../../forms/CronInput/CronInput.theme.js';
135
- import { promptInputTheme } from './PromptInput.theme.js';
16
+ import { Button } from '../../core/Button/Button.js';
136
17
 
137
18
  /**
138
19
  * Default model options for the model selector
@@ -574,7 +455,7 @@ className, textareaClassName, footerClassName, theme = {},
574
455
  e.target.value = "";
575
456
  }, className: "sr-only", "aria-label": "Attach files" }), jsxs("div", { className: cn("relative", mergedTheme.baseStyle, mergedTheme.stateStyle, variant === "simple" ? "p-3 rounded-full pl-5" : ""), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [jsx(AnimatePresence, { children: isDragOver && enableDropzone && (jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, className: mergedTheme.dropzoneStyle, children: [jsx(CloudArrowUpIcon, { className: "size-8 text-[var(--color-primary)]" }), jsx("p", { className: "text-sm font-medium text-[var(--color-primary)]", children: dropzoneText })] })) }), currentAttachments.length > 0 && (jsx("div", { className: "flex flex-wrap gap-2 py-2 px-1", children: currentAttachments.map((attachment) => {
576
457
  var _a;
577
- return (jsxs("div", { className: "relative group rounded-lg border border-[var(--color-border)] bg-white", children: [attachment.type === "image" ? (attachment.isCompressing ? (jsx("div", { className: "size-12 flex items-center justify-center bg-gray-100 rounded-lg", children: jsx("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-[var(--color-primary)] rounded-full animate-spin" }) })) : (jsx("img", { src: attachment.previewUrl, alt: attachment.file.name, className: "size-12 object-cover rounded-lg" }))) : (jsxs("div", { className: "size-12 flex flex-col items-center justify-center text-center p-1 rounded-lg", children: [jsx(DocumentIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]" }), jsx("span", { className: "text-[10px] text-[var(--color-text-secondary)] truncate w-full", children: (_a = attachment.file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })] })), jsx("button", { onClick: () => removeAttachment(attachment.id), className: "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-[var(--color-danger)] text-white flex items-center justify-center opacity-0 translate-y-1 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 ease-in-out cursor-pointer shadow-md", "aria-label": `Remove ${attachment.file.name}`, children: jsx(XMarkIcon, { className: "size-3", strokeWidth: 3 }) })] }, attachment.id));
458
+ return (jsxs("div", { className: "relative group rounded-lg border border-[var(--color-border)] bg-white", children: [attachment.type === "image" ? (attachment.isCompressing ? (jsx("div", { className: "size-12 flex items-center justify-center bg-gray-100 rounded-lg", children: jsx("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-[var(--color-primary)] rounded-full animate-spin" }) })) : (jsx("img", { src: attachment.previewUrl, alt: attachment.file.name, className: "size-12 object-cover rounded-lg" }))) : (jsxs("div", { className: "size-12 flex flex-col items-center justify-center text-center p-1 rounded-lg", children: [jsx(DocumentIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]" }), jsx("span", { className: "text-[10px] text-[var(--color-text-secondary)] truncate w-full", children: (_a = attachment.file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })] })), jsx("button", { onClick: () => removeAttachment(attachment.id), className: "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-[var(--color-danger)] text-[var(--color-danger-contrast)] flex items-center justify-center opacity-0 translate-y-1 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 ease-in-out cursor-pointer shadow-md", "aria-label": `Remove ${attachment.file.name}`, children: jsx(XMarkIcon, { className: "size-3", strokeWidth: 3 }) })] }, attachment.id));
578
459
  }) })), jsxs("div", { className: cn("flex gap-2", variant === "simple" ? "items-end" : "items-start"), children: [jsx(Textarea, { ref: textareaRef, id: id, unstyled: true, value: currentValue, onChange: handleChange, onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: placeholder, disabled: isDisabled, maxLength: maxLength, rows: rows, "aria-label": ariaLabel || "Prompt input", "aria-describedby": helperTextId, "aria-invalid": isInvalid, "aria-disabled": isDisabled, className: cn(mergedTheme.textareaStyle, variant === "simple" && "!w-auto flex-1 min-w-0 justify-center", textareaClassName), style: {
579
460
  minHeight,
580
461
  maxHeight,
package/dist/components/core/Badge/Badge.theme.js CHANGED
@@ -18,13 +18,13 @@ const badgeTheme = {
18
18
  filled: {
19
19
  neutral: "bg-[var(--color-neutral-900)] text-white ring-[var(--color-border)] " +
20
20
  "dark:bg-[var(--color-neutral-700)] dark:ring-[var(--color-neutral-600)]",
21
- primary: "bg-[var(--color-primary)] text-white ring-[var(--color-primary-400)] " +
21
+ primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] ring-[var(--color-primary-400)] " +
22
22
  "dark:bg-[var(--color-primary-600)] dark:ring-[var(--color-primary-500)]",
23
- success: "bg-[var(--color-success-600)] text-white ring-[var(--color-success-300)] " +
23
+ success: "bg-[var(--color-success-600)] text-[var(--color-success-contrast)] ring-[var(--color-success-300)] " +
24
24
  "dark:bg-[var(--color-success-600)] dark:ring-[var(--color-success-400)]",
25
- warning: "bg-[var(--color-warning)] text-white ring-[var(--color-warning-300)] " +
25
+ warning: "bg-[var(--color-warning)] text-[var(--color-warning-contrast)] ring-[var(--color-warning-300)] " +
26
26
  "dark:bg-[var(--color-warning-600)] dark:ring-[var(--color-warning-400)]",
27
- danger: "bg-[var(--color-danger)] text-white ring-[var(--color-danger-400)] " +
27
+ danger: "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] ring-[var(--color-danger-400)] " +
28
28
  "dark:bg-[var(--color-danger-600)] dark:ring-[var(--color-danger-400)]",
29
29
  },
30
30
  // Outline variant - transparent bg with colored border
package/dist/components/core/Button/Button.theme.js CHANGED
@@ -20,22 +20,22 @@ const buttonTheme = {
20
20
  "focus-visible:outline-[var(--color-neutral-800)] " +
21
21
  "dark:bg-[var(--color-neutral-200)] dark:text-[var(--color-neutral-900)] dark:border-[var(--color-neutral-200)] " +
22
22
  "dark:hover:bg-[var(--color-neutral-300)]",
23
- primary: "bg-[var(--color-primary)] text-white border-[var(--color-primary)] " +
23
+ primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] " +
24
24
  "hover:bg-[var(--color-primary-700)] hover:ring-2 hover:ring-[var(--color-primary)]/20 " +
25
25
  "focus-visible:outline-[var(--color-primary-600)] " +
26
- "dark:text-white dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)] " +
26
+ "dark:text-[var(--color-primary-contrast)] dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)] " +
27
27
  "dark:hover:bg-[var(--color-primary-500)]",
28
- success: "bg-[var(--color-success)] text-white border-[var(--color-success)] " +
28
+ success: "bg-[var(--color-success)] text-[var(--color-success-contrast)] border-[var(--color-success)] " +
29
29
  "hover:bg-[var(--color-success-600)] hover:ring-2 hover:ring-[var(--color-success)]/20 " +
30
30
  "focus-visible:outline-[var(--color-success-600)] " +
31
31
  "dark:bg-[var(--color-success-700)] dark:border-[var(--color-success-700)] " +
32
32
  "dark:hover:bg-[var(--color-success-600)]",
33
- warning: "bg-[var(--color-warning)] text-white border-[var(--color-warning)] " +
33
+ warning: "bg-[var(--color-warning)] text-[var(--color-warning-contrast)] border-[var(--color-warning)] " +
34
34
  "hover:bg-[var(--color-warning-600)] hover:ring-2 hover:ring-[var(--color-warning)]/20 " +
35
35
  "focus-visible:outline-[var(--color-warning-600)] " +
36
36
  "dark:bg-[var(--color-warning-600)] dark:border-[var(--color-warning-600)] " +
37
37
  "dark:hover:bg-[var(--color-warning-500)]",
38
- danger: "bg-[var(--color-danger)] text-white border-[var(--color-danger)] " +
38
+ danger: "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] border-[var(--color-danger)] " +
39
39
  "hover:bg-[var(--color-danger-600)] hover:ring-2 hover:ring-[var(--color-danger)]/20 " +
40
40
  "focus-visible:outline-[var(--color-danger-600)] " +
41
41
  "dark:bg-[var(--color-danger-600)] dark:border-[var(--color-danger-600)] " +
package/dist/components/core/Calendar/Calendar.theme.js CHANGED
@@ -26,7 +26,7 @@ const calendarTheme = {
26
26
  // Hover state
27
27
  "hover:bg-[var(--color-primary-50)] dark:hover:bg-[var(--color-neutral-800)] " +
28
28
  // Selected state
29
- "data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:text-white " +
29
+ "data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:text-[var(--color-primary-contrast)] " +
30
30
  "data-[selected=true]:hover:bg-[var(--color-primary-600)] data-[selected=true]:border-t data-[selected=true]:border-white/30 " +
31
31
  // Today indicator
32
32
  "data-[today=true]:text-[var(--color-primary)] dark:data-[today=true]:text-[var(--color-primary-400)] " +
@@ -38,8 +38,8 @@ const calendarTheme = {
38
38
  "data-[other-month=true]:text-[var(--color-text-muted)] data-[other-month=true]:opacity-60 " +
39
39
  "dark:data-[other-month=true]:text-[var(--color-neutral-600)] " +
40
40
  // Range mode states
41
- "data-[range-start=true]:bg-[var(--color-primary)] data-[range-start=true]:text-white " +
42
- "data-[range-end=true]:bg-[var(--color-primary)] data-[range-end=true]:text-white " +
41
+ "data-[range-start=true]:bg-[var(--color-primary)] data-[range-start=true]:text-[var(--color-primary-contrast)] " +
42
+ "data-[range-end=true]:bg-[var(--color-primary)] data-[range-end=true]:text-[var(--color-primary-contrast)] " +
43
43
  "data-[in-range=true]:bg-[var(--color-primary-50)]/70 data-[in-range=true]:text-[var(--color-text-primary)] " +
44
44
  "dark:data-[in-range=true]:bg-[var(--color-primary-900)]/50 dark:data-[in-range=true]:text-[var(--color-neutral-200)] " +
45
45
  // Focus offset for dark mode
package/dist/components/core/CommandPalette/CommandPalette.theme.js CHANGED
@@ -18,7 +18,7 @@ const commandPaletteTheme = {
18
18
  commandItem: "flex items-center gap-3 px-4 py-2 rounded-[var(--radius-base)] cursor-pointer transition-colors " +
19
19
  "hover:bg-[var(--color-primary)] " +
20
20
  "data-[highlighted=true]:bg-[var(--color-primary)] data-[highlighted=true]:hover:bg-[var(--color-primary)] " +
21
- "data-[highlighted=true]:text-white " +
21
+ "data-[highlighted=true]:text-[var(--color-primary-contrast)] " +
22
22
  "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:bg-transparent " +
23
23
  // Dark mode - adjust hover state
24
24
  "dark:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-primary-600)] " +
package/dist/components/core/MenuItem/MenuItem.theme.js CHANGED
@@ -13,8 +13,8 @@ const menuItemTheme = {
13
13
  "dark:hover:bg-[var(--color-neutral-700)] " +
14
14
  "dark:data-[selected=true]:bg-[var(--color-neutral-600)]/50 dark:data-[selected=true]:text-[var(--color-text-primary)]",
15
15
  // Danger item styling (e.g., Delete actions)
16
- dangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] hover:text-white " +
17
- "dark:text-[var(--color-danger-400)] dark:hover:bg-[var(--color-danger-600)] dark:hover:text-white",
16
+ dangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] hover:text-[var(--color-danger-contrast)] " +
17
+ "dark:text-[var(--color-danger-400)] dark:hover:bg-[var(--color-danger-600)] dark:hover:text-[var(--color-danger-contrast)]",
18
18
  // Focus visible styling for keyboard navigation
19
19
  focusStyle: "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
20
20
  "dark:focus-visible:ring-[var(--color-primary-400)] dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
package/dist/components/core/OfflineIndicator/OfflineIndicator.theme.js CHANGED
@@ -13,7 +13,7 @@ const offlineIndicatorTheme = {
13
13
  toast: "px-3 py-2 rounded-[var(--radius-base)] shadow-real-lg",
14
14
  },
15
15
  offline: "bg-[var(--color-neutral-900)]/90 backdrop-blur-sm text-white",
16
- online: "bg-[var(--color-success)]/90 backdrop-blur-sm text-white",
16
+ online: "bg-[var(--color-success)]/90 backdrop-blur-sm text-[var(--color-success-contrast)]",
17
17
  icon: "size-4 flex-shrink-0",
18
18
  message: "text-xs font-medium",
19
19
  queueCount: "text-xs opacity-80 ml-1",
package/dist/components/core/Progress/Progress.theme.js CHANGED
@@ -11,7 +11,7 @@ const progressTheme = {
11
11
  // Label text styles
12
12
  labelStyle: "text-sm font-medium text-[var(--color-text-secondary)] tabular-nums min-w-[2.5rem] text-right",
13
13
  // Inside label styles (when label is positioned inside the bar)
14
- insideLabelStyle: "absolute inset-0 flex items-center justify-center text-xs font-medium text-white tabular-nums",
14
+ insideLabelStyle: "absolute inset-0 flex items-center justify-center text-xs font-medium text-[var(--color-primary-contrast)] tabular-nums",
15
15
  // Size variants for track height
16
16
  sizes: {
17
17
  sm: "h-1.5",
package/dist/components/data-display/Table/TableFilter.js CHANGED
@@ -206,7 +206,7 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
206
206
  return true;
207
207
  return f.value != null && f.value !== "";
208
208
  }).length;
209
- return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(FunnelIcon, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-white text-xs font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Content, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-xs uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-background-secondary)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-xs font-medium rounded transition-colors", filterLogic === "and"
209
+ return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(FunnelIcon, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] text-xs font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Content, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-xs uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-background-secondary)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-xs font-medium rounded transition-colors", filterLogic === "and"
210
210
  ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
211
211
  : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"), onClick: () => handleSetLogic("and"), children: "AND" }), jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-xs font-medium rounded transition-colors", filterLogic === "or"
212
212
  ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
package/dist/components/data-display/Timeline/Timeline.theme.js CHANGED
@@ -19,8 +19,8 @@ const timelineTheme = {
19
19
  markerStyle: "relative z-10 flex items-center justify-center shrink-0 rounded-full border-2 transition-colors duration-200",
20
20
  // Marker status-specific styles
21
21
  markerStatuses: {
22
- completed: "w-8 h-8 bg-[var(--color-success)] border-[var(--color-success)] text-white",
23
- active: "w-8 h-8 bg-[var(--color-primary)] border-[var(--color-primary)] text-white ring-4 ring-[var(--color-primary-100)]",
22
+ completed: "w-8 h-8 bg-[var(--color-success)] border-[var(--color-success)] text-[var(--color-success-contrast)]",
23
+ active: "w-8 h-8 bg-[var(--color-primary)] border-[var(--color-primary)] text-[var(--color-primary-contrast)] ring-4 ring-[var(--color-primary-100)]",
24
24
  pending: "w-8 h-8 bg-[var(--color-background)] border-[var(--color-border)]",
25
25
  },
26
26
  // Content area - vertical
package/dist/components/forms/FileUpload/FileUpload.js CHANGED
@@ -3,85 +3,7 @@ import React__default, { useMemo, useRef, useState, useCallback } from 'react';
3
3
  import { fileUploadTheme } from './FileUpload.theme.js';
4
4
  import { cn } from '../../../utils/cn.js';
5
5
  import { CloudArrowUpIcon, DocumentIcon, XMarkIcon } from '@heroicons/react/24/outline';
6
- import '../../core/Accordion/Accordion.js';
7
- import '../../core/AlertDialog/AlertDialog.js';
8
- import '../../core/AspectRatio/AspectRatio.js';
9
- import '../../core/Avatar/Avatar.js';
10
- import '../../core/AvatarGroup/AvatarGroup.js';
11
- import '../../core/Badge/Badge.js';
12
- import '../../core/Breadcrumbs/Breadcrumbs.js';
13
- import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
14
6
  import { Button } from '../../core/Button/Button.js';
15
- import '../../core/ButtonGroup/ButtonGroup.js';
16
- import '../../core/ButtonGroup/ButtonGroupSeparator.js';
17
- import '../../core/ButtonGroup/ButtonGroupText.js';
18
- import '../../core/Calendar/Calendar.js';
19
- import '../../core/Calendar/CalendarMini/CalendarMini.js';
20
- import '../../core/Card/Card.js';
21
- import '../../core/CardStack/CardStack.js';
22
- import '../../core/Carousel/Carousel.js';
23
- import '../../core/CommandPalette/CommandPalette.js';
24
- import '../../core/Separator/Separator.js';
25
- import '../../core/Drawer/Drawer.js';
26
- import '../../core/Dropdown/Dropdown.js';
27
- import '../../core/Dropdown/DropdownTrigger.js';
28
- import '../../core/Dropdown/DropdownMenu.js';
29
- import '../../core/Dropdown/DropdownItem.js';
30
- import '../../core/Dropdown/DropdownSection.js';
31
- import '../../core/Dropdown/DropdownSeparator.js';
32
- import '../../core/Dropdown/Dropdown.theme.js';
33
- import '../../core/Kbd/Kbd.js';
34
- import '../../core/MenuItem/MenuItem.js';
35
- import '../../core/Link/Link.js';
36
- import '../../core/Loader/Loader.js';
37
- import '../../core/Modal/Modal.js';
38
- import '../../core/ModalStack/ModalStack.js';
39
- import '../../core/PageHeading/PageHeading.js';
40
- import '../../core/Pagination/Pagination.js';
41
- import '../../core/Popover/Popover.js';
42
- import '../../core/Popover/PopoverContext.js';
43
- import '../../core/Progress/Progress.js';
44
- import '../../core/Rating/Rating.js';
45
- import '../../core/ScrollArea/ScrollArea.js';
46
- import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
47
- import '../../core/Segmented/Segmented.js';
48
- import '../../core/Skeleton/Skeleton.js';
49
- import '../../core/SlidingNumber/SlidingNumber.js';
50
- import '../../core/Tabs/Tabs.js';
51
- import '../../core/Tabs/TabsList.js';
52
- import '../../core/Tabs/TabsTrigger.js';
53
- import '../../core/Tabs/TabsContent.js';
54
- import '../../core/Tabs/TabsContext.js';
55
- import '../../core/Tooltip/Tooltip.js';
56
- import '../../core/Tooltip/Tooltip.animations.js';
57
- import '../../core/Tree/Tree.js';
58
- import '../../core/Tag/Tag.js';
59
- import '../../core/Alert/Alert.js';
60
- import '../../core/Toast/Toast.js';
61
- import '../../core/Toast/ToastProvider.js';
62
- import '@heroicons/react/24/solid';
63
- import '../../core/Spinner/Spinner.js';
64
- import '../../core/Message/Message.js';
65
- import '../../core/Message/TypeWriter.js';
66
- import '../../core/Empty/Empty.js';
67
- import '../../core/Masonry/Masonry.js';
68
- import '../../core/DragDrop/DragDrop.js';
69
- import '../../core/Sortable/Sortable.js';
70
- import '../../core/NavItem/NavItem.js';
71
- import '../../core/Sidebar/Sidebar.js';
72
- import '../../core/Sidebar/SidebarHeader.js';
73
- import '../../core/Sidebar/SidebarContent.js';
74
- import '../../core/Sidebar/SidebarFooter.js';
75
- import '../../core/Sidebar/SidebarNav.js';
76
- import '../../core/Sidebar/SidebarNavGroup.js';
77
- import 'motion/react';
78
- import '../../core/Sidebar/SidebarToggle.js';
79
- import '../../core/Sidebar/SidebarContext.js';
80
- import '../../core/OfflineIndicator/OfflineIndicator.js';
81
- import '../../core/ContextMenu/ContextMenu.js';
82
- import '../../core/ContextMenu/ContextMenu.theme.js';
83
- import '../../core/Pill/Pill.js';
84
- import '../../core/SocialIcon/SocialIcon.js';
85
7
 
86
8
  /**
87
9
  * FileUpload component - Drag-and-drop file uploader with previews
package/dist/components/forms/TimePicker/TimePickerContent.js CHANGED
@@ -6,85 +6,8 @@ import { cn } from '../../../utils/cn.js';
6
6
  import { TimePickerContext } from './TimePicker.js';
7
7
  import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
8
8
  import { createDropdownAnimations } from '../Select/Select.animations.js';
9
- import '../../core/Accordion/Accordion.js';
10
- import '../../core/AlertDialog/AlertDialog.js';
11
- import '../../core/AspectRatio/AspectRatio.js';
12
- import '../../core/Avatar/Avatar.js';
13
- import '../../core/AvatarGroup/AvatarGroup.js';
14
- import '../../core/Badge/Badge.js';
15
- import '../../core/Breadcrumbs/Breadcrumbs.js';
16
- import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
17
- import { Button } from '../../core/Button/Button.js';
18
- import '../../core/ButtonGroup/ButtonGroup.js';
19
- import '../../core/ButtonGroup/ButtonGroupSeparator.js';
20
- import '../../core/ButtonGroup/ButtonGroupText.js';
21
- import '../../core/Calendar/Calendar.js';
22
- import '../../core/Calendar/CalendarMini/CalendarMini.js';
23
- import '../../core/Card/Card.js';
24
- import '../../core/CardStack/CardStack.js';
25
- import '../../core/Carousel/Carousel.js';
26
- import '../../core/CommandPalette/CommandPalette.js';
27
- import '../../core/Separator/Separator.js';
28
- import '../../core/Drawer/Drawer.js';
29
- import '../../core/Dropdown/Dropdown.js';
30
- import '../../core/Dropdown/DropdownTrigger.js';
31
- import '../../core/Dropdown/DropdownMenu.js';
32
- import '../../core/Dropdown/DropdownItem.js';
33
- import '../../core/Dropdown/DropdownSection.js';
34
- import '../../core/Dropdown/DropdownSeparator.js';
35
- import '../../core/Dropdown/Dropdown.theme.js';
36
- import '../../core/Kbd/Kbd.js';
37
- import '../../core/MenuItem/MenuItem.js';
38
- import '../../core/Link/Link.js';
39
- import '../../core/Loader/Loader.js';
40
- import '../../core/Modal/Modal.js';
41
- import '../../core/ModalStack/ModalStack.js';
42
- import '../../core/PageHeading/PageHeading.js';
43
- import '../../core/Pagination/Pagination.js';
44
- import '../../core/Popover/Popover.js';
45
- import '../../core/Popover/PopoverContext.js';
46
- import '../../core/Progress/Progress.js';
47
- import '../../core/Rating/Rating.js';
48
- import '../../core/ScrollArea/ScrollArea.js';
49
- import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
50
- import '../../core/Segmented/Segmented.js';
51
- import '../../core/Skeleton/Skeleton.js';
52
- import '../../core/SlidingNumber/SlidingNumber.js';
53
- import '../../core/Tabs/Tabs.js';
54
- import '../../core/Tabs/TabsList.js';
55
- import '../../core/Tabs/TabsTrigger.js';
56
- import '../../core/Tabs/TabsContent.js';
57
- import '../../core/Tabs/TabsContext.js';
58
- import '../../core/Tooltip/Tooltip.js';
59
- import '../../core/Tooltip/Tooltip.animations.js';
60
- import '../../core/Tree/Tree.js';
61
- import '../../core/Tag/Tag.js';
62
- import '../../core/Alert/Alert.js';
63
- import '../../core/Toast/Toast.js';
64
- import '../../core/Toast/ToastProvider.js';
65
- import '@heroicons/react/24/solid';
66
- import '../../core/Spinner/Spinner.js';
67
- import '../../core/Message/Message.js';
68
- import '../../core/Message/TypeWriter.js';
69
- import '../../core/Empty/Empty.js';
70
- import '../../core/Masonry/Masonry.js';
71
- import '../../core/DragDrop/DragDrop.js';
72
- import '../../core/Sortable/Sortable.js';
73
- import '../../core/NavItem/NavItem.js';
74
- import '../../core/Sidebar/Sidebar.js';
75
- import '../../core/Sidebar/SidebarHeader.js';
76
- import '../../core/Sidebar/SidebarContent.js';
77
- import '../../core/Sidebar/SidebarFooter.js';
78
- import '../../core/Sidebar/SidebarNav.js';
79
- import '../../core/Sidebar/SidebarNavGroup.js';
80
- import '../../core/Sidebar/SidebarToggle.js';
81
- import '../../core/Sidebar/SidebarContext.js';
82
- import '../../core/OfflineIndicator/OfflineIndicator.js';
83
- import '../../core/ContextMenu/ContextMenu.js';
84
- import '../../core/ContextMenu/ContextMenu.theme.js';
85
- import '../../core/Pill/Pill.js';
86
- import '../../core/SocialIcon/SocialIcon.js';
87
9
  import { useIsClient } from '../../../hooks/useIsClient.js';
10
+ import { Button } from '../../core/Button/Button.js';
88
11
 
89
12
  /**
90
13
  * Hook to detect dark mode state from document
package/dist/components/forms/index.js CHANGED
@@ -24,84 +24,6 @@ import 'clsx';
24
24
  import 'tailwind-merge';
25
25
  import 'motion/react';
26
26
  import 'react-dom';
27
- import '../core/Accordion/Accordion.js';
28
- import '../core/AlertDialog/AlertDialog.js';
29
- import '../core/AspectRatio/AspectRatio.js';
30
- import '../core/Avatar/Avatar.js';
31
- import '../core/AvatarGroup/AvatarGroup.js';
32
- import '../core/Badge/Badge.js';
33
- import '../core/Breadcrumbs/Breadcrumbs.js';
34
- import '../core/Breadcrumbs/Breadcrumbs.theme.js';
35
- import '../core/Button/Button.js';
36
- import '../core/ButtonGroup/ButtonGroup.js';
37
- import '../core/ButtonGroup/ButtonGroupSeparator.js';
38
- import '../core/ButtonGroup/ButtonGroupText.js';
39
- import '../core/Calendar/Calendar.js';
40
- import '../core/Calendar/CalendarMini/CalendarMini.js';
41
- import '../core/Card/Card.js';
42
- import '../core/CardStack/CardStack.js';
43
- import '../core/Carousel/Carousel.js';
44
- import '../core/CommandPalette/CommandPalette.js';
45
- import '../core/Separator/Separator.js';
46
- import '../core/Drawer/Drawer.js';
47
- import '../core/Dropdown/Dropdown.js';
48
- import '../core/Dropdown/DropdownTrigger.js';
49
- import '../core/Dropdown/DropdownMenu.js';
50
- import '../core/Dropdown/DropdownItem.js';
51
- import '../core/Dropdown/DropdownSection.js';
52
- import '../core/Dropdown/DropdownSeparator.js';
53
- import '../core/Dropdown/Dropdown.theme.js';
54
- import '../core/Kbd/Kbd.js';
55
- import '../core/MenuItem/MenuItem.js';
56
- import '../core/Link/Link.js';
57
- import '../core/Loader/Loader.js';
58
- import '../core/Modal/Modal.js';
59
- import '../core/ModalStack/ModalStack.js';
60
- import '../core/PageHeading/PageHeading.js';
61
- import '../core/Pagination/Pagination.js';
62
- import '../core/Popover/Popover.js';
63
- import '../core/Popover/PopoverContext.js';
64
- import '../core/Progress/Progress.js';
65
- import '../core/Rating/Rating.js';
66
- import '../core/ScrollArea/ScrollArea.js';
67
- import '../core/ScrollArea/smooth/SmoothScrollEngine.js';
68
- import '../core/Segmented/Segmented.js';
69
- import '../core/Skeleton/Skeleton.js';
70
- import '../core/SlidingNumber/SlidingNumber.js';
71
- import '../core/Tabs/Tabs.js';
72
- import '../core/Tabs/TabsList.js';
73
- import '../core/Tabs/TabsTrigger.js';
74
- import '../core/Tabs/TabsContent.js';
75
- import '../core/Tabs/TabsContext.js';
76
- import '../core/Tooltip/Tooltip.js';
77
- import '../core/Tooltip/Tooltip.animations.js';
78
- import '../core/Tree/Tree.js';
79
- import '../core/Tag/Tag.js';
80
- import '../core/Alert/Alert.js';
81
- import '../core/Toast/Toast.js';
82
- import '../core/Toast/ToastProvider.js';
83
- import '@heroicons/react/24/solid';
84
- import '../core/Spinner/Spinner.js';
85
- import '../core/Message/Message.js';
86
- import '../core/Message/TypeWriter.js';
87
- import '../core/Empty/Empty.js';
88
- import '../core/Masonry/Masonry.js';
89
- import '../core/DragDrop/DragDrop.js';
90
- import '../core/Sortable/Sortable.js';
91
- import '../core/NavItem/NavItem.js';
92
- import '../core/Sidebar/Sidebar.js';
93
- import '../core/Sidebar/SidebarHeader.js';
94
- import '../core/Sidebar/SidebarContent.js';
95
- import '../core/Sidebar/SidebarFooter.js';
96
- import '../core/Sidebar/SidebarNav.js';
97
- import '../core/Sidebar/SidebarNavGroup.js';
98
- import '../core/Sidebar/SidebarToggle.js';
99
- import '../core/Sidebar/SidebarContext.js';
100
- import '../core/OfflineIndicator/OfflineIndicator.js';
101
- import '../core/ContextMenu/ContextMenu.js';
102
- import '../core/ContextMenu/ContextMenu.theme.js';
103
- import '../core/Pill/Pill.js';
104
- import '../core/SocialIcon/SocialIcon.js';
105
27
  import './TimePicker/WheelColumn.js';
106
28
  export { timePickerTheme } from './TimePicker/TimePicker.theme.js';
107
29
  export { Slider } from './Slider/Slider.js';