@tangible/ui 0.0.6 → 0.0.8

package/components/Radio/types.d.ts

@@ -10,14 +10,24 @@ export type RadioGroupProps = {
     loop?: boolean;
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    'aria-required'?: boolean | 'true' | 'false';
     className?: string;
     children: ReactNode;
 };
 export type RadioProps = {
     value: OptionValue;
     label?: ReactNode;
+    /**
+     * Description text displayed below the label.
+     */
+    description?: string;
     disabled?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
     className?: string;
+    children?: ReactNode;
 };
 export type RadioItemRecord = RovingItemRecord;
 export type RadioGroupContextValue = {

package/components/Rating/Rating.d.ts

@@ -1,32 +1,2 @@
-import type { SizeStandard, Theme as ThemeFull } from '../../types';
-type Size = SizeStandard;
-type Theme = ThemeFull;
-export type RatingProps = {
-    /** Controlled value (1..max). Use with onValueChange */
-    value?: number;
-    /** Uncontrolled initial value */
-    defaultValue?: number;
-    /** Maximum icons shown */
-    max?: number;
-    /** Disable interaction (keeps semantics) */
-    disabled?: boolean;
-    /** Presentational readOnly (no form semantics) */
-    readOnly?: boolean;
-    /** Name for the radio group (if you care about form posts) */
-    name?: string;
-    /** Size maps to icon + spacing */
-    size?: Size;
-    /** Theme feeds foreground color tokens */
-    theme?: Theme;
-    /** Called when the value changes */
-    onValueChange?: (value: number) => void;
-    /** Allow clicking the current selection to clear back to 0 */
-    allowClear?: boolean;
-    className?: string;
-    /** Gap override (e.g. '0.25rem') – otherwise uses density utilities */
-    gap?: string;
-    /** Accessible label for the rating group. Defaults to "Rating: X of Y" */
-    'aria-label'?: string;
-};
-export declare function Rating({ value, defaultValue, max, disabled, readOnly, name, size, theme, onValueChange, allowClear, className, gap, 'aria-label': ariaLabel, }: RatingProps): import("react/jsx-runtime").JSX.Element;
-export {};
+import type { RatingProps } from './types';
+export declare function Rating({ value, defaultValue, max, disabled, readOnly, name, size, theme, onValueChange, allowClear, className, gap, 'aria-label': ariaLabel, labels: labelsProp, }: RatingProps): import("react/jsx-runtime").JSX.Element;

package/components/Rating/Rating.js

@@ -2,10 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { cx } from '../../utils/cx.js';
 import { Icon } from '../Icon/index.js';
-export function Rating({ value, defaultValue = 0, max = 5, disabled, readOnly, name, size = 'lg', theme = 'secondary', onValueChange, allowClear, className, gap, 'aria-label': ariaLabel, }) {
+import { defaultRatingLabels } from './types.js';
+export function Rating({ value, defaultValue = 0, max = 5, disabled, readOnly, name, size = 'lg', theme = 'secondary', onValueChange, allowClear, className, gap, 'aria-label': ariaLabel, labels: labelsProp, }) {
     const isControlled = value != null;
     const [internal, setInternal] = React.useState(defaultValue);
     const current = isControlled ? value : internal;
+    const labels = { ...defaultRatingLabels, ...labelsProp };
     const generatedId = React.useId();
     const groupName = name ?? generatedId;
     const setValue = (v) => {
@@ -62,13 +64,13 @@ export function Rating({ value, defaultValue = 0, max = 5, disabled, readOnly, n
                 return;
         }
     };
-    const defaultAriaLabel = `Rating: ${current} of ${max}`;
+    const defaultAriaLabel = labels.rating(current, max);
     // Roving tabindex: only the selected radio (or first if none) is in tab order
     const focusableIndex = current > 0 ? current : 1;
     return (_jsx("div", { className: cx('tui-rating', `is-size-${size}`, `is-theme-${theme}`, disabled && 'is-disabled', className), style: { gap }, role: readOnly ? 'img' : 'radiogroup', "aria-label": ariaLabel ?? defaultAriaLabel, onKeyDown: readOnly ? undefined : onKeyDown, children: Array.from({ length: max }).map((_, i) => {
             const n = i + 1;
             const checked = current >= n;
             const id = `${groupName}__star-${n}`;
-            return (_jsxs("div", { className: "tui-rating__item", children: [!readOnly && (_jsx("input", { className: "tui-visually-hidden", type: "radio", id: id, name: groupName, value: n, checked: current === n, "aria-checked": current === n, tabIndex: n === focusableIndex ? 0 : -1, onChange: () => handleSelect(n), disabled: disabled })), readOnly ? (_jsx("span", { className: cx('tui-rating__star', checked && 'is-active'), children: _jsx(Icon, { name: checked ? 'system/star-fill' : 'system/star-outline' }) })) : (_jsxs("label", { className: cx('tui-rating__star', checked && 'is-active'), htmlFor: id, tabIndex: -1, children: [_jsx(Icon, { name: checked ? 'system/star-fill' : 'system/star-outline' }), _jsx("span", { className: "tui-visually-hidden", children: `${n} of ${max}` })] }))] }, n));
+            return (_jsxs("div", { className: "tui-rating__item", children: [!readOnly && (_jsx("input", { className: "tui-visually-hidden", type: "radio", id: id, name: groupName, value: n, checked: current === n, "aria-checked": current === n, tabIndex: n === focusableIndex ? 0 : -1, onChange: () => handleSelect(n), disabled: disabled })), readOnly ? (_jsx("span", { className: cx('tui-rating__star', checked && 'is-active'), children: _jsx(Icon, { name: checked ? 'system/star-fill' : 'system/star-outline' }) })) : (_jsxs("label", { className: cx('tui-rating__star', checked && 'is-active'), htmlFor: id, tabIndex: -1, children: [_jsx(Icon, { name: checked ? 'system/star-fill' : 'system/star-outline' }), _jsx("span", { className: "tui-visually-hidden", children: labels.value(n, max) })] }))] }, n));
         }) }));
 }

package/components/Rating/index.d.ts

@@ -1,2 +1,3 @@
 export { Rating } from './Rating';
-export type { RatingProps } from './Rating';
+export type { RatingProps, RatingLabels } from './types';
+export { defaultRatingLabels } from './types';

package/components/Rating/index.js

@@ -1 +1,2 @@
 export { Rating } from './Rating.js';
+export { defaultRatingLabels } from './types.js';

package/components/Rating/types.d.ts

@@ -0,0 +1,41 @@
+import type { SizeStandard, Theme as ThemeFull } from '../../types';
+export type Size = SizeStandard;
+export type Theme = ThemeFull;
+export type RatingLabels = {
+    /** Group label for the radiogroup/img. Receives current value and max. */
+    rating?: (value: number, max: number) => string;
+    /** Visually-hidden label for each star. Receives star number and max. */
+    value?: (n: number, max: number) => string;
+};
+export declare const defaultRatingLabels: Required<RatingLabels>;
+export type RatingProps = {
+    /** Controlled value (1..max). Use with onValueChange */
+    value?: number;
+    /** Uncontrolled initial value */
+    defaultValue?: number;
+    /** Maximum icons shown */
+    max?: number;
+    /** Disable interaction (keeps semantics) */
+    disabled?: boolean;
+    /** Presentational readOnly (no form semantics) */
+    readOnly?: boolean;
+    /** Name for the radio group (if you care about form posts) */
+    name?: string;
+    /** Size maps to icon + spacing */
+    size?: Size;
+    /** Theme feeds foreground color tokens */
+    theme?: Theme;
+    /** Called when the value changes */
+    onValueChange?: (value: number) => void;
+    /** Allow clicking the current selection to clear back to 0 */
+    allowClear?: boolean;
+    className?: string;
+    /** Gap override (e.g. '0.25rem') – otherwise uses density utilities */
+    gap?: string;
+    /** Accessible label for the rating group. Defaults to "Rating: X of Y" */
+    'aria-label'?: string;
+    /**
+     * Override default English strings for i18n.
+     */
+    labels?: RatingLabels;
+};

package/components/Rating/types.js

@@ -0,0 +1,4 @@
+export const defaultRatingLabels = {
+    rating: (value, max) => `Rating: ${value} of ${max}`,
+    value: (n, max) => `${n} of ${max}`,
+};

package/components/SegmentedControl/SegmentedControl.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { cx } from '../../utils/cx.js';
 import { isDev } from '../../utils/is-dev.js';
 import { toKey } from '../../utils/value-key.js';
@@ -8,9 +8,10 @@ import { SegmentedControlContext, useSegmentedControlContext } from './Segmented
 // =============================================================================
 // SegmentedControl Root
 // =============================================================================
-function SegmentedControlRoot({ value: controlledValue, defaultValue, onValueChange, variant = 'pill', size = 'md', orientation = 'horizontal', loop = true, disabled = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children, }) {
+function SegmentedControlRoot({ value: controlledValue, defaultValue, onValueChange, variant = 'pill', size = 'md', orientation = 'horizontal', loop = true, wrap = false, disabled = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children, }) {
     const [internalValue, setInternalValue] = useState(defaultValue);
-    const isControlled = controlledValue !== undefined;
+    // Lock controlled/uncontrolled decision at mount to prevent mode switching
+    const isControlled = useRef(controlledValue !== undefined).current;
     const selectedValue = isControlled ? controlledValue : internalValue;
     // Selection handler
     const onSelect = useCallback((newValue) => {
@@ -28,7 +29,7 @@ function SegmentedControlRoot({ value: controlledValue, defaultValue, onValueCha
         disabled,
         loop,
         orientation,
-        orientationKeyboard: true,
+        orientationKeyboard: false,
     });
     // Dev-only: Warn if missing accessible name
     useEffect(() => {
@@ -60,7 +61,7 @@ function SegmentedControlRoot({ value: controlledValue, defaultValue, onValueCha
         unregisterItem,
         onSelect,
     ]);
-    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsx("div", { role: "radiogroup", className: cx('tui-segmented', `is-variant-${variant}`, `is-size-${size}`, orientation === 'vertical' && 'is-vertical', className), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-disabled": disabled || undefined, "aria-orientation": orientation, onKeyDown: handleKeyDown, children: children }) }));
+    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsx("div", { role: "radiogroup", className: cx('tui-segmented', `is-variant-${variant}`, `is-size-${size}`, orientation === 'vertical' && 'is-vertical', wrap && 'is-wrap', className), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-disabled": disabled || undefined, "aria-orientation": orientation, onKeyDown: handleKeyDown, children: children }) }));
 }
 // =============================================================================
 // SegmentedControl.Item

package/components/SegmentedControl/types.d.ts

@@ -1,8 +1,9 @@
 import type { ReactNode } from 'react';
 import type { RovingItemRecord } from '../../utils/use-roving-group';
+import type { SizeStandard } from '../../types/sizes';
 export type SegmentedControlValue = string | number;
 export type SegmentedControlVariant = 'pill' | 'outline' | 'underline';
-export type SegmentedControlSize = 'sm' | 'md';
+export type SegmentedControlSize = SizeStandard;
 export type SegmentedControlOrientation = 'horizontal' | 'vertical';
 export type SegmentedControlProps = {
     /** Controlled selected value */
@@ -19,11 +20,19 @@ export type SegmentedControlProps = {
     orientation?: SegmentedControlOrientation;
     /** Whether arrow keys wrap around */
     loop?: boolean;
+    /** Allow items to wrap to multiple lines (default: false) */
+    wrap?: boolean;
     /** Disable all items */
     disabled?: boolean;
-    /** Accessible label */
+    /**
+     * Accessible label for the radiogroup.
+     * At least one of `aria-label` or `aria-labelledby` is required.
+     */
     'aria-label'?: string;
-    /** ID of element that labels this control */
+    /**
+     * ID of element that labels this control.
+     * At least one of `aria-label` or `aria-labelledby` is required.
+     */
     'aria-labelledby'?: string;
     /** Additional classes */
     className?: string;
@@ -34,9 +43,12 @@ export type SegmentedControlItemProps = {
     value: SegmentedControlValue;
     /** Disable this item */
     disabled?: boolean;
-    /** Icon element */
+    /**
+     * Icon element rendered before the label.
+     * @remarks Icon-only items (no `children`) must provide `aria-label`.
+     */
     icon?: ReactNode;
-    /** Accessible label for icon-only items */
+    /** Accessible label — required for icon-only items */
     'aria-label'?: string;
     /** Additional classes */
     className?: string;

package/components/Select/Select.d.ts

@@ -37,3 +37,4 @@ export declare const SelectOption: typeof SelectOptionComponent;
 export declare const SelectGroup: typeof SelectGroupComponent;
 export declare const SelectLabel: typeof SelectLabelComponent;
 export { useSelectContext as useSelect } from './SelectContext';
+export type { SelectContextValue } from './types';