@bunnyapp/components 1.8.5 → 2.0.0-beta.1

package/dist/cjs/types/src/ui/components/Button/Button.rules.d.ts

@@ -0,0 +1,124 @@
+import type { ResolvedVariables } from '../../appearance/variables';
+export declare function buttonRules(v: ResolvedVariables): {
+    internal: {
+        '.ButtonBase': {
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            gap: string;
+            boxSizing: string;
+            margin: string;
+            padding: string;
+            fontFamily: string;
+            fontSize: string;
+            lineHeight: string;
+            textDecoration: string;
+            cursor: string;
+            transition: string;
+        };
+        '.ButtonBase:focus-visible': {
+            outline: string;
+            outlineOffset: string;
+        };
+        '.ButtonBase:disabled': {
+            cursor: string;
+        };
+        '.ButtonBase--loading': {
+            opacity: string;
+            cursor: string;
+            pointerEvents: string;
+        };
+        '.ButtonSpinner': {
+            display: string;
+            width: string;
+            marginInlineEnd: string;
+            overflow: string;
+            opacity: string;
+            transition: string;
+        };
+        '.ButtonBase--loading .ButtonSpinner': {
+            width: string;
+            marginInlineEnd: string;
+            opacity: string;
+        };
+        '.ButtonBase[aria-disabled="true"]': {
+            pointerEvents: string;
+        };
+        '.Button[aria-disabled="true"]': {
+            backgroundColor: string;
+            color: string;
+        };
+        '.ButtonSecondary[aria-disabled="true"]': {
+            borderColor: string;
+            backgroundColor: string;
+            color: string;
+        };
+        '.ButtonLink': {
+            minHeight: string;
+            padding: string;
+            border: string;
+            background: string;
+        };
+        '.ButtonLink[data-compact="true"]': {
+            padding: string;
+        };
+        '.Link.ButtonLink': {
+            color: string;
+        };
+        '.Link.ButtonLink:hover': {
+            color: string;
+        };
+        '.ButtonIcon': {
+            width: string;
+            height: string;
+            marginRight: string;
+            padding: string;
+            border: string;
+            borderRadius: string;
+            background: string;
+            color: string;
+        };
+        '.ButtonIcon:hover': {
+            backgroundColor: string;
+        };
+    };
+    public: {
+        '.Button': {
+            border: string;
+            borderRadius: string;
+            backgroundColor: string;
+            color: string;
+        };
+        '.Button:hover': {
+            backgroundColor: string;
+        };
+        '.Button:active': {
+            backgroundColor: string;
+        };
+        '.Button:disabled': {
+            backgroundColor: string;
+            color: string;
+        };
+        '.Button--compact': {
+            padding: string;
+        };
+        '.ButtonSecondary': {
+            border: string;
+            borderRadius: string;
+            backgroundColor: string;
+            color: string;
+        };
+        '.ButtonSecondary:hover': {
+            borderColor: string;
+            color: string;
+        };
+        '.ButtonSecondary:disabled': {
+            borderColor: string;
+            backgroundColor: string;
+            color: string;
+        };
+        '.ButtonSecondary--compact': {
+            padding: string;
+        };
+    };
+};

