@techzyapp/ui-library 1.0.0

package/dist/components/ToggleButton/ToggleButtonGroup.d.cts

@@ -0,0 +1,52 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ThemeColor } from '../../theme';
+import { type IconName } from '../../icons/names';
+import { type ToggleButtonSize } from './ToggleButton';
+export type ToggleButtonGroupOrientation = 'horizontal' | 'vertical';
+/** A data-driven button for the `options` prop. */
+export interface ToggleButtonOption {
+    value: string;
+    label?: ReactNode;
+    /** Leading icon — a known `IconName` or any node. */
+    icon?: IconName | ReactNode;
+    disabled?: boolean;
+    /** Accessible label (use for icon-only buttons). */
+    ariaLabel?: string;
+}
+export interface ToggleButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange' | 'defaultValue'> {
+    /**
+     * Single-selection (`value` is a `string | null`, like a segmented control) vs multiple (`value` is
+     * a `string[]`). Defaults to `false` (multiple), matching MUI.
+     */
+    exclusive?: boolean;
+    /** Controlled value — a `string | null` when `exclusive`, else a `string[]`. */
+    value?: string | string[] | null;
+    /** Initial value for uncontrolled use (same shape as `value`). */
+    defaultValue?: string | string[] | null;
+    /** Fires with the next value (matches the `exclusive` shape). */
+    onChange?: (value: string | string[] | null) => void;
+    /** Data-driven buttons — an alternative to passing `<ToggleButton>` children. */
+    options?: ToggleButtonOption[];
+    /** Lay the buttons in a row or a column. Defaults to `horizontal`. */
+    orientation?: ToggleButtonGroupOrientation;
+    /** Preset size for every button. Defaults to `md`. */
+    size?: ToggleButtonSize;
+    /** Theme palette token tinting selected buttons. Defaults to `primary`. */
+    color?: ThemeColor;
+    /** Disables every button in the group. */
+    disabled?: boolean;
+    /** Stretch the group to fill the width (buttons share it equally). */
+    fullWidth?: boolean;
+    /** `<ToggleButton>` children (used when `options` is not given). */
+    children?: ReactNode;
+}
+/**
+ * Groups `<ToggleButton>`s into a joined, segmented control. **`exclusive`** picks single-selection
+ * (`value` is a `string | null` — clicking the active button deselects it) vs multiple (`value` is a
+ * `string[]`); both are controlled (`value` + `onChange`) or uncontrolled (`defaultValue`). Supply the
+ * buttons via the data-driven `options` prop or as `<ToggleButton>` children — the group shares
+ * `size`/`color`/`disabled`/`fullWidth` and the selection via context. `orientation` lays them in a
+ * row or column; adjacent borders collapse so the strip reads as one control. `role="group"`; styling
+ * uses `--tz-*` tokens.
+ */
+export declare const ToggleButtonGroup: import("react").ForwardRefExoticComponent<ToggleButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ToggleButton/ToggleButtonGroup.d.ts

