tensile 0.1.0

package/dist/components/media/VolumeSlider.d.ts

@@ -0,0 +1,10 @@
+export type VolumeSliderProps = {
+    /** 0..1 */
+    value: number;
+    onValueChange: (value: number) => void;
+    label?: string;
+    tone?: "paper" | "ink";
+    formatValue?: (value: number) => string;
+    className?: string;
+};
+export declare function VolumeSlider({ value, onValueChange, label, tone, formatValue, className, }: VolumeSliderProps): import("react").JSX.Element;

package/dist/components/media/WaveformScrubber.d.ts

@@ -0,0 +1,13 @@
+export type WaveformScrubberProps = {
+    /** Bar heights from 0 to 1, one bar per peak. */
+    peaks: number[];
+    /** Position in seconds. */
+    value: number;
+    onValueChange: (value: number) => void;
+    /** Length in seconds. */
+    duration: number;
+    label?: string;
+    formatTime?: (seconds: number) => string;
+    className?: string;
+};
+export declare function WaveformScrubber({ peaks, value, onValueChange, duration, label, formatTime, className, }: WaveformScrubberProps): import("react").JSX.Element;

package/dist/components/navigation/Breadcrumbs.d.ts

@@ -0,0 +1,19 @@
+type Crumb = {
+    label: string;
+    icon?: React.ReactNode;
+    href?: string;
+};
+export type BreadcrumbsProps = {
+    /** The trail from the root; the last item is the current page. */
+    items: Crumb[];
+    onNavigate: (item: Crumb) => void;
+    label?: string;
+    expandLabel?: string;
+    /** Items shown before the "…" pill. */
+    itemsBeforeCollapse?: number;
+    /** Items shown after the "…" pill, the current page included. */
+    itemsAfterCollapse?: number;
+    className?: string;
+};
+export declare function Breadcrumbs({ items, onNavigate, label, expandLabel, itemsBeforeCollapse, itemsAfterCollapse, className, }: BreadcrumbsProps): import("react").JSX.Element;
+export {};

package/dist/components/navigation/CollapsibleSidebar.d.ts

@@ -0,0 +1,21 @@
+export type CollapsibleSidebarProps = {
+    items: {
+        value: string;
+        label: string;
+        icon: React.ReactNode;
+        href?: string;
+    }[];
+    value: string;
+    onValueChange: (value: string) => void;
+    expanded: boolean;
+    onExpandedChange: (expanded: boolean) => void;
+    /** At the top, e.g. the brand; clipped to the rail while collapsed. */
+    leading?: React.ReactNode;
+    /** At the bottom, above the collapse button, e.g. the account; clipped to the rail while collapsed. */
+    trailing?: React.ReactNode;
+    label?: string;
+    expandLabel?: string;
+    collapseLabel?: string;
+    className?: string;
+};
+export declare function CollapsibleSidebar({ items, value, onValueChange, expanded, onExpandedChange, leading, trailing, label, expandLabel, collapseLabel, className, }: CollapsibleSidebarProps): import("react").JSX.Element;

package/dist/components/navigation/Link.d.ts

@@ -0,0 +1,12 @@
+export type LinkProviderProps = {
+    /** Gets the link's `href` on a plain left click on a same-origin link, instead of the page loading it; links to a `#fragment` of the page keep scrolling natively. */
+    navigate: (href: string) => void;
+    children: React.ReactNode;
+};
+export declare function LinkProvider({ navigate, children }: LinkProviderProps): import("react").JSX.Element;
+/** The click handler for components that render their own `<a>`: inside a `LinkProvider`, a plain left click on a same-origin link (no `target` other than `_self`, no `download`, not a `#fragment` of this page) calls `navigate(href)` instead of loading the page. Call it after the link's own `onClick`; a click that one prevented is left alone. */
+export declare function useLinkClick(): (event: React.MouseEvent<HTMLAnchorElement>) => void;
+export type LinkProps = React.ComponentProps<"a"> & {
+    href: string;
+};
+export declare function Link({ onClick, className, ...props }: LinkProps): import("react").JSX.Element;

