@kennycorrea/ui 0.11.4 → 1.6.1

package/dist/templates/ListPage/ListPage.js

@@ -0,0 +1,8 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A page that is mostly one list: header, toolbar, the list, and its bulk-action bar, in that
+ * order and spacing. Slots only; the data and its state belong to the app.
+ */
+export function ListPage({ header, toolbar, children, bulkActions, className }) {
+    return (_jsxs("div", { className: ['ui-list-page', className].filter(Boolean).join(' '), children: [header, toolbar, children, bulkActions] }));
+}

package/dist/templates/ListPage/index.d.ts

@@ -0,0 +1 @@
+export * from './ListPage.js';

package/dist/templates/ListPage/index.js

@@ -0,0 +1 @@
+export * from './ListPage.js';

package/dist/templates/SettingsPage/SettingsPage.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+import type { RenderLink } from '../../atoms/TextLink/TextLink.js';
+export interface SettingsSection {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    href?: string;
+    render?: RenderLink;
+}
+export interface SettingsPageProps {
+    /** A PageHeader. */
+    header?: ReactNode;
+    sections: SettingsSection[];
+    /** The current section's id. */
+    value: string;
+    /**
+     * Called with a section id. Required for small screens, where the section list is a select
+     * and there is no link to follow.
+     */
+    onValueChange: (id: string) => void;
+    /** Names the section navigation ("Settings sections"). */
+    navLabel: string;
+    /** The current section's content. */
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Settings split into sections. From 768px of page width: a sticky list of sections beside the
+ * content. Narrower: a select above it, which costs one row instead of a screenful of links.
+ * Both are rendered and CSS shows one; the hidden one is out of the accessibility tree.
+ */
+export declare function SettingsPage({ header, sections, value, onValueChange, navLabel, children, className, }: SettingsPageProps): import("react").JSX.Element;

package/dist/templates/SettingsPage/SettingsPage.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Select } from '../../atoms/Select/Select.js';
+import { NavItem } from '../../molecules/NavItem/NavItem.js';
+/**
+ * Settings split into sections. From 768px of page width: a sticky list of sections beside the
+ * content. Narrower: a select above it, which costs one row instead of a screenful of links.
+ * Both are rendered and CSS shows one; the hidden one is out of the accessibility tree.
+ */
+export function SettingsPage({ header, sections, value, onValueChange, navLabel, children, className, }) {
+    const selectId = useId();
+    return (_jsxs("div", { className: ['ui-settings ui-list-page', className].filter(Boolean).join(' '), children: [header, _jsxs("div", { className: "ui-settings__grid", children: [_jsxs("nav", { "aria-label": navLabel, children: [_jsx("ul", { className: "ui-settings__list", children: sections.map((s) => (_jsx(NavItem, { label: s.label, icon: s.icon, href: s.href, render: s.render, active: s.id === value, onClick: () => onValueChange(s.id) }, s.id))) }), _jsxs("div", { className: "ui-settings__select", children: [_jsx("label", { htmlFor: selectId, className: "ui-sr-only", children: navLabel }), _jsx(Select, { id: selectId, value: value, onValueChange: onValueChange, options: sections.map((s) => ({ value: s.id, label: s.label })) })] })] }), _jsx("div", { className: "min-w-0", children: children })] })] }));
+}

package/dist/templates/SettingsPage/index.d.ts

@@ -0,0 +1 @@
+export * from './SettingsPage.js';

package/dist/templates/SettingsPage/index.js

@@ -0,0 +1 @@
+export * from './SettingsPage.js';

package/dist/templates/StatusPage/StatusPage.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+export interface StatusPageProps {
+    /** "404", "403", "500". Decorative: the title says what happened. */
+    code?: string;
+    /** The page's `h1`: "Page not found". */
+    title: ReactNode;
+    description?: ReactNode;
+    /** The way out: a link home, a sign-in button. */
+    action?: ReactNode;
+    /** A logo above everything. */
+    brand?: ReactNode;
+    className?: string;
+}
+/**
+ * A full-screen page for not-found, forbidden, server-error and maintenance. Stands on its own,
+ * outside the AppShell, since the shell may be what failed.
+ */
+export declare function StatusPage({ code, title, description, action, brand, className, }: StatusPageProps): import("react").JSX.Element;

