@usefragments/ui 1.0.0

package/dist/components/Skeleton/Skeleton.module.scss.cjs

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const skeleton = "_skeleton_3qyea_9";
+const skeletonPulse = "_skeleton-pulse_3qyea_1";
+const fill = "_fill_3qyea_20";
+const text = "_text_3qyea_25";
+const heading = "_heading_3qyea_31";
+const avatar = "_avatar_3qyea_37";
+const avatarSm = "_avatar-sm_3qyea_41";
+const avatarMd = "_avatar-md_3qyea_46";
+const avatarLg = "_avatar-lg_3qyea_51";
+const button = "_button_3qyea_56";
+const buttonSm = "_button-sm_3qyea_60";
+const buttonMd = "_button-md_3qyea_65";
+const buttonLg = "_button-lg_3qyea_70";
+const input = "_input_3qyea_75";
+const radiusNone = "_radius-none_3qyea_81";
+const radiusSm = "_radius-sm_3qyea_85";
+const radiusMd = "_radius-md_3qyea_89";
+const radiusLg = "_radius-lg_3qyea_93";
+const radiusFull = "_radius-full_3qyea_97";
+const textContainer = "_textContainer_3qyea_101";
+const gapSm = "_gap-sm_3qyea_107";
+const gapMd = "_gap-md_3qyea_111";
+const textLine = "_textLine_3qyea_115";
+const styles = {
+  skeleton,
+  "skeleton-pulse": "_skeleton-pulse_3qyea_1",
+  skeletonPulse,
+  "static": "_static_3qyea_16",
+  fill,
+  text,
+  heading,
+  avatar,
+  "avatar-sm": "_avatar-sm_3qyea_41",
+  avatarSm,
+  "avatar-md": "_avatar-md_3qyea_46",
+  avatarMd,
+  "avatar-lg": "_avatar-lg_3qyea_51",
+  avatarLg,
+  button,
+  "button-sm": "_button-sm_3qyea_60",
+  buttonSm,
+  "button-md": "_button-md_3qyea_65",
+  buttonMd,
+  "button-lg": "_button-lg_3qyea_70",
+  buttonLg,
+  input,
+  "radius-none": "_radius-none_3qyea_81",
+  radiusNone,
+  "radius-sm": "_radius-sm_3qyea_85",
+  radiusSm,
+  "radius-md": "_radius-md_3qyea_89",
+  radiusMd,
+  "radius-lg": "_radius-lg_3qyea_93",
+  radiusLg,
+  "radius-full": "_radius-full_3qyea_97",
+  radiusFull,
+  textContainer,
+  "gap-sm": "_gap-sm_3qyea_107",
+  gapSm,
+  "gap-md": "_gap-md_3qyea_111",
+  gapMd,
+  textLine
+};
+exports.avatar = avatar;
+exports.avatarLg = avatarLg;
+exports.avatarMd = avatarMd;
+exports.avatarSm = avatarSm;
+exports.button = button;
+exports.buttonLg = buttonLg;
+exports.buttonMd = buttonMd;
+exports.buttonSm = buttonSm;
+exports.default = styles;
+exports.fill = fill;
+exports.gapMd = gapMd;
+exports.gapSm = gapSm;
+exports.heading = heading;
+exports.input = input;
+exports.radiusFull = radiusFull;
+exports.radiusLg = radiusLg;
+exports.radiusMd = radiusMd;
+exports.radiusNone = radiusNone;
+exports.radiusSm = radiusSm;
+exports.skeleton = skeleton;
+exports.skeletonPulse = skeletonPulse;
+exports.text = text;
+exports.textContainer = textContainer;
+exports.textLine = textLine;

package/dist/components/Skeleton/Skeleton.module.scss.js

