@techzyapp/ui-library 1.0.0

package/dist/components/Chip/Chip.d.cts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ThemeColor } from '../../theme';
+export type ChipVariant = 'contained' | 'filled' | 'outlined' | 'text';
+export type ChipSize = 'sm' | 'md' | 'lg';
+export interface ChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    /** Visual style. Defaults to `filled` (a soft tinted chip). */
+    variant?: ChipVariant;
+    /** Theme palette token that tints the chip. Defaults to `primary`. */
+    color?: ThemeColor;
+    /** Preset size — height + font. Defaults to `md`. */
+    size?: ChipSize;
+    /** Makes the chip interactive (hover, pointer, keyboard, `onClick`). Off by default (a static tag). */
+    clickable?: boolean;
+    /** Dims the chip and disables all interaction. */
+    disabled?: boolean;
+    /** Leading icon (e.g. an `<Icon />`). Ignored when `avatar` is set. */
+    startIcon?: ReactNode;
+    /** Leading avatar (e.g. an `<Avatar />`), sized to the chip and flush to the left. */
+    avatar?: ReactNode;
+    /** When provided, shows a trailing delete button that calls this (its click won't trigger `onClick`). */
+    onDelete?: () => void;
+    /** Custom delete icon. Defaults to a `CloseCircle`. */
+    deleteIcon?: ReactNode;
+    /** Accessible label for the delete button. Defaults to `"Remove"`. */
+    deleteLabel?: string;
+    /** Tab index for the delete button — pass `-1` when the chip lives inside a composite widget (e.g. a multi-select) that owns keyboard focus. */
+    deleteTabIndex?: number;
+    /** Chip label. */
+    children?: ReactNode;
+}
+/**
+ * A compact tag/token. Static by default; `clickable` makes it an interactive `role="button"`
+ * (hover + Enter/Space). Supports a leading `startIcon` or `avatar` and a trailing delete button via
+ * `onDelete`. Tinted by `color` through the shared `--tz-btn-rgb` / `--tz-btn-on` pattern across the
+ * four standard variants. Token-only styling.
+ */
+export declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ThemeColor } from '../../theme';
+export type ChipVariant = 'contained' | 'filled' | 'outlined' | 'text';
+export type ChipSize = 'sm' | 'md' | 'lg';
+export interface ChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    /** Visual style. Defaults to `filled` (a soft tinted chip). */
+    variant?: ChipVariant;
+    /** Theme palette token that tints the chip. Defaults to `primary`. */
+    color?: ThemeColor;
+    /** Preset size — height + font. Defaults to `md`. */
+    size?: ChipSize;
+    /** Makes the chip interactive (hover, pointer, keyboard, `onClick`). Off by default (a static tag). */
+    clickable?: boolean;
+    /** Dims the chip and disables all interaction. */
+    disabled?: boolean;
+    /** Leading icon (e.g. an `<Icon />`). Ignored when `avatar` is set. */
+    startIcon?: ReactNode;
+    /** Leading avatar (e.g. an `<Avatar />`), sized to the chip and flush to the left. */
+    avatar?: ReactNode;
+    /** When provided, shows a trailing delete button that calls this (its click won't trigger `onClick`). */
+    onDelete?: () => void;
+    /** Custom delete icon. Defaults to a `CloseCircle`. */
+    deleteIcon?: ReactNode;
+    /** Accessible label for the delete button. Defaults to `"Remove"`. */
+    deleteLabel?: string;
+    /** Tab index for the delete button — pass `-1` when the chip lives inside a composite widget (e.g. a multi-select) that owns keyboard focus. */
+    deleteTabIndex?: number;
+    /** Chip label. */
+    children?: ReactNode;
+}
+/**
+ * A compact tag/token. Static by default; `clickable` makes it an interactive `role="button"`
+ * (hover + Enter/Space). Supports a leading `startIcon` or `avatar` and a trailing delete button via
+ * `onDelete`. Tinted by `color` through the shared `--tz-btn-rgb` / `--tz-btn-on` pattern across the
+ * four standard variants. Token-only styling.
+ */
+export declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Chip/index.cjs

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

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

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

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

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

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

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

