@tangible/ui 0.0.1

package/components/Button/Button.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef } from 'react';
+import { cx } from '../../utils/cx.js';
+import { Icon } from '../Icon/index.js';
+import { getSafeRel } from '../../utils/polymorphic.js';
+export const Button = forwardRef(({ label, children, size = 'md', theme = 'primary', variant = 'solid', fullWidth, disabled = false, loading = false, leftIconName, rightIconName, leftIcon, rightIcon, iconSize = 'sm', className, target, rel, onClick, style, ...rest }, ref) => {
+    const isLink = typeof rest.href === 'string';
+    const isDisabled = disabled || loading;
+    // Normalize destructive → danger for CSS class
+    const themeClass = theme === 'destructive' ? 'danger' : theme;
+    const classes = cx('tui-button', `is-size-${size}`, `is-theme-${themeClass}`, variant !== 'solid' && `is-style-${variant}`, fullWidth && 'is-width-full', isDisabled && 'is-disabled', className);
+    // Icon size: pass string sizes to Icon component
+    const iconSizeForIcon = typeof iconSize === 'string' ? iconSize : undefined;
+    const Left = leftIcon ?? (leftIconName ? _jsx(Icon, { name: leftIconName, size: iconSizeForIcon }) : null);
+    const Right = rightIcon ?? (rightIconName ? _jsx(Icon, { name: rightIconName, size: iconSizeForIcon }) : null);
+    const content = label != null ? (_jsxs(_Fragment, { children: [Left, _jsx("span", { children: label }), Right] })) : (_jsxs(_Fragment, { children: [Left, children, Right] }));
+    if (isLink) {
+        const { href, tabIndex, ...anchorRest } = rest;
+        const safeRel = getSafeRel(target, rel);
+        const handleClick = (e) => {
+            if (isDisabled) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            onClick?.(e);
+        };
+        return (_jsx("a", { ref: ref, href: isDisabled ? undefined : href, className: classes, "aria-disabled": isDisabled || undefined, "aria-busy": loading || undefined, tabIndex: isDisabled ? -1 : tabIndex, onClick: handleClick, "data-loading": loading || undefined, target: target, rel: safeRel, style: style, ...anchorRest, children: content }));
+    }
+    const buttonRest = rest;
+    return (_jsx("button", { ref: ref, type: buttonRest.type ?? 'button', className: classes, disabled: isDisabled, "aria-disabled": isDisabled || undefined, "aria-busy": loading || undefined, onClick: onClick, "data-loading": loading || undefined, style: style, ...buttonRest, children: content }));
+});
+Button.displayName = 'Button';

package/components/Button/index.d.ts

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

package/components/Button/index.js

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

package/components/Button/types.d.ts