package/dist/templates/StatusPage/StatusPage.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A full-screen page for not-found, forbidden, server-error and maintenance. Stands on its own,
+ * outside the AppShell, since the shell may be what failed.
+ */
+export function StatusPage({ code, title, description, action, brand, className, }) {
+    return (_jsx("main", { className: ['ui-status-page', className].filter(Boolean).join(' '), children: _jsxs("div", { className: "ui-state", children: [brand, code ? (_jsx("p", { className: "ui-status-page__code", "aria-hidden": "true", children: code })) : null, _jsx("h1", { className: "ui-state__title", children: title }), description ? _jsx("p", { className: "ui-state__description", children: description }) : null, action ? _jsx("div", { className: "ui-state__actions", children: action }) : null] }) }));
+}

package/dist/templates/StatusPage/index.d.ts

@@ -0,0 +1 @@
+export * from './StatusPage.js';

package/dist/templates/StatusPage/index.js

@@ -0,0 +1 @@
+export * from './StatusPage.js';

package/dist/templates/index.d.ts

@@ -0,0 +1,8 @@
+export * from './AdminLayout/index.js';
+export * from './AuthLayout/index.js';
+export * from './DashboardPage/index.js';
+export * from './DetailPage/index.js';
+export * from './FormPage/index.js';
+export * from './ListPage/index.js';
+export * from './SettingsPage/index.js';
+export * from './StatusPage/index.js';

package/dist/templates/index.js

@@ -0,0 +1,8 @@
+export * from './AdminLayout/index.js';
+export * from './AuthLayout/index.js';
+export * from './DashboardPage/index.js';
+export * from './DetailPage/index.js';
+export * from './FormPage/index.js';
+export * from './ListPage/index.js';
+export * from './SettingsPage/index.js';
+export * from './StatusPage/index.js';

