@keboola/design 4.2.0 → 4.3.0

package/dist/index.js

@@ -1412,9 +1412,9 @@ var variants = cva(
     "focus-visible:tw-outline",
     "focus-visible:tw-outline-1",
     "focus-visible:-tw-outline-offset-1",
-    "focus-visible:tw-outline-secondary-500",
+    "focus-visible:tw-outline-ring",
     "focus-visible:tw-ring-4",
-    "focus-visible:tw-ring-secondary-200",
+    "focus-visible:tw-ring-ring/30",
     // disabled
     "disabled:tw-opacity-40",
     "disabled:tw-cursor-not-allowed",
@@ -2458,9 +2458,10 @@ var toggleVariants = cva(
     // focus-visible
     "[&:not(:active)]:not-disabled:focus-visible:tw-outline",
     "!tw-outline-offset-0",
-    "[&:not(:active)]:not-disabled:focus-visible:tw-outline-secondary-500",
+    "[&:not(:active)]:not-disabled:focus-visible:tw-outline-ring",
     "[&:not(:active)]:not-disabled:focus-visible:tw-outline-1",
-    "[&:not(:active)]:not-disabled:focus-visible:tw-shadow-[0_0_0_4px_rgba(31,143,255,0.2)]"
+    "[&:not(:active)]:not-disabled:focus-visible:tw-ring-4",
+    "[&:not(:active)]:not-disabled:focus-visible:tw-ring-ring/20"
   ],
   {
     variants: {
@@ -8801,7 +8802,7 @@ var inputGroupVariants = cva(
     variants: {
       focusVariant: {
         default: [],
-        on: ["!tw-border-secondary-500", "!tw-ring-secondary-200", "!tw-ring-4"],
+        on: ["!tw-border-ring", "!tw-ring-ring/30", "!tw-ring-4"],
         off: ["has-[:is(input,textarea):focus]:!tw-ring-0"]
       },
       variant: {
@@ -8841,8 +8842,8 @@ var inputGroupVariants = cva(
       },
       state: {
         default: [
-          "has-[:is(input,textarea):focus]:tw-border-secondary-500",
-          "has-[:is(input,textarea):focus]:tw-ring-secondary-200"
+          "has-[:is(input,textarea):focus]:tw-border-ring",
+          "has-[:is(input,textarea):focus]:tw-ring-ring/30"
         ],
         error: [
           "tw-border-error-500",
@@ -9922,9 +9923,9 @@ var switchVariants = cva(
           "focus-visible:tw-outline-none",
           "before:focus-visible:tw-outline",
           "before:focus-visible:tw-outline-1",
-          "before:focus-visible:tw-outline-secondary-500",
+          "before:focus-visible:tw-outline-ring",
           "before:focus-visible:tw-ring-4",
-          "before:focus-visible:tw-ring-secondary-200"
+          "before:focus-visible:tw-ring-ring/30"
         ],
         argo: [
           "tw-peer",
@@ -10108,7 +10109,7 @@ var radioVariants = cva(
           "data-[state=unchecked]:hover:tw-border-primary",
           "data-[state=unchecked]:disabled:hover:tw-border-neutral-200",
           "focus-visible:tw-ring-2",
-          "focus-visible:tw-ring-secondary-200"
+          "focus-visible:tw-ring-ring/30"
         ],
         argo: [
           "disabled:tw-opacity-50",
@@ -10188,9 +10189,9 @@ var radioItemButtonVariants = cva(
           "data-[state=checked]:tw-text-white",
           "data-[state=checked]:tw-cursor-default",
           "focus-visible:tw-outline",
-          "focus-visible:tw-outline-secondary-500",
+          "focus-visible:tw-outline-ring",
           "focus-visible:tw-ring-4",
-          "focus-visible:tw-ring-secondary-200"
+          "focus-visible:tw-ring-ring/30"
         ],
         argo: [
           "disabled:tw-opacity-50",
@@ -10659,8 +10660,8 @@ var searchWrapperVariants = cva(
           // focus
           "has-[input:focus]:tw-outline-1",
           "has-[input:focus]:tw-ring-4",
-          "has-[input:focus]:tw-outline-secondary-500",
-          "has-[input:focus]:tw-ring-secondary-200"
+          "has-[input:focus]:tw-outline-ring",
+          "has-[input:focus]:tw-ring-ring/30"
         ],
         ai: [
           "tailwindcss-preflight",
@@ -10677,7 +10678,7 @@ var searchWrapperVariants = cva(
           "tw-shadow-[inset_0_100vw_white]",
           // focus
           "has-[input:focus]:tw-ring-4",
-          "has-[input:focus]:tw-ring-secondary-200"
+          "has-[input:focus]:tw-ring-ring/30"
         ]
       }
     }
@@ -11099,10 +11100,10 @@ var variants4 = cva(
       },
       state: {
         default: [
-          "focus:tw-border-secondary-500",
-          "focus:tw-ring-secondary-200",
-          "data-[state=open]:tw-border-secondary-500",
-          "data-[state=open]:tw-ring-secondary-200"
+          "focus:tw-border-ring",
+          "focus:tw-ring-ring/30",
+          "data-[state=open]:tw-border-ring",
+          "data-[state=open]:tw-ring-ring/30"
         ],
         error: [
           "tw-border-error-500",
@@ -11481,7 +11482,7 @@ var badgeRootVariants = cva(
     "focus-visible:tw-outline-none",
     "focus-visible:tw-ring-2",
     "focus-visible:tw-ring-inset",
-    "focus-visible:tw-ring-secondary-500"
+    "focus-visible:tw-ring-ring"
   ],
   {
     defaultVariants: {
@@ -12605,6 +12606,43 @@ var ColorInput = ({
     }
   );
 };
+var OPTIONS = [
+  { value: "light", label: "Light", icon: icons_exports.Sun },
+  { value: "dark", label: "Dark", icon: icons_exports.Moon },
+  { value: "system", label: "System", icon: icons_exports.Monitor }
+];
+var triggerSizeMap = { small: "icon-sm", medium: "icon" };
+var ColorModeSwitch = ({ value, onValueChange, size = "small", className }) => {
+  const active = OPTIONS.find((option) => option.value === value);
+  const ActiveIcon = active?.icon ?? icons_exports.Monitor;
+  const activeLabel = active?.label ?? "System";
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: triggerSizeMap[size],
+        "aria-label": `Color mode: ${activeLabel}`,
+        title: `Color mode: ${activeLabel}`,
+        className,
+        children: /* @__PURE__ */ jsx(ActiveIcon, { className: "tw-size-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "end", children: /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, { value, onValueChange, children: OPTIONS.map(({ value: option, label, icon: Icon2 }) => /* @__PURE__ */ jsx(
+      DropdownMenu.RadioItem,
+      {
+        value: option,
+        icon: /* @__PURE__ */ jsx(Icon2, {}),
+        indicator: "check",
+        indicatorAlign: "end",
+        closeOnSelect: true,
+        children: label
+      },
+      option
+    )) }) })
+  ] });
+};
 var toNumberOrNull = (event) => Number.isNaN(event.target.valueAsNumber) ? null : event.target.valueAsNumber;
 var NumberInput = ({
   ref,
@@ -14947,9 +14985,9 @@ FormGroup.NumberInput = FormGroupNumberInput;
 FormGroup.ColorInput = FormGroupColorInput;
 FormGroup.Textarea = FormGroupTextarea;
 var variantClasses = {
-  success: "tw-text-secondary-500 focus-visible:tw-outline-secondary-500 not-disabled:hover:tw-text-secondary-600",
+  success: "tw-text-secondary-500 focus-visible:tw-outline-ring not-disabled:hover:tw-text-secondary-600",
   error: "tw-text-error-500 focus-visible:tw-outline-error-500 not-disabled:hover:tw-text-error-600",
-  processing: "tw-text-secondary-500 focus-visible:tw-outline-secondary-500 not-disabled:hover:tw-text-secondary-600",
+  processing: "tw-text-secondary-500 focus-visible:tw-outline-ring not-disabled:hover:tw-text-secondary-600",
   dismissed: "tw-text-neutral-700 focus-visible:tw-outline-neutral-500 not-disabled:hover:tw-text-neutral-800"
 };
 var renderVariantIcon = (variant) => {
@@ -15082,8 +15120,8 @@ var Avatar = ({
         "tw-border",
         "tw-border-transparent",
         "focus-visible:tw-ring-4",
-        "focus-visible:tw-ring-secondary-200",
-        "focus-visible:tw-border-secondary-500",
+        "focus-visible:tw-ring-ring/30",
+        "focus-visible:tw-border-ring",
         className
       ),
       children: [
@@ -15194,7 +15232,7 @@ var ExpandToggle = ({
     type: "button",
     onClick: onToggle,
     "aria-expanded": isExpanded,
-    className: "tailwindcss-preflight tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-bg-transparent tw-p-0 tw-text-sm tw-font-medium tw-text-secondary-500 hover:tw-text-secondary-600 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-secondary-500",
+    className: "tailwindcss-preflight tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-bg-transparent tw-p-0 tw-text-sm tw-font-medium tw-text-secondary-500 hover:tw-text-secondary-600 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-ring",
     children: [
       /* @__PURE__ */ jsx("span", { children: isExpanded ? showLessLabel : showMoreLabel }),
       /* @__PURE__ */ jsx(
@@ -15554,7 +15592,7 @@ var promptInputVariants = cva(
     "tw-shadow-[inset_0_100vw_white]",
     // focus
     "has-[textarea:focus]:tw-ring-4",
-    "has-[textarea:focus]:tw-ring-secondary-200",
+    "has-[textarea:focus]:tw-ring-ring/30",
     "tw-cursor-text",
     "tw-px-2"
   ],
@@ -16424,7 +16462,7 @@ var Alert = ({
             "tw-rounded-sm",
             "focus-visible:tw-outline",
             "focus-visible:tw-outline-2",
-            "focus-visible:tw-outline-secondary-500"
+            "focus-visible:tw-outline-ring"
           ),
           children: [
             !hideIcon && /* @__PURE__ */ jsx(AlertIcon, { variant, icon }),
@@ -18497,10 +18535,10 @@ var SidebarGroupAction = ({
       "hover:[&_svg]:tw-text-secondary-600",
       "hover:tw-bg-neutral-100",
       "focus-visible:tw-ring-4",
-      "focus-visible:tw-ring-secondary-200",
+      "focus-visible:tw-ring-ring/30",
       "focus-visible:tw-outline",
       "focus-visible:tw-outline-1",
-      "focus-visible:tw-outline-secondary-500",
+      "focus-visible:tw-outline-ring",
       className
     ),
     children
@@ -19777,7 +19815,7 @@ var BreadcrumbEllipsis = ({
       // focus
       "focus-visible:tw-outline-none",
       "focus-visible:tw-ring-2",
-      "focus-visible:tw-ring-secondary-500/50",
+      "focus-visible:tw-ring-ring/50",
       "tw-p-1",
       className
     ),
@@ -19813,7 +19851,7 @@ var BreadcrumbLink = ({
         // focus
         "focus-visible:tw-outline-none",
         "focus-visible:tw-ring-2",
-        "focus-visible:tw-ring-secondary-500/50",
+        "focus-visible:tw-ring-ring/50",
         "focus-visible:tw-rounded-sm",
         // Icon
         '[&_svg:not([class*="tw-size-"])]:tw-size-3.5',
@@ -22096,6 +22134,6 @@ object-assign/index.js:
   *)
 */
 
-export { Alert, AlertModal, AnswerSummary, AppShell, AutoSaveTextarea, Avatar, Badge, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, InlineStepLabel, InputGroup, InputOtp, Kbd, Label2 as Label, Link, MarkedText, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup2 as RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select2 as Select, Separator2 as Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, Stepper, SuggestedPrompt, Switch, Table, Tabs2 as Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeDecorator, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, Tooltip, TooltipProvider, Truncated, UsageStats, UsageStatsRing, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isMac, kbdVariants, keys, mergeRefs, resolveStorybookBrand, setServerFieldErrors, themeToolbarBrands, toast, useAppForm, useAutosizeInput, useColorScheme, useInputOtpContext, useIsLegacyBrand, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTheme, withForm };
+export { Alert, AlertModal, AnswerSummary, AppShell, AutoSaveTextarea, Avatar, Badge, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, InlineStepLabel, InputGroup, InputOtp, Kbd, Label2 as Label, Link, MarkedText, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup2 as RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select2 as Select, Separator2 as Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, Stepper, SuggestedPrompt, Switch, Table, Tabs2 as Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeDecorator, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, Tooltip, TooltipProvider, Truncated, UsageStats, UsageStatsRing, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isMac, kbdVariants, keys, mergeRefs, resolveStorybookBrand, setServerFieldErrors, themeToolbarBrands, toast, useAppForm, useAutosizeInput, useColorScheme, useInputOtpContext, useIsLegacyBrand, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTheme, withForm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map