@bricks-toolkit/toolkit 0.1.0 → 0.1.2

package/dist/{components/RadioButton/RadioButton.types.d.ts → radio-button/index.d.mts}

@@ -1,7 +1,8 @@
-import type { InputHTMLAttributes, ReactNode } from 'react';
-export type RadioButtonSize = 'sm' | 'md' | 'lg';
-export type RadioButtonState = 'default' | 'error' | 'success' | 'warning';
-export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+type RadioButtonSize = 'sm' | 'md' | 'lg';
+type RadioButtonState = 'default' | 'error' | 'success' | 'warning';
+interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     /**
      * Optional label displayed next to the radio button.
      */
@@ -49,3 +50,7 @@ export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElem
      */
     helperClassName?: string;
 }
+
+declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
+
+export { RadioButton, type RadioButtonProps, type RadioButtonSize, type RadioButtonState };

package/dist/radio-button/index.d.ts

@@ -0,0 +1,56 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+type RadioButtonSize = 'sm' | 'md' | 'lg';
+type RadioButtonState = 'default' | 'error' | 'success' | 'warning';
+interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /**
+     * Optional label displayed next to the radio button.
+     */
+    label?: ReactNode;
+    /**
+     * Helper text displayed below the radio button.
+     */
+    helperText?: string;
+    /**
+     * Error message displayed when state is 'error'.
+     */
+    errorMessage?: string;
+    /**
+     * Success message displayed when state is 'success'.
+     */
+    successMessage?: string;
+    /**
+     * Warning message displayed when state is 'warning'.
+     */
+    warningMessage?: string;
+    /**
+     * The size of the radio button and label.
+     * @default 'md'
+     */
+    size?: RadioButtonSize;
+    /**
+     * The validation state of the radio button.
+     * @default 'default'
+     */
+    state?: RadioButtonState;
+    /**
+     * Additional class applied to the outer wrapper element.
+     */
+    wrapperClassName?: string;
+    /**
+     * Additional class applied to the input element itself.
+     */
+    inputClassName?: string;
+    /**
+     * Additional class applied to the label text element.
+     */
+    labelClassName?: string;
+    /**
+     * Additional class applied to the helper/state message element.
+     */
+    helperClassName?: string;
+}
+
+declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
+
+export { RadioButton, type RadioButtonProps, type RadioButtonSize, type RadioButtonState };

package/dist/radio-button/index.mjs

@@ -0,0 +1,2 @@
+export { RadioButton } from '../chunk-DN2GFJF4.mjs';
+import '../chunk-OCPFOFJ4.mjs';

package/dist/search-input/index.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var chunk7DDDQ3RH_cjs = require('../chunk-7DDDQ3RH.cjs');
+require('../chunk-XFNRKHHF.cjs');
+require('../chunk-L5VQZZVR.cjs');
+
+
+
+Object.defineProperty(exports, "SearchInput", {
+  enumerable: true,
+  get: function () { return chunk7DDDQ3RH_cjs.SearchInput; }
+});

package/dist/search-input/index.d.mts

@@ -0,0 +1,22 @@
+import { T as TextInputProps } from '../TextInput.types-DRI8HQza.mjs';
+import 'react';
+
+interface SearchInputProps extends TextInputProps {
+    /**
+     * The delay in milliseconds before the onDebouncedChange callback is called.
+     * @default 300
+     */
+    debounce?: number;
+    /**
+     * Callback function called after the debounce delay with the current input value.
+     */
+    onDebouncedChange?: (value: string) => void;
+}
+
+/**
+ * SearchInput component - A debounced input field for search functionality.
+ * Built on top of TextInput, it includes a search icon by default and handles debouncing.
+ */
+declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { SearchInput, type SearchInputProps };

package/dist/search-input/index.d.ts