package/dist/utils/dates.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Calendar-date arithmetic for the date components.
+ *
+ * **Dates, not instants.** A birthday or a due date is a day on a calendar, the same day in
+ * every time zone, so it travels as an ISO `YYYY-MM-DD` string and all arithmetic happens in
+ * UTC, where days are always 24 hours. That is what keeps a date from shifting by one when the
+ * clocks change or when the browser is east or west of Greenwich. Formatting goes through
+ * `Intl.DateTimeFormat` with `timeZone: 'UTC'` for the same reason.
+ *
+ * ISO date strings also sort and compare correctly as plain strings.
+ */
+/** A calendar date as `YYYY-MM-DD`. */
+export type IsoDate = string;
+export interface DateRange {
+    from: IsoDate;
+    /** `null` while only the first end has been chosen. */
+    to: IsoDate | null;
+}
+/** 0 = Sunday … 6 = Saturday, as `Date.getUTCDay()`. */
+export type Weekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/** The parts of a valid ISO date, or `null` (including for impossible dates like 2026-02-30). */
+export declare function parseIsoDate(value: string): {
+    year: number;
+    month: number;
+    day: number;
+} | null;
+export declare function isIsoDate(value: unknown): value is IsoDate;
+/** `month` is 1–12. */
+export declare function toIsoDate(year: number, month: number, day: number): IsoDate;
+/** `month` is 1–12. */
+export declare function daysInMonth(year: number, month: number): number;
+export declare function addDays(iso: IsoDate, days: number): IsoDate;
+/** Adds whole months, clamping the day: 31 January plus one month is 28 or 29 February. */
+export declare function addMonths(iso: IsoDate, months: number): IsoDate;
+export declare function weekdayOf(iso: IsoDate): Weekday;
+export declare function startOfMonth(iso: IsoDate): IsoDate;
+export declare function endOfMonth(iso: IsoDate): IsoDate;
+export declare function startOfWeek(iso: IsoDate, weekStartsOn: Weekday): IsoDate;
+export declare function endOfWeek(iso: IsoDate, weekStartsOn: Weekday): IsoDate;
+/** Same month and year. */
+export declare function isSameMonth(a: IsoDate, b: IsoDate): boolean;
+/** `value` clamped into `[min, max]`; either bound may be absent. */
+export declare function clampDate(value: IsoDate, min?: IsoDate | null, max?: IsoDate | null): IsoDate;
+/** Whether `iso` lies in the range, ends included. An open range covers only its start. */
+export declare function isInRange(iso: IsoDate, range: DateRange | null | undefined): boolean;
+/**
+ * The weeks of a month for a calendar grid: always six rows of seven, so a calendar does not
+ * change height between months. Days outside the month are `null`.
+ */
+export declare function monthGrid(year: number, month: number, weekStartsOn: Weekday): (IsoDate | null)[][];
+/** The local date today, as the person at the screen sees it. */
+export declare function todayIso(now?: Date): IsoDate;
+/**
+ * The first day of the week where `locale` is used, from the platform's CLDR data
+ * (`Intl.Locale#getWeekInfo`, or the older `weekInfo` getter). Monday, the ISO 8601 week,
+ * where neither exists.
+ */
+export declare function firstDayOfWeek(locale?: string): Weekday;
+/** Formats a calendar date in `locale`, without any time-zone shift. */
+export declare function formatIsoDate(iso: IsoDate, locale?: string, options?: Intl.DateTimeFormatOptions): string;
+/** "1–30 Sep 2026", in `locale`'s own way of writing a range. */
+export declare function formatDateRange(range: DateRange, locale?: string, options?: Intl.DateTimeFormatOptions): string;
+/** Weekday names in grid order, e.g. `['Mon', …]`, plus their full forms for `abbr`. */
+export declare function weekdayNames(locale: string | undefined, weekStartsOn: Weekday): {
+    short: string;
+    long: string;
+}[];

package/dist/utils/dates.js