@@ -0,0 +1,52 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ThemeColor } from '../../theme';
+import { type IconName } from '../../icons/names';
+import { type ToggleButtonSize } from './ToggleButton';
+export type ToggleButtonGroupOrientation = 'horizontal' | 'vertical';
+/** A data-driven button for the `options` prop. */
+export interface ToggleButtonOption {
+    value: string;
+    label?: ReactNode;
+    /** Leading icon — a known `IconName` or any node. */
+    icon?: IconName | ReactNode;
+    disabled?: boolean;
+    /** Accessible label (use for icon-only buttons). */
+    ariaLabel?: string;
+}
+export interface ToggleButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange' | 'defaultValue'> {
+    /**
+     * Single-selection (`value` is a `string | null`, like a segmented control) vs multiple (`value` is
+     * a `string[]`). Defaults to `false` (multiple), matching MUI.
+     */
+    exclusive?: boolean;
+    /** Controlled value — a `string | null` when `exclusive`, else a `string[]`. */
+    value?: string | string[] | null;
+    /** Initial value for uncontrolled use (same shape as `value`). */
+    defaultValue?: string | string[] | null;
+    /** Fires with the next value (matches the `exclusive` shape). */
+    onChange?: (value: string | string[] | null) => void;
+    /** Data-driven buttons — an alternative to passing `<ToggleButton>` children. */
+    options?: ToggleButtonOption[];
+    /** Lay the buttons in a row or a column. Defaults to `horizontal`. */
+    orientation?: ToggleButtonGroupOrientation;
+    /** Preset size for every button. Defaults to `md`. */
+    size?: ToggleButtonSize;
+    /** Theme palette token tinting selected buttons. Defaults to `primary`. */
+    color?: ThemeColor;
+    /** Disables every button in the group. */
+    disabled?: boolean;
+    /** Stretch the group to fill the width (buttons share it equally). */
+    fullWidth?: boolean;
+    /** `<ToggleButton>` children (used when `options` is not given). */
+    children?: ReactNode;
+}
+/**
+ * Groups `<ToggleButton>`s into a joined, segmented control. **`exclusive`** picks single-selection
+ * (`value` is a `string | null` — clicking the active button deselects it) vs multiple (`value` is a
+ * `string[]`); both are controlled (`value` + `onChange`) or uncontrolled (`defaultValue`). Supply the
+ * buttons via the data-driven `options` prop or as `<ToggleButton>` children — the group shares
+ * `size`/`color`/`disabled`/`fullWidth` and the selection via context. `orientation` lays them in a
+ * row or column; adjacent borders collapse so the strip reads as one control. `role="group"`; styling
+ * uses `--tz-*` tokens.
+ */
+export declare const ToggleButtonGroup: import("react").ForwardRefExoticComponent<ToggleButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ToggleButton/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../ToggleButtonGroup-DYRLwKKh.cjs");exports.ToggleButton=e.ToggleButton;exports.ToggleButtonGroup=e.ToggleButtonGroup;exports.default=e.ToggleButton;
+//# sourceMappingURL=index.cjs.map

package/dist/components/ToggleButton/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/ToggleButton/index.d.cts

@@ -0,0 +1,4 @@
+export { ToggleButton, ToggleButton as default } from './ToggleButton';
+export type { ToggleButtonProps, ToggleButtonSize } from './ToggleButton';
+export { ToggleButtonGroup } from './ToggleButtonGroup';
+export type { ToggleButtonGroupProps, ToggleButtonOption, ToggleButtonGroupOrientation, } from './ToggleButtonGroup';

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

@@ -0,0 +1,4 @@
+export { ToggleButton, ToggleButton as default } from './ToggleButton';
+export type { ToggleButtonProps, ToggleButtonSize } from './ToggleButton';
+export { ToggleButtonGroup } from './ToggleButtonGroup';
+export type { ToggleButtonGroupProps, ToggleButtonOption, ToggleButtonGroupOrientation, } from './ToggleButtonGroup';

package/dist/components/ToggleButton/index.js