@@ -0,0 +1,22 @@
+import { T as TextInputProps } from '../TextInput.types-DRI8HQza.js';
+import 'react';
+
+interface SearchInputProps extends TextInputProps {
+    /**
+     * The delay in milliseconds before the onDebouncedChange callback is called.
+     * @default 300
+     */
+    debounce?: number;
+    /**
+     * Callback function called after the debounce delay with the current input value.
+     */
+    onDebouncedChange?: (value: string) => void;
+}
+
+/**
+ * SearchInput component - A debounced input field for search functionality.
+ * Built on top of TextInput, it includes a search icon by default and handles debouncing.
+ */
+declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { SearchInput, type SearchInputProps };

package/dist/search-input/index.mjs

@@ -0,0 +1,3 @@
+export { SearchInput } from '../chunk-VHVFRWF5.mjs';
+import '../chunk-CMER5LO3.mjs';
+import '../chunk-OCPFOFJ4.mjs';

package/dist/select/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var chunk7R5JRJ2W_cjs = require('../chunk-7R5JRJ2W.cjs');
+require('../chunk-L5VQZZVR.cjs');
+
+
+
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function () { return chunk7R5JRJ2W_cjs.Select; }
+});

package/dist/{components/Select/Select.types.d.ts → select/index.d.mts}

@@ -1,13 +1,14 @@
-import type { SelectHTMLAttributes, ReactNode } from 'react';
-export type SelectVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
-export type SelectSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type SelectState = 'default' | 'error' | 'success' | 'warning';
-export interface SelectOption {
+import { SelectHTMLAttributes, ReactNode } from 'react';
+
+type SelectVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
+type SelectSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SelectState = 'default' | 'error' | 'success' | 'warning';
+interface SelectOption {
     label: string;
     value: string | number;
     disabled?: boolean;
 }
-export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
     label?: string;
     required?: boolean;
     helperText?: string;
@@ -29,3 +30,7 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
     options?: SelectOption[];
     placeholder?: string;
 }
+
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+
+export { Select, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant };

package/dist/select/index.d.ts

@@ -0,0 +1,36 @@
+import { SelectHTMLAttributes, ReactNode } from 'react';
+
+type SelectVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
+type SelectSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SelectState = 'default' | 'error' | 'success' | 'warning';
+interface SelectOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    errorMessage?: string;
+    successMessage?: string;
+    warningMessage?: string;
+    variant?: SelectVariant;
+    size?: SelectSize;
+    state?: SelectState;
+    fullWidth?: boolean;
+    leftElement?: ReactNode;
+    rightElement?: ReactNode;
+    wrapperClassName?: string;
+    inputGroupClassName?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    helperClassName?: string;
+    isLoading?: boolean;
+    options?: SelectOption[];
+    placeholder?: string;
+}
+
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+
+export { Select, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant };

package/dist/select/index.mjs

@@ -0,0 +1,2 @@
+export { Select } from '../chunk-TIVSMCXZ.mjs';
+import '../chunk-OCPFOFJ4.mjs';

package/dist/sidebar/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var chunkQ3IFXFFD_cjs = require('../chunk-Q3IFXFFD.cjs');
+require('../chunk-L5VQZZVR.cjs');
+
+
+
+Object.defineProperty(exports, "Sidebar", {
+  enumerable: true,
+  get: function () { return chunkQ3IFXFFD_cjs.Sidebar; }
+});

package/dist/{components/Sidebar/Sidebar.types.d.ts → sidebar/index.d.mts}

