@godxjp/ui 20.0.0 → 20.2.0

package/dist/components/data-entry/select.js

@@ -2,9 +2,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { ChevronDown, ChevronUp, X } from "lucide-react";
+import { ChevronDown, ChevronUp, Loader2, X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-import { controlTriggerClass } from "../../lib/control-styles.js";
+import { controlSurfaceTriggerClass } from "../../lib/control-styles.js";
+import { controlSurfaceAttrs, resolveAllowClear, resolveAriaInvalid } from "./control-surface.js";
 import { useInertHiddenBackground } from "../general/inert-background.js";
 import {
   mergeAriaIds,
@@ -65,65 +66,84 @@ function SelectGroup(props) {
 function SelectValue(props) {
   return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
-const SelectTrigger = React.forwardRef(({ className, children, size = "md", width = "full", showIndicator = true, ...props }, ref) => {
-  const field = React.useContext(SelectFieldA11yContext);
-  const ownsName = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0;
-  const fieldOwnsName = field?.["aria-label"] !== void 0 || field?.["aria-labelledby"] !== void 0;
-  const nameFallback = useFieldNameFallback({
-    "aria-label": ownsName ? props["aria-label"] : field?.["aria-label"],
-    "aria-labelledby": ownsName ? props["aria-labelledby"] : field?.["aria-labelledby"]
-  });
-  const fieldA11y = field || nameFallback["aria-labelledby"] !== void 0 ? {
-    id: props.id ?? field?.id,
-    ...ownsName ? {} : fieldOwnsName ? {
-      "aria-label": field?.["aria-label"],
-      "aria-labelledby": field?.["aria-labelledby"]
-    } : nameFallback,
-    "aria-describedby": mergeAriaIds(props["aria-describedby"], field?.["aria-describedby"]),
-    "aria-errormessage": mergeAriaIds(
-      props["aria-errormessage"],
-      field?.["aria-errormessage"]
-    ),
-    "aria-required": props["aria-required"] ?? field?.["aria-required"],
-    "aria-invalid": props["aria-invalid"] ?? field?.["aria-invalid"],
-    "data-field": props["data-field"] ?? field?.["data-field"]
-  } : void 0;
-  const dataValue = (props["data-value"] ?? field?.value) || void 0;
-  return /* @__PURE__ */ jsxs(
-    SelectPrimitive.Trigger,
-    {
-      ref,
-      "data-slot": "select-trigger",
-      "data-size": size,
-      "data-width": width,
-      className: cn(
-        controlTriggerClass,
-        // `bounded` deliberately emits NO width utility: its width is owned by the
-        // `[data-width="bounded"]` rule in control.css. A utility here would win the layer order
-        // and make that rule — and therefore the token — dead, the way `w-full` did to
-        // `.ui-app-setting-picker-icon` (gh#366, gh#371).
-        width === "auto" && "w-auto",
-        width === "full" && "w-full",
-        "aria-invalid:border-destructive data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground whitespace-nowrap transition-[color,box-shadow] outline-none *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center",
-        className
+const SelectTrigger = React.forwardRef(
+  ({
+    className,
+    children,
+    size = "md",
+    variant,
+    status,
+    width = "full",
+    showIndicator = true,
+    ...props
+  }, ref) => {
+    const field = React.useContext(SelectFieldA11yContext);
+    const ownsName = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0;
+    const fieldOwnsName = field?.["aria-label"] !== void 0 || field?.["aria-labelledby"] !== void 0;
+    const nameFallback = useFieldNameFallback({
+      "aria-label": ownsName ? props["aria-label"] : field?.["aria-label"],
+      "aria-labelledby": ownsName ? props["aria-labelledby"] : field?.["aria-labelledby"]
+    });
+    const fieldA11y = field || nameFallback["aria-labelledby"] !== void 0 ? {
+      id: props.id ?? field?.id,
+      ...ownsName ? {} : fieldOwnsName ? {
+        "aria-label": field?.["aria-label"],
+        "aria-labelledby": field?.["aria-labelledby"]
+      } : nameFallback,
+      "aria-describedby": mergeAriaIds(
+        props["aria-describedby"],
+        field?.["aria-describedby"]
       ),
-      ...props,
-      ...fieldA11y,
-      "data-value": dataValue,
-      children: [
-        children,
-        showIndicator ? /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
-          ChevronDown,
-          {
-            "data-slot": "select-chevron",
-            className: "ui-select-chevron",
-            "aria-hidden": "true"
-          }
-        ) }) : null
-      ]
-    }
-  );
-});
+      "aria-errormessage": mergeAriaIds(
+        props["aria-errormessage"],
+        field?.["aria-errormessage"]
+      ),
+      "aria-required": props["aria-required"] ?? field?.["aria-required"],
+      "aria-invalid": resolveAriaInvalid(
+        props["aria-invalid"] ?? field?.["aria-invalid"],
+        status
+      ),
+      "data-field": props["data-field"] ?? field?.["data-field"]
+    } : { "aria-invalid": resolveAriaInvalid(props["aria-invalid"], status) };
+    const dataValue = (props["data-value"] ?? field?.value) || void 0;
+    return /* @__PURE__ */ jsxs(
+      SelectPrimitive.Trigger,
+      {
+        ref,
+        "data-slot": "select-trigger",
+        "data-size": size,
+        "data-variant": controlSurfaceAttrs({ variant })["data-variant"],
+        "data-status": status,
+        "data-width": width,
+        className: cn(
+          controlSurfaceTriggerClass,
+          // `bounded` deliberately emits NO width utility: its width is owned by the
+          // `[data-width="bounded"]` rule in control.css. A utility here would win the layer order
+          // and make that rule — and therefore the token — dead, the way `w-full` did to
+          // `.ui-app-setting-picker-icon` (gh#366, gh#371).
+          width === "auto" && "w-auto",
+          width === "full" && "w-full",
+          "aria-invalid:border-destructive data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground whitespace-nowrap transition-[color,box-shadow] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center",
+          className
+        ),
+        ...props,
+        ...fieldA11y,
+        "data-value": dataValue,
+        children: [
+          children,
+          showIndicator ? /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              "data-slot": "select-chevron",
+              className: "ui-select-chevron",
+              "aria-hidden": "true"
+            }
+          ) }) : null
+        ]
+      }
+    );
+  }
+);
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
@@ -169,7 +189,11 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
             "data-slot": "select-viewport",
             className: cn(
               "ui-select-viewport",
-              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full",
+              // The trigger-width floor is a UTILITY, so no `[data-popup-match]` rule in control.css
+              // could ever lift it (gh#366). It is therefore WITHHELD whenever the consumer stated a
+              // width of their own — which is exactly what antd's `popupMatchSelectWidth` is for.
+              position === "popper" && !props["data-popup-match"] && "min-w-[var(--radix-select-trigger-width)]"
             ),
             children
           }