@@ -0,0 +1,89 @@
+const skeleton = "_skeleton_3qyea_9";
+const skeletonPulse = "_skeleton-pulse_3qyea_1";
+const fill = "_fill_3qyea_20";
+const text = "_text_3qyea_25";
+const heading = "_heading_3qyea_31";
+const avatar = "_avatar_3qyea_37";
+const avatarSm = "_avatar-sm_3qyea_41";
+const avatarMd = "_avatar-md_3qyea_46";
+const avatarLg = "_avatar-lg_3qyea_51";
+const button = "_button_3qyea_56";
+const buttonSm = "_button-sm_3qyea_60";
+const buttonMd = "_button-md_3qyea_65";
+const buttonLg = "_button-lg_3qyea_70";
+const input = "_input_3qyea_75";
+const radiusNone = "_radius-none_3qyea_81";
+const radiusSm = "_radius-sm_3qyea_85";
+const radiusMd = "_radius-md_3qyea_89";
+const radiusLg = "_radius-lg_3qyea_93";
+const radiusFull = "_radius-full_3qyea_97";
+const textContainer = "_textContainer_3qyea_101";
+const gapSm = "_gap-sm_3qyea_107";
+const gapMd = "_gap-md_3qyea_111";
+const textLine = "_textLine_3qyea_115";
+const styles = {
+  skeleton,
+  "skeleton-pulse": "_skeleton-pulse_3qyea_1",
+  skeletonPulse,
+  "static": "_static_3qyea_16",
+  fill,
+  text,
+  heading,
+  avatar,
+  "avatar-sm": "_avatar-sm_3qyea_41",
+  avatarSm,
+  "avatar-md": "_avatar-md_3qyea_46",
+  avatarMd,
+  "avatar-lg": "_avatar-lg_3qyea_51",
+  avatarLg,
+  button,
+  "button-sm": "_button-sm_3qyea_60",
+  buttonSm,
+  "button-md": "_button-md_3qyea_65",
+  buttonMd,
+  "button-lg": "_button-lg_3qyea_70",
+  buttonLg,
+  input,
+  "radius-none": "_radius-none_3qyea_81",
+  radiusNone,
+  "radius-sm": "_radius-sm_3qyea_85",
+  radiusSm,
+  "radius-md": "_radius-md_3qyea_89",
+  radiusMd,
+  "radius-lg": "_radius-lg_3qyea_93",
+  radiusLg,
+  "radius-full": "_radius-full_3qyea_97",
+  radiusFull,
+  textContainer,
+  "gap-sm": "_gap-sm_3qyea_107",
+  gapSm,
+  "gap-md": "_gap-md_3qyea_111",
+  gapMd,
+  textLine
+};
+export {
+  avatar,
+  avatarLg,
+  avatarMd,
+  avatarSm,
+  button,
+  buttonLg,
+  buttonMd,
+  buttonSm,
+  styles as default,
+  fill,
+  gapMd,
+  gapSm,
+  heading,
+  input,
+  radiusFull,
+  radiusLg,
+  radiusMd,
+  radiusNone,
+  radiusSm,
+  skeleton,
+  skeletonPulse,
+  text,
+  textContainer,
+  textLine
+};

package/dist/components/Skeleton/index.cjs

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Skeleton_module = require("./Skeleton.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const SkeletonBase = React__namespace.forwardRef(
+  function SkeletonBase2({
+    variant = "rect",
+    size = "md",
+    width,
+    height,
+    fill = false,
+    radius,
+    static: isStatic = false,
+    className,
+    ...htmlProps
+  }, ref) {
+    const classes = [
+      Skeleton_module.default.skeleton,
+      Skeleton_module.default[variant],
+      variant === "avatar" && Skeleton_module.default[`avatar-${size}`],
+      variant === "button" && Skeleton_module.default[`button-${size}`],
+      fill && Skeleton_module.default.fill,
+      radius && Skeleton_module.default[`radius-${radius}`],
+      isStatic && Skeleton_module.default.static,
+      className
+    ].filter(Boolean).join(" ");
+    const style = {};
+    if (width !== void 0) {
+      style.width = typeof width === "number" ? `${width}px` : width;
+    }
+    if (height !== void 0) {
+      style.height = typeof height === "number" ? `${height}px` : height;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        ...htmlProps,
+        className: classes,
+        style: Object.keys(style).length > 0 ? style : void 0,
+        "aria-hidden": "true"
+      }
+    );
+  }
+);
+function SkeletonText({
+  lines = 3,
+  lastLineWidth = 80,
+  gap = "sm",
+  className,
+  ...htmlProps
+}) {
+  const containerClasses = [
+    Skeleton_module.default.textContainer,
+    Skeleton_module.default[`gap-${gap}`],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: containerClasses, "aria-hidden": "true", children: Array.from({ length: lines }, (_, lineIdx) => {
+    const isLast = lineIdx === lines - 1;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: Skeleton_module.default.textLine,
+        style: isLast && lines > 1 ? { width: `${lastLineWidth}%` } : void 0
+      },
+      `line-${lineIdx}`
+    );
+  }) });
+}
+function SkeletonCircle({
+  size = "md",
+  className
+}) {
+  if (typeof size === "number") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SkeletonBase,
+      {
+        variant: "rect",
+        width: size,
+        height: size,
+        radius: "full",
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { variant: "avatar", size, className });
+}
+const Skeleton = Object.assign(SkeletonBase, {
+  Text: SkeletonText,
+  Circle: SkeletonCircle
+});
+exports.Skeleton = Skeleton;

