canny-ui-react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 CannyMinds
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,68 @@
+# canny-ui-react
+
+Typed React component wrappers for the [Canny-UI](https://www.npmjs.com/package/canny-ui) design system.
+
+Built on [Radix UI](https://www.radix-ui.com), [motion](https://motion.dev), [cmdk](https://cmdk.paco.me), and [lucide-react](https://lucide.dev). Zero inline styles — every prop maps to a utility class in `canny-ui`.
+
+## Install
+
+```bash
+pnpm add canny-ui canny-ui-react
+# or
+npm install canny-ui canny-ui-react
+```
+
+Peer deps: `react` / `react-dom` >= 18.
+
+## Use
+
+```tsx
+import 'canny-ui/dist/canny-ui.min.css';
+import {
+  Button, ButtonGroup, FAB, IconButton,
+  ToggleButton, ToggleButtonGroup, ToggleButtonGroupItem,
+  Input, Textarea, Field,
+  Select, SelectItem,
+  MultiSelect,
+  Checkbox, Radio, RadioGroup, Switch,
+  Box, Stack, Row, Grid, Container, Divider, Spacer, Text,
+  Card, Alert, Avatar, Progress, Skeleton,
+  Navbar, Sidebar, Scroll,
+} from 'canny-ui-react';
+
+export function SignInCard() {
+  return (
+    <Container size="sm">
+      <Card>
+        <Stack gap={4}>
+          <Text variant="h2">Welcome back</Text>
+          <Field label="Email" required>
+            <Input type="email" placeholder="name@company.com" />
+          </Field>
+          <Field label="Password" required>
+            <Input type="password" showPasswordToggle />
+          </Field>
+          <Row gap={2} justify="end">
+            <Button variant="ghost">Forgot?</Button>
+            <Button>Sign in</Button>
+          </Row>
+        </Stack>
+      </Card>
+    </Container>
+  );
+}
+```
+
+## Highlights
+
+- **Buttons** — 7 variants × 5 colors × 3 sizes × 3 shapes, click-position ripple powered by `motion`, attached/spaced groups, FAB with spring entrance, Radix-powered toggles and segmented controls
+- **Inputs** — prefix/suffix slots, clear button, password toggle, validation states wired through `<Field>`
+- **Select / MultiSelect** — Radix Select + cmdk combobox with chip tokens, groups, descriptions, `maxItems` cap
+- **Layout primitives** — `<Box>`, `<Stack>`, `<Row>`, `<Grid>`, `<Container>` map props to utility classes, polymorphic `as`
+- **Typography** — `<Text variant="h1|h2|...|caption|code|kbd">` picks element + scale together
+
+## Links
+
+- **Docs**: https://github.com/CannyMinds/Canny-UI#readme
+- **Issues**: https://github.com/CannyMinds/Canny-UI/issues
+- **License**: MIT

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,2 @@
+import type { AlertProps } from './Alert.types';
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,8 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type AlertColor = 'info' | 'success' | 'warning' | 'danger';
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    color?: AlertColor;
+    solid?: boolean;
+    title?: ReactNode;
+    children?: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertProps, AlertColor } from './Alert.types';

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,3 @@
+import type { AvatarProps, AvatarStackProps } from './Avatar.types';
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const AvatarStack: import("react").ForwardRefExoticComponent<AvatarStackProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg';
+export type AvatarStatus = 'online' | 'busy' | 'offline';
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: AvatarSize;
+    status?: AvatarStatus;
+    src?: string;
+    alt?: string;
+    children?: ReactNode;
+}
+export interface AvatarStackProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { Avatar, AvatarStack } from './Avatar';
+export type { AvatarProps, AvatarStackProps, AvatarSize, AvatarStatus } from './Avatar.types';

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