@@ -0,0 +1,127 @@
+import type { IconName } from '../../icons/registry';
+import type { Size, ThemeIntent } from '../../types';
+export type { Size };
+/**
+ * Semantic color themes.
+ * - `'primary'`: Primary action (default)
+ * - `'secondary'`: Secondary/neutral action
+ * - `'danger'`: Destructive action
+ * - `'destructive'`: Alias for danger
+ */
+export type Theme = ThemeIntent | 'destructive';
+/**
+ * Visual style variants.
+ * - `'solid'`: Filled background (default)
+ * - `'outline'`: Border only, transparent background
+ * - `'ghost'`: Transparent, shows background on hover
+ * - `'link'`: Text-link styling, no background
+ */
+export type Variant = 'solid' | 'outline' | 'ghost' | 'link';
+type CommonProps = {
+    /**
+     * Button label text. If provided, renders as the button content.
+     * Use this for simple text buttons.
+     */
+    label?: React.ReactNode;
+    /**
+     * Rich content for the button. Used when label is not provided.
+     * Use this for buttons with custom markup.
+     */
+    children?: React.ReactNode;
+    /**
+     * Size of the button.
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * Semantic color theme.
+     * Note: Defaults to 'primary' (unlike IconButton which defaults to 'secondary')
+     * because Buttons are typically primary CTAs.
+     * @default 'primary'
+     */
+    theme?: Theme;
+    /**
+     * Visual style variant.
+     * @default 'solid'
+     */
+    variant?: Variant;
+    /**
+     * Make button full width of container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Disabled state. Prevents interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Loading state. Shows spinner and prevents interaction.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Link target (for anchor variant).
+     */
+    target?: React.HTMLAttributeAnchorTarget;
+    /**
+     * Link rel attribute (for anchor variant).
+     */
+    rel?: string;
+    /**
+     * Click handler. Works for both button and anchor variants.
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    /**
+     * Icon to display before the label.
+     * Use icon registry paths like "system/check".
+     * @example leftIconName="system/check"
+     */
+    leftIconName?: IconName;
+    /**
+     * Icon to display after the label.
+     * Use icon registry paths like "system/chevron-right".
+     * @example rightIconName="system/chevron-right"
+     */
+    rightIconName?: IconName;
+    /**
+     * Custom left icon element. Overrides leftIconName.
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Custom right icon element. Overrides rightIconName.
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Size of icons.
+     * @default 'sm'
+     */
+    iconSize?: Size;
+    /**
+     * Additional CSS class names.
+     * Note: Use sparingly. Prefer component API tokens for customization.
+     */
+    className?: string;
+    /**
+     * Inline styles.
+     */
+    style?: React.CSSProperties;
+};
+/**
+ * Props when Button renders as a <button> element.
+ */
+export type ButtonAsButton = CommonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'children'> & {
+    href?: undefined;
+};
+/**
+ * Props when Button renders as an <a> element.
+ */
+export type ButtonAsAnchor = CommonProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
+    /** URL for the link. When provided, Button renders as <a>. */
+    href: string;
+};
+/**
+ * Button component props.
+ * Renders as <button> by default, or <a> when href is provided.
+ */
+export type ButtonProps = ButtonAsButton | ButtonAsAnchor;

package/components/Button/types.js

@@ -0,0 +1 @@
+export {};

package/components/Card/Card.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { JSX } from 'react';
+type RootAs = 'article' | 'section' | 'div';
+type CommonProps = {
+    inline?: boolean;
+    elevated?: boolean;
+    interactive?: boolean;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export type CardRootProps<TAs extends RootAs = 'article'> = CommonProps & {
+    as?: TAs;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    children?: React.ReactNode;
+};
+type SlotProps = React.HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+    children?: React.ReactNode;
+};
+type CardCompound = {
+    <TAs extends RootAs = 'article'>(props: CardRootProps<TAs> & Omit<React.ComponentPropsWithoutRef<TAs>, keyof CardRootProps>): JSX.Element;
+    Head: React.FC<SlotProps>;
+    Body: React.FC<SlotProps>;
+    Foot: React.FC<SlotProps>;
+    Link: React.FC<React.AnchorHTMLAttributes<HTMLAnchorElement>>;
+};
+export declare const Card: CardCompound;
+export {};

