@trypattern/sdk 0.1.37 → 0.1.38

package/dist/components/Calendar.d.ts

@@ -1,3 +1,4 @@
+import type { WeekStart } from './calendarDates.ts';
 import type { Placement } from './Placement.ts';
 export type CalendarDay = {
     date: string;
@@ -14,7 +15,8 @@ type CalendarProps = {
     lastMonth?: string;
     today?: string;
     locale?: string;
+    weekStart?: WeekStart;
     style?: Placement;
 };
-export declare function Calendar({ label, month, onMonthChange, days, value, onPick, firstMonth, lastMonth, today, locale, style }: CalendarProps): import("react").JSX.Element;
+export declare function Calendar({ label, month, onMonthChange, days, value, onPick, firstMonth, lastMonth, today, locale, weekStart, style }: CalendarProps): import("react").JSX.Element;
 export {};

package/dist/components/Calendar.js

@@ -7,7 +7,7 @@ import { addDays, addMonths, dayLabel, dayNumber, localToday, monthOf, monthTitl
 import { focusRing } from "./controlLook.js";
 import { Icon } from "./Icon.js";
 import { interact } from "./interaction.js";
-export function Calendar({ label, month, onMonthChange, days, value, onPick, firstMonth, lastMonth, today = localToday(), locale, style }) {
+export function Calendar({ label, month, onMonthChange, days, value, onPick, firstMonth, lastMonth, today = localToday(), locale, weekStart = 'monday', style }) {
     const states = new Map(days.map((day) => [day.date, day.state]));
     const [moved, setMoved] = useState(null);
     const grid = useRef(null);
@@ -46,7 +46,7 @@ export function Calendar({ label, month, onMonthChange, days, value, onPick, fir
         if (step === undefined)
             return;
         event.preventDefault();
-        const target = step(date);
+        const target = step(date, weekStart);
         const targetMonth = monthOf(target);
         if (firstMonth !== undefined && targetMonth < firstMonth)
             return;
@@ -57,7 +57,7 @@ export function Calendar({ label, month, onMonthChange, days, value, onPick, fir
         if (targetMonth !== month)
             goTo(targetMonth);
     };
-    return (_jsxs("div", { ...stylex.props(styles.calendar, style), children: [_jsxs("div", { ...stylex.props(styles.header), children: [_jsx("span", { ...stylex.props(styles.title), "aria-live": "polite", children: monthTitle(month, locale) }), _jsxs("span", { ...stylex.props(styles.nav), children: [_jsx(BaseButton, { "aria-label": monthTitle(previous, locale), disabled: !canGoBack, onClick: () => goTo(previous), className: stylex.props(styles.navButton, canGoBack ? styles.navEnabled : styles.navDisabled, focusRing.visible).className, children: _jsx(Icon, { name: "previous" }) }), _jsx(BaseButton, { "aria-label": monthTitle(next, locale), disabled: !canGoOn, onClick: () => goTo(next), className: stylex.props(styles.navButton, canGoOn ? styles.navEnabled : styles.navDisabled, focusRing.visible).className, children: _jsx(Icon, { name: "next" }) })] })] }), _jsxs("div", { ref: grid, role: "grid", "aria-label": `${label}, ${monthTitle(month, locale)}`, ...stylex.props(styles.grid), children: [_jsx("div", { role: "row", ...stylex.props(styles.row), children: weekdayNames(locale).map((weekday) => (_jsx("span", { role: "columnheader", "aria-label": weekday.long, ...stylex.props(styles.weekday), children: weekday.short }, weekday.long))) }), weeksOf(month).map((week, index) => (_jsx("div", { role: "row", ...stylex.props(styles.row), children: week.map((date, column) => {
+    return (_jsxs("div", { ...stylex.props(styles.calendar, style), children: [_jsxs("div", { ...stylex.props(styles.header), children: [_jsx("span", { ...stylex.props(styles.title), "aria-live": "polite", children: monthTitle(month, locale) }), _jsxs("span", { ...stylex.props(styles.nav), children: [_jsx(BaseButton, { "aria-label": monthTitle(previous, locale), disabled: !canGoBack, onClick: () => goTo(previous), className: stylex.props(styles.navButton, canGoBack ? styles.navEnabled : styles.navDisabled, focusRing.visible).className, children: _jsx(Icon, { name: "previous" }) }), _jsx(BaseButton, { "aria-label": monthTitle(next, locale), disabled: !canGoOn, onClick: () => goTo(next), className: stylex.props(styles.navButton, canGoOn ? styles.navEnabled : styles.navDisabled, focusRing.visible).className, children: _jsx(Icon, { name: "next" }) })] })] }), _jsxs("div", { ref: grid, role: "grid", "aria-label": `${label}, ${monthTitle(month, locale)}`, ...stylex.props(styles.grid), children: [_jsx("div", { role: "row", ...stylex.props(styles.row), children: weekdayNames(locale, weekStart).map((weekday) => (_jsx("span", { role: "columnheader", "aria-label": weekday.long, ...stylex.props(styles.weekday), children: weekday.short }, weekday.long))) }), weeksOf(month, weekStart).map((week, index) => (_jsx("div", { role: "row", ...stylex.props(styles.row), children: week.map((date, column) => {
                             if (date === null) {
                                 return (_jsx("span", { role: "gridcell", ...stylex.props(styles.cell) }, `blank-${column}`));
                             }
@@ -72,8 +72,8 @@ const MOVES = {
     ArrowRight: (date) => addDays(date, 1),
     ArrowUp: (date) => addDays(date, -7),
     ArrowDown: (date) => addDays(date, 7),
-    Home: (date) => addDays(date, -weekdayIndex(date)),
-    End: (date) => addDays(date, 6 - weekdayIndex(date)),
+    Home: (date, weekStart) => addDays(date, -weekdayIndex(date, weekStart)),
+    End: (date, weekStart) => addDays(date, 6 - weekdayIndex(date, weekStart)),
     PageUp: (date) => addMonths(date, -1),
     PageDown: (date) => addMonths(date, 1)
 };

package/dist/components/Checkbox.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import * as stylex from '@stylexjs/stylex';
-import { borders, colors, iconSizes, motion, radii, space } from "../theme/tokens.stylex.js";
+import { borders, colors, corners, iconSizes, motion, radii, space } from "../theme/tokens.stylex.js";
 import { focusRing } from "./controlLook.js";
 import { interact } from "./interaction.js";
 export function Checkbox({ label, checked, disabled = false, shape = 'round', onChange, style }) {
@@ -33,7 +33,7 @@ const styles = stylex.create({
         }
     },
     square: {
-        borderRadius: radii.sm
+        borderRadius: corners.checkbox
     },
     off: {
         backgroundColor: 'transparent',

package/dist/components/Dialog.js

@@ -55,7 +55,7 @@ export function Dialog({ label, isOpen, onOpenChange, placement = 'center', size
             onOpenChange(next);
         }, children: _jsxs(BaseDialog.Portal, { children: [placement === 'center' || isSheet ? (_jsx(BaseDialog.Backdrop, { className: (state) => stylex.props(styles.backdrop, (!state.open || state.transitionStatus === 'starting') &&
                         styles.backdropHidden).className })) : null, _jsx(BaseDialog.Popup, { "aria-label": label, className: (state) => stylex.props(styles.popup, placements[placement], isSheet ? sheetWidths[size] : widths[size], (!state.open || state.transitionStatus === 'starting') &&
-                        hiddenPlacements[placement], !state.open && styles.exiting, isSheet && drag > 0 && styles.dragged(drag)).className, children: _jsxs("div", { ...stylex.props(styles.frame, isSheet && styles.sheetFrame), children: [isSheet ? (_jsx("div", { "aria-hidden": "true", ref: handle, ...stylex.props(styles.handle), children: _jsx("span", { ...stylex.props(styles.grip) }) })) : null, children] }) })] }) }));
+                        hiddenPlacements[placement], !state.open && styles.exiting, isSheet && drag > 0 && styles.dragged(drag)).className, children: _jsxs("div", { ...stylex.props(styles.frame, isSheet && styles.sheetFrame), children: [isSheet ? (_jsx("div", { "aria-hidden": "true", ref: handle, ...stylex.props(styles.handle), children: _jsx("span", { ...stylex.props(styles.grip) }) })) : null, _jsx("div", { ...stylex.props(styles.content), children: children })] }) })] }) }));
 }
 const styles = stylex.create({
     backdrop: {
@@ -120,6 +120,15 @@ const styles = stylex.create({
         backgroundColor: colors.borderStrong,
         borderRadius: radii.full
     },
+    content: {
+        display: 'flex',
+        flexGrow: 1,
+        flexShrink: 1,
+        flexDirection: 'column',
+        minHeight: 0,
+        overflowY: 'auto',
+        overscrollBehaviorY: 'contain'
+    },
     frame: {
         display: 'flex',
         flexDirection: 'column',

package/dist/components/ScrollArea.js

@@ -13,11 +13,13 @@ const styles = stylex.create({
         height: '100%',
         minHeight: 0,
         overflowY: 'auto',
-        overscrollBehavior: 'contain'
+        overscrollBehaviorX: 'contain',
+        overscrollBehaviorY: 'contain'
     },
     horizontal: {
         height: 'auto',
         overflowX: 'auto',
-        overflowY: 'hidden'
+        overflowY: 'hidden',
+        overscrollBehaviorY: 'auto'
     }
 });

package/dist/components/Select.d.ts

@@ -6,6 +6,7 @@ export type SelectOption<Value extends string> = {
 };
 type SelectProps<Value extends string> = {
     label: string;
+    isLabelHidden?: boolean;
     value: Value;
     options: readonly SelectOption<Value>[];
     size?: Size;
@@ -13,5 +14,5 @@ type SelectProps<Value extends string> = {
     onChange: (value: Value) => void;
     style?: Placement;
 };
-export declare function Select<Value extends string>({ label, value, options, size, disabled, onChange, style }: SelectProps<Value>): import("react").JSX.Element;
+export declare function Select<Value extends string>({ label, isLabelHidden, value, options, size, disabled, onChange, style }: SelectProps<Value>): import("react").JSX.Element;
 export {};

package/dist/components/Select.js

@@ -1,22 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select as BaseSelect } from '@base-ui/react/select';
 import * as stylex from '@stylexjs/stylex';
-import { borders, colors, controls, iconSizes, layers, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
+import { borders, colors, controls, fontWeights, iconSizes, layers, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
 import { fieldCorners, controlSizes } from "./controlLook.js";
 import { Icon } from "./Icon.js";
 import { interact } from "./interaction.js";
 import { Popup } from "./Popup.js";
 import { PopupItem } from "./PopupItem.js";
-export function Select({ label, value, options, size = 'md', disabled = false, onChange, style }) {
+export function Select({ label, isLabelHidden = true, value, options, size = 'md', disabled = false, onChange, style }) {
+    const trigger = (_jsxs(BaseSelect.Trigger, { "aria-label": isLabelHidden ? label : undefined, className: (state) => stylex.props(styles.trigger, controlSizes[size], fieldCorners[size], triggerPaddings[size], styles.triggerLook, !disabled && styles.hoverable, state.open && styles.triggerOpen, disabled && styles.disabled, isLabelHidden && style).className, children: [_jsx("span", { ...stylex.props(styles.values), children: options.map((option) => (_jsx("span", { "aria-hidden": option.value !== value, ...stylex.props(styles.value, option.value !== value && styles.valueHidden), children: option.label }, option.value))) }), _jsx(BaseSelect.Icon, { className: stylex.props(styles.chevron).className, children: _jsx(Icon, { name: "chevronUpDown", size: size }) })] }));
     return (_jsxs(BaseSelect.Root, { items: options, value: value, disabled: disabled, onValueChange: (next) => {
             if (next === null)
                 return;
             interact({ primitive: 'Select', event: 'change', label });
             onChange(next);
-        }, children: [_jsxs(BaseSelect.Trigger, { "aria-label": label, className: (state) => stylex.props(styles.trigger, controlSizes[size], fieldCorners[size], triggerPaddings[size], styles.triggerLook, !disabled && styles.hoverable, state.open && styles.triggerOpen, disabled && styles.disabled, style).className, children: [_jsx("span", { ...stylex.props(styles.values), children: options.map((option) => (_jsx("span", { "aria-hidden": option.value !== value, ...stylex.props(styles.value, option.value !== value && styles.valueHidden), children: option.label }, option.value))) }), _jsx(BaseSelect.Icon, { className: stylex.props(styles.chevron).className, children: _jsx(Icon, { name: "chevronUpDown", size: size }) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { alignItemWithTrigger: false, side: "bottom", align: "start", sideOffset: 4, className: stylex.props(styles.positioner).className, children: _jsx(BaseSelect.Popup, { render: (props, state) => (_jsx(Popup, { ...props, kind: "select", isOpen: state.open, transitionStatus: state.transitionStatus })), children: options.map((option) => (_jsxs(BaseSelect.Item, { value: option.value, render: (props, state) => (_jsx(PopupItem, { ...props, kind: "select", isHighlighted: state.highlighted })), children: [_jsx("span", { ...stylex.props(styles.indicator), children: _jsx(BaseSelect.ItemIndicator, { className: stylex.props(styles.check).className, children: _jsx(Icon, { name: "check" }) }) }), _jsx(BaseSelect.ItemText, { children: option.label })] }, option.value))) }) }) })] }));
+        }, children: [isLabelHidden ? (trigger) : (_jsxs("div", { ...stylex.props(styles.field, style), children: [_jsx(BaseSelect.Label, { className: stylex.props(styles.label).className, children: label }), trigger] })), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { alignItemWithTrigger: false, side: "bottom", align: "start", sideOffset: 4, className: stylex.props(styles.positioner).className, children: _jsx(BaseSelect.Popup, { render: (props, state) => (_jsx(Popup, { ...props, kind: "select", isOpen: state.open, transitionStatus: state.transitionStatus })), children: options.map((option) => (_jsxs(BaseSelect.Item, { value: option.value, render: (props, state) => (_jsx(PopupItem, { ...props, kind: "select", isHighlighted: state.highlighted })), children: [_jsx("span", { ...stylex.props(styles.indicator), children: _jsx(BaseSelect.ItemIndicator, { className: stylex.props(styles.check).className, children: _jsx(Icon, { name: "check" }) }) }), _jsx(BaseSelect.ItemText, { children: option.label })] }, option.value))) }) }) })] }));
 }
 const focusRing = `inset 0 0 0 ${borders.hairline} ${colors.brandBorderFocus}, 0 0 0 ${borders.thin} ${colors.brandBorderFocus}, ${shadows.default}`;
 const styles = stylex.create({
+    field: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.xs,
+        minWidth: 0
+    },
+    label: {
+        fontWeight: fontWeights.medium,
+        color: colors.primaryForeground
+    },
     trigger: {
         display: 'flex',
         flexShrink: 0,

package/dist/components/calendarDates.d.ts

@@ -2,13 +2,14 @@ export declare function monthOf(date: string): string;
 export declare function addDays(date: string, days: number): string;
 export declare function addMonths(date: string, months: number): string;
 export declare function daysIn(month: string): number;
-export declare function weekdayIndex(date: string): number;
-export declare function weeksOf(month: string): readonly (readonly (string | null)[])[];
+export type WeekStart = 'monday' | 'sunday';
+export declare function weekdayIndex(date: string, weekStart?: WeekStart): number;
+export declare function weeksOf(month: string, weekStart?: WeekStart): readonly (readonly (string | null)[])[];
 export declare function localToday(): string;
 export declare function monthTitle(month: string, locale: string | undefined): string;
 export declare function dayLabel(date: string, locale: string | undefined): string;
 export declare function dayNumber(date: string, locale: string | undefined): string;
-export declare function weekdayNames(locale: string | undefined): readonly {
+export declare function weekdayNames(locale: string | undefined, weekStart?: WeekStart): readonly {
     short: string;
     long: string;
 }[];

package/dist/components/calendarDates.js

@@ -22,13 +22,14 @@ export function daysIn(month) {
     const start = utc(`${month}-01`);
     return new Date(Date.UTC(start.getUTCFullYear(), start.getUTCMonth() + 1, 0)).getUTCDate();
 }
-export function weekdayIndex(date) {
-    return (utc(date).getUTCDay() + 6) % 7;
+const SHIFTS = { monday: 6, sunday: 0 };
+export function weekdayIndex(date, weekStart = 'monday') {
+    return (utc(date).getUTCDay() + SHIFTS[weekStart]) % 7;
 }
-export function weeksOf(month) {
+export function weeksOf(month, weekStart = 'monday') {
     const first = `${month}-01`;
     const cells = [
-        ...Array.from({ length: weekdayIndex(first) }, () => null),
+        ...Array.from({ length: weekdayIndex(first, weekStart) }, () => null),
         ...Array.from({ length: daysIn(month) }, (_, index) => addDays(first, index))
     ];
     const weeks = [];
@@ -64,8 +65,8 @@ export function dayNumber(date, locale) {
         timeZone: 'UTC'
     }).format(utc(date));
 }
-export function weekdayNames(locale) {
-    const monday = '2024-01-01';
+export function weekdayNames(locale, weekStart = 'monday') {
+    const first = weekStart === 'sunday' ? '2023-12-31' : '2024-01-01';
     const short = new Intl.DateTimeFormat(locale, {
         weekday: 'short',
         timeZone: 'UTC'
@@ -75,7 +76,7 @@ export function weekdayNames(locale) {
         timeZone: 'UTC'
     });
     return Array.from({ length: 7 }, (_, index) => {
-        const day = utc(addDays(monday, index));
+        const day = utc(addDays(first, index));
         return {
             short: [...short.format(day)].slice(0, 2).join(''),
             long: long.format(day)

package/dist/rules/lintPlugin.js

@@ -4,6 +4,7 @@ const APP_THEME_FILE = 'src/theme/theme.ts';
 const APP_COLORS_FILE = 'src/theme/colors.stylex.ts';
 const SCROLL_AREA_FILE = 'src/components/ScrollArea.tsx';
 const GALLERY_FILE = 'src/components/Gallery.tsx';
+const DIALOG_FILE = 'src/components/Dialog.tsx';
 const SELECTABLE_FILE = 'src/components/Text.tsx';
 const PRIMITIVE_ELEMENTS = new Set([
     'button',
@@ -382,7 +383,9 @@ const hoverUsesHighlight = styleRule((declarations) => declarations
     message: HOVER_USES_HIGHLIGHT_MESSAGE
 })));
 const scrollViewOnly = styleRule((declarations, context) => {
-    if (inFile(context, SCROLL_AREA_FILE) || inFile(context, GALLERY_FILE)) {
+    if (inFile(context, SCROLL_AREA_FILE) ||
+        inFile(context, GALLERY_FILE) ||
+        inFile(context, DIALOG_FILE)) {
         return [];
     }
     return declarations

package/dist/start.js

@@ -55,6 +55,8 @@ function readInlineData() {
 }
 export function startApp(App, { theme = [], icons = {}, onInteraction } = {}) {
     setAppIcons(icons);
+    const rooted = stylex.props(theme, cornersFollowRadii).className ?? '';
+    document.documentElement.classList.add(...rooted.split(' ').filter(Boolean));
     document.body.className = stylex.props(base.body, theme).className ?? '';
     const hot = import.meta.hot;
     const testParams = new URLSearchParams(hot ? location.search : '');
@@ -163,6 +165,18 @@ function exposeToDevTools(app, gate, hot, world) {
         });
     });
 }
+const cornersFollowRadii = stylex.createTheme(corners, {
+    buttonXs: radii.sm,
+    buttonSm: radii.md,
+    buttonMd: radii.md,
+    buttonLg: radii.lg,
+    buttonXl: radii.lg,
+    fieldXs: radii.sm,
+    fieldSm: radii.md,
+    fieldMd: radii.md,
+    fieldLg: radii.lg,
+    fieldXl: radii.lg
+});
 const base = stylex.create({
     body: {
         fontFamily: fonts.sans,

package/dist/theme/tokens.stylex.d.ts

@@ -183,6 +183,7 @@ export declare const corners: stylex.VarGroup<Readonly<{
     fieldMd: string;
     fieldLg: string;
     fieldXl: string;
+    checkbox: string;
 }>, symbol>;
 export declare const fontSizes: stylex.VarGroup<Readonly<{
     captionXs: string;

package/dist/theme/tokens.stylex.js

@@ -180,7 +180,8 @@ export const corners = stylex.defineVars({
     fieldSm: radii.md,
     fieldMd: radii.md,
     fieldLg: radii.lg,
-    fieldXl: radii.lg
+    fieldXl: radii.lg,
+    checkbox: '4px'
 });
 export const fontSizes = stylex.defineVars({
     captionXs: '8px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trypattern/sdk",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "type": "module",
   "files": [
     "dist",