@@ -0,0 +1,2 @@
+import type { ButtonProps } from './Button.types';
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,27 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonVariant = 'solid' | 'secondary' | 'outline' | 'dashed' | 'ghost' | 'soft' | 'link';
+export type ButtonColor = 'primary' | 'danger' | 'warning' | 'success' | 'info';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonShape = 'default' | 'round' | 'circle';
+export type ButtonIconPosition = 'start' | 'end';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual tier. Default: `'solid'`. */
+    variant?: ButtonVariant;
+    /** Semantic color role. Default: `'primary'`. */
+    color?: ButtonColor;
+    /** Size modifier. `'md'` is the default (no class). */
+    size?: ButtonSize;
+    /** Corner style. `'round'` → pill, `'circle'` → icon-only circular. */
+    shape?: ButtonShape;
+    /** Stretch to full width of parent. */
+    block?: boolean;
+    /** Replace leading slot with a spinner and disable interaction. */
+    loading?: boolean;
+    /** Icon node placed in the leading or trailing slot. */
+    icon?: ReactNode;
+    /** Side to place the `icon` on. Default: `'start'`. */
+    iconPosition?: ButtonIconPosition;
+    /** Disable the MUI-style click ripple. Default: `false`. */
+    disableRipple?: boolean;
+    children?: ReactNode;
+}

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

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type ButtonGroupOrientation = 'horizontal' | 'vertical';
+export type ButtonGroupLayout = 'attached' | 'spaced';
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Stack direction. Default: `'horizontal'`. */
+    orientation?: ButtonGroupOrientation;
+    /** `'attached'` collapses borders; `'spaced'` leaves a small gap. Default: `'attached'`. */
+    layout?: ButtonGroupLayout;
+    /** Use pill radii on the first/last buttons. */
+    round?: boolean;
+    children: ReactNode;
+}
+export declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,37 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { ButtonColor, ButtonSize, ButtonVariant } from './Button.types';
+export type FABPosition = 'static' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+type FABVariant = Extract<ButtonVariant, 'solid' | 'secondary' | 'soft'>;
+type MotionIncompatible = 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration' | 'onTransitionEnd' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onDragEnter' | 'onDragLeave' | 'onDragOver' | 'onDragExit' | 'onDrop';
+type BaseFABProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | MotionIncompatible> & {
+    variant?: FABVariant;
+    color?: ButtonColor;
+    size?: Exclude<ButtonSize, 'md'> | 'md';
+    position?: FABPosition;
+    disableRipple?: boolean;
+    /** Icon element. Required. */
+    icon: ReactNode;
+    /** Text label. When provided, FAB becomes the extended pill variant. */
+    label?: ReactNode;
+    /** Control mount. When false, FAB exits with a spring shrink via motion. */
+    open?: boolean;
+};
+type FABWithLabel = BaseFABProps & {
+    label: ReactNode;
+    'aria-label'?: string;
+};
+type FABIconOnly = BaseFABProps & {
+    label?: undefined;
+    'aria-label': string;
+};
+export type FABProps = FABWithLabel | FABIconOnly;
+/**
+ * Floating Action Button — elevated circular primary action (Material-style).
+ * Provide `label` for the extended pill variant.
+ *
+ * Entrance and exit are animated with `motion`'s spring presets. Pair with
+ * `open` + `AnimatePresence` at the call site for conditional FABs that exit
+ * gracefully.
+ */
+export declare const FAB: import("react").ForwardRefExoticComponent<FABProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { ButtonProps } from './Button.types';
+export interface IconButtonProps extends Omit<ButtonProps, 'children' | 'icon' | 'iconPosition'> {
+    /** Icon element. Required. */
+    icon: ReactNode;
+    /** Accessible label. Required — icon-only buttons must have one. */
+    'aria-label': string;
+}
+/**
+ * Convenience over `<Button shape="circle" icon={...} aria-label="…" />`.
+ * Enforces `aria-label` at the type level for icon-only accessibility.
+ */
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,17 @@
+import type { MouseEvent as ReactMouseEvent } from 'react';
+type RippleItem = {
+    id: number;
+    x: number;
+    y: number;
+    size: number;
+};
+export declare function useRipple(): {
+    ripples: RippleItem[];
+    add: (event: ReactMouseEvent<HTMLElement>) => void;
+    remove: (id: number) => void;
+};
+export declare function Ripples({ ripples, onDone, }: {
+    ripples: RippleItem[];
+    onDone: (id: number) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Root as RadixToggle } from '@radix-ui/react-toggle';
+import type { ButtonColor, ButtonShape, ButtonSize, ButtonVariant } from './Button.types';
+type RadixToggleProps = ComponentPropsWithoutRef<typeof RadixToggle>;
+export interface ToggleButtonProps extends Omit<RadixToggleProps, 'asChild'> {
+    variant?: Extract<ButtonVariant, 'ghost' | 'outline' | 'soft' | 'dashed'>;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    shape?: ButtonShape;
+    icon?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * Accessible toggle built on Radix's `Toggle` primitive.
+ * Handles `aria-pressed` / `data-state` natively; CSS hooks into both.
+ */
+export declare const ToggleButton: import("react").ForwardRefExoticComponent<ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,29 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Root as RadixToggleGroup, Item as RadixToggleGroupItem } from '@radix-ui/react-toggle-group';
+import type { ButtonColor, ButtonShape, ButtonSize, ButtonVariant } from './Button.types';
+type GroupRootProps = ComponentPropsWithoutRef<typeof RadixToggleGroup>;
+type GroupItemProps = ComponentPropsWithoutRef<typeof RadixToggleGroupItem>;
+type GroupVariant = Extract<ButtonVariant, 'ghost' | 'outline' | 'soft' | 'dashed'>;
+export type ToggleButtonGroupProps = GroupRootProps & {
+    variant?: GroupVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    /** `attached` collapses borders, `spaced` leaves a small gap. Default: `attached`. */
+    layout?: 'attached' | 'spaced';
+    /** Pill-shaped ends. */
+    round?: boolean;
+};
+export interface ToggleButtonGroupItemProps extends Omit<GroupItemProps, 'asChild'> {
+    icon?: ReactNode;
+    shape?: ButtonShape;
+    children?: ReactNode;
+}
+/**
+ * Accessible segmented control / toolbar built on Radix's `ToggleGroup` primitive.
+ * Supports single-select (`type="single"`) or multi-select (`type="multiple"`).
+ * Items inherit styling via React context; override per-item if needed.
+ */
+export declare const ToggleButtonGroup: import("react").ForwardRefExoticComponent<ToggleButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+/** Individual toggle item. Styling inherits from `ToggleButtonGroup` via context. */
+export declare const ToggleButtonGroupItem: import("react").ForwardRefExoticComponent<ToggleButtonGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,11 @@
+export { Button } from './Button';
+export { ButtonGroup } from './ButtonGroup';
+export { FAB } from './FAB';
+export { IconButton } from './IconButton';
+export { ToggleButton } from './ToggleButton';
+export { ToggleButtonGroup, ToggleButtonGroupItem } from './ToggleButtonGroup';
+export type { ButtonProps, ButtonVariant, ButtonColor, ButtonSize, ButtonShape, ButtonIconPosition, } from './Button.types';
+export type { ButtonGroupProps, ButtonGroupOrientation, ButtonGroupLayout } from './ButtonGroup';
+export type { IconButtonProps } from './IconButton';
+export type { ToggleButtonProps } from './ToggleButton';
+export type { ToggleButtonGroupProps, ToggleButtonGroupItemProps } from './ToggleButtonGroup';

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

@@ -0,0 +1,2 @@
+import type { CardProps } from './Card.types';
+export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,6 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type CardColor = 'default' | 'danger' | 'warning' | 'success' | 'info';
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    color?: CardColor;
+    children: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps, CardColor } from './Card.types';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+type CheckboxRootProps = ComponentPropsWithoutRef<typeof RadixCheckbox.Root>;
+export interface CheckboxProps extends Omit<CheckboxRootProps, 'children'> {
+    /** Label text or node rendered next to the box. */
+    children?: ReactNode;
+}
+/** Accessible checkbox — tri-state (`checked | 'indeterminate' | false`). */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';

