@fabio.caffarello/react-design-system 1.6.0 → 1.7.0

package/dist/ui/atoms/Button/Button.d.ts

@@ -1,6 +1,29 @@
-import type { ButtonHTMLAttributes } from "react";
-interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "regular" | "error" | "secondary";
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonVariant = 'primary' | 'regular' | 'secondary' | 'error' | 'outline' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
 }
-export default function Button({ className, variant, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+/**
+ * Button Component
+ *
+ * A styled button component with variants and sizes.
+ * Follows Atomic Design principles as an Atom component.
+ * Uses Builder Pattern for class construction.
+ *
+ * @example
+ * ```tsx
+ * <Button
+ *   variant="primary"
+ *   size="md"
+ *   onClick={handleClick}
+ * >
+ *   Click me
+ * </Button>
+ * ```
+ */
+export default function Button({ variant, size, isLoading, leftIcon, rightIcon, className, disabled, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/Button/Button.stories.d.ts

@@ -1,5 +1,13 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Button from "./Button";
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from './Button';
 declare const meta: Meta<typeof Button>;
-export declare const Primary: StoryObj<typeof Button>;
 export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Error: Story;
+export declare const Outline: Story;
+export declare const Ghost: Story;
+export declare const Sizes: Story;
+export declare const Loading: Story;
+export declare const Disabled: Story;

package/dist/ui/atoms/Checkbox/Checkbox.d.ts

@@ -0,0 +1,24 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: ReactNode;
+    error?: boolean;
+    helperText?: string;
+}
+/**
+ * Checkbox Component
+ *
+ * A styled checkbox input component.
+ * Follows Atomic Design principles as an Atom component.
+ * Uses Composite Pattern when combined with Label and ErrorMessage.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   id="terms"
+ *   label="I agree to the terms"
+ *   checked={checked}
+ *   onChange={handleChange}
+ * />
+ * ```
+ */
+export default function Checkbox({ id, label, error, helperText, className, disabled, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Checkbox from './Checkbox';
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const WithError: Story;
+export declare const Disabled: Story;
+export declare const WithoutLabel: Story;

package/dist/ui/atoms/Checkbox/Checkbox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/atoms/Collapsible/Collapsible.d.ts

@@ -0,0 +1,29 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface CollapsibleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    children: ReactNode;
+    trigger: ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    duration?: number;
+    storageKey?: string;
+}
+/**
+ * Collapsible Component
+ *
+ * A generic, reusable collapsible component for any content.
+ * Supports both controlled and uncontrolled modes.
+ * Includes smooth animations and full ARIA support.
+ *
+ * @example
+ * ```tsx
+ * <Collapsible
+ *   trigger={<button>Toggle</button>}
+ *   defaultOpen={true}
+ * >
+ *   <div>Collapsible content</div>
+ * </Collapsible>
+ * ```
+ */
+export default function Collapsible({ children, trigger, defaultOpen, open, onOpenChange, disabled, duration, storageKey, className, ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/Collapsible/Collapsible.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Collapsible from "./Collapsible";
+declare const meta: Meta<typeof Collapsible>;
+export declare const Default: StoryObj<typeof Collapsible>;
+export declare const DefaultClosed: StoryObj<typeof Collapsible>;
+export declare const Controlled: StoryObj<typeof Collapsible>;
+export declare const WithStorage: StoryObj<typeof Collapsible>;
+export declare const Disabled: StoryObj<typeof Collapsible>;
+export default meta;

package/dist/ui/atoms/Collapsible/Collapsible.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/atoms/Input/Input.d.ts

@@ -1,4 +1,28 @@
-import type { HTMLProps } from "react";
-type Props = HTMLProps<HTMLInputElement>;
-export default function Input({ className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: ReactNode;
+    error?: boolean;
+    helperText?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'outlined' | 'filled';
+}
+/**
+ * Input Component
+ *
+ * A styled text input component with label and error support.
+ * Follows Atomic Design principles as an Atom component.
+ * Uses Composite Pattern when combined with Label and ErrorMessage.
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   id="email"
+ *   label="Email"
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   error={hasError}
+ *   helperText={errorMessage}
+ * />
+ * ```
+ */
+export default function Input({ id, label, error, helperText, size, variant, className, disabled, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/Input/Input.stories.d.ts

@@ -1,5 +1,10 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Input from "./Input";
+import type { Meta, StoryObj } from '@storybook/react';
+import Input from './Input';
 declare const meta: Meta<typeof Input>;
-export declare const Primary: StoryObj<typeof Input>;
 export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Default: Story;
+export declare const WithError: Story;
+export declare const Sizes: Story;
+export declare const Variants: Story;
+export declare const Disabled: Story;

package/dist/ui/atoms/Radio/Radio.d.ts

@@ -0,0 +1,26 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: ReactNode;
+    error?: boolean;
+    helperText?: string;
+}
+/**
+ * Radio Component
+ *
+ * A styled radio input component.
+ * Follows Atomic Design principles as an Atom component.
+ * Uses Composite Pattern when combined with Label and ErrorMessage.
+ *
+ * @example
+ * ```tsx
+ * <Radio
+ *   id="option1"
+ *   name="options"
+ *   label="Option 1"
+ *   value="1"
+ *   checked={selected === "1"}
+ *   onChange={handleChange}
+ * />
+ * ```
+ */
+export default function Radio({ id, label, error, helperText, className, disabled, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/Radio/Radio.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Radio from './Radio';
+declare const meta: Meta<typeof Radio>;
+export default meta;
+type Story = StoryObj<typeof Radio>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const WithError: Story;
+export declare const Disabled: Story;
+export declare const RadioGroup: Story;

package/dist/ui/atoms/Radio/Radio.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/atoms/SidebarItem/SidebarItem.d.ts

@@ -3,6 +3,8 @@ export interface SidebarItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorEl
     href: string;
     isActive?: boolean;
     icon?: ReactNode;
+    nested?: boolean | number;
+    iconSize?: 'sm' | 'md' | 'lg';
     children: ReactNode;
 }
 /**
@@ -18,4 +20,4 @@ export interface SidebarItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorEl
  * </SidebarItem>
  * ```
  */
-export default function SidebarItem({ href, isActive, icon, children, className, ...props }: SidebarItemProps): import("react/jsx-runtime").JSX.Element;
+export default function SidebarItem({ href, isActive, icon, nested, iconSize, children, className, ...props }: SidebarItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/SidebarItem/SidebarItem.stories.d.ts

@@ -4,4 +4,7 @@ declare const meta: Meta<typeof SidebarItem>;
 export declare const Default: StoryObj<typeof SidebarItem>;
 export declare const Active: StoryObj<typeof SidebarItem>;
 export declare const WithIcon: StoryObj<typeof SidebarItem>;
+export declare const Nested: StoryObj<typeof SidebarItem>;
+export declare const NestedLevel2: StoryObj<typeof SidebarItem>;
+export declare const DifferentIconSizes: StoryObj<typeof SidebarItem>;
 export default meta;

package/dist/ui/atoms/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Info } from "./Info/Info";
 export { default as Text } from "./Text/Text";
 export { default as Input } from "./Input/Input";
+export type { InputProps } from "./Input/Input";
 export { default as Button } from "./Button/Button";
 export { default as BoxWrapper } from "./BoxWrapper/BoxWrapper";
 export { default as Badge } from "./Badge/Badge";
@@ -15,3 +16,9 @@ export { default as Skeleton } from "./Skeleton/Skeleton";
 export type { SkeletonProps } from "./Skeleton/Skeleton";
 export { default as SidebarItem } from "./SidebarItem/SidebarItem";
 export type { SidebarItemProps } from "./SidebarItem/SidebarItem";
+export { default as Collapsible } from "./Collapsible/Collapsible";
+export type { CollapsibleProps } from "./Collapsible/Collapsible";
+export { default as Checkbox } from "./Checkbox/Checkbox";
+export type { CheckboxProps } from "./Checkbox/Checkbox";
+export { default as Radio } from "./Radio/Radio";
+export type { RadioProps } from "./Radio/Radio";

package/dist/ui/hooks/useCollapsible.d.ts

@@ -0,0 +1,27 @@
+export interface UseCollapsibleOptions {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    storageKey?: string;
+}
+export interface UseCollapsibleReturn {
+    isOpen: boolean;
+    toggle: () => void;
+    setOpen: (open: boolean) => void;
+}
+/**
+ * useCollapsible Hook
+ *
+ * Reusable hook for collapsible component logic.
+ * Supports both controlled and uncontrolled modes.
+ * Optional localStorage persistence.
+ *
+ * @example
+ * ```tsx
+ * const { isOpen, toggle } = useCollapsible({
+ *   defaultOpen: true,
+ *   storageKey: 'my-collapsible-state'
+ * });
+ * ```
+ */
+export declare function useCollapsible({ defaultOpen, open, onOpenChange, storageKey, }: UseCollapsibleOptions): UseCollapsibleReturn;

package/dist/ui/index.d.ts

@@ -1,3 +1,16 @@
 export * from "./atoms";
 export * from "./molecules";
 export * from "./organisms";
+export * from "./tokens/sidebar";
+export * from "./tokens/spacing";
+export * from "./tokens/typography";
+export * from "./tokens/colors";
+export * from "./tokens/breakpoints";
+export * from "./tokens/tokens.factory";
+export * from "./tokens/themes/light";
+export * from "./tokens/themes/dark";
+export * from "./providers/ThemeProvider";
+export { getSpacingClass, getSpacing } from "./tokens/spacing";
+export { getTypographyClasses, getTypography } from "./tokens/typography";
+export { getColorClass, getColor } from "./tokens/colors";
+export { getBreakpoint, getMediaQuery } from "./tokens/breakpoints";

package/dist/ui/molecules/InputWithLabel/InputWithLabel.d.ts

@@ -1,6 +1,8 @@
 import type { HTMLProps } from "react";
-interface Props extends HTMLProps<HTMLInputElement> {
+import { type InputProps } from "../../atoms";
+interface Props extends Omit<HTMLProps<HTMLInputElement>, 'size'> {
     label: string;
+    size?: InputProps['size'];
 }
-export default function InputWithLabel({ label, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function InputWithLabel({ label, size, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/molecules/SidebarGroup/SidebarGroup.d.ts

@@ -1,7 +1,14 @@
 import type { HTMLAttributes, ReactNode } from "react";
 export interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
     title?: string;
+    titleIcon?: ReactNode;
     children: ReactNode;
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    collapsed?: boolean;
+    onCollapseChange?: (collapsed: boolean) => void;
+    storageKey?: string;
+    showChevron?: boolean;
 }
 /**
  * SidebarGroup Component
@@ -17,4 +24,4 @@ export interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
  * </SidebarGroup>
  * ```
  */
-export default function SidebarGroup({ title, children, className, ...props }: SidebarGroupProps): import("react/jsx-runtime").JSX.Element;
+export default function SidebarGroup({ title, titleIcon, children, collapsible, defaultCollapsed, collapsed, onCollapseChange, storageKey, showChevron, className, ...props }: SidebarGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/molecules/SidebarGroup/SidebarGroup.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SidebarGroup from "./SidebarGroup";
+declare const meta: Meta<typeof SidebarGroup>;
+export declare const Default: StoryObj<typeof SidebarGroup>;
+export declare const WithoutTitle: StoryObj<typeof SidebarGroup>;
+export declare const Collapsible: StoryObj<typeof SidebarGroup>;
+export declare const CollapsibleDefaultCollapsed: StoryObj<typeof SidebarGroup>;
+export declare const ControlledCollapsible: StoryObj<typeof SidebarGroup>;
+export declare const WithNestedItems: StoryObj<typeof SidebarGroup>;
+export declare const MultipleGroups: StoryObj<typeof SidebarGroup>;
+export default meta;

package/dist/ui/molecules/SidebarGroup/SidebarGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/providers/ThemeProvider.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+import { type ColorRole, type SemanticColor } from '../tokens/colors';
+import type { ThemeMode } from '../tokens/tokens.factory';
+export interface ThemeContextValue {
+    theme: ThemeMode;
+    toggleTheme: () => void;
+    setTheme: (theme: ThemeMode) => void;
+    colors: Record<ColorRole, SemanticColor>;
+    isDark: boolean;
+}
+export interface ThemeProviderProps {
+    children: ReactNode;
+    defaultTheme?: ThemeMode;
+    storageKey?: string;
+}
+/**
+ * ThemeProvider Component
+ *
+ * Provides theme context to the application.
+ * Uses Strategy Pattern for different theme strategies (light, dark).
+ * Uses Observer Pattern to notify components about theme changes.
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider defaultTheme="light">
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+export declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to use theme context
+ */
+export declare function useTheme(): ThemeContextValue;

package/dist/ui/tokens/breakpoints.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Breakpoint Tokens
+ *
+ * Responsive breakpoints for consistent media queries.
+ * Uses Factory Pattern for type-safe breakpoint creation.
+ */
+export type BreakpointName = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface BreakpointToken {
+    name: BreakpointName;
+    minWidth: number;
+    px: string;
+    rem: string;
+    tailwind: string;
+}
+/**
+ * Breakpoint Token Factory
+ * Creates breakpoint tokens with consistent values
+ */
+export declare class BreakpointTokenFactory {
+    /**
+     * Create breakpoint token
+     */
+    static create(name: BreakpointName): BreakpointToken;
+}
+/**
+ * Pre-defined breakpoint tokens
+ */
+export declare const BREAKPOINT_TOKENS: Record<BreakpointName, BreakpointToken>;
+/**
+ * Helper function to get breakpoint token
+ */
+export declare function getBreakpoint(name: BreakpointName): BreakpointToken;
+/**
+ * Helper function to create media query string
+ */
+export declare function getMediaQuery(name: BreakpointName, direction?: 'min' | 'max'): string;

package/dist/ui/tokens/colors.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Color Tokens
+ *
+ * Semantic color system for consistent theming.
+ * Uses Strategy Pattern for different color strategies (light, dark, custom).
+ */
+export type ColorRole = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+export type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+export interface ColorToken {
+    hex: string;
+    rgb: string;
+    tailwind: string;
+}
+export interface SemanticColor {
+    light: ColorToken;
+    DEFAULT: ColorToken;
+    dark: ColorToken;
+    contrast: ColorToken;
+}
+export interface ColorPalette {
+    [key: number]: ColorToken;
+}
+/**
+ * Color Strategy Interface
+ * Strategy Pattern for different color generation strategies
+ */
+export interface ColorStrategy {
+    generatePrimary(): SemanticColor;
+    generateSecondary(): SemanticColor;
+    generateSuccess(): SemanticColor;
+    generateWarning(): SemanticColor;
+    generateError(): SemanticColor;
+    generateInfo(): SemanticColor;
+    generateNeutral(): SemanticColor;
+}
+/**
+ * Light Theme Color Strategy
+ */
+export declare class LightColorStrategy implements ColorStrategy {
+    generatePrimary(): SemanticColor;
+    generateSecondary(): SemanticColor;
+    generateSuccess(): SemanticColor;
+    generateWarning(): SemanticColor;
+    generateError(): SemanticColor;
+    generateInfo(): SemanticColor;
+    generateNeutral(): SemanticColor;
+}
+/**
+ * Dark Theme Color Strategy
+ */
+export declare class DarkColorStrategy implements ColorStrategy {
+    generatePrimary(): SemanticColor;
+    generateSecondary(): SemanticColor;
+    generateSuccess(): SemanticColor;
+    generateWarning(): SemanticColor;
+    generateError(): SemanticColor;
+    generateInfo(): SemanticColor;
+    generateNeutral(): SemanticColor;
+}
+/**
+ * Color Token Factory
+ * Uses Strategy Pattern to generate colors based on theme
+ */
+export declare class ColorTokenFactory {
+    private strategy;
+    constructor(strategy: ColorStrategy);
+    /**
+     * Set color strategy
+     */
+    setStrategy(strategy: ColorStrategy): void;
+    /**
+     * Generate semantic color palette
+     */
+    generatePalette(): Record<ColorRole, SemanticColor>;
+}
+export declare const COLOR_TOKENS_LIGHT: Record<ColorRole, SemanticColor>;
+export declare const COLOR_TOKENS_DARK: Record<ColorRole, SemanticColor>;
+/**
+ * Default color tokens (light theme)
+ */
+export declare const COLOR_TOKENS: Record<ColorRole, SemanticColor>;
+/**
+ * Helper function to get color token
+ */
+export declare function getColor(role: ColorRole, shade?: 'light' | 'DEFAULT' | 'dark'): ColorToken;
+/**
+ * Helper function to get color as Tailwind class
+ */
+export declare function getColorClass(role: ColorRole, shade?: 'light' | 'DEFAULT' | 'dark', type?: 'text' | 'bg' | 'border'): string;

package/dist/ui/tokens/sidebar.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Sidebar Design Tokens
+ *
+ * Centralized tokens for sidebar components to ensure consistency
+ * and ease of maintenance. All spacing, sizing, and color values
+ * should reference these tokens.
+ */
+export declare const SIDEBAR_TOKENS: {
+    readonly icon: {
+        readonly sm: "h-4 w-4";
+        readonly md: "h-5 w-5";
+        readonly lg: "h-6 w-6";
+    };
+    readonly text: {
+        readonly xs: "text-xs";
+        readonly sm: "text-sm";
+        readonly base: "text-base";
+    };
+    readonly spacing: {
+        readonly itemPaddingX: "px-4";
+        readonly itemPaddingY: "py-2";
+        readonly nestedIndent: "pl-6";
+        readonly nestedIndentLevel2: "pl-10";
+        readonly nestedIndentLevel3: "pl-14";
+        readonly groupTitlePadding: "px-4 py-2";
+        readonly iconMargin: "mr-3";
+    };
+    readonly colors: {
+        readonly active: {
+            readonly bg: "bg-indigo-50";
+            readonly text: "text-indigo-700";
+            readonly border: "border-indigo-600";
+        };
+        readonly inactive: {
+            readonly text: "text-gray-700";
+            readonly hover: "hover:bg-gray-100 hover:text-gray-900";
+        };
+        readonly groupTitle: "text-gray-500";
+    };
+    readonly chevron: {
+        readonly size: "h-3 w-3";
+        readonly color: "text-gray-400";
+    };
+};
+/**
+ * Helper function to get nested indent class based on level
+ */
+export declare function getNestedIndentClass(level: number): string;

package/dist/ui/tokens/spacing.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Spacing Tokens
+ *
+ * Centralized spacing scale based on 4px base unit.
+ * Uses Factory Pattern for type-safe token creation.
+ */
+export type SpacingScale = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 64 | 80 | 96;
+export interface SpacingToken {
+    value: number;
+    rem: string;
+    px: string;
+    tailwind: string;
+}
+/**
+ * Spacing Token Factory
+ * Creates spacing tokens with consistent naming and values
+ */
+export declare class SpacingTokenFactory {
+    private static readonly BASE_UNIT;
+    /**
+     * Create a spacing token from scale value
+     */
+    static create(scale: SpacingScale): SpacingToken;
+    /**
+     * Get Tailwind class for spacing value
+     */
+    private static getTailwindClass;
+}
+/**
+ * Pre-defined spacing tokens
+ */
+export declare const SPACING_TOKENS: {
+    readonly none: SpacingToken;
+    readonly xs: SpacingToken;
+    readonly sm: SpacingToken;
+    readonly md: SpacingToken;
+    readonly base: SpacingToken;
+    readonly lg: SpacingToken;
+    readonly xl: SpacingToken;
+    readonly '2xl': SpacingToken;
+    readonly '3xl': SpacingToken;
+    readonly '4xl': SpacingToken;
+    readonly '5xl': SpacingToken;
+    readonly '6xl': SpacingToken;
+};
+/**
+ * Helper function to get spacing value
+ */
+export declare function getSpacing(scale: keyof typeof SPACING_TOKENS): SpacingToken;
+/**
+ * Helper function to get spacing as Tailwind class
+ */
+export declare function getSpacingClass(scale: keyof typeof SPACING_TOKENS, direction?: 'p' | 'm' | 'px' | 'mx' | 'py' | 'my' | 'pt' | 'mt' | 'pr' | 'mr' | 'pb' | 'mb' | 'pl' | 'ml'): string;