@@ -0,0 +1,7 @@
+import { T as a, a as e, T as g } from "../../ToggleButtonGroup-BWd7MOcc.js";
+export {
+  a as ToggleButton,
+  e as ToggleButtonGroup,
+  g as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/ToggleButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/ToggleButton/toggleButtonGroupContext.d.cts

@@ -0,0 +1,15 @@
+import type { ThemeColor } from '../../theme';
+import type { ToggleButtonSize } from './ToggleButton';
+/** Shared state a `<ToggleButtonGroup>` hands down to its `<ToggleButton>` children via context. */
+export interface ToggleButtonGroupContextValue {
+    /** Whether a given button value is currently selected. */
+    isSelected: (value: string) => boolean;
+    /** Toggle a button value — called by a child on click. */
+    toggle: (value: string) => void;
+    size?: ToggleButtonSize;
+    color?: ThemeColor;
+    disabled?: boolean;
+}
+export declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextValue | null>;
+/** Read the surrounding `<ToggleButtonGroup>` (or `null` when a `<ToggleButton>` is standalone). */
+export declare function useToggleButtonGroup(): ToggleButtonGroupContextValue | null;

package/dist/components/ToggleButton/toggleButtonGroupContext.d.ts

@@ -0,0 +1,15 @@
+import type { ThemeColor } from '../../theme';
+import type { ToggleButtonSize } from './ToggleButton';
+/** Shared state a `<ToggleButtonGroup>` hands down to its `<ToggleButton>` children via context. */
+export interface ToggleButtonGroupContextValue {
+    /** Whether a given button value is currently selected. */
+    isSelected: (value: string) => boolean;
+    /** Toggle a button value — called by a child on click. */
+    toggle: (value: string) => void;
+    size?: ToggleButtonSize;
+    color?: ThemeColor;
+    disabled?: boolean;
+}
+export declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextValue | null>;
+/** Read the surrounding `<ToggleButtonGroup>` (or `null` when a `<ToggleButton>` is standalone). */
+export declare function useToggleButtonGroup(): ToggleButtonGroupContextValue | null;

package/dist/components/Tooltip/Tooltip.d.cts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import type { ThemeColor } from '../../theme';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content' | 'color'> {
+    /** The tooltip text/content shown on hover or focus. Empty content renders no tooltip. */
+    content: ReactNode;
+    /** Which side of the trigger the tooltip appears on. Defaults to `top`. */
+    placement?: TooltipPlacement;
+    /** Theme palette token for the fill (label uses its contrast color). Defaults to `primary`. */
+    color?: ThemeColor;
+    /** A single focusable element to attach the tooltip to (e.g. a `Button` or `IconButton`). */
+    children: ReactElement;
+}
+/**
+ * Shows a small floating label on hover or keyboard focus of its child, with an arrow pointing at
+ * the trigger. Wrap a single element: `<Tooltip content="Save"><IconButton…/></Tooltip>`. Opens on
+ * `mouseenter`/`focus`, closes on `mouseleave`/`blur`/`Escape`. The child gets `aria-describedby`
+ * while open (the label has `role="tooltip"`). Token-only styling via the shared `--tz-btn-rgb`
+ * pattern — `color` (default `primary`) sets the fill and its contrast label, flipping with the theme.
+ */
+export declare function Tooltip({ content, placement, color, children, className, style, onKeyDown, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import type { ThemeColor } from '../../theme';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content' | 'color'> {
+    /** The tooltip text/content shown on hover or focus. Empty content renders no tooltip. */
+    content: ReactNode;
+    /** Which side of the trigger the tooltip appears on. Defaults to `top`. */
+    placement?: TooltipPlacement;
+    /** Theme palette token for the fill (label uses its contrast color). Defaults to `primary`. */
+    color?: ThemeColor;
+    /** A single focusable element to attach the tooltip to (e.g. a `Button` or `IconButton`). */
+    children: ReactElement;
+}
+/**
+ * Shows a small floating label on hover or keyboard focus of its child, with an arrow pointing at
+ * the trigger. Wrap a single element: `<Tooltip content="Save"><IconButton…/></Tooltip>`. Opens on
+ * `mouseenter`/`focus`, closes on `mouseleave`/`blur`/`Escape`. The child gets `aria-describedby`
+ * while open (the label has `role="tooltip"`). Token-only styling via the shared `--tz-btn-rgb`
+ * pattern — `color` (default `primary`) sets the fill and its contrast label, flipping with the theme.
+ */
+export declare function Tooltip({ content, placement, color, children, className, style, onKeyDown, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tooltip/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Tooltip-Ao7az09p.cjs");exports.Tooltip=e.Tooltip;exports.default=e.Tooltip;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Tooltip/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Tooltip/index.d.cts

@@ -0,0 +1,2 @@
+export { Tooltip, Tooltip as default } from './Tooltip';
+export type { TooltipProps, TooltipPlacement } from './Tooltip';

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

@@ -0,0 +1,2 @@
+export { Tooltip, Tooltip as default } from './Tooltip';
+export type { TooltipProps, TooltipPlacement } from './Tooltip';

package/dist/components/Tooltip/index.js

@@ -0,0 +1,6 @@
+import { T as t, T } from "../../Tooltip-Cb_FKxT9.js";
+export {
+  t as Tooltip,
+  T as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/TranslatedFields/TranslatedFields.d.cts

@@ -0,0 +1,56 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type LocaleConfig } from '../../theme';
+import type { IconName } from '../../icons/names';
+import { type TabsSize, type TabsVariant } from '../Tabs';
+/** Builds a field's namespaced form name for the active locale (`(field) => name`). */
+export type TranslatedFieldName = (field: string) => string;
+export interface TranslatedFieldsProps {
+    /**
+     * Render the fields for one locale. `name(field)` returns the namespaced form name to put on each
+     * control (e.g. `translations[en-US].title`); `locale` is the active code. The same render runs per
+     * locale, so the fields are identical bar their names.
+     */
+    children: (name: TranslatedFieldName, locale: string) => ReactNode;
+    /**
+     * Locales (one tab each). Defaults to the app's configured locales
+     * (`<ConfigProvider config={{ locales }}>`).
+     */
+    locales?: LocaleConfig[];
+    /**
+     * Top-level namespace for the field names (`<namespace>[<locale>].<field>`) and the nested object.
+     * Falls back to `<ConfigProvider config={{ keys: { translationsNamespace } }}>`, then `'translations'`.
+     * Pass to override per-instance (e.g. `'languages'`).
+     */
+    namespace?: string;
+    /** Controlled active locale code. */
+    value?: string;
+    /** Initial active locale code (uncontrolled). Defaults to the first locale. */
+    defaultValue?: string;
+    /** Fires with the next active locale code. */
+    onChange?: (locale: string) => void;
+    /** Icon shown on each locale tab. Defaults to `'Global'`. */
+    icon?: IconName;
+    /** Tab strip variant. Defaults to `Tabs`' default (`underline`). */
+    variant?: TabsVariant;
+    /** Tab + field density. Defaults to `Tabs`' default (`md`). */
+    size?: TabsSize;
+    /** Accessible label for the tablist. Defaults to `'Translations'`. */
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A tabbed group of **per-locale** form fields — one tab per content locale, each rendering the same
+ * fields with locale-namespaced `name`s (`translations[<locale>].<field>` by default), so a `<Form>`
+ * submits e.g. `translations[en-US].title` / `translations[ka-GE].title`. You supply the fields once
+ * via a render function that receives a `name(field)` builder for the active locale; bring any field
+ * component (`TextField`, `MultilineTextField`, a rich-text editor, …). Locales come from
+ * `<ConfigProvider config={{ locales }}>` (override with the `locales` prop). The top-level word is the
+ * `namespace` (default `'translations'`, e.g. `'languages'`). While inside a `<Form>`, an incomplete
+ * locale's tab shows a **dot**, and on submit the strip auto-advances to the first locale with errors
+ * and focuses its field. Build the schema / defaults with `buildTranslations`; the form values stay
+ * **flat** (`translations[en-US].title` — the `FormData` shape) — convert to/from the **nested** JSON
+ * shape (`{ translations: { 'en-US': { title } } }`) with `nestTranslations` / `flattenTranslations`.
+ * Requires the `Tabs` component.
+ */
+export declare const TranslatedFields: import("react").ForwardRefExoticComponent<TranslatedFieldsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/TranslatedFields/TranslatedFields.d.ts

@@ -0,0 +1,56 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type LocaleConfig } from '../../theme';
+import type { IconName } from '../../icons/names';
+import { type TabsSize, type TabsVariant } from '../Tabs';
+/** Builds a field's namespaced form name for the active locale (`(field) => name`). */
+export type TranslatedFieldName = (field: string) => string;
+export interface TranslatedFieldsProps {
+    /**
+     * Render the fields for one locale. `name(field)` returns the namespaced form name to put on each
+     * control (e.g. `translations[en-US].title`); `locale` is the active code. The same render runs per
+     * locale, so the fields are identical bar their names.
+     */
+    children: (name: TranslatedFieldName, locale: string) => ReactNode;
+    /**
+     * Locales (one tab each). Defaults to the app's configured locales
+     * (`<ConfigProvider config={{ locales }}>`).
+     */
+    locales?: LocaleConfig[];
+    /**
+     * Top-level namespace for the field names (`<namespace>[<locale>].<field>`) and the nested object.
+     * Falls back to `<ConfigProvider config={{ keys: { translationsNamespace } }}>`, then `'translations'`.
+     * Pass to override per-instance (e.g. `'languages'`).
+     */
+    namespace?: string;
+    /** Controlled active locale code. */
+    value?: string;
+    /** Initial active locale code (uncontrolled). Defaults to the first locale. */
+    defaultValue?: string;
+    /** Fires with the next active locale code. */
+    onChange?: (locale: string) => void;
+    /** Icon shown on each locale tab. Defaults to `'Global'`. */
+    icon?: IconName;
+    /** Tab strip variant. Defaults to `Tabs`' default (`underline`). */
+    variant?: TabsVariant;
+    /** Tab + field density. Defaults to `Tabs`' default (`md`). */
+    size?: TabsSize;
+    /** Accessible label for the tablist. Defaults to `'Translations'`. */
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A tabbed group of **per-locale** form fields — one tab per content locale, each rendering the same
+ * fields with locale-namespaced `name`s (`translations[<locale>].<field>` by default), so a `<Form>`
+ * submits e.g. `translations[en-US].title` / `translations[ka-GE].title`. You supply the fields once
+ * via a render function that receives a `name(field)` builder for the active locale; bring any field
+ * component (`TextField`, `MultilineTextField`, a rich-text editor, …). Locales come from
+ * `<ConfigProvider config={{ locales }}>` (override with the `locales` prop). The top-level word is the
+ * `namespace` (default `'translations'`, e.g. `'languages'`). While inside a `<Form>`, an incomplete
+ * locale's tab shows a **dot**, and on submit the strip auto-advances to the first locale with errors
+ * and focuses its field. Build the schema / defaults with `buildTranslations`; the form values stay
+ * **flat** (`translations[en-US].title` — the `FormData` shape) — convert to/from the **nested** JSON
+ * shape (`{ translations: { 'en-US': { title } } }`) with `nestTranslations` / `flattenTranslations`.
+ * Requires the `Tabs` component.
+ */
+export declare const TranslatedFields: import("react").ForwardRefExoticComponent<TranslatedFieldsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/TranslatedFields/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../TranslatedFields-DT3bYse6.cjs");exports.TranslatedFields=e.TranslatedFields;exports.default=e.TranslatedFields;
+//# sourceMappingURL=index.cjs.map

package/dist/components/TranslatedFields/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/TranslatedFields/index.d.cts

@@ -0,0 +1,2 @@
+export { TranslatedFields, TranslatedFields as default } from './TranslatedFields';
+export type { TranslatedFieldsProps, TranslatedFieldName } from './TranslatedFields';

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

@@ -0,0 +1,2 @@
+export { TranslatedFields, TranslatedFields as default } from './TranslatedFields';
+export type { TranslatedFieldsProps, TranslatedFieldName } from './TranslatedFields';

package/dist/components/TranslatedFields/index.js

@@ -0,0 +1,6 @@
+import { T as s, T as d } from "../../TranslatedFields-CI0F9bHw.js";
+export {
+  s as TranslatedFields,
+  d as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/TranslatedFields/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Typography/Typography.d.cts

@@ -0,0 +1,30 @@
+import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
+import type { ThemeColor } from '../../theme';
+export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'subtitle' | 'body' | 'bodySmall' | 'caption' | 'uppercase';
+export type TypographyAlign = 'left' | 'center' | 'right' | 'justify';
+/**
+ * Text color: a theme palette token, the semantic `text` role, or `muted` (a soft primary shade for
+ * secondary text). Omit to inherit the surrounding color.
+ */
+export type TypographyColor = ThemeColor | 'text' | 'muted';
+export interface TypographyProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
+    /** Type scale + default element. `h1`–`h4` headings · `subtitle` · `body` (default) · `bodySmall` · `caption` · `uppercase`. */
+    variant?: TypographyVariant;
+    /** Render a different HTML element (or component) than the variant's default — keeps the styling, changes the tag. */
+    as?: ElementType;
+    /** Text color. Omit to inherit the surrounding color. */
+    color?: TypographyColor;
+    /** Horizontal text alignment. */
+    align?: TypographyAlign;
+    /** Clamp to a single line, hiding overflow with an ellipsis. */
+    truncate?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Text primitive for the design system. Each `variant` maps to a sensible HTML
+ * element and a font size from the `--tz-font-size-*` scale; override the tag
+ * with `as` when the semantics differ from the look. Default browser margins are
+ * removed. Without a `color` it inherits the surrounding text color, mirroring
+ * `Icon` and `Loader`.
+ */
+export declare const Typography: import("react").ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Typography/Typography.d.ts

@@ -0,0 +1,30 @@
+import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
+import type { ThemeColor } from '../../theme';
+export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'subtitle' | 'body' | 'bodySmall' | 'caption' | 'uppercase';
+export type TypographyAlign = 'left' | 'center' | 'right' | 'justify';
+/**
+ * Text color: a theme palette token, the semantic `text` role, or `muted` (a soft primary shade for
+ * secondary text). Omit to inherit the surrounding color.
+ */
+export type TypographyColor = ThemeColor | 'text' | 'muted';
+export interface TypographyProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
+    /** Type scale + default element. `h1`–`h4` headings · `subtitle` · `body` (default) · `bodySmall` · `caption` · `uppercase`. */
+    variant?: TypographyVariant;
+    /** Render a different HTML element (or component) than the variant's default — keeps the styling, changes the tag. */
+    as?: ElementType;
+    /** Text color. Omit to inherit the surrounding color. */
+    color?: TypographyColor;
+    /** Horizontal text alignment. */
+    align?: TypographyAlign;
+    /** Clamp to a single line, hiding overflow with an ellipsis. */
+    truncate?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Text primitive for the design system. Each `variant` maps to a sensible HTML
+ * element and a font size from the `--tz-font-size-*` scale; override the tag
+ * with `as` when the semantics differ from the look. Default browser margins are
+ * removed. Without a `color` it inherits the surrounding text color, mirroring
+ * `Icon` and `Loader`.
+ */
+export declare const Typography: import("react").ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Typography/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Typography-BFatE1_A.cjs");exports.Typography=e.Typography;exports.default=e.Typography;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Typography/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Typography/index.d.cts

@@ -0,0 +1,2 @@
+export { Typography, Typography as default } from './Typography';
+export type { TypographyProps, TypographyVariant, TypographyAlign, TypographyColor, } from './Typography';

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

@@ -0,0 +1,2 @@
+export { Typography, Typography as default } from './Typography';
+export type { TypographyProps, TypographyVariant, TypographyAlign, TypographyColor, } from './Typography';

package/dist/components/Typography/index.js

@@ -0,0 +1,6 @@
+import { T as p, T as r } from "../../Typography-Cta6Rg4L.js";
+export {
+  p as Typography,
+  r as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Typography/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/UserCard/UserCard.d.cts

@@ -0,0 +1,33 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ThemeColor } from '../../theme';
+import type { IconName } from '../../icons/names';
+export type UserCardSize = 'sm' | 'md' | 'lg';
+export interface UserCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    /** Display name — the primary line, and the source of the avatar initials. */
+    name?: string;
+    /** Secondary line under the name (usually the email). */
+    email?: ReactNode;
+    /** Avatar image URL (falls back to the initials from `name`, else the `icon`). */
+    avatar?: string;
+    /** Fallback avatar icon when there's no image or name. Defaults to `'User'`. */
+    icon?: IconName;
+    /** Theme palette token tinting the avatar. Defaults to `'primary'`. */
+    color?: ThemeColor;
+    /** Preset size (avatar + fonts + button). Defaults to `'md'`. */
+    size?: UserCardSize;
+    /** When provided, a **Sign out** button is shown that calls this. */
+    onLogout?: () => void;
+    /** Sign-out button label. Defaults to `'Sign out'`. */
+    logoutLabel?: ReactNode;
+    /** Extra content between the identity row and the sign-out button (e.g. a link or menu). */
+    children?: ReactNode;
+}
+/**
+ * A compact account card — an `Avatar` + name/email and an optional **Sign out** button. Drop it into
+ * the `RootLayout` `sidebarFooter` (or anywhere) for a consistent signed-in-user block across apps,
+ * instead of hand-rolling the markup each time. Shows the image (`avatar`) → initials (from `name`) →
+ * `icon` (default `User`) in priority order; renders the sign-out `Button` (filled `error`) only when
+ * `onLogout` is given. `size` (`sm`/`md`/`lg`) scales the avatar + type; `color` (default `primary`)
+ * tints the avatar. Own CSS module (token-only).
+ */
+export declare const UserCard: import("react").ForwardRefExoticComponent<UserCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/UserCard/UserCard.d.ts

@@ -0,0 +1,33 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ThemeColor } from '../../theme';
+import type { IconName } from '../../icons/names';
+export type UserCardSize = 'sm' | 'md' | 'lg';
+export interface UserCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    /** Display name — the primary line, and the source of the avatar initials. */
+    name?: string;
+    /** Secondary line under the name (usually the email). */
+    email?: ReactNode;
+    /** Avatar image URL (falls back to the initials from `name`, else the `icon`). */
+    avatar?: string;
+    /** Fallback avatar icon when there's no image or name. Defaults to `'User'`. */
+    icon?: IconName;
+    /** Theme palette token tinting the avatar. Defaults to `'primary'`. */
+    color?: ThemeColor;
+    /** Preset size (avatar + fonts + button). Defaults to `'md'`. */
+    size?: UserCardSize;
+    /** When provided, a **Sign out** button is shown that calls this. */
+    onLogout?: () => void;
+    /** Sign-out button label. Defaults to `'Sign out'`. */
+    logoutLabel?: ReactNode;
+    /** Extra content between the identity row and the sign-out button (e.g. a link or menu). */
+    children?: ReactNode;
+}
+/**
+ * A compact account card — an `Avatar` + name/email and an optional **Sign out** button. Drop it into
+ * the `RootLayout` `sidebarFooter` (or anywhere) for a consistent signed-in-user block across apps,
+ * instead of hand-rolling the markup each time. Shows the image (`avatar`) → initials (from `name`) →
+ * `icon` (default `User`) in priority order; renders the sign-out `Button` (filled `error`) only when
+ * `onLogout` is given. `size` (`sm`/`md`/`lg`) scales the avatar + type; `color` (default `primary`)
+ * tints the avatar. Own CSS module (token-only).
+ */
+export declare const UserCard: import("react").ForwardRefExoticComponent<UserCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/UserCard/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../UserCard-OlLeyyS0.cjs");exports.UserCard=e.UserCard;exports.default=e.UserCard;
+//# sourceMappingURL=index.cjs.map

package/dist/components/UserCard/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/UserCard/index.d.cts

@@ -0,0 +1,2 @@
+export { UserCard, UserCard as default } from './UserCard';
+export type { UserCardProps, UserCardSize } from './UserCard';

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

@@ -0,0 +1,2 @@
+export { UserCard, UserCard as default } from './UserCard';
+export type { UserCardProps, UserCardSize } from './UserCard';

package/dist/components/UserCard/index.js

@@ -0,0 +1,6 @@
+import { U as e, U as s } from "../../UserCard-BhqtX1vU.js";
+export {
+  e as UserCard,
+  s as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/UserCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}