@forte-ui/react 1.0.0-alpha.1

package/dist/components/context-menu/ContextMenu.js

@@ -0,0 +1,3 @@
+"use client";
+import { n as e, r as t, t as n } from "../../ContextMenu-D81uDaMG.js";
+export { n as ContextMenu, e as ContextMenuRoot, t as ContextMenuTrigger };

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

@@ -0,0 +1,3 @@
+export { ContextMenu } from './ContextMenu';
+export type { ContextMenuRootProps, ContextMenuTriggerProps, } from './ContextMenu';
+export type { MenuItemTone as ContextMenuItemTone, MenuPopupProps as ContextMenuPopupProps, MenuItemProps as ContextMenuItemProps, MenuLinkItemProps as ContextMenuLinkItemProps, MenuCheckboxItemProps as ContextMenuCheckboxItemProps, MenuRadioGroupProps as ContextMenuRadioGroupProps, MenuRadioItemProps as ContextMenuRadioItemProps, MenuGroupProps as ContextMenuGroupProps, MenuGroupLabelProps as ContextMenuGroupLabelProps, MenuSeparatorProps as ContextMenuSeparatorProps, MenuSubmenuRootProps as ContextMenuSubmenuRootProps, MenuSubmenuTriggerProps as ContextMenuSubmenuTriggerProps, MenuShortcutProps as ContextMenuShortcutProps, } from '../menu/Menu';

package/dist/components/context-menu/index.js

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

package/dist/components/date-picker/DatePicker.d.ts

