stoop 0.0.19 → 0.1.0

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

@@ -0,0 +1,13 @@
+import { type JSX } from "react";
+import type { TabsProps } from "./types";
+/**
+ * Tabs - Tab navigation component
+ *
+ * Sharp edges design with clean tab switching
+ * Supports keyboard navigation and custom content
+ *
+ * Examples:
+ * <Tabs items={[{label: 'Tab 1', content: <div>Content 1</div>}]} />
+ * <Tabs items={tabs} defaultActive={1} variant="minimal" />
+ */
+export declare function Tabs({ css, defaultActive, items, onTabChange, variant, ...props }: TabsProps): JSX.Element;

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

@@ -0,0 +1,8 @@
+export declare const TabsStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabListStyled: 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>>;
+export declare const TabButtonStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
+    active?: boolean | "false" | "true";
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TabPanelStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { CSSObject } from "../../styles/types";
+export interface TabItem {
+    id?: string;
+    label: string;
+    content: ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps extends ComponentPropsWithoutRef<"div"> {
+    /** Array of tab items */
+    items: TabItem[];
+    /** Initially active tab index */
+    defaultActive?: number;
+    /** Tab variant */
+    variant?: "default" | "minimal";
+    /** Called when tab selection changes */
+    onTabChange?: (index: number) => void;
+    /** Custom CSS styles */
+    css?: CSSObject;
+}

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

@@ -0,0 +1,14 @@
+import type { JSX } from "react";
+import type { TextProps } from "./types";
+/**
+ * Text - Typography component
+ *
+ * Provides consistent typography with semantic HTML elements
+ * Supports size override, muted styling, and spacing props
+ *
+ * Examples:
+ * <Text as="h1">Page Title</Text>
+ * <Text as="p" size="small" muted>Subtitle</Text>
+ * <Text as="span" size="h3">Custom sized span</Text>
+ */
+export declare function Text({ as, bottom, children, css, muted, size, top, ...props }: TextProps): JSX.Element;

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

@@ -0,0 +1,4 @@
+export declare const TextStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
+    size?: boolean | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "p" | "span" | "strong";
+    muted?: boolean | "false" | "true";
+} & import("react").RefAttributes<HTMLParagraphElement>>;

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

@@ -0,0 +1,21 @@
+import type { ComponentPropsWithoutRef, ElementType } from "react";
+import type { SpacingToken } from "../../styles/theme";
+import type { CSSObject } from "../../styles/types";
+export type TextElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "strong" | "small" | "label";
+/**
+ * Text component props
+ */
+export interface TextProps extends ComponentPropsWithoutRef<"div"> {
+    /** HTML element to render as (also determines default size) */
+    as?: TextElement | ElementType;
+    /** Override the default size from 'as' prop */
+    size?: TextElement;
+    /** Apply muted styling (reduced opacity) */
+    muted?: boolean;
+    /** Add padding-top and remove margin-top */
+    top?: SpacingToken;
+    /** Add padding-bottom and remove margin-bottom */
+    bottom?: SpacingToken;
+    /** Custom CSS styles */
+    css?: CSSObject;
+}

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

@@ -0,0 +1,15 @@
+import type { JSX } from "react";
+import type { TextareaProps } from "./types";
+/**
+ * Textarea - Multi-line text input component
+ *
+ * Sharp edges design with consistent styling
+ * Supports various states and accessibility features
+ * Use cols/rows attributes for sizing
+ *
+ * Examples:
+ * <Textarea placeholder="Enter your message..." />
+ * <Textarea variant="minimal" />
+ * <Textarea disabled rows={5} cols={50} />
+ */
+export declare function Textarea({ css, variant, ...props }: TextareaProps): JSX.Element;

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

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

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

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithoutRef } from "react";
+import type { CSSObject } from "../../styles/types";
+export interface TextareaProps extends ComponentPropsWithoutRef<"textarea"> {
+    /** Textarea variant */
+    variant?: "default" | "minimal";
+    /** Whether to allow manual resizing */
+    resize?: "none" | "vertical" | "horizontal" | "both";
+    /** Custom CSS styles */
+    css?: CSSObject;
+}

package/dist/components/index.d.ts