package/dist/components/Skeleton/index.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+export type SkeletonVariant = 'text' | 'heading' | 'avatar' | 'button' | 'input' | 'rect';
+export type SkeletonSize = 'sm' | 'md' | 'lg';
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Semantic variant that auto-sizes based on design tokens.
+     * @default 'rect'
+     */
+    variant?: SkeletonVariant;
+    /**
+     * Size variant for avatar/button. Ignored for text/heading/input.
+     * @default 'md'
+     */
+    size?: SkeletonSize;
+    /**
+     * Width in pixels or CSS value. Auto-determined for most variants.
+     */
+    width?: number | string;
+    /**
+     * Height in pixels or CSS value. Auto-determined for semantic variants.
+     */
+    height?: number | string;
+    /**
+     * Fill parent container (100% width and height).
+     * Useful when parent has explicit dimensions.
+     */
+    fill?: boolean;
+    /**
+     * Border radius override. Auto-determined for most variants.
+     */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    /**
+     * Disable animation for reduced motion preference.
+     * @default false
+     */
+    static?: boolean;
+}
+export interface SkeletonTextProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Number of text lines to render */
+    lines?: number;
+    /**
+     * Width of last line as percentage.
+     * Creates natural paragraph appearance.
+     * @default 80
+     */
+    lastLineWidth?: number;
+    /** Gap between lines. Uses spacing tokens. */
+    gap?: 'sm' | 'md';
+}
+declare function SkeletonText({ lines, lastLineWidth, gap, className, ...htmlProps }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+declare function SkeletonCircle({ size, className, }: {
+    size?: SkeletonSize | number;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>> & {
+    Text: typeof SkeletonText;
+    Circle: typeof SkeletonCircle;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,MAAM,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC9C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC/F,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB;AAyDD,iBAAS,YAAY,CAAC,EACpB,KAAS,EACT,aAAkB,EAClB,GAAU,EACV,SAAS,EACT,GAAG,SAAS,EACb,EAAE,iBAAiB,2CAqBnB;AAMD,iBAAS,cAAc,CAAC,EACtB,IAAW,EACX,SAAS,GACV,EAAE;IACD,IAAI,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAaA;AAMD,eAAO,MAAM,QAAQ;;;CAGnB,CAAC"}

package/dist/components/Skeleton/index.js

@@ -0,0 +1,93 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./Skeleton.module.scss.js";
+const SkeletonBase = React.forwardRef(
+  function SkeletonBase2({
+    variant = "rect",
+    size = "md",
+    width,
+    height,
+    fill = false,
+    radius,
+    static: isStatic = false,
+    className,
+    ...htmlProps
+  }, ref) {
+    const classes = [
+      styles.skeleton,
+      styles[variant],
+      variant === "avatar" && styles[`avatar-${size}`],
+      variant === "button" && styles[`button-${size}`],
+      fill && styles.fill,
+      radius && styles[`radius-${radius}`],
+      isStatic && styles.static,
+      className
+    ].filter(Boolean).join(" ");
+    const style = {};
+    if (width !== void 0) {
+      style.width = typeof width === "number" ? `${width}px` : width;
+    }
+    if (height !== void 0) {
+      style.height = typeof height === "number" ? `${height}px` : height;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...htmlProps,
+        className: classes,
+        style: Object.keys(style).length > 0 ? style : void 0,
+        "aria-hidden": "true"
+      }
+    );
+  }
+);
+function SkeletonText({
+  lines = 3,
+  lastLineWidth = 80,
+  gap = "sm",
+  className,
+  ...htmlProps
+}) {
+  const containerClasses = [
+    styles.textContainer,
+    styles[`gap-${gap}`],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: containerClasses, "aria-hidden": "true", children: Array.from({ length: lines }, (_, lineIdx) => {
+    const isLast = lineIdx === lines - 1;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.textLine,
+        style: isLast && lines > 1 ? { width: `${lastLineWidth}%` } : void 0
+      },
+      `line-${lineIdx}`
+    );
+  }) });
+}
+function SkeletonCircle({
+  size = "md",
+  className
+}) {
+  if (typeof size === "number") {
+    return /* @__PURE__ */ jsx(
+      SkeletonBase,
+      {
+        variant: "rect",
+        width: size,
+        height: size,
+        radius: "full",
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(SkeletonBase, { variant: "avatar", size, className });
+}
+const Skeleton = Object.assign(SkeletonBase, {
+  Text: SkeletonText,
+  Circle: SkeletonCircle
+});
+export {
+  Skeleton
+};

package/dist/components/Slider/Slider.module.scss.cjs

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const wrapper = "_wrapper_1ehy2_1";
+const header = "_header_1ehy2_6";
+const label = "_label_1ehy2_13";
+const value = "_value_1ehy2_20";
+const root = "_root_1ehy2_28";
+const control = "_control_1ehy2_32";
+const track = "_track_1ehy2_38";
+const indicator = "_indicator_1ehy2_52";
+const thumb = "_thumb_1ehy2_59";
+const helper = "_helper_1ehy2_88";
+const helperError = "_helperError_1ehy2_95";
+const dragValueBubble = "_dragValueBubble_1ehy2_99";
+const styles = {
+  wrapper,
+  header,
+  label,
+  value,
+  root,
+  control,
+  track,
+  indicator,
+  thumb,
+  helper,
+  helperError,
+  dragValueBubble
+};
+exports.control = control;
+exports.default = styles;
+exports.dragValueBubble = dragValueBubble;
+exports.header = header;
+exports.helper = helper;
+exports.helperError = helperError;
+exports.indicator = indicator;
+exports.label = label;
+exports.root = root;
+exports.thumb = thumb;
+exports.track = track;
+exports.value = value;
+exports.wrapper = wrapper;

package/dist/components/Slider/Slider.module.scss.js

@@ -0,0 +1,41 @@
+const wrapper = "_wrapper_1ehy2_1";
+const header = "_header_1ehy2_6";
+const label = "_label_1ehy2_13";
+const value = "_value_1ehy2_20";
+const root = "_root_1ehy2_28";
+const control = "_control_1ehy2_32";
+const track = "_track_1ehy2_38";
+const indicator = "_indicator_1ehy2_52";
+const thumb = "_thumb_1ehy2_59";
+const helper = "_helper_1ehy2_88";
+const helperError = "_helperError_1ehy2_95";
+const dragValueBubble = "_dragValueBubble_1ehy2_99";
+const styles = {
+  wrapper,
+  header,
+  label,
+  value,
+  root,
+  control,
+  track,
+  indicator,
+  thumb,
+  helper,
+  helperError,
+  dragValueBubble
+};
+export {
+  control,
+  styles as default,
+  dragValueBubble,
+  header,
+  helper,
+  helperError,
+  indicator,
+  label,
+  root,
+  thumb,
+  track,
+  value,
+  wrapper
+};

package/dist/components/Slider/index.cjs

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const field = require("@base-ui/react/field");
+const slider = require("@base-ui/react/slider");
+const Slider_module = require("./Slider.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const SliderRoot = React__namespace.forwardRef(function Slider2({
+  label,
+  helperText,
+  error = false,
+  value,
+  defaultValue,
+  onChange,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  showValue = false,
+  showValueOnDrag = false,
+  valueSuffix = "",
+  disabled = false,
+  className,
+  name,
+  form,
+  onValueCommitted,
+  largeStep,
+  thumbAlignment,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...htmlProps
+}, ref) {
+  const [internalValue, setInternalValue] = React__namespace.useState(defaultValue ?? min);
+  const [isDragging, setIsDragging] = React__namespace.useState(false);
+  const displayValue = value !== void 0 ? value : internalValue;
+  const resolvedOnChange = onChange ?? onValueChange;
+  const handleChange = (newValue) => {
+    const val = Array.isArray(newValue) ? newValue[0] : newValue;
+    setInternalValue(val);
+    resolvedOnChange == null ? void 0 : resolvedOnChange(val);
+  };
+  const handleValueCommitted = (newValue) => {
+    const val = Array.isArray(newValue) ? newValue[0] : newValue;
+    onValueCommitted == null ? void 0 : onValueCommitted(val);
+  };
+  const handleDragStart = () => {
+    if (!disabled && showValueOnDrag) {
+      setIsDragging(true);
+    }
+  };
+  React__namespace.useEffect(() => {
+    if (!isDragging) return;
+    const handlePointerEnd = () => setIsDragging(false);
+    window.addEventListener("pointerup", handlePointerEnd);
+    window.addEventListener("pointercancel", handlePointerEnd);
+    return () => {
+      window.removeEventListener("pointerup", handlePointerEnd);
+      window.removeEventListener("pointercancel", handlePointerEnd);
+    };
+  }, [isDragging]);
+  React__namespace.useEffect(() => {
+    if (disabled && isDragging) {
+      setIsDragging(false);
+    }
+  }, [disabled, isDragging]);
+  const helperClasses = [Slider_module.default.helper, error && Slider_module.default.helperError].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    field.Field.Root,
+    {
+      ...htmlProps,
+      disabled,
+      invalid: error,
+      className: [Slider_module.default.wrapper, className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          slider.Slider.Root,
+          {
+            ref,
+            value: value !== void 0 ? [value] : void 0,
+            defaultValue: defaultValue !== void 0 ? [defaultValue] : void 0,
+            onValueChange: handleChange,
+            min,
+            max,
+            step,
+            disabled,
+            name,
+            form,
+            onValueCommitted: handleValueCommitted,
+            largeStep,
+            thumbAlignment,
+            id,
+            "aria-label": ariaLabel || (label ? void 0 : "Slider"),
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            className: Slider_module.default.root,
+            onPointerDownCapture: handleDragStart,
+            children: [
+              (label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Slider_module.default.header, children: [
+                label && /* @__PURE__ */ jsxRuntime.jsx(slider.Slider.Label, { className: Slider_module.default.label, children: label }),
+                showValue && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Slider_module.default.value, children: [
+                  displayValue,
+                  valueSuffix
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(slider.Slider.Control, { className: Slider_module.default.control, children: /* @__PURE__ */ jsxRuntime.jsxs(slider.Slider.Track, { className: Slider_module.default.track, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(slider.Slider.Indicator, { className: Slider_module.default.indicator }),
+                /* @__PURE__ */ jsxRuntime.jsx(slider.Slider.Thumb, { className: Slider_module.default.thumb, children: showValueOnDrag && isDragging && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Slider_module.default.dragValueBubble, "aria-hidden": "true", children: [
+                  displayValue,
+                  valueSuffix
+                ] }) })
+              ] }) })
+            ]
+          }
+        ),
+        helperText && /* @__PURE__ */ jsxRuntime.jsx(field.Field.Description, { className: helperClasses, children: helperText })
+      ]
+    }
+  );
+});
+const Slider = Object.assign(SliderRoot, {
+  Root: SliderRoot
+});
+exports.Slider = Slider;