@viraui/react 0.0.15 → 0.0.17

package/dist/components/title/title.css

@@ -1,127 +1 @@
-@scope (.Title) {
-  :scope {
-    /* --- fluid scale --- */
-    --title-scale-min-vw: 320;
-    --title-scale-max-vw: 1440;
-    --title-scale-progress: clamp(
-      0,
-      (100vw - calc(var(--title-scale-min-vw) * 1px)) /
-        calc((var(--title-scale-max-vw) - var(--title-scale-min-vw)) * 1px),
-      1
-    );
-
-    /* Default fallback ≈ h2 → h3 */
-    --title-font-size: calc(
-      var(--font-scale-h3) + (var(--font-scale-h2) - var(--font-scale-h3)) * var(--title-scale-progress)
-    );
-
-    /* --- 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: calc(
-        var(--font-scale-h1) + (var(--font-scale-display) - var(--font-scale-h1)) * var(--title-scale-progress)
-      );
-    }
-
-    &[data-title-level='h1'] {
-      --title-font-size: calc(
-        var(--font-scale-h2) + (var(--font-scale-h1) - var(--font-scale-h2)) * var(--title-scale-progress)
-      );
-    }
-
-    &[data-title-level='h2'] {
-      --title-font-size: calc(
-        var(--font-scale-h3) + (var(--font-scale-h2) - var(--font-scale-h3)) * var(--title-scale-progress)
-      );
-    }
-
-    &[data-title-level='h3'] {
-      --title-font-size: calc(
-        var(--font-scale-h4) + (var(--font-scale-h3) - var(--font-scale-h4)) * var(--title-scale-progress)
-      );
-    }
-
-    &[data-title-level='h4'] {
-      --title-font-size: calc(
-        var(--font-scale-h5) + (var(--font-scale-h4) - var(--font-scale-h5)) * var(--title-scale-progress)
-      );
-    }
-
-    &[data-title-level='h5'] {
-      --title-font-size: calc(
-        var(--font-scale-h6) + (var(--font-scale-h5) - var(--font-scale-h6)) * var(--title-scale-progress)
-      );
-      --title-letter-spacing: -0.02em;
-    }
-
-    &[data-title-level='h6'] {
-      --title-font-size: calc(
-        var(--font-scale-body-medium) + (var(--font-scale-h6) - var(--font-scale-body-medium)) *
-          var(--title-scale-progress)
-      );
-      --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';
 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,
-        },
-    });
+"use client";
+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

@@ -7,17 +7,20 @@
     "@base-ui/react": "Peer dependency for wrapped primitives."
   },
   "optionalPackages": {
-    "@viraui/foundation": "Preset Vira brand theme CSS, ThemeTypes, and JSON only.",
-    "@viraui/icons": "ViraUI icons assets when not using Icon from @viraui/react."
+    "@viraui/foundation": "Preset Vira brand theme CSS, ThemeTypes, and JSON only."
   },
   "importOrder": [
     "Compatible theme CSS (preset @viraui/foundation/vira.css, custom theme CSS, or future theme-builder export)",
     "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,
@@ -72,6 +75,7 @@
     "catalog": "@viraui/react/catalog.json",
     "consumption": "@viraui/react/consumption.json",
     "themeSurface": "@viraui/react/theme-surface.json",
+    "preflightSurface": "@viraui/react/preflight-surface.json",
     "componentGuide": "@viraui/react/<component>.guide.json"
   }
 }

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 };

package/dist/core/props/intrinsic-vira-props.js

@@ -1,10 +1,13 @@
-export const extractIntrinsicViraProps = (props) => {
-    const { grow, shrink, ...componentProps } = props;
-    return {
-        componentProps,
-        intrinsicAttributes: {
-            ...(grow === false ? { 'data-grow': 'false' } : {}),
-            ...(shrink === false ? { 'data-shrink': 'false' } : {}),
-        },
-    };
+//#region src/core/props/intrinsic-vira-props.ts
+var extractIntrinsicViraProps = (props) => {
+	const { grow, shrink, ...componentProps } = props;
+	return {
+		componentProps,
+		intrinsicAttributes: {
+			...grow === false ? { "data-grow": "false" } : {},
+			...shrink === false ? { "data-shrink": "false" } : {}
+		}
+	};
 };
+//#endregion
+export { extractIntrinsicViraProps };

package/dist/core/styles/resolve-axis-padding.d.ts

@@ -1,4 +1,4 @@
-import type { ThemeTypes } from '@viraui/foundation/vira/types';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
 import type * as React from 'react';
 type AxisPadding = ThemeTypes['space'] | [ThemeTypes['space'] | 0, ThemeTypes['space'] | 0];
 export declare const resolveAxisPadding: (value: AxisPadding | undefined, startKey: string, endKey: string) => React.CSSProperties;

package/dist/core/styles/resolve-axis-padding.js

@@ -1,17 +1,16 @@
-import { resolveThemeValue } from '../../core/theme/resolve-theme-value.js';
-export const resolveAxisPadding = (value, startKey, endKey) => {
-    if (!value) {
-        return {};
-    }
-    if (Array.isArray(value)) {
-        return {
-            [startKey]: resolveThemeValue(value[0], 'space', 0),
-            [endKey]: resolveThemeValue(value[1], 'space', 0),
-        };
-    }
-    const resolvedValue = resolveThemeValue(value, 'space', 0);
-    return {
-        [startKey]: resolvedValue,
-        [endKey]: resolvedValue,
-    };
+import { resolveThemeValue } from "../theme/resolve-theme-value.js";
+//#region src/core/styles/resolve-axis-padding.ts
+var resolveAxisPadding = (value, startKey, endKey) => {
+	if (!value) return {};
+	if (Array.isArray(value)) return {
+		[startKey]: resolveThemeValue(value[0], "space", 0),
+		[endKey]: resolveThemeValue(value[1], "space", 0)
+	};
+	const resolvedValue = resolveThemeValue(value, "space", 0);
+	return {
+		[startKey]: resolvedValue,
+		[endKey]: resolvedValue
+	};
 };
+//#endregion
+export { resolveAxisPadding };

package/dist/core/theme/resolve-theme-value.d.ts

@@ -1,4 +1,4 @@
-import theme from '@viraui/foundation/vira/nested';
+import { default as theme } from '@viraui/foundation/vira/nested';
 type ThemeTree = typeof theme;
 type ThemeKey = keyof ThemeTree;
 export declare const resolveThemeValue: <TKey extends ThemeKey, TValue extends keyof ThemeTree[TKey], TFallback>(key: TValue | null | undefined | 0, themeKey: TKey, fallbackValue: TFallback) => ThemeTree[TKey][TValue] | TFallback;

package/dist/core/theme/resolve-theme-value.js

@@ -1,7 +1,8 @@
-import theme from '@viraui/foundation/vira/nested';
-export const resolveThemeValue = (key, themeKey, fallbackValue) => {
-    if (!key) {
-        return fallbackValue;
-    }
-    return theme[themeKey][key];
+import theme from "@viraui/foundation/vira/nested";
+//#region src/core/theme/resolve-theme-value.ts
+var resolveThemeValue = (key, themeKey, fallbackValue) => {
+	if (!key) return fallbackValue;
+	return theme[themeKey][key];
 };
+//#endregion
+export { resolveThemeValue };

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export * from './components/index.js';
-export type { IntrinsicViraProps } from './core/props/intrinsic-vira-props.js';
+export * from './components';
+export type { IntrinsicViraProps } from './core/props/intrinsic-vira-props';

package/dist/index.js

@@ -1 +1,21 @@
-export * from './components/index.js';
+import { Avatar } from "./components/avatar/avatar.js";
+import { ClampText } from "./components/clamp-text/clamp-text.js";
+import { ELEVATION_DEFAULTS } from "./core/elevation/elevation-types.js";
+import { getElevationProps } from "./core/elevation/get-elevation-props.js";
+import { Elevator } from "./components/elevator/elevator.js";
+import { Spinner } from "./components/spinner/spinner.js";
+import { Button } from "./components/button/button.js";
+import { IconButton } from "./components/icon-button/icon-button.js";
+import { Text } from "./components/text/text.js";
+import { Textfield } from "./components/textfield/textfield.js";
+import { Stack } from "./components/stack/stack.js";
+import { Textarea } from "./components/textarea/textarea.js";
+import { Slider } from "./components/slider/slider.js";
+import { Switch } from "./components/switch/switch.js";
+import { Checkbox } from "./components/checkbox/checkbox.js";
+import { Icon } from "./components/icon/icon.js";
+import { Select } from "./components/select/select.js";
+import { Skeleton } from "./components/skeleton/skeleton.js";
+import { Surface } from "./components/surface/surface.js";
+import { Title } from "./components/title/title.js";
+export { Avatar, Button, Checkbox, ClampText, ELEVATION_DEFAULTS, Elevator, Icon, IconButton, Select, Skeleton, Slider, Spinner, Stack, Surface, Switch, Text, Textarea, Textfield, Title, getElevationProps };