package/dist/components/navigation/PageDots.d.ts

@@ -0,0 +1,11 @@
+export type PageDotsProps = {
+    count: number;
+    /** The current page, from 0. */
+    value: number;
+    onValueChange: (value: number) => void;
+    label?: string;
+    /** Text for the current page; `page` counts from 1. */
+    pageLabel?: (page: number, count: number) => string;
+    className?: string;
+};
+export declare function PageDots({ count, value, onValueChange, label, pageLabel, className, }: PageDotsProps): import("react").JSX.Element;

package/dist/components/navigation/Pagination.d.ts

@@ -0,0 +1,18 @@
+export type PaginationProps = {
+    /** Number of pages. */
+    count: number;
+    /** Current page, from 1 to `count`. */
+    value: number;
+    onValueChange: (value: number) => void;
+    /** Slots for pages and ellipses, at least 5. */
+    slots?: number;
+    formatPage?: (page: number) => string;
+    label?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    pageLabel?: (page: number) => string;
+    /** Makes the numbered pages links; previous and next remain buttons. */
+    pageHref?: (page: number) => string;
+    className?: string;
+};
+export declare function Pagination({ count, value, onValueChange, slots, formatPage, label, previousLabel, nextLabel, pageLabel, pageHref, className, }: PaginationProps): import("react").JSX.Element;

package/dist/components/navigation/SegmentedTabs.d.ts

@@ -0,0 +1,13 @@
+export type SegmentedTabsProps = {
+    options: {
+        value: string;
+        label: string;
+        icon?: React.ReactNode;
+    }[];
+    value: string;
+    onValueChange: (value: string) => void;
+    label?: string;
+    id?: string;
+    className?: string;
+};
+export declare function SegmentedTabs({ options, value, onValueChange, label, id, className }: SegmentedTabsProps): import("react").JSX.Element;

package/dist/components/navigation/SidebarNav.d.ts

@@ -0,0 +1,17 @@
+export type SidebarNavProps = {
+    items: {
+        value: string;
+        label: string;
+        icon?: React.ReactNode;
+        href?: string;
+    }[];
+    value: string;
+    onValueChange: (value: string) => void;
+    label?: string;
+    collapsed?: boolean;
+    leading?: React.ReactNode;
+    /** Pinned to the bottom, e.g. the account. */
+    trailing?: React.ReactNode;
+    className?: string;
+};
+export declare function SidebarNav({ items, value, onValueChange, label, collapsed, leading, trailing, className, }: SidebarNavProps): import("react").JSX.Element;

package/dist/components/navigation/TabBar.d.ts

@@ -0,0 +1,14 @@
+export type TabBarProps = {
+    items: {
+        value: string;
+        label: string;
+        icon: React.ReactNode;
+        activeIcon: React.ReactNode;
+        href?: string;
+    }[];
+    value: string;
+    onValueChange: (value: string) => void;
+    label?: string;
+    className?: string;
+};
+export declare function TabBar({ items, value, onValueChange, label, className }: TabBarProps): import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+export type TabsProps = {
+    items: {
+        value: string;
+        label: string;
+        icon?: React.ReactNode;
+        content: React.ReactNode;
+    }[];
+    value: string;
+    onValueChange: (value: string) => void;
+    label?: string;
+    variant?: "underline" | "segmented";
+    className?: string;
+};
+export declare function Tabs({ items, value, onValueChange, label, variant, className }: TabsProps): import("react").JSX.Element;

package/dist/components/navigation/UnderlineTabs.d.ts

@@ -0,0 +1,18 @@
+export type UnderlineTabsProps = {
+    options: {
+        value: string;
+        label: string;
+        icon?: React.ReactNode;
+    }[];
+    value: string;
+    onValueChange: (value: string) => void;
+    label?: string;
+    id?: string;
+    className?: string;
+};
+/** The liquid underline under the current item of a row, between the `left` and `right` edges measured from the row. */
+export declare function Underline({ left, right }: {
+    left: number;
+    right: number;
+}): import("react").JSX.Element;
+export declare function UnderlineTabs({ options, value, onValueChange, label, id, className }: UnderlineTabsProps): import("react").JSX.Element;