package/dist/components/Chip/index.js

@@ -0,0 +1,6 @@
+import { C as e, C as f } from "../../Chip-Cfo0v3Z8.js";
+export {
+  e as Chip,
+  f as default
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/ChoiceCard/ChoiceCard.d.cts

@@ -0,0 +1,41 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+import type { ThemeColor } from '../../theme';
+import { type IconName } from '../../icons/names';
+export type ChoiceCardSize = 'sm' | 'md' | 'lg';
+export type ChoiceCardAlign = 'left' | 'center';
+export interface ChoiceCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'type' | 'onChange' | 'value'> {
+    /** This card's value — selected when the surrounding `ChoiceCardGroup`'s value holds it. */
+    value: string;
+    /** Card title. */
+    label?: ReactNode;
+    /** Muted description line under the title. */
+    description?: ReactNode;
+    /** Leading icon in a tinted circle — a known `IconName` or any node. Optional. */
+    icon?: IconName | ReactNode;
+    /**
+     * Content alignment. `center` centers the icon + text stack; `left` anchors the same stack to the
+     * left edge (icon above left-aligned text). Defaults to the group's `align`, else `center` with an
+     * icon and `left` without one.
+     */
+    align?: ChoiceCardAlign;
+    /** Theme palette token for the selected tint. Defaults to `primary` (inherits the group's `color`). */
+    color?: ThemeColor;
+    /** Preset size — padding, icon circle and fonts. Inherits the group's `size` when omitted. */
+    size?: ChoiceCardSize;
+    /** Marks the card invalid — reddens the border + indicator. Inherits the group's `error`. */
+    error?: boolean;
+    /** Controlled selected state for standalone use (inside a `ChoiceCardGroup` the group drives this). */
+    checked?: boolean;
+    /** Fires with the next selected state (standalone use). */
+    onChange?: (checked: boolean) => void;
+}
+/**
+ * A selectable card — a rich checkbox/radio with an icon, title and description. The native input is
+ * visually hidden but fully accessible (Space toggles; in an `exclusive` group the cards are real
+ * radios, so Arrow keys rove between them); the card shows the state with a accent border + soft halo,
+ * a top-right tick indicator, and an icon circle that fills with the color while selected. Designed to
+ * live inside a `<ChoiceCardGroup>` (which supplies the selection, `exclusive` mode and
+ * `size`/`color`/`disabled`/`error` via context), but also works standalone as a single fancy checkbox
+ * (`checked` + `onChange`). Styling uses `--tz-*` tokens via the shared `--tz-btn-rgb` pattern.
+ */
+export declare const ChoiceCard: import("react").ForwardRefExoticComponent<ChoiceCardProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/ChoiceCard/ChoiceCard.d.ts

@@ -0,0 +1,41 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+import type { ThemeColor } from '../../theme';
+import { type IconName } from '../../icons/names';
+export type ChoiceCardSize = 'sm' | 'md' | 'lg';
+export type ChoiceCardAlign = 'left' | 'center';
+export interface ChoiceCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'type' | 'onChange' | 'value'> {
+    /** This card's value — selected when the surrounding `ChoiceCardGroup`'s value holds it. */
+    value: string;
+    /** Card title. */
+    label?: ReactNode;
+    /** Muted description line under the title. */
+    description?: ReactNode;
+    /** Leading icon in a tinted circle — a known `IconName` or any node. Optional. */
+    icon?: IconName | ReactNode;
+    /**
+     * Content alignment. `center` centers the icon + text stack; `left` anchors the same stack to the
+     * left edge (icon above left-aligned text). Defaults to the group's `align`, else `center` with an
+     * icon and `left` without one.
+     */
+    align?: ChoiceCardAlign;
+    /** Theme palette token for the selected tint. Defaults to `primary` (inherits the group's `color`). */
+    color?: ThemeColor;
+    /** Preset size — padding, icon circle and fonts. Inherits the group's `size` when omitted. */
+    size?: ChoiceCardSize;
+    /** Marks the card invalid — reddens the border + indicator. Inherits the group's `error`. */
+    error?: boolean;
+    /** Controlled selected state for standalone use (inside a `ChoiceCardGroup` the group drives this). */
+    checked?: boolean;
+    /** Fires with the next selected state (standalone use). */
+    onChange?: (checked: boolean) => void;
+}
+/**
+ * A selectable card — a rich checkbox/radio with an icon, title and description. The native input is
+ * visually hidden but fully accessible (Space toggles; in an `exclusive` group the cards are real
+ * radios, so Arrow keys rove between them); the card shows the state with a accent border + soft halo,
+ * a top-right tick indicator, and an icon circle that fills with the color while selected. Designed to
+ * live inside a `<ChoiceCardGroup>` (which supplies the selection, `exclusive` mode and
+ * `size`/`color`/`disabled`/`error` via context), but also works standalone as a single fancy checkbox
+ * (`checked` + `onChange`). Styling uses `--tz-*` tokens via the shared `--tz-btn-rgb` pattern.
+ */
+export declare const ChoiceCard: import("react").ForwardRefExoticComponent<ChoiceCardProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/ChoiceCard/ChoiceCardGroup.d.cts

@@ -0,0 +1,72 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ThemeColor } from '../../theme';
+import type { IconName } from '../../icons/names';
+import { type ChoiceCardAlign, type ChoiceCardSize } from './ChoiceCard';
+/** A single card for the data-driven `options` prop. */
+export interface ChoiceCardOption {
+    value: string;
+    /** Card title. */
+    label?: ReactNode;
+    /** Muted description line under the title. */
+    description?: ReactNode;
+    /** Leading icon in a tinted circle — a known `IconName` or any node. */
+    icon?: IconName | ReactNode;
+    disabled?: boolean;
+}
+export interface ChoiceCardGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange' | 'defaultValue'> {
+    /**
+     * Single-selection (radio semantics — the cards are native radios, `value` is a `string | null`,
+     * clicking the selected card keeps it selected) vs multiple (checkbox semantics — `value` is a
+     * `string[]`). Defaults to `false` (multiple).
+     */
+    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;
+    /**
+     * Input `name` — shared by the radios in `exclusive` mode, and the `<Form>` binding key (form value:
+     * `string` when `exclusive`, else `string[]`). Auto-generated when omitted.
+     */
+    name?: string;
+    /** Data-driven cards — an alternative to passing `<ChoiceCard>` children. */
+    options?: ChoiceCardOption[];
+    /** Group label rendered above the cards. */
+    label?: ReactNode;
+    /** Minimum card width in px — the grid fits as many per row as this allows. Defaults to `160`. */
+    minCardWidth?: number;
+    /**
+     * Content alignment for every card. `center` centers the icon + text stack; `left` anchors the same
+     * stack to the left edge (icon above left-aligned text). Omit for the smart default — cards with an
+     * icon center, icon-less cards left-align. A card's own `align` wins.
+     */
+    align?: ChoiceCardAlign;
+    /** Preset size for every card. Defaults to `md`. */
+    size?: ChoiceCardSize;
+    /** Theme palette token for the selected tint. Defaults to `primary`. */
+    color?: ThemeColor;
+    /** Marks the group invalid — reddens the card borders (no message text, like `RadioGroup`). */
+    error?: boolean;
+    /** Adds a red asterisk after the label. */
+    required?: boolean;
+    /** Disables every card in the group. */
+    disabled?: boolean;
+    /** `<ChoiceCard>` children (used when `options` is not given). */
+    children?: ReactNode;
+}
+/**
+ * A group of selectable cards — rich checkboxes/radios with icons, titles and descriptions (role
+ * pickers, plan choices, permission sets). **`exclusive`** picks single-selection (radio semantics —
+ * `value` is a `string | null` and Arrow keys rove between the cards) vs multiple (checkbox semantics —
+ * `value` is a `string[]`); defaults to `false` (multiple). Controlled (`value` + `onChange`) or
+ * uncontrolled (`defaultValue`); supply the cards via the data-driven `options` prop (`{ value, label,
+ * description?, icon?, disabled? }[]`) or as `<ChoiceCard>` children. The cards lay out on a
+ * **responsive grid** (`minCardWidth`, default `160` — as many per row as fit, wrapping below). Binds
+ * to a surrounding `<Form>` by **`name`** — the form value is a `string` when `exclusive` (validate
+ * with e.g. `z.string().min(1)`), else a `string[]` (`z.array(z.string()).min(1)`); the form's `error`
+ * reddens the card borders (no message text, like `RadioGroup`). `role="radiogroup"` / `"group"`;
+ * styling uses `--tz-*` tokens via the shared `--tz-btn-rgb` pattern.
+ */
+export declare const ChoiceCardGroup: import("react").ForwardRefExoticComponent<ChoiceCardGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ChoiceCard/ChoiceCardGroup.d.ts

