@viraui/react 0.0.16 → 0.0.18

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

@@ -1,7 +1,6 @@
-import type { FieldRoot } from '@base-ui/react/field';
+import { FieldRoot } from '@base-ui/react/field';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
-import './textarea.css';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 /**
  * Public Textarea props.
  *
@@ -26,7 +25,7 @@ export type TextareaProps = React.ComponentPropsWithoutRef<'textarea'> & Omit<Fi
     shrink?: IntrinsicViraProps['shrink'];
     ref?: React.Ref<HTMLTextAreaElement>;
     /**
-     * Visible label rendered with `Field.Label` and `Text`.
+     * Visible label rendered with shared internal `FieldLabel`.
      *
      * @default No label is rendered.
      */

package/dist/components/textarea/textarea.js

@@ -1,13 +1,53 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Field } from '@base-ui/react/field';
-import { BasicInput } from '../../components/basic-input/index.js';
-import { FieldHelperCopy } from '../../components/basic-input/field-helper-copy.js';
-import { Stack } from '../../components/stack/index.js';
-import { Text } from '../../components/text/index.js';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
+"use client";
 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 })] }));
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { BasicInput } from "../basic-input/basic-input.js";
+import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
+import { FieldLabel } from "../basic-input/field-label.js";
+import { Stack } from "../stack/stack.js";
+import textarea_module_default from "./textarea.module.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+//#region src/components/textarea/textarea.tsx
+var Textarea = ({ className, description, dirty, disabled, error, invalid, label, name, ref, resize, touched, validate, validationDebounceTime, validationMode, ...textareaProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(textareaProps);
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		...intrinsicAttributes,
+		className: textarea_module_default.Textarea,
+		dirty,
+		disabled,
+		invalid,
+		name,
+		touched,
+		validate,
+		validationDebounceTime,
+		validationMode,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "column",
+			fillChildren: false,
+			rowGap: "small"
+		}),
+		children: [
+			label && /* @__PURE__ */ jsx(Field.Label, {
+				"data-field-label": "",
+				children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
+			}),
+			/* @__PURE__ */ jsx(BasicInput, {
+				...componentProps,
+				ref,
+				className: clsx(textarea_module_default.CustomBasicInput, className),
+				"data-resize": resize,
+				disabled,
+				render: /* @__PURE__ */ jsx("textarea", {})
+			}),
+			/* @__PURE__ */ jsx(FieldHelperCopy, {
+				className: textarea_module_default.Description,
+				description,
+				error
+			})
+		]
+	});
 };
+//#endregion
+export { Textarea };

package/dist/components/textarea/textarea.module.js

@@ -0,0 +1,7 @@
+var textarea_module_default = {
+	Textarea: "textarea-module_Textarea_mtOUG",
+	CustomBasicInput: "textarea-module_CustomBasicInput_Ce7yA",
+	Description: "textarea-module_Description_er3zI"
+};
+//#endregion
+export { textarea_module_default as default };

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

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

package/dist/components/textfield/textfield.css

@@ -1,87 +1 @@
-@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);
-    }
-  }
-}
+.textfield-module_Textfield_o-70A{--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);--field-label-padding-inline:calc(var(--control-group-border-radius) / 2);inline-size:100%;&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.textfield-module_ControlGroup_2W-OC{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(.textfield-module_CustomBasicInput_oHgtd:focus-visible),&:has(.textfield-module_CustomBasicInput_oHgtd[data-focused]){outline:2px solid var(--global-foreground);outline-offset:2px}&:has(.textfield-module_CustomBasicInput_oHgtd[data-invalid]){--control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.textfield-module_CustomBasicInput_oHgtd:disabled),&:has(.textfield-module_CustomBasicInput_oHgtd[data-disabled]){--control-group-background:var(--global-disabled-background);--control-group-border-color:transparent;box-shadow:none;cursor:not-allowed}&:has(.textfield-module_Addon_kK1ef[data-position=start])>.textfield-module_CustomBasicInput_oHgtd{padding-inline-start:var(--space-x-small)}&:has(.textfield-module_Addon_kK1ef[data-position=end])>.textfield-module_CustomBasicInput_oHgtd{padding-inline-end:var(--space-x-small)}}.textfield-module_CustomBasicInput_oHgtd{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}}.textfield-module_Addon_kK1ef{min-inline-size:var(--space-x-large)}.textfield-module_Description_8Qxot{padding-inline:calc(var(--control-group-border-radius) / 2)}

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

@@ -1,8 +1,7 @@
-import type { FieldRoot } from '@base-ui/react/field';
+import { FieldRoot } from '@base-ui/react/field';
 import { Input as PrimitiveInput } from '@base-ui/react/input';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
