@viraui/react 0.0.1

package/dist/components/text/text.css

@@ -0,0 +1,139 @@
+@scope (.Text) {
+  :scope {
+    --text-align: start;
+    --text-max-width: none;
+    --text-white-space: normal;
+    --text-padding-inline-start: 0;
+    --text-padding-inline-end: 0;
+    --text-padding-block-start: 0;
+    --text-padding-block-end: 0;
+    --text-font-family: var(--font-family-body);
+    --text-fluid-factor: 5vw;
+    --text-font-size: clamp(var(--font-scale-body-small), var(--text-fluid-factor, 5vw), var(--font-scale-body-medium));
+    --text-font-weight: 400;
+    --text-font-width: 100;
+    --text-font-opsz: 16;
+    --text-line-height: var(--font-leading-standard);
+
+    margin: 0;
+    min-inline-size: 0;
+    max-inline-size: var(--text-max-width);
+    font-family: var(--text-font-family);
+    font-size: var(--text-font-size);
+    line-height: var(--text-line-height);
+    text-align: var(--text-align);
+    white-space: var(--text-white-space);
+    word-break: break-word;
+    font-optical-sizing: auto;
+    font-variation-settings:
+      'wght' var(--text-font-weight),
+      'wdth' var(--text-font-width),
+      'opsz' var(--text-font-opsz);
+    text-box: var(--text-trim) var(--text-trim-type);
+
+    &[data-text-balanced='true'] {
+      text-wrap: balance;
+    }
+
+    &[data-text-has-padding='true'] {
+      padding: var(--text-padding-block-start) var(--text-padding-inline-end) var(--text-padding-block-end)
+        var(--text-padding-inline-start);
+    }
+
+    &[data-text-family='mono'] {
+      --text-font-family: var(--font-family-mono);
+    }
+
+    &[data-text-size='x-large'] {
+      --text-font-size: clamp(
+        var(--font-scale-body-large),
+        var(--text-fluid-factor, 5vw),
+        var(--font-scale-body-x-large)
+      );
+    }
+
+    &[data-text-size='large'] {
+      --text-font-size: clamp(
+        var(--font-scale-body-medium),
+        var(--text-fluid-factor, 5vw),
+        var(--font-scale-body-large)
+      );
+    }
+
+    &[data-text-size='medium'] {
+      --text-font-size: clamp(
+        var(--font-scale-body-small),
+        var(--text-fluid-factor, 5vw),
+        var(--font-scale-body-medium)
+      );
+    }
+
+    &[data-text-size='small'] {
+      --text-font-size: clamp(
+        var(--font-scale-body-x-small),
+        var(--text-fluid-factor, 5vw),
+        var(--font-scale-body-small)
+      );
+    }
+
+    &[data-text-size='x-small'] {
+      --text-font-size: var(--font-scale-body-x-small);
+    }
+
+    &[data-text-weight='light'] {
+      --text-font-weight: 200;
+    }
+
+    &[data-text-weight='semibold'] {
+      --text-font-weight: 600;
+    }
+
+    &[data-text-weight='bold'] {
+      --text-font-weight: 800;
+    }
+
+    &[data-text-tone='muted'] {
+      color: var(--global-muted);
+    }
+
+    &[data-text-tone='interactive'] {
+      color: var(--global-interactive-text);
+    }
+
+    &[data-text-tone='positive'] {
+      color: var(--highlight-green);
+    }
+
+    &[data-text-tone='informative'] {
+      color: var(--highlight-blue);
+    }
+
+    &[data-text-tone='danger'] {
+      color: var(--highlight-red);
+    }
+
+    &[data-text-tone='warning'] {
+      color: var(--highlight-yellow);
+    }
+
+    &[data-text-has-literal-color='true'] {
+      color: var(--text-literal-color);
+    }
+
+    &[data-text-line-height='none'] {
+      --text-line-height: 0;
+    }
+
+    &[data-text-line-height='x-small'] {
+      --text-line-height: var(--font-leading-x-small);
+    }
+
+    &[data-text-line-height='small'] {
+      --text-line-height: var(--font-leading-small);
+    }
+
+    &[data-text-line-height='large'] {
+      --text-line-height: var(--font-leading-large);
+    }
+  }
+}

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