@@ -0,0 +1,154 @@
+/**
+ * Calendar-date arithmetic for the date components.
+ *
+ * **Dates, not instants.** A birthday or a due date is a day on a calendar, the same day in
+ * every time zone, so it travels as an ISO `YYYY-MM-DD` string and all arithmetic happens in
+ * UTC, where days are always 24 hours. That is what keeps a date from shifting by one when the
+ * clocks change or when the browser is east or west of Greenwich. Formatting goes through
+ * `Intl.DateTimeFormat` with `timeZone: 'UTC'` for the same reason.
+ *
+ * ISO date strings also sort and compare correctly as plain strings.
+ */
+const ISO = /^(\d{4})-(\d{2})-(\d{2})$/;
+/** The parts of a valid ISO date, or `null` (including for impossible dates like 2026-02-30). */
+export function parseIsoDate(value) {
+    const m = ISO.exec(value);
+    if (!m)
+        return null;
+    const year = Number(m[1]);
+    const month = Number(m[2]);
+    const day = Number(m[3]);
+    if (month < 1 || month > 12 || day < 1 || day > daysInMonth(year, month))
+        return null;
+    return { year, month, day };
+}
+export function isIsoDate(value) {
+    return typeof value === 'string' && parseIsoDate(value) !== null;
+}
+/** `month` is 1–12. */
+export function toIsoDate(year, month, day) {
+    const d = new Date(Date.UTC(year, month - 1, day));
+    return d.toISOString().slice(0, 10);
+}
+/** `month` is 1–12. */
+export function daysInMonth(year, month) {
+    return new Date(Date.UTC(year, month, 0)).getUTCDate();
+}
+function toUtc(iso) {
+    const p = parseIsoDate(iso);
+    if (!p)
+        throw new RangeError(`Not an ISO date: ${iso}`);
+    return new Date(Date.UTC(p.year, p.month - 1, p.day));
+}
+export function addDays(iso, days) {
+    const d = toUtc(iso);
+    d.setUTCDate(d.getUTCDate() + days);
+    return d.toISOString().slice(0, 10);
+}
+/** Adds whole months, clamping the day: 31 January plus one month is 28 or 29 February. */
+export function addMonths(iso, months) {
+    const p = parseIsoDate(iso);
+    if (!p)
+        throw new RangeError(`Not an ISO date: ${iso}`);
+    const index = p.year * 12 + (p.month - 1) + months;
+    const year = Math.floor(index / 12);
+    const month = (((index % 12) + 12) % 12) + 1;
+    return toIsoDate(year, month, Math.min(p.day, daysInMonth(year, month)));
+}
+export function weekdayOf(iso) {
+    return toUtc(iso).getUTCDay();
+}
+export function startOfMonth(iso) {
+    return `${iso.slice(0, 7)}-01`;
+}
+export function endOfMonth(iso) {
+    const p = parseIsoDate(iso);
+    if (!p)
+        throw new RangeError(`Not an ISO date: ${iso}`);
+    return toIsoDate(p.year, p.month, daysInMonth(p.year, p.month));
+}
+export function startOfWeek(iso, weekStartsOn) {
+    return addDays(iso, -((weekdayOf(iso) - weekStartsOn + 7) % 7));
+}
+export function endOfWeek(iso, weekStartsOn) {
+    return addDays(startOfWeek(iso, weekStartsOn), 6);
+}
+/** Same month and year. */
+export function isSameMonth(a, b) {
+    return a.slice(0, 7) === b.slice(0, 7);
+}
+/** `value` clamped into `[min, max]`; either bound may be absent. */
+export function clampDate(value, min, max) {
+    if (min && value < min)
+        return min;
+    if (max && value > max)
+        return max;
+    return value;
+}
+/** Whether `iso` lies in the range, ends included. An open range covers only its start. */
+export function isInRange(iso, range) {
+    if (!range)
+        return false;
+    const to = range.to ?? range.from;
+    return iso >= range.from && iso <= to;
+}
+/**
+ * The weeks of a month for a calendar grid: always six rows of seven, so a calendar does not
+ * change height between months. Days outside the month are `null`.
+ */
+export function monthGrid(year, month, weekStartsOn) {
+    const first = toIsoDate(year, month, 1);
+    let cursor = startOfWeek(first, weekStartsOn);
+    const weeks = [];
+    for (let w = 0; w < 6; w++) {
+        const week = [];
+        for (let d = 0; d < 7; d++) {
+            week.push(isSameMonth(cursor, first) ? cursor : null);
+            cursor = addDays(cursor, 1);
+        }
+        weeks.push(week);
+    }
+    return weeks;
+}
+/** The local date today, as the person at the screen sees it. */
+export function todayIso(now = new Date()) {
+    return toIsoDate(now.getFullYear(), now.getMonth() + 1, now.getDate());
+}
+/**
+ * The first day of the week where `locale` is used, from the platform's CLDR data
+ * (`Intl.Locale#getWeekInfo`, or the older `weekInfo` getter). Monday, the ISO 8601 week,
+ * where neither exists.
+ */
+export function firstDayOfWeek(locale) {
+    try {
+        const loc = new Intl.Locale(locale ?? new Intl.DateTimeFormat().resolvedOptions().locale);
+        const info = loc.getWeekInfo?.() ?? loc.weekInfo;
+        if (info?.firstDay)
+            return (info.firstDay % 7);
+    }
+    catch {
+        // An unknown tag falls through to the ISO week.
+    }
+    return 1;
+}
+/** Formats a calendar date in `locale`, without any time-zone shift. */
+export function formatIsoDate(iso, locale, options = { dateStyle: 'medium' }) {
+    return new Intl.DateTimeFormat(locale, { ...options, timeZone: 'UTC' }).format(toUtc(iso));
+}
+/** "1–30 Sep 2026", in `locale`'s own way of writing a range. */
+export function formatDateRange(range, locale, options = { dateStyle: 'medium' }) {
+    const fmt = new Intl.DateTimeFormat(locale, { ...options, timeZone: 'UTC' });
+    if (!range.to || range.to === range.from)
+        return fmt.format(toUtc(range.from));
+    return fmt.formatRange(toUtc(range.from), toUtc(range.to));
+}
+/** Weekday names in grid order, e.g. `['Mon', …]`, plus their full forms for `abbr`. */
+export function weekdayNames(locale, weekStartsOn) {
+    const short = new Intl.DateTimeFormat(locale, { weekday: 'short', timeZone: 'UTC' });
+    const long = new Intl.DateTimeFormat(locale, { weekday: 'long', timeZone: 'UTC' });
+    // 2023-01-01 was a Sunday.
+    return Array.from({ length: 7 }, (_, i) => {
+        const d = new Date(Date.UTC(2023, 0, 1 + ((weekStartsOn + i) % 7)));
+        return { short: short.format(d), long: long.format(d) };
+    });
+}

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './cn.js';
+export * from './dates.js';
 export * from './theme.js';