-import './textfield.css';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 /**
  * Public Textfield props.
  *
@@ -14,7 +13,7 @@ import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.j
  */
 export type TextfieldProps = PrimitiveInput.Props & FieldRoot.Props & IntrinsicViraProps & {
     /**
-     * Visible label rendered with `Field.Label` and `Text`.
+     * Visible label rendered with shared internal `FieldLabel`.
      *
      * @default No label is rendered.
      */

package/dist/components/textfield/textfield.js

@@ -1,14 +1,60 @@
-'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 '../index.js';
-import { BasicInput } from '../../components/basic-input/index.js';
-import { FieldHelperCopy } from '../../components/basic-input/field-helper-copy.js';
-import { InputControlGroup } from '../../components/basic-input/input-control-group.js';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
+"use client";
 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 })] }));
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { BasicInput } from "../basic-input/basic-input.js";
+import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
+import { FieldLabel } from "../basic-input/field-label.js";
+import { InputControlGroup } from "../basic-input/input-control-group.js";
+import { Stack } from "../stack/stack.js";
+import textfield_module_default from "./textfield.module.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { Input } from "@base-ui/react/input";
+//#region src/components/textfield/textfield.tsx
+var Textfield = ({ className, description, dirty, disabled, endAddon, error, invalid, label, name, ref, startAddon, touched, validate, validationDebounceTime, validationMode, ...inputProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(inputProps);
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		...intrinsicAttributes,
+		className: textfield_module_default.Textfield,
+		dirty,
+		disabled,
+		invalid,
+		name,
+		touched,
+		validate,
+		validationDebounceTime,
+		validationMode,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "column",
+			fillChildren: false,
+			rowGap: "small"
+		}),
+		children: [
+			label && /* @__PURE__ */ jsx(Field.Label, {
+				"data-field-label": "",
+				children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
+			}),
+			/* @__PURE__ */ jsx(InputControlGroup, {
+				addonClassName: textfield_module_default.Addon,
+				controlGroupClassName: textfield_module_default.ControlGroup,
+				endAddon,
+				startAddon,
+				children: /* @__PURE__ */ jsx(BasicInput, {
+					...componentProps,
+					ref,
+					className: clsx(textfield_module_default.CustomBasicInput, className),
+					disabled,
+					render: /* @__PURE__ */ jsx(Input, {})
+				})
+			}),
+			/* @__PURE__ */ jsx(FieldHelperCopy, {
+				className: textfield_module_default.Description,
+				description,
+				error
+			})
+		]
+	});
 };
+//#endregion
+export { Textfield };

package/dist/components/textfield/textfield.module.js

@@ -0,0 +1,9 @@
+var textfield_module_default = {
+	Textfield: "textfield-module_Textfield_o-70A",
+	ControlGroup: "textfield-module_ControlGroup_2W-OC",
+	CustomBasicInput: "textfield-module_CustomBasicInput_oHgtd",
+	Addon: "textfield-module_Addon_kK1ef",
+	Description: "textfield-module_Description_8Qxot"
+};
+//#endregion
+export { textfield_module_default as default };

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

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

package/dist/components/title/title.css