@@ -0,0 +1,127 @@
+import { useRender } from '@base-ui/react/use-render';
+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 './text.css';
+type TextSpace = ThemeTypes['space'];
+type TextAxisPadding = TextSpace | [TextSpace | 0, TextSpace | 0];
+/**
+ * Public Text props.
+ *
+ * Includes standard inline text attributes such as `children`, `id`, `title`, and event handlers,
+ * plus Vira-owned body typography, color, and layout controls.
+ *
+ * @default Base HTML pass-through props keep upstream defaults.
+ */
+export type TextProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraProps & {
+    /**
+     * Replaces the default `span` root using Base UI render semantics.
+     *
+     * @default The text renders a `span` root.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Ref forwarded to the rendered text root element.
+     *
+     * @default No ref is attached.
+     */
+    ref?: React.Ref<HTMLElement>;
+    /**
+     * Selects a semantic body typography size from the active theme scale.
+     *
+     * @default 'body-medium'
+     */
+    size?: 'x-large' | 'large' | 'medium' | 'small' | 'x-small';
+    /**
+     * Selects the semantic font family for body copy and inline code-like text.
+     *
+     * @default 'body'
+     */
+    family?: 'body' | 'mono';
+    /**
+     * Selects a semantic weight keyword or a numeric variable-font weight override.
+     *
+     * @default 'regular'
+     */
+    weight?: 'light' | 'regular' | 'semibold' | 'bold' | number;
+    /**
+     * Sets the semantic text color role when no literal `color` override is used.
+     *
+     * @default No semantic tone override.
+     */
+    tone?: 'default' | 'muted' | 'interactive' | 'positive' | 'informative' | 'danger' | 'warning';
+    /**
+     * Applies a literal color escape hatch when semantic `tone` is not used.
+     *
+     * @default No literal color override.
+     */
+    color?: string;
+    /**
+     * Controls line height through foundation leading tokens.
+     *
+     * @default 'standard'
+     */
+    lineHeight?: 'none' | 'x-small' | 'small' | 'standard' | 'large';
+    /**
+     * Aligns text using logical alignment values.
+     *
+     * @default 'start'
+     */
+    align?: React.CSSProperties['textAlign'];
+    /**
+     * Constrains the maximum inline size of the rendered text block.
+     *
+     * @default No max width constraint.
+     */
+    maxWidth?: string;
+    /**
+     * Controls white-space preservation and wrapping behavior.
+     *
+     * @default 'normal'
+     */
+    whiteSpace?: React.CSSProperties['whiteSpace'];
+    /**
+     * Enables balanced wrapping for block-like copy.
+     *
+     * @default false
+     */
+    balanced?: boolean;
+    /**
+     * Sets inline padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No inline padding.
+     */
+    hPadding?: TextAxisPadding;
+    /**
+     * Sets block padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No block padding.
+     */
+    vPadding?: TextAxisPadding;
+    /**
+     * Trims text box whitespace at the chosen edge when the browser supports `text-box`.
+     *
+     * @default 'both'
+     */
+    trim?: 'start' | 'end' | 'both';
+    /**
+     * Selects the `text-box` trim basis when `trim` is active.
+     *
+     * @default 'text alphabetic'
+     */
+    trimType?: string;
+    /**
+     * Overrides the variable-font width axis when the active font supports it.
+     *
+     * @default No width override.
+     */
+    fontWidth?: number;
+    /**
+     * Overrides the variable-font optical size axis when the active font supports it.
+     *
+     * @default No optical size override.
+     */
+    opticalSize?: number;
+};
+export declare const Text: React.FC<TextProps>;
+export {};

package/dist/components/text/text.js

@@ -0,0 +1,43 @@
+'use client';
+import { useRender } from '@base-ui/react/use-render';
+import { extractIntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+import { resolveAxisPadding } from '@react/src/core/styles/resolve-axis-padding';
+import { clsx } from 'clsx';
+import './text.css';
+export const Text = ({ align = 'start', balanced = false, className, color, family = 'body', fontWidth, hPadding, lineHeight = 'standard', maxWidth, opticalSize, ref, render, size = 'medium', style, tone, trim, trimType = 'cap alphabetic', vPadding, weight = 'regular', whiteSpace = 'normal', ...otherProps }) => {
+    const hasPadding = Boolean(hPadding || vPadding);
+    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+    const dynamicStyle = {
+        '--text-align': align,
+        '--text-max-width': maxWidth ?? 'none',
+        '--text-literal-color': color,
+        '--text-white-space': whiteSpace,
+        '--text-trim': trim ? `trim-${trim}` : 'initial',
+        '--text-trim-type': trim ? trimType : 'initial',
+        ...(typeof weight === 'number' ? { '--text-font-weight': weight } : {}),
+        ...(fontWidth !== undefined ? { '--text-font-width': fontWidth } : {}),
+        ...(opticalSize !== undefined ? { '--text-font-opsz': opticalSize } : {}),
+        ...resolveAxisPadding(hPadding, '--text-padding-inline-start', '--text-padding-inline-end'),
+        ...resolveAxisPadding(vPadding, '--text-padding-block-start', '--text-padding-block-end'),
+        ...style,
+    };
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        ref,
+        props: {
+            ...componentProps,
+            ...intrinsicAttributes,
+            'data-text-size': size,
+            'data-text-family': family,
+            'data-text-weight': typeof weight === 'string' ? weight : 'custom',
+            'data-text-tone': tone,
+            'data-text-line-height': lineHeight,
+            'data-text-balanced': balanced ? 'true' : 'false',
+            'data-text-has-padding': hasPadding ? 'true' : 'false',
+            'data-text-has-literal-color': color ? 'true' : 'false',
+            className: clsx('Text', className),
+            style: dynamicStyle,
+        },
+    });
+};

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

