@flikk/ui 1.0.0-beta.19 → 1.0.0-beta.20

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 (38) hide show
  1. package/dist/bg/bg/1.jpg +0 -0
  2. package/dist/bg/bg/10.jpg +0 -0
  3. package/dist/bg/bg/11.jpg +0 -0
  4. package/dist/bg/bg/14.jpg +0 -0
  5. package/dist/bg/bg/15.jpg +0 -0
  6. package/dist/bg/bg/16.jpg +0 -0
  7. package/dist/bg/bg/17.jpg +0 -0
  8. package/dist/bg/bg/18.jpg +0 -0
  9. package/dist/bg/bg/19.jpg +0 -0
  10. package/dist/bg/bg/2.jpg +0 -0
  11. package/dist/bg/bg/20.jpg +0 -0
  12. package/dist/bg/bg/21.jpg +0 -0
  13. package/dist/bg/bg/22.jpg +0 -0
  14. package/dist/bg/bg/23.jpg +0 -0
  15. package/dist/bg/bg/24.jpg +0 -0
  16. package/dist/bg/bg/3.jpg +0 -0
  17. package/dist/bg/bg/4.jpg +0 -0
  18. package/dist/bg/bg/5.jpg +0 -0
  19. package/dist/bg/bg/6.jpg +0 -0
  20. package/dist/bg/bg/7.jpg +0 -0
  21. package/dist/bg/bg/8.jpg +0 -0
  22. package/dist/bg/bg/9.jpg +0 -0
  23. package/dist/components/ai/PromptInput/PromptInput.js +7 -134
  24. package/dist/components/ai/PromptInput/VoiceRecorder.js +0 -84
  25. package/dist/components/core/Button/Button.js +1 -0
  26. package/dist/components/core/Button/Button.theme.d.ts +1 -0
  27. package/dist/components/core/Button/Button.theme.js +28 -0
  28. package/dist/components/core/Button/Button.types.d.ts +1 -1
  29. package/dist/components/core/Segmented/Segmented.js +7 -8
  30. package/dist/components/core/Segmented/Segmented.theme.js +3 -3
  31. package/dist/components/core/Tooltip/Tooltip.theme.js +2 -2
  32. package/dist/components/forms/FileUpload/FileUpload.js +0 -85
  33. package/dist/components/forms/TimePicker/TimePickerContent.js +1 -86
  34. package/dist/components/forms/index.js +0 -85
  35. package/dist/components/layout/FormLayout/FormLayout.js +1 -87
  36. package/dist/index.js +215 -221
  37. package/dist/styles.css +1 -1
  38. package/package.json +1 -1
package/dist/bg/bg/1.jpg ADDED
Binary file
package/dist/bg/bg/10.jpg ADDED
Binary file
package/dist/bg/bg/11.jpg ADDED
Binary file
package/dist/bg/bg/14.jpg ADDED
Binary file
package/dist/bg/bg/15.jpg ADDED
Binary file
package/dist/bg/bg/16.jpg ADDED
Binary file
package/dist/bg/bg/17.jpg ADDED
Binary file
package/dist/bg/bg/18.jpg ADDED
Binary file
package/dist/bg/bg/19.jpg ADDED
Binary file
package/dist/bg/bg/2.jpg ADDED
Binary file
package/dist/bg/bg/20.jpg ADDED
Binary file
package/dist/bg/bg/21.jpg ADDED
Binary file
package/dist/bg/bg/22.jpg ADDED
Binary file
package/dist/bg/bg/23.jpg ADDED
Binary file
package/dist/bg/bg/24.jpg ADDED
Binary file
package/dist/bg/bg/3.jpg ADDED
Binary file
package/dist/bg/bg/4.jpg ADDED
Binary file
package/dist/bg/bg/5.jpg ADDED
Binary file
package/dist/bg/bg/6.jpg ADDED
Binary file
package/dist/bg/bg/7.jpg ADDED
Binary file
package/dist/bg/bg/8.jpg ADDED
Binary file
package/dist/bg/bg/9.jpg ADDED
Binary file
package/dist/components/ai/PromptInput/PromptInput.js CHANGED
@@ -1,48 +1,14 @@
1
1
  import { jsxs, jsx, Fragment } 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, MicrophoneIcon, PaperClipIcon, LinkIcon, DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