@@ -1,137 +1 @@
-@scope (.Title) {
-  :scope {
-    /*
-     * Fluid heading scale (web.dev baseline pattern).
-     * Foundation refs: --font-scale-body-medium (fluid base), --font-heading-typescale, --font-scale-* bounds.
-     */
-    --title-medium: clamp(
-      var(--font-scale-body-medium),
-      calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),
-      calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3)
-    );
-
-    --title-font-size: clamp(
-      var(--font-scale-h2),
-      calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),
-      var(--font-scale-h1)
-    );
-
-    /* --- typography --- */
-    --title-font-family: var(--font-family-heading);
-    --title-font-weight: 500;
-    --title-font-width: 100;
-    --title-font-opsz: 16;
-    --title-line-height: var(--font-leading-standard);
-    --title-letter-spacing: -0.03em;
-
-    /* --- layout defaults --- */
-    --title-align: start;
-    --title-max-width: none;
-    --title-white-space: normal;
-    --title-padding-inline-start: 0;
-    --title-padding-inline-end: 0;
-    --title-padding-block-start: 0;
-    --title-padding-block-end: 0;
-
-    margin: 0;
-    max-inline-size: var(--title-max-width);
-    font-family: var(--title-font-family);
-    font-size: var(--title-font-size);
-    line-height: var(--title-line-height);
-    letter-spacing: var(--title-letter-spacing);
-    text-align: var(--title-align);
-    white-space: var(--title-white-space);
-    word-break: break-word;
-    font-optical-sizing: auto;
-    font-variation-settings:
-      'wght' var(--title-font-weight),
-      'wdth' var(--title-font-width),
-      'opsz' var(--title-font-opsz);
-    text-box: var(--title-trim) var(--title-trim-type);
-    display: inline-flex;
-
-    &[data-title-balanced='true'] {
-      text-wrap: balance;
-    }
-
-    &[data-title-has-padding='true'] {
-      padding: var(--title-padding-block-start) var(--title-padding-inline-end) var(--title-padding-block-end)
-        var(--title-padding-inline-start);
-    }
-
-    /* --- level overrides --- */
-    &[data-title-level='display'] {
-      --title-font-size: clamp(
-        var(--font-scale-h1),
-        calc(var(--font-scale-h1) + 4.643cqi - 0.9286rem),
-        var(--font-scale-display)
-      );
-    }
-
-    &[data-title-level='h1'] {
-      --title-font-size: clamp(
-        var(--font-scale-h2),
-        calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),
-        var(--font-scale-h1)
-      );
-    }
-
-    &[data-title-level='h2'] {
-      --title-font-size: clamp(
-        var(--font-scale-h3),
-        calc(var(--title-medium) * pow(var(--font-heading-typescale), 4)),
-        var(--font-scale-h2)
-      );
-    }
-
-    &[data-title-level='h3'] {
-      --title-font-size: clamp(
-        var(--font-scale-h4),
-        calc(var(--title-medium) * pow(var(--font-heading-typescale), 3)),
-        var(--font-scale-h3)
-      );
-    }
-
-    &[data-title-level='h4'] {
-      --title-font-size: clamp(
-        var(--font-scale-h5),
-        calc(var(--title-medium) * pow(var(--font-heading-typescale), 2)),
-        var(--font-scale-h4)
-      );
-    }
-
-    &[data-title-level='h5'] {
-      --title-font-size: clamp(
-        var(--font-scale-h6),
-        calc(var(--title-medium) * pow(var(--font-heading-typescale), 1)),
-        var(--font-scale-h5)
-      );
-      --title-letter-spacing: -0.02em;
-    }
-
-    &[data-title-level='h6'] {
-      --title-font-size: clamp(var(--font-scale-body-medium), var(--title-medium), var(--font-scale-h6));
-      --title-letter-spacing: -0.02em;
-    }
-
-    &[data-title-has-literal-color='true'] {
-      color: var(--title-literal-color);
-    }
-
-    &[data-title-line-height='none'] {
-      --title-line-height: 0;
-    }
-
-    &[data-title-line-height='x-small'] {
-      --title-line-height: var(--font-leading-x-small);
-    }
-
-    &[data-title-line-height='small'] {
-      --title-line-height: var(--font-leading-small);
-    }
-
-    &[data-title-line-height='large'] {
-      --title-line-height: var(--font-leading-large);
-    }
-  }
-}
+.title-module_Title_CXMUX{--title-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1));--title-font-family:var(--font-family-heading);--title-font-weight:500;--title-font-width:100;--title-font-opsz:16;--title-line-height:var(--font-leading-standard);--title-letter-spacing:-0.03em;--title-align:start;--title-max-width:none;--title-white-space:normal;--title-padding-inline-start:0;--title-padding-inline-end:0;--title-padding-block-start:0;--title-padding-block-end:0;margin:0;max-inline-size:var(--title-max-width);font-family:var(--title-font-family);font-size:var(--title-font-size);line-height:var(--title-line-height);letter-spacing:var(--title-letter-spacing);text-align:var(--title-align);white-space:var(--title-white-space);word-break:break-word;font-optical-sizing:auto;font-variation-settings:"wght" var(--title-font-weight),"wdth" var(--title-font-width),"opsz" var(--title-font-opsz);text-box:var(--title-trim) var(--title-trim-type);display:inline-flex;&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--title-padding-block-start) var(--title-padding-inline-end) var(--title-padding-block-end) var(--title-padding-inline-start)}&[data-title-level=display]{--title-font-size:clamp(var(--font-scale-h1),calc(var(--font-scale-h1) + 4.643cqi - 0.9286rem),var(--font-scale-display))}&[data-title-level=h1]{--title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1))}&[data-title-level=h2]{--title-font-size:clamp(var(--font-scale-h3),calc(var(--title-medium) * pow(var(--font-heading-typescale), 4)),var(--font-scale-h2))}&[data-title-level=h3]{--title-font-size:clamp(var(--font-scale-h4),calc(var(--title-medium) * pow(var(--font-heading-typescale), 3)),var(--font-scale-h3))}&[data-title-level=h4]{--title-font-size:clamp(var(--font-scale-h5),calc(var(--title-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-h4))}&[data-title-level=h5]{--title-font-size:clamp(var(--font-scale-h6),calc(var(--title-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-h5));--title-letter-spacing:-0.02em}&[data-title-level=h6]{--title-font-size:clamp(var(--font-scale-body-medium),var(--title-medium),var(--font-scale-h6));--title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--title-literal-color)}&[data-title-line-height=none]{--title-line-height:0}&[data-title-line-height=x-small]{--title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--title-line-height:var(--font-leading-large)}}

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

