@brandsync/wc 1.9.0 → 1.10.0

package/dist/types/components/bs-datepicker/bs-datepicker.d.ts

@@ -0,0 +1,136 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface BsDatepickerChange {
+    /** Single mode: the selected date as `YYYY-MM-DD` (empty string when cleared). */
+    value?: string;
+    /** Range mode: the range start as `YYYY-MM-DD`. */
+    start?: string;
+    /** Range mode: the range end as `YYYY-MM-DD`. Empty while only the start has been picked. */
+    end?: string;
+}
+/**
+ * An inline calendar for picking a single date, or a start/end date range. Matches the Figma
+ * "Date picker" component's two types: "Default" (month and year dropdowns above the grid) and
+ * "Range" (start and end date fields above the grid, with the days between highlighted).
+ *
+ * Dates are always `YYYY-MM-DD` strings, interpreted in the user's local time zone -- never full
+ * ISO timestamps -- so a date can't shift by a day across time zones.
+ *
+ * The calendar renders inline at a fixed width; to show it as a popover, put it inside a
+ * `bs-menu` or your own overlay.
+ *
+ * ## When to use
+ * - Picking a date where seeing the surrounding days of the week/month helps (a booking, a
+ *   deadline, a report window).
+ * - Picking a period (`range`) such as a start and end date.
+ *
+ * ## When not to use
+ * - A date the user knows by heart and can type quickly (a birth date) -- `bs-input type="date"`
+ *   is faster there.
+ *
+ * ## Keyboard
+ * Arrow keys move by day/week, Home/End jump to the start/end of the week, PageUp/PageDown move by
+ * month (with Shift, by year), Enter/Space select the focused day.
+ *
+ * @part container - The outer card.
+ * @part header - The row of month/year dropdowns (default) or start/end fields (range).
+ * @part menu - The month/year dropdown list, when open (default mode).
+ * @part nav - The row holding the previous/next buttons and the title.
+ * @part prev - The previous-month button.
+ * @part next - The next-month button.
+ * @part title - The title between the nav buttons.
+ * @part weekday - Each weekday column header.
+ * @part grid - The day grid.
+ * @part day - Each day button.
+ * @part selected - A selected day (the single date, or either end of a range), in addition to `day`.
+ * @part in-range - A day strictly between the range start and end, in addition to `day`.
+ * @part outside - A day from the previous/next month, in addition to `day`.
+ * @part today - Today's day button, in addition to `day`.
+ */
+export declare class BsDatepicker {
+    el: HTMLElement;
+    internals: ElementInternals;
+    private initialValue;
+    private initialStart;
+    private initialEnd;
+    /** The `name` the value is submitted under in a surrounding `<form>`. In `range` mode the dates
+     * are submitted as `<name>-start` and `<name>-end`. */
+    name?: string;
+    /** Select a start/end range instead of a single date. */
+    range: boolean;
+    /** The selected date (`YYYY-MM-DD`) in single mode. Mutable so a click updates it directly;
+     * `bsChange` still fires for the consumer to react. Ignored when `range` is set. */
+    value: string;
+    /** The range start (`YYYY-MM-DD`) in `range` mode. */
+    start: string;
+    /** The range end (`YYYY-MM-DD`) in `range` mode. */
+    end: string;
+    /** Earliest selectable date (`YYYY-MM-DD`). Earlier days render disabled. */
+    min?: string;
+    /** Latest selectable date (`YYYY-MM-DD`). Later days render disabled. */
+    max?: string;
+    /** BCP 47 locale used for month names, weekday names and the title. */
+    locale: string;
+    /** First column of the grid: `0` for Sunday (the Figma spec), `1` for Monday, ... `6`. */
+    firstDayOfWeek: number;
+    /** Label above the start field in `range` mode. */
+    startLabel: string;
+    /** Label above the end field in `range` mode. */
+    endLabel: string;
+    /** Accessible name for the month dropdown (single mode). */
+    monthLabel: string;
+    /** Accessible name for the year dropdown (single mode). */
+    yearLabel: string;
+    /** Accessible name for the previous-month button. */
+    previousLabel: string;
+    /** Accessible name for the next-month button. */
+    nextLabel: string;
+    /** Fires when the user changes the selection. Single mode: `{ value }`. Range mode: `{ start,
+     * end }` -- fired once for the first click (with an empty `end`) and again when the range is
+     * completed. Not fired when the props are set programmatically. */
+    bsChange: EventEmitter<BsDatepickerChange>;
+    /** First day of the month currently displayed. */
+    viewDate: Date;
+    /** The day holding the roving tabindex. */
+    focusedIso: string;
+    /** The day the pointer is over while a range is half-picked, for the live range preview. */
+    hoverIso: string;
+    /** Text the user is typing into a range field, keyed by which field. Cleared on commit. */
+    draft: {
+        start?: string;
+        end?: string;
+    };
+    /** Which header dropdown (single mode) is open. */
+    openMenu: 'month' | 'year' | null;
+    private shouldFocusDay;
+    private menuToScroll;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    onSelectionChange(): void;
+    onSelectionJump(): void;
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback(): void;
+    private showSelection;
+    private syncFormValue;
+    private isDisabled;
+    private selectDay;
+    private commitDraft;
+    private moveView;
+    private onKeyDown;
+    private get safeFirstDay();
+    private get fmt();
+    private formatField;
+    private titleText;
+    private monthOptions;
+    private yearOptions;
+    private weekdays;
+    private gridDays;
+    private renderHeader;
+    /** A `bs-input type="dropdown"` trigger with our own `bs-menu` list below it. bs-input's built-in
+     * menu has no checkmark or scroll limit, so it's used only as the field look: it gets no
+     * `options` (so renders no menu of its own) and its `bsOpen` toggles ours. */
+    private renderDropdown;
+    render(): any;
+    /** The day that should be reachable with Tab when nothing in view has been focused yet: the
+     * selection if it's in the displayed month, else today if it is, else the 1st. */
+    private defaultTabbable;
+}