6
+ import { StopIcon } from '@heroicons/react/24/solid';
7
+ import { promptInputTheme } from './PromptInput.theme.js';
8
+ import { VoiceRecorder } from './VoiceRecorder.js';
9
+ import { dropzoneContainerVariants, dropzoneChildVariants, dropzoneActionIconVariants, textareaSwapVariants, iconSwapVariants } from './PromptInput.animations.js';
8
10
  import { Textarea } from '../../forms/Textarea/Textarea.js';
9
11
  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/DateRangePicker/DateRangePicker.js';
17
- import '../../forms/DateRangePicker/DateRangePicker.theme.js';
18
- import '../../forms/FileUpload/FileUpload.js';
19
- import '../../forms/FileUpload/FileUploadProgress.js';
20
- import '../../forms/TimePicker/TimePicker.js';
21
- import { CloudArrowUpIcon, MicrophoneIcon, PaperClipIcon, LinkIcon, DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
22
- import { cn } from '../../../utils/cn.js';
23
- import 'react-dom';
24
- import '../../core/Accordion/Accordion.js';
25
- import '../../core/AlertDialog/AlertDialog.js';
26
- import '../../core/AspectRatio/AspectRatio.js';
27
- import '../../core/Avatar/Avatar.js';
28
- import '../../core/AvatarGroup/AvatarGroup.js';
29
- import '../../core/Badge/Badge.js';
30
- import '../../core/Breadcrumbs/Breadcrumbs.js';
31
- import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
32
- import { Button } from '../../core/Button/Button.js';
33
- import '../../core/ButtonGroup/ButtonGroup.js';
34
- import '../../core/ButtonGroup/ButtonGroupSeparator.js';
35
- import '../../core/ButtonGroup/ButtonGroupText.js';
36
- import '../../core/Calendar/Calendar.js';
37
- import '../../core/Calendar/CalendarMini/CalendarMini.js';
38
- import '../../core/Card/Card.js';
39
- import '../../core/CardStack/CardStack.js';
40
- import '../../core/Carousel/Carousel.js';
41
- import '../../core/Carousel/CarouselBody.js';
42
- import '../../core/CommandPalette/CommandPalette.js';
43
- import '../../core/Separator/Separator.js';
44
- import '../../core/Drawer/Drawer.js';
45
- import '../../core/Drawer/DrawerBody.js';
46
12
  import { Dropdown } from '../../core/Dropdown/Dropdown.js';
47
13
  import '../../core/Dropdown/DropdownTrigger.js';
48
14
  import '../../core/Dropdown/DropdownMenu.js';
@@ -50,100 +16,7 @@ import '../../core/Dropdown/DropdownItem.js';
50
16
  import '../../core/Dropdown/DropdownSection.js';
51
17
  import '../../core/Dropdown/DropdownSeparator.js';
52
18
  import '../../core/Dropdown/Dropdown.theme.js';
53
- import '../../core/Kbd/Kbd.js';
54
- import '../../core/MenuItem/MenuItem.js';
55
- import '../../core/Link/Link.js';
56
- import '../../core/Modal/Modal.js';
57
- import '../../core/ModalStack/ModalStack.js';
58
- import '../../core/PageHeading/PageHeading.js';
59
- import '../../core/Pagination/Pagination.js';
60
- import '../../core/Popover/Popover.js';
61
- import '../../core/Popover/PopoverContext.js';
62
- import '../../core/Popover/PopoverBody.js';
63
- import '../../core/Progress/Progress.js';
64
- import '../../core/Rating/Rating.js';
65
- import '../../core/ScrollArea/ScrollArea.js';
66
- import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
67
- import '../../core/Segmented/Segmented.js';
68
- import '../../core/Skeleton/Skeleton.js';
69
- import '../../core/SlidingNumber/SlidingNumber.js';
70
- import '../../core/Tabs/Tabs.js';
71
- import '../../core/Tabs/TabsList.js';
72
- import '../../core/Tabs/TabsTrigger.js';
73
- import '../../core/Tabs/TabsBody.js';
74
- import '../../core/Tabs/TabsContext.js';
75
- import '../../core/Tooltip/Tooltip.js';
76
- import '../../core/Tooltip/Tooltip.animations.js';
77
- import '../../core/Tree/Tree.js';
78
- import '../../core/Tag/Tag.js';
79
- import '../../core/Alert/Alert.js';
80
- import '../../core/Toast/Toast.js';
81
- import '../../core/Toast/ToastProvider.js';
82
- import { StopIcon } from '@heroicons/react/24/solid';
83
- import '../../core/Spinner/Spinner.js';
84
- import '../../core/Message/Message.js';
85
- import '../../core/Message/TypeWriter.js';
86
- import '../../core/Message/MessageBody.js';
87
- import '@heroicons/react/16/solid';
88
- import '../../core/Empty/Empty.js';
89
- import '../../core/Masonry/Masonry.js';
90
- import '../../core/DragDrop/DragDrop.js';
91
- import '../../core/Sortable/Sortable.js';
92
- import '../../core/NavItem/NavItem.js';
93
- import '../../core/Sidebar/Sidebar.js';
94
- import '../../core/Sidebar/SidebarHeader.js';
95
- import '../../core/Sidebar/SidebarContent.js';
96
- import '../../core/Sidebar/SidebarFooter.js';
97
- import '../../core/Sidebar/SidebarNav.js';
98
- import '../../core/Sidebar/SidebarNavGroup.js';
99
- import '../../core/Sidebar/SidebarToggle.js';
100
- import '../../core/Sidebar/SidebarMobileTrigger.js';
101
- import '../../core/Sidebar/SidebarUserProfile.js';
102
- import '../../core/Sidebar/SidebarContext.js';
103
- import '../../core/OfflineIndicator/OfflineIndicator.js';
104
- import '../../core/ContextMenu/ContextMenu.js';
105
- import '../../core/ContextMenu/ContextMenu.theme.js';
106
- import '../../core/Pill/Pill.js';
107
- import '../../core/SocialIcon/SocialIcon.js';
108
- import '../../core/FileTypeIcon/FileTypeIcon.js';
109
- import '../../forms/TimePicker/WheelColumn.js';
110
- import '../../forms/TimePicker/TimePicker.theme.js';
111
- import '../../forms/Slider/Slider.js';
112
- import '../../forms/Slider/Slider.theme.js';
113
- import '../../forms/Signature/Signature.js';
114
- import '../../forms/Signature/Signature.theme.js';
115
- import '../../forms/RichTextEditor/RichTextEditor.js';
116
- import '../../forms/RichTextEditor/RichTextEditor.theme.js';
117
- import '../../forms/InputOTP/InputOTP.js';
118
- import '../../forms/InputOTP/InputOTP.theme.js';
119
- import '../../forms/InputCreditCard/InputCreditCard.js';
120
- import '../../forms/InputCreditCard/InputCreditCard.theme.js';
121
- import '../../forms/InputAddress/InputAddress.js';
122
- import '../../forms/InputAddress/InputAddress.theme.js';
123
- import '../../forms/InputDate/InputDate.js';
124
- import '../../forms/InputCounter/InputCounter.js';
125
- import '../../forms/InputTag/InputTag.js';
126
- import '../../forms/InputTag/InputTag.theme.js';
127
- import '../../forms/Combobox/Combobox.js';
128
- import '../../forms/Combobox/Combobox.theme.js';
129
- import '../../forms/ColorPicker/ColorPicker.js';
130
- import '../../forms/ColorPicker/ColorPickerTrigger.js';
131
- import '../../forms/ColorPicker/ColorPickerBody.js';
132
- import '../../forms/ColorPicker/ColorPicker2DCanvas.js';
133
- import '../../forms/ColorPicker/ColorPickerSwatch.js';
134
- import '../../forms/ColorPicker/ColorPickerSliders.js';
135
- import '../../forms/ColorPicker/ColorPickerInput.js';
136
- import '../../forms/ColorPicker/ColorPickerFormatSelector.js';
137
- import '../../forms/ColorPicker/ColorPickerEyeDropper.js';
138
- import '../../forms/ColorPicker/ColorPickerPresets.js';
139
- import '../../forms/SelectableCard/SelectableCard.js';
140
- import '../../forms/Mention/Mention.js';
141
- import '../../forms/Mention/Mention.theme.js';
142
- import '../../forms/CronInput/CronInput.js';
143
- import '../../forms/CronInput/CronInput.theme.js';
144
- import { promptInputTheme } from './PromptInput.theme.js';
145
- import { VoiceRecorder } from './VoiceRecorder.js';
146
- import { dropzoneContainerVariants, dropzoneChildVariants, dropzoneActionIconVariants, textareaSwapVariants, iconSwapVariants } from './PromptInput.animations.js';
19
+ import { Button } from '../../core/Button/Button.js';
147
20
 
148
21
  /**
149
22
  * Default model options for the model selector
package/dist/components/ai/PromptInput/VoiceRecorder.js CHANGED
@@ -3,91 +3,7 @@ import { useState, useRef, useCallback, useEffect } from 'react';
3
3
  import { motion } from 'motion/react';
4
4
  import { PlayIcon, PauseIcon, CheckIcon } from '@heroicons/react/24/outline';
5
5
  import { cn } from '../../../utils/cn.js';
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/Carousel/CarouselBody.js';
24
- import '../../core/CommandPalette/CommandPalette.js';
25
- import '../../core/Separator/Separator.js';
26
- import '../../core/Drawer/Drawer.js';
27
- import '../../core/Drawer/DrawerBody.js';
28
- import '../../core/Dropdown/Dropdown.js';
29
- import '../../core/Dropdown/DropdownTrigger.js';
30
- import '../../core/Dropdown/DropdownMenu.js';
31
- import '../../core/Dropdown/DropdownItem.js';
32
- import '../../core/Dropdown/DropdownSection.js';
33
- import '../../core/Dropdown/DropdownSeparator.js';
34
- import '../../core/Dropdown/Dropdown.theme.js';
35
- import '../../core/Kbd/Kbd.js';
36
- import '../../core/MenuItem/MenuItem.js';
37
- import '../../core/Link/Link.js';
38
- import '../../core/Modal/Modal.js';
39
- import '../../core/ModalStack/ModalStack.js';
40
- import '../../core/PageHeading/PageHeading.js';
41
- import '../../core/Pagination/Pagination.js';
42
- import '../../core/Popover/Popover.js';
43
- import '../../core/Popover/PopoverContext.js';
44
- import '../../core/Popover/PopoverBody.js';
45
- import '../../core/Progress/Progress.js';
46
- import '../../core/Rating/Rating.js';
47
- import '../../core/ScrollArea/ScrollArea.js';
48
- import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
49
- import '../../core/Segmented/Segmented.js';
50
- import '../../core/Skeleton/Skeleton.js';
51
- import '../../core/SlidingNumber/SlidingNumber.js';
52
- import '../../core/Tabs/Tabs.js';
53
- import '../../core/Tabs/TabsList.js';
54
- import '../../core/Tabs/TabsTrigger.js';
55
- import '../../core/Tabs/TabsBody.js';
56
- import '../../core/Tabs/TabsContext.js';
57
- import '../../core/Tooltip/Tooltip.js';
58
- import '../../core/Tooltip/Tooltip.animations.js';
59
- import '../../core/Tree/Tree.js';
60
- import '../../core/Tag/Tag.js';
61
- import '../../core/Alert/Alert.js';
62
- import '../../core/Toast/Toast.js';
63
- import '../../core/Toast/ToastProvider.js';
64
- import '@heroicons/react/24/solid';
65
- import '../../core/Spinner/Spinner.js';
66
- import '../../core/Message/Message.js';
67
- import '../../core/Message/TypeWriter.js';
68
- import '../../core/Message/MessageBody.js';
69
- import '@heroicons/react/16/solid';
70
- import '../../core/Empty/Empty.js';
71
- import '../../core/Masonry/Masonry.js';
72
- import '../../core/DragDrop/DragDrop.js';
73
- import '../../core/Sortable/Sortable.js';
74
- import '../../core/NavItem/NavItem.js';
75
- import '../../core/Sidebar/Sidebar.js';
76
- import '../../core/Sidebar/SidebarHeader.js';
77
- import '../../core/Sidebar/SidebarContent.js';
78
- import '../../core/Sidebar/SidebarFooter.js';
79
- import '../../core/Sidebar/SidebarNav.js';
80
- import '../../core/Sidebar/SidebarNavGroup.js';
81
- import '../../core/Sidebar/SidebarToggle.js';
82
- import '../../core/Sidebar/SidebarMobileTrigger.js';
83
- import '../../core/Sidebar/SidebarUserProfile.js';
84
- import '../../core/Sidebar/SidebarContext.js';
85
- import '../../core/OfflineIndicator/OfflineIndicator.js';
86
- import '../../core/ContextMenu/ContextMenu.js';
87
- import '../../core/ContextMenu/ContextMenu.theme.js';
88
- import '../../core/Pill/Pill.js';
89
- import '../../core/SocialIcon/SocialIcon.js';
90
- import '../../core/FileTypeIcon/FileTypeIcon.js';
91
7
 
92
8
  /**
93
9
  * Format seconds into MM:SS display
package/dist/components/core/Button/Button.js CHANGED
@@ -106,6 +106,7 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
106
106
  }, [buttonRef]);
107
107
  return (jsxs(motion.button, { type: "button", ...restProps, ...animationProps, ref: mergedRef, className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-invalid": isError || undefined, "aria-label": ariaLabel, onClick: handleClick, children: [showReflection &&
108
108
  resolvedVariant !== "link" &&
109
+ resolvedVariant !== "ghost" &&
109
110
  resolvedVariant !== "outline" && (jsx("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 border-t-[0.5px] border-white/40 rounded-t-[calc(var(--button-radius)-1.25px)] opacity-60" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsx("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: children }), enableRipple &&
110
111
  ripples.map((ripple) => {
111
112
  const animation = getRippleAnimation(effect, ripple, rippleScale);
package/dist/components/core/Button/Button.theme.d.ts CHANGED
@@ -10,6 +10,7 @@ export interface ButtonTheme {
10
10
  filled: Record<ButtonColor, string>;
11
11
  outline: Record<ButtonColor, string>;
12
12
  soft: Record<ButtonColor, string>;
13
+ ghost: Record<ButtonColor, string>;
13
14
  link: Record<ButtonColor, string>;
14
15
  };
15
16
  sizes: Record<ButtonSize, {
package/dist/components/core/Button/Button.theme.js CHANGED
@@ -9,6 +9,7 @@ const buttonTheme = {
9
9
  filled: "border hover:brightness-[0.9] dark:hover:brightness-[1.15]",
10
10
  outline: "bg-transparent border",
11
11
  soft: "border-transparent",
12
+ ghost: "bg-transparent border-transparent",
12
13
  link: "bg-transparent border-transparent",
13
14
  },
14
15
  // Color styles organized BY VARIANT for reliable dark: prefixes
@@ -99,6 +100,33 @@ const buttonTheme = {
99
100
  "dark:text-[var(--color-danger-300)] dark:bg-[var(--color-danger-900)]/30 " +
100
101
  "dark:hover:bg-[var(--color-danger-900)]/50",
101
102
  },
103
+ // Ghost variant - transparent bg, subtle hover, full padding
104
+ ghost: {
105
+ neutral: "text-[var(--color-text-primary)] " +
106
+ "hover:bg-[var(--color-neutral-100)] " +
107
+ "focus-visible:outline-[var(--color-text-secondary)] " +
108
+ "dark:text-[var(--color-text-primary)] dark:hover:bg-[var(--color-neutral-800)]",
109
+ primary: "text-[var(--color-primary-600)] " +
110
+ "hover:bg-[var(--color-primary-50)] " +
111
+ "focus-visible:outline-[var(--color-primary-600)] " +
112
+ "dark:text-[var(--color-primary-300)] dark:hover:bg-[var(--color-primary-900)]/30",
113
+ secondary: "text-[var(--color-secondary-600)] " +
114
+ "hover:bg-[var(--color-secondary-50)] " +
115
+ "focus-visible:outline-[var(--color-secondary-600)] " +
116
+ "dark:text-[var(--color-secondary-300)] dark:hover:bg-[var(--color-secondary-900)]/30",
117
+ success: "text-[var(--color-success-600)] " +
118
+ "hover:bg-[var(--color-success-50)] " +
119
+ "focus-visible:outline-[var(--color-success-600)] " +
120
+ "dark:text-[var(--color-success-300)] dark:hover:bg-[var(--color-success-900)]/30",
121
+ warning: "text-[var(--color-warning-600)] " +
122
+ "hover:bg-[var(--color-warning-50)] " +
123
+ "focus-visible:outline-[var(--color-warning-600)] " +
124
+ "dark:text-[var(--color-warning-300)] dark:hover:bg-[var(--color-warning-900)]/30",
125
+ danger: "text-[var(--color-danger-600)] " +
126
+ "hover:bg-[var(--color-danger-50)] " +
127
+ "focus-visible:outline-[var(--color-danger-600)] " +
128
+ "dark:text-[var(--color-danger-300)] dark:hover:bg-[var(--color-danger-900)]/30",
129
+ },
102
130
  // Link variant - text-only with per-color styles
103
131
  link: {
104
132
  neutral: "text-[var(--color-text-secondary)] underline-offset-4 hover:underline hover:text-[var(--color-text-primary)] " +
package/dist/components/core/Button/Button.types.d.ts CHANGED
@@ -51,6 +51,6 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
51
51
  darkMode?: boolean;
52
52
  }
53
53
  export type ButtonColor = SemanticColor;
54
- export type ButtonVariant = "filled" | "outline" | "soft" | "link";
54
+ export type ButtonVariant = "filled" | "outline" | "soft" | "ghost" | "link";
55
55
  export type ButtonSize = "sm" | "md" | "lg";
56
56
  export type ButtonState = "default" | "disabled" | "error" | "loading";
package/dist/components/core/Segmented/Segmented.js CHANGED
@@ -5,7 +5,6 @@ import { debounce } from '../../../utils/debounce.js';
5
5
  import { segmentedTheme } from './Segmented.theme.js';
6
6
  import { SegmentedContext } from './SegmentedContext.js';
7
7
  import { SegmentedItem } from './SegmentedItem.js';
8
- import { GlassEffect } from '../../effects/GlassEffect/GlassEffect.js';
9
8
 
10
9
  /**
11
10
  * Segmented component for selecting one option from a set of segments
@@ -25,7 +24,8 @@ const SegmentedComponent = React__default.forwardRef(({ value, onChange, size =
25
24
  setActiveStyle({
26
25
  width: buttonRect.width,
27
26
  height: buttonRect.height,
28
- transform: `translateX(${buttonRect.left - containerRect.left - 2}px)`,
27
+ top: buttonRect.top - containerRect.top,
28
+ transform: `translateX(${buttonRect.left - containerRect.left}px)`,
29
29
  });
30
30
  }
31
31
  };
@@ -35,8 +35,8 @@ const SegmentedComponent = React__default.forwardRef(({ value, onChange, size =
35
35
  // Debounced resize handler for better performance
36
36
  const debouncedUpdateActiveStyle = useMemo(() => debounce(updateActiveStyle, 100), [updateActiveStyle]);
37
37
  useEffect(() => {
38
- window.addEventListener('resize', debouncedUpdateActiveStyle);
39
- return () => window.removeEventListener('resize', debouncedUpdateActiveStyle);
38
+ window.addEventListener("resize", debouncedUpdateActiveStyle);
39
+ return () => window.removeEventListener("resize", debouncedUpdateActiveStyle);
40
40
  }, [debouncedUpdateActiveStyle]);
41
41
  const contextValue = {
42
42
  selectedValue: value,
@@ -46,15 +46,14 @@ const SegmentedComponent = React__default.forwardRef(({ value, onChange, size =
46
46
  };
47
47
  return (jsx(SegmentedContext.Provider, { value: contextValue, children: jsxs("div", { ref: (node) => {
48
48
  containerRef.current = node;
49
- if (typeof ref === 'function') {
49
+ if (typeof ref === "function") {
50
50
  ref(node);
51
51
  }
52
52
  else if (ref) {
53
53
  ref.current = node;
54
54
  }
55
- }, role: "tablist", "aria-orientation": "horizontal", className: cn((theme === null || theme === void 0 ? void 0 : theme.baseStyle) || segmentedTheme.baseStyle, ((_a = theme === null || theme === void 0 ? void 0 : theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || segmentedTheme.sizes[size], block && ((theme === null || theme === void 0 ? void 0 : theme.blockStyle) || segmentedTheme.blockStyle), disabled && ((theme === null || theme === void 0 ? void 0 : theme.disabledStyle) || segmentedTheme.disabledStyle), className // User overrides take precedence
56
- ), "data-size": size, "data-disabled": disabled, "data-block": block, ...props, children: [jsx(GlassEffect, { rounded: "var(--segmented-radius)", blendModeOuter: "soft-light" }), value && (jsx("div", { className: cn((theme === null || theme === void 0 ? void 0 : theme.slidingBackgroundStyle) || segmentedTheme.slidingBackgroundStyle, slidingBackgroundClassName // User overrides take precedence
57
- ), style: activeStyle })), children] }) }));
55
+ }, role: "tablist", "aria-orientation": "horizontal", className: cn((theme === null || theme === void 0 ? void 0 : theme.baseStyle) || segmentedTheme.baseStyle, ((_a = theme === null || theme === void 0 ? void 0 : theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || segmentedTheme.sizes[size], block && ((theme === null || theme === void 0 ? void 0 : theme.blockStyle) || segmentedTheme.blockStyle), disabled && ((theme === null || theme === void 0 ? void 0 : theme.disabledStyle) || segmentedTheme.disabledStyle), className), "data-size": size, "data-disabled": disabled, "data-block": block, ...props, children: [value && (jsx("div", { className: cn((theme === null || theme === void 0 ? void 0 : theme.slidingBackgroundStyle) ||
56
+ segmentedTheme.slidingBackgroundStyle, slidingBackgroundClassName), style: activeStyle })), children] }) }));
58
57
  });
59
58
  // Set display name for dev tools and Storybook
60
59
  SegmentedComponent.displayName = "Segmented";
package/dist/components/core/Segmented/Segmented.theme.js CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
  const segmentedTheme = {
5
5
  // Base styles for the segmented container
6
- baseStyle: "relative flex rounded-[var(--segmented-radius)] bg-[var(--color-background)] border border-[var(--color-border)] p-0",
6
+ baseStyle: "relative flex rounded-[var(--segmented-radius)] bg-[var(--color-background-tertiary)]/50 border-0 border-[var(--color-border)]/50 p-1 shadow-inner dark:bg-[var(--color-background-secondary)]",
7
7
  // Size variants using CSS variables
8
8
  sizes: {
9
9
  sm: "min-h-[var(--segmented-min-h-sm)]",
@@ -15,14 +15,14 @@ const segmentedTheme = {
15
15
  // Disabled style
16
16
  disabledStyle: "opacity-50 cursor-not-allowed pointer-events-none",
17
17
  // Sliding background style with CSS variables
18
- slidingBackgroundStyle: "absolute top-[0px] left-[0px] rounded-[calc(var(--segmented-radius)-0.5px)] transition-transform duration-200 ease-out pointer-events-none z-0 bg-[var(--color-background-secondary)] shadow-real-md glass-effect",
18
+ slidingBackgroundStyle: "absolute top-[0px] left-[0px] rounded-[calc(var(--segmented-radius)-4px)] transition-transform duration-200 ease-out pointer-events-none z-0 bg-white dark:bg-[var(--color-background-tertiary)] shadow-real-md",
19
19
  };
20
20
  /**
21
21
  * Default theme for the SegmentedItem component
22
22
  */
23
23
  const segmentedItemTheme = {
24
24
  // Base styles for the segmented item
25
- baseStyle: "relative flex min-h-full min-w-fit flex-1 items-center justify-center transition-all duration-200 rounded-[calc(var(--segmented-radius)-1.5px)] font-medium cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-500)] focus-visible:ring-offset-1",
25
+ baseStyle: "relative flex min-w-fit flex-1 items-center justify-center transition-all duration-200 rounded-[calc(var(--segmented-radius)-4px)] font-medium cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-500)] focus-visible:ring-offset-1",
26
26
  // Size variants using CSS variables
27
27
  sizes: {
28
28
  sm: "text-base px-[var(--segmented-px-sm)]",
package/dist/components/core/Tooltip/Tooltip.theme.js CHANGED
@@ -1,7 +1,7 @@
1
1
  const tooltipTheme = {
2
2
  // Base style for the tooltip - using fixed positioning for portal rendering
3
- baseStyle: "fixed z-[99] rounded-[var(--tooltip-radius)] py-1 px-2 text-sm text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-white/60 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg border-t-[1px] border-white " +
4
- "dark:bg-[var(--color-neutral-800)]/80 dark:outline-[var(--color-border)]/80 dark:border-[var(--color-border)]",
3
+ baseStyle: "fixed z-[99] rounded-[var(--tooltip-radius)] py-1 px-2 text-sm text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-white/90 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg border-t-[1px] border-white " +
4
+ "dark:bg-[var(--color-neutral-800)]/90 dark:outline-[var(--color-border)]/80 dark:border-[var(--color-border)]",
5
5
  };
6
6
 
7
7
  export { tooltipTheme };
package/dist/components/forms/FileUpload/FileUpload.js CHANGED
@@ -3,92 +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/Carousel/CarouselBody.js';
24
- import '../../core/CommandPalette/CommandPalette.js';
25
- import '../../core/Separator/Separator.js';
26
- import '../../core/Drawer/Drawer.js';
27
- import '../../core/Drawer/DrawerBody.js';
28
- import '../../core/Dropdown/Dropdown.js';
29
- import '../../core/Dropdown/DropdownTrigger.js';
30
- import '../../core/Dropdown/DropdownMenu.js';
31
- import '../../core/Dropdown/DropdownItem.js';
32
- import '../../core/Dropdown/DropdownSection.js';
33
- import '../../core/Dropdown/DropdownSeparator.js';
34
- import '../../core/Dropdown/Dropdown.theme.js';
35
- import '../../core/Kbd/Kbd.js';
36
- import '../../core/MenuItem/MenuItem.js';
37
- import '../../core/Link/Link.js';
38
- import '../../core/Modal/Modal.js';
39
- import '../../core/ModalStack/ModalStack.js';
40
- import '../../core/PageHeading/PageHeading.js';
41
- import '../../core/Pagination/Pagination.js';
42
- import '../../core/Popover/Popover.js';
43
- import '../../core/Popover/PopoverContext.js';
44
- import '../../core/Popover/PopoverBody.js';
45
- import '../../core/Progress/Progress.js';
46
- import '../../core/Rating/Rating.js';
47
- import '../../core/ScrollArea/ScrollArea.js';
48
- import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
49
- import '../../core/Segmented/Segmented.js';
50
- import '../../core/Skeleton/Skeleton.js';
51
- import '../../core/SlidingNumber/SlidingNumber.js';
52
- import '../../core/Tabs/Tabs.js';
53
- import '../../core/Tabs/TabsList.js';
54
- import '../../core/Tabs/TabsTrigger.js';
55
- import '../../core/Tabs/TabsBody.js';
56
- import '../../core/Tabs/TabsContext.js';
57
- import '../../core/Tooltip/Tooltip.js';
58
- import '../../core/Tooltip/Tooltip.animations.js';
59
- import '../../core/Tree/Tree.js';
60
- import '../../core/Tag/Tag.js';
61
- import '../../core/Alert/Alert.js';
62
- import '../../core/Toast/Toast.js';
63
- import '../../core/Toast/ToastProvider.js';
64
- import '@heroicons/react/24/solid';
65
- import '../../core/Spinner/Spinner.js';
66
- import '../../core/Message/Message.js';
67
- import '../../core/Message/TypeWriter.js';
68
- import '../../core/Message/MessageBody.js';
69
- import '@heroicons/react/16/solid';
70
- import '../../core/Empty/Empty.js';
71
- import '../../core/Masonry/Masonry.js';
72
- import '../../core/DragDrop/DragDrop.js';
73
- import '../../core/Sortable/Sortable.js';
74
- import '../../core/NavItem/NavItem.js';
75
- import '../../core/Sidebar/Sidebar.js';
76
- import '../../core/Sidebar/SidebarHeader.js';
77
- import '../../core/Sidebar/SidebarContent.js';
78
- import '../../core/Sidebar/SidebarFooter.js';
79
- import '../../core/Sidebar/SidebarNav.js';
80
- import '../../core/Sidebar/SidebarNavGroup.js';
81
- import 'motion/react';
82
- import '../../core/Sidebar/SidebarToggle.js';
83
- import '../../core/Sidebar/SidebarMobileTrigger.js';
84
- import '../../core/Sidebar/SidebarUserProfile.js';
85
- import '../../core/Sidebar/SidebarContext.js';
86
- import '../../core/OfflineIndicator/OfflineIndicator.js';
87
- import '../../core/ContextMenu/ContextMenu.js';
88
- import '../../core/ContextMenu/ContextMenu.theme.js';
89
- import '../../core/Pill/Pill.js';
90
- import '../../core/SocialIcon/SocialIcon.js';
91
- import '../../core/FileTypeIcon/FileTypeIcon.js';
92
7
 
93
8
  /**
94
9
  * FileUpload component - Drag-and-drop file uploader with previews