@spinjs/components 0.1.0-preview.1 → 0.2.0-alpha.1

package/dist/number-input/number-input.presentation.js

@@ -1,6 +1,6 @@
-import { isValueWithinRange, parseValue } from "./number-input.state.js";
 import { numberInput as numberInput$1 } from "./number-input.machine.js";
-import { defineComponent } from "@spinjs/runtime";
+import { isValueWithinRange, parseValue } from "./number-input.state.js";
+import { defineComponent } from "@spinjs/components/runtime";
 // src/number-input/number-input.presentation.ts
 const SPIN_DWELL = 300;
 const SPIN_REPEAT = 50;
@@ -221,7 +221,7 @@ const def = {
 				"data-invalid": scope.attr(invalidOf(context)),
 				"data-scrubbing": scope.attr(scope.state === "scrubbing"),
 				"aria-disabled": disabledOf(context),
-				"aria-invalid": invalidOf(context),
+				"aria-invalid": invalidOf(context) ? true : void 0,
 				"use:autoplay": {
 					interval: context.spin === "repeat" ? SPIN_REPEAT : SPIN_DWELL,
 					enabled: spinning,
@@ -256,7 +256,7 @@ const def = {
 					disabled: disabledOf(context),
 					readOnly: context.readOnly,
 					required: context.required,
-					"aria-invalid": invalidOf(context),
+					"aria-invalid": invalidOf(context) ? true : void 0,
 					"aria-valuemin": context.min,
 					"aria-valuemax": context.max,
 					"aria-valuenow": Number.isNaN(number) ? void 0 : number,

package/dist/number-input/number-input.state.d.ts

@@ -67,5 +67,4 @@ declare const decimalOp: (a: number, op: "+" | "-", b: number) => number;
 export declare const incrementValue: (value: number, step: number) => number;
 export declare const decrementValue: (value: number, step: number) => number;
 export declare const clampValue: (value: number, min: number, max: number) => number;
-export { countDecimals, decimalOp };
-//# sourceMappingURL=number-input.state.d.ts.map
+export { countDecimals, decimalOp };

package/dist/number-input/number-input.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/number-input/number-input.state.ts
 const MIN_SAFE = Number.MIN_SAFE_INTEGER;
 const MAX_SAFE = Number.MAX_SAFE_INTEGER;

package/dist/number-input/number-input.transitions.d.ts

@@ -1,6 +1,6 @@
-import { NumberInputEvent, NumberInputEvents } from "./number-input.events.js";
 import { NumberInputContext } from "./number-input.state.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { NumberInputEvent, NumberInputEvents } from "./number-input.events.js";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type NumberInputAssign<K extends keyof NumberInputEvents = keyof NumberInputEvents> = AssignFor<NumberInputContext, NumberInputEvents, K>;
 export declare const increment: NumberInputAssign<"VALUE.INCREMENT" | "INPUT.ARROW_UP" | "TRIGGER.PRESS_DOWN" | "SCRUBBER.POINTER_MOVE" | "SPIN">;
 export declare const decrement: NumberInputAssign<"VALUE.DECREMENT" | "INPUT.ARROW_DOWN" | "TRIGGER.PRESS_DOWN" | "SCRUBBER.POINTER_MOVE" | "SPIN">;
@@ -13,5 +13,4 @@ export declare const moved: (ctx: NumberInputContext, event: NumberInputEvent, o
 export declare const isIncrementHint: GuardFor<NumberInputContext, NumberInputEvents>;
 export declare const isDecrementHint: GuardFor<NumberInputContext, NumberInputEvents>;
 export declare const outOfRange: (ctx: NumberInputContext) => boolean;
-export {};
-//# sourceMappingURL=number-input.transitions.d.ts.map
+export {};

package/dist/pagination/examples/basic.html

@@ -21,10 +21,10 @@ const machine = pagination({
   ><span aria-hidden="true">‹</span></button>
   <template for={machine.getItems()} as={row} key={row.key}>
     <button
-      class={["min-w-7 s-sm transition-colors duration-fast ease-decelerate", { "secondary hover:bg-surface": row.value !== machine.page, "hidden": row.type !== "page" }]}
+      class={["min-w-7 s-sm", { "secondary": row.value !== machine.page, "hidden": row.type !== "page" }]}
       {...machine.getItemProps(row)}
     >{row.label}</button><span
-      class={["grid h-7 min-w-7 place-items-center px-1 text-xs text-text-muted", { "hidden": row.type !== "ellipsis" }]}
+      class={["grid h-7 min-w-7 place-items-center px-1 type-caption text-muted", { "hidden": row.type !== "ellipsis" }]}
       {...machine.getEllipsisProps(row)}
     >{row.label}</span>
   </template>

package/dist/pagination/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/pagination/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { pagination } from \"../pagination.presentation.ts\";\n\nconst machine = pagination({\n  count: 100,\n  pageSize: 10,\n  siblingCount: 1,\n  page: 1,\n});\n<\/script>\n\n<nav class=\"flex w-full flex-nowrap items-center gap-1 overflow-x-auto\"\n  {...machine.getRootProps()}>\n  <button\n    class=\"secondary icon s-sm disabled:opacity-40\"\n    {...machine.getFirstTriggerProps()}\n  ><span aria-hidden=\"true\">«</span></button>\n  <button\n    class=\"secondary icon s-sm disabled:opacity-40\"\n    {...machine.getPrevTriggerProps()}\n  ><span aria-hidden=\"true\">‹</span></button>\n  <template for={machine.getItems()} as={row} key={row.key}>\n    <button\n      class={[\"min-w-7 s-sm\", { \"secondary\": row.value !== machine.page, \"hidden\": row.type !== \"page\" }]}\n      {...machine.getItemProps(row)}\n    >{row.label}</button><span\n      class={[\"grid h-7 min-w-7 place-items-center px-1 type-caption text-muted\", { \"hidden\": row.type !== \"ellipsis\" }]}\n      {...machine.getEllipsisProps(row)}\n    >{row.label}</span>\n  </template>\n  <button\n    class=\"secondary icon s-sm disabled:opacity-40\"\n    {...machine.getNextTriggerProps()}\n  ><span aria-hidden=\"true\">›</span></button>\n  <button\n    class=\"secondary icon s-sm disabled:opacity-40\"\n    {...machine.getLastTriggerProps()}\n  ><span aria-hidden=\"true\">»</span></button>\n</nav>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/pagination/examples/dropdown.html

@@ -6,7 +6,7 @@ const machine = pagination({ count: 100, pageSize: 10, siblingCount: 1 });
 
 <nav class="flex w-full flex-wrap items-center justify-between gap-3"
   {...machine.getRootProps()}>
-  <div class="text-sm text-text-muted">Page {machine.page} of {machine.totalPages}</div>
+  <div class="type-body text-muted">Page {machine.page} of {machine.totalPages}</div>
   <div class="flex items-center gap-1">
     <button
       class="secondary icon s-sm disabled:opacity-40"
@@ -17,7 +17,7 @@ const machine = pagination({ count: 100, pageSize: 10, siblingCount: 1 });
       {...machine.getPrevTriggerProps()}
     ><span aria-hidden="true">‹</span></button>
     <select
-      class="h-7 min-w-20 rounded-md border border-solid border-border bg-surface px-2 text-sm text-text"
+      class="h-7 min-w-20"
       aria-label="Go to page"
       on:change={(event) => machine.setPage(event.target.value)}
     >

package/dist/pagination/examples/dropdown.html.js

@@ -0,0 +1,5 @@
+// src/pagination/examples/dropdown.html
+var dropdown_default = "<script lang=\"ts\">\nimport { pagination } from \"../pagination.presentation.ts\";\n\nconst machine = pagination({ count: 100, pageSize: 10, siblingCount: 1 });\n<\/script>\n\n<nav class=\"flex w-full flex-wrap items-center justify-between gap-3\"\n  {...machine.getRootProps()}>\n  <div class=\"type-body text-muted\">Page {machine.page} of {machine.totalPages}</div>\n  <div class=\"flex items-center gap-1\">\n    <button\n      class=\"secondary icon s-sm disabled:opacity-40\"\n      {...machine.getFirstTriggerProps()}\n    ><span aria-hidden=\"true\">«</span></button>\n    <button\n      class=\"secondary icon s-sm disabled:opacity-40\"\n      {...machine.getPrevTriggerProps()}\n    ><span aria-hidden=\"true\">‹</span></button>\n    <select\n      class=\"h-7 min-w-20\"\n      aria-label=\"Go to page\"\n      on:change={(event) => machine.setPage(event.target.value)}\n    >\n      <template for={machine.pageOptions} as={row} key={row.key}>\n        <option value={row.value} selected={row.value === machine.page}>{row.label}</option>\n      </template>\n    </select>\n    <button\n      class=\"secondary icon s-sm disabled:opacity-40\"\n      {...machine.getNextTriggerProps()}\n    ><span aria-hidden=\"true\">›</span></button>\n    <button\n      class=\"secondary icon s-sm disabled:opacity-40\"\n      {...machine.getLastTriggerProps()}\n    ><span aria-hidden=\"true\">»</span></button>\n  </div>\n</nav>\n";
+export { dropdown_default as default };
+
+//# sourceMappingURL=dropdown.html.js.map

package/dist/pagination/examples/info.html

@@ -21,10 +21,10 @@ const machine = pagination({
   ><span aria-hidden="true">‹</span></button>
   <template for={machine.getItems()} as={row} key={row.key}>
     <button
-      class={["min-w-7 s-sm transition-colors duration-fast ease-decelerate", { "secondary hover:bg-surface": row.value !== machine.page, "hidden": row.type !== "page" }]}
+      class={["min-w-7 s-sm", { "secondary": row.value !== machine.page, "hidden": row.type !== "page" }]}
       {...machine.getItemProps(row)}
     >{row.label}</button><span
-      class={["grid h-7 min-w-7 place-items-center px-1 text-xs text-text-muted", { "hidden": row.type !== "ellipsis" }]}
+      class={["grid h-7 min-w-7 place-items-center px-1 type-caption text-muted", { "hidden": row.type !== "ellipsis" }]}
       {...machine.getEllipsisProps(row)}
     >{row.label}</span>
   </template>
@@ -37,5 +37,5 @@ const machine = pagination({
     {...machine.getLastTriggerProps()}
   ><span aria-hidden="true">»</span></button>
   <p
-    class="text-xs text-text-muted">Page {machine.page} of {machine.totalPages}</p>
+    class="text-muted">Page {machine.page} of {machine.totalPages}</p>
 </nav>

package/dist/pagination/examples/info.html.js

@@ -0,0 +1,5 @@
+// src/pagination/examples/info.html
+var info_default = "<script lang=\"ts\">\nimport { pagination } from \"../pagination.presentation.ts\";\n\nconst machine = pagination({\n  count: 100,\n  pageSize: 10,\n  siblingCount: 1,\n  page: 3,\n});\n<\/script>\n\n<nav class=\"flex w-full flex-nowrap items-center gap-1 overflow-x-auto\"\n  {...machine.getRootProps()}>\n  <button\n    class=\"secondary icon s-sm disabled:opacity-40\"\n    {...machine.getFirstTriggerProps()}\n  ><span aria-hidden=\"true\">«</span></button>\n  <button\n    class=\"secondary icon s-sm disabled:opacity-40\"\n    {...machine.getPrevTriggerProps()}\n  ><span aria-hidden=\"true\">‹</span></button>\n  <template for={machine.getItems()} as={row} key={row.key}>\n    <button\n      class={[\"min-w-7 s-sm\", { \"secondary\": row.value !== machine.page, \"hidden\": row.type !== \"page\" }]}\n      {...machine.getItemProps(row)}\n    >{row.label}</button><span\n      class={[\"grid h-7 min-w-7 place-items-center px-1 type-caption text-muted\", { \"hidden\": row.type !== \"ellipsis\" }]}\n      {...machine.getEllipsisProps(row)}\n    >{row.label}</span>\n  </template>\n  <button\n    class=\"secondary icon s-sm disabled:opacity-40\"\n    {...machine.getNextTriggerProps()}\n  ><span aria-hidden=\"true\">›</span></button>\n  <button\n    class=\"secondary icon s-sm disabled:opacity-40\"\n    {...machine.getLastTriggerProps()}\n  ><span aria-hidden=\"true\">»</span></button>\n  <p\n    class=\"text-muted\">Page {machine.page} of {machine.totalPages}</p>\n</nav>\n";
+export { info_default as default };
+
+//# sourceMappingURL=info.html.js.map

package/dist/pagination/examples/jump.html

@@ -16,10 +16,10 @@ const machine = pagination({ count: 100, pageSize: 10, siblingCount: 1 });
   ><span aria-hidden="true">‹</span></button>
   <template for={machine.getItems()} as={row} key={row.key}>
     <button
-      class={["min-w-7 s-sm transition-colors duration-fast ease-decelerate", { "secondary hover:bg-surface": row.value !== machine.page, "hidden": row.type !== "page" }]}
+      class={["min-w-7 s-sm", { "secondary": row.value !== machine.page, "hidden": row.type !== "page" }]}
       {...machine.getItemProps(row)}
     >{row.label}</button><span
-      class={["grid h-7 min-w-7 place-items-center px-1 text-xs text-text-muted", { "hidden": row.type !== "ellipsis" }]}
+      class={["grid h-7 min-w-7 place-items-center px-1 type-caption text-muted", { "hidden": row.type !== "ellipsis" }]}
       {...machine.getEllipsisProps(row)}
     >{row.label}</span>
   </template>

package/dist/pagination/examples/jump.html.js

@@ -0,0 +1,5 @@
+// src/pagination/examples/jump.html
+var jump_default = "<script lang=\"ts\">\nimport { pagination } from \"../pagination.presentation.ts\";\n\nconst machine = pagination({ count: 100, pageSize: 10, siblingCount: 1 });\n<\/script>\n\n<nav class=\"flex w-full flex-wrap items-center gap-3\"\n  {...machine.getRootProps()}>\n  <button\n    class=\"secondary icon s-sm disabled:opacity-40\"\n    {...machine.getFirstTriggerProps()}\n  ><span aria-hidden=\"true\">«</span></button>\n  <button\n    class=\"secondary icon s-sm disabled:opacity-40\"\n    {...machine.getPrevTriggerProps()}\n  ><span aria-hidden=\"true\">‹</span></button>\n  <template for={machine.getItems()} as={row} key={row.key}>\n    <button\n      class={[\"min-w-7 s-sm\", { \"secondary\": row.value !== machine.page, \"hidden\": row.type !== \"page\" }]}\n      {...machine.getItemProps(row)}\n    >{row.label}</button><span\n      class={[\"grid h-7 min-w-7 place-items-center px-1 type-caption text-muted\", { \"hidden\": row.type !== \"ellipsis\" }]}\n      {...machine.getEllipsisProps(row)}\n    >{row.label}</span>\n  </template>\n  <button\n    class=\"secondary icon s-sm disabled:opacity-40\"\n    {...machine.getNextTriggerProps()}\n  ><span aria-hidden=\"true\">›</span></button>\n  <button\n    class=\"secondary icon s-sm disabled:opacity-40\"\n    {...machine.getLastTriggerProps()}\n  ><span aria-hidden=\"true\">»</span></button>\n  <div class=\"flex items-center gap-1\" data-jump=\"\">\n    <input type=\"number\" class=\"w-16 tabular-nums\" min=\"1\" value=\"1\" aria-label=\"Go to page\" />\n    <button type=\"button\" class=\"secondary s-sm\" data-go=\"\">Go</button>\n  </div>\n</nav>\n";
+export { jump_default as default };
+
+//# sourceMappingURL=jump.html.js.map

package/dist/pagination/examples/numbered.html

@@ -17,10 +17,10 @@ const machine = pagination({
   ><span aria-hidden="true">‹</span></button>
   <template for={machine.getItems()} as={row} key={row.key}>
     <button
-      class={["min-w-7 s-sm transition-colors duration-fast ease-decelerate", { "secondary hover:bg-surface": row.value !== machine.page, "hidden": row.type !== "page" }]}
+      class={["min-w-7 s-sm", { "secondary": row.value !== machine.page, "hidden": row.type !== "page" }]}
       {...machine.getItemProps(row)}
     >{row.label}</button><span
-      class={["grid h-7 min-w-7 place-items-center px-1 text-xs text-text-muted", { "hidden": row.type !== "ellipsis" }]}
+      class={["grid h-7 min-w-7 place-items-center px-1 type-caption text-muted", { "hidden": row.type !== "ellipsis" }]}
       {...machine.getEllipsisProps(row)}
     >{row.label}</span>
   </template>

package/dist/pagination/examples/numbered.html.js

@@ -0,0 +1,5 @@
+// src/pagination/examples/numbered.html
+var numbered_default = "<script lang=\"ts\">\nimport { pagination } from \"../pagination.presentation.ts\";\n\nconst machine = pagination({\n  count: 100,\n  pageSize: 10,\n  siblingCount: 2,\n  page: 5,\n});\n<\/script>\n\n<nav class=\"flex w-full flex-nowrap items-center gap-1 overflow-x-auto\"\n  {...machine.getRootProps()}>\n  <button\n    class=\"secondary icon s-sm disabled:opacity-40\"\n    {...machine.getPrevTriggerProps()}\n  ><span aria-hidden=\"true\">‹</span></button>\n  <template for={machine.getItems()} as={row} key={row.key}>\n    <button\n      class={[\"min-w-7 s-sm\", { \"secondary\": row.value !== machine.page, \"hidden\": row.type !== \"page\" }]}\n      {...machine.getItemProps(row)}\n    >{row.label}</button><span\n      class={[\"grid h-7 min-w-7 place-items-center px-1 type-caption text-muted\", { \"hidden\": row.type !== \"ellipsis\" }]}\n      {...machine.getEllipsisProps(row)}\n    >{row.label}</span>\n  </template>\n  <button\n    class=\"secondary icon s-sm disabled:opacity-40\"\n    {...machine.getNextTriggerProps()}\n  ><span aria-hidden=\"true\">›</span></button>\n</nav>\n";
+export { numbered_default as default };
+
+//# sourceMappingURL=numbered.html.js.map

package/dist/pagination/examples/pagesize.html

@@ -6,7 +6,7 @@ const machine = pagination({ count: 100, pageSize: 10, siblingCount: 1 });
 
 <nav class="flex w-full flex-wrap items-center gap-6"
   {...machine.getRootProps()}>
-  <div class="flex items-center gap-2 text-sm text-text-muted">
+  <div class="flex items-center gap-2 type-body text-muted">
     <label for="pg-size">Rows per page</label>
     <div class="flex items-center gap-1">
       <button class={["s-sm", { "secondary": machine.pageSize !== 10 }]} on:click={() => machine.setPageSize(10)}>10</button>
@@ -14,7 +14,7 @@ const machine = pagination({ count: 100, pageSize: 10, siblingCount: 1 });
       <button class={["s-sm", { "secondary": machine.pageSize !== 50 }]} on:click={() => machine.setPageSize(50)}>50</button>
     </div>
   </div>
-  <div class="text-sm text-text-muted"
+  <div class="type-body text-muted"
     data-range="">{machine.pageRange.start + 1}-{machine.pageRange.end} of {machine.count}</div>
   <div class="flex items-center gap-1">
     <button
@@ -27,10 +27,10 @@ const machine = pagination({ count: 100, pageSize: 10, siblingCount: 1 });
     ><span aria-hidden="true">‹</span></button>
     <template for={machine.getItems()} as={row} key={row.key}>
       <button
-        class={["min-w-7 s-sm transition-colors duration-fast ease-decelerate", { "secondary hover:bg-surface": row.value !== machine.page, "hidden": row.type !== "page" }]}
+        class={["min-w-7 s-sm", { "secondary": row.value !== machine.page, "hidden": row.type !== "page" }]}
         {...machine.getItemProps(row)}
       >{row.label}</button><span
-        class={["grid h-7 min-w-7 place-items-center px-1 text-xs text-text-muted", { "hidden": row.type !== "ellipsis" }]}
+      class={["grid h-7 min-w-7 place-items-center px-1 type-caption text-muted", { "hidden": row.type !== "ellipsis" }]}
         {...machine.getEllipsisProps(row)}
       >{row.label}</span>
     </template>

package/dist/pagination/examples/pagesize.html.js

@@ -0,0 +1,5 @@
+// src/pagination/examples/pagesize.html
+var pagesize_default = "<script lang=\"ts\">\nimport { pagination } from \"../pagination.presentation.ts\";\n\nconst machine = pagination({ count: 100, pageSize: 10, siblingCount: 1 });\n<\/script>\n\n<nav class=\"flex w-full flex-wrap items-center gap-6\"\n  {...machine.getRootProps()}>\n  <div class=\"flex items-center gap-2 type-body text-muted\">\n    <label for=\"pg-size\">Rows per page</label>\n    <div class=\"flex items-center gap-1\">\n      <button class={[\"s-sm\", { \"secondary\": machine.pageSize !== 10 }]} on:click={() => machine.setPageSize(10)}>10</button>\n      <button class={[\"s-sm\", { \"secondary\": machine.pageSize !== 20 }]} on:click={() => machine.setPageSize(20)}>20</button>\n      <button class={[\"s-sm\", { \"secondary\": machine.pageSize !== 50 }]} on:click={() => machine.setPageSize(50)}>50</button>\n    </div>\n  </div>\n  <div class=\"type-body text-muted\"\n    data-range=\"\">{machine.pageRange.start + 1}-{machine.pageRange.end} of {machine.count}</div>\n  <div class=\"flex items-center gap-1\">\n    <button\n      class=\"secondary icon s-sm disabled:opacity-40\"\n      {...machine.getFirstTriggerProps()}\n    ><span aria-hidden=\"true\">«</span></button>\n    <button\n      class=\"secondary icon s-sm disabled:opacity-40\"\n      {...machine.getPrevTriggerProps()}\n    ><span aria-hidden=\"true\">‹</span></button>\n    <template for={machine.getItems()} as={row} key={row.key}>\n      <button\n        class={[\"min-w-7 s-sm\", { \"secondary\": row.value !== machine.page, \"hidden\": row.type !== \"page\" }]}\n        {...machine.getItemProps(row)}\n      >{row.label}</button><span\n      class={[\"grid h-7 min-w-7 place-items-center px-1 type-caption text-muted\", { \"hidden\": row.type !== \"ellipsis\" }]}\n        {...machine.getEllipsisProps(row)}\n      >{row.label}</span>\n    </template>\n    <button\n      class=\"secondary icon s-sm disabled:opacity-40\"\n      {...machine.getNextTriggerProps()}\n    ><span aria-hidden=\"true\">›</span></button>\n    <button\n      class=\"secondary icon s-sm disabled:opacity-40\"\n      {...machine.getLastTriggerProps()}\n    ><span aria-hidden=\"true\">»</span></button>\n  </div>\n</nav>\n";
+export { pagesize_default as default };
+
+//# sourceMappingURL=pagesize.html.js.map

package/dist/pagination/pagination.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface PaginationEvents {
   "SET_PAGE": {
     page: number;
@@ -32,5 +32,4 @@ export type PaginationPageItem = {
   readonly index: number;
   readonly key: string;
   readonly label: string;
-};
-//# sourceMappingURL=pagination.events.d.ts.map
+};

package/dist/pagination/pagination.machine.d.ts

@@ -1,6 +1,6 @@
-import { PaginationEvents, PaginationPageChange, PaginationPageItem, PaginationPageSizeChange } from "./pagination.events.js";
+/** Pagination machine: one idle state with guarded transitions. */
 import { PaginationArgs, PaginationContext, PaginationState, asCount, clampPage, nextPage, pageItems, pageRange, pageWindow, previousPage, totalPages } from "./pagination.state.js";
-import { Machine } from "@spinjs/runtime/fsm";
+import { PaginationEvents, PaginationPageChange, PaginationPageItem, PaginationPageSizeChange } from "./pagination.events.js";
+import { Machine } from "@spinjs/components/fsm";
 export declare function pagination(args?: PaginationArgs, authored?: (name: string) => boolean): Machine<PaginationContext, PaginationEvents, PaginationState>;
-export { type PaginationPageChange, type PaginationPageItem, type PaginationPageSizeChange, asCount, clampPage, nextPage, pageItems, pageRange, pageWindow, previousPage, totalPages };
-//# sourceMappingURL=pagination.machine.d.ts.map
+export { type PaginationPageChange, type PaginationPageItem, type PaginationPageSizeChange, asCount, clampPage, nextPage, pageItems, pageRange, pageWindow, previousPage, totalPages };

package/dist/pagination/pagination.machine.js

@@ -1,6 +1,6 @@
 import { asCount, clampPage, initial, nextPage, pageItems, pageRange, pageWindow, previousPage, totalPages } from "./pagination.state.js";
 import { canSetPage, firstPage, hasNext, hasPrev, lastPage, nextPage as nextPage$1, prevPage, resetPageIfStranded, setCount, setPage, setPageSize } from "./pagination.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/pagination/pagination.machine.ts
 /** Pagination machine: one idle state with guarded transitions. */
 function pagination(args = {}, authored = () => false) {

package/dist/pagination/pagination.presentation.d.ts

@@ -1,11 +1,11 @@
 import { PaginationEvents, PaginationPageItem } from "./pagination.events.js";
 import { PaginationArgs, PaginationContext, PaginationState, pageItems } from "./pagination.state.js";
-import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/components/runtime";
 type ScopeLike = ViewFor<PaginationContext, PaginationEvents, PaginationState>;
 type SlotLike<R> = SlotViewFor<R, PaginationContext, PaginationEvents, PaginationState>;
 export declare const def: {
   name: string;
-  machine: (args: PaginationArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<PaginationContext, PaginationEvents, "idle">;
+  machine: (args: PaginationArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<PaginationContext, PaginationEvents, "idle">;
   start: "idle";
   parts: {
     root: {
@@ -156,6 +156,5 @@ export declare const def: {
   };
 };
 export type PaginationApi = ApiOf<typeof def>;
-export declare const pagination: import("@spinjs/runtime").DefinedComponent<PaginationApi, PaginationArgs>;
-export type { PaginationArgs, PaginationState };
-//# sourceMappingURL=pagination.presentation.d.ts.map
+export declare const pagination: import("@spinjs/components/runtime").DefinedComponent<PaginationApi, PaginationArgs>;
+export type { PaginationArgs, PaginationState };

package/dist/pagination/pagination.presentation.js

@@ -1,6 +1,6 @@
 import { nextPage, pageItems, pageOptions, pageRange, previousPage, totalPages } from "./pagination.state.js";
 import { pagination as pagination$1 } from "./pagination.machine.js";
-import { ariaCurrent, ariaHidden, defineComponent } from "@spinjs/runtime";
+import { ariaCurrent, ariaHidden, defineComponent } from "@spinjs/components/runtime";
 // src/pagination/pagination.presentation.ts
 /** Stable item-array identity per window. */
 const itemsCache = /* @__PURE__ */ new Map();

package/dist/pagination/pagination.state.d.ts

@@ -40,5 +40,4 @@ export declare function pageOptions(ctx: PaginationContext): PaginationPageItem[
 export declare function pageItems(ctx: PaginationContext): PaginationPageItem[];
 declare const clampPage: (page: number, total: number) => number;
 export declare function initial(args: PaginationArgs, authored: (name: string) => boolean): PaginationContext;
-export { clampPage };
-//# sourceMappingURL=pagination.state.d.ts.map
+export { clampPage };

package/dist/pagination/pagination.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/pagination/pagination.state.ts
 /** A numeric prop: numbers pass, numeric strings parse, everything else
 * absent. */

package/dist/pagination/pagination.transitions.d.ts

@@ -1,6 +1,6 @@
 import { PaginationEvents } from "./pagination.events.js";
 import { PaginationContext } from "./pagination.state.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type PaginationAssign<K extends keyof PaginationEvents = keyof PaginationEvents> = AssignFor<PaginationContext, PaginationEvents, K>;
 export declare const setCount: PaginationAssign<"SET_COUNT">;
 export declare const canSetPage: GuardFor<PaginationContext, PaginationEvents>;
@@ -13,5 +13,4 @@ export declare const hasPrev: GuardFor<PaginationContext, PaginationEvents>;
 export declare const prevPage: PaginationAssign<"PREVIOUS_PAGE">;
 export declare const hasNext: GuardFor<PaginationContext, PaginationEvents>;
 export declare const nextPage: PaginationAssign<"NEXT_PAGE">;
-export {};
-//# sourceMappingURL=pagination.transitions.d.ts.map
+export {};

package/dist/pin-input/examples/basic.html

@@ -9,12 +9,12 @@ const machine = pinInput({
 </script>
 <div class="w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    class={["block transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
     {...machine.getLabelProps()}>Verification code</label>
   <div class="flex items-center gap-2" {...machine.getControlProps()}>
     <template for={machine.getItems()} as={cell} key={cell}>
       <input
-        class={["w-10 p-0 text-center text-lg tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
+        class={["w-10 text-center tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
         {...machine.getInputProps(cell)}
       />
     </template>

package/dist/pin-input/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/pin-input/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { pinInput } from \"../pin-input.presentation.ts\";\n\nconst machine = pinInput({\n  count: 4,\n  placeholder: \"○\",\n  otp: true,\n});\n<\/script>\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n    {...machine.getLabelProps()}>Verification code</label>\n  <div class=\"flex items-center gap-2\" {...machine.getControlProps()}>\n    <template for={machine.getItems()} as={cell} key={cell}>\n      <input\n        class={[\"w-10 text-center tabular-nums transition-colors duration-fast ease-decelerate\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n        {...machine.getInputProps(cell)}\n      />\n    </template>\n  </div>\n  <input {...machine.getHiddenInputProps()} />\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/pin-input/examples/field.html

@@ -8,18 +8,18 @@ const machine = pinInput({
 </script>
 <div class="w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    class={["block transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
     {...machine.getLabelProps()}>Enter PIN</label>
   <div class="flex items-center gap-2" {...machine.getControlProps()}>
     <template for={machine.getItems()} as={cell} key={cell}>
       <input
-        class={["w-10 p-0 text-center text-lg tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
+        class={["w-10 text-center tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
         {...machine.getInputProps(cell)}
       />
     </template>
   </div>
   <input {...machine.getHiddenInputProps()} />
-  <p class="text-xs text-text-muted">Enter a 4-digit PIN (don't use 1234)</p>
-  <p class="text-xs text-semantic-error"
+  <p class="text-muted">Enter a 4-digit PIN (don't use 1234)</p>
+  <p class="text-semantic-error"
     show={machine.valueAsString === "1234"}>This PIN is too common. Please choose a different one.</p>
 </div>

package/dist/pin-input/examples/field.html.js

@@ -0,0 +1,5 @@
+// src/pin-input/examples/field.html
+var field_default = "<script lang=\"ts\">\nimport { pinInput } from \"../pin-input.presentation.ts\";\n\nconst machine = pinInput({\n  count: 4,\n  invalid: false,\n});\n<\/script>\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n    {...machine.getLabelProps()}>Enter PIN</label>\n  <div class=\"flex items-center gap-2\" {...machine.getControlProps()}>\n    <template for={machine.getItems()} as={cell} key={cell}>\n      <input\n        class={[\"w-10 text-center tabular-nums transition-colors duration-fast ease-decelerate\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n        {...machine.getInputProps(cell)}\n      />\n    </template>\n  </div>\n  <input {...machine.getHiddenInputProps()} />\n  <p class=\"text-muted\">Enter a 4-digit PIN (don't use 1234)</p>\n  <p class=\"text-semantic-error\"\n    show={machine.valueAsString === \"1234\"}>This PIN is too common. Please choose a different one.</p>\n</div>\n";
+export { field_default as default };
+
+//# sourceMappingURL=field.html.js.map

package/dist/pin-input/examples/masked.html

@@ -8,16 +8,16 @@ const machine = pinInput({
 </script>
 <div class="w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    class={["block transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
     {...machine.getLabelProps()}>Enter secure PIN</label>
   <div class="flex items-center gap-2" {...machine.getControlProps()}>
     <template for={machine.getItems()} as={cell} key={cell}>
       <input
-        class={["w-10 p-0 text-center text-lg tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
+        class={["w-10 text-center tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
         {...machine.getInputProps(cell)}
       />
     </template>
   </div>
   <input {...machine.getHiddenInputProps()} />
-  <p class="text-xs text-text-muted">Your PIN will be masked for security</p>
+  <p class="text-muted">Your PIN will be masked for security</p>
 </div>

package/dist/pin-input/examples/masked.html.js

@@ -0,0 +1,5 @@
+// src/pin-input/examples/masked.html
+var masked_default = "<script lang=\"ts\">\nimport { pinInput } from \"../pin-input.presentation.ts\";\n\nconst machine = pinInput({\n  count: 4,\n  mask: true,\n});\n<\/script>\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n    {...machine.getLabelProps()}>Enter secure PIN</label>\n  <div class=\"flex items-center gap-2\" {...machine.getControlProps()}>\n    <template for={machine.getItems()} as={cell} key={cell}>\n      <input\n        class={[\"w-10 text-center tabular-nums transition-colors duration-fast ease-decelerate\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n        {...machine.getInputProps(cell)}\n      />\n    </template>\n  </div>\n  <input {...machine.getHiddenInputProps()} />\n  <p class=\"text-muted\">Your PIN will be masked for security</p>\n</div>\n";
+export { masked_default as default };
+
+//# sourceMappingURL=masked.html.js.map

package/dist/pin-input/examples/placeholder.html

@@ -8,17 +8,17 @@ const machine = pinInput({
 </script>
 <div class="w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    class={["block transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
     {...machine.getLabelProps()}>Enter access code</label>
   <div class="flex items-center gap-2" {...machine.getControlProps()}>
     <template for={machine.getItems()} as={cell} key={cell}>
       <input
-        class={["w-10 p-0 text-center text-lg tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
+        class={["w-10 text-center tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
         {...machine.getInputProps(cell)}
       />
     </template>
   </div>
   <input {...machine.getHiddenInputProps()} />
   <p
-    class="text-xs text-text-muted">Uses asterisk (*) as placeholder instead of default circle</p>
+    class="text-muted">Uses asterisk (*) as placeholder instead of default circle</p>
 </div>

package/dist/pin-input/examples/placeholder.html.js

@@ -0,0 +1,5 @@
+// src/pin-input/examples/placeholder.html
+var placeholder_default = "<script lang=\"ts\">\nimport { pinInput } from \"../pin-input.presentation.ts\";\n\nconst machine = pinInput({\n  count: 5,\n  placeholder: \"*\",\n});\n<\/script>\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n    {...machine.getLabelProps()}>Enter access code</label>\n  <div class=\"flex items-center gap-2\" {...machine.getControlProps()}>\n    <template for={machine.getItems()} as={cell} key={cell}>\n      <input\n        class={[\"w-10 text-center tabular-nums transition-colors duration-fast ease-decelerate\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n        {...machine.getInputProps(cell)}\n      />\n    </template>\n  </div>\n  <input {...machine.getHiddenInputProps()} />\n  <p\n    class=\"text-muted\">Uses asterisk (*) as placeholder instead of default circle</p>\n</div>\n";
+export { placeholder_default as default };
+
+//# sourceMappingURL=placeholder.html.js.map

package/dist/pin-input/examples/twofactor.html

@@ -8,18 +8,18 @@ const machine = pinInput({
 </script>
 <div class="w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    class={["block transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
     {...machine.getLabelProps()}>Two-factor authentication code</label>
   <div class="flex items-center gap-2" {...machine.getControlProps()}>
     <template for={machine.getItems()} as={cell} key={cell}>
       <input
-        class={["w-10 p-0 text-center text-lg tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
+        class={["w-10 text-center tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
         {...machine.getInputProps(cell)}
       />
-      <span show={cell === 2} class="text-lg font-medium text-text-muted">-</span>
+      <span show={cell === 2} class="type-body text-muted">-</span>
     </template>
   </div>
   <input {...machine.getHiddenInputProps()} />
   <p
-    class="text-xs text-text-muted">Enter the 6-digit code from your authenticator app</p>
+    class="text-muted">Enter the 6-digit code from your authenticator app</p>
 </div>

package/dist/pin-input/examples/twofactor.html.js

@@ -0,0 +1,5 @@
+// src/pin-input/examples/twofactor.html
+var twofactor_default = "<script lang=\"ts\">\nimport { pinInput } from \"../pin-input.presentation.ts\";\n\nconst machine = pinInput({\n  count: 6,\n  otp: true,\n});\n<\/script>\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n    {...machine.getLabelProps()}>Two-factor authentication code</label>\n  <div class=\"flex items-center gap-2\" {...machine.getControlProps()}>\n    <template for={machine.getItems()} as={cell} key={cell}>\n      <input\n        class={[\"w-10 text-center tabular-nums transition-colors duration-fast ease-decelerate\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n        {...machine.getInputProps(cell)}\n      />\n      <span show={cell === 2} class=\"type-body text-muted\">-</span>\n    </template>\n  </div>\n  <input {...machine.getHiddenInputProps()} />\n  <p\n    class=\"text-muted\">Enter the 6-digit code from your authenticator app</p>\n</div>\n";
+export { twofactor_default as default };
+
+//# sourceMappingURL=twofactor.html.js.map

package/dist/pin-input/examples/verification.html

@@ -10,23 +10,23 @@ const machine = pinInput({
 </script>
 <div class="w-full text-center" {...machine.getRootProps()}>
   <div class="mb-4">
-    <div class="text-lg font-semibold text-text">Verify your phone</div>
+    <div class="type-lead">Verify your phone</div>
     <div
-      class="text-sm text-text-muted">We sent a verification code to <br /><span class="font-medium text-text">+1 (555) 123-4567</span></div>
+      class="type-body text-muted">We sent a verification code to <br /><span>+1 (555) 123-4567</span></div>
   </div>
   <div class="mb-6 flex items-center justify-center gap-3"
     {...machine.getControlProps()}>
     <template for={machine.getItems()} as={cell} key={cell}>
       <input
-        class={["w-10 p-0 text-center text-lg tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
+        class={["w-10 text-center tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
         {...machine.getInputProps(cell)}
       />
     </template>
   </div>
   <input {...machine.getHiddenInputProps()} />
-  <div class="stack-sm">
-    <div class="text-sm text-text-muted">Didn't receive the code?</div>
+  <div class="flex flex-col gap-2">
+    <div class="type-body text-muted">Didn't receive the code?</div>
     <button type="button"
-      class="bare text-sm font-medium text-primary transition-colors duration-fast ease-decelerate hover:text-primary">Resend code</button>
+      class="bare text-primary transition-colors duration-fast ease-decelerate hover:text-primary">Resend code</button>
   </div>
 </div>

package/dist/pin-input/examples/verification.html.js

@@ -0,0 +1,5 @@
+// src/pin-input/examples/verification.html
+var verification_default = "<script lang=\"ts\">\nimport { pinInput } from \"../pin-input.presentation.ts\";\n\nconst machine = pinInput({\n  count: 6,\n  otp: true,\n  autoFocus: true,\n  blurOnComplete: true,\n});\n<\/script>\n<div class=\"w-full text-center\" {...machine.getRootProps()}>\n  <div class=\"mb-4\">\n    <div class=\"type-lead\">Verify your phone</div>\n    <div\n      class=\"type-body text-muted\">We sent a verification code to <br /><span>+1 (555) 123-4567</span></div>\n  </div>\n  <div class=\"mb-6 flex items-center justify-center gap-3\"\n    {...machine.getControlProps()}>\n    <template for={machine.getItems()} as={cell} key={cell}>\n      <input\n        class={[\"w-10 text-center tabular-nums transition-colors duration-fast ease-decelerate\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n        {...machine.getInputProps(cell)}\n      />\n    </template>\n  </div>\n  <input {...machine.getHiddenInputProps()} />\n  <div class=\"flex flex-col gap-2\">\n    <div class=\"type-body text-muted\">Didn't receive the code?</div>\n    <button type=\"button\"\n      class=\"bare text-primary transition-colors duration-fast ease-decelerate hover:text-primary\">Resend code</button>\n  </div>\n</div>\n";
+export { verification_default as default };
+
+//# sourceMappingURL=verification.html.js.map

package/dist/pin-input/pin-input.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface PinInputEvents {
   "VALUE.SET": {
     value: readonly string[];
@@ -44,5 +44,4 @@ export interface PinInputValueComplete {
 export interface PinInputValueInvalid {
   readonly value: string;
   readonly index: number;
-}
-//# sourceMappingURL=pin-input.events.d.ts.map
+}

package/dist/pin-input/pin-input.machine.d.ts

@@ -1,5 +1,5 @@
+/** Pin-input machine: chart only. */
 import { PinInputArgs, PinInputContext, PinInputState } from "./pin-input.state.js";
 import { PinInputEvents } from "./pin-input.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
-export declare function pinInput(args?: PinInputArgs, authored?: (name: string) => boolean): Machine<PinInputContext, PinInputEvents, PinInputState>;
-//# sourceMappingURL=pin-input.machine.d.ts.map
+import { Machine } from "@spinjs/components/fsm";
+export declare function pinInput(args?: PinInputArgs, authored?: (name: string) => boolean): Machine<PinInputContext, PinInputEvents, PinInputState>;

package/dist/pin-input/pin-input.machine.js

@@ -1,6 +1,6 @@
 import { fill, getNextValue, initial, pinView } from "./pin-input.state.js";
 import { advanceFocusedIndex, clearFocusedValue, hasValue, setFocusIndexToFirst, setFocusedIndex, setPrevFocusedIndex } from "./pin-input.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/pin-input/pin-input.machine.ts
 /** Pin-input machine: chart only. */
 function pinInput(args = {}, authored = () => false) {

package/dist/pin-input/pin-input.presentation.d.ts

@@ -1,13 +1,13 @@
 import { PinInputArgs, PinInputContext, PinInputState } from "./pin-input.state.js";
 import { PinInputEvents } from "./pin-input.events.js";
-import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/components/runtime";
 /** Pin-input definition: the DOM contract as data. */
 type ScopeLike = ViewFor<PinInputContext, PinInputEvents, PinInputState>;
 type SlotLike = SlotViewFor<number, PinInputContext, PinInputEvents, PinInputState>;
 export type PinInputType = "numeric" | "alphabetic" | "alphanumeric";
 export declare const def: {
   name: string;
-  machine: (args: PinInputArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<PinInputContext, PinInputEvents, PinInputState>;
+  machine: (args: PinInputArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<PinInputContext, PinInputEvents, PinInputState>;
   start: "idle";
   mounted: ({ props, focus }: {
     readonly props: Record<string, unknown>;
@@ -199,6 +199,5 @@ export declare const def: {
   };
 };
 export type PinInputApi = ApiOf<typeof def>;
-export declare const pinInput: import("@spinjs/runtime").DefinedComponent<PinInputApi, PinInputArgs>;
-export {};
-//# sourceMappingURL=pin-input.presentation.d.ts.map
+export declare const pinInput: import("@spinjs/components/runtime").DefinedComponent<PinInputApi, PinInputArgs>;
+export {};