package/components/Card/Card.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef, useCallback } from 'react';
+import { cx } from '../../utils/cx.js';
+export const Card = forwardRef(function Card({ as = 'article', inline, elevated, interactive, disabled, className, style, onClick, children, ...rest }, ref) {
+    const Tag = as;
+    // Determine if this card is clickable (needs button semantics)
+    const isClickable = (interactive || onClick) && !disabled;
+    // Keyboard handler for interactive cards
+    const handleKeyDown = useCallback((e) => {
+        if (!isClickable || !onClick)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick(e);
+        }
+    }, [isClickable, onClick]);
+    const classes = cx('tui-card', inline && 'is-layout-inline', elevated && 'is-style-elevated', interactive && 'has-interaction', className);
+    // Button semantics for clickable cards
+    const buttonProps = isClickable
+        ? {
+            role: 'button',
+            tabIndex: 0,
+            onKeyDown: handleKeyDown,
+        }
+        : {};
+    return (_jsx(Tag, { ref: ref, className: classes, style: style, "aria-disabled": disabled || undefined, onClick: disabled ? undefined : onClick, ...buttonProps, ...rest, children: _jsx("div", { className: "tui-card__inner", children: children }) }));
+});
+function CardHead({ className, children, ...rest }) {
+    return (_jsx("div", { className: cx('tui-card__head', className), ...rest, children: children }));
+}
+CardHead.displayName = 'Card.Head';
+function CardBody({ className, children, ...rest }) {
+    return (_jsx("div", { className: cx('tui-card__body', className), ...rest, children: children }));
+}
+CardBody.displayName = 'Card.Body';
+function CardFoot({ className, children, ...rest }) {
+    return (_jsx("div", { className: cx('tui-card__foot', className), ...rest, children: children }));
+}
+CardFoot.displayName = 'Card.Foot';
+function CardLink({ className, children, rel, target, ...rest }) {
+    return (_jsx("a", { className: cx('tui-stretched-link', className), rel: target === '_blank' ? ['noopener', 'noreferrer', rel].filter(Boolean).join(' ') : rel, target: target, ...rest, children: children }));
+}
+CardLink.displayName = 'Card.Link';
+Card.Head = CardHead;
+Card.Body = CardBody;
+Card.Foot = CardFoot;
+Card.Link = CardLink;

package/components/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardRootProps } from './Card';

package/components/Card/index.js

@@ -0,0 +1 @@
+export { Card } from './Card.js';

package/components/Chip/Chip.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { SizeCompact, Theme as ThemeFull } from '../../types';
+type Size = SizeCompact;
+type Theme = ThemeFull;
+type Variant = 'default' | 'outline' | 'ghost' | 'solid' | 'flush';
+export type ChipProps = {
+    as?: 'span' | 'div' | 'a';
+    href?: string;
+    target?: React.HTMLAttributeAnchorTarget;
+    rel?: string;
+    children: React.ReactNode;
+    size?: Size;
+    theme?: Theme;
+    variant?: Variant;
+    selected?: boolean;
+    disabled?: boolean;
+    interactive?: boolean;
+    className?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'>;
+export declare function Chip({ as, href, target, rel, children, size, theme, variant, selected, disabled, interactive, className, leftIcon, rightIcon, onClick, ...rest }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/Chip/Chip.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback } from 'react';
+import { cx } from '../../utils/cx.js';
+export function Chip({ as = 'span', href, target, rel, children, size = 'md', theme = 'secondary', variant = 'default', selected, disabled, interactive, className, leftIcon, rightIcon, onClick, ...rest }) {
+    const Tag = (as === 'a' ? 'a' : as);
+    // Determine if this chip is clickable (needs button semantics)
+    const isClickable = (interactive || onClick) && !disabled;
+    // Keyboard handler for interactive chips
+    const handleKeyDown = useCallback((e) => {
+        if (!isClickable || !onClick)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick(e);
+        }
+    }, [isClickable, onClick]);
+    const classes = cx('tui-chip', size && `is-size-${size}`, theme && `is-theme-${theme}`, variant !== 'default' && `is-style-${variant}`, selected && 'is-selected', interactive && 'is-interactive', className);
+    const anchorProps = as === 'a'
+        ? {
+            href: disabled ? undefined : href ?? '#',
+            target,
+            rel,
+            'aria-disabled': disabled || undefined,
+            tabIndex: disabled ? -1 : undefined,
+        }
+        : { 'aria-disabled': disabled || undefined };
+    // Button semantics for non-anchor clickable chips
+    const buttonProps = as !== 'a' && isClickable
+        ? {
+            role: 'button',
+            tabIndex: 0,
+            onKeyDown: handleKeyDown,
+        }
+        : {};
+    return (_jsxs(Tag, { className: classes, ...anchorProps, ...buttonProps, onClick: disabled ? undefined : onClick, ...rest, children: [leftIcon && leftIcon, _jsx("span", { className: "tui-chip__text", children: children }), rightIcon && rightIcon] }));
+}