package/dist/components/navigation/WizardSteps.d.ts

@@ -0,0 +1,16 @@
+export type WizardStepsProps = {
+    steps: {
+        label: string;
+        icon?: React.ReactNode;
+    }[];
+    /** Index of the current step. */
+    value: number;
+    /** Read out after the label of a finished step. */
+    doneLabel?: string;
+    /** Read out after the label of the current step. */
+    currentLabel?: string;
+    /** Read out after the label of a step not reached yet. */
+    upcomingLabel?: string;
+    className?: string;
+};
+export declare function WizardSteps({ steps, value, doneLabel, currentLabel, upcomingLabel, className, }: WizardStepsProps): import("react").JSX.Element;

package/dist/components/overlays/AlertDialog.d.ts

@@ -0,0 +1,12 @@
+export type AlertDialogProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description: React.ReactNode;
+    onConfirm: () => void;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    trigger?: React.ReactNode;
+    className?: string;
+};
+export declare function AlertDialog({ open, onOpenChange, title, description, onConfirm, confirmLabel, cancelLabel, trigger, className, }: AlertDialogProps): import("react").JSX.Element;

package/dist/components/overlays/BottomSheet.d.ts

@@ -0,0 +1,9 @@
+export type BottomSheetProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: React.ReactNode;
+    label?: string;
+    handleLabel?: string;
+    className?: string;
+};
+export declare function BottomSheet({ open, onOpenChange, children, label, handleLabel, className }: BottomSheetProps): import("react").JSX.Element;

package/dist/components/overlays/ContextMenu.d.ts

@@ -0,0 +1,9 @@
+import { type MenuAction } from "../../Menu";
+export type ContextMenuProps = {
+    actions: MenuAction[];
+    onAction: (action: MenuAction) => void;
+    children: React.ReactNode;
+    menuLabel?: string;
+    className?: string;
+};
+export declare function ContextMenu({ actions, onAction, children, menuLabel, className }: ContextMenuProps): import("react").JSX.Element;

package/dist/components/overlays/Dialog.d.ts

@@ -0,0 +1,12 @@
+export type DialogProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: React.ReactNode;
+    trigger?: React.ReactNode;
+    title?: string;
+    closeLabel?: string;
+    role?: "dialog" | "alertdialog";
+    "aria-describedby"?: string;
+    className?: string;
+};
+export declare function Dialog({ open, onOpenChange, children, trigger, title, closeLabel, role, "aria-describedby": describedBy, className, }: DialogProps): import("react").JSX.Element;

package/dist/components/overlays/Drawer.d.ts

@@ -0,0 +1,10 @@
+export type DrawerProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: React.ReactNode;
+    children: React.ReactNode;
+    side?: "right" | "left";
+    closeLabel?: string;
+    className?: string;
+};
+export declare function Drawer({ open, onOpenChange, title, children, side, closeLabel, className }: DrawerProps): import("react").JSX.Element;

package/dist/components/overlays/Island.d.ts