package/dist/components/Field/Field.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
+export type FieldValidationState = 'default' | 'danger' | 'warning' | 'success';
+export interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Label text. */
+    label?: ReactNode;
+    /** Helper copy shown under the control. */
+    hint?: ReactNode;
+    /** Error message — overrides `hint` and applies danger styling to the control. */
+    error?: ReactNode;
+    /** Show a red asterisk next to the label. */
+    required?: boolean;
+    /** Show a muted "(optional)" tag next to the label. */
+    optional?: boolean;
+    /** Character counter — pass the current length. Pair with `maxLength`. */
+    counter?: number;
+    /** Max characters; when `counter` >= this, the counter flips to danger. */
+    maxLength?: number;
+    /** Override validation styling explicitly. */
+    state?: FieldValidationState;
+    /** Single form control element. The `id` is threaded to the label and aria-describedby. */
+    children: ReactElement;
+}
+/**
+ * Field — the canonical wrapper for form controls. Handles:
+ *  • Label + required asterisk / optional tag
+ *  • Helper / error text (error overrides hint)
+ *  • Character counter with auto-danger when > maxLength
+ *  • ARIA wiring: `htmlFor`, `aria-describedby`, `aria-invalid`
+ *  • Validation state propagation to the child control via className
+ */
+export declare function Field({ label, hint, error, required, optional, counter, maxLength, state, className, children, ...rest }: FieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Field } from './Field';
+export type { FieldProps, FieldValidationState } from './Field';

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

