panelui-web 0.4.0 → 0.5.0

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

@@ -0,0 +1,111 @@
+/**
+ * Button — something to press, in the weight its action deserves.
+ *
+ * ```tsx
+ * <Button>Save</Button>
+ * <Button variant="outline" size="sm">Cancel</Button>
+ * <Button variant="ghost" size="icon" aria-label="Close"><XIcon /></Button>
+ * <Button loading>Saving</Button>
+ * ```
+ *
+ * ## Weight
+ *
+ * `default` is the one action a view is for, and there should be one of it.
+ * `secondary` and `outline` are the actions beside it, `ghost` the ones that
+ * should not draw the eye until they are looked for, and `destructive` the
+ * one that cannot be taken back.
+ *
+ * ## Loading
+ *
+ * `loading` sets a spinner over the label and stops presses. The label stays
+ * in place, hidden, so the width does not change: a button that resizes as it
+ * is pressed moves whatever sits beside it.
+ */
+import type { ComponentProps } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        outline: string;
+        ghost: string;
+        destructive: string;
+        link: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        'icon-sm': string;
+        icon: string;
+        'icon-lg': string;
+    };
+    /** `pill` rounds the ends fully, whatever the size. */
+    shape: {
+        default: string;
+        pill: string;
+    };
+}, undefined, string[], {
+    variant: {
+        default: string;
+        secondary: string;
+        outline: string;
+        ghost: string;
+        destructive: string;
+        link: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        'icon-sm': string;
+        icon: string;
+        'icon-lg': string;
+    };
+    /** `pill` rounds the ends fully, whatever the size. */
+    shape: {
+        default: string;
+        pill: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        outline: string;
+        ghost: string;
+        destructive: string;
+        link: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        'icon-sm': string;
+        icon: string;
+        'icon-lg': string;
+    };
+    /** `pill` rounds the ends fully, whatever the size. */
+    shape: {
+        default: string;
+        pill: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>['variant']>;
+export type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>['size']>;
+export interface ButtonProps extends ComponentProps<'button'> {
+    /** How much the button asks to be pressed. Default `default`. */
+    variant?: ButtonVariant;
+    /** Its height and padding. The `icon` sizes are square, for a button that holds only an icon. Default `md`. */
+    size?: ButtonSize;
+    /** `pill` rounds the ends fully. Default `default`. */
+    shape?: 'default' | 'pill';
+    /** Shows a spinner over the label, sets `aria-busy` and stops presses, keeping the width. */
+    loading?: boolean;
+}
+/** A button. Every attribute of `<button>` passes through. */
+declare function ButtonRoot({ variant, size, shape, loading, disabled, type, className, children, ...props }: ButtonProps): import("react").JSX.Element;
+declare namespace ButtonRoot {
+    var displayName: string;
+}
+export declare const Button: typeof ButtonRoot;
+export {};

package/dist/components/button/index.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from 'tailwind-variants';
+export const buttonVariants = tv({
+    base: [
+        'relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap font-medium outline-none',
+        'transition-[background-color,color,border-color,box-shadow,scale] duration-150',
+        'focus-visible:ring-[3px] focus-visible:ring-ring/40',
+        'active:not-disabled:scale-[0.97] motion-reduce:active:scale-100',
+        'disabled:cursor-default disabled:opacity-50 aria-busy:cursor-progress',
+        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+    ],
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground shadow-xs inset-shadow-[0_1px_0_rgb(255_255_255/0.12)] hover:not-disabled:bg-primary/90',
+            secondary: 'bg-secondary text-secondary-foreground hover:not-disabled:bg-secondary/80',
+            outline: 'border bg-background text-foreground shadow-xs hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground dark:bg-input/30',
+            ghost: 'text-foreground hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground',
+            destructive: 'bg-destructive text-white shadow-xs hover:not-disabled:bg-destructive/90 focus-visible:ring-destructive/40',
+            link: 'text-foreground underline-offset-4 hover:underline',
+        },
+        size: {
+            sm: 'h-8 rounded-md px-3 text-[0.8125rem]',
+            md: 'h-9 rounded-lg px-4 text-sm',
+            lg: 'h-11 rounded-xl px-5 text-[0.9375rem]',
+            'icon-sm': 'size-8 rounded-md',
+            icon: 'size-9 rounded-lg',
+            'icon-lg': 'size-11 rounded-xl [&_svg:not([class*=size-])]:size-5',
+        },
+        /** `pill` rounds the ends fully, whatever the size. */
+        shape: {
+            default: '',
+            pill: 'rounded-full',
+        },
+    },
+    defaultVariants: { variant: 'default', size: 'md', shape: 'default' },
+});
+function Spinner() {
+    return (_jsx("svg", { "aria-hidden": "true", "data-slot": "button-spinner", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", className: "absolute inset-0 m-auto animate-spin motion-reduce:animate-none", children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.22-8.56" }) }));
+}
+/** A button. Every attribute of `<button>` passes through. */
+function ButtonRoot({ variant, size, shape, loading = false, disabled, type = 'button', className, children, ...props }) {
+    return (_jsxs("button", { type: type, "data-slot": "button", "data-variant": variant ?? 'default', "aria-busy": loading || undefined, disabled: disabled || loading, className: buttonVariants({ variant, size, shape, className }), ...props, children: [loading ? _jsx(Spinner, {}) : null, _jsx("span", { className: loading ? 'invisible contents' : 'contents', children: children })] }));
+}
+ButtonRoot.displayName = 'Button';
+export const Button = ButtonRoot;

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