@@ -0,0 +1,27 @@
+export { Stack } from "./Stack";
+export type { StackProps } from "./Stack/types";
+export { Section } from "./Section";
+export type { SectionProps } from "./Section/types";
+export { Text } from "./Text";
+export type { TextProps, TextElement } from "./Text/types";
+export { Button } from "./Button";
+export type { ButtonProps } from "./Button/types";
+export { Badge } from "./Badge";
+export type { BadgeProps } from "./Badge/types";
+export { Card } from "./Card";
+export type { CardProps } from "./Card/types";
+export { Input } from "./Input";
+export type { InputProps } from "./Input/types";
+export { Textarea } from "./Textarea";
+export type { TextareaProps } from "./Textarea/types";
+export { Tabs } from "./Tabs";
+export type { TabsProps, TabItem } from "./Tabs/types";
+export { Menu } from "./Menu";
+export type { MenuProps, MenuOption } from "./Menu/types";
+export { Select } from "./Select";
+export type { SelectProps, SelectOption } from "./Select/types";
+export { Popover } from "./Popover";
+export type { PopoverProps } from "./Popover/types";
+export { Modal } from "./Modal";
+export type { ModalProps } from "./Modal/types";
+export { StoopProvider } from "./Provider";

package/dist/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { useBreakpoints, type BreakpointSize } from "./useBreakpoints";
+export { usePortal } from "./usePortal";
+export { useEventListener } from "./useEventListener";
+export { useOutsideClick } from "./useOutsideClick";
+export { useFloating, type UseFloatingReturn } from "./useFloating";

package/dist/hooks/useBreakpoints.d.ts

@@ -0,0 +1,14 @@
+export type BreakpointSize = "small" | "medium" | "large";
+/**
+ * Single hook to handle all breakpoint functionality
+ * Returns: current state + helper methods for all breakpoint checks
+ */
+export declare function useBreakpoints(): {
+    current: BreakpointSize;
+    down: (size: BreakpointSize) => boolean;
+    is: (size: BreakpointSize) => boolean;
+    isLarge: boolean;
+    isMedium: boolean;
+    isSmall: boolean;
+    up: (size: BreakpointSize) => boolean;
+};

package/dist/hooks/useEventListener.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from "react";
+/**
+ * Hook for efficiently adding event listeners to elements or window
+ * Automatically handles cleanup and re-binding when dependencies change
+ */
+export declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: RefObject<HTMLElement | Window | null> | HTMLElement | Window | null, options?: boolean | AddEventListenerOptions): void;

package/dist/hooks/useFloating.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from "react";
+export interface UseFloatingReturn {
+    /** Ref for the trigger element */
+    triggerRef: RefObject<HTMLDivElement | null>;
+    /** Ref for the floating element */
+    contentRef: RefObject<HTMLDivElement | null>;
+    /** Whether floating element is open */
+    isOpen: boolean;
+    /** Whether floating element is mounted */
+    isMounted: boolean;
+    /** Open the floating element */
+    handleOpen: () => void;
+    /** Close the floating element */
+    handleClose: () => void;
+    /** Toggle the floating element */
+    handleClick: () => void;
+}
+export declare function useFloating(): UseFloatingReturn;

package/dist/hooks/useOutsideClick.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from "react";
+/**
+ * Hook for detecting clicks outside of a specific element
+ * Useful for closing dropdowns, modals, or other overlay components
+ */
+export declare function useOutsideClick<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: (event: MouseEvent | TouchEvent) => void, eventType?: "mousedown" | "mouseup" | "click" | "touchstart"): void;

package/dist/hooks/usePortal.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode, type ReactPortal } from "react";
+/**
+ * Hook for rendering content in a portal (outside the normal DOM tree)
+ * Useful for modals, tooltips, dropdowns that need to escape parent containers
+ */
+export declare function usePortal(container?: HTMLElement | string): {
+    renderPortal: (children: ReactNode) => ReactPortal | null;
+    portalElement: HTMLDivElement | null;
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./components/Provider";
+export * from "./styles";
+export * from "./hooks";
+export { Stack, Section, Text, Button, Badge, Card, Input, Textarea, Tabs, Menu, Select, Popover, Modal, StoopProvider, } from "./components";
+export { useTheme } from "./components/Provider";
+export type { StackProps, SectionProps, TextProps, TextElement, ButtonProps, BadgeProps, CardProps, InputProps, TextareaProps, TabsProps, TabItem, MenuProps, MenuOption, SelectProps, SelectOption, PopoverProps, ModalProps, } from "./components";