@forte-ui/react 1.0.0-alpha.1

package/dist/components/calendar/Calendar.d.ts

@@ -0,0 +1,201 @@
+import { ButtonVariant } from '../button';
+import * as React from "react";
+export type CalendarMode = "single" | "multiple" | "range";
+export type CalendarSize = "sm" | "md" | "lg";
+export type CalendarCaptionLayout = "label" | "dropdown" | "dropdown-months" | "dropdown-years";
+/** A contiguous span of days. `to` is absent while the second end is still being picked. */
+export interface CalendarRange {
+    from: Date;
+    to?: Date | undefined;
+}
+/**
+ * What `selected` holds for a given `mode`. This is the type that makes
+ * `onSelect={setDate}` typecheck against a plain `useState<Date>()` — the
+ * component is generic over its mode so the callback is not widened to the
+ * union of all three shapes.
+ */
+export type CalendarSelection<M extends CalendarMode = "single"> = M extends "single" ? Date : M extends "multiple" ? Date[] : CalendarRange;
+/**
+ * Describes a SET of days — what `disabled` takes.
+ *
+ * `{ before, after }` given together is the exclusive interval between them —
+ * after `after` AND before `before` — which is how you disable a gap in the
+ * middle. Either one alone is the open-ended half you would expect.
+ */
+export type CalendarMatcher = boolean | Date | CalendarRange | {
+    before?: Date;
+    after?: Date;
+} | {
+    dayOfWeek: number | number[];
+} | ((date: Date) => boolean) | readonly CalendarMatcher[];
+/** Strings the component speaks. Override them to localise the chrome. */
+export interface CalendarLabels {
+    /** Accessible name of the whole calendar. @default "Calendar" */
+    calendar?: string;
+    /** Accessible name of the back arrow. @default "Previous month" */
+    previousMonth?: string;
+    /** Accessible name of the forward arrow. @default "Next month" */
+    nextMonth?: string;
+    /** Accessible name of the month dropdown. @default "Month" */
+    monthDropdown?: string;
+    /** Accessible name of the year dropdown. @default "Year" */
+    yearDropdown?: string;
+    /** Accessible name of the week-number column. @default "Week" */
+    weekNumber?: string;
+}
+export interface CalendarProps<M extends CalendarMode = "single"> extends Omit<React.ComponentPropsWithoutRef<"div">, "className" | "onSelect" | "defaultValue" | "children"> {
+    /**
+     * How many days can be picked at once. `"single"` selects one `Date`,
+     * `"multiple"` a `Date[]`, `"range"` a `{ from, to }` object.
+     * @default "single"
+     */
+    mode?: M;
+    /**
+     * The current selection. Pass it with `onSelect` to control the calendar;
+     * leave it off entirely to let the calendar own its state.
+     */
+    selected?: CalendarSelection<M> | null;
+    /** The selection an uncontrolled calendar starts with. */
+    defaultSelected?: CalendarSelection<M> | null;
+    /**
+     * Called with the next selection and the day that was clicked. The
+     * selection is `null` once the last pick is cleared, so a controlled
+     * `useState<Date>()` takes it directly.
+     */
+    onSelect?: (selection: CalendarSelection<M> | null, day: Date) => void;
+    /**
+     * Keep at least one day selected: clicking the current selection no longer
+     * clears it.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The month on display, as any date within it. Pass it with `onMonthChange`
+     * to drive navigation yourself.
+     */
+    month?: Date;
+    /**
+     * The month an uncontrolled calendar opens on.
+     * @default the month of the selection, or the current month
+     */
+    defaultMonth?: Date;
+    /** Called with the first day of the new leading month whenever navigation moves. */
+    onMonthChange?: (month: Date) => void;
+    /**
+     * How many months to show side by side.
+     * @default 1
+     */
+    numberOfMonths?: number;
+    /**
+     * Move a whole page at a time — with `numberOfMonths={2}`, the arrows jump
+     * two months instead of one.
+     * @default false
+     */
+    pagedNavigation?: boolean;
+    /**
+     * Earliest selectable day. Also stops navigation and trims the year
+     * dropdown, so one prop bounds the calendar in every direction at once.
+     */
+    minDate?: Date;
+    /** Latest selectable day. The upper half of `minDate`. */
+    maxDate?: Date;
+    /**
+     * Days that cannot be picked, as a date, a range, `{ before }` / `{ after }`,
+     * `{ dayOfWeek }`, a predicate, or an array of any of those. Disabled days
+     * stay focusable so keyboard navigation can cross them.
+     */
+    disabled?: CalendarMatcher;
+    /**
+     * BCP 47 tag used for every month, weekday and day name.
+     *
+     * Pinned rather than left to the runtime on purpose: `undefined` resolves
+     * to the server's locale during SSR and the browser's on the client, and
+     * "August" hydrating over "août" is a mismatch React can only fix by
+     * throwing the markup away.
+     * @default "en-US"
+     */
+    locale?: string;
+    /**
+     * First column of the week — 0 is Sunday, 1 Monday, 6 Saturday. Not derived
+     * from `locale`: `Intl` cannot be asked for it in every browser, and a
+     * silent fallback would move the columns under some of your users and not
+     * others.
+     * @default 0
+     */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Fill the first and last rows with the neighbouring months' days instead
+     * of leaving them blank.
+     * @default true
+     */
+    showOutsideDays?: boolean;
+    /**
+     * Always render six rows, so the calendar keeps one height all year and a
+     * popover containing it never resizes as you page through it.
+     * @default false
+     */
+    fixedWeeks?: boolean;
+    /**
+     * Add a leading column of ISO 8601 week numbers.
+     * @default false
+     */
+    showWeekNumbers?: boolean;
+    /**
+     * What sits between the arrows: a static month and year, or dropdowns for
+     * one or both. Dropdowns turn a birthday twenty years back into two clicks
+     * instead of two hundred and forty.
+     * @default "label"
+     */
+    captionLayout?: CalendarCaptionLayout;
+    /**
+     * Cell size and text size. Follows the ambient `data-forte-density` too.
+     * @default "md"
+     */
+    size?: CalendarSize;
+    /**
+     * Visual weight of the two navigation arrows — any `Button` variant.
+     * @default "ghost"
+     */
+    navVariant?: ButtonVariant;
+    /**
+     * Rendered under the grid inside a `role="status"` region, so a summary
+     * like "3 nights selected" is announced as it changes.
+     */
+    footer?: React.ReactNode;
+    /**
+     * Focus the calendar's active day on mount. Use it when the calendar opens
+     * in a popover, not on a calendar sitting in the page.
+     * @default false
+     */
+    autoFocus?: boolean;
+    /** Today's date. Override it to pin the "today" marker in tests or stories. */
+    today?: Date;
+    /** Chrome strings — arrow and dropdown labels. Merged over the English defaults. */
+    labels?: CalendarLabels;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A month grid for picking one day, several days, or a range.
+ *
+ * ```tsx
+ * const [date, setDate] = React.useState<Date>();
+ *
+ * <Calendar mode="single" selected={date} onSelect={setDate} />
+ * ```
+ *
+ * It owns no date library. Month arithmetic goes through the `Date`
+ * constructor (DST-safe by construction) and every name on screen comes from
+ * `Intl.DateTimeFormat`, so the whole component adds nothing to a consumer's
+ * bundle beyond itself.
+ *
+ * The grid is a real `<table role="grid">` with a roving tabindex: one Tab
+ * stop for the whole calendar, arrows to move a day, <kbd>Page Up</kbd> /
+ * <kbd>Page Down</kbd> to move a month, and <kbd>Shift</kbd> with either to
+ * move a year. Days that cannot be picked are `aria-disabled` rather than
+ * `disabled`, so navigation can cross them.
+ */
+export declare const Calendar: <M extends CalendarMode = "single">(props: CalendarProps<M> & React.RefAttributes<HTMLDivElement>) => React.ReactElement;

package/dist/components/calendar/Calendar.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../Calendar-D7Q-QJ_e.js";
+export { e as Calendar };

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

@@ -0,0 +1,2 @@
+export { Calendar } from './Calendar';
+export type { CalendarMode, CalendarSize, CalendarCaptionLayout, CalendarRange, CalendarSelection, CalendarMatcher, CalendarLabels, CalendarProps, } from './Calendar';

package/dist/components/calendar/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../Calendar-D7Q-QJ_e.js";
+export { e as Calendar };

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

@@ -0,0 +1,130 @@
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
+import * as React from "react";
+export type CheckboxSize = "sm" | "md" | "lg";
+export type CheckboxTone = "primary" | "secondary" | "danger" | "neutral";
+export type CheckboxGroupOrientation = "vertical" | "horizontal";
+type BaseCheckboxRootProps = React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root>;
+type BaseCheckboxGroupProps = React.ComponentPropsWithoutRef<typeof BaseCheckboxGroup>;
+export interface CheckboxProps extends Omit<BaseCheckboxRootProps, "className" | "children"> {
+    /**
+     * Size of the box. The tick scales with it, so the mark keeps its optical
+     * weight at every size.
+     * @default "md"
+     */
+    size?: CheckboxSize;
+    /**
+     * Which semantic colour set the checked fill draws from. Inside a
+     * `Field.Root` an invalid field overrides this with the danger palette, so
+     * a validation error always reads as an error.
+     * @default "primary"
+     */
+    tone?: CheckboxTone;
+    /**
+     * Whether the checkbox is currently ticked. Pairs with `onCheckedChange` for
+     * a controlled checkbox; use `defaultChecked` for an uncontrolled one.
+     * @default undefined
+     */
+    checked?: boolean;
+    /**
+     * Whether the checkbox starts ticked when uncontrolled.
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Mixed state: neither ticked nor unticked. Renders a dash instead of a
+     * tick and sets `data-indeterminate` on both the root and the indicator.
+     * Independent of `checked` — a checkbox that is indeterminate submits
+     * whatever `checked` says it submits.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Marks this checkbox as the one that controls every other checkbox in the
+     * group. Only works inside a `CheckboxGroup` that has been given `value`
+     * and `allValues`; outside one it does nothing at all. The group drives the
+     * indeterminate state when only some children are ticked.
+     * @default false
+     */
+    parent?: boolean;
+    /**
+     * Set to `true` when `render` replaces the root with a real `<button>`.
+     * The root is a `<span>` by default so that an enclosing `<label>` stays
+     * valid HTML; for the sibling-label pattern (`<label htmlFor>` + `id`) pass
+     * `nativeButton render={<button />}` instead. With `nativeButton`, `id`
+     * lands on the root element rather than on the hidden input.
+     * @default false
+     */
+    nativeButton?: boolean;
+    /**
+     * Additional class name(s) for the indicator — the element that holds the
+     * tick. Applied after the internal styles.
+     */
+    indicatorClassName?: string;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A checkbox built on Base UI's unstyled `Checkbox` primitive.
+ *
+ * The root renders a `<span>` plus a hidden `<input>` beside it, so it carries
+ * no accessible name of its own — wrap it in a `<label>`, pair it with a
+ * `<label htmlFor>` (see `nativeButton`), or put it inside a `Field.Root`.
+ *
+ * State is exposed on `data-*` attributes (`data-checked`, `data-unchecked`,
+ * `data-indeterminate`, `data-disabled`, `data-readonly`, and the `Field`
+ * validity attributes) on both the root and the indicator, and every visual
+ * decision is a `--forte-checkbox-*` custom property, so it can be re-skinned
+ * from plain CSS or targeted with Tailwind arbitrary variants
+ * (`data-[indeterminate]:...`) without wrapping.
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLElement>>;
+export interface CheckboxGroupProps extends Omit<BaseCheckboxGroupProps, "className"> {
+    /**
+     * Direction the checkboxes are laid out in. Horizontal groups wrap.
+     * @default "vertical"
+     */
+    orientation?: CheckboxGroupOrientation;
+    /**
+     * Values of the checkboxes that are ticked. Pairs with `onValueChange` for
+     * a controlled group; use `defaultValue` for an uncontrolled one. Required
+     * if any child uses the `parent` prop.
+     * @default undefined
+     */
+    value?: string[];
+    /**
+     * Values of the checkboxes that start ticked when uncontrolled.
+     * @default undefined
+     */
+    defaultValue?: string[];
+    /**
+     * Values of *all* checkboxes in the group, ticked or not. Needed only for a
+     * parent checkbox: it is how the group knows the difference between "some"
+     * and "all" and therefore when the parent is indeterminate.
+     * @default undefined
+     */
+    allValues?: string[];
+    /**
+     * Disables every checkbox in the group.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * Shared state for a series of `Checkbox`es, built on Base UI's
+ * `CheckboxGroup` primitive.
+ *
+ * The group has no implicit accessible name — give it `aria-labelledby`
+ * pointing at a heading, or render it as a `Fieldset.Root` with a
+ * `Fieldset.Legend`.
+ */
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,3 @@
+"use client";
+import { n as e, t } from "../../Checkbox-DfNbmOed.js";
+export { t as Checkbox, e as CheckboxGroup };

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

@@ -0,0 +1,2 @@
+export { Checkbox, CheckboxGroup } from './Checkbox';
+export type { CheckboxProps, CheckboxSize, CheckboxTone, CheckboxGroupProps, CheckboxGroupOrientation, } from './Checkbox';

package/dist/components/checkbox/index.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "../../Checkbox-DfNbmOed.js";
+export { t as Checkbox, e as CheckboxGroup };

package/dist/components/collapsible/Collapsible.d.ts

@@ -0,0 +1,91 @@
+import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
+import * as React from "react";
+export type CollapsibleVariant = "plain" | "contained";
+type BaseRootProps = React.ComponentPropsWithoutRef<typeof BaseCollapsible.Root>;
+type BaseTriggerProps = React.ComponentPropsWithoutRef<typeof BaseCollapsible.Trigger>;
+type BasePanelProps = React.ComponentPropsWithoutRef<typeof BaseCollapsible.Panel>;
+export interface CollapsibleRootProps extends Omit<BaseRootProps, "className"> {
+    /**
+     * How much visual weight the disclosure carries. `"plain"` contributes no
+     * box of its own — a bare text button over its panel, for a "Show more" that
+     * lives inside a page. `"contained"` turns the pair into a card sized and
+     * coloured to match one item of a `contained` Accordion. Both are the same
+     * three parts with different knobs — nothing moves.
+     * @default "plain"
+     */
+    variant?: CollapsibleVariant;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * Groups the trigger and the panel, and owns whether the panel is open.
+ *
+ * Uncontrolled with `defaultOpen`, controlled with `open` plus `onOpenChange`.
+ * Unlike `Accordion.Root`, this is a boolean rather than a list — there is only
+ * ever one panel to open.
+ *
+ * Reach for `Accordion` instead when there are several of these in a row: it
+ * puts each section into the page's heading outline and can close the others
+ * as one opens, neither of which a stack of collapsibles does.
+ */
+declare function CollapsibleRoot({ variant, className, children, ...props }: CollapsibleRootProps): React.JSX.Element;
+export interface CollapsibleTriggerProps extends Omit<BaseTriggerProps, "className"> {
+    /**
+     * The affordance next to the label. Defaults to a chevron that rotates when
+     * the panel opens. Pass your own node to replace it — it is wrapped in the
+     * same rotating, `aria-hidden` box, so a plus or a caret needs no extra
+     * wiring — or `null` to drop it entirely.
+     * @default a chevron
+     */
+    icon?: React.ReactNode;
+    /**
+     * Additional class name(s) for the label box that wraps `children`.
+     * Applied after the internal styles.
+     */
+    labelClassName?: string;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface CollapsiblePanelProps extends Omit<BasePanelProps, "className"> {
+    /**
+     * Additional class name(s) for the inner element that holds the padding and
+     * the content. Applied after the internal styles.
+     */
+    contentClassName?: string;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A disclosure built on Base UI's unstyled `Collapsible` primitive.
+ *
+ * ```tsx
+ * <Collapsible.Root>
+ *   <Collapsible.Trigger>Advanced settings</Collapsible.Trigger>
+ *   <Collapsible.Panel>Nothing in here is required.</Collapsible.Panel>
+ * </Collapsible.Root>
+ * ```
+ *
+ * One trigger, one panel, and a height animation that runs without a frame of
+ * JavaScript. The panel is unmounted while closed unless `keepMounted` or
+ * `hiddenUntilFound` says otherwise.
+ *
+ * Styling is driven entirely by `data-*` attributes and `--forte-collapsible-*`
+ * custom properties, so it can be re-skinned from plain CSS or targeted with
+ * Tailwind arbitrary variants (`data-[variant=contained]:...`) without
+ * wrapping.
+ */
+export declare const Collapsible: {
+    Root: typeof CollapsibleRoot;
+    Trigger: React.ForwardRefExoticComponent<CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Panel: React.ForwardRefExoticComponent<CollapsiblePanelProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/components/collapsible/Collapsible.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../Collapsible-D8UKiGip.js";
+export { e as Collapsible };

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

@@ -0,0 +1,2 @@
+export { Collapsible } from './Collapsible';
+export type { CollapsibleVariant, CollapsibleRootProps, CollapsibleTriggerProps, CollapsiblePanelProps, } from './Collapsible';

package/dist/components/collapsible/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../Collapsible-D8UKiGip.js";
+export { e as Collapsible };