@viraui/react 0.0.1

package/dist/components/button/button.d.ts

@@ -0,0 +1,46 @@
+import { Button as PrimitiveButton } from '@base-ui/react/button';
+import './button.css';
+import type { ReactNode } from 'react';
+import type { IntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+/**
+ * Public Button props.
+ *
+ * Includes Base UI button props such as `children`, `disabled`, and event handlers,
+ * plus Vira-owned `size` and `variant` options documented below.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type ButtonProps = PrimitiveButton.Props & IntrinsicViraProps & {
+    /**
+     * Controls the visual button size.
+     *
+     * @default 'medium'
+     */
+    size?: 'big' | 'medium' | 'small';
+    /**
+     * Selects the visual treatment for the button.
+     *
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'flat' | 'destructive';
+    /**
+     * Decorative icon rendered alongside the button label.
+     * Pass any React icon element; use `<Icon name="..." />` for the Vira icon set.
+     *
+     * @default No default; omit when the button has no icon.
+     */
+    icon?: ReactNode;
+    /**
+     * Controls whether the icon appears before or after the label.
+     *
+     * @default 'start'
+     */
+    iconPosition?: 'start' | 'end';
+    /**
+     * Shows a centered spinner overlay while preserving the original content width.
+     *
+     * @default false
+     */
+    loading?: boolean;
+};
+export declare const Button: React.FC<ButtonProps>;

