@adecore/ui 0.33.2 → 0.34.0

package/dist/Segmented.d.ts

@@ -4,6 +4,7 @@ export interface SegmentedOption<T extends string> {
     id: T;
     label: string;
     icon?: LucideIcon;
+    disabled?: boolean;
 }
 export interface SegmentedProps<T extends string> {
     value: T;
@@ -12,7 +13,9 @@ export interface SegmentedProps<T extends string> {
     label: string;
     disabled?: boolean;
     orientation?: 'horizontal' | 'vertical';
+    size?: 'md' | 'sm';
+    iconOnly?: boolean;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function Segmented<T extends string>({ value, onValueChange, options, label, disabled, orientation, className, ref }: SegmentedProps<T>): import("react").JSX.Element;
+export declare function Segmented<T extends string>({ value, onValueChange, options, label, disabled, orientation, size, iconOnly, className, ref }: SegmentedProps<T>): import("react").JSX.Element;

package/dist/Segmented.js

@@ -1,19 +1,31 @@
 import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 import { Icon } from "./Icon.js";
+import { segmentedStop, segmentedTarget } from './segmented-keys.js';
+import { Tooltip } from "./Tooltip.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const STEPS = {
-  ArrowRight: 1,
-  ArrowDown: 1,
-  ArrowLeft: -1,
-  ArrowUp: -1
+const SIZE = {
+  md: {
+    track: 'rounded-lg',
+    row: 'min-h-8',
+    option: 'min-h-7 rounded-md px-3 py-1',
+    square: 'size-7 rounded-md',
+    icon: 14
+  },
+  sm: {
+    track: 'rounded-md',
+    row: 'min-h-7',
+    option: 'min-h-6 rounded-sm px-2.5 py-0.5',
+    square: 'size-6 rounded-sm',
+    icon: 12
+  }
 };
 /*
  * One of a few options side by side in one sunken track, the picked one lifted out of it. A radio
  * group: one tab stop, and the arrows pick and focus the next option, around the ends.
  */
 export function Segmented(t0) {
-  const $ = _c(30);
+  const $ = _c(38);
   const {
     value,
     onValueChange,
@@ -21,34 +33,30 @@ export function Segmented(t0) {
     label,
     disabled,
     orientation: t1,
+    size: t2,
+    iconOnly: t3,
     className,
     ref
   } = t0;
   const orientation = t1 === undefined ? "horizontal" : t1;
+  const size = t2 === undefined ? "md" : t2;
+  const iconOnly = t3 === undefined ? false : t3;
   const vertical = orientation === "vertical";
-  let t2;
+  const sizing = SIZE[size];
+  let t4;
   if ($[0] !== options || $[1] !== value) {
-    let t3;
-    if ($[3] !== value) {
-      t3 = option => option.id === value;
-      $[3] = value;
-      $[4] = t3;
-    } else {
-      t3 = $[4];
-    }
-    t2 = options.findIndex(t3);
+    t4 = segmentedStop(options, value);
     $[0] = options;
     $[1] = value;
-    $[2] = t2;
+    $[2] = t4;
   } else {
-    t2 = $[2];
+    t4 = $[2];
   }
-  const picked = t2;
-  const stop = picked === -1 ? 0 : picked;
-  let t3;
-  if ($[5] !== onValueChange || $[6] !== options) {
-    t3 = function move(event, index) {
-      const next = event.key in STEPS ? (index + STEPS[event.key] + options.length) % options.length : event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : null;
+  const stop = t4;
+  let t5;
+  if ($[3] !== onValueChange || $[4] !== options) {
+    t5 = function move(event, index) {
+      const next = segmentedTarget(options, index, event.key);
       if (next === null) {
         return;
       }
@@ -56,81 +64,98 @@ export function Segmented(t0) {
       onValueChange(options[next].id);
       event.currentTarget.parentElement?.querySelectorAll("[role=\"radio\"]")[next]?.focus();
     };
-    $[5] = onValueChange;
-    $[6] = options;
-    $[7] = t3;
+    $[3] = onValueChange;
+    $[4] = options;
+    $[5] = t5;
   } else {
-    t3 = $[7];
+    t5 = $[5];
   }
-  const move = t3;
-  const t4 = vertical ? "w-full flex-col items-stretch gap-0.5" : "min-h-8 w-fit items-center";
-  let t5;
-  if ($[8] !== className || $[9] !== t4) {
-    t5 = clsx("flex rounded-lg bg-surface-sunken p-0.5 text-xs font-medium", t4, className);
-    $[8] = className;
-    $[9] = t4;
-    $[10] = t5;
+  const move = t5;
+  let t6;
+  if ($[6] !== className || $[7] !== sizing.row || $[8] !== sizing.track || $[9] !== vertical) {
+    t6 = clsx("flex bg-surface-sunken p-0.5 text-xs font-medium", sizing.track, vertical ? "w-full flex-col items-stretch gap-0.5" : clsx(sizing.row, "w-fit items-center"), className);
+    $[6] = className;
+    $[7] = sizing.row;
+    $[8] = sizing.track;
+    $[9] = vertical;
+    $[10] = t6;
   } else {
-    t5 = $[10];
+    t6 = $[10];
   }
-  const t6 = vertical ? "vertical" : undefined;
-  let t7;
-  if ($[11] !== disabled || $[12] !== move || $[13] !== onValueChange || $[14] !== options || $[15] !== stop || $[16] !== value) {
-    let t8;
-    if ($[18] !== disabled || $[19] !== move || $[20] !== onValueChange || $[21] !== stop || $[22] !== value) {
-      t8 = (option_0, index_0) => /*#__PURE__*/_jsxs("button", {
-        type: "button",
-        role: "radio",
-        "aria-checked": value === option_0.id,
-        tabIndex: index_0 === stop ? 0 : -1,
-        disabled: disabled,
-        className: clsx("flex min-h-7 items-center gap-1.5 rounded-md px-3 py-1 text-left transition-colors disabled:opacity-50", value === option_0.id ? "bg-surface-raised text-text shadow-raised" : "text-text-muted hover:text-text"),
-        onClick: () => onValueChange(option_0.id),
-        onKeyDown: event_0 => move(event_0, index_0),
-        children: [option_0.icon && /*#__PURE__*/_jsx(Icon, {
-          icon: option_0.icon,
-          size: 14,
-          className: "shrink-0"
-        }), option_0.label]
-      }, option_0.id);
-      $[18] = disabled;
-      $[19] = move;
-      $[20] = onValueChange;
-      $[21] = stop;
-      $[22] = value;
-      $[23] = t8;
+  const t7 = vertical ? "vertical" : undefined;
+  let t8;
+  if ($[11] !== disabled || $[12] !== iconOnly || $[13] !== move || $[14] !== onValueChange || $[15] !== options || $[16] !== sizing.icon || $[17] !== sizing.option || $[18] !== sizing.square || $[19] !== stop || $[20] !== value) {
+    let t9;
+    if ($[22] !== disabled || $[23] !== iconOnly || $[24] !== move || $[25] !== onValueChange || $[26] !== sizing.icon || $[27] !== sizing.option || $[28] !== sizing.square || $[29] !== stop || $[30] !== value) {
+      t9 = (option, index_0) => {
+        const square = iconOnly && option.icon !== undefined;
+        const button = /*#__PURE__*/_jsxs("button", {
+          type: "button",
+          role: "radio",
+          "aria-checked": value === option.id,
+          tabIndex: index_0 === stop ? 0 : -1,
+          disabled: disabled || option.disabled,
+          className: clsx("flex items-center transition-colors disabled:opacity-50", square ? clsx(sizing.square, "justify-center") : clsx(sizing.option, "gap-1.5 text-left"), value === option.id ? "bg-surface-raised text-text shadow-raised" : "text-text-muted enabled:hover:text-text"),
+          onClick: () => onValueChange(option.id),
+          onKeyDown: event_0 => move(event_0, index_0),
+          children: [option.icon && /*#__PURE__*/_jsx(Icon, {
+            icon: option.icon,
+            size: sizing.icon,
+            className: "shrink-0"
+          }), !square && option.label]
+        }, option.id);
+        return square ? /*#__PURE__*/_jsx(Tooltip, {
+          label: option.label,
+          name: true,
+          children: button
+        }, option.id) : button;
+      };
+      $[22] = disabled;
+      $[23] = iconOnly;
+      $[24] = move;
+      $[25] = onValueChange;
+      $[26] = sizing.icon;
+      $[27] = sizing.option;
+      $[28] = sizing.square;
+      $[29] = stop;
+      $[30] = value;
+      $[31] = t9;
     } else {
-      t8 = $[23];
+      t9 = $[31];
     }
-    t7 = options.map(t8);
+    t8 = options.map(t9);
     $[11] = disabled;
-    $[12] = move;
-    $[13] = onValueChange;
-    $[14] = options;
-    $[15] = stop;
-    $[16] = value;
-    $[17] = t7;
+    $[12] = iconOnly;
+    $[13] = move;
+    $[14] = onValueChange;
+    $[15] = options;
+    $[16] = sizing.icon;
+    $[17] = sizing.option;
+    $[18] = sizing.square;
+    $[19] = stop;
+    $[20] = value;
+    $[21] = t8;
   } else {
-    t7 = $[17];
+    t8 = $[21];
   }
-  let t8;
-  if ($[24] !== label || $[25] !== ref || $[26] !== t5 || $[27] !== t6 || $[28] !== t7) {
-    t8 = /*#__PURE__*/_jsx("div", {
+  let t9;
+  if ($[32] !== label || $[33] !== ref || $[34] !== t6 || $[35] !== t7 || $[36] !== t8) {
+    t9 = /*#__PURE__*/_jsx("div", {
       ref: ref,
-      className: t5,
+      className: t6,
       role: "radiogroup",
       "aria-label": label,
-      "aria-orientation": t6,
-      children: t7
+      "aria-orientation": t7,
+      children: t8
     });
-    $[24] = label;
-    $[25] = ref;
-    $[26] = t5;
-    $[27] = t6;
-    $[28] = t7;
-    $[29] = t8;
+    $[32] = label;
+    $[33] = ref;
+    $[34] = t6;
+    $[35] = t7;
+    $[36] = t8;
+    $[37] = t9;
   } else {
-    t8 = $[29];
+    t9 = $[37];
   }
-  return t8;
+  return t9;
 }

package/dist/Toasts.js

@@ -183,7 +183,7 @@ function ToastCard(t0) {
   const {
     t
   } = useTranslation("ui");
-  const leaves = toast.kind === "deleted" || toast.kind === "success" && toast.persist !== true;
+  const leaves = toast.deadline !== undefined;
   let t1;
   if ($[0] !== toast.action) {
     t1 = toast.action === undefined ? [] : [toast.action];

package/dist/combobox/index.parts.d.ts

@@ -0,0 +1 @@
+export { ComboboxCollection as Collection, ComboboxEmpty as Empty, ComboboxGroup as Group, ComboboxGroupLabel as GroupLabel, ComboboxInput as Input, ComboboxItem as Item, ComboboxList as List, ComboboxPopup as Popup, ComboboxRoot as Root, ComboboxStatus as Status } from './parts.tsx';

package/dist/combobox/index.parts.js

@@ -0,0 +1 @@
+export { ComboboxCollection as Collection, ComboboxEmpty as Empty, ComboboxGroup as Group, ComboboxGroupLabel as GroupLabel, ComboboxInput as Input, ComboboxItem as Item, ComboboxList as List, ComboboxPopup as Popup, ComboboxRoot as Root, ComboboxStatus as Status } from "./parts.js";

package/dist/combobox/parts.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { Autocomplete } from '@base-ui/react/autocomplete';
+import { type PlacementKey } from '../placement.ts';
+import type { Shortcut } from '../shortcut.ts';
+export declare const ComboboxRoot: typeof Autocomplete.Root;
+export type ComboboxInputProps = Omit<ComponentProps<typeof Autocomplete.Input>, 'size' | 'className'> & {
+    className?: string;
+    size?: 'md' | 'sm';
+    mono?: boolean;
+    icon?: LucideIcon;
+};
+export declare function ComboboxInput({ size, mono, icon, className, id, ...props }: ComboboxInputProps): import("react").JSX.Element;
+type Placement = Pick<ComponentProps<typeof Autocomplete.Positioner>, PlacementKey>;
+export type ComboboxPopupProps = ComponentProps<typeof Autocomplete.Popup> & Placement;
+export declare function ComboboxPopup({ side, align, sideOffset, className, ...props }: ComboboxPopupProps): import("react").JSX.Element;
+export declare function ComboboxList(props: ComponentProps<typeof Autocomplete.List>): import("react").JSX.Element;
+export type ComboboxItemProps = ComponentProps<typeof Autocomplete.Item> & {
+    icon?: ReactNode;
+    hint?: ReactNode;
+    description?: ReactNode;
+    trailing?: ReactNode;
+    shortcut?: Shortcut;
+    unstyled?: boolean;
+};
+export declare function ComboboxItem({ icon, hint, description, trailing, shortcut, unstyled, className, children, ...props }: ComboboxItemProps): import("react").JSX.Element;
+export declare const ComboboxGroup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function ComboboxGroupLabel({ className, ...props }: ComponentProps<typeof Autocomplete.GroupLabel>): import("react").JSX.Element;
+export declare const ComboboxCollection: typeof Autocomplete.Collection;
+export declare function ComboboxEmpty({ className, ...props }: ComponentProps<typeof Autocomplete.Empty>): import("react").JSX.Element;
+export declare function ComboboxStatus({ className, ...props }: ComponentProps<typeof Autocomplete.Status>): import("react").JSX.Element;
+export {};