package/components/Chip/index.d.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip';
+export type { ChipProps } from './Chip';

package/components/Chip/index.js

@@ -0,0 +1 @@
+export { Chip } from './Chip.js';

package/components/Chips/Chips.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { SizeCompact, Theme as ThemeFull } from '../../types';
+type Size = SizeCompact;
+type Theme = ThemeFull;
+type Variant = 'default' | 'outline' | 'ghost' | 'solid' | 'flush';
+export type ChipOption = {
+    label: React.ReactNode;
+    as?: 'a' | 'span' | 'div';
+    href?: string;
+    target?: React.HTMLAttributeAnchorTarget;
+    rel?: string;
+    size?: Size;
+    theme?: Theme;
+    variant?: Variant;
+    disabled?: boolean;
+    className?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+};
+export type ChipsProps = {
+    name?: string;
+    options: ChipOption[];
+    /** Gap between chips */
+    density?: 'xs' | 'sm' | 'md';
+    direction?: 'inline' | 'stack';
+    alignment?: 'start' | 'center' | 'end';
+    className?: string;
+    role?: React.AriaRole;
+};
+export declare function Chips({ name, options, density, direction, alignment, className, role }: ChipsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/Chips/Chips.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Chip } from '../Chip/index.js';
+const DENSITY_MAP = {
+    xs: 'var(--tui-spacing-xs)',
+    sm: 'var(--tui-spacing-sm)',
+    md: 'var(--tui-spacing-md)',
+};
+export function Chips({ name, options, density = 'sm', direction = 'inline', alignment, className, role = 'group' }) {
+    const isInline = direction === 'inline';
+    const style = {
+        display: 'flex',
+        flexDirection: isInline ? 'row' : 'column',
+        flexWrap: isInline ? 'wrap' : undefined,
+        gap: DENSITY_MAP[density],
+        justifyContent: isInline && alignment ? alignment : undefined,
+        alignItems: !isInline && alignment ? alignment : undefined,
+        marginBlockEnd: 'var(--tui-spacing-sm)',
+    };
+    return (_jsx("div", { role: role, className: className, "data-chips-name": name, style: style, children: options.map((o) => (_jsx(Chip, { as: o.as ?? (o.href ? 'a' : 'span'), href: o.href, target: o.target, rel: o.rel, size: o.size, theme: o.theme, variant: o.variant, disabled: o.disabled, className: o.className, leftIcon: o.leftIcon, rightIcon: o.rightIcon, children: o.label }))) }));
+}

package/components/Chips/index.d.ts

@@ -0,0 +1,2 @@
+export { Chips } from './Chips';
+export type { ChipsProps, ChipOption } from './Chips';

package/components/Chips/index.js

@@ -0,0 +1 @@
+export { Chips } from './Chips.js';

package/components/ContentIndicator/ContentIndicator.d.ts

