@setsquare/ui 0.1.0

package/dist/lib/cn.js

@@ -0,0 +1,59 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+/**
+ * tailwind-merge, taught this system's own utilities so a className you pass wins over the component's
+ * default for the same property ("px-2" replaces "px-3") without dropping anything unrelated.
+ */
+const merge = extendTailwindMerge({
+    extend: {
+        // Named sizes from the conformance tokens (h-control, size-choice, min-h-target, w-panel…).
+        theme: {
+            spacing: [
+                'target',
+                'control-target',
+                'control',
+                'control-sm',
+                'control-lg',
+                'nav-item',
+                'header',
+                'sidebar',
+                'sidebar-collapsed',
+                'panel',
+                'choice',
+            ],
+        },
+        classGroups: {
+            // The type scale (@utility text-title … text-code) sets size, line height and weight together.
+            'font-size': [
+                {
+                    text: [
+                        'display',
+                        'display-page',
+                        'display-section',
+                        'lead',
+                        'title',
+                        'heading',
+                        'subheading',
+                        'body',
+                        'ui',
+                        'ui-strong',
+                        'caption',
+                        'caption-strong',
+                        'code',
+                    ],
+                },
+            ],
+            'focus-ring': ['focus-ring', 'focus-ring-inset'],
+            // Field layers (theme.css): the painted box behind an input, and the input that is the target.
+            'field-paint': ['field-paint'],
+            'field-input': ['field-input'],
+            // Its own group, so tailwind-merge doesn't read it as a text colour and drop it for text-brand.
+            'text-link': ['text-link'],
+        },
+    },
+});
+/** Join class names, later ones winning where two set the same property. */
+export function cn(...parts) {
+    return merge(clsx(parts));
+}
+//# sourceMappingURL=cn.js.map

package/dist/lib/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","sourceRoot":"","sources":["../../src/lib/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,MAAM,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD;;;GAGG;AACH,MAAM,KAAK,GAAG,mBAAmB,CAA6D;IAC5F,MAAM,EAAE;QACN,4FAA4F;QAC5F,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,QAAQ;gBACR,gBAAgB;gBAChB,SAAS;gBACT,YAAY;gBACZ,YAAY;gBACZ,UAAU;gBACV,QAAQ;gBACR,SAAS;gBACT,mBAAmB;gBACnB,OAAO;gBACP,QAAQ;aACT;SACF;QACD,WAAW,EAAE;YACX,+FAA+F;YAC/F,WAAW,EAAE;gBACX;oBACE,IAAI,EAAE;wBACJ,SAAS;wBACT,cAAc;wBACd,iBAAiB;wBACjB,MAAM;wBACN,OAAO;wBACP,SAAS;wBACT,YAAY;wBACZ,MAAM;wBACN,IAAI;wBACJ,WAAW;wBACX,SAAS;wBACT,gBAAgB;wBAChB,MAAM;qBACP;iBACF;aACF;YACD,YAAY,EAAE,CAAC,YAAY,EAAE,kBAAkB,CAAC;YAChD,+FAA+F;YAC/F,aAAa,EAAE,CAAC,aAAa,CAAC;YAC9B,aAAa,EAAE,CAAC,aAAa,CAAC;YAC9B,gGAAgG;YAChG,WAAW,EAAE,CAAC,WAAW,CAAC;SAC3B;KACF;CACF,CAAC,CAAC;AAEH,4EAA4E;AAC5E,MAAM,UAAU,EAAE,CAAC,GAAG,KAAmB;IACvC,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AAC5B,CAAC"}

package/dist/lib/tokens.d.ts

@@ -0,0 +1,5 @@
+/** Read a time token (e.g. "8000ms", "0.4s") from the resolved CSS variables. Falls back when not in a browser. */
+export declare function readMs(name: string, fallback: number): number;
+/** The first focusable element after `el` in document order (for moving focus off something being removed). */
+export declare function focusAfter(el: HTMLElement | null, fallbackId?: string): void;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/lib/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/lib/tokens.ts"],"names":[],"mappings":"AAAA,mHAAmH;AACnH,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAO7D;AAED,+GAA+G;AAC/G,wBAAgB,UAAU,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,EAAE,UAAU,SAAS,QAUrE"}

package/dist/lib/tokens.js

@@ -0,0 +1,22 @@
+/** Read a time token (e.g. "8000ms", "0.4s") from the resolved CSS variables. Falls back when not in a browser. */
+export function readMs(name, fallback) {
+    if (typeof document === 'undefined')
+        return fallback;
+    const raw = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+    if (!raw)
+        return fallback;
+    const n = parseFloat(raw);
+    if (Number.isNaN(n))
+        return fallback;
+    return raw.endsWith('ms') ? n : raw.endsWith('s') ? n * 1000 : n;
+}
+/** The first focusable element after `el` in document order (for moving focus off something being removed). */
+export function focusAfter(el, fallbackId = 'main') {
+    const selector = 'a[href], button:not([disabled]), input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    const all = Array.from(document.querySelectorAll(selector)).filter((x) => !el?.contains(x) && x.getClientRects().length > 0);
+    const next = el
+        ? all.find((x) => el.compareDocumentPosition(x) & Node.DOCUMENT_POSITION_FOLLOWING)
+        : undefined;
+    (next ?? document.getElementById(fallbackId))?.focus();
+}
+//# sourceMappingURL=tokens.js.map