@@ -1,8 +1,7 @@
 import { useRender } from '@base-ui/react/use-render';
-import type { ThemeTypes } from '@viraui/foundation/vira/types';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
-import './title.css';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 type TitleSpace = ThemeTypes['space'];
 type TitleAxisPadding = TitleSpace | [TitleSpace | 0, TitleSpace | 0];
 /**
@@ -76,6 +75,12 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraP
      * @default false
      */
     balanced?: boolean;
+    /**
+     * Enables text selection on the rendered copy.
+     *
+     * @default true
+     */
+    selection?: boolean;
     /**
      * Sets inline padding using one token for both sides or a `[start, end]` tuple.
      *

package/dist/components/title/title.js

@@ -1,41 +1,46 @@
-'use client';
-import { useRender } from '@base-ui/react/use-render';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
-import { resolveAxisPadding } from '../../core/styles/resolve-axis-padding.js';
-import { clsx } from 'clsx';
+"use client";
 import './title.css';
-export const Title = ({ align = 'start', balanced = false, className, color, fontWidth, hPadding, level = 'h1', lineHeight = 'standard', maxWidth, opticalSize, ref, render, style, trim = 'both', trimType = 'cap alphabetic', vPadding, weight, whiteSpace = 'normal', ...otherProps }) => {
-    const hasPadding = Boolean(hPadding || vPadding);
-    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
-    const dynamicStyle = {
-        '--title-align': align,
-        '--title-max-width': maxWidth ?? 'none',
-        '--title-literal-color': color,
-        '--title-white-space': whiteSpace,
-        '--title-trim': trim ? `trim-${trim}` : 'initial',
-        '--title-trim-type': trim ? trimType : 'initial',
-        ...(typeof weight === 'number' ? { '--title-font-weight': weight } : {}),
-        ...(fontWidth !== undefined ? { '--title-font-width': fontWidth } : {}),
-        ...(opticalSize !== undefined ? { '--title-font-opsz': opticalSize } : {}),
-        ...resolveAxisPadding(hPadding, '--title-padding-inline-start', '--title-padding-inline-end'),
-        ...resolveAxisPadding(vPadding, '--title-padding-block-start', '--title-padding-block-end'),
-        ...style,
-    };
-    return useRender({
-        defaultTagName: 'span',
-        render,
-        ref,
-        props: {
-            ...componentProps,
-            ...intrinsicAttributes,
-            'data-title-level': level,
-            'data-title-weight': weight !== undefined ? 'custom' : 'preset',
-            'data-title-line-height': lineHeight,
-            'data-title-balanced': balanced ? 'true' : 'false',
-            'data-title-has-padding': hasPadding ? 'true' : 'false',
-            'data-title-has-literal-color': color ? 'true' : 'false',
-            className: clsx('Title', className),
-            style: dynamicStyle,
-        },
-    });
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
+import title_module_default from "./title.module.js";
+import { clsx } from "clsx";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/title/title.tsx
+var Title = ({ align = "start", balanced = false, selection = true, className, color, fontWidth, hPadding, level = "h1", lineHeight = "standard", maxWidth, opticalSize, ref, render, style, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", ...otherProps }) => {
+	const hasPadding = Boolean(hPadding || vPadding);
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const dynamicStyle = {
+		"--title-align": align,
+		"--title-max-width": maxWidth ?? "none",
+		"--title-literal-color": color,
+		"--title-white-space": whiteSpace,
+		"--title-trim": trim ? `trim-${trim}` : "initial",
+		"--title-trim-type": trim ? trimType : "initial",
+		...typeof weight === "number" ? { "--title-font-weight": weight } : {},
+		...fontWidth !== void 0 ? { "--title-font-width": fontWidth } : {},
+		...opticalSize !== void 0 ? { "--title-font-opsz": opticalSize } : {},
+		...resolveAxisPadding(hPadding, "--title-padding-inline-start", "--title-padding-inline-end"),
+		...resolveAxisPadding(vPadding, "--title-padding-block-start", "--title-padding-block-end"),
+		...style
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		ref,
+		props: {
+			...componentProps,
+			...intrinsicAttributes,
+			"data-title-level": level,
+			"data-title-weight": weight !== void 0 ? "custom" : "preset",
+			"data-title-line-height": lineHeight,
+			"data-title-balanced": balanced ? "true" : "false",
+			"data-title-selection": selection ? "true" : "false",
+			"data-title-has-padding": hasPadding ? "true" : "false",
+			"data-title-has-literal-color": color ? "true" : "false",
+			className: clsx(title_module_default.Title, className),
+			style: dynamicStyle
+		}
+	});
 };
+//#endregion
+export { Title };

package/dist/components/title/title.module.js

@@ -0,0 +1,3 @@
+var title_module_default = { Title: "title-module_Title_CXMUX" };
+//#endregion
+export { title_module_default as default };

package/dist/consumption.json

@@ -14,9 +14,13 @@
     "Consumer font CSS or @font-face rules matching theme font-family strings (for example @fontsource-variable packages)",
     "@viraui/react/preflight.css"
   ],
+  "componentCss": {
+    "rule": "Import public components from the @viraui/react root barrel. Component CSS follows the JS module graph through side-effect CSS imports.",
+    "optionalExplicitImport": "@viraui/react/<component>.css for tree-shaking or debugging only; not part of default bootstrap."
+  },
   "importMechanism": {
-    "rule": "Load theme CSS, font CSS, and preflight through JavaScript side-effect imports in the app root entry module.",
-    "forbidden": "Do not bootstrap Vira theme, font, or preflight CSS with CSS @import in a global stylesheet."
+    "rule": "Load theme CSS, font CSS, and preflight through JavaScript side-effect imports in the app root entry module. Import public components from the @viraui/react root barrel; component CSS follows the emitted JavaScript module graph and is not part of bootstrap.",
+    "forbidden": "Do not bootstrap Vira theme, font, or preflight CSS with CSS @import in a global stylesheet. Do not require per-component CSS imports in app bootstrap."
   },
   "nextJsAppRouter": {
     "mandatory": true,

package/dist/core/elevation/elevation-types.js

@@ -1,4 +1,7 @@
-export const ELEVATION_DEFAULTS = {
-    direction: 'bottom',
-    shadowColor: 'oklch(0% 0 0)',
+//#region src/core/elevation/elevation-types.ts
+var ELEVATION_DEFAULTS = {
+	direction: "bottom",
+	shadowColor: "oklch(0% 0 0)"
 };
+//#endregion
+export { ELEVATION_DEFAULTS };

package/dist/core/elevation/get-elevation-props.d.ts

@@ -1,5 +1,5 @@
+import { ElevationConfig, ElevationDirection, ElevationLevel } from './elevation-types';
 import type * as React from 'react';
-import { type ElevationConfig, type ElevationDirection, type ElevationLevel } from './elevation-types.js';
 export type ElevationAttributes = {
     'data-elevation': ElevationLevel;
     'data-elevation-direction': ElevationDirection;

package/dist/core/elevation/get-elevation-props.js

@@ -1,12 +1,15 @@
-import { ELEVATION_DEFAULTS, } from './elevation-types.js';
-export const getElevationProps = ({ resting, hover, direction = ELEVATION_DEFAULTS.direction, shadowColor = ELEVATION_DEFAULTS.shadowColor, extraShadow, }) => ({
-    attributes: {
-        'data-elevation': resting,
-        'data-elevation-direction': direction,
-        ...(hover !== undefined ? { 'data-elevation-hover': hover } : {}),
-    },
-    style: {
-        '--shadow-color': shadowColor,
-        ...(extraShadow !== undefined ? { '--extra-shadow': extraShadow } : {}),
-    },
+import { ELEVATION_DEFAULTS } from "./elevation-types.js";
+//#region src/core/elevation/get-elevation-props.ts
+var getElevationProps = ({ resting, hover, direction = ELEVATION_DEFAULTS.direction, shadowColor = ELEVATION_DEFAULTS.shadowColor, extraShadow }) => ({
+	attributes: {
+		"data-elevation": resting,
+		"data-elevation-direction": direction,
+		...hover !== void 0 ? { "data-elevation-hover": hover } : {}
+	},
+	style: {
+		"--shadow-color": shadowColor,
+		...extraShadow !== void 0 ? { "--extra-shadow": extraShadow } : {}
+	}
 });
+//#endregion
+export { getElevationProps };