@@ -0,0 +1,55 @@
+/**
+ * Input — a single line to type into.
+ *
+ * ```tsx
+ * <Input placeholder="you@example.com" type="email" />
+ *
+ * <Input.Group>
+ *   <Input.Addon><SearchIcon /></Input.Addon>
+ *   <Input placeholder="Search" />
+ *   <Input.Addon align="end"><kbd>⌘K</kbd></Input.Addon>
+ * </Input.Group>
+ * ```
+ *
+ * ## The group owns the box
+ *
+ * On its own, the input draws its border, background and focus ring. Inside
+ * `Input.Group`, it drops all three and the group draws them around the input
+ * and its addons together, so an icon or a unit reads as part of the field and
+ * the ring goes round the whole of it. Pressing an addon that is not a button
+ * moves focus into the input.
+ */
+import type { ComponentProps } from 'react';
+export type InputSize = 'sm' | 'md' | 'lg';
+export interface InputProps extends Omit<ComponentProps<'input'>, 'size'> {
+    /** Its height and text size. Inside a group, set it on the group instead. Default `md`. */
+    size?: InputSize;
+}
+/** A single-line field. Every attribute of `<input>` passes through. */
+declare function InputRoot({ size, className, type, ...props }: InputProps): import("react").JSX.Element;
+declare namespace InputRoot {
+    var displayName: string;
+}
+export interface InputGroupProps extends ComponentProps<'div'> {
+    /** The height of the input and its addons together. Default `md`. */
+    size?: InputSize;
+}
+/** Draws one box round an input and its addons. */
+declare function InputGroup({ size, className, ...props }: InputGroupProps): import("react").JSX.Element;
+declare namespace InputGroup {
+    var displayName: string;
+}
+export interface InputAddonProps extends ComponentProps<'div'> {
+    /** Which side of the input it sits on, whatever its place in the markup. Default `start`. */
+    align?: 'start' | 'end';
+}
+/** An icon, unit, shortcut or button beside the input, inside its box. */
+declare function InputAddon({ align, className, onMouseDown, ...props }: InputAddonProps): import("react").JSX.Element;
+declare namespace InputAddon {
+    var displayName: string;
+}
+export declare const Input: typeof InputRoot & {
+    Group: typeof InputGroup;
+    Addon: typeof InputAddon;
+};
+export { InputGroup, InputAddon };