@@ -0,0 +1,72 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ThemeColor } from '../../theme';
+import type { IconName } from '../../icons/names';
+import { type ChoiceCardAlign, type ChoiceCardSize } from './ChoiceCard';
+/** A single card for the data-driven `options` prop. */
+export interface ChoiceCardOption {
+    value: string;
+    /** Card title. */
+    label?: ReactNode;
+    /** Muted description line under the title. */
+    description?: ReactNode;
+    /** Leading icon in a tinted circle — a known `IconName` or any node. */
+    icon?: IconName | ReactNode;
+    disabled?: boolean;
+}
+export interface ChoiceCardGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange' | 'defaultValue'> {
+    /**
+     * Single-selection (radio semantics — the cards are native radios, `value` is a `string | null`,
+     * clicking the selected card keeps it selected) vs multiple (checkbox semantics — `value` is a
+     * `string[]`). Defaults to `false` (multiple).
+     */
+    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;
+    /**
+     * Input `name` — shared by the radios in `exclusive` mode, and the `<Form>` binding key (form value:
+     * `string` when `exclusive`, else `string[]`). Auto-generated when omitted.
+     */
+    name?: string;
+    /** Data-driven cards — an alternative to passing `<ChoiceCard>` children. */
+    options?: ChoiceCardOption[];
+    /** Group label rendered above the cards. */
+    label?: ReactNode;
+    /** Minimum card width in px — the grid fits as many per row as this allows. Defaults to `160`. */
+    minCardWidth?: number;
+    /**
+     * Content alignment for every card. `center` centers the icon + text stack; `left` anchors the same
+     * stack to the left edge (icon above left-aligned text). Omit for the smart default — cards with an
+     * icon center, icon-less cards left-align. A card's own `align` wins.
+     */
+    align?: ChoiceCardAlign;
+    /** Preset size for every card. Defaults to `md`. */
+    size?: ChoiceCardSize;
+    /** Theme palette token for the selected tint. Defaults to `primary`. */
+    color?: ThemeColor;
+    /** Marks the group invalid — reddens the card borders (no message text, like `RadioGroup`). */
+    error?: boolean;
+    /** Adds a red asterisk after the label. */
+    required?: boolean;
+    /** Disables every card in the group. */
+    disabled?: boolean;
+    /** `<ChoiceCard>` children (used when `options` is not given). */
+    children?: ReactNode;
+}
+/**
+ * A group of selectable cards — rich checkboxes/radios with icons, titles and descriptions (role
+ * pickers, plan choices, permission sets). **`exclusive`** picks single-selection (radio semantics —
+ * `value` is a `string | null` and Arrow keys rove between the cards) vs multiple (checkbox semantics —
+ * `value` is a `string[]`); defaults to `false` (multiple). Controlled (`value` + `onChange`) or
+ * uncontrolled (`defaultValue`); supply the cards via the data-driven `options` prop (`{ value, label,
+ * description?, icon?, disabled? }[]`) or as `<ChoiceCard>` children. The cards lay out on a
+ * **responsive grid** (`minCardWidth`, default `160` — as many per row as fit, wrapping below). Binds
+ * to a surrounding `<Form>` by **`name`** — the form value is a `string` when `exclusive` (validate
+ * with e.g. `z.string().min(1)`), else a `string[]` (`z.array(z.string()).min(1)`); the form's `error`
+ * reddens the card borders (no message text, like `RadioGroup`). `role="radiogroup"` / `"group"`;
+ * styling uses `--tz-*` tokens via the shared `--tz-btn-rgb` pattern.
+ */
+export declare const ChoiceCardGroup: import("react").ForwardRefExoticComponent<ChoiceCardGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ChoiceCard/choiceCardContext.d.cts

