sonahang-ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sonahang Rai
+
+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,125 @@
+# sonahang-ui
+
+A React component library and design system — 31 accessible, themeable components with zero runtime dependencies, documented in Storybook.
+
+- **No runtime dependencies.** React is a peer dependency; nothing else ships.
+- **No provider.** Theming is CSS variables on the root element, so there's nothing to wrap your app in and nothing re-renders when the theme changes.
+- **Light and dark out of the box.** Dark mode follows the OS, or you pin it with `data-theme`.
+- **Typed.** Written in TypeScript, with declarations bundled.
+
+## Install
+
+```bash
+npm install sonahang-ui
+```
+
+React 19 is a peer dependency:
+
+```bash
+npm install react@^19 react-dom@^19
+```
+
+## Usage
+
+Import the stylesheet once, at the entry point of your app:
+
+```tsx
+import 'sonahang-ui/style.css';
+```
+
+Then use the components anywhere:
+
+```tsx
+import { Button, Input, Alert } from 'sonahang-ui';
+
+export function SignIn() {
+  return (
+    <form>
+      <Input label="Email" type="email" placeholder="you@example.com" />
+      <Alert variant="info">We'll email you a one-time code.</Alert>
+      <Button type="submit" fullWidth>
+        Send code
+      </Button>
+    </form>
+  );
+}
+```
+
+The stylesheet is a single file covering every component — it is not split per
+component, so importing it once is enough regardless of what you use. The JS is
+tree-shakeable, so unused components are dropped by your bundler.
+
+> The stylesheet loads Inter from Google Fonts via `@import`. If you'd rather
+> self-host the font or use your own, override `--font-family-sans`.
+
+## Components
+
+Layout and content: `Text`, `Logo`, `CodeBlock`, `EmptyState`, `Skeleton`
+
+Actions: `Button`, `Dropdown`, `SegmentedControl`
+
+Forms: `Input`, `InputOtp`, `Textarea`, `Select`, `Checkbox`, `Radio`, `Switch`, `RangeSlider`, `MinMaxSlider`, `FileDrop`
+
+Feedback: `Alert`, `Spinner`, `ProgressBar`, `Tooltip`, `Dialog`, `Drawer`
+
+Navigation: `Tabs`, `Breadcrumb`, `Pagination`, `Stepper`, `Accordion`
+
+Data display: `Avatar`, `Tag`, `Chip`
+
+Every component, every prop, and every state is documented with live controls
+in [Storybook](https://github.com/sonangrai/sonahang-ui) — that's the real
+reference, this file is the summary.
+
+## Theming
+
+Components never reference a raw color. They read semantic CSS variables, so a
+theme is a handful of overrides:
+
+```css
+:root {
+  --color-accent: #0f766e;
+  --color-accent-hover: #115e59;
+  --color-accent-subtle-bg: #f0fdfa;
+}
+```
+
+Dark mode applies automatically from `prefers-color-scheme`. To pin it, set
+`data-theme` on the root element — that always wins over the OS preference:
+
+```html
+<html data-theme="dark">
+```
+
+The same values are exported for JS, for charts and canvases where a CSS
+variable won't reach:
+
+```ts
+import { palette, semanticColors, colorVar } from 'sonahang-ui';
+
+colorVar('bg-surface'); // 'var(--color-bg-surface)' — stays theme-aware
+palette.accent[600]; // '#7429e0' — a fixed snapshot
+```
+
+## TypeScript
+
+Declarations are bundled, so there's no `@types` package to install. Every
+component exports its props type alongside it:
+
+```ts
+import type { ButtonProps, ButtonVariant } from 'sonahang-ui';
+```
+
+## Development
+
+```bash
+pnpm install
+pnpm dev          # landing page at :5173
+pnpm storybook    # docs at :6006
+pnpm dev:all      # both at once
+pnpm test         # vitest
+pnpm build:lib    # the published package
+```
+
+## License
+
+MIT © Sonahang Rai

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { AccordionHeadingLevel, AccordionType } from "./accordion.context";
+import "./Accordion.css";
+export type AccordionProps = {
+    children?: ReactNode;
+    /** Whether more than one item can be open at a time. Defaults to `single`. */
+    type?: AccordionType;
+    /**
+     * Values of the open items — makes the component controlled.
+     *
+     * Always an array, even for `type="single"`, so the prop's type doesn't
+     * change with another prop's value. A single accordion simply never holds
+     * more than one entry.
+     */
+    value?: string[];
+    /** Initially open items when uncontrolled. */
+    defaultValue?: string[];
+    /** Fired with the full list of open items. */
+    onChange?: (value: string[]) => void;
+    /**
+     * For `type="single"`, whether clicking the open item closes it. Defaults
+     * to true; set false when one item must always stay open.
+     */
+    collapsible?: boolean;
+    /** Heading rank wrapped around each trigger. Defaults to `3`. */
+    headingLevel?: AccordionHeadingLevel;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, "className" | "onChange">;
+/**
+ * Stack of collapsible sections.
+ *
+ * Each trigger is a button inside a real heading, so the sections show up in
+ * the document outline and screen-reader heading navigation — an accordion
+ * built from bare buttons is invisible to both.
+ */
+export declare function Accordion({ children, type, value, defaultValue, onChange, collapsible, headingLevel, className, ...props }: AccordionProps): import("react").JSX.Element;

package/dist/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./Accordion.css";
+export type AccordionItemProps = {
+    /** Identifies this section in the accordion's open list. */
+    value: string;
+    /** Content of the trigger. */
+    title: ReactNode;
+    /** Body revealed when open. */
+    children?: ReactNode;
+    /** Prevents the section being opened or closed. */
+    disabled?: boolean;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, "className" | "title">;
+/** One collapsible section of an `Accordion`. */
+export declare function AccordionItem({ value, title, children, disabled, className, ...props }: AccordionItemProps): import("react").JSX.Element;

package/dist/components/Accordion/accordion.context.d.ts

@@ -0,0 +1,18 @@
+/** `single` closes the open item when another opens; `multiple` doesn't. */
+export type AccordionType = "single" | "multiple";
+/** Heading rank the triggers are wrapped in, to fit the page outline. */
+export type AccordionHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export type AccordionContextValue = {
+    /** Values of the currently open items. */
+    value: string[];
+    /** Opens or closes one item, applying the single/multiple rule. */
+    toggle: (value: string) => void;
+    baseId: string;
+    headingLevel: AccordionHeadingLevel;
+};
+export declare const AccordionContext: import("react").Context<AccordionContextValue | undefined>;
+/** Reads the surrounding `Accordion`, failing loudly rather than silently. */
+export declare function useAccordionContext(component: string): AccordionContextValue;
+/** Ids are derived rather than registered, so trigger and panel always agree. */
+export declare const triggerId: (baseId: string, value: string) => string;
+export declare const panelId: (baseId: string, value: string) => string;

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

@@ -0,0 +1,5 @@
+export { Accordion } from "./Accordion";
+export type { AccordionProps } from "./Accordion";
+export { AccordionItem } from "./AccordionItem";
+export type { AccordionItemProps } from "./AccordionItem";
+export type { AccordionType, AccordionHeadingLevel } from "./accordion.context";

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

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { AlertVariant } from "./alert.tokens";
+import "./Alert.css";
+export type AlertProps = {
+    /** Status this alert conveys. Defaults to `info`. */
+    variant?: AlertVariant;
+    /** Bolded heading above the body. */
+    title?: ReactNode;
+    /** Body content. */
+    children?: ReactNode;
+    /** Replaces the variant's icon, or hides it entirely with `false`. */
+    icon?: ReactNode | false;
+    /** Renders a dismiss button and is called when it's activated. */
+    onDismiss?: () => void;
+    /** Accessible name for the dismiss button. Defaults to "Dismiss". */
+    dismissLabel?: string;
+    /**
+     * Overrides how assistive tech announces this. Defaults to `alert` for
+     * warning/error and `status` for success/info.
+     */
+    role?: "alert" | "status" | "none";
+} & Omit<HTMLAttributes<HTMLDivElement>, "title" | "role">;
+/** Coloured banner conveying the outcome or status of something. */
+export declare function Alert({ variant, title, children, icon, onDismiss, dismissLabel, role, className, ...props }: AlertProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+export declare const alertVariants: readonly ["success", "info", "warning", "error"];
+export type AlertVariant = (typeof alertVariants)[number];

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

@@ -0,0 +1,4 @@
+export { Alert } from "./Alert";
+export type { AlertProps } from "./Alert";
+export { alertVariants } from "./alert.tokens";
+export type { AlertVariant } from "./alert.tokens";

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

@@ -0,0 +1,17 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { AvatarSize } from "./avatar.tokens";
+import "./Avatar.css";
+export type AvatarProps = {
+    /** Image URL. Falls back to initials (then an icon) if it fails to load. */
+    src?: string;
+    /** Person's name — used for the accessible label and to derive initials. */
+    name?: string;
+    /** Overrides the image alt text. Defaults to `name`. */
+    alt?: string;
+    /** Size of the avatar. Defaults to `md`, or the size set by `AvatarGroup`. */
+    size?: AvatarSize;
+    /** Custom fallback, rendered instead of initials when there's no image. */
+    children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLSpanElement>, "children">;
+/** User avatar with an image → initials → icon fallback chain. */
+export declare function Avatar({ src, name, alt, size, className, children, ...props }: AvatarProps): import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { AvatarSize } from "./avatar.tokens";
+import "./Avatar.css";
+export type AvatarGroupProps = {
+    /** Maximum avatars to show before collapsing the rest into a "+N" counter. */
+    max?: number;
+    /** Size applied to every avatar in the group. Individual `size` props win. */
+    size?: AvatarSize;
+    children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, "children">;
+/** Overlapping stack of `Avatar`s, with optional overflow counter. */
+export declare function AvatarGroup({ max, size, className, children, ...props }: AvatarGroupProps): import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+/**
+ * Lets `AvatarGroup` set the size for every avatar it contains without
+ * cloning children. An explicit `size` on an individual `Avatar` still wins.
+ * Kept in its own module so the component files only export components
+ * (see the react-refresh rule in eslint.config.js).
+ */
+export declare const AvatarSizeContext: import("react").Context<"sm" | "md" | "lg" | undefined>;

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

@@ -0,0 +1,2 @@
+export declare const avatarSizes: readonly ["sm", "md", "lg"];
+export type AvatarSize = (typeof avatarSizes)[number];

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

@@ -0,0 +1,6 @@
+/**
+ * "Ada Lovelace" -> "AL", "Ada" -> "A", "Ada B. Lovelace" -> "AL".
+ * Returns "" for names with no word characters, so callers can fall
+ * through to the placeholder icon.
+ */
+export declare function getInitials(name: string, max?: number): string;

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

@@ -0,0 +1,6 @@
+export { Avatar } from "./Avatar";
+export type { AvatarProps } from "./Avatar";
+export { AvatarGroup } from "./AvatarGroup";
+export type { AvatarGroupProps } from "./AvatarGroup";
+export { avatarSizes } from "./avatar.tokens";
+export type { AvatarSize } from "./avatar.tokens";

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./Breadcrumb.css";
+export type BreadcrumbProps = {
+    children?: ReactNode;
+    /** Rendered between crumbs. Defaults to a chevron. */
+    separator?: ReactNode;
+    /** Accessible name for the landmark. Defaults to "Breadcrumb". */
+    "aria-label"?: string;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLElement>, "className">;
+/**
+ * Trail of links showing where the current page sits in the hierarchy.
+ *
+ * A `nav` landmark wrapping an ordered list, since the order is meaningful.
+ * The trailing crumb is treated as the current page automatically — the
+ * position in the list is what makes it current, so callers shouldn't have to
+ * repeat that.
+ */
+export declare function Breadcrumb({ children, separator, "aria-label": ariaLabel, className, ...props }: BreadcrumbProps): import("react").JSX.Element;

package/dist/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -0,0 +1,25 @@
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import "./Breadcrumb.css";
+export type BreadcrumbItemProps = {
+    children?: ReactNode;
+    /** Destination. Omit to render plain text, or to supply your own link. */
+    href?: string;
+    /**
+     * Marks this crumb as the current page. Defaults to true for the trailing
+     * crumb; set it explicitly to override that.
+     */
+    current?: boolean;
+    className?: string;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "className">;
+/**
+ * One crumb in a `Breadcrumb`.
+ *
+ * Renders an anchor when given an `href`, plain text otherwise. The current
+ * crumb is never a link — linking to the page you're already on is noise —
+ * and carries `aria-current="page"`.
+ *
+ * For router links, omit `href` and pass your own element as children; it's
+ * rendered as-is. The current crumb shouldn't be a link anyway, so that only
+ * applies to the earlier ones.
+ */
+export declare function BreadcrumbItem({ children, href, current, className, ...props }: BreadcrumbItemProps): import("react").JSX.Element;

package/dist/components/Breadcrumb/breadcrumb.context.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+export type BreadcrumbContextValue = {
+    /** True for the trailing crumb, which is the current page. */
+    isLast: boolean;
+    /** Rendered between crumbs. Decorative — always `aria-hidden`. */
+    separator: ReactNode;
+};
+export declare const BreadcrumbContext: import("react").Context<BreadcrumbContextValue | undefined>;
+/** Reads the surrounding `Breadcrumb`, failing loudly rather than silently. */
+export declare function useBreadcrumbContext(component: string): BreadcrumbContextValue;

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

@@ -0,0 +1,4 @@
+export { Breadcrumb } from "./Breadcrumb";
+export type { BreadcrumbProps } from "./Breadcrumb";
+export { BreadcrumbItem } from "./BreadcrumbItem";
+export type { BreadcrumbItemProps } from "./BreadcrumbItem";

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

@@ -0,0 +1,20 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import type { ButtonSize, ButtonVariant } from "./button.tokens";
+import "./Button.css";
+export type ButtonProps = {
+    /** Visual style of the button. Defaults to `primary`. Use `icon` for an icon-only, square button. */
+    variant?: ButtonVariant;
+    /** Size of the button. Defaults to `md`. */
+    size?: ButtonSize;
+    /** Stretches the button to fill its container's width. */
+    fullWidth?: boolean;
+    /** Icon to render alongside `children`, or on its own when `variant="icon"`. Note: icon-only buttons need an `aria-label`. */
+    icon?: ReactNode;
+    /** Where `icon` renders relative to `children`. Ignored when `variant="icon"`. Defaults to `left`. */
+    iconPosition?: "left" | "right";
+    /** Shows a spinner on the left and disables the button while an async action is pending. Content stays visible, so `children` can be swapped for a loading message. */
+    loading?: boolean;
+    children?: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">;
+/** Interactive button primitive for the design system. */
+export declare function Button({ variant, size, fullWidth, icon, iconPosition, loading, disabled, className, children, ...props }: ButtonProps): import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+export declare const buttonVariants: readonly ["primary", "secondary", "outline", "ghost", "icon"];
+export type ButtonVariant = (typeof buttonVariants)[number];
+export declare const buttonSizes: readonly ["sm", "md", "lg"];
+export type ButtonSize = (typeof buttonSizes)[number];

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

@@ -0,0 +1,17 @@
+import type { ButtonSize, ButtonVariant } from "./button.tokens";
+export type ButtonClassNameOptions = {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    fullWidth?: boolean;
+    loading?: boolean;
+    className?: string;
+};
+/**
+ * The class list `Button` puts on itself.
+ *
+ * Exported because `<button>` can't be a link: anything that needs to look
+ * like a button while navigating — an `EmptyState` call to action, a "read the
+ * docs" link — has to be an `<a>`, and should get its appearance from here
+ * rather than from a second copy of the same rules.
+ */
+export declare function buttonClassNames({ variant, size, fullWidth, loading, className, }?: ButtonClassNameOptions): string;

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

@@ -0,0 +1,6 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+export { buttonVariants, buttonSizes } from './button.tokens';
+export { buttonClassNames } from './buttonClassNames';
+export type { ButtonClassNameOptions } from './buttonClassNames';
+export type { ButtonVariant, ButtonSize } from './button.tokens';

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

@@ -0,0 +1,24 @@
+import type { InputHTMLAttributes, ReactNode, Ref } from "react";
+import "./Checkbox.css";
+export type CheckboxProps = {
+    /** Value this option represents. Required when inside a `CheckboxGroup`. */
+    value?: string;
+    /** Visible label sitting beside the control. */
+    label?: ReactNode;
+    /**
+     * Renders the mixed state (a dash). Purely visual until toggled — a
+     * checkbox is never submitted as indeterminate.
+     */
+    indeterminate?: boolean;
+    /** Class for the wrapping `<label>`. Use `inputClassName` for the control. */
+    className?: string;
+    /** Class for the underlying `<input type="checkbox">`. */
+    inputClassName?: string;
+    ref?: Ref<HTMLInputElement>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "className" | "ref">;
+/**
+ * A single checkbox. Usually rendered inside a `CheckboxGroup`, which supplies
+ * the shared `name` and selection; works standalone too, in which case
+ * `checked`/`onChange` behave like a plain `<input type="checkbox">`.
+ */
+export declare function Checkbox({ value, label, indeterminate, className, inputClassName, name, checked, disabled, onChange, ref, ...props }: CheckboxProps): import("react").JSX.Element;

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import "./Checkbox.css";
+export type CheckboxGroupProps = {
+    children?: ReactNode;
+    /** Selected values — makes the group controlled. */
+    value?: string[];
+    /** Initial selection when uncontrolled. */
+    defaultValue?: string[];
+    /** Fired with the full list of selected values. */
+    onChange?: (value: string[]) => void;
+    /** Visible label for the group. Provide this or `aria-label`. */
+    label?: ReactNode;
+    /** Hint shown below the options. Replaced by `error` when that's set. */
+    helperText?: ReactNode;
+    /** Validation message. Its presence also marks the group invalid. */
+    error?: ReactNode;
+    /** Shared field name for the options. Auto-generated when omitted. */
+    name?: string;
+    /** Layout direction for the options. Defaults to `vertical`. */
+    orientation?: "vertical" | "horizontal";
+    /** Disables every option in the group. */
+    disabled?: boolean;
+    /** Accessible name when there's no visible `label`. */
+    "aria-label"?: string;
+    className?: string;
+};
+/** Groups `Checkbox` options, coordinating their shared name and selection. */
+export declare function CheckboxGroup({ children, value, defaultValue, onChange, label, helperText, error, name, orientation, disabled, "aria-label": ariaLabel, className, }: CheckboxGroupProps): import("react").JSX.Element;

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

@@ -0,0 +1,17 @@
+export type CheckboxGroupContextValue = {
+    /** Shared `name`, so the options submit together as one field. */
+    name: string;
+    /** Currently selected values. Checkboxes are multi-select, unlike radios. */
+    value: string[];
+    /** Called with the option's value when it's toggled on or off. */
+    onToggle: (value: string, checked: boolean) => void;
+    /** Set when the whole group is disabled. */
+    disabled?: boolean;
+};
+/**
+ * Lets `CheckboxGroup` coordinate its `Checkbox` children without cloning
+ * them. A `Checkbox` used outside a group falls back to its own props.
+ * Kept in its own module so the component files only export components
+ * (see the react-refresh rule in eslint.config.js).
+ */
+export declare const CheckboxGroupContext: import("react").Context<CheckboxGroupContextValue | undefined>;

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

@@ -0,0 +1,4 @@
+export { Checkbox } from "./Checkbox";
+export type { CheckboxProps } from "./Checkbox";
+export { CheckboxGroup } from "./CheckboxGroup";
+export type { CheckboxGroupProps } from "./CheckboxGroup";

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { ChipAction, ChipVariant } from "./chip.tokens";
+import "./Chip.css";
+export type ChipProps = {
+    /** Visual style of the chip. Defaults to `primary`. */
+    variant?: ChipVariant;
+    /** Trailing icon button to render. Omit for a chip with no action. */
+    action?: ChipAction;
+    /** Fired when the trailing icon button is activated. */
+    onAction?: () => void;
+    /**
+     * Accessible name for the trailing button. Defaults to the action verb
+     * plus the label when `children` is a string — e.g. "Remove Vite".
+     */
+    actionLabel?: string;
+    /** Disables the trailing button and mutes the chip. */
+    disabled?: boolean;
+    children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLSpanElement>, "children">;
+/** Compact, actionable label — a `Tag` with a trailing add or remove button. */
+export declare function Chip({ variant, action, onAction, actionLabel, disabled, className, children, ...props }: ChipProps): import("react").JSX.Element;

package/dist/components/Chip/chip.tokens.d.ts

@@ -0,0 +1,4 @@
+export declare const chipVariants: readonly ["primary", "secondary", "outline"];
+export type ChipVariant = (typeof chipVariants)[number];
+export declare const chipActions: readonly ["add", "remove"];
+export type ChipAction = (typeof chipActions)[number];

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

@@ -0,0 +1,4 @@
+export { Chip } from "./Chip";
+export type { ChipProps } from "./Chip";
+export { chipVariants, chipActions } from "./chip.tokens";
+export type { ChipVariant, ChipAction } from "./chip.tokens";

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,41 @@
+import type { HTMLAttributes } from "react";
+import "./CodeBlock.css";
+export type CodeBlockProps = {
+    /**
+     * The code.
+     *
+     * A string rather than nodes, because it has to be copied to the clipboard
+     * and counted into lines — neither of which is possible with arbitrary
+     * children. Shared indentation is stripped, so a template literal can be
+     * indented to match the code around it.
+     */
+    children: string;
+    /** Shown on the left of the header. */
+    filename?: string;
+    /**
+     * Puts `language-<value>` on the `<code>`, which is the hook Prism, Shiki
+     * and highlight.js look for. Nothing here highlights anything — see the
+     * component docs. Also labels the header when there's no filename.
+     */
+    language?: string;
+    /** Numbers down the left of the code. Defaults to false. */
+    showLineNumbers?: boolean;
+    /** Soft-wraps long lines instead of scrolling sideways. Defaults to false. */
+    wrap?: boolean;
+    /** Whether to render the copy button. Defaults to true. */
+    copyable?: boolean;
+    /** Accessible name for the copy button. Defaults to "Copy code". */
+    copyLabel?: string;
+    /** Caps the height of the code area, which scrolls past it. */
+    maxHeight?: number | string;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, "className" | "children">;
+/**
+ * Code with a filename and a copy button.
+ *
+ * **It does not highlight anything.** A syntax highlighter is a large
+ * dependency with opinions about themes and grammars, and this library ships
+ * none. `language` puts the conventional `language-*` class on the `<code>`
+ * so whichever highlighter the consumer already has can pick the block up.
+ */
+export declare function CodeBlock({ children, filename, language, showLineNumbers, wrap, copyable, copyLabel, maxHeight, className, ...props }: CodeBlockProps): import("react").JSX.Element;

package/dist/components/CodeBlock/dedentCode.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Removes the indentation a template literal picks up from the code around it.
+ *
+ * Blank first and last lines go first — a template literal almost always opens
+ * with the newline after the backtick and closes with the indentation before
+ * it — then the smallest indent shared by every remaining non-blank line is
+ * stripped from all of them. Relative indentation inside the block survives.
+ *
+ * Indentation is counted in characters, so a block mixing tabs and spaces at
+ * the same depth won't line up. Pick one.
+ */
+export declare function dedentCode(source: string): string;

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

@@ -0,0 +1,3 @@
+export { CodeBlock } from "./CodeBlock";
+export type { CodeBlockProps } from "./CodeBlock";
+export { dedentCode } from "./dedentCode";