@signalflare-ai/ui 0.5.0

package/dist/src/components/filters/types.d.ts

@@ -0,0 +1,148 @@
+import { ReactNode } from 'react';
+/** Available filter field types */
+export type FilterFieldType = "text" | "select" | "multiselect" | "custom" | "separator";
+/** Filter operator definition */
+export interface FilterOperator {
+    /** Operator value/key */
+    value: string;
+    /** Display label for the operator */
+    label: string;
+}
+/** Option for select/multiselect filter fields */
+export interface FilterOption {
+    /** Option value */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Optional icon component */
+    icon?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/** Props passed to custom filter value renderers */
+export interface FilterCustomRendererProps {
+    /** Current filter values */
+    values: string[];
+    /** Callback when values change */
+    onChange: (values: string[]) => void;
+    /** Available options (if provided in field config) */
+    options?: FilterOption[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Field configuration */
+    field: FilterFieldConfig;
+    /** Current operator */
+    operator: string;
+}
+/** Configuration for a filterable field */
+export interface FilterFieldConfig {
+    /** Unique key for the field */
+    key: string;
+    /** Display label */
+    label: string;
+    /** Field type */
+    type: FilterFieldType;
+    /** Optional icon */
+    icon?: ReactNode;
+    /** Available options (for select/multiselect types) */
+    options?: FilterOption[];
+    /** Available operators (defaults based on type if not provided) */
+    operators?: FilterOperator[];
+    /** Default operator value */
+    defaultOperator?: string;
+    /** Placeholder for text inputs */
+    placeholder?: string;
+    /** Whether to show a search input in the dropdown (for select/multiselect) */
+    searchable?: boolean;
+    /** Maximum number of selections (for multiselect) */
+    maxSelections?: number;
+    /** Prefix element for text inputs */
+    prefix?: ReactNode | string;
+    /** Suffix element for text inputs */
+    suffix?: ReactNode | string;
+    /** Pattern for text validation (HTML5 pattern attribute) */
+    pattern?: string;
+    /** Custom validation function */
+    validation?: (value: string[]) => boolean | {
+        valid: boolean;
+        message?: string;
+    };
+    /** Custom renderer for the filter value editor (for "custom" type) */
+    customRenderer?: (props: FilterCustomRendererProps) => ReactNode;
+    /** Custom renderer for displaying selected values in the filter pill */
+    customValueRenderer?: (values: string[], options?: FilterOption[]) => ReactNode;
+    /** Nested fields for grouped filters */
+    fields?: FilterFieldConfig[];
+    /** Group name for categorizing fields in the add menu */
+    group?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/** An active filter instance */
+export interface Filter {
+    /** Unique filter ID */
+    id: string;
+    /** Field key this filter applies to */
+    field: string;
+    /** Selected operator */
+    operator: string;
+    /** Filter values */
+    values: string[];
+}
+/** Internationalization labels */
+export interface FilterI18nConfig {
+    /** Label for the "Add Filter" button */
+    addFilter: string;
+    /** Label for the "Clear All" button */
+    clearAll: string;
+    /** Placeholder for the field search input */
+    searchPlaceholder: string;
+    /** Message shown when no fields match search */
+    noResults: string;
+    /** Operator labels */
+    operators: Record<string, string>;
+    /** Label for filter value input */
+    valueLabel: string;
+    /** Label shown when a filter has no value */
+    noValueLabel: string;
+    /** Label for the "Remove filter" action */
+    removeFilter: string;
+    /** Label for the "Change operator" action */
+    changeOperator: string;
+    /** Label for the "Change value" action */
+    changeValue: string;
+    /** Label shown when max selections reached */
+    maxSelectionsReached: string;
+    /** Validation error message */
+    validationError: string;
+}
+/** Filters component props */
+export interface FiltersProps {
+    /** Active filters array */
+    filters: Filter[];
+    /** Available field configurations */
+    fields: FilterFieldConfig[];
+    /** Callback when filters change */
+    onChange: (filters: Filter[]) => void;
+    /** Size variant for filter pills */
+    size?: "sm" | "default" | "lg";
+    /** Custom trigger element (replaces default "Add Filter" button) */
+    trigger?: ReactNode;
+    /** Whether to show a search input in the add filter menu */
+    showSearchInput?: boolean;
+    /** Whether to allow multiple filters on the same field */
+    allowMultiple?: boolean;
+    /** Whether to enable keyboard shortcut (Cmd/Ctrl + K) to open add filter */
+    enableShortcut?: boolean;
+    /** Keyboard shortcut key (default: "k") */
+    shortcutKey?: string;
+    /** Label shown in the shortcut tooltip */
+    shortcutLabel?: string;
+    /** i18n configuration for labels */
+    i18n?: Partial<FilterI18nConfig>;
+    /** Additional CSS classes */
+    className?: string;
+    /** CSS classes for the filter menu popup */
+    menuPopupClassName?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/src/components/filters/types.d.ts.map

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

package/dist/src/components/flow/connectors.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+export interface Connector {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    isBottom?: boolean;
+}
+type PathProps = Partial<{
+    cornerRadius: number;
+    midOffset: number;
+    arrowheadOffset: number;
+    isBottom: boolean;
+    single: boolean;
+    orientation: "vertical" | "horizontal";
+}>;
+export declare function createRoundedPath({ x1, y1, x2, y2 }: {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}, { cornerRadius: maxCornerRadius, midOffset, arrowheadOffset, isBottom, single, orientation, }?: PathProps): string;
+export declare const Connectors: import('react').ForwardRefExoticComponent<{
+    connectors: Connector[];
+    children?: ReactNode;
+} & Omit<Partial<{
+    cornerRadius: number;
+    midOffset: number;
+    arrowheadOffset: number;
+    isBottom: boolean;
+    single: boolean;
+    orientation: "vertical" | "horizontal";
+}>, "isBottom"> & import('react').RefAttributes<SVGSVGElement>>;
+export {};
+//# sourceMappingURL=connectors.d.ts.map

package/dist/src/components/flow/connectors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connectors.d.ts","sourceRoot":"","sources":["../../../../src/components/flow/connectors.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAOD,KAAK,SAAS,GAAG,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;CACxC,CAAC,CAAC;AASH,wBAAgB,iBAAiB,CAC/B,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,EACtE,EACE,YAAY,EAAE,eAAmB,EACjC,SAAc,EACd,eAAmB,EACnB,QAAgB,EAChB,MAAc,EACd,WAAwB,GACzB,GAAE,SAAc,UAiGlB;AAED,eAAO,MAAM,UAAU;gBAhIT,SAAS,EAAE;eACZ,SAAS;;kBAIN,MAAM;eACT,MAAM;qBACA,MAAM;cACb,OAAO;YACT,OAAO;iBACF,UAAU,GAAG,YAAY;+DAuKvC,CAAC"}

package/dist/src/components/flow/diagram.d.ts

@@ -0,0 +1,62 @@
+import { MotionValue } from 'motion/react';
+import { ReactNode } from 'react';
+import { DescendantInfo } from './use-children';
+type Orientation = "horizontal" | "vertical";
+type Align = "start" | "center";
+interface DiagramContextValue {
+    orientation: Orientation;
+    align: Align;
+    x: MotionValue<number>;
+    y: MotionValue<number>;
+    /** Ref to the canvas viewport wrapper element */
+    wrapperRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare function useDiagramContext(): DiagramContextValue;
+interface FlowDiagramProps {
+    orientation?: Orientation;
+    /**
+     * Controls vertical alignment of nodes in horizontal orientation.
+     * - `start`: Nodes align to the top (default)
+     * - `center`: Nodes are vertically centered
+     */
+    align?: Align;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function FlowDiagram({ orientation, align, className, children, }: FlowDiagramProps): import("react/jsx-runtime").JSX.Element;
+export type RectLike = {
+    x: number;
+    y: number;
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+};
+export type NodeData = {
+    parallel?: boolean;
+    start?: RectLike | null;
+    end?: RectLike | null;
+};
+export declare const useNodeGroup: () => {
+    register: (id: string, renderOrder: number, props?: NodeData | undefined) => {
+        unregister: () => void;
+    };
+    descendants: DescendantInfo<NodeData>[];
+    claimRenderOrder: (id: string) => number;
+};
+export declare const useNode: (props: NodeData) => {
+    index: number;
+    id: string;
+    getPrevious: () => DescendantInfo<NodeData> | undefined;
+    getNext: () => DescendantInfo<NodeData> | undefined;
+};
+export declare const getNodeRect: (node: DescendantInfo<NodeData> | undefined, { type }: {
+    type?: "start" | "end";
+}) => RectLike | null;
+export declare function FlowNodeList({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=diagram.d.ts.map

package/dist/src/components/flow/diagram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagram.d.ts","sourceRoot":"","sources":["../../../../src/components/flow/diagram.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,WAAW,EAEjB,MAAM,cAAc,CAAC;AACtB,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAC;AAWxB,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAC7C,KAAK,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhC,UAAU,mBAAmB;IAC3B,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvB,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvB,iDAAiD;IACjD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACpD;AAID,wBAAgB,iBAAiB,IAAI,mBAAmB,CAMvD;AAED,UAAU,gBAAgB;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,WAA0B,EAC1B,KAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,2CAgNlB;AAID,MAAM,MAAM,QAAQ,GAAG;IACrB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;CAAmC,CAAC;AAE7D,eAAO,MAAM,OAAO,GAAI,OAAO,QAAQ;;;;;CAAwC,CAAC;AAEhF,eAAO,MAAM,WAAW,GACtB,MAAM,cAAc,CAAC,QAAQ,CAAC,GAAG,SAAS,EAC1C,UAAoB;IAAE,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAAE,KAC7C,QAAQ,GAAG,IAGb,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAuDjE"}

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

@@ -0,0 +1,26 @@
+import { FlowDiagram, FlowNodeList } from './diagram';
+import { FlowParallelNode } from './parallel';
+/**
+ * Flow - Components for visualizing workflows and data flows.
+ *
+ * @example
+ * ```tsx
+ * <Flow>
+ *   <Flow.Node>Step 1</Flow.Node>
+ *   <Flow.Node>Step 2</Flow.Node>
+ *   <Flow.Parallel>
+ *     <Flow.Node>Branch A</Flow.Node>
+ *     <Flow.Node>Branch B</Flow.Node>
+ *   </Flow.Parallel>
+ *   <Flow.Node>Step 3</Flow.Node>
+ * </Flow>
+ * ```
+ */
+declare const Flow: typeof FlowDiagram & {
+    Node: import('react').ForwardRefExoticComponent<import('./node').FlowNodeProps & import('react').RefAttributes<HTMLElement>>;
+    Parallel: typeof FlowParallelNode;
+    List: typeof FlowNodeList;
+    Anchor: import('react').ForwardRefExoticComponent<import('./node').FlowAnchorProps & import('react').RefAttributes<HTMLElement>>;
+};
+export { Flow };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/flow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE9C;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,IAAI;;;;;CAKR,CAAC;AAEH,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/src/components/flow/node.d.ts

@@ -0,0 +1,52 @@
+import { ReactElement, ReactNode } from 'react';
+/**
+ * FlowNode component props.
+ *
+ * @example Default styling
+ * ```tsx
+ * <Flow.Node>Step 1</Flow.Node>
+ * ```
+ *
+ * @example Custom render - completely replaces the default element
+ * ```tsx
+ * <Flow.Node render={<div className="custom-node">Custom content</div>} />
+ * ```
+ */
+export type FlowNodeProps = {
+    /**
+     * Custom element to render instead of the default styled node.
+     * When provided, completely replaces the default element.
+     */
+    render?: ReactElement;
+    children?: ReactNode;
+};
+export declare const FlowNode: import('react').ForwardRefExoticComponent<FlowNodeProps & import('react').RefAttributes<HTMLElement>>;
+/**
+ * FlowAnchor component props.
+ *
+ * @example Default (unstyled div)
+ * ```tsx
+ * <Flow.Anchor type="start">Anchor content</Flow.Anchor>
+ * ```
+ *
+ * @example Custom render - completely replaces the default element
+ * ```tsx
+ * <Flow.Anchor type="end" render={<span className="custom-anchor">Custom anchor</span>} />
+ * ```
+ */
+export type FlowAnchorProps = {
+    /**
+     * Determines if the anchor should serve as a "start" point for the
+     * _next_ connector or the "end" point for the _previous_ connector.
+     * When omitted, it serves as both the start and end points.
+     */
+    type?: "start" | "end";
+    /**
+     * Custom element to render instead of the default div.
+     * When provided, completely replaces the default element.
+     */
+    render?: ReactElement;
+    children?: ReactNode;
+};
+export declare const FlowAnchor: import('react').ForwardRefExoticComponent<FlowAnchorProps & import('react').RefAttributes<HTMLElement>>;
+//# sourceMappingURL=node.d.ts.map

package/dist/src/components/flow/node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../../../../src/components/flow/node.tsx"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,QAAQ,uGA6FpB,CAAC;AAaF;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,UAAU,yGA8CtB,CAAC"}

package/dist/src/components/flow/parallel.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare function FlowParallelNode({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=parallel.d.ts.map

package/dist/src/components/flow/parallel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parallel.d.ts","sourceRoot":"","sources":["../../../../src/components/flow/parallel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA0DxD,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAqKrE"}

package/dist/src/components/flow/use-children.d.ts

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react';
+export type DescendantInfo<T = Record<string, unknown>> = {
+    id: string;
+    props: T;
+    renderOrder: number;
+};
+type DescendantsContextType<DescendantType = Record<string, unknown>> = {
+    register: (id: string, renderOrder: number, props?: DescendantType) => {
+        unregister: () => void;
+    };
+    descendants: DescendantInfo<DescendantType>[];
+    claimRenderOrder: (id: string) => number;
+};
+/**
+ * Hook that manages descendant registration and provides access to all registered descendants.
+ * This hook contains all the logic for tracking and managing descendants.
+ *
+ * @returns The descendants context value with register function and descendants array
+ */
+export declare function useDescendants<DescendantType extends Record<string, unknown>>(): DescendantsContextType<DescendantType>;
+type DescendantsProviderProps<T extends Record<string, unknown>> = {
+    value: DescendantsContextType<T>;
+    children: ReactNode;
+};
+export declare function DescendantsProvider<T extends Record<string, unknown>>({ value, children, }: DescendantsProviderProps<T>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the descendants context from within a DescendantsProvider.
+ * This allows callers to access the descendants data and register function.
+ *
+ * @returns The descendants context value
+ * @throws Error if used outside of DescendantsProvider
+ */
+export declare function useDescendantsContext<T extends Record<string, unknown>>(): DescendantsContextType<T>;
+/**
+ * Hook that allows a descendant component to register itself with a parent
+ * and returns the index of the descendant in the parent's list.
+ *
+ * @example
+ * ```tsx
+ * function Parent() {
+ *   return (
+ *     <DescendantsProvider>
+ *       <Descendant />
+ *       <Descendant />
+ *       <Descendant />
+ *     </DescendantsProvider>
+ *   );
+ * }
+ *
+ * function Descendant() {
+ *   const index = useDescendantIndex();
+ *   return <div>I am descendant {index}</div>;
+ * }
+ *
+ * // With props
+ * function Descendant() {
+ *   const index = useDescendantIndex({ name: "Descendant 1", type: "primary" });
+ *   return <div>I am descendant {index}</div>;
+ * }
+ * ```
+ */
+export declare function useDescendantIndex<T extends Record<string, unknown>>(props?: T): {
+    index: number;
+    id: string;
+    getPrevious: () => DescendantInfo<T> | undefined;
+    getNext: () => DescendantInfo<T> | undefined;
+};
+export {};
+//# sourceMappingURL=use-children.d.ts.map

package/dist/src/components/flow/use-children.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-children.d.ts","sourceRoot":"","sources":["../../../../src/components/flow/use-children.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACxD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,CAAC,CAAC;IACT,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,sBAAsB,CAAC,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACtE,QAAQ,EAAE,CACR,EAAE,EAAE,MAAM,EACV,WAAW,EAAE,MAAM,EACnB,KAAK,CAAC,EAAE,cAAc,KACnB;QAAE,UAAU,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChC,WAAW,EAAE,cAAc,CAAC,cAAc,CAAC,EAAE,CAAC;IAC9C,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1C,CAAC;AAYF;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC3C,sBAAsB,CAAC,cAAc,CAAC,CAqE1C;AAMD,KAAK,wBAAwB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACjE,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC;IACjC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EACrE,KAAK,EACL,QAAQ,GACT,EAAE,wBAAwB,CAAC,CAAC,CAAC,2CAQ7B;AAMD;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC9B,sBAAsB,CAAC,CAAC,CAAC,CAU7B;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAKH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,KAAK,CAAC,EAAE,CAAC;;;uBAsC2B,cAAc,CAAC,CAAC,CAAC,GAAG,SAAS;mBAKjC,cAAc,CAAC,CAAC,CAAC,GAAG,SAAS;EAM9D"}

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

@@ -0,0 +1,135 @@
+import { default as React } from 'react';
+/** Grid variant and gap definitions mapping layout names to their responsive Tailwind classes. */
+export declare const SF_GRID_VARIANTS: {
+    readonly variant: {
+        readonly "2up": {
+            readonly classes: "grid-cols-1 md:grid-cols-2";
+            readonly description: "Grid items stack on small screens, display side-by-side on medium screens and up";
+        };
+        readonly "side-by-side": {
+            readonly classes: "grid-cols-2";
+            readonly description: "Grid items always displayed side-by-side";
+        };
+        readonly "2-1": {
+            readonly classes: "grid-cols-1 md:grid-cols-[2fr_1fr]";
+            readonly description: "Two-thirds / one-third split (66%/33%) on medium screens and up";
+        };
+        readonly "1-2": {
+            readonly classes: "grid-cols-1 md:grid-cols-[1fr_2fr]";
+            readonly description: "One-third / two-thirds split (33%/66%) on medium screens and up";
+        };
+        readonly "1-3up": {
+            readonly classes: "grid-cols-1 lg:grid-cols-3";
+            readonly description: "Grid items stack on small screens, expand to 3 across on large screens";
+        };
+        readonly "3up": {
+            readonly classes: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
+            readonly description: "Grid items stack on small screens, 2 across on medium, 3 across on large";
+        };
+        readonly "4up": {
+            readonly classes: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4";
+            readonly description: "Grid items stack on small screens, progressively increase columns at larger breakpoints";
+        };
+        readonly "6up": {
+            readonly classes: "grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
+            readonly description: "Grid items start at 2 across, expand to 6 across on XL";
+        };
+        readonly "1-2-4up": {
+            readonly classes: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4";
+            readonly description: "Grid items stack on small screens, 2 across on medium, 4 across on large";
+        };
+    };
+    readonly gap: {
+        readonly none: {
+            readonly classes: "gap-0";
+            readonly description: "No gap between grid items";
+        };
+        readonly sm: {
+            readonly classes: "gap-3";
+            readonly description: "Small gap between grid items";
+        };
+        readonly base: {
+            readonly classes: "gap-2 md:gap-6 lg:gap-8";
+            readonly description: "Default responsive gap between grid items";
+        };
+        readonly lg: {
+            readonly classes: "gap-8";
+            readonly description: "Large gap between grid items";
+        };
+    };
+};
+export declare const SF_GRID_DEFAULT_VARIANTS: {
+    readonly gap: "base";
+};
+export type SFGridVariant = keyof typeof SF_GRID_VARIANTS.variant;
+export type SFGridGap = keyof typeof SF_GRID_VARIANTS.gap;
+/**
+ * Grid component props.
+ *
+ * @example
+ * ```tsx
+ * <Grid variant="3up" gap="sm">
+ *   <GridItem><Surface className="p-4">1</Surface></GridItem>
+ *   <GridItem><Surface className="p-4">2</Surface></GridItem>
+ *   <GridItem><Surface className="p-4">3</Surface></GridItem>
+ * </Grid>
+ * ```
+ */
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Grid items to render. */
+    children?: React.ReactNode;
+    /** Additional CSS classes merged via `cn()`. */
+    className?: string;
+    /** Show dividers between grid items on mobile (only works with `"4up"` variant). */
+    mobileDivider?: boolean;
+    /**
+     * Gap size between grid items.
+     * - `"none"` — No gap
+     * - `"sm"` — 12px gap
+     * - `"base"` — Responsive gap (8px → 24px → 32px)
+     * - `"lg"` — 32px gap
+     * @default "base"
+     */
+    gap?: SFGridGap;
+    /**
+     * Responsive column layout variant.
+     * - `"2up"` — 1 col → 2 cols at md
+     * - `"side-by-side"` — Always 2 cols
+     * - `"2-1"` — 66%/33% split at md
+     * - `"1-2"` — 33%/66% split at md
+     * - `"3up"` — 1 → 2 → 3 cols
+     * - `"4up"` — 1 → 2 → 3 → 4 cols
+     * - `"6up"` — 2 → 3 → 4 → 6 cols
+     * - `"1-2-4up"` — 1 → 2 → 4 cols
+     */
+    variant?: SFGridVariant;
+}
+/** GridItem component props — a single cell within a Grid. */
+export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Content for this grid cell. */
+    children?: React.ReactNode;
+    /** Additional CSS classes merged via `cn()`. */
+    className?: string;
+}
+export declare function gridVariants({ variant, gap, }?: {
+    variant?: SFGridVariant;
+    gap?: SFGridGap;
+}): string;
+export declare function gridItemVariants({ variant, mobileDivider, }?: {
+    variant?: SFGridVariant;
+    mobileDivider?: boolean;
+}): string;
+/**
+ * Responsive CSS grid layout container with preset column configurations.
+ *
+ * @example
+ * ```tsx
+ * <Grid variant="2up" gap="base">
+ *   <GridItem>Left</GridItem>
+ *   <GridItem>Right</GridItem>
+ * </Grid>
+ * ```
+ */
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+export declare const GridItem: React.ForwardRefExoticComponent<GridItemProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../src/components/grid/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,kGAAkG;AAClG,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEnB,CAAC;AAEX,eAAO,MAAM,wBAAwB;;CAE3B,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,gBAAgB,CAAC,OAAO,CAAC;AAClE,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,gBAAgB,CAAC,GAAG,CAAC;AAE1D;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,8DAA8D;AAC9D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,kCAAkC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,GAAkC,GACnC,GAAE;IACD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,GAAG,CAAC,EAAE,SAAS,CAAC;CACZ,UAML;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,aAAa,GACd,GAAE;IACD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CACpB,UAML;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,IAAI,kFAwBhB,CAAC;AAIF,eAAO,MAAM,QAAQ,sFAcpB,CAAC"}

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

@@ -0,0 +1,2 @@
+export { Grid, GridItem, gridVariants, gridItemVariants, SF_GRID_VARIANTS, SF_GRID_DEFAULT_VARIANTS, type GridProps, type GridItemProps, type SFGridVariant, type SFGridGap, } from './grid';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/grid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,wBAAwB,EACxB,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,SAAS,GACf,MAAM,QAAQ,CAAC"}

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

@@ -0,0 +1,4 @@
+export { Input, inputVariants, type InputProps } from './input';
+export { InputArea, Textarea, type InputAreaProps } from './input-area';
+export { InputGroup } from './input-group';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/src/components/input/input-area.d.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+import { FieldErrorMatch } from '../field/field';
+import * as React from "react";
+export declare const InputArea: React.ForwardRefExoticComponent<{
+    onValueChange?: (value: string) => void;
+    variant?: "default" | "error";
+    size?: "xs" | "sm" | "base" | "lg";
+    children?: React.ReactNode;
+    className?: string;
+    /** Label content for the textarea (enables 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;
+    /** Helper text displayed below the textarea */
+    description?: ReactNode;
+    /** Error message or validation error object */
+    error?: string | {
+        message: ReactNode;
+        match: FieldErrorMatch;
+    };
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & React.RefAttributes<HTMLTextAreaElement>>;
+/** Alias for InputArea — provided for discoverability when migrating from other libraries */
+export declare const Textarea: React.ForwardRefExoticComponent<{
+    onValueChange?: (value: string) => void;
+    variant?: "default" | "error";
+    size?: "xs" | "sm" | "base" | "lg";
+    children?: React.ReactNode;
+    className?: string;
+    /** Label content for the textarea (enables 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;
+    /** Helper text displayed below the textarea */
+    description?: ReactNode;
+    /** Error message or validation error object */
+    error?: string | {
+        message: ReactNode;
+        match: FieldErrorMatch;
+    };
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & React.RefAttributes<HTMLTextAreaElement>>;
+/**
+ * InputArea component props
+ * @property {ReactNode} [label] - Label content for the textarea (enables Field wrapper)
+ * @property {ReactNode} [description] - Helper text displayed below the textarea
+ * @property {string | { message: ReactNode, match: FieldErrorMatch }} [error] - Error message or validation error object
+ */
+export type InputAreaProps = {
+    onValueChange?: (value: string) => void;
+    variant?: "default" | "error";
+    size?: "xs" | "sm" | "base" | "lg";
+    children?: React.ReactNode;
+    className?: string;
+    /** Label content for the textarea (enables 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;
+    /** Helper text displayed below the textarea */
+    description?: ReactNode;
+    /** Error message or validation error object */
+    error?: string | {
+        message: ReactNode;
+        match: FieldErrorMatch;
+    };
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">;
+//# sourceMappingURL=input-area.d.ts.map