@@ -0,0 +1,21 @@
+import type { ThemeColor } from '../../theme';
+import type { ChoiceCardAlign, ChoiceCardSize } from './ChoiceCard';
+/** Shared state a `<ChoiceCardGroup>` hands down to its `<ChoiceCard>` children via context. */
+export interface ChoiceCardGroupContextValue {
+    /** Shared input `name` — in `exclusive` mode the cards are native radios and must share one. */
+    name?: string;
+    /** Single-selection (radio semantics) vs multiple (checkbox semantics). */
+    exclusive: boolean;
+    /** Whether a card's value is currently selected. */
+    isSelected: (value: string) => boolean;
+    /** Select / toggle a value — called by a child `<ChoiceCard>` on change. */
+    toggle: (value: string) => void;
+    size?: ChoiceCardSize;
+    align?: ChoiceCardAlign;
+    color?: ThemeColor;
+    disabled?: boolean;
+    error?: boolean;
+}
+export declare const ChoiceCardGroupContext: import("react").Context<ChoiceCardGroupContextValue | null>;
+/** Read the surrounding `<ChoiceCardGroup>` so a `<ChoiceCard>` can wire itself in (or `null` when standalone). */
+export declare function useChoiceCardGroupContext(): ChoiceCardGroupContextValue | null;

