@viraui/react 0.0.1

package/dist/components/select/select.css

@@ -0,0 +1,194 @@
+@scope (.Select) {
+  :scope {
+    --input-height: var(--space-x-large);
+    --control-group-background: var(--base-1);
+    --control-group-color: var(--global-foreground);
+    --control-group-border-color: var(--global-contrast);
+    --control-group-border-radius: var(--radius-small);
+    --select-trigger-padding-inline-start: var(--space-small);
+    --select-trigger-padding-inline-end: var(--space-x-small);
+    inline-size: 100%;
+
+    > .Trigger {
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-inline-size: 0;
+      block-size: var(--input-height);
+      padding-inline: calc(
+          var(--select-trigger-padding-inline-start) + ((var(--control-group-border-radius) + 0px) / 4)
+        )
+        var(--select-trigger-padding-inline-end);
+      border: 1px solid var(--control-group-border-color);
+      border-radius: var(--control-group-border-radius);
+      background: var(--control-group-background);
+      color: var(--control-group-color);
+      font: inherit;
+      text-align: start;
+      cursor: pointer;
+
+      &:focus-visible {
+        outline: 2px solid var(--global-foreground);
+        outline-offset: 2px;
+      }
+
+      &[data-popup-open] {
+        outline: none;
+      }
+
+      &:disabled,
+      &[data-disabled] {
+        --control-group-background: var(--global-disabled-background);
+        --control-group-border-color: transparent;
+        --control-group-color: var(--global-disabled-foreground);
+
+        box-shadow: none;
+        cursor: not-allowed;
+      }
+
+      > .Value {
+        --text-fluid-factor: 0;
+        --text-font-size: var(--font-scale-body-small);
+
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &[data-placeholder] {
+          color: var(--global-disabled-foreground);
+        }
+      }
+
+      > .Icon {
+        font-size: var(--font-scale-body-small);
+        pointer-events: none;
+      }
+    }
+
+    &[data-invalid] > .Trigger:not(:disabled):not([data-disabled]) {
+      --control-group-border-color: var(--highlight-red);
+
+      box-shadow: none;
+      outline-color: oklab(from var(--highlight-red) l a b / 0.5);
+    }
+
+    &:has([required]) > .Label::after {
+      content: ' ＊';
+      color: var(--highlight-red);
+    }
+
+    > .Label,
+    > .Description {
+      padding-inline: calc((var(--control-group-border-radius) + 0px) / 2);
+    }
+  }
+}
+
+@scope (.SelectPopup) {
+  :scope {
+    --select-list-border-radius: var(--radius-medium);
+    --select-list-padding: var(--space-x-small);
+    box-sizing: border-box;
+    min-inline-size: var(--anchor-width);
+    overflow: visible;
+    color: var(--global-foreground);
+    outline: none;
+    position: relative;
+
+    > .ScrollArrow {
+      position: absolute;
+      inset-inline: 0;
+      z-index: 1;
+      inline-size: 100%;
+      block-size: var(--space-large);
+      cursor: default;
+      background: var(--base-1);
+
+      > .Button {
+        pointer-events: none;
+      }
+
+      &.ScrollArrow--up {
+        inset-block-start: 0;
+        border-block-end: 1px solid var(--global-contrast);
+        border-radius: var(--select-list-border-radius) var(--select-list-border-radius) 0 0;
+      }
+
+      &.ScrollArrow--down {
+        inset-block-end: 0;
+        border-block-start: 1px solid var(--global-contrast);
+        border-radius: 0 0 var(--select-list-border-radius) var(--select-list-border-radius);
+      }
+    }
+
+    > .List {
+      box-sizing: border-box;
+      inline-size: 100%;
+      max-block-size: var(--available-height);
+      overflow-y: auto;
+      scroll-padding-block: var(--select-list-padding);
+      list-style: none;
+      overscroll-behavior: contain;
+
+      &:focus,
+      &:focus-visible {
+        outline: none;
+      }
+
+      > .Option,
+      > .Group > .Option {
+        border-radius: calc((var(--select-list-border-radius) + 0px) - var(--select-list-padding));
+        cursor: pointer;
+
+        &:focus {
+          outline: none;
+        }
+
+        &:focus-visible {
+          outline: 2px solid var(--global-foreground);
+          outline-offset: 0;
+        }
+
+        &[data-highlighted],
+        &:hover {
+          background: var(--base-2);
+        }
+
+        &[data-disabled] {
+          color: var(--global-disabled-foreground);
+          cursor: not-allowed;
+        }
+
+        > .Indicator {
+          inline-size: var(--space-medium);
+          color: var(--global-primary);
+          opacity: 0;
+          transition:
+            opacity var(--duration-fast) var(--easing-standard),
+            transform var(--duration-fast) var(--easing-standard);
+
+          &[data-selected] {
+            opacity: 1;
+          }
+        }
+      }
+
+      > .Group {
+        & + & {
+          margin-block-start: var(--space-medium);
+        }
+
+        > .GroupLabel {
+          > .Indicator {
+            inline-size: var(--space-medium);
+          }
+        }
+      }
+
+      > .Separator {
+        block-size: 1px;
+        margin-block: var(--space-small);
+        margin-inline: var(--space-small);
+        background: var(--base-3);
+      }
+    }
+  }
+}

