@signalflare-ai/ui 0.5.0

package/dist/src/components/chart/timeseries-chart.d.ts

@@ -0,0 +1,119 @@
+import type * as echarts from "echarts/core";
+/** A single data series rendered on a `TimeseriesChart` */
+export interface TimeseriesData {
+    /** Display name shown in tooltips and legends */
+    name: string;
+    /** Array of `[timestamp_ms, value]` tuples ordered by time */
+    data: [number, number][];
+    /** Hex color string used for this series' line, bars, and legend dot */
+    color: string;
+}
+/** Props for `TimeseriesChart` */
+export interface TimeseriesChartProps {
+    /**
+     * The ECharts core instance imported by the consumer.
+     * Passed in rather than imported directly so the consumer controls which
+     * ECharts modules are bundled (tree-shaking).
+     */
+    echarts: typeof echarts;
+    /** Visual style of each series. Defaults to `"line"`. */
+    type?: "line" | "bar";
+    /** Array of time series data to display on the chart */
+    data: TimeseriesData[];
+    /** Label for the x-axis (time axis) */
+    xAxisName?: string;
+    /** Number of ticks to display on the x-axis */
+    xAxisTickCount?: number;
+    /**
+     * Custom formatter for x-axis tick labels.
+     * Receives the raw timestamp in milliseconds and returns a display string,
+     * overriding ECharts' built-in time formatting.
+     */
+    xAxisTickFormat?: (value: number) => string;
+    /**
+     * Custom formatter for y-axis tick labels.
+     * Receives the raw value and returns a display string.
+     * When omitted, ECharts' built-in formatter is used.
+     */
+    yAxisTickFormat?: (value: number) => string;
+    /**
+     * @deprecated Use `tooltipValueFormat` instead. This prop formats tooltip
+     * values, not y-axis tick labels. It will be removed in a future major version.
+     */
+    yAxisTickLabelFormat?: (value: number) => string;
+    /** Label for the y-axis (value axis) */
+    yAxisName?: string;
+    /** Number of ticks to display on the y-axis */
+    yAxisTickCount?: number;
+    /**
+     * Custom formatter for tooltip values.
+     * Receives the raw y-value and returns a display string.
+     * When omitted, the raw value is shown. Takes precedence over the
+     * deprecated `yAxisTickLabelFormat` prop.
+     */
+    tooltipValueFormat?: (value: number) => string;
+    /** Indicates incomplete data periods with optional before/after timestamps in ms */
+    incomplete?: {
+        before?: number;
+        after?: number;
+    };
+    /** Height of the chart in pixels. Defaults to `350`. */
+    height?: number;
+    /** Callback fired when user selects a time range via brush selection */
+    onTimeRangeChange?: (from: number, to: number) => void;
+    /** When `true`, switches the chart to ECharts' built-in dark theme */
+    isDarkMode?: boolean;
+    /**
+     * When `true`, renders a vertical gradient fill beneath each line series.
+     * The gradient fades from the series' color at the top to transparent at the bottom.
+     * Has no effect when `type` is `"bar"`.
+     */
+    gradient?: boolean;
+    /**
+     * When `true`, hides the chart and displays an animated sine-wave skeleton
+     * that oscillates back and forth to indicate that data is being fetched.
+     */
+    loading?: boolean;
+    /**
+     * Accessible description for screen readers. When provided, it is passed to
+     * ECharts' `aria.label.description` and announced when the chart receives
+     * focus. Consumers are responsible for writing a meaningful description —
+     * see the W3C guidance on complex images for recommendations.
+     *
+     * @see https://www.w3.org/WAI/tutorials/images/complex/
+     * @see https://echarts.apache.org/handbook/en/best-practices/aria/
+     */
+    ariaDescription?: string;
+}
+/**
+ * TimeseriesChart — a time-series line or bar chart.
+ *
+ * Built on `Chart` (Apache ECharts) with opinionated defaults for time-series data:
+ * a time-typed x-axis, dashed lines for incomplete data periods, brush-based
+ * time range selection, and automatic tooltip deduplication.
+ *
+ * @example
+ * ```tsx
+ * import * as echarts from "echarts/core";
+ * import { LineChart } from "echarts/charts";
+ * import { GridComponent, TooltipComponent, BrushComponent, ToolboxComponent } from "echarts/components";
+ * import { CanvasRenderer } from "echarts/renderers";
+ *
+ * echarts.use([LineChart, GridComponent, TooltipComponent, BrushComponent, ToolboxComponent, CanvasRenderer]);
+ *
+ * const [range, setRange] = useState<[number, number]>();
+ *
+ * <TimeseriesChart
+ *   echarts={echarts}
+ *   data={[{ name: "Requests", data: [[Date.now(), 42]], color: "#086FFF" }]}
+ *   xAxisName="Time"
+ *   xAxisTickFormat={(ts) => new Date(ts).toLocaleTimeString()}
+ *   yAxisName="Count"
+ *   yAxisTickFormat={(value) => `${value / 1000}k`}
+ *   tooltipValueFormat={(value) => `${value.toFixed(2)} req/s`}
+ *   onTimeRangeChange={(from, to) => setRange([from, to])}
+ * />
+ * ```
+ */
+export declare function TimeseriesChart({ echarts, type, data, xAxisName, xAxisTickCount, xAxisTickFormat, yAxisTickFormat, yAxisTickLabelFormat, yAxisName, yAxisTickCount, tooltipValueFormat, onTimeRangeChange, height, incomplete, isDarkMode, gradient, loading, ariaDescription, }: TimeseriesChartProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=timeseries-chart.d.ts.map

package/dist/src/components/chart/timeseries-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeseries-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/chart/timeseries-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,OAAO,MAAM,cAAc,CAAC;AAK7C,2DAA2D;AAC3D,MAAM,WAAW,cAAc;IAC7B,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IACzB,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,kCAAkC;AAClC,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACtB,wDAAwD;IACxD,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjD,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,oFAAoF;IACpF,UAAU,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,IAAa,EACb,IAAI,EACJ,SAAS,EACT,cAAc,EACd,eAAe,EACf,eAAe,EACf,oBAAoB,EACpB,SAAS,EACT,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EACjB,MAAY,EACZ,UAAU,EACV,UAAU,EACV,QAAQ,EACR,OAAO,EACP,eAAe,GAChB,EAAE,oBAAoB,2CAyPtB"}

package/dist/src/components/checkbox/checkbox.d.ts

@@ -0,0 +1,174 @@
+import { ReactNode } from 'react';
+/** Checkbox variant definitions mapping variant names to their Tailwind classes. */
+export declare const SF_CHECKBOX_VARIANTS: {
+    readonly variant: {
+        readonly default: {
+            readonly classes: "[&:focus-within>span]:ring-sf-ring [&:hover>span]:ring-sf-ring";
+            readonly description: "Default checkbox appearance";
+        };
+        readonly error: {
+            readonly classes: "[&>span]:ring-sf-danger";
+            readonly description: "Error state for validation failures";
+        };
+    };
+};
+export declare const SF_CHECKBOX_DEFAULT_VARIANTS: {
+    readonly variant: "default";
+};
+export type SFCheckboxVariant = keyof typeof SF_CHECKBOX_VARIANTS.variant;
+export interface SFCheckboxVariantsProps {
+    /**
+     * Visual variant.
+     * - `"default"` — Standard checkbox appearance
+     * - `"error"` — Error state for validation failures
+     * @default "default"
+     */
+    variant?: SFCheckboxVariant;
+}
+export declare function checkboxVariants({ variant, }?: SFCheckboxVariantsProps): string;
+export type CheckboxVariant = SFCheckboxVariant;
+/**
+ * Single checkbox component props with accessibility guidance.
+ *
+ * **Accessible Name Required:** Checkbox should have one of:
+ * 1. `label` prop (recommended) - built-in Field wrapper with horizontal layout
+ * 2. `aria-label` - for checkboxes without visible label
+ * 3. `aria-labelledby` - for custom label association
+ *
+ * **Note:** When used inside Checkbox.Group or Dropdown, label is optional (parent provides context).
+ *
+ * Missing accessible names will trigger console warnings in development (unless inside a group).
+ *
+ * @example
+ * // Recommended: Built-in Field wrapper with label
+ * <Checkbox label="Accept terms and conditions" />
+ *
+ * @example
+ * // Control-first layout (checkbox before label)
+ * <Checkbox label="Remember me" controlFirst={true} />
+ *
+ * @example
+ * // Label-first layout (label before checkbox)
+ * <Checkbox label="Enable notifications" controlFirst={false} />
+ *
+ * @example
+ * // Error variant (visual only, no error text for single checkboxes)
+ * <Checkbox label="Required field" variant="error" />
+ *
+ * @example
+ * // Without visible label (aria-label required)
+ * <Checkbox aria-label="Select all items" />
+ *
+ * @example
+ * // Custom label association
+ * <label id="terms-label">I accept the terms</label>
+ * <Checkbox aria-labelledby="terms-label" />
+ *
+ * @example
+ * // Inside Checkbox.Group (label optional)
+ * <Checkbox.Group legend="Preferences">
+ *   <Checkbox.Item value="email" label="Email notifications" />
+ *   <Checkbox.Item value="sms" label="SMS notifications" />
+ * </Checkbox.Group>
+ */
+export type CheckboxProps = {
+    /** Visual variant: "default" or "error" for validation failures (visual only, no error text) */
+    variant?: CheckboxVariant;
+    /** Label content for the checkbox (enables built-in Field wrapper) - can be a string or any React node */
+    label?: ReactNode;
+    /** Tooltip content to display next to the label via an info icon */
+    labelTooltip?: ReactNode;
+    /** When true (default), checkbox appears before label. When false, label appears before checkbox. */
+    controlFirst?: boolean;
+    /** Whether the checkbox is checked (controlled) */
+    checked?: boolean;
+    /** Whether the checkbox is in indeterminate state */
+    indeterminate?: boolean;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Callback when the checked state changes */
+    onCheckedChange?: (checked: boolean) => void;
+    /** @deprecated Use onCheckedChange instead */
+    onValueChange?: (checked: boolean) => void;
+    /** @deprecated Use onCheckedChange instead */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Click handler */
+    onClick?: (event: React.MouseEvent) => void;
+    /** Name for form submission */
+    name?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Accessible label when no visible label is provided */
+    "aria-label"?: string;
+    /** ID of element that labels this checkbox */
+    "aria-labelledby"?: string;
+};
+/**
+ * Checkbox group component props (with built-in Fieldset and CheckboxGroup)
+ *
+ * Usage:
+ * ```tsx
+ * <Checkbox.Group
+ *   legend="Choose preferences"
+ *   defaultValue={['email']}
+ *   error="You must select at least one option"
+ * >
+ *   <Checkbox.Item label="Email notifications" value="email" />
+ *   <Checkbox.Item label="SMS notifications" value="sms" />
+ * </Checkbox.Group>
+ * ```
+ */
+export interface CheckboxGroupProps {
+    /** Legend text for the group */
+    legend: string;
+    /** Child Checkbox.Item components */
+    children: ReactNode;
+    /** Error message for the group (only appears in groups, not single checkboxes) */
+    error?: string;
+    /** Helper text for the group */
+    description?: ReactNode;
+    /** Values of checkboxes that should be initially checked (uncontrolled) */
+    defaultValue?: string[];
+    /** Values of checkboxes that should be checked (controlled) */
+    value?: string[];
+    /** Event handler called when checkbox values change */
+    onValueChange?: (value: string[]) => void;
+    /** All possible checkbox values (required for parent checkbox pattern) */
+    allValues?: string[];
+    /** Whether all checkboxes in the group are disabled */
+    disabled?: boolean;
+    /** When true (default), checkbox appears before label. When false, label appears before checkbox. */
+    controlFirst?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Individual checkbox item within a group
+ */
+export type CheckboxItemProps = {
+    /** Visual variant: "default" or "error" for validation failures */
+    variant?: CheckboxVariant;
+    /** Label text displayed next to checkbox */
+    label: string;
+    /** Value of the checkbox (required when used in Checkbox.Group) */
+    value?: string;
+    /** Additional CSS classes for the label wrapper */
+    className?: string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    /** Callback when the checked state changes */
+    onCheckedChange?: (checked: boolean) => void;
+    /** @deprecated Use onCheckedChange instead */
+    onValueChange?: (checked: boolean) => void;
+    name?: string;
+};
+declare function CheckboxGroup({ legend, children, error, description, defaultValue, value, onValueChange, allValues, disabled, controlFirst, className, }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLButtonElement>> & {
+    Item: import('react').ForwardRefExoticComponent<CheckboxItemProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Group: typeof CheckboxGroup;
+};
+export {};
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/src/components/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox, SF_CHECKBOX_VARIANTS, SF_CHECKBOX_DEFAULT_VARIANTS, type CheckboxProps, type CheckboxGroupProps, type CheckboxItemProps, type SFCheckboxVariant, type CheckboxVariant, } from './checkbox';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,oBAAoB,EACpB,4BAA4B,EAC5B,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,eAAe,GACrB,MAAM,YAAY,CAAC"}

package/dist/src/components/clipboard-text/clipboard-text.d.ts

@@ -0,0 +1,86 @@
+/** ClipboardText size variant definitions mapping sizes to their Tailwind classes. */
+export declare const SF_CLIPBOARD_TEXT_VARIANTS: {
+    readonly size: {
+        readonly sm: {
+            readonly classes: "text-xs";
+            readonly buttonSize: "sm";
+            readonly description: "Small clipboard text for compact UIs";
+        };
+        readonly base: {
+            readonly classes: "text-sm";
+            readonly buttonSize: "base";
+            readonly description: "Default clipboard text size";
+        };
+        readonly lg: {
+            readonly classes: "text-sm";
+            readonly buttonSize: "lg";
+            readonly description: "Large clipboard text for prominent display";
+        };
+    };
+};
+export declare const SF_CLIPBOARD_TEXT_DEFAULT_VARIANTS: {
+    readonly size: "lg";
+};
+export type SFClipboardTextSize = keyof typeof SF_CLIPBOARD_TEXT_VARIANTS.size;
+export interface SFClipboardTextVariantsProps {
+    /**
+     * Size of the clipboard text field.
+     * - `"sm"` — Small clipboard text for compact UIs
+     * - `"base"` — Default clipboard text size
+     * - `"lg"` — Large clipboard text for prominent display
+     * @default "lg"
+     */
+    size?: SFClipboardTextSize;
+}
+export declare function clipboardTextVariants({ size, }?: SFClipboardTextVariantsProps): string;
+export type ClipboardTextSize = SFClipboardTextSize;
+/**
+ * ClipboardText component props.
+ *
+ * @example
+ * ```tsx
+ * <ClipboardText text="sk_live_abc123" />
+ * <ClipboardText text="npm install @signalflare-ai/ui" size="sm" />
+ * ```
+ */
+export interface ClipboardTextProps extends SFClipboardTextVariantsProps {
+    /** The text to display and copy to clipboard. */
+    text: string;
+    /** Additional CSS classes merged via `cn()`. */
+    className?: string;
+    /** Callback fired after text is copied to clipboard. */
+    onCopy?: () => void;
+    /**
+     * Tooltip config. Shows tooltip on hover, anchored toast on click.
+     * @example
+     * ```tsx
+     * <ClipboardText
+     *   text="abc123"
+     *   tooltip={{ text: "Copy", copiedText: "Copied!", side: "top" }}
+     * />
+     * ```
+     */
+    tooltip?: {
+        /** Text shown in tooltip on hover. @default "Copy" */
+        text?: string;
+        /** Text shown in toast after copying. @default "Copied" */
+        copiedText?: string;
+        /** Tooltip/toast placement. @default "top" */
+        side?: "top" | "bottom" | "left" | "right";
+    };
+    /** Accessible labels for i18n. */
+    labels?: {
+        /** @default "Copy to clipboard" */
+        copyAction?: string;
+    };
+}
+/**
+ * Read-only text field with a one-click copy-to-clipboard button.
+ *
+ * @example
+ * ```tsx
+ * <ClipboardText text="0c239dd2" />
+ * ```
+ */
+export declare const ClipboardText: import('react').ForwardRefExoticComponent<ClipboardTextProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=clipboard-text.d.ts.map

package/dist/src/components/clipboard-text/clipboard-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-text.d.ts","sourceRoot":"","sources":["../../../../src/components/clipboard-text/clipboard-text.tsx"],"names":[],"mappings":"AAYA,sFAAsF;AACtF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;CAkB7B,CAAC;AAEX,eAAO,MAAM,kCAAkC;;CAErC,CAAC;AAYX,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,0BAA0B,CAAC,IAAI,CAAC;AAE/E,MAAM,WAAW,4BAA4B;IAC3C;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAA8C,GAC/C,GAAE,4BAAiC,UAOnC;AAGD,MAAM,MAAM,iBAAiB,GAAG,mBAAmB,CAAC;AAEpD;;;;;;;;GAQG;AACH,MAAM,WAAW,kBAAmB,SAAQ,4BAA4B;IACtE,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE;QACR,sDAAsD;QACtD,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,2DAA2D;QAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,8CAA8C;QAC9C,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;KAC5C,CAAC;IACF,kCAAkC;IAClC,MAAM,CAAC,EAAE;QACP,mCAAmC;QACnC,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;CACH;AAwCD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,+GA+JzB,CAAC"}

package/dist/src/components/clipboard-text/index.d.ts

@@ -0,0 +1,2 @@
+export { ClipboardText } from './clipboard-text';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/clipboard-text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/clipboard-text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/src/components/code/code.d.ts

@@ -0,0 +1,165 @@
+import { CSSProperties } from 'react';
+/** Code language variant definitions. */
+export declare const SF_CODE_VARIANTS: {
+    readonly lang: {
+        readonly ts: {
+            readonly classes: "";
+            readonly description: "TypeScript code";
+        };
+        readonly tsx: {
+            readonly classes: "";
+            readonly description: "TypeScript JSX code";
+        };
+        readonly jsonc: {
+            readonly classes: "";
+            readonly description: "JSON with comments";
+        };
+        readonly bash: {
+            readonly classes: "";
+            readonly description: "Shell/Bash commands";
+        };
+        readonly css: {
+            readonly classes: "";
+            readonly description: "CSS styles";
+        };
+    };
+};
+export declare const SF_CODE_DEFAULT_VARIANTS: {
+    readonly lang: "ts";
+};
+/**
+ * Styling metadata for Code component (for AI/Figma plugin consumption)
+ */
+export declare const SF_CODE_STYLING: {
+    /** Base semantic tokens used */
+    readonly baseTokens: readonly ["text-sf-default"];
+    /** Typography and layout */
+    readonly typography: {
+        readonly fontFamily: "font-mono";
+        readonly fontSize: "text-sm";
+        readonly lineHeight: "leading-[20px]";
+    };
+    /** Container dimensions */
+    readonly dimensions: {
+        readonly margin: "m-0";
+        readonly padding: "p-0";
+        readonly width: "w-auto";
+    };
+    /** Border and background */
+    readonly appearance: {
+        readonly borderRadius: "rounded-none";
+        readonly border: "border-none";
+        readonly background: "bg-transparent";
+    };
+};
+/**
+ * Styling metadata for CodeBlock component (for AI/Figma plugin consumption)
+ */
+export declare const SF_CODEBLOCK_STYLING: {
+    /** Base semantic tokens used */
+    readonly baseTokens: readonly ["bg-sf-recessed", "border-sf-line"];
+    /** Container styling */
+    readonly container: {
+        readonly minWidth: "min-w-0";
+        readonly borderRadius: "rounded-md";
+        readonly border: "border border-sf-line";
+        readonly background: "bg-sf-recessed";
+    };
+    /** Inner code element padding */
+    readonly innerPadding: "[&>pre]:p-4";
+    /** Parsed dimensions */
+    readonly dimensions: {
+        readonly borderRadius: 6;
+        readonly padding: 16;
+    };
+};
+export type SFCodeLang = keyof typeof SF_CODE_VARIANTS.lang;
+export interface SFCodeVariantsProps {
+    /**
+     * Language hint for the code content.
+     * - `"ts"` — TypeScript code
+     * - `"tsx"` — TypeScript JSX code
+     * - `"jsonc"` — JSON with comments
+     * - `"bash"` — Shell/Bash commands
+     * - `"css"` — CSS styles
+     * @default "ts"
+     */
+    lang?: SFCodeLang;
+}
+export declare function codeVariants({ lang, }?: SFCodeVariantsProps): string;
+export type CodeLang = SFCodeLang;
+/** @deprecated Use CodeLang instead */
+export type BundledLanguage = CodeLang;
+/**
+ * Code component props.
+ *
+ * @example
+ * ```tsx
+ * <Code code="const x = 1;" lang="ts" />
+ * <Code code="export API_KEY={{apiKey}}" lang="bash"
+ *   values={{ apiKey: { value: "sk_live_123", highlight: true } }}
+ * />
+ * ```
+ */
+export interface CodeProps extends SFCodeVariantsProps {
+    /** The code string to display. */
+    code: string;
+    /** Template values for `{{key}}` interpolation. Values with `highlight: true` are visually emphasized. */
+    values?: Record<string, {
+        value: string;
+        highlight?: boolean;
+    }>;
+    /** Additional CSS classes merged via `cn()`. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+}
+/**
+ * Syntax-highlighted code component powered by sugar-high.
+ *
+ * Renders code in a monospace font with token-level syntax highlighting.
+ * For a bordered container version, use `Code.Block` or `CodeBlock`.
+ *
+ * **Styling:**
+ * - Typography: `font-mono text-sm leading-[20px]`
+ * - Colors: semantic `--sh-*` CSS variables (defined in SF theme)
+ * - No borders or padding (use CodeBlock for styled container)
+ */
+declare function CodeComponent({ code, lang, values, className, style, }: CodeProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CodeComponent {
+    var displayName: string;
+}
+/**
+ * CodeBlock component props — code inside a bordered container.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock lang="tsx" code={`const greeting = "Hello!";`} />
+ * ```
+ */
+export interface CodeBlockProps {
+    /** The code string to display. */
+    code: string;
+    /**
+     * Language hint for the code content.
+     * @default "ts"
+     */
+    lang?: CodeLang;
+}
+/**
+ * Syntax-highlighted code block with border and background container.
+ *
+ * **Styling:**
+ * - Container: `min-w-0 rounded-md border border-sf-line bg-sf-recessed`
+ * - Inner padding: `p-4` (16px)
+ */
+declare function CodeBlockComponent({ code, lang }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CodeBlockComponent {
+    var displayName: string;
+}
+export declare const Code: typeof CodeComponent & {
+    Block: typeof CodeBlockComponent;
+};
+export declare const CodeBlock: typeof CodeBlockComponent;
+export {};
+//# sourceMappingURL=code.d.ts.map

package/dist/src/components/code/code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../../../src/components/code/code.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAM3C,yCAAyC;AACzC,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;CAuBnB,CAAC;AAEX,eAAO,MAAM,wBAAwB;;CAE3B,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;IAC1B,gCAAgC;;IAEhC,4BAA4B;;;;;;IAM5B,2BAA2B;;;;;;IAM3B,4BAA4B;;;;;;CAMpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,oBAAoB;IAC/B,gCAAgC;;IAEhC,wBAAwB;;;;;;;IAOxB,iCAAiC;;IAEjC,wBAAwB;;;;;CAKhB,CAAC;AAGX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,gBAAgB,CAAC,IAAI,CAAC;AAE5D,MAAM,WAAW,mBAAmB;IAClC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,EAC3B,IAAoC,GACrC,GAAE,mBAAwB,UAK1B;AAGD,MAAM,MAAM,QAAQ,GAAG,UAAU,CAAC;AAElC,uCAAuC;AACvC,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;AAEvC;;;;;;;;;;GAUG;AACH,MAAM,WAAW,SAAU,SAAQ,mBAAmB;IACpD,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,0GAA0G;IAC1G,MAAM,CAAC,EAAE,MAAM,CACb,MAAM,EACN;QACE,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,OAAO,CAAC;KACrB,CACF,CAAC;IACF,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAqBD;;;;;;;;;;GAUG;AACH,iBAAS,aAAa,CAAC,EACrB,IAAI,EACJ,IAAoC,EACpC,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,SAAS,2CAUX;kBAhBQ,aAAa;;;AAoBtB;;;;;;;GAOG;AACH,MAAM,WAAW,cAAc;IAC7B,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED;;;;;;GAMG;AACH,iBAAS,kBAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,cAAc,2CAMzD;kBANQ,kBAAkB;;;AAW3B,eAAO,MAAM,IAAI;;CAEf,CAAC;AAGH,eAAO,MAAM,SAAS,2BAAqB,CAAC"}

package/dist/src/components/code/index.d.ts

@@ -0,0 +1,4 @@
+export { Code, CodeBlock, type CodeProps, type CodeBlockProps, type CodeLang, 
+/** @deprecated Use CodeLang instead */
+type BundledLanguage, } from './code';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/code/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/code/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,SAAS,EACT,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,QAAQ;AACb,uCAAuC;AACvC,KAAK,eAAe,GACrB,MAAM,QAAQ,CAAC"}

package/dist/src/components/collapsible/collapsible.d.ts

@@ -0,0 +1,72 @@
+import { PropsWithChildren } from 'react';
+export declare const SF_COLLAPSIBLE_VARIANTS: {};
+export declare const SF_COLLAPSIBLE_DEFAULT_VARIANTS: {};
+export interface SFCollapsibleVariantsProps {
+}
+export declare function collapsibleVariants(_props?: SFCollapsibleVariantsProps): string;
+/**
+ * Collapsible component props.
+ *
+ * @example
+ * ```tsx
+ * <Collapsible label="Show details" open={open} onOpenChange={setOpen}>
+ *   <Text>Hidden content revealed when expanded.</Text>
+ * </Collapsible>
+ * ```
+ */
+export type CollapsibleProps = PropsWithChildren<SFCollapsibleVariantsProps & {
+    /** Text label displayed in the trigger button */
+    label: string;
+    /** Whether the collapsible content is visible */
+    open?: boolean;
+    /** Callback fired when the open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional CSS classes for the content panel */
+    className?: string;
+}>;
+/**
+ * Collapsible component for showing/hiding content.
+ *
+ * Features:
+ * - Animated chevron indicator (rotates 180° when open)
+ * - Accessible with aria-expanded and aria-controls
+ * - Content panel with left border accent
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <Collapsible label="Show details" open={open} onOpenChange={setOpen}>
+ *   <Text>Hidden content revealed when expanded.</Text>
+ * </Collapsible>
+ * ```
+ *
+ * @example Controlled accordion pattern
+ * ```tsx
+ * const [activeIndex, setActiveIndex] = useState<number | null>(null);
+ *
+ * {items.map((item, i) => (
+ *   <Collapsible
+ *     key={i}
+ *     label={item.title}
+ *     open={activeIndex === i}
+ *     onOpenChange={(open) => setActiveIndex(open ? i : null)}
+ *   >
+ *     {item.content}
+ *   </Collapsible>
+ * ))}
+ * ```
+ */
+export declare const Collapsible: import('react').ForwardRefExoticComponent<SFCollapsibleVariantsProps & {
+    /** Text label displayed in the trigger button */
+    label: string;
+    /** Whether the collapsible content is visible */
+    open?: boolean;
+    /** Callback fired when the open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional CSS classes for the content panel */
+    className?: string;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=collapsible.d.ts.map

package/dist/src/components/collapsible/collapsible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../../src/components/collapsible/collapsible.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAI/E,eAAO,MAAM,uBAAuB,IAAc,CAAC;AAEnD,eAAO,MAAM,+BAA+B,IAAc,CAAC;AAE3D,MAAM,WAAW,0BAA0B;CAAG;AAE9C,wBAAgB,mBAAmB,CAAC,MAAM,GAAE,0BAA+B,UAK1E;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAC9C,0BAA0B,GAAG;IAC3B,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iDAAiD;IACjD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,WAAW;IA5CpB,iDAAiD;WAC1C,MAAM;IACb,iDAAiD;WAC1C,OAAO;IACd,iDAAiD;mBAClC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;IACtC,mDAAmD;gBACvC,MAAM;;;kDAyErB,CAAC"}