package/dist/cjs/types/src/ui/components/Button/Button.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Button from './Button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/cjs/types/src/ui/components/Card/Card.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * A raised surface for a group of content. Given `onClick` it is a button (a choice, such as a
+ * plan), and `selected` marks the chosen one (`aria-pressed`, `.Card--selected`).
+ */
+export default function Card({ as: Element, selected, onClick, className, style, children, }: {
+    as?: 'div' | 'section';
+    /** The chosen card of a group. Only for a clickable card. */
+    selected?: boolean;
+    onClick?: () => void;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/ui/components/Card/Card.rules.d.ts

@@ -0,0 +1,32 @@
+import type { ResolvedVariables } from '../../appearance/variables';
+export declare function cardRules(v: ResolvedVariables): {
+    internal: {
+        'button.Card': {
+            margin: string;
+            border: string;
+            font: string;
+            color: string;
+            textAlign: string;
+            cursor: string;
+            transition: string;
+        };
+        'button.Card:hover': {
+            boxShadow: string;
+        };
+        'button.Card:focus-visible': {
+            outline: string;
+            outlineOffset: string;
+        };
+    };
+    public: {
+        '.Card': {
+            backgroundColor: string;
+            borderRadius: string;
+            boxShadow: string;
+        };
+        '.Card:hover': {};
+        '.Card--selected': {
+            boxShadow: string;
+        };
+    };
+};

package/dist/cjs/types/src/ui/components/Card/Card.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Card from './Card';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/cjs/types/src/ui/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+/**
+ * A native checkbox (`.Checkbox`, `.Checkbox--checked` when ticked) with its label as `.Text`; the
+ * whole label toggles it. Controlled.
+ */
+export default function Checkbox({ checked, onChange, disabled, id, className, children, }: {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    /** The label. */
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/ui/components/Checkbox/Checkbox.rules.d.ts

@@ -0,0 +1,52 @@
+import type { ResolvedVariables } from '../../appearance/variables';
+export declare function checkboxRules(v: ResolvedVariables): {
+    internal: {
+        '.CheckboxBase': {
+            appearance: string;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            flexShrink: string;
+            boxSizing: string;
+            width: string;
+            height: string;
+            margin: string;
+            cursor: string;
+        };
+        '.CheckboxBase::after': {
+            content: string;
+            boxSizing: string;
+            width: string;
+            height: string;
+            marginTop: string;
+            borderStyle: string;
+            borderColor: string;
+            borderWidth: string;
+            transform: string;
+            opacity: string;
+        };
+        '.CheckboxBase:checked::after': {
+            opacity: string;
+        };
+        '.CheckboxBase:focus-visible': {
+            outline: string;
+            outlineOffset: string;
+        };
+        '.CheckboxBase:disabled': {
+            cursor: string;
+            opacity: string;
+        };
+    };
+    public: {
+        '.Checkbox': {
+            border: string;
+            borderRadius: string;
+            backgroundColor: string;
+            transition: string;
+        };
+        '.Checkbox--checked': {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+};

package/dist/cjs/types/src/ui/components/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Checkbox from './Checkbox';
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/cjs/types/src/ui/components/Divider/Divider.d.ts

@@ -0,0 +1,11 @@
+import type { CSSProperties } from 'react';
+/**
+ * A line between sections: horizontal, or with `orientation="vertical"` between items in a row.
+ * `bleed` runs a horizontal one across its container's 16px padding, edge to edge.
+ */
+export default function Divider({ orientation, bleed, className, style, }: {
+    orientation?: 'horizontal' | 'vertical';
+    bleed?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/ui/components/Divider/Divider.rules.d.ts

@@ -0,0 +1,23 @@
+import type { ResolvedVariables } from '../../appearance/variables';
+export declare function dividerRules(v: ResolvedVariables): {
+    internal: {
+        '.Divider.Vertical': {
+            borderTop: string;
+            borderLeft: string;
+            alignSelf: string;
+            height: string;
+            margin: string;
+        };
+        '.Divider.Bleed': {
+            marginLeft: string;
+            marginRight: string;
+        };
+    };
+    public: {
+        '.Divider': {
+            margin: string;
+            border: string;
+            borderTop: string;
+        };
+    };
+};

package/dist/cjs/types/src/ui/components/Divider/Divider.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Divider from './Divider';
+declare const meta: Meta<typeof Divider>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/cjs/types/src/ui/components/Document/Document.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties, ReactNode } from 'react';
+/** The paper an invoice, a quote or a checkout's quote PDF is drawn on. Layout comes from `className`. */
+export default function Document({ className, style, children, }: {
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/ui/components/Document/Document.rules.d.ts

@@ -0,0 +1,12 @@
+import type { ResolvedVariables } from '../../appearance/variables';
+export declare function documentRules(v: ResolvedVariables): {
+    internal: {};
+    public: {
+        '.Document': {
+            backgroundColor: string;
+            borderRadius: string;
+            boxShadow: string;
+            padding: string;
+        };
+    };
+};

package/dist/cjs/types/src/ui/components/Document/Document.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Document from './Document';
+declare const meta: Meta<typeof Document>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/cjs/types/src/ui/components/Drawer/Drawer.d.ts

@@ -0,0 +1,9 @@
+import { type DrawerProps } from 'antd';
+/**
+ * antd's `Drawer`, carrying the appearance scope class so rules reach it inside its portal. The panel is
+ * the `.Drawer` region; its look is in `Drawer.rules.ts`. The title is always drawn as a `.Text`: a string
+ * as a span, any other node inside a div, so it takes the theme's text colour rather than antd's title
+ * colour. An empty title draws none, though the header stays for the close button, which sits at the end
+ * of it unless the caller sets `closable` or `closeIcon`.
+ */
+export default function Drawer({ title, closable, closeIcon, classNames, rootClassName, ...props }: DrawerProps): import("react").JSX.Element;

package/dist/cjs/types/src/ui/components/Drawer/Drawer.rules.d.ts

@@ -0,0 +1,28 @@
+import type { RuleContext } from '../../appearance/ruleGroups';
+import type { ResolvedVariables } from '../../appearance/variables';
+export declare function drawerRules(v: ResolvedVariables, { isMobile }: RuleContext): {
+    internal: {
+        '.DrawerHeader': {
+            alignItems: string;
+            padding: string;
+            borderBottom: string;
+        };
+        '.DrawerBody': {
+            backgroundColor: string;
+        };
+        '.DrawerClose': {
+            color: string;
+        };
+        '.DrawerClose:hover': {
+            color: string;
+        };
+    };
+    public: {
+        '.Drawer': {
+            backgroundColor: string;
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+        };
+    };
+};

package/dist/cjs/types/src/ui/components/Drawer/Drawer.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Appearance } from '../../appearance/types';
+type Args = {
+    appearance?: Appearance;
+};
+declare const meta: Meta<Args>;
+export default meta;
+type Story = StoryObj<Args>;
+export declare const Default: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/cjs/types/src/ui/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,3 @@
+import { type DropdownProps } from 'antd';
+/** antd's `Dropdown`, carrying the appearance scope class so rules reach it inside its portal. */
+export default function Dropdown(props: DropdownProps): import("react").JSX.Element;

package/dist/cjs/types/src/ui/components/Field/Field.d.ts

@@ -0,0 +1,25 @@
+import { type FormItemProps, type FormRule } from 'antd';
+import type { ReactElement, ReactNode } from 'react';
+/**
+ * One row of the form without a value of its own (the payment method tiles, Stripe's Payment
+ * Element): an optional label over the content. Give the label an id to name a group with it.
+ */
+export declare function FormRow({ label, labelId, children }: {
+    label?: ReactNode;
+    labelId?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A form field: label, control and validation messages, all our own elements so the appearance's
+ * `.Label` and `.Error` rules apply to them directly. antd's `Form.Item` only does the wiring
+ * (`noStyle`, so it renders nothing itself): it hands the control its `id` (the field name, as the
+ * form is unnamed), `value`, `onChange`, `aria-invalid` and `aria-describedby="<name>_help"`.
+ */
+export default function Field({ name, label, rules, required, children, }: {
+    name: NonNullable<FormItemProps['name']>;
+    label: ReactNode;
+    rules?: FormRule[];
+    /** Marks the label with a red `*`. Only the mark: validation still comes from `rules`. */
+    required?: boolean;
+    children: ReactElement;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/ui/components/Field/Field.rules.d.ts

@@ -0,0 +1,41 @@
+import type { ResolvedVariables } from '../../appearance/variables';
+export declare function fieldRules(v: ResolvedVariables): {
+    internal: {
+        '.Fieldset': {
+            minWidth: string;
+            margin: string;
+            padding: string;
+            border: string;
+        };
+        '.Field': {
+            marginBottom: string;
+        };
+        '.LabelBase': {
+            display: string;
+            width: string;
+            lineHeight: string;
+        };
+        '.ErrorBase': {
+            marginTop: string;
+            lineHeight: string;
+        };
+        '.RequiredMark': {
+            marginInlineEnd: string;
+            fontFamily: string;
+            fontSize: string;
+            color: string;
+        };
+    };
+    public: {
+        '.Label': {
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+            marginBottom: string;
+        };
+        '.Error': {
+            fontSize: string;
+            color: string;
+        };
+    };
+};

package/dist/cjs/types/src/ui/components/Field/Field.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Field from './Field';
+declare const meta: Meta<typeof Field>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/cjs/types/src/ui/components/Link/Link.d.ts

@@ -0,0 +1,3 @@
+import type { AnchorHTMLAttributes } from 'react';
+/** A native link, muted like secondary text. */
+export default function Link({ className, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>): import("react").JSX.Element;

package/dist/cjs/types/src/ui/components/Link/Link.rules.d.ts

@@ -0,0 +1,20 @@
+import type { ResolvedVariables } from '../../appearance/variables';
+export declare function linkRules(v: ResolvedVariables): {
+    internal: {
+        '.Link:focus-visible': {
+            borderRadius: string;
+            outline: string;
+            outlineOffset: string;
+        };
+    };
+    public: {
+        '.Link': {
+            color: string;
+            textDecoration: string;
+            transition: string;
+        };
+        '.Link:hover': {
+            color: string;
+        };
+    };
+};

package/dist/cjs/types/src/ui/components/Link/Link.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Link from './Link';
+declare const meta: Meta<typeof Link>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/cjs/types/src/ui/components/Modal/Modal.d.ts

@@ -0,0 +1,8 @@
+import { type ModalProps } from 'antd';
+/**
+ * antd's `Modal`, carrying the appearance scope class so rules reach it inside its portal. The panel is
+ * the `.Modal` region; its look is in `Modal.rules.ts`. The title is always drawn as a strong `.Text`: a
+ * string as a span, any other node inside a div, so it takes the theme's text colour rather than antd's
+ * title colour. An empty title draws no title bar.
+ */
+export default function Modal({ title, closeIcon, classNames, rootClassName, ...props }: ModalProps): import("react").JSX.Element;

package/dist/cjs/types/src/ui/components/Modal/Modal.rules.d.ts

@@ -0,0 +1,23 @@
+import type { ResolvedVariables } from '../../appearance/variables';
+export declare function modalRules(v: ResolvedVariables): {
+    internal: {
+        '.ModalHeader': {
+            backgroundColor: string;
+            color: string;
+        };
+        '.ModalClose': {
+            color: string;
+        };
+        '.ModalClose:hover': {
+            color: string;
+        };
+    };
+    public: {
+        '.Modal': {
+            backgroundColor: string;
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+        };
+    };
+};

package/dist/cjs/types/src/ui/components/Modal/Modal.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Appearance } from '../../appearance/types';
+type Args = {
+    appearance?: Appearance;
+};
+declare const meta: Meta<Args>;
+export default meta;
+type Story = StoryObj<Args>;
+export declare const Default: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/cjs/types/src/ui/components/Popconfirm/Popconfirm.d.ts

@@ -0,0 +1,18 @@
+import { type PopoverProps } from 'antd';
+import { type ReactNode } from 'react';
+type Props = Pick<PopoverProps, 'placement' | 'children'> & {
+    title: ReactNode;
+    description?: ReactNode;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    okText?: ReactNode;
+    cancelText?: ReactNode;
+};
+/**
+ * A confirmation bubble that opens on click: antd's `Popover`, carrying the appearance scope class so rules reach
+ * it inside its portal, holding our own `Text` and `Button`s. Like `Modal` and `Drawer`, the panel follows the
+ * nearest appearance rather than only the provider's antd theme; its look is in `Popconfirm.rules.ts`. Either
+ * button closes it.
+ */
+export default function Popconfirm({ title, description, onConfirm, onCancel, okText, cancelText, ...props }: Props): import("react").JSX.Element;
+export {};

package/dist/cjs/types/src/ui/components/Popconfirm/Popconfirm.rules.d.ts

@@ -0,0 +1,16 @@
+import type { ResolvedVariables } from '../../appearance/variables';
+export declare function popconfirmRules(v: ResolvedVariables): {
+    internal: {
+        '.Popconfirm': {
+            maxWidth: string;
+            backgroundColor: string;
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+        };
+        '.ant-popover-arrow:has(+ .ant-popover-content .Popconfirm)': {
+            '--antd-arrow-background-color': string;
+        };
+    };
+    public: {};
+};

package/dist/cjs/types/src/ui/components/Segmented/Segmented.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A row of exclusive choices drawn as pills in a track (`.Segmented`), each option a `.SegmentedOption`
+ * and the chosen one `.SegmentedOption--selected` (a radio's `aria-checked`). Controlled.
+ */
+export default function Segmented<T extends string | null | undefined>({ options, value, onChange, fullWidth, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: {
+    options: {
+        value: T;
+        label: string | null | undefined;
+    }[];
+    value: T;
+    onChange: (value: T) => void;
+    /** Stretches the track, and its options, across the container. */
+    fullWidth?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/ui/components/Segmented/Segmented.rules.d.ts

@@ -0,0 +1,46 @@
+import type { ResolvedVariables } from '../../appearance/variables';
+export declare function segmentedRules(v: ResolvedVariables): {
+    internal: {
+        '.SegmentedBase': {
+            display: string;
+            alignItems: string;
+        };
+        '.SegmentedOption + .SegmentedOption': {
+            marginLeft: string;
+        };
+        '.SegmentedOption:focus-visible': {
+            outline: string;
+            outlineOffset: string;
+        };
+    };
+    public: {
+        '.Segmented': {
+            backgroundColor: string;
+            borderRadius: string;
+            padding: string;
+        };
+        '.SegmentedOption': {
+            padding: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            border: string;
+            borderRadius: string;
+            backgroundColor: string;
+            color: string;
+            transition: string;
+        };
+        '.SegmentedOption:hover': {
+            color: string;
+        };
+        '.SegmentedOption--selected': {
+            backgroundColor: string;
+            color: string;
+        };
+        '.SegmentedOption--selected:hover': {
+            backgroundColor: string;
+            color: string;
+        };
+    };
+};