package/dist/components/ChoiceCard/choiceCardContext.d.ts

@@ -0,0 +1,21 @@
+import type { ThemeColor } from '../../theme';
+import type { ChoiceCardAlign, ChoiceCardSize } from './ChoiceCard';
+/** Shared state a `<ChoiceCardGroup>` hands down to its `<ChoiceCard>` children via context. */
+export interface ChoiceCardGroupContextValue {
+    /** Shared input `name` — in `exclusive` mode the cards are native radios and must share one. */
+    name?: string;
+    /** Single-selection (radio semantics) vs multiple (checkbox semantics). */
+    exclusive: boolean;
+    /** Whether a card's value is currently selected. */
+    isSelected: (value: string) => boolean;
+    /** Select / toggle a value — called by a child `<ChoiceCard>` on change. */
+    toggle: (value: string) => void;
+    size?: ChoiceCardSize;
+    align?: ChoiceCardAlign;
+    color?: ThemeColor;
+    disabled?: boolean;
+    error?: boolean;
+}
+export declare const ChoiceCardGroupContext: import("react").Context<ChoiceCardGroupContextValue | null>;
+/** Read the surrounding `<ChoiceCardGroup>` so a `<ChoiceCard>` can wire itself in (or `null` when standalone). */
+export declare function useChoiceCardGroupContext(): ChoiceCardGroupContextValue | null;

package/dist/components/ChoiceCard/index.cjs

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

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

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

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

@@ -0,0 +1,4 @@
+export { ChoiceCard, ChoiceCard as default } from './ChoiceCard';
+export type { ChoiceCardProps, ChoiceCardSize, ChoiceCardAlign } from './ChoiceCard';
+export { ChoiceCardGroup } from './ChoiceCardGroup';
+export type { ChoiceCardGroupProps, ChoiceCardOption } from './ChoiceCardGroup';

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

