@commercetools/nimbus 3.2.0 → 3.4.0

package/dist/components/search-input-field.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-input-field.es.js","names":[],"sources":["../../src/patterns/fields/search-input-field/search-input-field.tsx"],"sourcesContent":["import { SearchInput } from \"@/components/search-input/search-input\";\nimport type { SearchInputFieldProps } from \"./search-input-field.types\";\nimport { FormField, FieldErrors } from \"@/components\";\n\n/**\n * # SearchInputField\n *\n * A pre-composed form field component that combines SearchInput with FormField features\n * like labels, descriptions, error handling, and validation feedback.\n *\n * This component provides a simple, flat API for search input use cases with built-in\n * search icon, clear functionality, and proper validation.\n *\n * @supportsStyleProps\n *\n * @example\n * ```tsx\n * <SearchInputField\n *   label=\"Search products\"\n *   description=\"Enter keywords to search\"\n *   value={searchValue}\n *   onChange={setSearchValue}\n *   placeholder=\"Search...\"\n *   errors={{ missing: true }}\n *   touched={touched}\n *   isRequired\n * />\n * ```\n */\n\nexport const SearchInputField = ({\n  id,\n  label,\n  description,\n  info,\n  errors,\n  renderError,\n  touched = false,\n  isRequired = false,\n  isDisabled = false,\n  isReadOnly = false,\n  isInvalid = false,\n  size = \"md\",\n  ...searchInputProps\n}: SearchInputFieldProps) => {\n  // Determine if we should show errors\n  const hasErrors = touched && errors && Object.values(errors).some(Boolean);\n\n  return (\n    <FormField.Root\n      id={id}\n      size={size}\n      isInvalid={hasErrors || isInvalid}\n      isRequired={isRequired}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n    >\n      <FormField.Label>{label}</FormField.Label>\n      <FormField.Input>\n        <SearchInput size={size} {...searchInputProps} />\n      </FormField.Input>\n\n      {description && (\n        <FormField.Description>{description}</FormField.Description>\n      )}\n\n      {info && <FormField.InfoBox>{info}</FormField.InfoBox>}\n      {hasErrors && (\n        <FormField.Error>\n          <FieldErrors\n            id={`${id}-errors`}\n            errors={errors}\n            renderError={renderError}\n          />\n        </FormField.Error>\n      )}\n    </FormField.Root>\n  );\n};\n\nSearchInputField.displayName = \"SearchInputField\";\n"],"mappings":";;;;;AA8BA,IAAa,KAAoB,EAC/B,OACA,UACA,gBACA,SACA,WACA,gBACA,aAAU,IACV,gBAAa,IACb,gBAAa,IACb,gBAAa,IACb,eAAY,IACZ,UAAO,MACP,GAAG,QACwB;CAE3B,IAAM,IAAY,KAAW,KAAU,OAAO,OAAO,CAAM,EAAE,KAAK,OAAO;CAEzE,OACE,kBAAC,EAAU,MAAX;EACM;EACE;EACN,WAAW,KAAa;EACZ;EACA;EACA;YANd;GAQE,kBAAC,EAAU,OAAX,EAAA,UAAkB,EAAuB,CAAA;GACzC,kBAAC,EAAU,OAAX,EAAA,UACE,kBAAC,GAAD;IAAmB;IAAM,GAAI;GAAmB,CAAA,EACjC,CAAA;GAEhB,KACC,kBAAC,EAAU,aAAX,EAAA,UAAwB,EAAmC,CAAA;GAG5D,KAAQ,kBAAC,EAAU,SAAX,EAAA,UAAoB,EAAwB,CAAA;GACpD,KACC,kBAAC,EAAU,OAAX,EAAA,UACE,kBAAC,GAAD;IACE,IAAI,GAAG,EAAG;IACF;IACK;GACd,CAAA,EACc,CAAA;EAEL;;AAEpB;AAEA,EAAiB,cAAc"}
+{"version":3,"file":"search-input-field.es.js","names":[],"sources":["../../src/patterns/fields/search-input-field/search-input-field.tsx"],"sourcesContent":["import { SearchInput } from \"@/components/search-input/search-input\";\nimport type { SearchInputFieldProps } from \"./search-input-field.types\";\nimport { FormField, FieldErrors } from \"@/components\";\n\n/**\n * # SearchInputField\n *\n * A pre-composed form field component that combines SearchInput with FormField features\n * like labels, descriptions, error handling, and validation feedback.\n *\n * This component provides a simple, flat API for search input use cases with built-in\n * search icon, clear functionality, and proper validation.\n *\n * @supportsStyleProps\n *\n * @example\n * ```tsx\n * <SearchInputField\n *   label=\"Search products\"\n *   description=\"Enter keywords to search\"\n *   value={searchValue}\n *   onChange={setSearchValue}\n *   placeholder=\"Search...\"\n *   errors={{ missing: true }}\n *   touched={touched}\n *   isRequired\n * />\n * ```\n */\n\nexport const SearchInputField = ({\n  id,\n  label,\n  description,\n  info,\n  errors,\n  renderError,\n  touched = false,\n  isRequired = false,\n  isDisabled = false,\n  isReadOnly = false,\n  isInvalid = false,\n  size = \"md\",\n  ...searchInputProps\n}: SearchInputFieldProps) => {\n  // Determine if we should show errors\n  const hasErrors = touched && errors && Object.values(errors).some(Boolean);\n\n  return (\n    <FormField.Root\n      id={id}\n      size={size}\n      isInvalid={hasErrors || isInvalid}\n      isRequired={isRequired}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n    >\n      <FormField.Label>{label}</FormField.Label>\n      <FormField.Input>\n        <SearchInput size={size} {...searchInputProps} />\n      </FormField.Input>\n\n      {description && (\n        <FormField.Description>{description}</FormField.Description>\n      )}\n\n      {info && <FormField.InfoBox>{info}</FormField.InfoBox>}\n      {hasErrors && (\n        <FormField.Error>\n          <FieldErrors\n            id={`${id}-errors`}\n            errors={errors}\n            renderError={renderError}\n          />\n        </FormField.Error>\n      )}\n    </FormField.Root>\n  );\n};\n\nSearchInputField.displayName = \"SearchInputField\";\n"],"mappings":";;;;;AA8BA,IAAa,KAAoB,EAC/B,OACA,UACA,gBACA,SACA,WACA,gBACA,aAAU,IACV,gBAAa,IACb,gBAAa,IACb,gBAAa,IACb,eAAY,IACZ,UAAO,MACP,GAAG,QACwB;CAE3B,IAAM,IAAY,KAAW,KAAU,OAAO,OAAO,CAAM,CAAC,CAAC,KAAK,OAAO;CAEzE,OACE,kBAAC,EAAU,MAAX;EACM;EACE;EACN,WAAW,KAAa;EACZ;EACA;EACA;YANd;GAQE,kBAAC,EAAU,OAAX,EAAA,UAAkB,EAAuB,CAAA;GACzC,kBAAC,EAAU,OAAX,EAAA,UACE,kBAAC,GAAD;IAAmB;IAAM,GAAI;GAAmB,CAAA,EACjC,CAAA;GAEhB,KACC,kBAAC,EAAU,aAAX,EAAA,UAAwB,EAAmC,CAAA;GAG5D,KAAQ,kBAAC,EAAU,SAAX,EAAA,UAAoB,EAAwB,CAAA;GACpD,KACC,kBAAC,EAAU,OAAX,EAAA,UACE,kBAAC,GAAD;IACE,IAAI,GAAG,EAAG;IACF;IACK;GACd,CAAA,EACc,CAAA;EAEL;;AAEpB;AAEA,EAAiB,cAAc"}

