stoop 0.0.19 → 0.1.0

package/README.md

@@ -1,45 +1,63 @@
 # [stoop](https://github.com/dolmios/stoop)
 
-> A small component library for quickly spinning up a pretty Next.js project.
+> A lightweight, polymorphic React component library with intuitive design tokens and built-in theming system.
 
 ![Stoop Kid Steps Off](https://nomeatballs.files.wordpress.com/2012/08/stoop-kid-steps-off.png)
 
 ## Install
 
 ```sh
+npm install stoop
+# or
 bun add stoop
 ```
 
 ## Usage
 
-### Global Styles
+### Setup Provider
 
-Import the global styles in your app:
+Wrap your app with the `StoopProvider`:
 
 ```tsx
-import "stoop/globalStyles";
+import { StoopProvider } from "stoop";
+
+function App() {
+  return (
+    <StoopProvider theme="light">
+      {/* Your app content */}
+    </StoopProvider>
+  );
+}
 ```
 
 ### Using Components
 
 ```tsx
-import { Button } from "stoop";
+import { Stack, Text, Button } from "stoop";
 
 function MyComponent() {
-  return <Button>Click me</Button>;
+  return (
+    <Stack gap="medium">
+      <Text as="h1">Welcome</Text>
+      <Button>Click me</Button>
+    </Stack>
+  );
 }
 ```
 
-### Using CSS Variables
-
-The theme system provides CSS variables that you can use in your components:
+### Theme Switching
 
-```css
-.my-component {
-  color: var(--color-text);
-  background-color: var(--color-background);
-  padding: var(--space-medium);
-  border-radius: var(--radius-small);
+```tsx
+import { useTheme, Button } from "stoop";
+
+function ThemeToggle() {
+  const { themeName, setTheme } = useTheme();
+  
+  return (
+    <Button onClick={() => setTheme(themeName === 'light' ? 'dark' : 'light')}>
+      Switch to {themeName === 'light' ? 'Dark' : 'Light'}
+    </Button>
+  );
 }
 ```
 

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

@@ -0,0 +1,13 @@
+import type { JSX } from "react";
+import type { BadgeProps } from "./types";
+/**
+ * Badge - Display component for labels, status, and categories
+ *
+ * Solid color design with dark background and light text
+ * Can be clickable with hover states
+ *
+ * Examples:
+ * <Badge>New</Badge>
+ * <Badge clickable>Interactive</Badge>
+ */
+export declare function Badge({ bottom, clickable, css, top, ...props }: BadgeProps): JSX.Element;

package/dist/components/Badge/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const BadgeStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
+    clickable?: boolean | "false" | "true";
+} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/Badge/types.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentPropsWithoutRef } from "react";
+import type { SpacingToken } from "../../styles/theme";
+import type { CSSObject } from "../../styles/types";
+export interface BadgeProps extends ComponentPropsWithoutRef<"span"> {
+    /** Whether the badge is clickable */
+    clickable?: boolean;
+    /** Add margin-top */
+    top?: SpacingToken;
+    /** Add margin-bottom */
+    bottom?: SpacingToken;
+    /** Custom CSS styles */
+    css?: CSSObject;
+}

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

@@ -0,0 +1,14 @@
+import type { JSX } from "react";
+import type { ButtonProps } from "./types";
+/**
+ * Button - Interactive button component
+ *
+ * Sharp edges design with brand colors and multiple variants
+ * Supports loading states, sizing, and polymorphic rendering
+ *
+ * Examples:
+ * <Button variant="primary">Primary Action</Button>
+ * <Button variant="secondary" size="small">Secondary</Button>
+ * <Button as="a" href="/link">Link Button</Button>
+ */
+export declare function Button({ block, bottom, children, css, disabled, loading, size, top, variant, ...props }: ButtonProps): JSX.Element;

package/dist/components/Button/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const ButtonStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
+    variant?: boolean | "minimal" | "primary" | "secondary";
+    block?: boolean | "false" | "true";
+    loading?: boolean | "false" | "true";
+    size?: boolean | "small" | "normal";
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/types.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithoutRef } from "react";
+import type { SpacingToken } from "../../styles/theme";
+import type { CSSObject } from "../../styles/types";
+/**
+ * Button component props
+ */
+export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+    /** Button variant */
+    variant?: "primary" | "secondary" | "minimal";
+    /** Button size */
+    size?: "normal" | "small";
+    /** Full width button */
+    block?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Add margin-top */
+    top?: SpacingToken;
+    /** Add margin-bottom */
+    bottom?: SpacingToken;
+    /** Custom CSS styles */
+    css?: CSSObject;
+}

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

@@ -0,0 +1,14 @@
+import type { JSX } from "react";
+import type { CardProps } from "./types";
+/**
+ * Card - Container component for grouping related content
+ *
+ * Sharp edges design with multiple variants and optional header/footer
+ * Supports interactive states and flexible padding
+ *
+ * Examples:
+ * <Card variant="default">Basic card content</Card>
+ * <Card variant="bordered" header="Title">Card with header</Card>
+ * <Card clickable padding="default">Interactive card</Card>
+ */
+export declare function Card({ as, children, clickable, css, footer, header, onClick, padding, variant, ...props }: CardProps): JSX.Element;

package/dist/components/Card/styles.d.ts

@@ -0,0 +1,16 @@
+export declare const CardStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
+    variant?: boolean | "default" | "bordered";
+    padding?: boolean | "small" | "default" | "minimal";
+    clickable?: boolean | "false" | "true";
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardHeaderStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
+    padding?: boolean | "small" | "default" | "minimal";
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardFooterStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
+    padding?: boolean | "small" | "default" | "minimal";
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardContentStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
+    padding?: boolean | "small" | "default" | "minimal";
+    hasFooter?: boolean | "false" | "true";
+    hasHeader?: boolean | "false" | "true";
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Card/types.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef, ReactNode, JSX } from "react";
+import type { CSSObject } from "../../styles/types";
+export interface CardProps extends ComponentPropsWithoutRef<"div"> {
+    /** HTML element to render as */
+    as?: keyof JSX.IntrinsicElements;
+    /** Header content */
+    header?: ReactNode;
+    /** Footer content */
+    footer?: ReactNode;
+    /** Card variant */
+    variant?: "default" | "bordered";
+    /** Padding size */
+    padding?: "default" | "small" | "minimal";
+    /** Whether the card is interactive/clickable */
+    clickable?: boolean;
+    /** Custom CSS styles */
+    css?: CSSObject;
+}

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

@@ -0,0 +1,13 @@
+import { JSX } from "react";
+import type { InputProps } from "./types";
+/**
+ * Input - Form input component with clean, accessible design
+ *
+ * Sharp edges design with consistent styling and form validation support
+ * Supports all native input attributes
+ *
+ * Examples:
+ * <Input placeholder="Enter text" />
+ * <Input state="error" />
+ */
+export declare function Input({ state, ...props }: InputProps): JSX.Element;

package/dist/components/Input/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const InputStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
+    variant?: boolean | "error" | "default";
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/types.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef } from "react";
+import type { CSSObject } from "../../styles/types";
+export interface InputProps extends ComponentPropsWithoutRef<"input"> {
+    /** Input state */
+    state?: "default" | "error";
+    /** Custom CSS styles */
+    css?: CSSObject;
+}

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

@@ -0,0 +1,13 @@
+import { type JSX } from "react";
+import type { MenuProps } from "./types";
+/**
+ * Menu - Dropdown menu component with trigger and options
+ *
+ * Sharp edges design with customizable triggers and option handling
+ * Supports keyboard navigation and outside click to close
+ *
+ * Examples:
+ * <Menu trigger={<Button>Open Menu</Button>} options={menuOptions} />
+ * <Menu trigger="Click me" options={options} onSelection={handleSelect} />
+ */
+export declare function Menu({ children, css, initial, logo, onSelection, options, trigger, triggerCss, ...props }: MenuProps): JSX.Element;

package/dist/components/Menu/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const MenuTriggerStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuOverlayStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
+    variant?: boolean | "default" | "elevated";
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuItemStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
+    variant?: boolean | "default" | "danger";
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuDividerStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Menu/types.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { CSSObject } from "../../styles/types";
+export interface MenuOption {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    iconPosition?: "left" | "right";
+}
+export interface MenuProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    /** Trigger element that opens the menu */
+    trigger: ReactNode;
+    /** Array of menu options */
+    options: MenuOption[];
+    /** Initially selected option value */
+    initial?: string;
+    /** Logo or header content */
+    logo?: ReactNode;
+    /** Custom content (can be function that receives close callback) */
+    children?: ReactNode | ((close: () => void) => ReactNode);
+    /** Called when menu option is selected */
+    onSelection?: (value: string, label: string) => void;
+    /** Custom CSS for trigger */
+    triggerCss?: CSSObject;
+    /** Custom CSS for menu content */
+    css?: CSSObject;
+}

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

@@ -0,0 +1,14 @@
+import { type JSX } from "react";
+import type { ModalProps } from "./types";
+/**
+ * Modal - Overlay modal component with trigger interaction
+ *
+ * Provides a trigger element that opens a modal when clicked.
+ * Uses portal rendering and manages focus/escape behavior automatically.
+ * Includes built-in header with title and close button.
+ *
+ * Examples:
+ * <Modal trigger={<Button>Open Modal</Button>} title="My Modal">Modal content</Modal>
+ * <Modal trigger="Custom trigger" title="Settings" small>Small modal form</Modal>
+ */
+export declare function Modal({ children, css, disabled, small, title, trigger, triggerCss, ...props }: ModalProps): JSX.Element;

package/dist/components/Modal/styles.d.ts

@@ -0,0 +1,14 @@
+export declare const ModalTriggerStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
+    disabled?: boolean | "true";
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ModalBackdropStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ModalStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
+    small?: boolean | "true";
+    variant?: boolean | "default" | "bordered";
+    isOpen?: boolean | "true";
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ModalHeaderStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ModalTitleStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const ModalCloseButtonStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const ModalContentStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ModalFooterStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Modal/types.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { CSSObject } from "../../styles/types";
+export interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    /** Trigger element that opens the modal */
+    trigger: ReactNode;
+    /** Modal title displayed in header */
+    title: string;
+    /** Content to display in modal (can be function that receives close callback) */
+    children: ReactNode | ((close: () => void) => ReactNode);
+    /** Whether to use small modal size (280px vs 600px max-width) */
+    small?: boolean;
+    /** Whether the modal is disabled */
+    disabled?: boolean;
+    /** Custom CSS styles for the modal content */
+    css?: CSSObject;
+    /** Custom CSS styles for the trigger */
+    triggerCss?: CSSObject;
+}

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

@@ -0,0 +1,13 @@
+import { type JSX } from "react";
+import type { PopoverProps } from "./types";
+/**
+ * Popover - Floating content overlay with trigger interaction
+ *
+ * Provides a trigger element that opens floating content when clicked.
+ * Uses portal rendering and manages focus/escape behavior automatically.
+ *
+ * Examples:
+ * <Popover trigger={<Button>Click me</Button>}>Popover content</Popover>
+ * <Popover trigger="Custom trigger" variant="minimal">Content</Popover>
+ */
+export declare function Popover({ children, css, disabled, trigger, triggerCss, variant, ...props }: PopoverProps): JSX.Element;

package/dist/components/Popover/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const PopoverTriggerStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PopoverStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
+    variant?: boolean | "default" | "minimal";
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Popover/types.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { CSSObject } from "../../styles/types";
+export interface PopoverProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    /** Trigger element that opens the popover */
+    trigger: ReactNode;
+    /** Content to display in popover (can be function that receives close callback) */
+    children: ReactNode | ((close: () => void) => ReactNode);
+    /** Popover variant - default has padding, minimal has no padding */
+    variant?: "default" | "minimal";
+    /** Whether popover is disabled */
+    disabled?: boolean;
+    /** Custom CSS for trigger */
+    triggerCss?: CSSObject;
+    /** Custom CSS for popover content */
+    css?: CSSObject;
+}

package/dist/components/Provider/GlobalStyles.d.ts

@@ -0,0 +1,10 @@
+import type { Theme } from "../../styles/types";
+/**
+ * Generate global CSS styles based on current theme
+ */
+export declare function createGlobalStyles(theme?: Theme): string;
+/**
+ * Inject global styles into the document head with theme support
+ * Automatically removes previous styles when theme changes
+ */
+export declare function injectGlobalStyles(theme?: Theme): void;

package/dist/components/Provider/StoopProvider.d.ts

@@ -0,0 +1,41 @@
+import { type JSX, type ReactNode } from "react";
+import type { ThemeName, Theme } from "../../styles/types";
+export interface StoopProviderConfig {
+    /** Whether to inject global styles and CSS reset */
+    injectGlobalStyles?: boolean;
+    /** Custom CSS to inject */
+    customCSS?: string;
+    /** Initial theme (defaults to 'light') */
+    theme?: ThemeName;
+}
+interface StoopContextValue extends StoopProviderConfig {
+    currentTheme: Theme;
+    themeName: ThemeName;
+    toggleTheme: () => void;
+    setTheme: (theme: ThemeName) => void;
+}
+declare const StoopContext: import("react").Context<StoopContextValue>;
+export interface StoopProviderProps {
+    children: ReactNode;
+    config?: StoopProviderConfig;
+}
+/**
+ * Stoop UI Provider - Sets up global styles, configuration, and theming
+ * Wrap your app with this component to enable Stoop UI components
+ * Theme choice persists across browser sessions
+ */
+export declare function StoopProvider({ children, config, }: StoopProviderProps): JSX.Element;
+/**
+ * Hook to access Stoop UI configuration
+ */
+export declare function useStoopConfig(): StoopContextValue;
+/**
+ * Hook to access current theme and theme controls
+ */
+export declare function useTheme(): {
+    theme: Theme;
+    themeName: ThemeName;
+    toggleTheme: () => void;
+    setTheme: (theme: ThemeName) => void;
+};
+export { StoopContext };

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

@@ -0,0 +1,2 @@
+export { StoopProvider, useStoopConfig, useTheme, StoopContext, type StoopProviderProps, type StoopProviderConfig, } from "./StoopProvider";
+export { createGlobalStyles, injectGlobalStyles } from "./GlobalStyles";

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

@@ -0,0 +1,15 @@
+import type { JSX } from "react";
+import type { SectionProps } from "./types";
+/**
+ * Section - Page layout wrapper component
+ *
+ * Creates a standardized page section with optional max-width container
+ * Similar to the old View component but simplified for our design system
+ *
+ * Examples:
+ * <Section>Content with standard container</Section>
+ * <Section container={false}>Full-width content</Section>
+ * <Section wide>Wider container for app layouts</Section>
+ * <Section as="main" top="large" bottom="huge">Semantic HTML with spacing</Section>
+ */
+export declare function Section({ as, bottom, children, container, css, top, wide, ...props }: SectionProps): JSX.Element;

package/dist/components/Section/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const SectionStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLElement>>;
+export declare const ContainerStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
+    container?: boolean | "false" | "true";
+    wide?: boolean | "false" | "true";
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Section/types.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithoutRef, ElementType } from "react";
+import type { SpacingToken } from "../../styles/theme";
+import type { CSSObject } from "../../styles/types";
+/**
+ * Section component props - page layout wrapper
+ */
+export interface SectionProps extends ComponentPropsWithoutRef<"section"> {
+    /** Override the HTML element */
+    as?: ElementType;
+    /** Apply standard max-width container (default: true) */
+    container?: boolean;
+    /** Wide container for app-level layouts */
+    wide?: boolean;
+    /** Top padding using spacing tokens */
+    top?: SpacingToken;
+    /** Bottom padding using spacing tokens */
+    bottom?: SpacingToken;
+    /** Custom CSS */
+    css?: CSSObject;
+}

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

@@ -0,0 +1,13 @@
+import { type JSX } from "react";
+import type { SelectProps } from "./types";
+/**
+ * Select - Dropdown selection component with filtering and search
+ *
+ * Provides a searchable dropdown with keyboard navigation and portal rendering.
+ * Supports custom options with icons and loading states.
+ *
+ * Examples:
+ * <Select options={options} onSelection={handleSelect} />
+ * <Select options={options} filter label="Choose option" />
+ */
+export declare function Select({ css, disabled, filter, initial, label, loading, onSelection, options, trigger, triggerCss, ...props }: SelectProps): JSX.Element;

package/dist/components/Select/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const SelectTriggerStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectDropdownStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectLabelStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectFilterStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectItemStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SelectEmptyStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectLoadingStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Select/types.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { CSSObject } from "../../styles/types";
+export interface SelectOption {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    iconPosition?: "left" | "right";
+}
+export interface SelectProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    /** Trigger element that opens the select */
+    trigger: ReactNode;
+    /** Array of select options */
+    options: SelectOption[];
+    /** Initially selected option value */
+    initial?: string;
+    /** Optional label for the dropdown */
+    label?: string;
+    /** Whether to show filter/search */
+    filter?: boolean;
+    /** Whether the select is loading */
+    loading?: boolean;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Called when option is selected */
+    onSelection?: (value: string, label: string) => void;
+    /** Custom CSS for trigger */
+    triggerCss?: CSSObject;
+    /** Custom CSS for dropdown content */
+    css?: CSSObject;
+}

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

@@ -0,0 +1,16 @@
+import { JSX } from "react";
+import type { StackProps } from "./types";
+/**
+ * Stack - Comprehensive layout component
+ *
+ * Handles all flexbox layouts - replaces the need for separate Flex component
+ * Supports both container properties (direction, gap, align) and item properties (grow, shrink, basis)
+ * Can be used as any HTML element via 'as' prop
+ *
+ * Examples:
+ * <Stack direction="row" gap="large" justify="between">  // Horizontal layout
+ * <Stack align="center" textAlign="center">             // Vertical centered
+ * <Stack as="section" direction="row" minimal>          // Semantic HTML
+ * <Stack grow={1} shrink={0} basis="200px">             // As flex item
+ */
+export declare function Stack({ align, alignContent, as, basis, bottom, children, css, direction, gap, grow, inline, justify, minimal, shrink, textAlign, top, wrap, ...props }: StackProps): JSX.Element;

package/dist/components/Stack/styles.d.ts

@@ -0,0 +1,10 @@
+export declare const StackStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
+    inline?: boolean | "false" | "true";
+    alignContent?: boolean | "center" | "end" | "start" | "stretch" | "between" | "around";
+    direction?: boolean | "column" | "column-reverse" | "row" | "row-reverse";
+    textAlign?: boolean | "center" | "left" | "right" | "justify";
+    wrap?: boolean | "reverse" | "false" | "true";
+    justify?: boolean | "center" | "end" | "start" | "between" | "around" | "evenly";
+    align?: boolean | "center" | "end" | "start" | "stretch" | "baseline";
+    minimal?: boolean | "false" | "true";
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Stack/types.d.ts

@@ -0,0 +1,42 @@
+import type { ComponentPropsWithoutRef, ElementType } from "react";
+import type { SpacingToken } from "../../styles/theme";
+import type { CSSObject } from "../../styles/types";
+/**
+ * Stack component props - comprehensive layout component
+ */
+export interface StackProps extends ComponentPropsWithoutRef<"div"> {
+    /** Override the HTML element */
+    as?: ElementType;
+    /** Direction of the stack */
+    direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    /** Render as inline-flex instead of flex */
+    inline?: boolean;
+    /** Gap between items */
+    gap?: SpacingToken;
+    /** Remove default padding (useful for row direction) */
+    minimal?: boolean;
+    /** Alignment of items along cross-axis */
+    align?: "start" | "center" | "end" | "stretch" | "baseline";
+    /** Justification along main axis */
+    justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+    /** Whether items should wrap */
+    wrap?: boolean | "reverse";
+    /** Align multiple lines (when wrapped) */
+    alignContent?: "start" | "center" | "end" | "between" | "around" | "stretch";
+    /** Flex grow factor */
+    grow?: number;
+    /** Flex shrink factor */
+    shrink?: number;
+    /** Flex basis */
+    basis?: string;
+    /** Order in flex container */
+    order?: number;
+    /** Text alignment */
+    textAlign?: "left" | "center" | "right" | "justify";
+    /** Add padding-top and remove margin-top */
+    top?: SpacingToken;
+    /** Add padding-bottom and remove margin-bottom */
+    bottom?: SpacingToken;
+    /** Custom CSS */
+    css?: CSSObject;
+}