@@ -0,0 +1,2 @@
+export { Textarea } from './textarea';
+export type { TextareaProps } from './textarea';

package/dist/components/textarea/index.js

@@ -0,0 +1 @@
+export { Textarea } from './textarea';

package/dist/components/textarea/textarea.css

@@ -0,0 +1,45 @@
+@scope (.Textarea) {
+  :scope {
+    --textarea-min-block-size: calc(var(--space-x-large) * 2);
+    --textarea-padding-block: var(--space-small);
+    --textarea-input-border-radius: var(--radius-small);
+    inline-size: 100%;
+
+    > .BasicInput {
+      --basic-input-border-radius: var(--textarea-input-border-radius);
+      border: 1px solid var(--global-contrast);
+      min-block-size: var(--textarea-min-block-size);
+      padding-block: var(--textarea-padding-block);
+      line-height: 1.4;
+      resize: none;
+
+      &[data-resize='vertical'] {
+        resize: vertical;
+      }
+
+      &[data-resize='both'] {
+        resize: both;
+      }
+
+      &[data-invalid] {
+        border-color: var(--highlight-red);
+      }
+
+      &:disabled,
+      &[data-disabled] {
+        border-color: transparent;
+      }
+    }
+
+    /* Required field: append red asterisk on Label */
+    &:has([required]) > .Label::after {
+      content: ' ＊';
+      color: var(--highlight-red);
+    }
+
+    > .Label,
+    > .Description {
+      padding-inline: calc(var(--textarea-input-border-radius) / 2);
+    }
+  }
+}

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,56 @@
+import type { FieldRoot } from '@base-ui/react/field';
+import type * as React from 'react';
+import './textarea.css';
+import type { IntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+/**
+ * Public Textarea props.
+ *
+ * Includes native textarea props such as `value`, `defaultValue`, `placeholder`, `disabled`,
+ * `rows`, and event handlers on `Field.Control` (`render={<textarea />}`), plus optional
+ * `label`, `description`, and `error` copy rendered with `Text` inside a `Stack` field layout.
+ *
+ * @default Base UI `Field.Root` pass-through props keep upstream defaults.
+ */
+export type TextareaProps = React.ComponentPropsWithoutRef<'textarea'> & 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<HTMLTextAreaElement>;
+    /**
+     * 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. Validation messages from `validate`
+     * are shown by `Field.Error` even when this prop is omitted.
+     *
+     * @default No static error copy is rendered.
+     */
+    error?: React.ReactNode;
+    /**
+     * Resize behavior for the control. Omitted disables resize; `"vertical"` allows vertical resize;
+     * `"both"` allows horizontal and vertical resize.
+     *
+     * @default undefined (no resize)
+     */
+    resize?: 'vertical' | 'both';
+};
+export declare const Textarea: React.FC<TextareaProps>;

package/dist/components/textarea/textarea.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field } from '@base-ui/react/field';
+import { BasicInput } from '@react/src/components/basic-input';
+import { FieldHelperCopy } from '@react/src/components/basic-input/field-helper-copy';
+import { Stack } from '@react/src/components/stack';
+import { Text } from '@react/src/components/text';
+import { extractIntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+import './textarea.css';
+export const Textarea = ({ className, description, dirty, disabled, error, invalid, label, name, ref, resize, touched, validate, validationDebounceTime, validationMode, ...textareaProps }) => {
+    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(textareaProps);
+    return (_jsxs(Field.Root, { ...intrinsicAttributes, className: "Textarea", 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, {}), children: label })), _jsx(BasicInput, { ...componentProps, ref: ref, className: className, "data-resize": resize, disabled: disabled, render: _jsx("textarea", {}) }), _jsx(FieldHelperCopy, { description: description, error: error })] }));
+};

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

@@ -0,0 +1,2 @@
+export { Textfield } from './textfield';
+export type { TextfieldProps } from './textfield';

package/dist/components/textfield/index.js

@@ -0,0 +1 @@
+export { Textfield } from './textfield';

package/dist/components/textfield/textfield.css