package/dist/components/search-input.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/search-input-CKPkr04J.cjs.js");exports.SearchInput=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/search-input-Cocic3Im.cjs.js");exports.SearchInput=e.t;

package/dist/components/search-input.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/search-input-B8x2RfaD.esm.js";
+import { t as e } from "../chunks/search-input-DLixG2wL.esm.js";
 export { e as SearchInput };

package/dist/components/select.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/select-CGaE3Evf.cjs.js");exports.Select=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/select-g5OICT61.cjs.js");exports.Select=e.t;

package/dist/components/select.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/select-y9rE7u48.esm.js";
+import { t as e } from "../chunks/select-CZzyQOhP.esm.js";
 export { e as Select };

package/dist/components/separator.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/separator-3CE8vnut.cjs.js");exports.Separator=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/separator-DW1Lj5oz.cjs.js");exports.Separator=e.t;

package/dist/components/separator.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/separator-suOMmYFe.esm.js";
+import { t as e } from "../chunks/separator-DYgOOvtr.esm.js";
 export { e as Separator };

package/dist/components/skeleton/derivatives/skeleton-circle/index.d.ts

@@ -0,0 +1,2 @@
+export { SkeletonCircle } from './skeleton-circle.js';
+export type { SkeletonCircleProps } from './skeleton-circle.types.js';