@@ -190,14 +214,25 @@ const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+const SelectItem = React.forwardRef(({ className, children, selectedIcon, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
     "data-slot": "select-item",
     className: cn("ui-select-item [&_svg:not([class*='text-'])]:text-muted-foreground", className),
     ...props,
-    children: /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    children: [
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
+      selectedIcon ? /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { asChild: true, children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "select-item-selected-icon",
+          className: "ui-search-select-selected-icon",
+          "aria-hidden": "true",
+          children: selectedIcon
+        }
+      ) }) : null
+    ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
@@ -224,105 +259,90 @@ function groupDataOptions(options) {
   }
   return order.map((key) => ({ heading: key || void 0, items: buckets.get(key) ?? [] }));
 }
-function DataSelect({
-  options = [],
-  loadOptions,
-  showSearch,
-  value,
-  defaultValue,
-  onValueChange,
-  renderOption,
-  labelRender,
-  selectedLabel,
-  selectedIcon,
-  placeholder,
-  searchPlaceholder,
-  emptyMessage,
-  loadingMessage,
-  errorMessage,
-  clearLabel,
-  clearable,
-  disabled,
-  readOnly,
-  size,
-  open,
-  onOpenChange,
-  search,
-  onSearchChange,
-  filterOption,
-  renderError,
-  renderLoadMore,
-  name,
-  id,
-  className,
-  "data-testid": dataTestId,
-  "data-field": dataField,
-  ...rest
-}) {
-  const ariaProps = Object.fromEntries(
-    Object.entries(rest).filter(([key]) => key.startsWith("aria-"))
-  );
+function DataSelect(props) {
   const { t } = useTranslation();
-  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
-  const currentValue = value ?? uncontrolledValue;
-  const identity = useFieldIdentity({ id, name, "data-field": dataField });
-  const resolvedName = name ?? identity.name;
-  const resolvedField = dataField ?? identity["data-field"];
-  const searchable = showSearch ?? Boolean(loadOptions);
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(
+    typeof props.defaultValue === "string" ? props.defaultValue : void 0
+  );
+  const identity = useFieldIdentity({
+    id: props.id,
+    name: props.name,
+    "data-field": props["data-field"]
+  });
+  const resolvedName = props.name ?? identity.name;
+  const resolvedField = props["data-field"] ?? identity["data-field"];
+  const options = props.options ?? [];
   const hasOptions = options.length > 0;
-  if (searchable) {
+  const searchable = props.showSearch ?? (Boolean(props.loadOptions) || props.mode === "multiple");
+  if (props.mode === "multiple" || searchable) {
     return /* @__PURE__ */ jsx(
       SearchSelect,
       {
-        value,
-        defaultValue,
-        onValueChange,
+        ...props,
         options,
-        loadOptions,
-        renderOption,
-        labelRender,
-        selectedLabel,
-        selectedIcon,
-        placeholder,
-        searchPlaceholder,
-        emptyMessage,
-        loadingMessage,
-        errorMessage,
-        clearLabel,
-        clearable,
-        disabled: disabled || !loadOptions && !hasOptions,
-        readOnly,
-        size,
-        open,
-        onOpenChange,
-        search,
-        onSearchChange,
-        filterOption,
-        renderError,
-        renderLoadMore,
+        disabled: props.disabled || !props.loadOptions && !hasOptions,
         name: resolvedName,
-        id,
-        className,
-        "data-testid": dataTestId,
-        "data-field": resolvedField,
-        ...ariaProps
+        "data-field": resolvedField
       }
     );
   }
-  const optionTestId = (optionValue) => dataTestId ? `${dataTestId}-option-${optionValue}` : void 0;
-  const renderItem = (option) => /* @__PURE__ */ jsx(
-    SelectItem,
-    {
-      value: option.value,
-      disabled: option.disabled,
-      "data-testid": optionTestId(option.value),
-      children: renderOption ? renderOption(option) : option.label
-    },
-    option.value
+  const {
+    renderOption,
+    optionRender,
+    menuItemSelectedIcon,
+    placeholder,
+    clearLabel,
+    clearable,
+    disabled,
+    readOnly,
+    size,
+    status,
+    variant,
+    loading,
+    open,
+    defaultOpen,
+    onOpenChange,
+    notFoundContent,
+    popupMatchSelectWidth,
+    allowClear,
+    onClear,
+    value,
+    defaultValue,
+    onValueChange,
+    id,
+    className,
+    "data-testid": dataTestId,
+    ...rest
+  } = props;
+  const currentValue = value ?? uncontrolledValue;
+  const ariaProps = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key.startsWith("aria-"))
   );
+  const optionTestId = (optionValue) => dataTestId ? `${dataTestId}-option-${optionValue}` : void 0;
+  let flatIndex = 0;
+  const renderItem = (option) => {
+    const index = flatIndex++;
+    return /* @__PURE__ */ jsx(
+      SelectItem,
+      {
+        value: option.value,
+        disabled: option.disabled,
+        "data-testid": optionTestId(option.value),
+        selectedIcon: menuItemSelectedIcon,
+        children: optionRender ? optionRender(option, { index }) : renderOption ? renderOption(option) : option.label
+      },
+      option.value
+    );
+  };
   const isControlled = value !== void 0;
-  const canClear = clearable !== false && isControlled && !disabled && !readOnly;
+  const clearControl = resolveAllowClear(
+    allowClear,
+    clearable,
+    clearLabel ?? t("dataEntry.searchSelect.clear")
+  );
+  const canClear = clearControl.enabled && isControlled && !disabled && !readOnly && !loading;
   const showClear = canClear && Boolean(value);
+  const showEmptyPopup = !hasOptions && notFoundContent !== void 0;
   const select = /* @__PURE__ */ jsxs(
     SelectPrimitive.Root,
     {
@@ -336,8 +356,11 @@ function DataSelect({
           options.find((option) => option.value === next)
         );
       },
-      disabled: disabled || !hasOptions,
+      disabled: disabled || !hasOptions && !showEmptyPopup,
       name: resolvedName,
+      open,
+      defaultOpen,
+      onOpenChange,
       children: [
         /* @__PURE__ */ jsx(
           SelectTrigger,
@@ -346,33 +369,62 @@ function DataSelect({
             "data-testid": dataTestId,
             "data-field": resolvedField,
             "data-value": currentValue || void 0,
-            className: cn(showClear && "ui-control-trigger-affixed", canClear ? void 0 : className),
-            showIndicator: !showClear,
+            size,
+            variant,
+            status,
+            "aria-busy": loading || void 0,
+            className: cn(
+              (showClear || loading) && "ui-control-trigger-affixed",
+              canClear || loading ? void 0 : className
+            ),
+            showIndicator: !showClear && !loading,
             ...ariaProps,
             children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
           }
         ),
-        /* @__PURE__ */ jsx(SelectContent, { children: groupDataOptions(options).map(
-          (group) => group.heading ? /* @__PURE__ */ jsxs(SelectGroup, { children: [
-            /* @__PURE__ */ jsx(SelectLabel, { children: group.heading }),
-            group.items.map(renderItem)
-          ] }, group.heading) : /* @__PURE__ */ jsx(React.Fragment, { children: group.items.map(renderItem) }, "__ungrouped")
-        ) })
+        /* @__PURE__ */ jsxs(
+          SelectContent,
+          {
+            "data-popup-match": popupMatchSelectWidth === void 0 || popupMatchSelectWidth === true ? void 0 : popupMatchSelectWidth === false ? "content" : "fixed",
+            style: typeof popupMatchSelectWidth === "number" ? {
+              "--select-content-inline-size": `${popupMatchSelectWidth}px`
+            } : void 0,
+            children: [
+              showEmptyPopup ? /* @__PURE__ */ jsx("div", { "data-slot": "select-empty", className: "ui-select-empty", children: notFoundContent }) : null,
+              groupDataOptions(options).map(
+                (group) => group.heading ? /* @__PURE__ */ jsxs(SelectGroup, { children: [
+                  /* @__PURE__ */ jsx(SelectLabel, { children: group.heading }),
+                  group.items.map(renderItem)
+                ] }, group.heading) : /* @__PURE__ */ jsx(React.Fragment, { children: group.items.map(renderItem) }, "__ungrouped")
+              )
+            ]
+          }
+        )
       ]
     }
   );
-  if (!canClear) return select;
+  if (!canClear && !loading) return select;
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
     select,
-    showClear ? /* @__PURE__ */ jsx("div", { className: "ui-control-affix", children: /* @__PURE__ */ jsx(
+    loading ? /* @__PURE__ */ jsx("div", { className: "ui-control-affix", children: /* @__PURE__ */ jsx(
+      Loader2,
+      {
+        "data-slot": "select-loading",
+        className: "ui-control-affix-icon ui-control-affix-indicator animate-spin",
+        "aria-hidden": "true"
+      }
+    ) }) : showClear ? /* @__PURE__ */ jsx("div", { className: "ui-control-affix", children: /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        "aria-label": clearLabel ?? t("dataEntry.searchSelect.clear"),
+        "aria-label": clearControl.label,
         "data-testid": dataTestId ? `${dataTestId}-clear` : void 0,
         className: "ui-control-affix-action",
-        onClick: () => onValueChange?.("", void 0),
-        children: /* @__PURE__ */ jsx(X, { className: "ui-control-affix-icon", "aria-hidden": "true" })
+        onClick: () => {
+          onValueChange?.("", void 0);
+          onClear?.();
+        },
+        children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-control-affix-icon", "aria-hidden": "true" })
       }
     ) }) : null
   ] });

package/dist/components/data-entry/slider.d.ts

@@ -1,5 +1,13 @@
 import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
+import type { SliderTooltipProp } from "../../props/components/data-entry.prop.js";
 export type { SliderProp, SliderProp as SliderProps } from "../../props/components/data-entry.prop.js";
 /** Numeric range slider (Radix Slider). */
-export declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & {
+    range?: boolean;
+    marks?: import("../../props/components/data-entry.prop.js").SliderMarksProp;
+    dots?: boolean;
+    included?: boolean;
+    reverse?: boolean;
+    tooltip?: SliderTooltipProp;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/data-entry/slider.js

@@ -3,6 +3,26 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cn } from "../../lib/utils.js";
+function fraction(value, min, max, reverse) {
+  if (max === min) return 0;
+  const raw = (value - min) / (max - min);
+  return reverse ? 1 - raw : raw;
+}
+function markEntries(marks) {
+  if (!marks) return [];
+  return Object.entries(marks).map(([key, label]) => [Number(key), label]).filter(([at]) => Number.isFinite(at)).sort((a, b) => a[0] - b[0]);
+}
+function dotStops(min, max, step) {
+  if (!Number.isFinite(step) || step <= 0) return [];
+  const stops = [];
+  for (let at = min; at <= max; at += step) stops.push(at);
+  return stops;
+}
+function tooltipContent(tooltip, value) {
+  if (!tooltip || tooltip === true) return value;
+  if (tooltip.formatter === null) return null;
+  return tooltip.formatter ? tooltip.formatter(value) : value;
+}
 const Slider = React.forwardRef(
   ({
     className,
@@ -10,38 +30,96 @@ const Slider = React.forwardRef(
     value,
     min = 0,
     max = 100,
+    step = 1,
+    range,
+    marks,
+    dots = false,
+    included = true,
+    reverse = false,
+    tooltip = false,
+    inverted,
+    orientation = "horizontal",
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     ...props
   }, ref) => {
-    const values = React.useMemo(
-      () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
-      [defaultValue, max, min, value]
-    );
+    const values = React.useMemo(() => {
+      const given = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : null;
+      if (range === true) {
+        if (given) return given.length >= 2 ? given.slice(0, 2) : [given[0] ?? min, max];
+        return [min, max];
+      }
+      if (range === false) return given ? given.slice(0, 1) : [min];
+      return given ?? [min, max];
+    }, [defaultValue, max, min, range, value]);
     const thumbLabel = (index) => ariaLabel != null && values.length > 1 ? `${ariaLabel} ${index + 1}` : ariaLabel;
+    const ticks = markEntries(marks);
+    const stops = dots ? dotStops(min, max, typeof step === "number" ? step : 1) : [];
+    const vertical = orientation === "vertical";
+    const showTooltip = tooltip !== false && tooltip != null;
+    const offsetStyle = (at) => ({
+      [vertical ? "--slider-mark-offset-block" : "--slider-mark-offset-inline"]: `${fraction(at, min, max, reverse) * 100}%`
+    });
     return /* @__PURE__ */ jsxs(
       SliderPrimitive.Root,
       {
         ref,
         "data-slot": "slider",
+        "data-has-marks": ticks.length > 0 ? "true" : void 0,
         className: cn("ui-slider", className),
-        defaultValue,
+        defaultValue: defaultValue ?? (range === true ? [min, max] : void 0),
         min,
         max,
+        step,
         value,
+        orientation,
+        inverted: inverted ?? reverse,
         ...props,
         children: [
-          /* @__PURE__ */ jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "ui-slider-track", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: "ui-slider-range" }) }),
-          values.map((_, index) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(SliderPrimitive.Track, { "data-slot": "slider-track", className: "ui-slider-track", children: [
+            included ? /* @__PURE__ */ jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: "ui-slider-range" }) : null,
+            stops.map((at) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-slot": "slider-dot",
+                "data-active": included && at <= (values[values.length - 1] ?? min) ? "true" : void 0,
+                className: "ui-slider-dot",
+                style: offsetStyle(at),
+                "aria-hidden": "true"
+              },
+              `dot-${at}`
+            ))
+          ] }),
+          values.map((thumbValue, index) => /* @__PURE__ */ jsx(
             SliderPrimitive.Thumb,
             {
               "data-slot": "slider-thumb",
               className: "ui-slider-thumb",
               "aria-label": thumbLabel(index),
-              "aria-labelledby": ariaLabelledby
+              "aria-labelledby": ariaLabelledby,
+              children: showTooltip ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "slider-tooltip",
+                  "data-open": tooltip !== true && tooltip.open ? "true" : void 0,
+                  className: "ui-slider-tooltip",
+                  "aria-hidden": "true",
+                  children: tooltipContent(tooltip, thumbValue)
+                }
+              ) : null
             },
             index
-          ))
+          )),
+          ticks.length > 0 ? /* @__PURE__ */ jsx("span", { "data-slot": "slider-marks", className: "ui-slider-marks", "aria-hidden": "true", children: ticks.map(([at, label]) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "slider-mark",
+              className: "ui-slider-mark",
+              style: offsetStyle(at),
+              children: label
+            },
+            `mark-${at}`
+          )) }) : null
         ]
       }
     );

package/dist/components/data-entry/switch.d.ts

@@ -3,4 +3,7 @@ import * as SwitchPrimitive from "@radix-ui/react-switch";
 export type { SwitchProp, SwitchProp as SwitchProps } from "../../props/components/data-entry.prop.js";
 export declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
     size?: "sm" | "md";
+    loading?: boolean;
+    checkedChildren?: React.ReactNode;
+    unCheckedChildren?: React.ReactNode;
 } & React.RefAttributes<HTMLButtonElement>>;