@@ -0,0 +1,2 @@
+import type { InputProps } from './Input.types';
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,18 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export type InputColor = 'primary' | 'danger' | 'warning' | 'success';
+export type InputSize = 'sm' | 'md' | 'lg';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+    color?: InputColor;
+    /** Size modifier. `'md'` is the default (no class). */
+    size?: InputSize;
+    /** Icon / content placed inside the input, left of the text. */
+    prefix?: ReactNode;
+    /** Icon / content placed inside the input, right of the text. */
+    suffix?: ReactNode;
+    /** Show a clear button when the input has a value and is not disabled. */
+    clearable?: boolean;
+    /** Called when the clear button is clicked. */
+    onClear?: () => void;
+    /** Show a password-visibility toggle. Forces `type="password"` when hidden. */
+    showPasswordToggle?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps, InputColor } from './Input.types';

package/dist/components/Layout/Box.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithoutRef, ElementType, ForwardedRef, ReactElement } from 'react';
+import type { LayoutProps } from './layout.types';
+export type BoxProps<E extends ElementType = 'div'> = LayoutProps & Omit<ComponentPropsWithoutRef<E>, keyof LayoutProps> & {
+    as?: E;
+};
+/**
+ * Box — the universal layout primitive.
+ *
+ * Defaults to `<div>` but polymorphic via `as`. All layout props map to
+ * the utility classes in core, so styles stay predictable and debuggable
+ * in DevTools (no inline styles).
+ *
+ * @example
+ * <Box p={4} gap={2} direction="column">...</Box>
+ * <Box as="section" py={6} px={4}>...</Box>
+ */
+export declare const Box: <E extends ElementType = "div">(props: BoxProps<E> & {
+    ref?: ForwardedRef<Element>;
+}) => ReactElement;

package/dist/components/Layout/Container.d.ts

@@ -0,0 +1,11 @@
+import type { ElementType, ForwardedRef, ReactElement } from 'react';
+import type { BoxProps } from './Box';
+export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export type ContainerProps<E extends ElementType = 'div'> = Omit<BoxProps<E>, 'w'> & {
+    /** Max-width token. Default: `'lg'` (1024px). */
+    size?: ContainerSize;
+};
+/** Responsive max-width wrapper with centered horizontal inline padding. */
+export declare const Container: <E extends ElementType = "div">(props: ContainerProps<E> & {
+    ref?: ForwardedRef<Element>;
+}) => ReactElement;