@@ -0,0 +1,4 @@
+export { ChoiceCard, ChoiceCard as default } from './ChoiceCard';
+export type { ChoiceCardProps, ChoiceCardSize, ChoiceCardAlign } from './ChoiceCard';
+export { ChoiceCardGroup } from './ChoiceCardGroup';
+export type { ChoiceCardGroupProps, ChoiceCardOption } from './ChoiceCardGroup';

package/dist/components/ChoiceCard/index.js

@@ -0,0 +1,7 @@
+import { C as o, a as r, C as e } from "../../ChoiceCardGroup-CvFzZlgI.js";
+export {
+  o as ChoiceCard,
+  r as ChoiceCardGroup,
+  e as default
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/CodeBlock/CodeBlock.d.cts

@@ -0,0 +1,30 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    /** The source code to render. */
+    code: string;
+    /** Shiki language id (`'tsx'`, `'json'`, `'bash'`, `'css'`, …). Defaults to `'tsx'`. */
+    language?: string;
+    /** Header line (e.g. a filename) — adds a header bar above the code with the copy button in it. */
+    title?: ReactNode;
+    /** Show a copy-to-clipboard button. Defaults to `true`. */
+    copyable?: boolean;
+    /** Show line numbers. Defaults to `false`. */
+    showLineNumbers?: boolean;
+    /** Cap the block height in px — taller code scrolls inside. */
+    maxHeight?: number;
+    /** Soft-wrap long lines instead of scrolling horizontally. Defaults to `false`. */
+    wrap?: boolean;
+}
+/**
+ * A syntax-highlighted code block with **VS Code colors** — powered by **Shiki** (an optional peer,
+ * `npm i shiki`), the actual VS Code highlighting engine, using its **`dark-plus`** theme. The block
+ * is **always dark** (in both app modes) — code reads best on a dark surface, and the deep background
+ * anchors it regardless of the surrounding light/dark theme. Highlighting is **async and lazy**
+ * (`import('shiki')` on first render); until it lands — or if `shiki` isn't installed / the language
+ * is unknown — the block shows the plain code (on the same dark surface), so nothing breaks. `title`
+ * adds a header bar (e.g. a filename); `copyable` (default `true`) shows a copy button that flips to a
+ * tick; `showLineNumbers`, `maxHeight` (scrolls inside) and `wrap` shape the body. The whole block
+ * keeps VS Code's own dark colors (a deliberate literal-color exception, like the Modal scrim); only
+ * the outer border/radius uses `--tz-*` tokens.
+ */
+export declare const CodeBlock: import("react").ForwardRefExoticComponent<CodeBlockProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,30 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    /** The source code to render. */
+    code: string;
+    /** Shiki language id (`'tsx'`, `'json'`, `'bash'`, `'css'`, …). Defaults to `'tsx'`. */
+    language?: string;
+    /** Header line (e.g. a filename) — adds a header bar above the code with the copy button in it. */
+    title?: ReactNode;
+    /** Show a copy-to-clipboard button. Defaults to `true`. */
+    copyable?: boolean;
+    /** Show line numbers. Defaults to `false`. */
+    showLineNumbers?: boolean;
+    /** Cap the block height in px — taller code scrolls inside. */
+    maxHeight?: number;
+    /** Soft-wrap long lines instead of scrolling horizontally. Defaults to `false`. */
+    wrap?: boolean;
+}
+/**
+ * A syntax-highlighted code block with **VS Code colors** — powered by **Shiki** (an optional peer,
+ * `npm i shiki`), the actual VS Code highlighting engine, using its **`dark-plus`** theme. The block
+ * is **always dark** (in both app modes) — code reads best on a dark surface, and the deep background
+ * anchors it regardless of the surrounding light/dark theme. Highlighting is **async and lazy**
+ * (`import('shiki')` on first render); until it lands — or if `shiki` isn't installed / the language
+ * is unknown — the block shows the plain code (on the same dark surface), so nothing breaks. `title`
+ * adds a header bar (e.g. a filename); `copyable` (default `true`) shows a copy button that flips to a
+ * tick; `showLineNumbers`, `maxHeight` (scrolls inside) and `wrap` shape the body. The whole block
+ * keeps VS Code's own dark colors (a deliberate literal-color exception, like the Modal scrim); only
+ * the outer border/radius uses `--tz-*` tokens.
+ */
+export declare const CodeBlock: import("react").ForwardRefExoticComponent<CodeBlockProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/CodeBlock/index.cjs

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

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

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

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