package/dist/components/select/select.d.ts

@@ -0,0 +1,66 @@
+import type { FieldRoot } from '@base-ui/react/field';
+import type { SelectRoot } from '@base-ui/react/select';
+import type * as React from 'react';
+import type { IntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+import { SelectGroup } from './select-group';
+import { SelectOption } from './select-option';
+import { SelectSeparator } from './select-separator';
+import './select.css';
+/**
+ * Public Select props.
+ *
+ * Includes Base UI select root props such as `value`, `defaultValue`, `disabled`,
+ * and change handlers, plus optional field copy rendered with the shared Vira
+ * field label/helper pattern.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type SelectProps = SelectRoot.Props<string> & Omit<FieldRoot.Props, 'ref'> & IntrinsicViraProps & {
+    /**
+     * Visible label rendered with `Field.Label` and `Text`.
+     *
+     * @default No label is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Helper copy rendered with `Field.Description` and `Text` while the field is valid.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Error copy rendered with `Field.Error` and `Text` in the same slot as `description`.
+     * Replaces description while the field is invalid.
+     *
+     * @default No static error copy is rendered.
+     */
+    error?: React.ReactNode;
+    /**
+     * Placeholder text shown in the trigger when no value is selected.
+     *
+     * @default No placeholder is rendered.
+     */
+    placeholder?: React.ReactNode;
+    /**
+     * Trigger icon rendered inside `Select.Icon`.
+     * Pass any React icon element; use `<Icon name="..." />` for the Vira icon set.
+     *
+     * @default `<Icon name="ChevronExpandY" size={16} />`
+     */
+    icon?: React.ReactNode;
+    /**
+     * Ref forwarded to the select trigger button.
+     *
+     * @default No ref is attached.
+     */
+    ref?: React.Ref<HTMLButtonElement>;
+};
+declare function SelectRootComponent({ children, className, description, dirty, disabled, error, icon, invalid, label, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }: SelectProps): React.JSX.Element;
+export declare const Select: typeof SelectRootComponent & {
+    Option: typeof SelectOption;
+    Group: typeof SelectGroup;
+    Separator: typeof SelectSeparator;
+};
+export type { SelectGroupProps } from './select-group';
+export type { SelectOptionProps } from './select-option';
+export type { SelectSeparatorProps } from './select-separator';