@@ -0,0 +1,17 @@
+export type IslandProps = {
+    /** Name of the current activity, e.g. "Timer". It names the expanded view; a new one blur-swaps the content and springs the pill to its width. */
+    activity: string;
+    /** Start of the compact pill. */
+    leading: React.ReactNode;
+    /** End of the compact pill. */
+    trailing: React.ReactNode;
+    /** The expanded view, laid out in a panelWidth × panelHeight box. */
+    children: React.ReactNode;
+    expanded: boolean;
+    onExpandedChange: (expanded: boolean) => void;
+    openLabel?: (activity: string) => string;
+    panelWidth?: number;
+    panelHeight?: number;
+    className?: string;
+};
+export declare function Island({ activity, leading, trailing, children, expanded, onExpandedChange, openLabel, panelWidth, panelHeight, className, }: IslandProps): import("react").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { type Placement } from "../../Expand";
+export type PopoverProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: React.ReactNode;
+    trigger?: React.ReactNode;
+    label?: string;
+    panelLabel?: string;
+    panelWidth?: number;
+    /** The side the panel opens toward and the trigger edge it stays aligned with; it flips when the other side has more room. */
+    placement?: Placement;
+    id?: string;
+    disabled?: boolean;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean;
+    className?: string;
+};
+export declare function Popover({ open, onOpenChange, children, trigger, label, panelLabel, panelWidth, placement, id, disabled, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-invalid": invalid, className, }: PopoverProps): import("react").JSX.Element;

package/dist/components/overlays/Tooltip.d.ts

@@ -0,0 +1,19 @@
+type Trigger = {
+    ref: React.RefCallback<HTMLElement>;
+    onPointerEnter: React.PointerEventHandler<HTMLElement>;
+    onPointerLeave: React.PointerEventHandler<HTMLElement>;
+    onFocus: React.FocusEventHandler<HTMLElement>;
+    onBlur: React.FocusEventHandler<HTMLElement>;
+    "aria-describedby": string | undefined;
+};
+export type TooltipProps = {
+    label: string;
+    children: (trigger: Trigger) => React.ReactNode;
+    className?: string;
+};
+export declare function TooltipGroup({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function Tooltip({ label, children, className }: TooltipProps): import("react").JSX.Element;
+export {};

package/dist/drag.d.ts

@@ -0,0 +1,15 @@
+/** Where to draw a drag that went `over` px past a limit: it follows at first, then gives less and less, never more than 24 px. */
+export declare function rubber(over: number): number;
+/** Pointer handlers for dragging over an element (give it `touch-none`): `onDrag` runs on press and on every move while the pointer is held, `onRelease` when it lets go. */
+export declare function dragHandlers<T extends Element>(onDrag: (event: React.PointerEvent<T>) => void, onRelease: () => void): {
+    onPointerDown(event: React.PointerEvent<T>): void;
+    onPointerMove(event: React.PointerEvent<T>): void;
+    onPointerUp: () => void;
+    onPointerCancel: () => void;
+};
+/** A `width` × `height` pill pulled `stretch` px past an end (negative past the start): longer, thinner, and moved left when pulled past the start. Put `style` on the pill and spring `stretch` back to 0 with `snap`. */
+export declare function useStretch(width: number, height: number): readonly [import("motion-dom").MotionValue<number>, {
+    width: import("motion-dom").MotionValue<number>;
+    height: import("motion-dom").MotionValue<number>;
+    x: import("motion-dom").MotionValue<number>;
+}];

package/dist/focus.d.ts

@@ -0,0 +1,2 @@
+/** Marks `<html data-pointer>` from a pointer press until the next Tab. Browsers treat every focused text field as `:focus-visible`, so text controls call this and draw their ring with `has-keyboard-focus:`, which skips focus that came from the pointer. */
+export declare function useFocusSource(): void;

package/dist/icons.d.ts

@@ -0,0 +1,12 @@
+/** Shapes of the icons more than one component draws, on the 24 grid. Put them in an `Icon`. */
+export declare const icons: {
+    close: import("react").JSX.Element;
+    chevronLeft: import("react").JSX.Element;
+    chevronRight: import("react").JSX.Element;
+    chevronsUpDown: import("react").JSX.Element;
+    search: import("react").JSX.Element;
+    alert: import("react").JSX.Element;
+    more: import("react").JSX.Element;
+    plus: import("react").JSX.Element;
+    minus: import("react").JSX.Element;
+};

package/dist/index.d.ts

@@ -0,0 +1,105 @@
+export { Accordion, type AccordionProps } from "./components/layout/Accordion";
+export { ActionMenu, type ActionMenuProps } from "./components/actions/ActionMenu";
+export { Alert, type AlertProps } from "./components/feedback/Alert";
+export { AlertDialog, type AlertDialogProps } from "./components/overlays/AlertDialog";
+export { AppShell, type AppShellProps } from "./components/layout/AppShell";
+export { Avatar, type AvatarProps } from "./components/data-display/Avatar";
+export { AvatarGroup, type AvatarGroupProps } from "./components/data-display/AvatarGroup";
+export { Badge, type BadgeProps } from "./components/feedback/Badge";
+export { BarChart, type BarChartProps } from "./components/data-display/BarChart";
+export { BottomSheet, type BottomSheetProps } from "./components/overlays/BottomSheet";
+export { Breadcrumbs, type BreadcrumbsProps } from "./components/navigation/Breadcrumbs";
+export { Button, type ButtonProps } from "./components/actions/Button";
+export { Card, type CardProps } from "./components/layout/Card";
+export { Carousel, type CarouselProps } from "./components/media/Carousel";
+export { Checkbox, type CheckboxProps } from "./components/inputs/Checkbox";
+export { CheckboxGroup, type CheckboxGroupProps } from "./components/inputs/CheckboxGroup";
+export { CollapsibleSidebar, type CollapsibleSidebarProps } from "./components/navigation/CollapsibleSidebar";
+export { ColorPicker, type ColorPickerProps } from "./components/inputs/ColorPicker";
+export { ColorSwatches, type ColorSwatchesProps } from "./components/inputs/ColorSwatches";
+export { Combobox, type ComboboxProps } from "./components/inputs/Combobox";
+export { CommandPalette, type CommandPaletteProps } from "./components/actions/CommandPalette";
+export { CompareSlider, type CompareSliderProps } from "./components/media/CompareSlider";
+export { ContextMenu, type ContextMenuProps } from "./components/overlays/ContextMenu";
+export { CopyButton, type CopyButtonProps } from "./components/actions/CopyButton";
+export { DataTable, type DataTableProps } from "./components/data-display/DataTable";
+export { DatePicker, type DatePickerProps } from "./components/inputs/DatePicker";
+export { DateRangePicker, type DateRangePickerProps } from "./components/inputs/DateRangePicker";
+export { DescriptionList, type DescriptionListProps } from "./components/data-display/DescriptionList";
+export { Dialog, type DialogProps } from "./components/overlays/Dialog";
+export { DonutChart, type DonutChartProps } from "./components/data-display/DonutChart";
+export { Drawer, type DrawerProps } from "./components/overlays/Drawer";
+export { EditableText, type EditableTextProps } from "./components/inputs/EditableText";
+export { EmptyState, type EmptyStateProps } from "./components/feedback/EmptyState";
+export { ExpandableCard, type ExpandableCardProps } from "./components/layout/ExpandableCard";
+export { Field, type FieldProps } from "./components/inputs/Field";
+export { Fieldset, type FieldsetProps } from "./components/inputs/Fieldset";
+export { FileUpload, type FileUploadProps } from "./components/inputs/FileUpload";
+export { Footer, type FooterProps } from "./components/layout/Footer";
+export { Header, type HeaderProps } from "./components/layout/Header";
+export { HoldButton, type HoldButtonProps } from "./components/actions/HoldButton";
+export { Icon, type IconProps } from "./components/data-display/Icon";
+export { IconButton, type IconButtonProps } from "./components/actions/IconButton";
+export { Image, type ImageProps } from "./components/media/Image";
+export { Input, type InputProps } from "./components/inputs/Input";
+export { Island, type IslandProps } from "./components/overlays/Island";
+export { Kbd, type KbdProps } from "./components/data-display/Kbd";
+export { Lightbox, type LightboxProps } from "./components/media/Lightbox";
+export { LineChart, type LineChartProps } from "./components/data-display/LineChart";
+export { Link, LinkProvider, type LinkProps, type LinkProviderProps } from "./components/navigation/Link";
+export { List, type ListProps } from "./components/data-display/List";
+export { LoadingState, type LoadingStateProps } from "./components/feedback/LoadingState";
+export { MorphButton, type MorphButtonProps } from "./components/actions/MorphButton";
+export { MultiSelect, type MultiSelectProps } from "./components/inputs/MultiSelect";
+export { MusicPlayer, type MusicPlayerProps } from "./components/media/MusicPlayer";
+export { NotificationList, type NotificationListProps } from "./components/feedback/NotificationList";
+export { NumberInput, type NumberInputProps } from "./components/inputs/NumberInput";
+export { NumberStepper, type NumberStepperProps } from "./components/inputs/NumberStepper";
+export { NumberTicker, type NumberTickerProps } from "./components/data-display/NumberTicker";
+export { OTPInput, type OTPInputProps } from "./components/inputs/OTPInput";
+export { PageDots, type PageDotsProps } from "./components/navigation/PageDots";
+export { PageHeader, type PageHeaderProps } from "./components/layout/PageHeader";
+export { Pagination, type PaginationProps } from "./components/navigation/Pagination";
+export { PasswordInput, type PasswordInputProps } from "./components/inputs/PasswordInput";
+export { Popover, type PopoverProps } from "./components/overlays/Popover";
+export { ProgressBar, type ProgressBarProps } from "./components/feedback/ProgressBar";
+export { ProgressRing, type ProgressRingProps } from "./components/feedback/ProgressRing";
+export { RadioGroup, type RadioGroupProps } from "./components/inputs/RadioGroup";
+export { RangeSlider, type RangeSliderProps } from "./components/inputs/RangeSlider";
+export { Rating, type RatingProps } from "./components/inputs/Rating";
+export { SearchField, type SearchFieldProps } from "./components/inputs/SearchField";
+export { SegmentedTabs, type SegmentedTabsProps } from "./components/navigation/SegmentedTabs";
+export { Select, type SelectProps } from "./components/inputs/Select";
+export { SelectionBar, type SelectionBarProps } from "./components/actions/SelectionBar";
+export { Separator, type SeparatorProps } from "./components/layout/Separator";
+export { SidebarNav, type SidebarNavProps } from "./components/navigation/SidebarNav";
+export { Skeleton, type SkeletonProps } from "./components/feedback/Skeleton";
+export { Slider, type SliderProps } from "./components/inputs/Slider";
+export { Spinner, type SpinnerProps } from "./components/feedback/Spinner";
+export { SplitPane, type SplitPaneProps } from "./components/layout/SplitPane";
+export { StatTile, type StatTileProps } from "./components/data-display/StatTile";
+export { StatusBadge, type StatusBadgeProps } from "./components/feedback/StatusBadge";
+export { SwipeButton, type SwipeButtonProps } from "./components/actions/SwipeButton";
+export { TabBar, type TabBarProps } from "./components/navigation/TabBar";
+export { Table, type TableProps, type TableSort } from "./components/data-display/Table";
+export { Tabs, type TabsProps } from "./components/navigation/Tabs";
+export { Tag, type TagProps } from "./components/data-display/Tag";
+export { TagInput, type TagInputProps } from "./components/inputs/TagInput";
+export { Textarea, type TextareaProps } from "./components/inputs/Textarea";
+export { TextField, type TextFieldProps } from "./components/inputs/TextField";
+export { ThemeToggle, type ThemeToggleProps } from "./components/inputs/ThemeToggle";
+export { Timeline, type TimelineProps } from "./components/data-display/Timeline";
+export { TimePicker, type TimePickerProps } from "./components/inputs/TimePicker";
+export { TimeWheel, type TimeWheelProps } from "./components/inputs/TimeWheel";
+export { Toast, type ToastProps } from "./components/feedback/Toast";
+export { ToastStack, type ToastStackProps } from "./components/feedback/ToastStack";
+export { Toggle, type ToggleProps } from "./components/inputs/Toggle";
+export { ToggleGroup, type ToggleGroupProps } from "./components/inputs/ToggleGroup";
+export { Toolbar, type ToolbarProps } from "./components/actions/Toolbar";
+export { Tooltip, type TooltipProps } from "./components/overlays/Tooltip";
+export { TreeView, type TreeViewProps } from "./components/data-display/TreeView";
+export { UnderlineTabs, type UnderlineTabsProps } from "./components/navigation/UnderlineTabs";
+export { VideoControls, type VideoControlsProps } from "./components/media/VideoControls";
+export { VolumeSlider, type VolumeSliderProps } from "./components/media/VolumeSlider";
+export { WaveformScrubber, type WaveformScrubberProps } from "./components/media/WaveformScrubber";
+export { WizardSteps, type WizardStepsProps } from "./components/navigation/WizardSteps";