package/dist/utils/index.js

@@ -1,2 +1,3 @@
 export * from './cn.js';
+export * from './dates.js';
 export * from './theme.js';

package/dist/utils/theme.d.ts

@@ -95,7 +95,11 @@ export interface Theming<A extends readonly string[]> {
  * a tuple and will be rejected: either inline it or write `as const` there.
  */
 export declare function createTheming<const A extends readonly [string, ...string[]]>(config: ThemingConfig<A>): Theming<A>;
+/** @deprecated Use `createTheming({ storagePrefix })` and its `readTheme`. Removed in 2.0. */
 export declare const readTheme: () => Theme;
+/** @deprecated Use `createTheming({ storagePrefix })` and its `storeTheme`. Removed in 2.0. */
 export declare const storeTheme: (theme: Theme) => void;
+/** @deprecated Use `createTheming({ storagePrefix })` and its `readAccent`. Removed in 2.0. */
 export declare const readAccent: () => "red" | "yellow" | "orange" | "purple" | "blue" | "jade";
+/** @deprecated Use `createTheming({ storagePrefix })` and its `storeAccent`. Removed in 2.0. */
 export declare const storeAccent: (accent: "red" | "yellow" | "orange" | "purple" | "blue" | "jade") => void;

package/dist/utils/theme.js

@@ -118,18 +118,22 @@ export function createTheming(config) {
 }
 /**
  * The instance the original free functions are bound to: the six default accents, jade, and the
- * `upfront.*` storage keys the apps that predate `createTheming` already wrote.
+ * storage prefix that apps written before `createTheming` already have keys under.
  *
  * **One implementation, not two.** These exports exist so no call site had to change when the
- * factory landed, and keeping the prefix is what stops an existing user losing the theme they
- * picked. A new product should call `createTheming` with its own name instead.
+ * factory landed. The prefix is legacy and must not change in 1.x, because changing it would
+ * lose every existing user's saved theme. New code calls `createTheming` with its own prefix.
  */
 const legacy = createTheming({
     accents: DEFAULT_ACCENTS,
     defaultAccent: 'jade',
     storagePrefix: 'upfront',
 });
+/** @deprecated Use `createTheming({ storagePrefix })` and its `readTheme`. Removed in 2.0. */
 export const readTheme = legacy.readTheme;
+/** @deprecated Use `createTheming({ storagePrefix })` and its `storeTheme`. Removed in 2.0. */
 export const storeTheme = legacy.storeTheme;
+/** @deprecated Use `createTheming({ storagePrefix })` and its `readAccent`. Removed in 2.0. */
 export const readAccent = legacy.readAccent;
+/** @deprecated Use `createTheming({ storagePrefix })` and its `storeAccent`. Removed in 2.0. */
 export const storeAccent = legacy.storeAccent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "0.11.4",
+  "version": "1.6.1",
   "description": "A React + TypeScript component library built on Radix Themes: atoms, a Tailwind token bridge and theming.",
   "private": false,
   "type": "module",
@@ -13,6 +13,9 @@
   ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",