@@ -0,0 +1,268 @@
+import { Button } from '../button';
+import { CalendarMode, CalendarProps, CalendarSelection } from '../calendar';
+import { Popover } from '../popover';
+import * as React from "react";
+export type DatePickerSize = "sm" | "md" | "lg";
+export type DatePickerVariant = "outline" | "soft" | "ghost";
+export interface DatePickerRootProps<M extends CalendarMode = "single"> {
+    /**
+     * How many days can be picked. Decides what `selected` holds and, unless
+     * `closeOnSelect` says otherwise, when the popup closes.
+     * @default "single"
+     */
+    mode?: M;
+    /**
+     * The current selection. Pass it with `onSelect` to control the picker;
+     * leave it off entirely to let the picker own its state.
+     */
+    selected?: CalendarSelection<M> | null;
+    /** The selection an uncontrolled picker starts with. */
+    defaultSelected?: CalendarSelection<M> | null;
+    /** Called with the next selection and the day that was clicked. */
+    onSelect?: (selection: CalendarSelection<M> | null, day: Date) => void;
+    /**
+     * Keep at least one day selected: clicking the current selection no longer
+     * clears it, and `DatePicker.Clear` is disabled.
+     * @default false
+     */
+    required?: boolean;
+    /** Whether the popup is open when the picker first mounts. */
+    defaultOpen?: boolean;
+    /** Whether the popup is open. Pass it with `onOpenChange` to control it. */
+    open?: boolean;
+    /** Called when the popup wants to open or close. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Close the popup when a day is picked. Left unset it follows the mode:
+     * `single` closes on a pick, `range` closes once both ends are in, and
+     * `multiple` stays open because picking a second day would otherwise cost
+     * another two clicks.
+     */
+    closeOnSelect?: boolean;
+    /**
+     * BCP 47 tag for the calendar and for the trigger's own text. Pinned rather
+     * than left to the runtime for the same reason as on `Calendar`: an
+     * unpinned locale differs between the server render and the browser.
+     * @default "en-US"
+     */
+    locale?: string;
+    /**
+     * Replaces the trigger's text entirely. Receives the current selection and
+     * the locale, and returns `null` to fall back to the placeholder.
+     */
+    formatValue?: (selection: CalendarSelection<M> | null, locale: string) => string | null;
+    /**
+     * Whether the popup takes the page over while it is open. Forwarded to
+     * `Popover.Root`.
+     * @default false
+     */
+    modal?: React.ComponentPropsWithoutRef<typeof Popover.Root>["modal"];
+    children?: React.ReactNode;
+}
+/**
+ * Groups every part of the picker and owns both its selection and its open
+ * state. Renders no DOM of its own.
+ *
+ * ```tsx
+ * <DatePicker.Root mode="single" selected={date} onSelect={setDate}>
+ *   <DatePicker.Trigger aria-label="Due date">
+ *     <DatePicker.Value placeholder="Pick a date" />
+ *     <DatePicker.Icon />
+ *   </DatePicker.Trigger>
+ *   <DatePicker.Popup>
+ *     <DatePicker.Calendar />
+ *   </DatePicker.Popup>
+ * </DatePicker.Root>
+ * ```
+ *
+ * The selection lives here rather than on the calendar because the trigger
+ * and the calendar sit on opposite sides of a portal, and because closing on
+ * a pick is a decision the calendar cannot make — it does not know it is in a
+ * popover.
+ */
+export declare function DatePickerRoot<M extends CalendarMode = "single">(props: DatePickerRootProps<M>): React.JSX.Element;
+type BaseTriggerProps = React.ComponentPropsWithoutRef<typeof Popover.Trigger>;
+export interface DatePickerTriggerProps extends Omit<BaseTriggerProps, "className"> {
+    /**
+     * How much visual weight the field carries. `outline` reads as a form
+     * control, `soft` as a filled field, `ghost` as an inline affordance.
+     * @default "outline"
+     */
+    variant?: DatePickerVariant;
+    /**
+     * Size of the field. Actual dimensions also follow the ambient
+     * `data-forte-density` setting.
+     * @default "md"
+     */
+    size?: DatePickerSize;
+    /**
+     * Stretch the field to fill the width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The field that opens the picker. Renders a native `<button>`.
+ *
+ * Give it a `<DatePicker.Value>` and a `<DatePicker.Icon>` as children. It
+ * must have an accessible name: a `<Field.Label nativeLabel={false}>` in the
+ * same `<Field.Root>` — which it picks up through Base UI's field context —
+ * or an `aria-label` here. In development the trigger warns once if it ends
+ * up with neither.
+ *
+ * The picker holds no form value of its own. Submit the date from your own
+ * state, or render a hidden input beside the trigger.
+ */
+export declare const DatePickerTrigger: React.ForwardRefExoticComponent<DatePickerTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface DatePickerValueProps extends Omit<React.ComponentPropsWithoutRef<"span">, "className" | "children"> {
+    /** Shown while nothing is selected. */
+    placeholder?: string;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The trigger's text: the formatted selection, or the placeholder while there
+ * is none. Carries `data-placeholder` in the second case so the two states
+ * can be styled apart.
+ *
+ * Formatting comes from `DatePicker.Root` — its `locale`, or its
+ * `formatValue` when you need something other than a medium date.
+ */
+export declare const DatePickerValue: React.ForwardRefExoticComponent<DatePickerValueProps & React.RefAttributes<HTMLSpanElement>>;
+export interface DatePickerIconProps extends Omit<React.ComponentPropsWithoutRef<"span">, "className"> {
+    /**
+     * Contents of the slot. Defaults to a calendar glyph.
+     * @default <CalendarGlyph />
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The calendar glyph at the end of the field. Decorative — the trigger's
+ * accessible name and its value carry the meaning, so the glyph is hidden
+ * from assistive technology and does not take pointer events of its own.
+ */
+export declare const DatePickerIcon: React.ForwardRefExoticComponent<DatePickerIconProps & React.RefAttributes<HTMLSpanElement>>;
+type BasePopupProps = React.ComponentPropsWithoutRef<typeof Popover.Popup>;
+export interface DatePickerPopupProps extends Omit<BasePopupProps, "className" | "size"> {
+    /**
+     * Additional class name(s) for the panel inside the popup. Applied after
+     * the internal styles so consumer utilities (e.g. Tailwind) win without
+     * needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The floating surface, and the column inside it that stacks the calendar
+ * over an optional `DatePicker.Footer`.
+ *
+ * The surface itself is a `Popover.Popup` and keeps that component's own
+ * marker and `--forte-popover-*` knobs — it is a popover surface, and there is
+ * nothing date-shaped about it. The panel it wraps is this component's part,
+ * which is what a consumer targets to reach the picker's own popup and not
+ * every popover on the page.
+ *
+ * Every `Popover.Popup` prop except `size` is forwarded, so `side`, `align`
+ * and `sideOffset` work as usual. `size` is not: a calendar has an intrinsic
+ * width and a width cap would only ever fight it.
+ */
+export declare const DatePickerPopup: React.ForwardRefExoticComponent<DatePickerPopupProps & React.RefAttributes<HTMLDivElement>>;
+export interface DatePickerCalendarProps extends Omit<CalendarProps<CalendarMode>, "mode" | "selected" | "defaultSelected" | "onSelect" | "required" | "locale"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The calendar inside the popup, wired to the root's selection and locale.
+ * Every other `Calendar` prop is forwarded — `numberOfMonths`,
+ * `captionLayout`, `minDate`, `disabled` and the rest.
+ *
+ * `autoFocus` defaults to **on** here, the opposite of `Calendar`'s own
+ * default. The calendar is behind a press that the user just made, so the
+ * first arrow key should move a day rather than do nothing; a calendar
+ * sitting in the page has no such press behind it, which is why the base
+ * component leaves focus alone.
+ */
+export declare const DatePickerCalendar: React.ForwardRefExoticComponent<DatePickerCalendarProps & React.RefAttributes<HTMLDivElement>>;
+export interface DatePickerFooterProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * An actions row under the calendar, inside the popup — where "Clear" and
+ * "Today" belong. It is a row of real buttons, so it is reached by
+ * <kbd>Tab</kbd> from the grid, which is one Tab stop.
+ */
+export declare const DatePickerFooter: React.ForwardRefExoticComponent<DatePickerFooterProps & React.RefAttributes<HTMLDivElement>>;
+type ButtonProps = React.ComponentPropsWithoutRef<typeof Button>;
+export interface DatePickerClearProps extends Omit<ButtonProps, "onClick"> {
+    /**
+     * Contents of the button.
+     * @default "Clear"
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Empties the selection. A `Button`, so it answers to `variant`, `tone` and
+ * `size` — and tags itself `data-forte="button"` rather than being handed a
+ * marker, the way every composed component in the library does.
+ *
+ * It disables itself when there is nothing to clear, and when the root is
+ * `required`. Disabled rather than hidden: a control that disappears as you
+ * reach for it is worse than one that is visibly unavailable, and the popup
+ * would reflow under the pointer.
+ */
+export declare const DatePickerClear: React.ForwardRefExoticComponent<DatePickerClearProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A date field that opens a calendar.
+ *
+ * `Calendar` in a `Popover`, with the two things that composition always
+ * needs anyway: one place that owns the selection, since the trigger's text
+ * and the grid sit on opposite sides of a portal, and a rule for when picking
+ * a day closes the popup.
+ *
+ * ```tsx
+ * const [date, setDate] = React.useState<Date | null>(null);
+ *
+ * <DatePicker.Root selected={date} onSelect={setDate}>
+ *   <DatePicker.Trigger aria-label="Due date">
+ *     <DatePicker.Value placeholder="Pick a date" />
+ *     <DatePicker.Icon />
+ *   </DatePicker.Trigger>
+ *   <DatePicker.Popup>
+ *     <DatePicker.Calendar />
+ *   </DatePicker.Popup>
+ * </DatePicker.Root>
+ * ```
+ *
+ * Every part declares its own knobs, so an ancestor's value is only inherited
+ * and never wins.
+ */
+export declare const DatePicker: {
+    Root: typeof DatePickerRoot;
+    Trigger: React.ForwardRefExoticComponent<DatePickerTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Value: React.ForwardRefExoticComponent<DatePickerValueProps & React.RefAttributes<HTMLSpanElement>>;
+    Icon: React.ForwardRefExoticComponent<DatePickerIconProps & React.RefAttributes<HTMLSpanElement>>;
+    Popup: React.ForwardRefExoticComponent<DatePickerPopupProps & React.RefAttributes<HTMLDivElement>>;
+    Calendar: React.ForwardRefExoticComponent<DatePickerCalendarProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<DatePickerFooterProps & React.RefAttributes<HTMLDivElement>>;
+    Clear: React.ForwardRefExoticComponent<DatePickerClearProps & React.RefAttributes<HTMLButtonElement>>;
+};
+export {};

package/dist/components/date-picker/DatePicker.js

@@ -0,0 +1,3 @@
+"use client";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "../../DatePicker-CfkMsaI-.js";
+export { c as DatePicker, i as DatePickerCalendar, o as DatePickerClear, n as DatePickerFooter, e as DatePickerIcon, a as DatePickerPopup, s as DatePickerRoot, t as DatePickerTrigger, r as DatePickerValue };

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker, DatePickerRoot, DatePickerTrigger, DatePickerValue, DatePickerIcon, DatePickerPopup, DatePickerCalendar, DatePickerFooter, DatePickerClear, } from './DatePicker';
+export type { DatePickerSize, DatePickerVariant, DatePickerRootProps, DatePickerTriggerProps, DatePickerValueProps, DatePickerIconProps, DatePickerPopupProps, DatePickerCalendarProps, DatePickerFooterProps, DatePickerClearProps, } from './DatePicker';

package/dist/components/date-picker/index.js

@@ -0,0 +1,2 @@
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "../../DatePicker-CfkMsaI-.js";
+export { c as DatePicker, i as DatePickerCalendar, o as DatePickerClear, n as DatePickerFooter, e as DatePickerIcon, a as DatePickerPopup, s as DatePickerRoot, t as DatePickerTrigger, r as DatePickerValue };