package/dist/components/input/index.js

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from 'tailwind-variants';
+const inputVariants = tv({
+    slots: {
+        input: [
+            'w-full min-w-0 bg-transparent text-foreground outline-none',
+            'placeholder:text-muted-foreground/80 selection:bg-primary selection:text-primary-foreground',
+            'file:me-3 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
+            'disabled:cursor-not-allowed disabled:opacity-50',
+            // Alone, it is the box. In a group, the group is.
+            'not-in-data-[slot=input-group]:rounded-lg not-in-data-[slot=input-group]:border not-in-data-[slot=input-group]:border-input',
+            'not-in-data-[slot=input-group]:bg-background not-in-data-[slot=input-group]:shadow-xs dark:not-in-data-[slot=input-group]:bg-input/30',
+            'not-in-data-[slot=input-group]:transition-[border-color,box-shadow]',
+            'not-in-data-[slot=input-group]:focus-visible:border-ring not-in-data-[slot=input-group]:focus-visible:ring-[3px] not-in-data-[slot=input-group]:focus-visible:ring-ring/30',
+            'aria-invalid:not-in-data-[slot=input-group]:border-destructive aria-invalid:not-in-data-[slot=input-group]:ring-destructive/20',
+        ],
+        group: [
+            'group/input flex w-full min-w-0 items-center rounded-lg border border-input bg-background shadow-xs transition-[border-color,box-shadow] dark:bg-input/30',
+            'has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-ring/30',
+            'has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]]:ring-destructive/20',
+            'has-[input:disabled]:opacity-50',
+        ],
+        addon: [
+            'flex shrink-0 cursor-text items-center gap-1.5 text-sm text-muted-foreground select-none',
+            '[&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',
+            '[&_kbd]:rounded [&_kbd]:border [&_kbd]:bg-muted [&_kbd]:px-1.5 [&_kbd]:font-sans [&_kbd]:text-xs',
+            // Padded to the group's size, read from the group so it is set once.
+            'px-3 group-data-[size=sm]/input:px-2.5 group-data-[size=lg]/input:px-3.5',
+        ],
+    },
+    variants: {
+        size: {
+            sm: { input: 'h-8 px-2.5 text-[0.8125rem]', group: 'h-8' },
+            md: { input: 'h-9 px-3 text-sm', group: 'h-9' },
+            lg: { input: 'h-11 px-3.5 text-[0.9375rem]', group: 'h-11 rounded-xl' },
+        },
+        align: {
+            // An addon sits closer to the text it belongs to than to the edge.
+            start: { addon: 'order-first -me-1.5' },
+            end: { addon: 'order-last -ms-1.5' },
+        },
+    },
+    compoundVariants: [
+        // In a group the input's own height is the group's, minus its border.
+        // Its text and padding follow the group's size too, so the size is set once.
+        {
+            size: ['sm', 'md', 'lg'],
+            className: {
+                input: 'in-data-[slot=input-group]:h-full group-data-[size=sm]/input:px-2.5 group-data-[size=sm]/input:text-[0.8125rem] group-data-[size=lg]/input:px-3.5 group-data-[size=lg]/input:text-[0.9375rem]',
+            },
+        },
+    ],
+    defaultVariants: { size: 'md', align: 'start' },
+});
+/** A single-line field. Every attribute of `<input>` passes through. */
+function InputRoot({ size, className, type = 'text', ...props }) {
+    return (_jsx("input", { type: type, "data-slot": "input", className: inputVariants({ size }).input({ className }), ...props }));
+}
+InputRoot.displayName = 'Input';
+/** Draws one box round an input and its addons. */
+function InputGroup({ size, className, ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "input-group", "data-size": size ?? 'md', className: inputVariants({ size }).group({ className }), ...props }));
+}
+InputGroup.displayName = 'Input.Group';
+/** An icon, unit, shortcut or button beside the input, inside its box. */
+function InputAddon({ align, className, onMouseDown, ...props }) {
+    // A press on the addon's own surface is a press on the field. A button or
+    // link inside it is left to do what it does.
+    const focusField = (event) => {
+        onMouseDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (event.target.closest('button, a, input, select, textarea'))
+            return;
+        const input = event.currentTarget.parentElement?.querySelector('input');
+        if (!input)
+            return;
+        event.preventDefault();
+        input.focus();
+    };
+    return (_jsx("div", { "data-slot": "input-addon", "data-align": align ?? 'start', className: inputVariants({ align }).addon({ className }), onMouseDown: focusField, ...props }));
+}
+InputAddon.displayName = 'Input.Addon';
+export const Input = Object.assign(InputRoot, {
+    Group: InputGroup,
+    Addon: InputAddon,
+});
+export { InputGroup, InputAddon };

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