package/dist/components/select/select.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field } from '@base-ui/react/field';
+import { Select as PrimitiveSelect } from '@base-ui/react/select';
+import { Elevator, Icon, Stack, Surface, Text } from '@react/src/components';
+import { FieldHelperCopy } from '@react/src/components/basic-input/field-helper-copy';
+import { IconButton } from '@react/src/components/icon-button';
+import { extractIntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+import { clsx } from 'clsx';
+import { useId } from 'react';
+import { SelectGroup } from './select-group';
+import { SelectOption } from './select-option';
+import { SelectSeparator } from './select-separator';
+import './select.css';
+function SelectRootComponent({ children, className, description, dirty, disabled, error, icon = _jsx(Icon, { name: "ChevronExpandY", size: 16 }), invalid, label, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }) {
+    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(selectRootProps);
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...restSelectProps } = componentProps;
+    const fieldLabelId = useId();
+    const listAccessibleNameProps = {};
+    if (ariaLabel !== undefined) {
+        listAccessibleNameProps['aria-label'] = ariaLabel;
+    }
+    else if (ariaLabelledBy !== undefined) {
+        listAccessibleNameProps['aria-labelledby'] = ariaLabelledBy;
+    }
+    else if (label !== undefined) {
+        listAccessibleNameProps['aria-labelledby'] = fieldLabelId;
+    }
+    return (_jsxs(Field.Root, { ...intrinsicAttributes, className: clsx('Select', className), dirty: dirty, disabled: disabled, invalid: invalid, name: name, touched: touched, validate: validate, validationDebounceTime: validationDebounceTime, validationMode: validationMode, render: _jsx(Stack, { direction: "column", fillChildren: false, rowGap: "small" }), children: [label && (_jsx(Text, { size: "small", weight: "semibold", className: "Label", render: _jsx(Field.Label, { id: fieldLabelId }), children: label })), _jsxs(PrimitiveSelect.Root, { ...restSelectProps, disabled: disabled, name: name, children: [_jsxs(PrimitiveSelect.Trigger, { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: "Trigger", disabled: disabled, ref: ref, render: _jsx(Stack, { direction: "row", render: _jsx("button", { type: "button" }), vAlign: "center" }), children: [_jsx(Text, { className: "Value", lineHeight: "small", render: _jsx(PrimitiveSelect.Value, { placeholder: placeholder }), size: "small", whiteSpace: "nowrap" }), _jsx(PrimitiveSelect.Icon, { className: "Icon", "data-grow": "false", render: _jsx(Stack, { fillChildren: false, hAlign: "center", hPadding: "x-small", inline: true, shrink: false, vAlign: "center" }), children: icon })] }), _jsx(PrimitiveSelect.Portal, { children: _jsx(PrimitiveSelect.Positioner, { alignItemWithTrigger: true, children: _jsxs(PrimitiveSelect.Popup, { className: "SelectPopup", children: [_jsx(PrimitiveSelect.ScrollUpArrow, { className: "ScrollArrow ScrollArrow--up", render: _jsx(Stack, { fillChildren: false, hAlign: "center", vAlign: "center" }), children: _jsx(IconButton, { "aria-label": "Scroll list up", icon: _jsx(Icon, { name: "ChevronUp" }), size: "small", tabIndex: -1, variant: "flat" }) }), _jsx(Elevator, { resting: 1, children: _jsx(PrimitiveSelect.List, { ...listAccessibleNameProps, className: "List", render: _jsx(Surface, { border: "all", color: 1, hPadding: "x-small", radius: "medium", vPadding: "x-small" }), children: children }) }), _jsx(PrimitiveSelect.ScrollDownArrow, { className: "ScrollArrow ScrollArrow--down", render: _jsx(Stack, { fillChildren: false, hAlign: "center", vAlign: "center" }), children: _jsx(IconButton, { "aria-label": "Scroll list down", icon: _jsx(Icon, { name: "ChevronDown" }), size: "small", tabIndex: -1, variant: "flat" }) })] }) }) })] }), _jsx(FieldHelperCopy, { description: description, error: error })] }));
+}
+export const Select = Object.assign(SelectRootComponent, {
+    Option: SelectOption,
+    Group: SelectGroup,
+    Separator: SelectSeparator,
+});

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

@@ -0,0 +1,2 @@
+export { Skeleton } from './skeleton';
+export type { SkeletonProps } from './skeleton';

package/dist/components/skeleton/index.js

@@ -0,0 +1 @@
+export { Skeleton } from './skeleton';

package/dist/components/skeleton/skeleton.css