package/dist/components/Layout/Divider.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+export interface DividerProps extends Omit<HTMLAttributes<HTMLHRElement | HTMLSpanElement>, 'role'> {
+    /** Axis. Default: `'horizontal'`. */
+    orientation?: 'horizontal' | 'vertical';
+}
+/**
+ * Hairline divider. Renders `<hr>` when horizontal (no accessible name needed)
+ * and a semantic `<span role="separator" aria-orientation="vertical">` when
+ * vertical — `<hr>` is block-level and doesn't lay out inline.
+ */
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Layout/Grid.d.ts

@@ -0,0 +1,11 @@
+import type { ElementType, ForwardedRef, ReactElement } from 'react';
+import type { BoxProps } from './Box';
+type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type GridProps<E extends ElementType = 'div'> = Omit<BoxProps<E>, 'display' | 'direction'> & {
+    cols?: GridCols;
+};
+/** CSS Grid container. `cols` maps to `.grid-cols-{n}` utility. */
+export declare const Grid: <E extends ElementType = "div">(props: GridProps<E> & {
+    ref?: ForwardedRef<Element>;
+}) => ReactElement;
+export {};

package/dist/components/Layout/Spacer.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'react';
+export type SpacerProps = HTMLAttributes<HTMLSpanElement>;
+/** Flexible filler — `flex: 1 1 auto`. Use inside a `<Row>` or `<Stack>`. */
+export declare const Spacer: import("react").ForwardRefExoticComponent<SpacerProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,12 @@
+import type { ElementType, ForwardedRef, ReactElement } from 'react';
+import type { BoxProps } from './Box';
+export type StackProps<E extends ElementType = 'div'> = Omit<BoxProps<E>, 'direction' | 'display'>;
+/** Vertical flex column with a gap. Default element: `<div>`. */
+export declare const Stack: <E extends ElementType = "div">(props: StackProps<E> & {
+    ref?: ForwardedRef<Element>;
+}) => ReactElement;
+export type RowProps<E extends ElementType = 'div'> = Omit<BoxProps<E>, 'direction' | 'display'>;
+/** Horizontal flex row with a gap. Default `align: 'center'`. */
+export declare const Row: <E extends ElementType = "div">(props: RowProps<E> & {
+    ref?: ForwardedRef<Element>;
+}) => ReactElement;

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

@@ -0,0 +1,13 @@
+export { Box } from './Box';
+export { Stack, Row } from './Stack';
+export { Grid } from './Grid';
+export { Container } from './Container';
+export { Divider } from './Divider';
+export { Spacer } from './Spacer';
+export type { BoxProps } from './Box';
+export type { StackProps, RowProps } from './Stack';
+export type { GridProps } from './Grid';
+export type { ContainerProps, ContainerSize } from './Container';
+export type { DividerProps } from './Divider';
+export type { SpacerProps } from './Spacer';
+export type { Space, Align, Justify, Direction, Display, LayoutProps } from './layout.types';

package/dist/components/Layout/layout.types.d.ts