@@ -0,0 +1,87 @@
+@scope (.Textfield) {
+  :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);
+    inline-size: 100%;
+
+    > .ControlGroup {
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-inline-size: 0;
+      block-size: var(--input-height);
+      background: var(--control-group-background);
+      border: 1px solid var(--control-group-border-color);
+      border-radius: var(--control-group-border-radius);
+
+      &:has(.BasicInput[data-focused]),
+      &:has(.BasicInput:focus-visible) {
+        outline: 2px solid var(--global-foreground);
+        outline-offset: 2px;
+      }
+
+      /* Invalid: propagate BasicInput error border and outline to ControlGroup shell */
+      &:has(.BasicInput[data-invalid]) {
+        --control-group-border-color: var(--highlight-red);
+        box-shadow: none;
+        outline-color: oklab(from var(--highlight-red) l a b / 0.5);
+      }
+
+      /* Disabled: mirror disabled input background/border on ControlGroup */
+      &:has(.BasicInput:disabled),
+      &:has(.BasicInput[data-disabled]) {
+        --control-group-background: var(--global-disabled-background);
+        --control-group-border-color: transparent;
+
+        box-shadow: none;
+        cursor: not-allowed;
+      }
+
+      > .BasicInput {
+        flex: 1 1 auto;
+        min-inline-size: 0;
+        block-size: 100%;
+        line-height: 1.2;
+        border: none;
+        background: transparent;
+        box-shadow: none;
+        border-radius: inherit;
+
+        &:focus-visible {
+          outline: none;
+        }
+
+        &:disabled {
+          cursor: not-allowed;
+        }
+      }
+
+      > .Addon {
+        min-inline-size: var(--space-x-large);
+      }
+
+      /* Addon start: tighten input padding so text does not sit under the addon */
+      &:has(.Addon[data-position='start']) > .BasicInput {
+        padding-inline-start: var(--space-x-small);
+      }
+
+      /* Addon end: tighten trailing padding on the input */
+      &:has(.Addon[data-position='end']) > .BasicInput {
+        padding-inline-end: var(--space-x-small);
+      }
+    }
+
+    /* Required field: append red asterisk on Label */
+    &:has([required]) > .Label::after {
+      content: ' ＊';
+      color: var(--highlight-red);
+    }
+
+    > .Label,
+    > .Description {
+      padding-inline: calc(var(--control-group-border-radius) / 2);
+    }
+  }
+}

package/dist/components/textfield/textfield.d.ts

@@ -0,0 +1,49 @@
+import type { FieldRoot } from '@base-ui/react/field';
+import { Input as PrimitiveInput } from '@base-ui/react/input';
+import type * as React from 'react';
+import './textfield.css';
+import type { IntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+/**
+ * Public Textfield props.
+ *
+ * Includes Base UI input props such as `value`, `defaultValue`, `placeholder`, `disabled`,
+ * and event handlers, plus optional `label`, `description`, and `error` copy rendered with
+ * `Text` inside a `Stack` field layout.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type TextfieldProps = PrimitiveInput.Props & FieldRoot.Props & 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. Validation messages from `validate`
+     * are shown by `Field.Error` even when this prop is omitted.
+     *
+     * @default No static error copy is rendered.
+     */
+    error?: React.ReactNode;
+    /**
+     * Leading decoration (prefix text, icon). Not a second field control.
+     *
+     * @default No start addon is rendered.
+     */
+    startAddon?: React.ReactNode;
+    /**
+     * Trailing decoration (icon, button). Buttons must use `type="button"`.
+     *
+     * @default No end addon is rendered.
+     */
+    endAddon?: React.ReactNode;
+};
+export declare const Textfield: React.FC<TextfieldProps>;

package/dist/components/textfield/textfield.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field } from '@base-ui/react/field';
+import { Input as PrimitiveInput } from '@base-ui/react/input';
+import { Stack, Text } from '@react/src/components';
+import { BasicInput } from '@react/src/components/basic-input';
+import { FieldHelperCopy } from '@react/src/components/basic-input/field-helper-copy';
+import { InputControlGroup } from '@react/src/components/basic-input/input-control-group';
+import { extractIntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+import './textfield.css';
+export const Textfield = ({ className, description, dirty, disabled, endAddon, error, invalid, label, name, ref, startAddon, touched, validate, validationDebounceTime, validationMode, ...inputProps }) => {
+    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(inputProps);
+    return (_jsxs(Field.Root, { ...intrinsicAttributes, className: "Textfield", 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, {}), children: label })), _jsx(InputControlGroup, { endAddon: endAddon, startAddon: startAddon, children: _jsx(BasicInput, { ...componentProps, ref: ref, className: className, disabled: disabled, render: _jsx(PrimitiveInput, {}) }) }), _jsx(FieldHelperCopy, { description: description, error: error })] }));
+};

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

@@ -0,0 +1,2 @@
+export { Title } from './title';
+export type { TitleProps } from './title';

package/dist/components/title/index.js

@@ -0,0 +1 @@
+export { Title } from './title';