@@ -0,0 +1,36 @@
+@scope (.Skeleton) {
+  :scope {
+    --skeleton-background: var(--global-contrast);
+    --skeleton-border-radius: var(--radius-small);
+    --skeleton-inline-size: auto;
+    --skeleton-block-size: auto;
+    --skeleton-min-inline-size: var(--space-x-large);
+    --skeleton-min-block-size: var(--space-medium);
+
+    display: inline-block;
+    box-sizing: border-box;
+    inline-size: var(--skeleton-inline-size);
+    block-size: var(--skeleton-block-size);
+    min-inline-size: var(--skeleton-min-inline-size);
+    min-block-size: var(--skeleton-min-block-size);
+    max-inline-size: 100%;
+    background: var(--skeleton-background);
+    border-radius: var(--skeleton-border-radius);
+    vertical-align: middle;
+    animation: skeleton-fade var(--duration-slow) var(--easing-standard) infinite alternate;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+}
+
+@keyframes skeleton-fade {
+  from {
+    opacity: 0.52;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,51 @@
+import type { ThemeTypes } from '@foundation/platforms/web/vira/types';
+import type { IntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+import type * as React from 'react';
+import './skeleton.css';
+/**
+ * Public Skeleton props.
+ *
+ * Includes standard `span` attributes such as `id`, `title`, ARIA props, and event handlers,
+ * plus Vira-owned sizing and radius controls.
+ *
+ * @default Native span pass-through props keep React defaults.
+ */
+export type SkeletonProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraProps & {
+    /**
+     * Sets the skeleton inline size using any valid CSS size string.
+     *
+     * @default The skeleton sizes from context, constrained by the CSS minimum.
+     */
+    width?: string;
+    /**
+     * Sets the skeleton block size using any valid CSS size string.
+     *
+     * @default The skeleton sizes from context, constrained by the CSS minimum.
+     */
+    height?: string;
+    /**
+     * Sets the skeleton minimum inline size using any valid CSS size string.
+     *
+     * @default The CSS minimum inline size is `2rem`.
+     */
+    minWidth?: string;
+    /**
+     * Sets the skeleton minimum block size using any valid CSS size string.
+     *
+     * @default The CSS minimum block size is `1rem`.
+     */
+    minHeight?: string;
+    /**
+     * Sets the corner radius from the Vira radius token scale.
+     *
+     * @default 'small'
+     */
+    radius?: ThemeTypes['radius'];
+    /**
+     * Ref forwarded to the rendered skeleton root element.
+     *
+     * @default No ref is attached.
+     */
+    ref?: React.Ref<HTMLSpanElement>;
+};
+export declare const Skeleton: React.FC<SkeletonProps>;

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { extractIntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+import { resolveThemeValue } from '@react/src/core/theme/resolve-theme-value';
+import clsx from 'clsx';
+import './skeleton.css';
+export const Skeleton = ({ className, height, minHeight, minWidth, radius, ref, style, width, ...otherProps }) => {
+    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+    const dynamicStyle = {
+        '--skeleton-border-radius': resolveThemeValue(radius, 'radius', 'var(--radius-small)'),
+        ...(width ? { '--skeleton-inline-size': width } : {}),
+        ...(height ? { '--skeleton-block-size': height } : {}),
+        ...(minWidth ? { '--skeleton-min-inline-size': minWidth } : {}),
+        ...(minHeight ? { '--skeleton-min-block-size': minHeight } : {}),
+        ...style,
+    };
+    return (_jsx("span", { ...componentProps, ...intrinsicAttributes, ref: ref, "aria-hidden": "true", className: clsx('Skeleton', className), style: dynamicStyle }));
+};

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

@@ -0,0 +1,2 @@
+export { Slider } from './slider';
+export type { SliderProps } from './slider';

package/dist/components/slider/index.js

@@ -0,0 +1 @@
+export { Slider } from './slider';

package/dist/components/slider/slider-control.css

@@ -0,0 +1,71 @@
+@scope (.SliderControl) {
+  :scope {
+    position: relative;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    min-block-size: 0;
+    inline-size: 100%;
+    block-size: var(--slider-track-size);
+    touch-action: none;
+    user-select: none;
+
+    &[data-orientation='vertical'] {
+      inline-size: var(--slider-track-size);
+      block-size: 100%;
+
+      > .Track {
+        inline-size: var(--slider-track-size);
+        block-size: 100%;
+      }
+    }
+
+    > .Track {
+      position: relative;
+      overflow: visible;
+      inline-size: 100%;
+      block-size: var(--slider-track-size);
+      border-radius: var(--radius-infinite);
+      background: var(--slider-track-background);
+
+      > .Indicator {
+        border-radius: inherit;
+        background: var(--slider-progress-background);
+      }
+
+      > .Thumb {
+        box-sizing: border-box;
+        inline-size: var(--slider-thumb-size);
+        block-size: calc(var(--slider-thumb-size) / 1.5);
+        border-radius: var(--radius-x-small);
+        background: var(--slider-thumb-background);
+        border: 2px solid var(--slider-progress-background);
+        appearance: none;
+        transition: scale var(--easing-elastic) var(--duration-slow);
+
+        &:not(:disabled, [data-disabled]) {
+          cursor: grab;
+        }
+
+        /* Active drag: scale thumb and grabbing cursor when enabled and pressed or dragging */
+        &:not(:disabled, [data-disabled]):active,
+        &:not(:disabled, [data-disabled]):has(> input:active),
+        &:not(:disabled, [data-disabled])[data-dragging]:has(> input:focus) {
+          scale: 1.2;
+          cursor: grabbing;
+        }
+
+        /* Focus: draw outline on Thumb wrapper; native input outline removed below */
+        &:has(> input:focus-visible) {
+          outline: 2px solid var(--global-foreground);
+          outline-offset: 2px;
+          z-index: 1;
+        }
+
+        /* Suppress duplicate focus ring on the range input inside Thumb */
+        & > input:focus-visible {
+          outline: none;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+import type { SliderRoot } from '@base-ui/react/slider';
+import './slider-control.css';
+export type SliderControlProps = {
+    isRange: boolean;
+    orientation?: SliderRoot.Props['orientation'];
+    thumbAriaLabel?: string | readonly [string, string] | undefined;
+};
+export declare function SliderControl({ isRange, orientation, thumbAriaLabel }: SliderControlProps): import("react").JSX.Element;

package/dist/components/slider/slider-control.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider as PrimitiveSlider } from '@base-ui/react/slider';
+import { Stack } from '@react/src/components/stack';
+import './slider-control.css';
+function resolveThumbAriaLabels(thumbAriaLabel, isRange) {
+    if (thumbAriaLabel === undefined) {
+        return {};
+    }
+    if (typeof thumbAriaLabel === 'string') {
+        return { first: thumbAriaLabel };
+    }
+    if (isRange) {
+        return { first: thumbAriaLabel[0], second: thumbAriaLabel[1] };
+    }
+    return { first: thumbAriaLabel[0] };
+}
+export function SliderControl({ isRange, orientation = 'horizontal', thumbAriaLabel }) {
+    const isVertical = orientation === 'vertical';
+    const { first: firstThumbAriaLabel, second: secondThumbAriaLabel } = resolveThumbAriaLabels(thumbAriaLabel, isRange);
+    return (_jsx(PrimitiveSlider.Control, { className: "SliderControl", "data-orientation": orientation, render: _jsx(Stack, { direction: isVertical ? 'column' : 'row', fillChildren: false, hAlign: isVertical ? 'center' : 'initial', vAlign: isVertical ? 'initial' : 'center' }), children: _jsxs(PrimitiveSlider.Track, { className: "Track", children: [_jsx(PrimitiveSlider.Indicator, { className: "Indicator" }), isRange ? (_jsxs(_Fragment, { children: [_jsx(PrimitiveSlider.Thumb, { className: "Thumb", index: 0, getAriaLabel: firstThumbAriaLabel ? () => firstThumbAriaLabel : undefined }), _jsx(PrimitiveSlider.Thumb, { className: "Thumb", index: 1, getAriaLabel: secondThumbAriaLabel ? () => secondThumbAriaLabel : undefined })] })) : (_jsx(PrimitiveSlider.Thumb, { className: "Thumb", getAriaLabel: firstThumbAriaLabel ? () => firstThumbAriaLabel : undefined }))] }) }));
+}

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

@@ -0,0 +1,2 @@
+export type SliderValue = number | readonly number[];
+export declare function isRangeSlider(value: SliderValue | undefined, defaultValue: SliderValue | undefined): boolean;

package/dist/components/slider/slider-utils.js

@@ -0,0 +1,4 @@
+export function isRangeSlider(value, defaultValue) {
+    const effective = value ?? defaultValue;
+    return Array.isArray(effective);
+}

package/dist/components/slider/slider.css

@@ -0,0 +1,64 @@
+@scope (.Slider) {
+  :scope {
+    --slider-track-size: var(--space-x-small);
+    --slider-thumb-size: var(--space-medium);
+    --slider-track-background: var(--global-contrast);
+    --slider-progress-background: var(--global-primary);
+    --slider-thumb-background: var(--base-1);
+    inline-size: 100%;
+    block-size: 100%;
+    min-inline-size: 0;
+    min-block-size: 0;
+
+    > .SliderRoot {
+      inline-size: 100%;
+      block-size: 100%;
+      min-inline-size: 0;
+      min-block-size: 0;
+
+      > .SliderHeader {
+        inline-size: 100%;
+        min-inline-size: 0;
+
+        /* Label shrinks/wraps; value keeps its size on the right */
+        > .Label {
+          -webkit-user-select: none;
+          user-select: none;
+        }
+
+        > .Value {
+          min-inline-size: var(--space-x-large);
+          flex-shrink: 0;
+          -webkit-user-select: none;
+          user-select: none;
+        }
+      }
+    }
+
+    &[data-invalid] {
+      --slider-progress-background: var(--highlight-red);
+    }
+
+    /* Disabled: muted track/progress/thumb when Slider or SliderRoot is disabled */
+    &[data-disabled],
+    &:has(> .SliderRoot[data-disabled]) {
+      --slider-track-background: var(--global-disabled-background);
+      --slider-progress-background: var(--global-disabled-foreground);
+      --slider-thumb-background: var(--global-disabled-foreground);
+
+      cursor: not-allowed;
+    }
+
+    /* Required field: append red asterisk on Label */
+    &:has([required]) > .SliderRoot > .SliderHeader > .Label::after {
+      content: ' ＊';
+      color: var(--highlight-red);
+    }
+
+    & > .Description,
+    & > .SliderRoot > .SliderHeader > .Value {
+      -webkit-user-select: none;
+      user-select: none;
+    }
+  }
+}

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

@@ -0,0 +1,70 @@
+import type { FieldRoot } from '@base-ui/react/field';
+import type { SliderRoot } from '@base-ui/react/slider';
+import type { IntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+import type * as React from 'react';
+import './slider-control.css';
+import './slider.css';
+/**
+ * Public Slider props.
+ *
+ * Includes Base UI slider root props such as `value`, `defaultValue`, `min`, `max`, `step`,
+ * `disabled`, `orientation`, and change handlers, plus optional field copy and thumb labeling.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type SliderProps = Omit<SliderRoot.Props, 'ref'> & Omit<FieldRoot.Props, 'ref'> & {
+    /**
+     * Adds `data-grow="false"` to the field root when false.
+     *
+     * @default The field root does not render a grow attribute.
+     */
+    grow?: IntrinsicViraProps['grow'];
+    /**
+     * Adds `data-shrink="false"` to the field root when false.
+     *
+     * @default The field root does not render a shrink attribute.
+     */
+    shrink?: IntrinsicViraProps['shrink'];
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Visible label rendered with `Field.Label` and `Text`.
+     *
+     * @default No label is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Helper copy rendered with `Field.Description` and `Text` while the field is valid.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Error copy rendered with `Field.Error` and `Text` in the same slot as `description`.
+     *
+     * @default No static error copy is rendered.
+     */
+    error?: React.ReactNode;
+    /**
+     * Marks the slider as required and shows a required indicator on the label.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Renders the formatted current value via `Slider.Value` and `Text`.
+     *
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * Accessible name for the thumb when `label` is omitted.
+     *
+     * Pass a string to name the first thumb (single-thumb slider, or the minimum thumb on a range).
+     * Pass a two-element tuple to name each range thumb in order; on a single-thumb slider only the
+     * first tuple value is applied.
+     *
+     * @default No default; required when `label` is omitted and thumbs need distinct accessible names.
+     */
+    thumbAriaLabel?: string | readonly [string, string];
+};
+export declare const Slider: React.FC<SliderProps>;