package/dist/components/skeleton/derivatives/skeleton-circle/skeleton-circle.d.ts

@@ -0,0 +1,17 @@
+import { SkeletonCircleProps } from './skeleton-circle.types.js';
+/**
+ * # SkeletonCircle
+ *
+ * A circular loading placeholder. Sugar over `Skeleton` with `shape="circle"`:
+ * size it with the avatar-aligned `size` prop (inherited from `Skeleton`) to
+ * stand in for an `Avatar`, or with a `boxSize` style prop for a custom
+ * dimension. Defaults to a `1em` circle, useful inline.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/feedback/skeletoncircle}
+ *
+ * @supportsStyleProps
+ */
+export declare const SkeletonCircle: {
+    (props: SkeletonCircleProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/skeleton/derivatives/skeleton-circle/skeleton-circle.types.d.ts

@@ -0,0 +1,21 @@
+import { OmitInternalProps } from '../../../../type-utils/omit-props.js';
+import { SkeletonRootSlotProps } from '../../skeleton.types.js';
+/**
+ * Props for the SkeletonCircle component.
+ *
+ * A circular loading placeholder. Inherits the base `Skeleton` props: use the
+ * avatar-aligned `size` prop (`2xs`/`xs`/`md`) to match an `Avatar`, or a
+ * `boxSize` style prop for a custom dimension. `width`/`height` and `shape` are
+ * omitted — it always renders as a circle, and defaults to `1em` when unsized.
+ */
+export type SkeletonCircleProps = OmitInternalProps<SkeletonRootSlotProps, "width" | "height" | "shape"> & {
+    /**
+     * Whether the element is hidden from assistive technology.
+     * @default true
+     */
+    "aria-hidden"?: boolean | "true" | "false";
+    /**
+     * Ref forwarding to the root element.
+     */
+    ref?: React.Ref<HTMLDivElement>;
+};

package/dist/components/skeleton/derivatives/skeleton-text/index.d.ts

@@ -0,0 +1,2 @@
+export { SkeletonText } from './skeleton-text.js';
+export type { SkeletonTextProps } from './skeleton-text.types.js';

package/dist/components/skeleton/derivatives/skeleton-text/skeleton-text.d.ts

@@ -0,0 +1,16 @@
+import { SkeletonTextProps } from './skeleton-text.types.js';
+/**
+ * # SkeletonText
+ *
+ * A stack of placeholder lines that approximates a paragraph of text while
+ * content loads. The last line is narrower by default to mimic a real paragraph
+ * ending. Composed of `Skeleton` lines; does not use its own recipe.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/feedback/skeletontext}
+ *
+ * @supportsStyleProps
+ */
+export declare const SkeletonText: {
+    (props: SkeletonTextProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/skeleton/derivatives/skeleton-text/skeleton-text.types.d.ts

@@ -0,0 +1,45 @@
+import { OmitInternalProps } from '../../../../type-utils/omit-props.js';
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { SkeletonRecipeProps } from '../../skeleton.types.js';
+/**
+ * Props for the SkeletonText component.
+ * Renders a stack of N placeholder lines to approximate a paragraph of text.
+ *
+ * Note: `shape` is intentionally absent — SkeletonText lines are always
+ * rectangles. Use `Skeleton shape="circle"` or `SkeletonCircle` for circular
+ * placeholders.
+ */
+export type SkeletonTextProps = OmitInternalProps<HTMLChakraProps<"div">> & {
+    /**
+     * Number of placeholder lines to render.
+     * @default 3
+     */
+    lines?: number;
+    /**
+     * Nimbus text style the placeholder should visually match (e.g. `"body"`,
+     * `"caption"`, `"3xl"`). Each line becomes a `1lh` line-box sized by this
+     * style, with a `0.75em` (≈ cap-height) bar centered in it — so the whole
+     * placeholder scales to the same vertical rhythm as real text of that style.
+     * @default "body"
+     */
+    textStyle?: HTMLChakraProps<"div">["textStyle"];
+    /**
+     * Width of the last line, narrower to mimic a paragraph ending.
+     * @default "60%"
+     */
+    lastLineWidth?: string | number;
+    /**
+     * Animation forwarded to each Skeleton line.
+     * @default "pulse"
+     */
+    animation?: SkeletonRecipeProps["animation"];
+    /**
+     * Whether the container is hidden from assistive technology.
+     * @default true
+     */
+    "aria-hidden"?: boolean | "true" | "false";
+    /**
+     * Ref forwarding to the root container element.
+     */
+    ref?: React.Ref<HTMLDivElement>;
+};

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

@@ -0,0 +1,6 @@
+export { Skeleton } from './skeleton.js';
+export type { SkeletonProps, SkeletonRecipeProps } from './skeleton.types.js';
+export { SkeletonText } from './derivatives/skeleton-text/index.js';
+export type { SkeletonTextProps } from './derivatives/skeleton-text/index.js';
+export { SkeletonCircle } from './derivatives/skeleton-circle/index.js';
+export type { SkeletonCircleProps } from './derivatives/skeleton-circle/index.js';

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,20 @@
+import { SkeletonProps } from './skeleton.types.js';
+/**
+ * # Skeleton
+ *
+ * A loading placeholder that holds space for content while it loads.
+ * Renders as a muted, optionally animated shape to reduce layout shift.
+ * Decorative by default (`aria-hidden="true"`); reduced motion is respected.
+ *
+ * Two derivatives are built on top of this base and live under `derivatives/`:
+ * `SkeletonText` (a paragraph of lines) and `SkeletonCircle` (an avatar-sized
+ * circle).
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/feedback/skeleton}
+ *
+ * @supportsStyleProps
+ */
+export declare const Skeleton: {
+    (props: SkeletonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/skeleton/skeleton.recipe.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Recipe configuration for the Skeleton component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ *
+ * Animations:
+ * - pulse: reuses the existing `pulse` keyframe (opacity oscillation)
+ * - wave: uses the `skeleton-wave` keyframe with an `::after` gradient sweep
+ * - none: no animation
+ *
+ * The wave shimmer highlight color uses a CSS custom property
+ * `--skeleton-shimmer-color` with a `_dark` override for proper dark-mode support.
+ * All animations are disabled under `prefers-reduced-motion`.
+ */
+export declare const skeletonRecipe: import('@chakra-ui/react').RecipeDefinition<{
+    size: {
+        "2xs": {
+            boxSize: "600";
+        };
+        xs: {
+            boxSize: "800";
+        };
+        md: {
+            boxSize: "1000";
+        };
+    };
+    shape: {
+        rectangle: {
+            borderRadius: "{radii.100}";
+        };
+        circle: {
+            borderRadius: "full";
+            aspectRatio: "1 / 1";
+        };
+    };
+    animation: {
+        pulse: {
+            animation: "pulse 2s ease-in-out infinite";
+        };
+        wave: {
+            "--skeleton-shimmer-color": "rgba(255, 255, 255, 0.6)";
+            _dark: {
+                "--skeleton-shimmer-color": "rgba(255, 255, 255, 0.13)";
+            };
+            "&::after": {
+                content: "\"\"";
+                position: "absolute";
+                top: "0";
+                left: "0";
+                right: "0";
+                bottom: "0";
+                backgroundImage: "linear-gradient(90deg, transparent, var(--skeleton-shimmer-color), transparent)";
+                animation: "skeleton-wave 1.6s ease-in-out 0.5s infinite";
+            };
+        };
+        none: {
+            animation: "none";
+        };
+    };
+}>;

package/dist/components/skeleton/skeleton.slots.d.ts

@@ -0,0 +1,7 @@
+import { SlotComponent } from '../../type-utils/index.js';
+import { SkeletonRootSlotProps } from './skeleton.types.js';
+/**
+ * Root component that provides the styling context for the Skeleton component.
+ * Uses Chakra UI's recipe context system for consistent styling across instances.
+ */
+export declare const SkeletonRoot: SlotComponent<HTMLDivElement, SkeletonRootSlotProps>;

package/dist/components/skeleton/skeleton.types.d.ts

@@ -0,0 +1,50 @@
+import { OmitInternalProps } from '../../type-utils/omit-props.js';
+import { HTMLChakraProps, UnstyledProp } from '@chakra-ui/react/styled-system';
+export type SkeletonRecipeProps = {
+    /**
+     * Named square size, aligned with the Avatar size scale
+     * (`2xs` = 24px, `xs` = 32px, `md` = 40px), applied as equal width and height.
+     * Opt-in with no default — leave unset and size the placeholder with
+     * `width`/`height`/`boxSize` instead. `SkeletonCircle` reuses this to size its
+     * circle.
+     */
+    size?: "2xs" | "xs" | "md";
+    /**
+     * Shape variant of the skeleton placeholder.
+     * - rectangle: default shape with small border radius (~4px)
+     * - circle: fully-rounded with 1:1 aspect ratio
+     * @default "rectangle"
+     */
+    shape?: "rectangle" | "circle";
+    /**
+     * Animation variant of the skeleton placeholder.
+     * - pulse: opacity oscillation (default)
+     * - wave: gradient shimmer sweep via ::after pseudo-element
+     * - none: no animation
+     * @default "pulse"
+     */
+    animation?: "pulse" | "wave" | "none";
+} & UnstyledProp;
+export type SkeletonRootSlotProps = HTMLChakraProps<"div", SkeletonRecipeProps>;
+/**
+ * Props for the Skeleton component.
+ * Renders a single block-level loading placeholder element.
+ * Accepts all standard Chakra UI style props for sizing and positioning
+ * (e.g. `width`, `height`, `borderRadius`).
+ */
+export type SkeletonProps = OmitInternalProps<SkeletonRootSlotProps> & {
+    /**
+     * Whether the element is hidden from assistive technology.
+     * Skeleton placeholders are decorative by default.
+     * @default true
+     */
+    "aria-hidden"?: boolean | "true" | "false";
+    /**
+     * Ref forwarding to the root element.
+     */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Data attributes for testing or custom metadata.
+     */
+    [key: `data-${string}`]: unknown;
+};

package/dist/components/skeleton-circle.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/skeleton-circle-CbqEiVJ8.cjs.js");exports.SkeletonCircle=e.t;

package/dist/components/skeleton-circle.es.js

@@ -0,0 +1,2 @@
+import { t as e } from "../chunks/skeleton-circle-C5RFsv29.esm.js";
+export { e as SkeletonCircle };

package/dist/components/skeleton-text.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/skeleton-text-CEr3QStr.cjs.js");exports.SkeletonText=e.t;

package/dist/components/skeleton-text.es.js

@@ -0,0 +1,2 @@
+import { t as e } from "../chunks/skeleton-text-B-r_Iovw.esm.js";
+export { e as SkeletonText };

package/dist/components/skeleton.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/skeleton-SWjnk1LM.cjs.js"),t=require("../chunks/skeleton-text-CEr3QStr.cjs.js");require("./skeleton-text.cjs");const n=require("../chunks/skeleton-circle-CbqEiVJ8.cjs.js");require("./skeleton-circle.cjs"),exports.Skeleton=e.t,exports.SkeletonCircle=n.t,exports.SkeletonText=t.t;

package/dist/components/skeleton.es.js

@@ -0,0 +1,6 @@
+import { t as e } from "../chunks/skeleton-C-MXf-Vh.esm.js";
+import { t } from "../chunks/skeleton-text-B-r_Iovw.esm.js";
+import "./skeleton-text.es.js";
+import { t as n } from "../chunks/skeleton-circle-C5RFsv29.esm.js";
+import "./skeleton-circle.es.js";
+export { e as Skeleton, n as SkeletonCircle, t as SkeletonText };

package/dist/components/slider/derivatives/range-slider/index.d.ts

@@ -0,0 +1,2 @@
+export { RangeSlider } from './range-slider.js';
+export type { RangeSliderProps } from './range-slider.types.js';

package/dist/components/slider/derivatives/range-slider/range-slider.d.ts

@@ -0,0 +1,20 @@
+import { RangeSliderProps } from './range-slider.types.js';
+/**
+ * # RangeSlider
+ *
+ * A two-thumb slider for selecting a `[min, max]` numeric range within bounds.
+ * Wraps React Aria's Slider with two thumbs; the thumbs cannot cross. Each
+ * thumb's current value is shown in its own tooltip while it's hovered,
+ * focused, or dragged.
+ *
+ * Each thumb needs its own accessible name — provide `thumbLabels` (e.g.
+ * `["Minimum price", "Maximum price"]`); when omitted, the thumbs fall back
+ * to localized "Minimum" / "Maximum" labels rather than being left
+ * anonymous. The control as a whole still needs an accessible name of its
+ * own too: provide an `aria-label` (or use inside `FormField`), same as
+ * `Slider`.
+ */
+export declare const RangeSlider: {
+    (props: RangeSliderProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/slider/derivatives/range-slider/range-slider.types.d.ts

@@ -0,0 +1,13 @@
+import { SliderSharedProps } from '../../slider.types.js';
+/**
+ * Props for the `RangeSlider` component — a two-thumb slider selecting a
+ * `[min, max]` numeric range. Shares the whole prop surface of `Slider` (via
+ * {@link SliderSharedProps}) but specializes `value`/`defaultValue`/`onChange`/
+ * `onChangeEnd` to operate on a `[number, number]` tuple.
+ */
+export type RangeSliderProps = SliderSharedProps & {
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onChange?: (value: [number, number]) => void;
+    onChangeEnd?: (value: [number, number]) => void;
+};

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

@@ -0,0 +1,4 @@
+export { Slider } from './slider.js';
+export type { SliderProps } from './slider.types.js';
+export { RangeSlider } from './derivatives/range-slider/index.js';
+export type { RangeSliderProps } from './derivatives/range-slider/index.js';

package/dist/components/slider/intl/de.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Pre-compiled de messages for Slider
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    maximumThumb: string;
+    minimumThumb: string;
+};
+export default _default;

package/dist/components/slider/intl/en.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Pre-compiled en messages for Slider
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    maximumThumb: string;
+    minimumThumb: string;
+};
+export default _default;

package/dist/components/slider/intl/es.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Pre-compiled es messages for Slider
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    maximumThumb: string;
+    minimumThumb: string;
+};
+export default _default;

package/dist/components/slider/intl/fr-FR.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Pre-compiled fr-FR messages for Slider
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    maximumThumb: string;
+    minimumThumb: string;
+};
+export default _default;

package/dist/components/slider/intl/pt-BR.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Pre-compiled pt-BR messages for Slider
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    maximumThumb: string;
+    minimumThumb: string;
+};
+export default _default;

package/dist/components/slider/slider-base.d.ts

@@ -0,0 +1,10 @@
+import { SliderBaseProps } from './slider.types.js';
+/**
+ * Shared internal implementation for Slider and RangeSlider. Renders the full
+ * React Aria Slider anatomy for any number of thumbs (driven by state.values),
+ * each thumb showing its current value in a tooltip.
+ */
+export declare const SliderBase: {
+    (props: SliderBaseProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,13 @@
+import { SliderProps } from './slider.types.js';
+/**
+ * # Slider
+ *
+ * A single-thumb slider for selecting one numeric value within a range. Wraps
+ * React Aria's Slider with Nimbus styling; the current value is shown in a
+ * tooltip on the handle while hovering, focusing, or dragging. Provide an
+ * `aria-label` (or use inside `FormField`) for the accessible name.
+ */
+export declare const Slider: {
+    (props: SliderProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/slider/slider.i18n.d.ts

@@ -0,0 +1,12 @@
+export declare const messages: {
+    minimumThumb: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    maximumThumb: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/dist/components/slider/slider.messages.d.ts

@@ -0,0 +1,6 @@
+import { LocalizedString, LocalizedStrings } from '@internationalized/string';
+export declare const sliderMessagesStrings: LocalizedStrings<string, LocalizedString>;
+/**
+ * Available message keys for Slider component
+ */
+export type SliderMessageKey = "maximumThumb" | "minimumThumb";

package/dist/components/slider/slider.recipe.d.ts

@@ -0,0 +1,138 @@
+/**
+ * Recipe for Slider / RangeSlider components.
+ * Slots map onto React Aria Slider anatomy. Sizes and orientation are
+ * variants; fill length/position is applied by React Aria's SliderFill,
+ * so the recipe only styles appearance, not fill geometry. No visible
+ * label or static value output — the current value is shown in a
+ * per-thumb tooltip instead, so the root is a flex track container.
+ */
+export declare const sliderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "thumb" | "fill" | "track" | "tick" | "tickLabel", {
+    size: {
+        sm: {
+            root: {
+                "--slider-track-thickness": "sizes.200";
+                "--slider-thumb-size": "sizes.400";
+                "--slider-tick-length": "sizes.100";
+            };
+        };
+        md: {
+            root: {
+                "--slider-track-thickness": "sizes.400";
+                "--slider-thumb-size": "sizes.600";
+                "--slider-tick-length": "sizes.200";
+            };
+        };
+    };
+    variant: {
+        filled: {};
+        minimal: {
+            fill: {
+                backgroundColor: "transparent";
+                "&[data-range='true']::before": {
+                    content: "\"\"";
+                    position: "absolute";
+                    insetInline: "0";
+                    top: "50%";
+                    height: "calc(var(--slider-track-thickness) / 2)";
+                    transform: "translateY(-50%)";
+                    transition: "height 0.15s, background-color 0.15s";
+                    borderRadius: "full";
+                    backgroundColor: "colorPalette.9";
+                };
+                "[data-slot=\"root\"]:hover &[data-range=\"true\"]::before, [data-slot=\"root\"]:focus-within &[data-range=\"true\"]::before, [data-slot=\"root\"]:has([data-dragging=\"true\"]) &[data-range=\"true\"]::before": {
+                    height: string;
+                    backgroundColor: string;
+                };
+                '&[data-orientation="vertical"]': {
+                    "&[data-range='true']::before": {
+                        insetInline: "auto";
+                        insetInlineStart: "50%";
+                        top: "0";
+                        bottom: "0";
+                        height: "auto";
+                        width: "calc(var(--slider-track-thickness) / 2)";
+                        transform: "translateX(-50%)";
+                        transition: "width 0.15s, background-color 0.15s";
+                    };
+                    "[data-slot=\"root\"]:hover &[data-range=\"true\"]::before, [data-slot=\"root\"]:focus-within &[data-range=\"true\"]::before, [data-slot=\"root\"]:has([data-dragging=\"true\"]) &[data-range=\"true\"]::before": {
+                        width: string;
+                        height: string;
+                    };
+                };
+            };
+            track: {
+                "&::before": {
+                    insetBlock: "auto";
+                    insetInline: "calc(var(--slider-thumb-size) / -2)";
+                    top: "50%";
+                    height: "calc(var(--slider-track-thickness) / 2)";
+                    transform: "translateY(-50%)";
+                    transition: "height 0.15s, width 0.15s";
+                    borderRadius: "full";
+                    backgroundColor: "neutral.6";
+                };
+                "[data-slot=\"root\"]:hover &::before, [data-slot=\"root\"]:focus-within &::before, [data-slot=\"root\"]:has([data-dragging=\"true\"]) &::before": {
+                    height: string;
+                };
+                '&[data-orientation="vertical"]': {
+                    "&::before": {
+                        insetInline: "auto";
+                        insetInlineStart: "50%";
+                        top: "calc(var(--slider-thumb-size) / -2)";
+                        bottom: "calc(var(--slider-thumb-size) / -2)";
+                        height: "auto";
+                        width: "calc(var(--slider-track-thickness) / 2)";
+                        transform: "translateX(-50%)";
+                        borderRadius: "full";
+                        backgroundColor: "neutral.6";
+                    };
+                    "[data-slot=\"root\"]:hover &::before, [data-slot=\"root\"]:focus-within &::before, [data-slot=\"root\"]:has([data-dragging=\"true\"]) &::before": {
+                        width: string;
+                        height: string;
+                    };
+                };
+            };
+            thumb: {
+                backgroundColor: "colorPalette.9";
+                borderColor: "colorPalette.9";
+                "[data-slot=\"root\"]:hover &, [data-slot=\"root\"]:focus-within &, [data-slot=\"root\"]:has([data-dragging=\"true\"]) &": {
+                    backgroundColor: "colorPalette.10";
+                    borderColor: "colorPalette.10";
+                };
+            };
+            tick: {
+                "&[data-filled='true']": {
+                    backgroundColor: "neutral.9";
+                };
+                "&[data-filled='true'][data-range='true']": {
+                    backgroundColor: "colorPalette.contrast";
+                };
+                "&[data-on-thumb='true']": {
+                    backgroundColor: "colorPalette.contrast";
+                };
+            };
+        };
+        enclosed: {
+            track: {
+                height: "var(--slider-thumb-size)";
+                '&[data-orientation="vertical"]': {
+                    width: "var(--slider-thumb-size)";
+                };
+            };
+            fill: {
+                height: "var(--slider-thumb-size)";
+                '&[data-orientation="vertical"]': {
+                    width: "var(--slider-thumb-size)";
+                };
+            };
+            thumb: {
+                boxSize: "var(--slider-thumb-size)";
+                borderWidth: "{spacing.50}";
+                borderStyle: "solid";
+                borderColor: "transparent";
+                backgroundClip: "padding-box";
+                shadow: "1";
+            };
+        };
+    };
+}>;