@@ -1,5 +1,6 @@
-import type { ReactNode, ElementType, CSSProperties } from 'react';
-export interface SidebarItem {
+import { ReactNode, ElementType, CSSProperties } from 'react';
+
+interface SidebarItem {
     id: string;
     label: string;
     icon?: ReactNode;
@@ -18,14 +19,14 @@ export interface SidebarItem {
     /** Whether the item should be hidden */
     hidden?: boolean;
 }
-export interface SidebarGroup {
+interface SidebarGroup {
     id: string;
     label?: string;
     items: SidebarItem[];
     /** Whether the group should be hidden */
     hidden?: boolean;
 }
-export interface SidebarClassNames {
+interface SidebarClassNames {
     root?: string;
     header?: string;
     content?: string;
@@ -39,7 +40,7 @@ export interface SidebarClassNames {
     itemCollapsed?: string;
     toggleButton?: string;
 }
-export interface SidebarStyles {
+interface SidebarStyles {
     root?: CSSProperties;
     header?: CSSProperties;
     content?: CSSProperties;
@@ -51,7 +52,7 @@ export interface SidebarStyles {
     itemLabel?: CSSProperties;
     toggleButton?: CSSProperties;
 }
-export interface SidebarProps {
+interface SidebarProps {
     /** Groups of navigation items to display in the sidebar. */
     groups: SidebarGroup[];
     /** Whether the sidebar is in its collapsed state. */
@@ -85,3 +86,11 @@ export interface SidebarProps {
     /** Custom render function for items */
     renderItem?: (item: SidebarItem, isCollapsed: boolean) => ReactNode;
 }
+
+interface SidebarComponent {
+    (props: SidebarProps): React.JSX.Element;
+    displayName?: string;
+}
+declare const Sidebar: SidebarComponent;
+
+export { Sidebar, type SidebarGroup, type SidebarItem, type SidebarProps };

package/dist/sidebar/index.d.ts

@@ -0,0 +1,96 @@
+import { ReactNode, ElementType, CSSProperties } from 'react';
+
+interface SidebarItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    href?: string;
+    onClick?: () => void;
+    isActive?: boolean;
+    badge?: ReactNode;
+    /** Optional component to use for the item (e.g., NavLink) */
+    component?: ElementType;
+    /** Optional props for the custom component */
+    componentProps?: Record<string, unknown>;
+    /** Optional nested items */
+    items?: SidebarItem[];
+    /** Whether the item is currently expanded (for nested items) */
+    isExpanded?: boolean;
+    /** Whether the item should be hidden */
+    hidden?: boolean;
+}
+interface SidebarGroup {
+    id: string;
+    label?: string;
+    items: SidebarItem[];
+    /** Whether the group should be hidden */
+    hidden?: boolean;
+}
+interface SidebarClassNames {
+    root?: string;
+    header?: string;
+    content?: string;
+    footer?: string;
+    group?: string;
+    groupLabel?: string;
+    item?: string;
+    itemIcon?: string;
+    itemLabel?: string;
+    itemActive?: string;
+    itemCollapsed?: string;
+    toggleButton?: string;
+}
+interface SidebarStyles {
+    root?: CSSProperties;
+    header?: CSSProperties;
+    content?: CSSProperties;
+    footer?: CSSProperties;
+    group?: CSSProperties;
+    groupLabel?: CSSProperties;
+    item?: CSSProperties;
+    itemIcon?: CSSProperties;
+    itemLabel?: CSSProperties;
+    toggleButton?: CSSProperties;
+}
+interface SidebarProps {
+    /** Groups of navigation items to display in the sidebar. */
+    groups: SidebarGroup[];
+    /** Whether the sidebar is in its collapsed state. */
+    isCollapsed?: boolean;
+    /** Callback triggered when the collapsed state changes. */
+    onToggleCollapse?: (isCollapsed: boolean) => void;
+    /** Optional logo or brand element to display at the top. */
+    logo?: ReactNode;
+    /** Optional footer content. */
+    footer?: ReactNode;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Whether to show the glass effect. */
+    glass?: boolean;
+    /** Custom width for expanded state (default: 288px / 72rem) */
+    width?: string | number;
+    /** Custom width for collapsed state (default: 80px / 20rem) */
+    collapsedWidth?: string | number;
+    /** Whether to show the built-in collapse toggle button */
+    showToggleButton?: boolean;
+    /** Position of the toggle button ('top' | 'bottom' | 'center') */
+    togglePosition?: 'top' | 'bottom' | 'center';
+    /** Placement of the sidebar */
+    position?: 'left' | 'right';
+    /** Whether icons should be centered when collapsed */
+    centerIcons?: boolean;
+    /** Deep customization of CSS classes */
+    classNames?: SidebarClassNames;
+    /** Deep customization of inline styles */
+    styles?: SidebarStyles;
+    /** Custom render function for items */
+    renderItem?: (item: SidebarItem, isCollapsed: boolean) => ReactNode;
+}
+
+interface SidebarComponent {
+    (props: SidebarProps): React.JSX.Element;
+    displayName?: string;
+}
+declare const Sidebar: SidebarComponent;
+
+export { Sidebar, type SidebarGroup, type SidebarItem, type SidebarProps };

package/dist/sidebar/index.mjs

@@ -0,0 +1,2 @@
+export { Sidebar } from '../chunk-PJH2KEWK.mjs';
+import '../chunk-OCPFOFJ4.mjs';

package/dist/skeleton/index.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var chunkS7VEND5Z_cjs = require('../chunk-S7VEND5Z.cjs');
+require('../chunk-L5VQZZVR.cjs');
+
+
+
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function () { return chunkS7VEND5Z_cjs.Skeleton; }
+});
+Object.defineProperty(exports, "SkeletonAvatar", {
+  enumerable: true,
+  get: function () { return chunkS7VEND5Z_cjs.SkeletonAvatar; }
+});
+Object.defineProperty(exports, "SkeletonCard", {
+  enumerable: true,
+  get: function () { return chunkS7VEND5Z_cjs.SkeletonCard; }
+});
+Object.defineProperty(exports, "SkeletonTable", {
+  enumerable: true,
+  get: function () { return chunkS7VEND5Z_cjs.SkeletonTable; }
+});
+Object.defineProperty(exports, "SkeletonText", {
+  enumerable: true,
+  get: function () { return chunkS7VEND5Z_cjs.SkeletonText; }
+});

package/dist/skeleton/index.d.mts

@@ -0,0 +1,76 @@
+import { HTMLAttributes } from 'react';
+
+type SkeletonVariant = 'default' | 'wave' | 'pulse';
+type SkeletonShape = 'rectangle' | 'circle' | 'rounded';
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Animation style of the skeleton. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+    /** Shape of the skeleton block. Defaults to 'rectangle'. */
+    shape?: SkeletonShape;
+    /** Explicit width (e.g. '100%', '200px'). Falls back to the element's natural width. */
+    width?: string | number;
+    /** Explicit height (e.g. '1rem', 48). Falls back to the element's natural height. */
+    height?: string | number;
+}
+interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of text lines to render. Defaults to 3. */
+    lines?: number;
+    /** Animation variant forwarded to each line. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+    /** When true the last line is shorter (≈ 60 %) to look like natural prose. Defaults to true. */
+    shortLast?: boolean;
+}
+interface SkeletonAvatarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Diameter of the avatar circle in pixels. Defaults to 40. */
+    size?: number;
+    /** Animation variant. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+}
+interface SkeletonCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Show a header image placeholder at the top of the card. Defaults to true. */
+    showImage?: boolean;
+    /** Height of the image placeholder in pixels. Defaults to 160. */
+    imageHeight?: number;
+    /** Number of text-line skeletons in the body. Defaults to 3. */
+    lines?: number;
+    /** Animation variant forwarded to all children. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+}
+interface SkeletonTableProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of rows to render. Defaults to 5. */
+    rows?: number;
+    /** Number of columns to render. Defaults to 4. */
+    columns?: number;
+    /** Animation variant. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+    /** Show a header row above the body rows. Defaults to true. */
+    showHeader?: boolean;
+}
+
+/**
+ * Primitive skeleton block. Use this as the building brick for any custom
+ * layout skeleton you need.
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Multi-line text placeholder. The last line is intentionally shorter to
+ * mimic natural prose paragraph endings.
+ */
+declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Circular avatar placeholder. Pairs naturally with SkeletonText to build
+ * user-card or comment-thread loaders.
+ */
+declare const SkeletonAvatar: React.ForwardRefExoticComponent<SkeletonAvatarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Pre-composed card skeleton mirroring the Card component structure:
+ * optional hero image → title → description lines → action bar.
+ */
+declare const SkeletonCard: React.ForwardRefExoticComponent<SkeletonCardProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Full table placeholder matching the Table component's visual grid.
+ * Renders a configurable number of column headers and body rows.
+ */
+declare const SkeletonTable: React.ForwardRefExoticComponent<SkeletonTableProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonCard, type SkeletonCardProps, type SkeletonProps, type SkeletonShape, SkeletonTable, type SkeletonTableProps, SkeletonText, type SkeletonTextProps, type SkeletonVariant };

package/dist/skeleton/index.d.ts

@@ -0,0 +1,76 @@
+import { HTMLAttributes } from 'react';
+
+type SkeletonVariant = 'default' | 'wave' | 'pulse';
+type SkeletonShape = 'rectangle' | 'circle' | 'rounded';
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Animation style of the skeleton. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+    /** Shape of the skeleton block. Defaults to 'rectangle'. */
+    shape?: SkeletonShape;
+    /** Explicit width (e.g. '100%', '200px'). Falls back to the element's natural width. */
+    width?: string | number;
+    /** Explicit height (e.g. '1rem', 48). Falls back to the element's natural height. */
+    height?: string | number;
+}
+interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of text lines to render. Defaults to 3. */
+    lines?: number;
+    /** Animation variant forwarded to each line. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+    /** When true the last line is shorter (≈ 60 %) to look like natural prose. Defaults to true. */
+    shortLast?: boolean;
+}
+interface SkeletonAvatarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Diameter of the avatar circle in pixels. Defaults to 40. */
+    size?: number;
+    /** Animation variant. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+}
+interface SkeletonCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Show a header image placeholder at the top of the card. Defaults to true. */
+    showImage?: boolean;
+    /** Height of the image placeholder in pixels. Defaults to 160. */
+    imageHeight?: number;
+    /** Number of text-line skeletons in the body. Defaults to 3. */
+    lines?: number;
+    /** Animation variant forwarded to all children. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+}
+interface SkeletonTableProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of rows to render. Defaults to 5. */
+    rows?: number;
+    /** Number of columns to render. Defaults to 4. */
+    columns?: number;
+    /** Animation variant. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+    /** Show a header row above the body rows. Defaults to true. */
+    showHeader?: boolean;
+}
+
+/**
+ * Primitive skeleton block. Use this as the building brick for any custom
+ * layout skeleton you need.
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Multi-line text placeholder. The last line is intentionally shorter to
+ * mimic natural prose paragraph endings.
+ */
+declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Circular avatar placeholder. Pairs naturally with SkeletonText to build
+ * user-card or comment-thread loaders.
+ */
+declare const SkeletonAvatar: React.ForwardRefExoticComponent<SkeletonAvatarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Pre-composed card skeleton mirroring the Card component structure:
+ * optional hero image → title → description lines → action bar.
+ */
+declare const SkeletonCard: React.ForwardRefExoticComponent<SkeletonCardProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Full table placeholder matching the Table component's visual grid.
+ * Renders a configurable number of column headers and body rows.
+ */
+declare const SkeletonTable: React.ForwardRefExoticComponent<SkeletonTableProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonCard, type SkeletonCardProps, type SkeletonProps, type SkeletonShape, SkeletonTable, type SkeletonTableProps, SkeletonText, type SkeletonTextProps, type SkeletonVariant };

package/dist/skeleton/index.mjs

@@ -0,0 +1,2 @@
+export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTable, SkeletonText } from '../chunk-32SKYPQW.mjs';
+import '../chunk-OCPFOFJ4.mjs';