@@ -0,0 +1,2 @@
+import type { ContentIndicatorProps } from './types';
+export declare function ContentIndicator(props: ContentIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/components/ContentIndicator/ContentIndicator.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '../Icon/index.js';
+// =============================================================================
+// Component
+// =============================================================================
+export function ContentIndicator(props) {
+    const { icon, size = 'sm', theme = 'default', variant = 'ring', label, className, } = props;
+    // Build class names
+    const rootClassName = [
+        'tui-content-indicator',
+        `is-size-${size}`,
+        `is-theme-${theme}`,
+        `is-variant-${variant}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // If no label, the icon is decorative and the whole element is presentational
+    const isDecorative = !label;
+    return (_jsx("div", { className: rootClassName, role: isDecorative ? 'presentation' : 'img', "aria-label": label, "aria-hidden": isDecorative || undefined, children: _jsx("div", { className: "tui-content-indicator__circle", children: _jsx(Icon, { name: icon }) }) }));
+}

package/components/ContentIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export { ContentIndicator } from './ContentIndicator';
+export type { ContentIndicatorProps, Size as ContentIndicatorSize, Theme as ContentIndicatorTheme, Variant as ContentIndicatorVariant, } from './types';

package/components/ContentIndicator/index.js

@@ -0,0 +1 @@
+export { ContentIndicator } from './ContentIndicator.js';

package/components/ContentIndicator/types.d.ts

@@ -0,0 +1,57 @@
+import type { IconName } from '../../icons/registry';
+import type { Size } from '../../types';
+export type { Size };
+/**
+ * Visual theme for the indicator.
+ * - `default`: Uses border color (neutral)
+ * - `info`: Blue theme
+ * - `success`: Green theme
+ * - `warning`: Amber theme
+ * - `danger`: Red theme
+ */
+export type Theme = 'default' | 'info' | 'success' | 'warning' | 'danger';
+/**
+ * Visual variant.
+ * - `ring`: Hollow circle with border (default)
+ * - `solid`: Filled circle
+ */
+export type Variant = 'ring' | 'solid';
+export type ContentIndicatorProps = {
+    /**
+     * Icon to display in the center.
+     * Uses the icon registry path format: "category/name"
+     * @example "lms/question-mark"
+     */
+    icon: IconName;
+    /**
+     * Size of the indicator.
+     * - `'xs'`: 16px circle
+     * - `'sm'`: 24px circle (default)
+     * - `'md'`: 32px circle
+     * - `'lg'`: 40px circle
+     * @default 'sm'
+     */
+    size?: Size;
+    /**
+     * Color theme for the indicator.
+     * @default 'default'
+     */
+    theme?: Theme;
+    /**
+     * Visual variant.
+     * - `'ring'`: Hollow circle with border (default)
+     * - `'solid'`: Filled circle with icon in contrasting color
+     * @default 'ring'
+     */
+    variant?: Variant;
+    /**
+     * Accessible label for the indicator.
+     * Required for meaningful icons. Omit only if the icon is purely decorative
+     * and context is provided by surrounding content.
+     */
+    label?: string;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+};

package/components/ContentIndicator/types.js

@@ -0,0 +1 @@
+export {};

package/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,31 @@
+import type { DropdownProps, DropdownTriggerProps, DropdownContentProps, DropdownItemProps } from './types';
+declare function DropdownRoot({ open: controlledOpen, onOpenChange, defaultOpen, children, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DropdownRoot {
+    var displayName: string;
+}
+declare function DropdownTriggerComponent({ asChild, children }: DropdownTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DropdownTriggerComponent {
+    var displayName: string;
+}
+declare function DropdownContentComponent({ side, align, sideOffset, className, style, children, }: DropdownContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace DropdownContentComponent {
+    var displayName: string;
+}
+/**
+ * Dropdown menu item. Renders a Button internally with ghost variant.
+ * When href is provided, renders as an anchor.
+ */
+declare function DropdownItemComponent({ onSelect, href, target, disabled, keepOpen, className, children, ...props }: DropdownItemProps & Record<string, unknown>): import("react/jsx-runtime").JSX.Element;
+declare namespace DropdownItemComponent {
+    var displayName: string;
+}
+type DropdownCompound = typeof DropdownRoot & {
+    Trigger: typeof DropdownTriggerComponent;
+    Content: typeof DropdownContentComponent;
+    Item: typeof DropdownItemComponent;
+};
+export declare const Dropdown: DropdownCompound;
+export declare const DropdownTrigger: typeof DropdownTriggerComponent;
+export declare const DropdownContent: typeof DropdownContentComponent;
+export declare const DropdownItem: typeof DropdownItemComponent;
+export { useDropdownContext as useDropdown } from './DropdownContext';