@@ -0,0 +1,2 @@
+export { CodeBlock, CodeBlock as default } from './CodeBlock';
+export type { CodeBlockProps } from './CodeBlock';

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

@@ -0,0 +1,2 @@
+export { CodeBlock, CodeBlock as default } from './CodeBlock';
+export type { CodeBlockProps } from './CodeBlock';

package/dist/components/CodeBlock/index.js

@@ -0,0 +1,6 @@
+import { C as e, C } from "../../CodeBlock-n3KExtTO.js";
+export {
+  e as CodeBlock,
+  C as default
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/ColorPicker/ColorPicker.d.cts

@@ -0,0 +1,47 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type ColorPickerSize = 'sm' | 'md' | 'lg';
+export interface ColorPickerProps {
+    /** Label rendered above the field. */
+    label?: ReactNode;
+    /** Preset size — control height, swatch and font. */
+    size?: ColorPickerSize;
+    /** Marks the field invalid: red border/ring + the `helperText` in the error color. */
+    error?: boolean;
+    /** Helper / validation text under the field. Adopts the error color while `error`. */
+    helperText?: ReactNode;
+    /** Adds a red asterisk after the label. */
+    required?: boolean;
+    /** Stretches the field to fill its container width. Defaults to `true`. */
+    fullWidth?: boolean;
+    /** Disables the field. */
+    disabled?: boolean;
+    /** Controlled value — a CSS color string: `#rrggbb` hex, or `rgba(r, g, b, a)` when translucent. */
+    value?: string;
+    /** Initial value for uncontrolled use (hex or `rgb()`/`rgba()`). */
+    defaultValue?: string;
+    /** Fires with the next color: `#rrggbb` when opaque, `rgba(r, g, b, a)` when not (or `''` when cleared). */
+    onChange?: (color: string) => void;
+    /** Quick-pick swatches shown in the popover. Defaults to a curated palette. */
+    swatches?: string[];
+    /** Form field name — auto-binds to a surrounding `<Form>` (value is the hex string). */
+    name?: string;
+    /** Placeholder shown in the trigger when no color is set. Omit to show nothing. */
+    placeholder?: string;
+    /** Id for the trigger (label association). */
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A color field with a beautiful popover picker: a saturation/value square, a hue slider, an alpha
+ * (opacity) slider, a color input, quick-pick swatches and a clear button. The input accepts hex
+ * (`#rgb`/`#rrggbb`/`#rrggbbaa`) or `rgb()`/`rgba()`, and the value comes back as `#rrggbb` when
+ * fully opaque or `rgba(r, g, b, a)` when translucent. Clicking the trigger opens the popover, which
+ * — like `Dropdown` — is portaled to `<body>`, opens below (flips above only when it would
+ * overflow), locks page scroll and re-positions on scroll/resize. Controlled (`value` + `onChange`)
+ * or uncontrolled (`defaultValue`), and binds to a surrounding `<Form>` by `name` (its form value is
+ * the color string; validate with e.g. `z.string().regex(/^#[0-9a-f]{6}$/i, 'Pick a color')`, or a
+ * looser pattern if you allow `rgba()`). Styling uses `--tz-*` tokens (the spectrum gradients and
+ * the alpha checkerboard are the unavoidable exceptions).
+ */
+export declare const ColorPicker: import("react").ForwardRefExoticComponent<ColorPickerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,47 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type ColorPickerSize = 'sm' | 'md' | 'lg';
+export interface ColorPickerProps {
+    /** Label rendered above the field. */
+    label?: ReactNode;
+    /** Preset size — control height, swatch and font. */
+    size?: ColorPickerSize;
+    /** Marks the field invalid: red border/ring + the `helperText` in the error color. */
+    error?: boolean;
+    /** Helper / validation text under the field. Adopts the error color while `error`. */
+    helperText?: ReactNode;
+    /** Adds a red asterisk after the label. */
+    required?: boolean;
+    /** Stretches the field to fill its container width. Defaults to `true`. */
+    fullWidth?: boolean;
+    /** Disables the field. */
+    disabled?: boolean;
+    /** Controlled value — a CSS color string: `#rrggbb` hex, or `rgba(r, g, b, a)` when translucent. */
+    value?: string;
+    /** Initial value for uncontrolled use (hex or `rgb()`/`rgba()`). */
+    defaultValue?: string;
+    /** Fires with the next color: `#rrggbb` when opaque, `rgba(r, g, b, a)` when not (or `''` when cleared). */
+    onChange?: (color: string) => void;
+    /** Quick-pick swatches shown in the popover. Defaults to a curated palette. */
+    swatches?: string[];
+    /** Form field name — auto-binds to a surrounding `<Form>` (value is the hex string). */
+    name?: string;
+    /** Placeholder shown in the trigger when no color is set. Omit to show nothing. */
+    placeholder?: string;
+    /** Id for the trigger (label association). */
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A color field with a beautiful popover picker: a saturation/value square, a hue slider, an alpha
+ * (opacity) slider, a color input, quick-pick swatches and a clear button. The input accepts hex
+ * (`#rgb`/`#rrggbb`/`#rrggbbaa`) or `rgb()`/`rgba()`, and the value comes back as `#rrggbb` when
+ * fully opaque or `rgba(r, g, b, a)` when translucent. Clicking the trigger opens the popover, which
+ * — like `Dropdown` — is portaled to `<body>`, opens below (flips above only when it would
+ * overflow), locks page scroll and re-positions on scroll/resize. Controlled (`value` + `onChange`)
+ * or uncontrolled (`defaultValue`), and binds to a surrounding `<Form>` by `name` (its form value is
+ * the color string; validate with e.g. `z.string().regex(/^#[0-9a-f]{6}$/i, 'Pick a color')`, or a
+ * looser pattern if you allow `rgba()`). Styling uses `--tz-*` tokens (the spectrum gradients and
+ * the alpha checkerboard are the unavoidable exceptions).
+ */
+export declare const ColorPicker: import("react").ForwardRefExoticComponent<ColorPickerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/ColorPicker/ColorPickerPanel.d.cts

@@ -0,0 +1,20 @@
+/** A pleasant default palette shown as quick-pick swatches. */
+export declare const DEFAULT_SWATCHES: string[];
+export interface ColorPickerPanelProps {
+    /** Current color — a CSS color string (`#rrggbb`, `rgba(...)`, or `''` when unset). */
+    value: string;
+    /** Fires with the next color: `#rrggbb` when opaque, `rgba(r, g, b, a)` when translucent, `''` when cleared. */
+    onChange: (color: string) => void;
+    /** Quick-pick swatches. Defaults to a curated palette. */
+    swatches?: string[];
+    /** Show the leading "no color" swatch that clears the value. Defaults to `true`. */
+    clearable?: boolean;
+}
+/**
+ * The color-picking surface — a saturation/value square, hue + alpha sliders, a color input and
+ * quick-pick swatches. Controlled by a single color `string` (`value` / `onChange`), so it drops into
+ * any popover. Working state is kept as HSV + alpha (hue survives dragging at grey/black), re-derived
+ * from `value` only on external changes. Used by `ColorPicker` (the field) and the `RichTextEditor`
+ * text-color control. Token-styled except the spectrum gradients + alpha checkerboard (literal colors).
+ */
+export declare function ColorPickerPanel({ value, onChange, swatches, clearable, }: ColorPickerPanelProps): import("react/jsx-runtime").JSX.Element;