package/dist/types/components/bs-datepicker/bs-datepicker.stories.d.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsDatepickerArgs {
+    range: boolean;
+    value: string;
+    start: string;
+    end: string;
+    min: string;
+    max: string;
+    locale: string;
+    firstDayOfWeek: number;
+}
+declare const meta: Meta<BsDatepickerArgs>;
+export default meta;
+type Story = StoryObj<BsDatepickerArgs>;
+export declare const Default: Story;
+export declare const Range: Story;
+export declare const RangeAcrossWeeks: Story;
+export declare const MinMax: Story;
+export declare const MondayFirst: Story;
+export declare const Danish: Story;

package/dist/types/components/bs-timepicker/bs-timepicker.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-timepicker/bs-timepicker.d.ts

@@ -0,0 +1,101 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface BsTimepickerChange {
+    /** The confirmed time as 24-hour `HH:mm`, whatever `format` is displayed. */
+    value: string;
+}
+/**
+ * An inline time picker: hour and minute spinners (up/down carets, or the arrow keys on the value),
+ * an AM/PM dropdown in 12-hour mode, a 24h switch, and Cancel/Confirm buttons. Matches the Figma
+ * "Time picker" component's two formats (12h with AM/PM, and 24h).
+ *
+ * The picker works on a draft: nothing is committed until the user presses Confirm, which updates
+ * `value` and fires `bsChange`. Cancel discards the draft and fires `bsCancel`.
+ *
+ * `value` is always 24-hour `HH:mm` (e.g. `"14:30"`), regardless of the displayed `format`.
+ *
+ * The picker renders inline at a fixed width; to show it as a popover, put it in your own overlay
+ * and close that overlay from `bsChange`/`bsCancel`.
+ *
+ * ## When to use
+ * - Picking a time of day where the user steps through hours and minutes.
+ *
+ * ## When not to use
+ * - A time the user can type faster than step to -- a plain `bs-input` is quicker.
+ *
+ * ## Keyboard
+ * Tab to the hour or minute value, then ArrowUp/ArrowDown step it (wrapping), Home/End jump to the
+ * first/last value, and typing digits sets it directly.
+ *
+ * @part container - The outer card.
+ * @part header - The title row.
+ * @part title - The heading text.
+ * @part format-toggle - The 24h switch.
+ * @part selector - The row of spinners.
+ * @part spinner - Each hour/minute column.
+ * @part step - Each up/down caret button.
+ * @part value - Each hour/minute value (a `spinbutton`).
+ * @part separator - The colon between hours and minutes.
+ * @part period - The AM/PM dropdown (12h only).
+ * @part footer - The Cancel/Confirm row.
+ * @part cancel - The Cancel button.
+ * @part confirm - The Confirm button.
+ */
+export declare class BsTimepicker {
+    el: HTMLElement;
+    internals: ElementInternals;
+    private initialValue;
+    private typed;
+    /** The `name` the confirmed value is submitted under in a surrounding `<form>`. */
+    name?: string;
+    /** The confirmed time, 24-hour `HH:mm`. Empty means no time chosen yet (the picker opens on
+     * 00:00). Mutable so Confirm updates it directly; `bsChange` still fires. */
+    value: string;
+    /** Display format: `12h` (with an AM/PM dropdown) or `24h`. The user can switch it with the
+     * 24h switch. Does not change `value`, which is always 24-hour. */
+    format: '12h' | '24h';
+    /** Step, in minutes, of the minute spinner's carets and arrow keys. Typing is not constrained. */
+    minuteStep: number;
+    /** Heading text. */
+    heading: string;
+    /** Label of the 24h switch. */
+    formatLabel: string;
+    /** Label of the Confirm button. */
+    confirmLabel: string;
+    /** Label of the Cancel button. */
+    cancelLabel: string;
+    /** Accessible name of the hour spinner. */
+    hourLabel: string;
+    /** Accessible name of the minute spinner. */
+    minuteLabel: string;
+    /** Accessible name of the AM/PM dropdown. */
+    periodLabel: string;
+    /** Fires when the user presses Confirm: `{ value }` as 24-hour `HH:mm`. Not fired when `value` is
+     * set programmatically. */
+    bsChange: EventEmitter<BsTimepickerChange>;
+    /** Fires when the user presses Cancel. The draft is reset to `value`. */
+    bsCancel: EventEmitter<void>;
+    /** Draft hour, 0-23. */
+    hour: number;
+    /** Draft minute, 0-59. */
+    minute: number;
+    componentWillLoad(): void;
+    onValueChange(): void;
+    onNameChange(): void;
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback(): void;
+    private resetDraft;
+    private syncFormValue;
+    private get step();
+    private get is12h();
+    private get isPm();
+    /** The number shown in a column. In 12h mode the hour reads 1-12. */
+    private shown;
+    private bounds;
+    private setShown;
+    private stepBy;
+    private onKeyDown;
+    private confirm;
+    private cancel;
+    private renderColumn;
+    render(): any;
+}

package/dist/types/components/bs-timepicker/bs-timepicker.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsTimepickerArgs {
+    value: string;
+    format: '12h' | '24h';
+    minuteStep: number;
+    heading: string;
+}
+declare const meta: Meta<BsTimepickerArgs>;
+export default meta;
+type Story = StoryObj<BsTimepickerArgs>;
+export declare const Default: Story;
+export declare const TwentyFourHour: Story;
+export declare const WithValue: Story;
+export declare const FifteenMinuteStep: Story;