package/dist/components/button/button.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as PrimitiveButton } from '@base-ui/react/button';
+import { Spinner } from '@react/src/components/spinner';
+import { extractIntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+import { clsx } from 'clsx';
+import './button.css';
+const spinnerDimensionsBySize = {
+    small: 'small',
+    medium: 'small',
+    big: 'regular',
+};
+export const Button = ({ children, className, disabled, icon, iconPosition = 'start', loading = false, size = 'medium', variant = 'primary', ...otherProps }) => {
+    const isDisabled = disabled || loading;
+    const isIconOnly = Boolean(icon) && (children == null || children === '');
+    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+    return (_jsxs(PrimitiveButton, { ...componentProps, ...intrinsicAttributes, "aria-busy": loading || undefined, className: clsx('Button', className), "data-loading": loading ? 'true' : 'false', "data-size": size, "data-icon-only": isIconOnly ? 'true' : undefined, "data-icon-position": icon && !isIconOnly ? iconPosition : undefined, "data-variant": variant, disabled: isDisabled, focusableWhenDisabled: loading, children: [isIconOnly ? (_jsx("span", { "aria-hidden": "true", className: "Content", "data-loading": loading ? 'true' : 'false', children: icon })) : (_jsxs(_Fragment, { children: [icon && (_jsx("span", { "aria-hidden": "true", className: "Content", "data-loading": loading ? 'true' : 'false', children: icon })), _jsx("span", { className: "Content", "data-loading": loading ? 'true' : 'false', children: children })] })), loading ? (_jsx("span", { "aria-hidden": "true", className: "SpinnerOverlay", children: _jsx(Spinner, { size: spinnerDimensionsBySize[size] }) })) : null] }));
+};

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

@@ -0,0 +1,2 @@
+export { Button } from './button';
+export type { ButtonProps } from './button';

package/dist/components/button/index.js

@@ -0,0 +1 @@
+export { Button } from './button';

package/dist/components/clamp-text/clamp-text.css

@@ -0,0 +1,12 @@
+@scope (.ClampText) {
+  :scope {
+    display: -webkit-box;
+    -webkit-line-clamp: var(--clamp-text-rows, 1);
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+
+    &[data-clamp-text-inline='true'] {
+      display: -webkit-inline-box;
+    }
+  }
+}

package/dist/components/clamp-text/clamp-text.d.ts

@@ -0,0 +1,39 @@
+import { useRender } from '@base-ui/react/use-render';
+import type * as React from 'react';
+import './clamp-text.css';
+import type { IntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+/**
+ * Public ClampText props.
+ *
+ * Includes standard inline text attributes such as `children`, `id`, `title`, and event handlers,
+ * plus Vira-owned line-clamp controls and Base UI `render` support for replacing the root element.
+ *
+ * @default Native span pass-through props keep React defaults.
+ */
+export type ClampTextProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraProps & {
+    /**
+     * Replaces the default `span` root using Base UI render semantics.
+     *
+     * @default The clamp text renders a `span` root.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Ref forwarded to the rendered clamp text root element.
+     *
+     * @default No ref is attached.
+     */
+    ref?: React.Ref<HTMLElement>;
+    /**
+     * Sets how many lines of text remain visible before truncation.
+     *
+     * @default 1
+     */
+    rows?: number;
+    /**
+     * Uses inline `-webkit-inline-box` display instead of block `-webkit-box`.
+     *
+     * @default false
+     */
+    inline?: boolean;
+};
+export declare const ClampText: React.FC<ClampTextProps>;

package/dist/components/clamp-text/clamp-text.js

@@ -0,0 +1,24 @@
+'use client';
+import { useRender } from '@base-ui/react/use-render';
+import { extractIntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+import { clsx } from 'clsx';
+import { useMemo } from 'react';
+import './clamp-text.css';
+export const ClampText = ({ className, inline = false, ref, render, rows = 1, style, ...otherProps }) => {
+    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+    const dynamicStyle = useMemo(() => ({
+        '--clamp-text-rows': rows,
+    }), [rows]);
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        ref,
+        props: {
+            ...componentProps,
+            ...intrinsicAttributes,
+            'data-clamp-text-inline': inline ? 'true' : 'false',
+            className: clsx('ClampText', className),
+            style: { ...dynamicStyle, ...style },
+        },
+    });
+};

package/dist/components/clamp-text/index.d.ts

@@ -0,0 +1,2 @@
+export { ClampText } from './clamp-text';
+export type { ClampTextProps } from './clamp-text';

package/dist/components/clamp-text/index.js

@@ -0,0 +1 @@
+export { ClampText } from './clamp-text';

package/dist/components/elevator/elevator.d.ts

@@ -0,0 +1,52 @@
+import type * as React from 'react';
+import type { ElevationDirection, ElevationLevel, ElevationShadowColor } from '@react/src/core/elevation/elevation-types';
+import type { IntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+export type { ElevationDirection, ElevationLevel, ElevationShadowColor, } from '@react/src/core/elevation/elevation-types';
+export { ELEVATION_DEFAULTS } from '@react/src/core/elevation/elevation-types';
+export { getElevationProps } from '@react/src/core/elevation/get-elevation-props';
+/**
+ * Public Elevator props.
+ *
+ * Applies preflight elevation hooks to each valid element child. Invalid nodes pass through unchanged.
+ *
+ * @default Native child pass-through props are preserved and merged with elevation hooks.
+ */
+export type ElevatorProps = IntrinsicViraProps & {
+    /**
+     * Element or elements that receive elevation hooks on their rendered root.
+     *
+     * @default No default. Consumers must provide at least one child.
+     */
+    children: React.ReactNode;
+    /**
+     * Resting elevation level mapped to `data-elevation`.
+     *
+     * @default No default. Consumers must provide a resting level.
+     */
+    resting: ElevationLevel;
+    /**
+     * Hover elevation level mapped to `data-elevation-hover`.
+     *
+     * @default No hover elevation override.
+     */
+    hover?: ElevationLevel;
+    /**
+     * Shadow cast direction mapped to `data-elevation-direction`.
+     *
+     * @default 'bottom'
+     */
+    direction?: ElevationDirection;
+    /**
+     * Shadow color mapped to the `--shadow-color` custom property.
+     *
+     * @default 'oklch(0% 0 0)'
+     */
+    shadowColor?: ElevationShadowColor;
+    /**
+     * Additional shadow layer mapped to the `--extra-shadow` custom property.
+     *
+     * @default Preflight transparent hairline from `elevations.css`.
+     */
+    extraShadow?: string;
+};
+export declare const Elevator: React.FC<ElevatorProps>;

package/dist/components/elevator/elevator.js

@@ -0,0 +1,29 @@
+import { Children, cloneElement, isValidElement } from 'react';
+import { getElevationProps } from '@react/src/core/elevation/get-elevation-props';
+import { extractIntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+export { ELEVATION_DEFAULTS } from '@react/src/core/elevation/elevation-types';
+export { getElevationProps } from '@react/src/core/elevation/get-elevation-props';
+const mergeChildStyle = (childStyle, elevationStyle) => ({
+    ...(childStyle ?? {}),
+    ...elevationStyle,
+});
+export const Elevator = ({ children, resting, hover, direction, shadowColor, extraShadow, ...otherProps }) => {
+    const { intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+    const elevation = getElevationProps({
+        resting,
+        ...(hover !== undefined ? { hover } : {}),
+        ...(direction !== undefined ? { direction } : {}),
+        ...(shadowColor !== undefined ? { shadowColor } : {}),
+        ...(extraShadow !== undefined ? { extraShadow } : {}),
+    });
+    return Children.map(children, (child) => {
+        if (!isValidElement(child)) {
+            return child;
+        }
+        return cloneElement(child, {
+            ...intrinsicAttributes,
+            ...elevation.attributes,
+            style: mergeChildStyle(child.props.style, elevation.style),
+        });
+    });
+};

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

@@ -0,0 +1,2 @@
+export { ELEVATION_DEFAULTS, Elevator, getElevationProps } from './elevator';
+export type { ElevationDirection, ElevationLevel, ElevationShadowColor, ElevatorProps } from './elevator';

package/dist/components/elevator/index.js

@@ -0,0 +1 @@
+export { ELEVATION_DEFAULTS, Elevator, getElevationProps } from './elevator';

package/dist/components/icon/icon.css

@@ -0,0 +1,7 @@
+@scope (.Icon) {
+  :scope {
+    display: inline-block;
+    flex: none;
+    vertical-align: middle;
+  }
+}

package/dist/components/icon/icon.d.ts

@@ -0,0 +1,9 @@
+import type { IconName, IconVariant } from '@icons/dist';
+import './icon.css';
+import type { IntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+export type IconProps = React.ComponentProps<'svg'> & IntrinsicViraProps & {
+    name: IconName;
+    variant?: IconVariant;
+    size?: number;
+};
+export declare const Icon: React.FC<IconProps>;

package/dist/components/icon/icon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { generatedDefaultIconVariant, generatedIconRegistry } from '#internal-icons/icon-registry';
+import { extractIntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+import { clsx } from 'clsx';
+import './icon.css';
+export const Icon = ({ className, name, size = 24, variant = generatedDefaultIconVariant, ...otherProps }) => {
+    const resolvedVariant = (generatedIconRegistry[variant] ? variant : generatedDefaultIconVariant);
+    const ResolvedIcon = generatedIconRegistry[resolvedVariant][name];
+    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+    return (_jsx(ResolvedIcon, { ...componentProps, ...intrinsicAttributes, "aria-hidden": "true", className: clsx('Icon', className), size: size }));
+};

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

@@ -0,0 +1,2 @@
+export { Icon } from './icon';
+export type { IconProps } from './icon';

package/dist/components/icon/index.js

@@ -0,0 +1 @@
+export { Icon } from './icon';

package/dist/components/icon-button/icon-button.d.ts

@@ -0,0 +1,31 @@
+import type { ButtonProps } from '@react/src/components';
+import type { ReactNode } from 'react';
+type AccessibleNameProps = {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} | {
+    'aria-labelledby': string;
+    'aria-label'?: never;
+};
+/**
+ * Public IconButton props.
+ *
+ * Typed wrapper over `Button` for icon-only actions. Requires an accessible name
+ * via `aria-label` or `aria-labelledby`.
+ */
+export type IconButtonProps = Omit<ButtonProps, 'children' | 'iconPosition' | 'size'> & AccessibleNameProps & {
+    /**
+     * Controls the visual button size.
+     *
+     * @default 'medium'
+     */
+    size?: ButtonProps['size'];
+    /**
+     * Icon rendered as the sole visible control content.
+     *
+     * @default No default; required for every IconButton.
+     */
+    icon: ReactNode;
+};
+export declare const IconButton: React.FC<IconButtonProps>;
+export {};

package/dist/components/icon-button/icon-button.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@react/src/components/button/button';
+export const IconButton = ({ icon, size = 'medium', ...props }) => (_jsx(Button, { icon: icon, size: size, ...props }));

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+export { IconButton } from './icon-button';
+export type { IconButtonProps } from './icon-button';

package/dist/components/icon-button/index.js

@@ -0,0 +1 @@
+export { IconButton } from './icon-button';

package/dist/components/index.d.ts

@@ -0,0 +1,17 @@
+export * from './avatar';
+export * from './clamp-text';
+export * from './elevator';
+export * from './button';
+export * from './icon-button';
+export * from './textfield';
+export * from './textarea';
+export * from './slider';
+export * from './switch';
+export * from './select';
+export * from './icon';
+export * from './skeleton';
+export * from './stack';
+export * from './surface';
+export * from './spinner';
+export * from './text';
+export * from './title';

package/dist/components/index.js

@@ -0,0 +1,17 @@
+export * from './avatar';
+export * from './clamp-text';
+export * from './elevator';
+export * from './button';
+export * from './icon-button';
+export * from './textfield';
+export * from './textarea';
+export * from './slider';
+export * from './switch';
+export * from './select';
+export * from './icon';
+export * from './skeleton';
+export * from './stack';
+export * from './surface';
+export * from './spinner';
+export * from './text';
+export * from './title';

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

@@ -0,0 +1,2 @@
+export { Select } from './select';
+export type { SelectProps } from './select';

package/dist/components/select/index.js

@@ -0,0 +1 @@
+export { Select } from './select';

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

@@ -0,0 +1,12 @@
+import type { SelectGroup as SelectGroupPrimitive } from '@base-ui/react/select';
+import type * as React from 'react';
+/**
+ * Public Select.Group props.
+ */
+export type SelectGroupProps = SelectGroupPrimitive.Props & {
+    /**
+     * Accessible group label rendered with `Select.GroupLabel`.
+     */
+    label: React.ReactNode;
+};
+export declare function SelectGroup({ children, className, label, ...groupProps }: SelectGroupProps): React.JSX.Element;

package/dist/components/select/select-group.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select as PrimitiveSelect } from '@base-ui/react/select';
+import { Stack } from '@react/src/components/stack';
+import { Text } from '@react/src/components/text';
+import { clsx } from 'clsx';
+import { SelectIndicatorSlot } from './select-indicator-slot';
+export function SelectGroup({ children, className, label, ...groupProps }) {
+    return (_jsxs(PrimitiveSelect.Group, { ...groupProps, className: clsx('Group', className), render: _jsx(Stack, { direction: "column", fillChildren: false, rowGap: "2x-small", vPadding: "2x-small" }), children: [_jsxs(PrimitiveSelect.GroupLabel, { className: "GroupLabel", render: _jsx(Stack, { columnGap: "small", direction: "row", fillChildren: false, hPadding: "small", vAlign: "center" }), children: [_jsx(Text, { size: "x-small", tone: "muted", weight: "semibold", children: label }), _jsx(SelectIndicatorSlot, {})] }), children] }));
+}

package/dist/components/select/select-indicator-slot.d.ts

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+export type SelectIndicatorSlotProps = {
+    children?: React.ReactNode;
+    /**
+     * When true, renders as Base UI `ItemIndicator` with `keepMounted`.
+     * When false, renders an empty spacer with the same inline footprint.
+     *
+     * @default false
+     */
+    interactive?: boolean;
+};
+export declare function SelectIndicatorSlot({ children, interactive }: SelectIndicatorSlotProps): React.JSX.Element;

package/dist/components/select/select-indicator-slot.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select as PrimitiveSelect } from '@base-ui/react/select';
+import { Stack } from '@react/src/components/stack';
+const indicatorStackRender = _jsx(Stack, { fillChildren: false, hAlign: "center", inline: true, shrink: false, vAlign: "center" });
+export function SelectIndicatorSlot({ children, interactive = false }) {
+    if (interactive) {
+        return (_jsx(PrimitiveSelect.ItemIndicator, { className: "Indicator", "data-grow": "false", keepMounted: true, render: indicatorStackRender, children: children }));
+    }
+    return (_jsx(Stack, { "aria-hidden": true, className: "Indicator", grow: false, fillChildren: false, hAlign: "center", inline: true, shrink: false, vAlign: "center" }));
+}

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

@@ -0,0 +1,16 @@
+import type { SelectItem } from '@base-ui/react/select';
+import type * as React from 'react';
+/**
+ * Public Select.Option props.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type SelectOptionProps = SelectItem.Props & {
+    /**
+     * Custom indicator node rendered when the option is selected.
+     *
+     * @default `CheckBoxArrow` icon.
+     */
+    indicator?: React.ReactNode;
+};
+export declare function SelectOption({ children, className, disabled, indicator, label, value, ...itemProps }: SelectOptionProps): React.JSX.Element;

package/dist/components/select/select-option.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select as PrimitiveSelect } from '@base-ui/react/select';
+import { Icon } from '@react/src/components/icon';
+import { Stack } from '@react/src/components/stack';
+import { Text } from '@react/src/components/text';
+import { clsx } from 'clsx';
+import { SelectIndicatorSlot } from './select-indicator-slot';
+export function SelectOption({ children, className, disabled, indicator, label, value, ...itemProps }) {
+    return (_jsxs(PrimitiveSelect.Item, { ...itemProps, "aria-label": label, label: label, className: clsx('Option', className), disabled: disabled, render: _jsx(Stack, { columnGap: "small", direction: "row", hPadding: "small", vPadding: "small", vAlign: "center" }), value: value, children: [_jsx(Text, { className: "OptionText", lineHeight: "small", render: _jsx(PrimitiveSelect.ItemText, {}), size: "small", children: children }), _jsx(SelectIndicatorSlot, { interactive: true, children: indicator ?? _jsx(Icon, { name: "Check", size: 16 }) })] }));
+}

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

@@ -0,0 +1,9 @@
+import { Select as PrimitiveSelect } from '@base-ui/react/select';
+import type * as React from 'react';
+/**
+ * Public Select.Separator props.
+ *
+ * @default `orientation` is `'horizontal'`.
+ */
+export type SelectSeparatorProps = React.ComponentProps<typeof PrimitiveSelect.Separator>;
+export declare function SelectSeparator({ className, orientation, ...separatorProps }: SelectSeparatorProps): React.JSX.Element;

package/dist/components/select/select-separator.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select as PrimitiveSelect } from '@base-ui/react/select';
+import { clsx } from 'clsx';
+export function SelectSeparator({ className, orientation = 'horizontal', ...separatorProps }) {
+    return (_jsx(PrimitiveSelect.Separator, { ...separatorProps, className: clsx('Separator', className), orientation: orientation }));
+}