package/dist/lib/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/lib/tokens.ts"],"names":[],"mappings":"AAAA,mHAAmH;AACnH,MAAM,UAAU,MAAM,CAAC,IAAY,EAAE,QAAgB;IACnD,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,QAAQ,CAAC;IACrD,MAAM,GAAG,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;IACrF,IAAI,CAAC,GAAG;QAAE,OAAO,QAAQ,CAAC;IAC1B,MAAM,CAAC,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAAE,OAAO,QAAQ,CAAC;IACrC,OAAO,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AACnE,CAAC;AAED,+GAA+G;AAC/G,MAAM,UAAU,UAAU,CAAC,EAAsB,EAAE,UAAU,GAAG,MAAM;IACpE,MAAM,QAAQ,GACZ,8JAA8J,CAAC;IACjK,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAc,QAAQ,CAAC,CAAC,CAAC,MAAM,CAC7E,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,cAAc,EAAE,CAAC,MAAM,GAAG,CAAC,CACzD,CAAC;IACF,MAAM,IAAI,GAAG,EAAE;QACb,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,2BAA2B,CAAC;QACnF,CAAC,CAAC,SAAS,CAAC;IACd,CAAC,IAAI,IAAI,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;AACzD,CAAC"}

package/dist/lib/use-element-width.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from 'react';
+/** Width of an element, kept current with a ResizeObserver. 0 until first measured. */
+export declare function useElementWidth(ref: RefObject<HTMLElement | null>): number;
+//# sourceMappingURL=use-element-width.d.ts.map

package/dist/lib/use-element-width.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-element-width.d.ts","sourceRoot":"","sources":["../../src/lib/use-element-width.ts"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,uFAAuF;AACvF,wBAAgB,eAAe,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,MAAM,CAW1E"}

package/dist/lib/use-element-width.js

@@ -0,0 +1,17 @@
+'use client';
+import { useLayoutEffect, useState } from 'react';
+/** Width of an element, kept current with a ResizeObserver. 0 until first measured. */
+export function useElementWidth(ref) {
+    const [width, setWidth] = useState(0);
+    useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        setWidth(el.getBoundingClientRect().width);
+        const ro = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [ref]);
+    return width;
+}
+//# sourceMappingURL=use-element-width.js.map

package/dist/lib/use-element-width.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-element-width.js","sourceRoot":"","sources":["../../src/lib/use-element-width.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAElE,uFAAuF;AACvF,MAAM,UAAU,eAAe,CAAC,GAAkC;IAChE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,QAAQ,CAAC,EAAE,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;QAC3C,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;QAC9E,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QACf,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IAC/B,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACV,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/lint/index.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @setsquare/ui/lint — lint rules that keep product code clear of the positioning bugs the components are
+ * built to avoid. An ESLint plugin (flat config), which oxlint also loads through `jsPlugins`.
+ *
+ * The bug they guard against: an element that is `position: absolute` with no offsets (React Aria's
+ * VisuallyHidden inputs, Tailwind's `sr-only`) is laid out against its nearest *positioned* ancestor. When a
+ * scroll container sits between the two, the element does not scroll with the content; when something scrolls
+ * it into view — focus, a screen reader's cursor, find in page — the browser scrolls the outer, often
+ * overflow:hidden, ancestor instead, and the page shifts, leaving blank space at the bottom.
+ *
+ * Two more keep the three-layer controls intact: a control's `className` is its target (Layer 1), so a size
+ * there can shrink the target below 44px at AAA; and the painted classes on their own (Layer 2) make the paint
+ * the target.
+ *
+ * Static analysis can only see some of it. `@setsquare/ui/testing` checks the rendered page, and finds the rest.
+ */
+import type { Rule } from 'eslint';
+export declare const rules: {
+    'no-raw-aria-controls': Rule.RuleModule;
+    'positioned-scroll-container': Rule.RuleModule;
+    'no-static-control-root': Rule.RuleModule;
+    'no-target-shrink': Rule.RuleModule;
+    'no-visual-only-target': Rule.RuleModule;
+    'client-directive': Rule.RuleModule;
+};
+declare const plugin: {
+    meta: {
+        name: string;
+    };
+    rules: {
+        'no-raw-aria-controls': Rule.RuleModule;
+        'positioned-scroll-container': Rule.RuleModule;
+        'no-static-control-root': Rule.RuleModule;
+        'no-target-shrink': Rule.RuleModule;
+        'no-visual-only-target': Rule.RuleModule;
+        'client-directive': Rule.RuleModule;
+    };
+    configs: Record<string, unknown>;
+};
+export default plugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/lint/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lint/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAwoBnC,eAAO,MAAM,KAAK;IAChB,sBAAsB;IACtB,6BAA6B;IAC7B,wBAAwB;IACxB,kBAAkB;IAClB,uBAAuB;IACvB,kBAAkB;CACnB,CAAC;AAEF,QAAA,MAAM,MAAM;;QACF,IAAI;;;;;;;;;;aAEG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CACvC,CAAC;eAea,MAAM"}