@kjaniec-dev/ui 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,281 @@
+import { ClassValue } from 'clsx';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Merge class names with Tailwind-aware conflict resolution.
+ * `cn("px-2", condition && "px-4")` → keeps the last conflicting utility.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "danger" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Shows a spinner and disables interaction. */
+    loading?: boolean;
+    /** Icon rendered before the label. */
+    leadingIcon?: React.ReactNode;
+    /** Icon rendered after the label. */
+    trailingIcon?: React.ReactNode;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "primary" | "danger" | "neutral" | "success" | "warning" | "info" | "solid" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+    /** Render a leading status dot. */
+    dot?: boolean;
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+declare const alertVariants: (props?: ({
+    variant?: "danger" | "success" | "warning" | "info" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof alertVariants> {
+    /** Optional leading icon (e.g. an SVG). Inherits the variant color. */
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+}
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+
+interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Diameter in px. Default 24. */
+    size?: number;
+}
+declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 0–100. */
+    value?: number;
+    tone?: "primary" | "secondary";
+}
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** Visual error state (red border + ring). */
+    error?: boolean;
+    /** Icon shown inside the field, leading edge. */
+    leadingIcon?: React.ReactNode;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    error?: boolean;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /** Append a red required marker. */
+    required?: boolean;
+}
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+interface HintProps extends React.HTMLAttributes<HTMLSpanElement> {
+    error?: boolean;
+}
+declare const Hint: React.ForwardRefExoticComponent<HintProps & React.RefAttributes<HTMLSpanElement>>;
+/** Vertical label + control + hint group. */
+declare const Field: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    error?: boolean;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+
+interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: React.ReactNode;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: React.ReactNode;
+}
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+
+interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: React.ReactNode;
+}
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+
+type SliderProps = React.InputHTMLAttributes<HTMLInputElement>;
+/**
+ * Range slider styled with the kit's primary token. Thumb styling lives in a
+ * scoped <style> tag because pseudo-elements (::-webkit-slider-thumb) can't be
+ * expressed as Tailwind utilities.
+ */
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
+/** Inject once near the app root (or rely on the package stylesheet). */
+declare const sliderThumbCSS = "\n.kj-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:9999px;background:var(--kj-primary);border:3px solid var(--kj-surface);box-shadow:var(--kj-shadow-sm);cursor:pointer}\n.kj-slider::-moz-range-thumb{width:18px;height:18px;border-radius:9999px;background:var(--kj-primary);border:3px solid var(--kj-surface);box-shadow:var(--kj-shadow-sm);cursor:pointer}\n";
+
+interface SegmentedOption<T extends string> {
+    value: T;
+    label: React.ReactNode;
+}
+interface SegmentedProps<T extends string> {
+    options: SegmentedOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    className?: string;
+    "aria-label"?: string;
+}
+/** Segmented control / single-select toggle group. Controlled. */
+declare function Segmented<T extends string>({ options, value, onChange, className, ...props }: SegmentedProps<T>): react_jsx_runtime.JSX.Element;
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Drop the border + heavier shadow for a floating look. */
+    elevated?: boolean;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+/** Body region with default padding. */
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+interface StatProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    /** e.g. "+12.3% mdm" */
+    delta?: React.ReactNode;
+    trend?: "up" | "down";
+}
+declare const Stat: React.ForwardRefExoticComponent<StatProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const avatarVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    tone?: "primary" | "secondary" | "info" | "muted" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof avatarVariants> {
+    /** Image URL; falls back to initials/children when absent. */
+    src?: string;
+    alt?: string;
+    /** Show an online status dot. */
+    status?: boolean;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+/** Overlapping cluster of avatars. */
+declare const AvatarGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Controlled active value. */
+    value?: string;
+    /** Uncontrolled initial value. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+declare function Tabs({ value, defaultValue, onValueChange, className, children, ...props }: TabsProps): react_jsx_runtime.JSX.Element;
+declare const TabsList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+}
+declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+}
+declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+
+interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** "single" closes others when one opens. */
+    type?: "single" | "multiple";
+    defaultValue?: string[];
+}
+declare function Accordion({ type, defaultValue, className, children, ...props }: AccordionProps): react_jsx_runtime.JSX.Element;
+interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+}
+declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+declare function DropdownMenu({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "start" | "end";
+}
+declare function DropdownMenuContent({ className, align, children, ...props }: DropdownMenuContentProps): react_jsx_runtime.JSX.Element | null;
+interface DropdownMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    danger?: boolean;
+    icon?: React.ReactNode;
+}
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+declare function DropdownMenuSeparator({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare const Breadcrumb: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+interface BreadcrumbItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Marks the trailing current page (non-link, emphasized). */
+    current?: boolean;
+}
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLAnchorElement>>;
+declare function BreadcrumbSeparator(): react_jsx_runtime.JSX.Element;
+
+interface PaginationProps {
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /** How many numbered buttons to show around the edges. Default 5. */
+    siblingCount?: number;
+    className?: string;
+}
+declare function Pagination({ page, pageCount, onPageChange, className }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+/** Rounded, bordered wrapper around a <Table>. */
+declare const TableWrap: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Table: React.ForwardRefExoticComponent<React.TableHTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    /** Right-align with tabular numerals. */
+    numeric?: boolean;
+}
+declare const TableHead: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+
+interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}
+/** CSS-only hover/focus tooltip positioned above the trigger. */
+declare function Tooltip({ content, children, className }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    /** Max width of the panel. Default 440px. */
+    width?: number;
+    className?: string;
+}
+/** Centered overlay dialog. Closes on backdrop click and Escape. */
+declare function Modal({ open, onClose, children, width, className }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function ModalTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
+declare function ModalDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime.JSX.Element;
+declare function ModalActions({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+
+type ToastTone = "default" | "success" | "danger";
+interface ToastOptions {
+    message: React.ReactNode;
+    tone?: ToastTone;
+    /** Auto-dismiss after ms. Default 3200. Pass 0 to keep open. */
+    duration?: number;
+}
+interface ToastCtx {
+    toast: (opts: ToastOptions) => void;
+}
+declare function useToast(): ToastCtx;
+declare function ToastProvider({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, Alert, type AlertProps, Avatar, AvatarGroup, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbSeparator, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuSeparator, DropdownMenuTrigger, Field, Hint, type HintProps, Input, type InputProps, Label, type LabelProps, Modal, ModalActions, ModalDescription, type ModalProps, ModalTitle, Pagination, type PaginationProps, Progress, type ProgressProps, Radio, type RadioProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stat, type StatProps, Switch, type SwitchProps, Table, TableBody, TableCell, type TableCellProps, TableHead, TableHeader, TableRow, TableWrap, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastOptions, ToastProvider, type ToastTone, Tooltip, type TooltipProps, badgeVariants, buttonVariants, cn, sliderThumbCSS, useToast };