@@ -0,0 +1,202 @@
+/**
+ * Menu — a list of actions that opens from a button.
+ *
+ * ```tsx
+ * <Menu>
+ *   <Menu.Trigger render={<Button variant="outline" />}>Options</Menu.Trigger>
+ *   <Menu.Content>
+ *     <Menu.Item onClick={rename}>
+ *       <PencilIcon /> Rename <Menu.Shortcut>⌘R</Menu.Shortcut>
+ *     </Menu.Item>
+ *     <Menu.Sub>
+ *       <Menu.SubTrigger><ShareIcon /> Share</Menu.SubTrigger>
+ *       <Menu.SubContent>
+ *         <Menu.Item>Copy link</Menu.Item>
+ *       </Menu.SubContent>
+ *     </Menu.Sub>
+ *     <Menu.Separator />
+ *     <Menu.CheckboxItem checked={pinned} onCheckedChange={setPinned}>Pinned</Menu.CheckboxItem>
+ *     <Menu.Item variant="destructive">Delete</Menu.Item>
+ *   </Menu.Content>
+ * </Menu>
+ * ```
+ *
+ * ## One row shape
+ *
+ * Every row is the same: an icon, the label, and whatever belongs at the end
+ * of it, a shortcut, a badge, a check or the chevron of a submenu. Icons are
+ * written as the row's first child and sized by the row, so rows with and
+ * without them still line up when every row in a group has one.
+ *
+ * ## Submenus
+ *
+ * A submenu opens to the side when its row is hovered or pressed, or with
+ * the right arrow key, and closes with the left one. The pointer can cross
+ * diagonally to it without closing it on the way.
+ *
+ * ## Items that stay open
+ *
+ * Pressing an item closes the menu. A check item or a radio item keeps it
+ * open, so several can be switched in a row; pass `closeOnClick` to change
+ * either.
+ */
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import type { ComponentProps, ReactNode } from 'react';
+export interface MenuProps extends BaseMenu.Root.Props {
+}
+/** Holds whether the menu is open. Takes `open`/`onOpenChange`, `defaultOpen` and `modal`. */
+declare function MenuRoot(props: MenuProps): import("react").JSX.Element;
+declare namespace MenuRoot {
+    var displayName: string;
+}
+export interface MenuTriggerProps extends BaseMenu.Trigger.Props {
+}
+/** The button that opens the menu. `render` draws it as another element, such as a `Button`. */
+declare function MenuTrigger(props: MenuTriggerProps): import("react").JSX.Element;
+declare namespace MenuTrigger {
+    var displayName: string;
+}
+interface PlacementProps {
+    /** Which side of the trigger it opens on. Default `bottom`; a submenu opens to the side. */
+    side?: BaseMenu.Positioner.Props['side'];
+    /** How it lines up with the trigger along that side. Default `start`. */
+    align?: BaseMenu.Positioner.Props['align'];
+    /** The gap between the trigger and the menu, in pixels. Default `6`. */
+    sideOffset?: number;
+    /** Moves it along the side, in pixels. */
+    alignOffset?: number;
+}
+export interface MenuContentProps extends BaseMenu.Popup.Props, PlacementProps {
+    /** Where in the document the menu is put. Default `document.body`. */
+    container?: BaseMenu.Portal.Props['container'];
+    /** What it is placed against instead of the trigger: an element or a ref to one. */
+    anchor?: BaseMenu.Positioner.Props['anchor'];
+    className?: string;
+}
+/** The list, opened in a layer over the page. It moves to the other side when there is no room. */
+declare function MenuContent({ side, align, sideOffset, alignOffset, container, anchor, className, ...props }: MenuContentProps): import("react").JSX.Element;
+declare namespace MenuContent {
+    var displayName: string;
+}
+export interface MenuItemProps extends BaseMenu.Item.Props {
+    /** `destructive` draws it in the destructive colour, for an action that cannot be undone. Default `default`. */
+    variant?: 'default' | 'destructive';
+    className?: string;
+}
+/** One action. Put an icon first, then the label, then a `Menu.Shortcut` or `Menu.Badge` if it has one. */
+declare function MenuItem({ variant, className, ...props }: MenuItemProps): import("react").JSX.Element;
+declare namespace MenuItem {
+    var displayName: string;
+}
+export interface MenuCheckboxItemProps extends BaseMenu.CheckboxItem.Props {
+    className?: string;
+}
+/** An item that is switched on and off, with a check at its end while on. The menu stays open. */
+declare function MenuCheckboxItem({ className, children, ...props }: MenuCheckboxItemProps): import("react").JSX.Element;
+declare namespace MenuCheckboxItem {
+    var displayName: string;
+}
+export interface MenuRadioGroupProps extends BaseMenu.RadioGroup.Props {
+    className?: string;
+}
+/** Radio items of which one is chosen. Takes `value` and `onValueChange`. */
+declare function MenuRadioGroup({ className, ...props }: MenuRadioGroupProps): import("react").JSX.Element;
+declare namespace MenuRadioGroup {
+    var displayName: string;
+}
+export interface MenuRadioItemProps extends BaseMenu.RadioItem.Props {
+    className?: string;
+}
+/** One choice in a radio group, with a check at its end while chosen. */
+declare function MenuRadioItem({ className, children, ...props }: MenuRadioItemProps): import("react").JSX.Element;
+declare namespace MenuRadioItem {
+    var displayName: string;
+}
+export interface MenuSubProps extends BaseMenu.SubmenuRoot.Props {
+}
+/** A submenu: a `Menu.SubTrigger` row and the `Menu.SubContent` it opens. */
+declare function MenuSub(props: MenuSubProps): import("react").JSX.Element;
+declare namespace MenuSub {
+    var displayName: string;
+}
+export interface MenuSubTriggerProps extends BaseMenu.SubmenuTrigger.Props {
+    className?: string;
+    /** Something before the chevron, such as a `Menu.Badge`. */
+    end?: ReactNode;
+}
+/** The row that opens a submenu, with a chevron at its end. It opens on hover as well as on press. */
+declare function MenuSubTrigger({ className, children, end, openOnHover, delay, ...props }: MenuSubTriggerProps): import("react").JSX.Element;
+declare namespace MenuSubTrigger {
+    var displayName: string;
+}
+export interface MenuSubContentProps extends Omit<MenuContentProps, 'side'> {
+    /** Default `inline-end`: to the right in a left-to-right page. */
+    side?: BaseMenu.Positioner.Props['side'];
+}
+/** The submenu's list, opened beside its row with the first item level with it. */
+declare function MenuSubContent({ side, align, sideOffset, alignOffset, ...props }: MenuSubContentProps): import("react").JSX.Element;
+declare namespace MenuSubContent {
+    var displayName: string;
+}
+export interface MenuGroupProps extends BaseMenu.Group.Props {
+    className?: string;
+}
+/** Items that belong together, under a `Menu.GroupLabel`. */
+declare function MenuGroup({ className, ...props }: MenuGroupProps): import("react").JSX.Element;
+declare namespace MenuGroup {
+    var displayName: string;
+}
+export interface MenuGroupLabelProps extends BaseMenu.GroupLabel.Props {
+    className?: string;
+}
+/** The heading of a group. Screen readers announce the group by it. */
+declare function MenuGroupLabel({ className, ...props }: MenuGroupLabelProps): import("react").JSX.Element;
+declare namespace MenuGroupLabel {
+    var displayName: string;
+}
+export interface MenuSeparatorProps extends ComponentProps<'div'> {
+}
+/** A rule between groups of items. */
+declare function MenuSeparator({ className, ...props }: MenuSeparatorProps): import("react").JSX.Element;
+declare namespace MenuSeparator {
+    var displayName: string;
+}
+export interface MenuDescriptionProps extends ComponentProps<'span'> {
+}
+/** What an item does, in quieter words after its label. */
+declare function MenuDescription({ className, ...props }: MenuDescriptionProps): import("react").JSX.Element;
+declare namespace MenuDescription {
+    var displayName: string;
+}
+export interface MenuShortcutProps extends ComponentProps<'kbd'> {
+}
+/** The keys for an item, at its end. It only shows them: wire the keys up where the action lives. */
+declare function MenuShortcut({ className, ...props }: MenuShortcutProps): import("react").JSX.Element;
+declare namespace MenuShortcut {
+    var displayName: string;
+}
+export interface MenuBadgeProps extends ComponentProps<'span'> {
+}
+/** A small count or flag at an item's end: how many need attention, or that something is new. */
+declare function MenuBadge({ className, ...props }: MenuBadgeProps): import("react").JSX.Element;
+declare namespace MenuBadge {
+    var displayName: string;
+}
+export declare const Menu: typeof MenuRoot & {
+    Trigger: typeof MenuTrigger;
+    Content: typeof MenuContent;
+    Item: typeof MenuItem;
+    CheckboxItem: typeof MenuCheckboxItem;
+    RadioGroup: typeof MenuRadioGroup;
+    RadioItem: typeof MenuRadioItem;
+    Sub: typeof MenuSub;
+    SubTrigger: typeof MenuSubTrigger;
+    SubContent: typeof MenuSubContent;
+    Group: typeof MenuGroup;
+    GroupLabel: typeof MenuGroupLabel;
+    Separator: typeof MenuSeparator;
+    Description: typeof MenuDescription;
+    Shortcut: typeof MenuShortcut;
+    Badge: typeof MenuBadge;
+};
+export { MenuTrigger, MenuContent, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubTrigger, MenuSubContent, MenuGroup, MenuGroupLabel, MenuSeparator, MenuDescription, MenuShortcut, MenuBadge, };