@@ -0,0 +1,38 @@
+import type { ElementType, ReactNode } from 'react';
+/** Spacing scale token — maps 1:1 to `.p-{n}`, `.m-{n}`, `.gap-{n}` utilities. */
+export type Space = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+export type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+export type Direction = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export type Display = 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'none';
+export interface LayoutProps {
+    /** Polymorphic render target. Defaults vary per component. */
+    as?: ElementType;
+    p?: Space;
+    px?: Space;
+    py?: Space;
+    pt?: Space;
+    pr?: Space;
+    pb?: Space;
+    pl?: Space;
+    m?: Space;
+    mx?: Space;
+    my?: Space;
+    mt?: Space;
+    mr?: Space;
+    mb?: Space;
+    ml?: Space;
+    gap?: Space;
+    gapX?: Space;
+    gapY?: Space;
+    display?: Display;
+    direction?: Direction;
+    align?: Align;
+    justify?: Justify;
+    wrap?: boolean;
+    w?: 'full' | 'auto' | 'fit';
+    h?: 'full' | 'auto' | 'fit';
+    children?: ReactNode;
+}
+/** Maps layout props to the utility class names emitted by core. */
+export declare function layoutClasses(p: LayoutProps): (string | false | null | undefined)[];

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+export type MultiSelectOption = {
+    value: string;
+    label: string;
+    /** Optional muted description shown next to the label. */
+    description?: string;
+    /** Optional icon rendered before the label. */
+    icon?: ReactNode;
+    /** Optional group label — items with the same group end up together. */
+    group?: string;
+    /** Prevent selection. */
+    disabled?: boolean;
+};
+export type MultiSelectSize = 'sm' | 'md' | 'lg';
+export type MultiSelectColor = 'primary' | 'danger' | 'warning' | 'success';
+export interface MultiSelectProps {
+    /** Flat list of options. `group` on each option produces sectioned dropdown. */
+    options: MultiSelectOption[];
+    /** Controlled selected values. */
+    value?: string[];
+    /** Uncontrolled initial selection. */
+    defaultValue?: string[];
+    /** Called when the selection changes. */
+    onValueChange?: (next: string[]) => void;
+    /** Shown inside the trigger when nothing is selected. */
+    placeholder?: string;
+    /** Placeholder inside the dropdown search input. */
+    searchPlaceholder?: string;
+    /** Empty-state text inside the dropdown. */
+    emptyText?: string;
+    /** Cap on how many can be selected. */
+    maxItems?: number;
+    /** Size of the trigger. */
+    size?: MultiSelectSize;
+    /** Validation color. */
+    color?: MultiSelectColor;
+    /** Disable the control. */
+    disabled?: boolean;
+    /** `id` for Field-threading. */
+    id?: string;
+    /** aria-invalid / aria-describedby threaded in from Field. */
+    'aria-invalid'?: boolean;
+    'aria-describedby'?: string;
+    /** aria-label for the combobox if no Field label is present. */
+    'aria-label'?: string;
+    /** Extra class on the trigger. */
+    className?: string;
+}
+/**
+ * MultiSelect — a combobox with a searchable list and chip tokens for
+ * the selected values. Built on @radix-ui/react-popover (positioning +
+ * focus management) and cmdk (search + filtering).
+ */
+export declare function MultiSelect({ options, value, defaultValue, onValueChange, placeholder, searchPlaceholder, emptyText, maxItems, size, color, disabled, id, className, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { MultiSelect } from './MultiSelect';
+export type { MultiSelectProps, MultiSelectOption, MultiSelectSize, MultiSelectColor, } from './MultiSelect';

package/dist/components/Navbar/Navbar.d.ts

@@ -0,0 +1,6 @@
+import type { NavbarProps, NavbarBrandProps, NavbarNavProps, NavbarItemProps, NavbarActionsProps } from './Navbar.types';
+export declare const Navbar: import("react").ForwardRefExoticComponent<NavbarProps & import("react").RefAttributes<HTMLElement>>;
+export declare const NavbarBrand: import("react").ForwardRefExoticComponent<NavbarBrandProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const NavbarNav: import("react").ForwardRefExoticComponent<NavbarNavProps & import("react").RefAttributes<HTMLElement>>;
+export declare const NavbarItem: import("react").ForwardRefExoticComponent<NavbarItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const NavbarActions: import("react").ForwardRefExoticComponent<NavbarActionsProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,19 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export interface NavbarProps extends HTMLAttributes<HTMLElement> {
+    solid?: boolean;
+    children: ReactNode;
+}
+export interface NavbarBrandProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    mark?: boolean;
+    children: ReactNode;
+}
+export interface NavbarNavProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+}
+export interface NavbarItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    active?: boolean;
+    children: ReactNode;
+}
+export interface NavbarActionsProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}