@trypattern/sdk 0.1.10 → 0.1.11

package/dist/components/ListRow.d.ts

@@ -2,12 +2,14 @@ import type { ReactNode } from 'react';
 import type { AppPath } from '../registered.ts';
 type ListRowProps = {
     to?: AppPath;
+    href?: string;
     onClick?: () => void;
     isMuted?: boolean;
     isCurrent?: boolean;
+    size?: 'sm' | 'md' | 'lg';
     leading?: ReactNode;
     trailing?: ReactNode;
     children: ReactNode;
 };
-export declare function ListRow({ to, onClick, isMuted, isCurrent, leading, trailing, children }: ListRowProps): import("react").JSX.Element;
+export declare function ListRow({ to, href, onClick, isMuted, isCurrent, size, leading, trailing, children }: ListRowProps): import("react").JSX.Element;
 export {};

package/dist/components/ListRow.js

@@ -5,20 +5,24 @@ import { Link as RouterLink } from 'react-router';
 import { colors, controls, radii, space } from "../theme/tokens.stylex.js";
 import { focusRing } from "./controlLook.js";
 import { interact, textOf } from "./interaction.js";
-export function ListRow({ to, onClick, isMuted = false, isCurrent = false, leading, trailing, children }) {
+export function ListRow({ to, href, onClick, isMuted = false, isCurrent = false, size = 'md', leading, trailing, children }) {
     const content = (_jsxs(_Fragment, { children: [leading, _jsx("span", { ...stylex.props(styles.main), children: children }), trailing === undefined ? null : (_jsx("span", { ...stylex.props(styles.trailing), children: trailing }))] }));
-    const look = stylex.props(styles.row, (to !== undefined || onClick !== undefined) && styles.interactive, isMuted && styles.muted, isCurrent && styles.current, focusRing.visible, focusRing.inside);
+    const look = stylex.props(styles.row, (to !== undefined || href !== undefined || onClick !== undefined) &&
+        styles.interactive, isMuted && styles.muted, isCurrent && styles.current, size === 'sm' && styles.small, size === 'lg' && styles.large, focusRing.visible, focusRing.inside);
     const report = () => {
         interact({
             primitive: 'ListRow',
-            event: to === undefined ? 'click' : 'navigate',
-            label: textOf(children) || (to ?? '')
+            event: to === undefined && href === undefined ? 'click' : 'navigate',
+            label: textOf(children) || (to ?? href ?? '')
         });
         onClick?.();
     };
     if (to !== undefined) {
         return (_jsx(RouterLink, { to: to, onClick: report, "aria-current": isCurrent ? 'page' : undefined, ...look, children: content }));
     }
+    if (href !== undefined) {
+        return (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", onClick: report, ...look, children: content }));
+    }
     if (onClick !== undefined) {
         return (_jsx(BaseButton, { onClick: report, "aria-pressed": isCurrent, className: look.className, children: content }));
     }
@@ -49,6 +53,16 @@ const styles = stylex.create({
     current: {
         backgroundColor: colors.transparentHover
     },
+    large: {
+        height: 'auto',
+        minHeight: controls.heightXl,
+        paddingBlock: space.md
+    },
+    small: {
+        gap: space.sm,
+        height: controls.heightMd,
+        paddingInline: space.sm
+    },
     main: {
         display: 'flex',
         flexGrow: 1,

package/dist/components/ScrollArea.d.ts

@@ -10,6 +10,7 @@ type ScrollAreaProps = {
         paddingBlock?: number | string;
         paddingInline?: number | string;
     }>;
+    axis?: 'vertical' | 'horizontal';
 };
-export declare function ScrollArea({ children, style }: ScrollAreaProps): import("react").JSX.Element;
+export declare function ScrollArea({ children, style, axis }: ScrollAreaProps): import("react").JSX.Element;
 export {};

package/dist/components/ScrollArea.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as stylex from '@stylexjs/stylex';
-export function ScrollArea({ children, style }) {
-    return _jsx("div", { ...stylex.props(styles.scroll, style), children: children });
+export function ScrollArea({ children, style, axis = 'vertical' }) {
+    return (_jsx("div", { ...stylex.props(styles.scroll, axis === 'horizontal' && styles.horizontal, style), children: children }));
 }
 const styles = stylex.create({
     scroll: {
@@ -9,5 +9,10 @@ const styles = stylex.create({
         minHeight: 0,
         overflowY: 'auto',
         overscrollBehavior: 'contain'
+    },
+    horizontal: {
+        height: 'auto',
+        overflowX: 'auto',
+        overflowY: 'hidden'
     }
 });

package/dist/components/Text.d.ts

@@ -3,7 +3,7 @@ import type { Placement } from './Placement.ts';
 import type { Tone } from './tones.ts';
 type TextProps = {
     children: ReactNode;
-    variant?: 'heading' | 'subheading' | 'title' | 'label' | 'body' | 'caption' | 'code';
+    variant?: 'heading' | 'subheading' | 'title' | 'lead' | 'label' | 'body' | 'caption' | 'code';
     tone?: Tone;
     align?: 'start' | 'center' | 'end';
     as?: 'span' | 'p' | 'h1' | 'h2' | 'h3';

package/dist/components/Text.js

@@ -23,17 +23,23 @@ const styles = stylex.create({
 const variants = stylex.create({
     heading: {
         fontSize: fontSizes.heading5,
-        fontWeight: fontWeights.semibold,
-        lineHeight: lineHeights.heading5
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.heading5,
+        letterSpacing: '-0.01em'
     },
     subheading: {
         fontSize: fontSizes.heading6,
-        fontWeight: fontWeights.semibold,
+        fontWeight: fontWeights.medium,
         lineHeight: lineHeights.heading6
     },
     title: {
         fontSize: fontSizes.bodyBase,
-        fontWeight: fontWeights.semibold,
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.body
+    },
+    lead: {
+        fontSize: fontSizes.bodyBase,
+        fontWeight: fontWeights.normal,
         lineHeight: lineHeights.body
     },
     label: {

package/dist/components/TextField.d.ts

@@ -1,3 +1,4 @@
+import type { IconName } from './icons.ts';
 import type { Placement } from './Placement.ts';
 import type { Size } from './Size.ts';
 type TextFieldProps = {
@@ -21,7 +22,8 @@ type TextFieldProps = {
     multiline?: boolean;
     rows?: number;
     size?: Size;
+    icon?: IconName;
     style?: Placement;
 };
-export declare function TextField({ label, isLabelHidden, description, error, onChange, multiline, rows, size, style, ...input }: TextFieldProps): import("react").JSX.Element;
+export declare function TextField({ label, isLabelHidden, description, error, onChange, multiline, rows, size, icon, style, ...input }: TextFieldProps): import("react").JSX.Element;
 export {};

package/dist/components/TextField.js

@@ -3,18 +3,19 @@ import { Field } from '@base-ui/react/field';
 import * as stylex from '@stylexjs/stylex';
 import { useRef } from 'react';
 import { borders, colors, controls, fontSizes, fontWeights, lineHeights, motion, shadows, space } from "../theme/tokens.stylex.js";
+import { Icon } from "./Icon.js";
 import { controlSizes } from "./controlLook.js";
 import { interact } from "./interaction.js";
-export function TextField({ label, isLabelHidden = false, description, error, onChange, multiline = false, rows = 3, size = 'md', style, ...input }) {
+export function TextField({ label, isLabelHidden = false, description, error, onChange, multiline = false, rows = 3, size = 'md', icon, style, ...input }) {
     const isInvalid = error !== undefined;
     const valueOnFocus = useRef('');
-    return (_jsxs(Field.Root, { invalid: isInvalid, disabled: input.disabled ?? false, className: stylex.props(styles.field, style).className, children: [isLabelHidden ? null : (_jsx(Field.Label, { className: stylex.props(styles.label).className, children: label })), _jsx(Field.Control, { ...input, ...(multiline ? { render: _jsx("textarea", { rows: rows }) } : {}), "aria-label": isLabelHidden ? label : undefined, onChange: (event) => onChange?.(event.currentTarget.value), onFocus: (event) => {
-                    valueOnFocus.current = event.currentTarget.value;
-                }, onBlur: (event) => {
-                    if (event.currentTarget.value !== valueOnFocus.current) {
-                        interact({ primitive: 'TextField', event: 'change', label });
-                    }
-                }, className: stylex.props(styles.input, controlSizes[size], multiline && styles.multiline, multiline && multilinePaddings[size], isInvalid && styles.invalid, input.disabled === true && styles.disabled).className }), description === undefined ? null : (_jsx(Field.Description, { className: stylex.props(styles.note).className, children: description })), error === undefined ? null : (_jsx(Field.Error, { match: true, className: stylex.props(styles.error).className, children: error }))] }));
+    return (_jsxs(Field.Root, { invalid: isInvalid, disabled: input.disabled ?? false, className: stylex.props(styles.field, style).className, children: [isLabelHidden ? null : (_jsx(Field.Label, { className: stylex.props(styles.label).className, children: label })), _jsxs("div", { ...stylex.props(styles.control), children: [icon === undefined ? null : (_jsx("span", { ...stylex.props(styles.icon), children: _jsx(Icon, { name: icon, tone: "tertiary" }) })), _jsx(Field.Control, { ...input, ...(multiline ? { render: _jsx("textarea", { rows: rows }) } : {}), "aria-label": isLabelHidden ? label : undefined, onChange: (event) => onChange?.(event.currentTarget.value), onFocus: (event) => {
+                            valueOnFocus.current = event.currentTarget.value;
+                        }, onBlur: (event) => {
+                            if (event.currentTarget.value !== valueOnFocus.current) {
+                                interact({ primitive: 'TextField', event: 'change', label });
+                            }
+                        }, className: stylex.props(styles.input, controlSizes[size], multiline && styles.multiline, multiline && multilinePaddings[size], icon !== undefined && styles.withIcon, isInvalid && styles.invalid, input.disabled === true && styles.disabled).className })] }), description === undefined ? null : (_jsx(Field.Description, { className: stylex.props(styles.note).className, children: description })), error === undefined ? null : (_jsx(Field.Error, { match: true, className: stylex.props(styles.error).className, children: error }))] }));
 }
 const focusRing = `inset 0 0 0 ${borders.hairline} ${colors.brandBorderFocus}, 0 0 0 ${borders.thin} ${colors.brandBorderFocus}, ${shadows.default}`;
 const invalidRing = `inset 0 0 0 ${borders.hairline} ${colors.dangerBorderDefault}, 0 0 0 ${borders.thin} ${colors.dangerBorderDefault}, ${shadows.default}`;
@@ -25,6 +26,22 @@ const styles = stylex.create({
         gap: space.xs,
         minWidth: 0
     },
+    control: {
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    icon: {
+        position: 'absolute',
+        insetBlock: 0,
+        insetInlineStart: space.sm,
+        display: 'flex',
+        alignItems: 'center',
+        pointerEvents: 'none'
+    },
+    withIcon: {
+        paddingInlineStart: `calc(${space.xl} + ${space.xs})`
+    },
     label: {
         fontWeight: fontWeights.medium,
         color: colors.primaryForeground

package/dist/server/session.js

@@ -43,7 +43,7 @@ export async function sessionCookieFor(env, user) {
         email: user.email,
         recheckAt: nowInSeconds() + RECHECK_SECONDS
     };
-    const cookie = await serializeSigned(SESSION_COOKIE, JSON.stringify(pass), env.SESSION_SECRET);
+    const cookie = await serializeSigned(SESSION_COOKIE, JSON.stringify(pass), env.SESSION_SECRET, { path: '/', secure: true });
     return { cookie: cookie.split(';')[0] ?? cookie, sessionId };
 }
 export async function readPass(c) {

package/dist/start.js

@@ -165,6 +165,9 @@ const base = stylex.create({
             [breakpoints.compact]: lineHeights.body
         },
         color: colors.primaryForeground,
-        backgroundColor: colors.shell
+        backgroundColor: colors.shell,
+        WebkitFontSmoothing: 'antialiased',
+        MozOsxFontSmoothing: 'grayscale',
+        fontSynthesis: 'none'
     }
 });

package/package.json

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