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

package/dist/theme-picker/examples/basic.html

@@ -15,16 +15,16 @@ const machine = themePicker({
 
 <div class="relative inline-block" {...machine.getRootProps()}>
   <button
-    class="bare inline-flex items-center gap-2 rounded-lg border border-solid border-border bg-surface px-2 py-1 text-sm text-text transition-colors hover:bg-surface-raised"
+    class="bare inline-flex items-center gap-2 rounded-lg border bg-surface px-2 py-1 transition-colors hover:bg-surface-raised"
     {...machine.getTriggerProps()}
   >
     <span class="inline-flex h-4 items-center gap-1" {...machine.getTriggerSwatchProps()}>
-      <span class="h-2 w-2 shrink-0 rounded-full border border-solid border-border bg-surface"></span>
+      <span class="h-2 w-2 shrink-0 rounded-full border bg-surface"></span>
       <span class="h-2 w-2 shrink-0 rounded-full bg-primary"></span>
       <span class="h-2 w-2 shrink-0 rounded-full bg-text"></span>
     </span>
     <span {...machine.getTriggerLabelProps()}>{machine.value}</span>
-    <span class="inline-block i-lucide-chevron-down icon-sm text-text-muted" {...machine.getTriggerIndicatorProps()}></span>
+    <span class="inline-block i-lucide-chevron-down icon-sm text-muted" {...machine.getTriggerIndicatorProps()}></span>
   </button>
   <div class="absolute z-dropdown" {...machine.getPositionerProps()}>
     <panel
@@ -33,16 +33,16 @@ const machine = themePicker({
       <panel-list {...machine.getListProps()}>
         <template for={machine.getItems()} as={row} key={row.value}>
           <div
-            class="bare flex w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors"
+            class="bare flex w-full cursor-default items-center gap-2 rounded-md px-2 py-1 type-body transition-colors"
             {...machine.getItemProps(row)}
           >
             <span class="inline-flex h-4 items-center gap-1" {...machine.getItemSwatchProps(row)}>
-              <span class="h-3 w-3 shrink-0 rounded-full border border-solid border-border bg-surface"></span>
+              <span class="h-3 w-3 shrink-0 rounded-full border bg-surface"></span>
               <span class="h-3 w-3 shrink-0 rounded-full bg-primary"></span>
               <span class="h-3 w-3 shrink-0 rounded-full bg-text"></span>
             </span>
             <span class="flex-1" {...machine.getItemLabelProps(row)}>{row.label}</span>
-            <span class="inline-block i-lucide-sun h-3 w-3 text-text-muted" show={machine.getItemState(row).dualMode}></span>
+            <span class="inline-block i-lucide-sun h-3 w-3 text-muted" show={machine.getItemState(row).dualMode}></span>
             <span class="inline-block i-lucide-check h-4 w-4 text-primary" show={machine.getItemState(row).selected} {...machine.getItemIndicatorProps(row)}></span>
           </div>
         </template>

package/dist/theme-picker/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/theme-picker/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { themePicker } from \"../theme-picker.presentation.ts\";\n\nconst machine = themePicker({\n  syncDocument: false,\n  defaultValue: \"silk\",\n  themes: [\n    { value: \"silk\", label: \"Silk\" },\n    { value: \"neobrut\", label: \"Neobrut\", modes: [\"light\"] },\n    { value: \"nord\", label: \"Nord\" },\n    { value: \"synthwave\", label: \"Synthwave\", modes: [\"dark\"] },\n  ],\n});\n<\/script>\n\n<div class=\"relative inline-block\" {...machine.getRootProps()}>\n  <button\n    class=\"bare inline-flex items-center gap-2 rounded-lg border bg-surface px-2 py-1 transition-colors hover:bg-surface-raised\"\n    {...machine.getTriggerProps()}\n  >\n    <span class=\"inline-flex h-4 items-center gap-1\" {...machine.getTriggerSwatchProps()}>\n      <span class=\"h-2 w-2 shrink-0 rounded-full border bg-surface\"></span>\n      <span class=\"h-2 w-2 shrink-0 rounded-full bg-primary\"></span>\n      <span class=\"h-2 w-2 shrink-0 rounded-full bg-text\"></span>\n    </span>\n    <span {...machine.getTriggerLabelProps()}>{machine.value}</span>\n    <span class=\"inline-block i-lucide-chevron-down icon-sm text-muted\" {...machine.getTriggerIndicatorProps()}></span>\n  </button>\n  <div class=\"absolute z-dropdown\" {...machine.getPositionerProps()}>\n    <panel\n      {...machine.getContentProps()}\n    >\n      <panel-list {...machine.getListProps()}>\n        <template for={machine.getItems()} as={row} key={row.value}>\n          <div\n            class=\"bare flex w-full cursor-default items-center gap-2 rounded-md px-2 py-1 type-body transition-colors\"\n            {...machine.getItemProps(row)}\n          >\n            <span class=\"inline-flex h-4 items-center gap-1\" {...machine.getItemSwatchProps(row)}>\n              <span class=\"h-3 w-3 shrink-0 rounded-full border bg-surface\"></span>\n              <span class=\"h-3 w-3 shrink-0 rounded-full bg-primary\"></span>\n              <span class=\"h-3 w-3 shrink-0 rounded-full bg-text\"></span>\n            </span>\n            <span class=\"flex-1\" {...machine.getItemLabelProps(row)}>{row.label}</span>\n            <span class=\"inline-block i-lucide-sun h-3 w-3 text-muted\" show={machine.getItemState(row).dualMode}></span>\n            <span class=\"inline-block i-lucide-check h-4 w-4 text-primary\" show={machine.getItemState(row).selected} {...machine.getItemIndicatorProps(row)}></span>\n          </div>\n        </template>\n      </panel-list>\n    </panel>\n  </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/theme-picker/examples/cards.html

@@ -16,14 +16,14 @@ const machine = themePicker({
 <div class="grid w-full grid-cols-2 gap-3" {...machine.getRootProps()}>
   <template for={machine.getItems()} as={row} key={row.value}>
     <button
-      class={["bare flex flex-col items-stretch justify-between gap-0 p-0 overflow-hidden rounded-lg border border-solid bg-surface text-left text-text transition-all", { "border-border": machine.getItemState(row).selected === false, "border-primary ring-1 ring-primary": machine.getItemState(row).selected }]}
+      class={["bare flex flex-col items-stretch justify-between gap-0 p-0 overflow-hidden rounded-lg border bg-surface text-left transition-all", { "border": machine.getItemState(row).selected === false, "border-primary ring-1 ring-primary": machine.getItemState(row).selected }]}
       {...machine.getItemProps(row)}
     >
       <span class="block w-full bg-surface px-3 py-2" {...machine.getItemSwatchProps(row)}>
-        <span class="block text-sm font-medium text-text" {...machine.getItemLabelProps(row)}>{row.label}</span>
-        <span class="mt-1 inline-block rounded-sm bg-primary px-2 py-1 text-xs text-on-primary">Aa</span>
+        <span class="block type-label" {...machine.getItemLabelProps(row)}>{row.label}</span>
+        <span class="mt-1 inline-block rounded-sm bg-primary px-2 py-1 type-caption text-on-primary">Aa</span>
       </span>
-      <span class="flex w-full items-center justify-between bg-surface-raised px-3 py-1 text-xs text-text-muted">
+      <span class="flex w-full items-center justify-between bg-surface-raised px-3 py-1 type-caption text-muted">
         <span>{row.value}</span>
         <span class="inline-block i-lucide-check h-3 w-3 text-primary" show={machine.getItemState(row).selected} {...machine.getItemIndicatorProps(row)}></span>
       </span>

package/dist/theme-picker/examples/cards.html.js

@@ -0,0 +1,5 @@
+// src/theme-picker/examples/cards.html
+var cards_default = "<script lang=\"ts\">\nimport { themePicker } from \"../theme-picker.presentation.ts\";\n\nconst machine = themePicker({\n  syncDocument: false,\n  defaultValue: \"silk\",\n  themes: [\n    { value: \"silk\", label: \"Silk\" },\n    { value: \"neobrut\", label: \"Neobrut\", modes: [\"light\"] },\n    { value: \"nord\", label: \"Nord\" },\n    { value: \"synthwave\", label: \"Synthwave\", modes: [\"dark\"] },\n  ],\n});\n<\/script>\n\n<div class=\"grid w-full grid-cols-2 gap-3\" {...machine.getRootProps()}>\n  <template for={machine.getItems()} as={row} key={row.value}>\n    <button\n      class={[\"bare flex flex-col items-stretch justify-between gap-0 p-0 overflow-hidden rounded-lg border bg-surface text-left transition-all\", { \"border\": machine.getItemState(row).selected === false, \"border-primary ring-1 ring-primary\": machine.getItemState(row).selected }]}\n      {...machine.getItemProps(row)}\n    >\n      <span class=\"block w-full bg-surface px-3 py-2\" {...machine.getItemSwatchProps(row)}>\n        <span class=\"block type-label\" {...machine.getItemLabelProps(row)}>{row.label}</span>\n        <span class=\"mt-1 inline-block rounded-sm bg-primary px-2 py-1 type-caption text-on-primary\">Aa</span>\n      </span>\n      <span class=\"flex w-full items-center justify-between bg-surface-raised px-3 py-1 type-caption text-muted\">\n        <span>{row.value}</span>\n        <span class=\"inline-block i-lucide-check h-3 w-3 text-primary\" show={machine.getItemState(row).selected} {...machine.getItemIndicatorProps(row)}></span>\n      </span>\n    </button>\n  </template>\n</div>\n";
+export { cards_default as default };
+
+//# sourceMappingURL=cards.html.js.map

package/dist/theme-picker/examples/compact.html

@@ -15,7 +15,7 @@ const machine = themePicker({
 
 <div class="relative inline-flex" {...machine.getRootProps()}>
   <button
-    class="bare inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm text-text-muted transition-colors hover:bg-surface hover:text-text"
+    class="bare inline-flex items-center gap-1 rounded-md px-2 py-1 text-muted transition-colors hover:bg-surface"
     {...machine.getTriggerProps()}
   >
     <span class="inline-block i-lucide-palette h-4 w-4"></span>
@@ -23,13 +23,13 @@ const machine = themePicker({
   </button>
   <div class="absolute z-dropdown" {...machine.getPositionerProps()}>
     <div
-      class="rounded-lg border border-solid border-border bg-surface p-1 shadow-lg"
+      class="rounded-lg border bg-surface p-1 shadow-lg"
       {...machine.getContentProps()}
     >
       <div {...machine.getListProps()}>
         <template for={machine.getItems()} as={row} key={row.value}>
           <div
-            class="bare flex w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors hover:bg-surface-raised"
+            class="bare flex w-full cursor-default items-center gap-2 rounded-md px-2 py-1 type-body transition-colors hover:bg-surface-raised"
             {...machine.getItemProps(row)}
           >
             <span class="flex-1" {...machine.getItemLabelProps(row)}>{row.label}</span>

package/dist/theme-picker/examples/compact.html.js

@@ -0,0 +1,5 @@
+// src/theme-picker/examples/compact.html
+var compact_default = "<script lang=\"ts\">\nimport { themePicker } from \"../theme-picker.presentation.ts\";\n\nconst machine = themePicker({\n  syncDocument: false,\n  defaultValue: \"silk\",\n  themes: [\n    { value: \"silk\", label: \"Silk\" },\n    { value: \"neobrut\", label: \"Neobrut\", modes: [\"light\"] },\n    { value: \"nord\", label: \"Nord\" },\n    { value: \"synthwave\", label: \"Synthwave\", modes: [\"dark\"] },\n  ],\n});\n<\/script>\n\n<div class=\"relative inline-flex\" {...machine.getRootProps()}>\n  <button\n    class=\"bare inline-flex items-center gap-1 rounded-md px-2 py-1 text-muted transition-colors hover:bg-surface\"\n    {...machine.getTriggerProps()}\n  >\n    <span class=\"inline-block i-lucide-palette h-4 w-4\"></span>\n    <span {...machine.getTriggerLabelProps()}>{machine.value}</span>\n  </button>\n  <div class=\"absolute z-dropdown\" {...machine.getPositionerProps()}>\n    <div\n      class=\"rounded-lg border bg-surface p-1 shadow-lg\"\n      {...machine.getContentProps()}\n    >\n      <div {...machine.getListProps()}>\n        <template for={machine.getItems()} as={row} key={row.value}>\n          <div\n            class=\"bare flex w-full cursor-default items-center gap-2 rounded-md px-2 py-1 type-body transition-colors hover:bg-surface-raised\"\n            {...machine.getItemProps(row)}\n          >\n            <span class=\"flex-1\" {...machine.getItemLabelProps(row)}>{row.label}</span>\n            <span class=\"inline-block i-lucide-check h-3 w-3 text-primary\" show={machine.getItemState(row).selected} {...machine.getItemIndicatorProps(row)}></span>\n          </div>\n        </template>\n      </div>\n    </div>\n  </div>\n</div>\n";
+export { compact_default as default };
+
+//# sourceMappingURL=compact.html.js.map

package/dist/theme-picker/examples/swatches.html

@@ -16,11 +16,11 @@ const machine = themePicker({
 <div class="flex flex-wrap items-center gap-2" {...machine.getRootProps()}>
   <template for={machine.getItems()} as={row} key={row.value}>
     <button
-      class={["bare inline-flex items-center gap-2 rounded-full border border-solid bg-surface px-3 py-1 text-sm text-text transition-colors", { "border-border": machine.getItemState(row).selected === false, "border-primary ring-1 ring-primary": machine.getItemState(row).selected }]}
+      class={["bare inline-flex items-center gap-2 rounded-full border bg-surface px-3 py-1 transition-colors", { "border": machine.getItemState(row).selected === false, "border-primary ring-1 ring-primary": machine.getItemState(row).selected }]}
       {...machine.getItemProps(row)}
     >
       <span class="inline-flex h-3 items-center gap-1" {...machine.getItemSwatchProps(row)}>
-        <span class="h-2 w-2 shrink-0 rounded-full border border-solid border-border bg-surface"></span>
+        <span class="h-2 w-2 shrink-0 rounded-full border bg-surface"></span>
         <span class="h-2 w-2 shrink-0 rounded-full bg-primary"></span>
         <span class="h-2 w-2 shrink-0 rounded-full bg-text"></span>
       </span>

package/dist/theme-picker/examples/swatches.html.js

@@ -0,0 +1,5 @@
+// src/theme-picker/examples/swatches.html
+var swatches_default = "<script lang=\"ts\">\nimport { themePicker } from \"../theme-picker.presentation.ts\";\n\nconst machine = themePicker({\n  syncDocument: false,\n  defaultValue: \"silk\",\n  themes: [\n    { value: \"silk\", label: \"Silk\" },\n    { value: \"neobrut\", label: \"Neobrut\", modes: [\"light\"] },\n    { value: \"nord\", label: \"Nord\" },\n    { value: \"synthwave\", label: \"Synthwave\", modes: [\"dark\"] },\n  ],\n});\n<\/script>\n\n<div class=\"flex flex-wrap items-center gap-2\" {...machine.getRootProps()}>\n  <template for={machine.getItems()} as={row} key={row.value}>\n    <button\n      class={[\"bare inline-flex items-center gap-2 rounded-full border bg-surface px-3 py-1 transition-colors\", { \"border\": machine.getItemState(row).selected === false, \"border-primary ring-1 ring-primary\": machine.getItemState(row).selected }]}\n      {...machine.getItemProps(row)}\n    >\n      <span class=\"inline-flex h-3 items-center gap-1\" {...machine.getItemSwatchProps(row)}>\n        <span class=\"h-2 w-2 shrink-0 rounded-full border bg-surface\"></span>\n        <span class=\"h-2 w-2 shrink-0 rounded-full bg-primary\"></span>\n        <span class=\"h-2 w-2 shrink-0 rounded-full bg-text\"></span>\n      </span>\n      <span {...machine.getItemLabelProps(row)}>{row.label}</span>\n      <span class=\"inline-block i-lucide-check h-3 w-3 text-primary\" show={machine.getItemState(row).selected} {...machine.getItemIndicatorProps(row)}></span>\n    </button>\n  </template>\n</div>\n";
+export { swatches_default as default };
+
+//# sourceMappingURL=swatches.html.js.map

package/dist/theme-picker/theme-picker.events.d.ts

@@ -1,5 +1,5 @@
 import { ThemePickerItem } from "./theme-picker.state.js";
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface ThemePickerEvents {
   "TRIGGER.CLICK": {};
   "OPEN": {};
@@ -28,5 +28,4 @@ export type ThemePickerValueChange = {
 };
 export type ThemePickerOpenChange = {
   readonly open: boolean;
-};
-//# sourceMappingURL=theme-picker.events.d.ts.map
+};

package/dist/theme-picker/theme-picker.machine.d.ts

@@ -1,5 +1,5 @@
+/** Theme-picker machine: closed/open over two states. */
 import { ThemePickerArgs, ThemePickerContext, ThemePickerState } from "./theme-picker.state.js";
 import { ThemePickerEvents } from "./theme-picker.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
-export declare function themePicker(args?: ThemePickerArgs, authored?: (name: string) => boolean): Machine<ThemePickerContext, ThemePickerEvents, ThemePickerState>;
-//# sourceMappingURL=theme-picker.machine.d.ts.map
+import { Machine } from "@spinjs/components/fsm";
+export declare function themePicker(args?: ThemePickerArgs, authored?: (name: string) => boolean): Machine<ThemePickerContext, ThemePickerEvents, ThemePickerState>;

package/dist/theme-picker/theme-picker.machine.js

@@ -1,6 +1,6 @@
 import { initial } from "./theme-picker.state.js";
 import { hasEnabled, moveFirst, moveLast, moveNext, movePrev, selectEnabled, selectItem, setHighlight, setThemes, setValue } from "./theme-picker.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/theme-picker/theme-picker.machine.ts
 /** Theme-picker machine: closed/open over two states. */
 function themePicker(args = {}, authored = () => false) {

package/dist/theme-picker/theme-picker.presentation.d.ts

@@ -1,12 +1,12 @@
-import { ThemePickerArgs, ThemePickerContext, ThemePickerItem, ThemePickerState } from "./theme-picker.state.js";
 import { ThemePickerEvents, ThemePickerOpenChange, ThemePickerValueChange } from "./theme-picker.events.js";
-import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+import { ThemePickerArgs, ThemePickerContext, ThemePickerItem, ThemePickerState } from "./theme-picker.state.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/components/runtime";
 type Ctx = ThemePickerContext;
 type ScopeLike = ViewFor<ThemePickerContext, ThemePickerEvents, ThemePickerState>;
 type SlotLike = SlotViewFor<ThemePickerItem, ThemePickerContext, ThemePickerEvents, ThemePickerState>;
 export declare const def: {
   name: string;
-  machine: (args: ThemePickerArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<ThemePickerContext, ThemePickerEvents, ThemePickerState>;
+  machine: (args: ThemePickerArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<ThemePickerContext, ThemePickerEvents, ThemePickerState>;
   start: "closed";
   scalars: string[];
   reconcile: ({ context, parsed, send }: {
@@ -39,7 +39,7 @@ export declare const def: {
     };
     triggerIndicator: {
       attrs: () => {
-        [x: string]: import("@spinjs/runtime").AriaValue;
+        [x: string]: import("@spinjs/components/runtime").AriaValue;
       };
     };
     positioner: {
@@ -94,7 +94,7 @@ export declare const def: {
     itemIndicator: {
       indexes: (context: Ctx) => readonly ThemePickerItem[];
       attrs: () => {
-        [x: string]: import("@spinjs/runtime").AriaValue;
+        [x: string]: import("@spinjs/components/runtime").AriaValue;
       };
     };
   };
@@ -175,7 +175,7 @@ export declare const def: {
     type: string;
   } & Record<string, unknown>)[];
   settled: ({ after, before, event, focus, id, props, root, send }: {
-    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly event: import("@spinjs/components/runtime").AnyEvent;
     readonly before: {
       readonly context: ThemePickerContext;
       readonly state: "open" | "closed";
@@ -189,10 +189,9 @@ export declare const def: {
     readonly id: (part: string, slot?: unknown) => string;
     readonly focus: (part: string, slot?: unknown) => void;
     readonly measure: (part: string, slot?: unknown) => DOMRect | null;
-    readonly send: (event: import("@spinjs/runtime").AnyEvent) => void;
+    readonly send: (event: import("@spinjs/components/runtime").AnyEvent) => void;
   }) => void;
 };
 export type ThemePickerApi = ApiOf<typeof def>;
-export declare const themePicker: import("@spinjs/runtime").DefinedComponent<ThemePickerApi, ThemePickerArgs>;
-export type { ThemePickerArgs, ThemePickerItem, ThemePickerOpenChange, ThemePickerState, ThemePickerValueChange };
-//# sourceMappingURL=theme-picker.presentation.d.ts.map
+export declare const themePicker: import("@spinjs/components/runtime").DefinedComponent<ThemePickerApi, ThemePickerArgs>;
+export type { ThemePickerArgs, ThemePickerItem, ThemePickerOpenChange, ThemePickerState, ThemePickerValueChange };

package/dist/theme-picker/theme-picker.presentation.js

@@ -1,6 +1,6 @@
-import { discoverRuntimeThemes, parseThemes } from "./theme-picker.state.js";
 import { themePicker as themePicker$1 } from "./theme-picker.machine.js";
-import { ariaHidden, defineComponent, disclosureTrigger, listSurface, optionRow } from "@spinjs/runtime";
+import { discoverRuntimeThemes, parseThemes } from "./theme-picker.state.js";
+import { ariaHidden, defineComponent, disclosureTrigger, listSurface, optionRow } from "@spinjs/components/runtime";
 // src/theme-picker/theme-picker.presentation.ts
 function selectedItem(ctx) {
 	const found = ctx.themes.find((item) => item.value === ctx.value);

package/dist/theme-picker/theme-picker.state.d.ts

@@ -36,5 +36,4 @@ export declare function parseThemes(raw: unknown): ThemePickerItem[] | null;
  * the authored themes.
  */
 export declare function discoverRuntimeThemes(root?: Element): ThemePickerItem[];
-export declare function initial(args: ThemePickerArgs, authored: (name: string) => boolean): ThemePickerContext;
-//# sourceMappingURL=theme-picker.state.d.ts.map
+export declare function initial(args: ThemePickerArgs, authored: (name: string) => boolean): ThemePickerContext;

package/dist/theme-picker/theme-picker.transitions.d.ts

@@ -1,6 +1,6 @@
-import { ThemePickerContext } from "./theme-picker.state.js";
 import { ThemePickerEvents } from "./theme-picker.events.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { ThemePickerContext } from "./theme-picker.state.js";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type ThemePickerAssign<K extends keyof ThemePickerEvents = keyof ThemePickerEvents> = AssignFor<ThemePickerContext, ThemePickerEvents, K>;
 type ThemePickerGuard<K extends keyof ThemePickerEvents = keyof ThemePickerEvents> = GuardFor<ThemePickerContext, ThemePickerEvents, K>;
 export declare const moveNext: ThemePickerAssign<"HIGHLIGHT.NEXT">;
@@ -13,5 +13,4 @@ export declare const setValue: ThemePickerAssign<"VALUE.SET">;
 export declare const setThemes: ThemePickerAssign<"THEMES.SET">;
 export declare const selectEnabled: ThemePickerGuard<"ITEM.SELECT">;
 export declare const hasEnabled: ThemePickerGuard;
-export {};
-//# sourceMappingURL=theme-picker.transitions.d.ts.map
+export {};

package/dist/timer/examples/basic.html

@@ -14,7 +14,7 @@ const machine = timer({
     <span class="stat-value tabular-nums"
      {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
    </div>
-   <span aria-hidden="true" class="text-lg text-text-muted"
+   <span aria-hidden="true" class="type-lead text-muted"
     {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
   </template>
  </div>

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

@@ -0,0 +1,5 @@
+// src/timer/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { timer } from \"../timer.presentation.ts\";\n\nconst machine = timer({\n targetMs: \"3600000\",\n});\n<\/script>\n<div class=\"mx-auto w-full max-w-[20rem]\" {...machine.getRootProps()}>\n <div class=\"flex items-center justify-center gap-1\"\n  {...machine.getAreaProps()}>\n  <template for={machine.getUnits()} as={unit} key={unit.type}>\n   <div class=\"flex flex-col items-center\"\n    {...machine.getItemProps({ type: unit.type })}>\n    <span class=\"stat-value tabular-nums\"\n     {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>\n   </div>\n   <span aria-hidden=\"true\" class=\"type-lead text-muted\"\n    {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>\n  </template>\n </div>\n <div class=\"mt-3 flex items-center justify-center gap-2\"\n  {...machine.getControlProps()}>\n  <button\n   class=\"secondary s-sm\"\n   {...machine.getActionTriggerProps({ action: \"start\" })}>Start</button>\n  <button\n   class=\"secondary s-sm\"\n   {...machine.getActionTriggerProps({ action: \"pause\" })}>Pause</button>\n  <button\n   class=\"secondary s-sm\"\n   {...machine.getActionTriggerProps({ action: \"resume\" })}>Resume</button>\n  <button\n   class=\"secondary s-sm\"\n   {...machine.getActionTriggerProps({ action: \"reset\" })}>Reset</button>\n </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/timer/examples/card.html

@@ -7,19 +7,19 @@ const machine = timer({
 </script>
 <div class="mx-auto w-full max-w-[20rem]" {...machine.getRootProps()}>
  <div
-  class="rounded-lg border border-solid border-border bg-surface-raised p-4"
+  class="rounded-lg border bg-surface-raised p-4"
   {...machine.getAreaProps()}>
   <div
-   class="mb-3 flex items-center gap-2"><span class="i-lucide-clock text-sm text-primary"></span><span class="text-sm font-medium text-text">Meeting Timer</span></div>
+   class="mb-3 flex items-center gap-2"><span class="i-lucide-clock text-primary"></span><span class="type-label">Meeting Timer</span></div>
   <div class="flex items-center justify-center gap-1">
    <template for={machine.getUnits()} as={unit} key={unit.type}>
     <div class="flex flex-col items-center"
      {...machine.getItemProps({ type: unit.type })}>
      <span
-      class="rounded-md border border-solid border-border bg-surface px-3 py-2 stat-value tabular-nums"
+      class="rounded-md border bg-surface px-3 py-2 stat-value tabular-nums"
       {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
     </div>
-    <span aria-hidden="true" class="mx-1 text-text-muted"
+    <span aria-hidden="true" class="mx-1 text-muted"
      {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
    </template>
   </div>

package/dist/timer/examples/card.html.js

@@ -0,0 +1,5 @@
+// src/timer/examples/card.html
+var card_default = "<script lang=\"ts\">\nimport { timer } from \"../timer.presentation.ts\";\n\nconst machine = timer({\n targetMs: \"2700000\",\n});\n<\/script>\n<div class=\"mx-auto w-full max-w-[20rem]\" {...machine.getRootProps()}>\n <div\n  class=\"rounded-lg border bg-surface-raised p-4\"\n  {...machine.getAreaProps()}>\n  <div\n   class=\"mb-3 flex items-center gap-2\"><span class=\"i-lucide-clock text-primary\"></span><span class=\"type-label\">Meeting Timer</span></div>\n  <div class=\"flex items-center justify-center gap-1\">\n   <template for={machine.getUnits()} as={unit} key={unit.type}>\n    <div class=\"flex flex-col items-center\"\n     {...machine.getItemProps({ type: unit.type })}>\n     <span\n      class=\"rounded-md border bg-surface px-3 py-2 stat-value tabular-nums\"\n      {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>\n    </div>\n    <span aria-hidden=\"true\" class=\"mx-1 text-muted\"\n     {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>\n   </template>\n  </div>\n  <div class=\"mt-3 h-2 w-full overflow-hidden rounded-full bg-surface\">\n   <div class=\"h-full rounded-full bg-primary\" {...machine.getProgressProps()}></div>\n  </div>\n </div>\n <div class=\"mt-3 flex items-center justify-center gap-2\"\n  {...machine.getControlProps()}>\n  <button\n   class=\"secondary s-sm\"\n   {...machine.getActionTriggerProps({ action: \"start\" })}>Start</button>\n  <button\n   class=\"secondary s-sm\"\n   {...machine.getActionTriggerProps({ action: \"pause\" })}>Pause</button>\n  <button\n   class=\"secondary s-sm\"\n   {...machine.getActionTriggerProps({ action: \"resume\" })}>Resume</button>\n  <button\n   class=\"secondary s-sm\"\n   {...machine.getActionTriggerProps({ action: \"reset\" })}>Reset</button>\n </div>\n</div>\n";
+export { card_default as default };
+
+//# sourceMappingURL=card.html.js.map

package/dist/timer/examples/compact.html

@@ -7,26 +7,26 @@ const machine = timer({
 </script>
 <div class="mx-auto w-full max-w-[20rem]" {...machine.getRootProps()}>
  <div class="flex items-center gap-3" {...machine.getAreaProps()}>
-  <div class="flex items-center gap-1 text-sm tabular-nums text-text">
+  <div class="flex items-center gap-1 type-code tabular-nums">
    <template for={machine.getUnits()} as={unit} key={unit.type}>
     <div class="flex items-center gap-1"
      show={unit.type === "minutes" || unit.type === "seconds"}>
      <div class="flex flex-col items-center" {...machine.getItemProps({ type: unit.type })}>
       <span class="min-w-[2ch] text-center" {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
-     </div><span aria-hidden="true" class="text-text-muted" {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
+     </div><span aria-hidden="true" class="text-muted" {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
     </div>
    </template>
   </div>
   <div class="flex items-center gap-1" {...machine.getControlProps()}>
    <button aria-label="Start"
     class="ghost icon s-sm grid h-7 w-7 place-items-center"
-    {...machine.getActionTriggerProps({ action: "start" })}><span class="i-lucide-play text-xs"></span></button>
+    {...machine.getActionTriggerProps({ action: "start" })}><span class="i-lucide-play type-caption"></span></button>
    <button aria-label="Pause"
     class="ghost icon s-sm grid h-7 w-7 place-items-center"
-    {...machine.getActionTriggerProps({ action: "pause" })}><span class="i-lucide-pause text-xs"></span></button>
+    {...machine.getActionTriggerProps({ action: "pause" })}><span class="i-lucide-pause type-caption"></span></button>
    <button aria-label="Resume"
     class="ghost icon s-sm grid h-7 w-7 place-items-center"
-    {...machine.getActionTriggerProps({ action: "resume" })}><span class="i-lucide-play text-xs"></span></button>
+    {...machine.getActionTriggerProps({ action: "resume" })}><span class="i-lucide-play type-caption"></span></button>
   </div>
  </div>
 </div>

package/dist/timer/examples/compact.html.js

@@ -0,0 +1,5 @@
+// src/timer/examples/compact.html
+var compact_default = "<script lang=\"ts\">\nimport { timer } from \"../timer.presentation.ts\";\n\nconst machine = timer({\n targetMs: \"900000\",\n});\n<\/script>\n<div class=\"mx-auto w-full max-w-[20rem]\" {...machine.getRootProps()}>\n <div class=\"flex items-center gap-3\" {...machine.getAreaProps()}>\n  <div class=\"flex items-center gap-1 type-code tabular-nums\">\n   <template for={machine.getUnits()} as={unit} key={unit.type}>\n    <div class=\"flex items-center gap-1\"\n     show={unit.type === \"minutes\" || unit.type === \"seconds\"}>\n     <div class=\"flex flex-col items-center\" {...machine.getItemProps({ type: unit.type })}>\n      <span class=\"min-w-[2ch] text-center\" {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>\n     </div><span aria-hidden=\"true\" class=\"text-muted\" {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>\n    </div>\n   </template>\n  </div>\n  <div class=\"flex items-center gap-1\" {...machine.getControlProps()}>\n   <button aria-label=\"Start\"\n    class=\"ghost icon s-sm grid h-7 w-7 place-items-center\"\n    {...machine.getActionTriggerProps({ action: \"start\" })}><span class=\"i-lucide-play type-caption\"></span></button>\n   <button aria-label=\"Pause\"\n    class=\"ghost icon s-sm grid h-7 w-7 place-items-center\"\n    {...machine.getActionTriggerProps({ action: \"pause\" })}><span class=\"i-lucide-pause type-caption\"></span></button>\n   <button aria-label=\"Resume\"\n    class=\"ghost icon s-sm grid h-7 w-7 place-items-center\"\n    {...machine.getActionTriggerProps({ action: \"resume\" })}><span class=\"i-lucide-play type-caption\"></span></button>\n  </div>\n </div>\n</div>\n";
+export { compact_default as default };
+
+//# sourceMappingURL=compact.html.js.map

package/dist/timer/examples/countdown.html

@@ -9,7 +9,7 @@ const machine = timer({
 <div class="mx-auto w-full max-w-[20rem]" {...machine.getRootProps()}>
  <div class="flex flex-col items-center" {...machine.getAreaProps()}>
   <span
-   class="mb-2 text-sm font-medium text-semantic-error">Flash Sale Ends In</span>
+   class="mb-2 type-label text-semantic-error">Flash Sale Ends In</span>
   <div
    class="flex items-start gap-2 stat-value tabular-nums">
    <template for={machine.getUnits()} as={unit} key={unit.type}>
@@ -18,10 +18,10 @@ const machine = timer({
       {...machine.getItemProps({ type: unit.type })}>
       <span class="min-w-[2ch] text-center"
        {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
-      <span class="text-xs font-regular text-text-muted"
+      <span class="type-caption text-muted"
        {...machine.getItemLabelProps({ type: unit.type })}>{unit.label}</span>
      </div>
-     <span aria-hidden="true" class="text-text-muted"
+     <span aria-hidden="true" class="text-muted"
       {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
     </div>
    </template>

package/dist/timer/examples/countdown.html.js

@@ -0,0 +1,5 @@
+// src/timer/examples/countdown.html
+var countdown_default = "<script lang=\"ts\">\nimport { timer } from \"../timer.presentation.ts\";\n\nconst machine = timer({\n startMs: \"86400000\",\n countdown: true,\n});\n<\/script>\n<div class=\"mx-auto w-full max-w-[20rem]\" {...machine.getRootProps()}>\n <div class=\"flex flex-col items-center\" {...machine.getAreaProps()}>\n  <span\n   class=\"mb-2 type-label text-semantic-error\">Flash Sale Ends In</span>\n  <div\n   class=\"flex items-start gap-2 stat-value tabular-nums\">\n   <template for={machine.getUnits()} as={unit} key={unit.type}>\n    <div class=\"flex items-start gap-2\">\n     <div class=\"flex flex-col items-center\"\n      {...machine.getItemProps({ type: unit.type })}>\n      <span class=\"min-w-[2ch] text-center\"\n       {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>\n      <span class=\"type-caption text-muted\"\n       {...machine.getItemLabelProps({ type: unit.type })}>{unit.label}</span>\n     </div>\n     <span aria-hidden=\"true\" class=\"text-muted\"\n      {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>\n    </div>\n   </template>\n  </div>\n  <div class=\"mt-3 flex items-center justify-center gap-2\"\n   {...machine.getControlProps()}>\n   <button\n    class=\"secondary s-sm\"\n    {...machine.getActionTriggerProps({ action: \"start\" })}>Start</button>\n   <button\n    class=\"secondary s-sm\"\n    {...machine.getActionTriggerProps({ action: \"pause\" })}>Pause</button>\n   <button\n    class=\"secondary s-sm\"\n    {...machine.getActionTriggerProps({ action: \"resume\" })}>Resume</button>\n   <button\n    class=\"secondary s-sm\"\n    {...machine.getActionTriggerProps({ action: \"reset\" })}>Reset</button>\n  </div>\n </div>\n</div>\n";
+export { countdown_default as default };
+
+//# sourceMappingURL=countdown.html.js.map

package/dist/timer/examples/labels.html

@@ -7,7 +7,7 @@ const machine = timer({
 </script>
 <div class="mx-auto w-full max-w-[20rem]" {...machine.getRootProps()}>
  <div class="flex flex-col items-center gap-3" {...machine.getAreaProps()}>
-  <span class="text-lg font-medium text-text">Study Session</span>
+  <span class="type-lead">Study Session</span>
   <div class="flex items-start gap-4">
    <template for={machine.getUnits()} as={unit} key={unit.type}>
     <div class="flex items-start gap-2"
@@ -16,10 +16,10 @@ const machine = timer({
       {...machine.getItemProps({ type: unit.type })}>
       <span class="stat-value tabular-nums"
        {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
-      <span class="text-xs text-text-muted"
+      <span class="type-caption text-muted"
        {...machine.getItemLabelProps({ type: unit.type })}>{unit.label}</span>
      </div>
-     <span aria-hidden="true" class="stat-value text-text-muted"
+     <span aria-hidden="true" class="stat-value text-muted"
       {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
     </div>
    </template>

package/dist/timer/examples/labels.html.js

@@ -0,0 +1,5 @@
+// src/timer/examples/labels.html
+var labels_default = "<script lang=\"ts\">\nimport { timer } from \"../timer.presentation.ts\";\n\nconst machine = timer({\n targetMs: \"5400000\",\n});\n<\/script>\n<div class=\"mx-auto w-full max-w-[20rem]\" {...machine.getRootProps()}>\n <div class=\"flex flex-col items-center gap-3\" {...machine.getAreaProps()}>\n  <span class=\"type-lead\">Study Session</span>\n  <div class=\"flex items-start gap-4\">\n   <template for={machine.getUnits()} as={unit} key={unit.type}>\n    <div class=\"flex items-start gap-2\"\n     show={unit.type === \"minutes\" || unit.type === \"seconds\"}>\n     <div class=\"flex flex-col items-center\"\n      {...machine.getItemProps({ type: unit.type })}>\n      <span class=\"stat-value tabular-nums\"\n       {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>\n      <span class=\"type-caption text-muted\"\n       {...machine.getItemLabelProps({ type: unit.type })}>{unit.label}</span>\n     </div>\n     <span aria-hidden=\"true\" class=\"stat-value text-muted\"\n      {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>\n    </div>\n   </template>\n  </div>\n  <div class=\"mt-3 flex items-center justify-center gap-2\"\n   {...machine.getControlProps()}>\n   <button\n    class=\"secondary s-sm\"\n    {...machine.getActionTriggerProps({ action: \"start\" })}>Start</button>\n   <button\n    class=\"secondary s-sm\"\n    {...machine.getActionTriggerProps({ action: \"pause\" })}>Pause</button>\n  <button\n   class=\"secondary s-sm\"\n   {...machine.getActionTriggerProps({ action: \"resume\" })}>Resume</button>\n   <button\n    class=\"secondary s-sm\"\n    {...machine.getActionTriggerProps({ action: \"reset\" })}>Reset</button>\n  </div>\n </div>\n</div>\n";
+export { labels_default as default };
+
+//# sourceMappingURL=labels.html.js.map

package/dist/timer/examples/large.html

@@ -8,14 +8,14 @@ const machine = timer({
 <div class="mx-auto w-full max-w-[20rem]" {...machine.getRootProps()}>
  <div class="flex flex-col items-center gap-4" {...machine.getAreaProps()}>
   <div
-   class="flex items-center gap-2 text-3xl font-bold tabular-nums text-text">
+   class="flex items-center gap-2 type-display tabular-nums">
    <template for={machine.getUnits()} as={unit} key={unit.type}>
     <div class="flex flex-col items-center"
      {...machine.getItemProps({ type: unit.type })}>
      <span class="min-w-[2ch] text-center"
       {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
     </div>
-    <span aria-hidden="true" class="text-text-muted"
+    <span aria-hidden="true" class="text-muted"
      {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
    </template>
   </div>

package/dist/timer/examples/large.html.js

@@ -0,0 +1,5 @@
+// src/timer/examples/large.html
+var large_default = "<script lang=\"ts\">\nimport { timer } from \"../timer.presentation.ts\";\n\nconst machine = timer({\n targetMs: \"7200000\",\n});\n<\/script>\n<div class=\"mx-auto w-full max-w-[20rem]\" {...machine.getRootProps()}>\n <div class=\"flex flex-col items-center gap-4\" {...machine.getAreaProps()}>\n  <div\n   class=\"flex items-center gap-2 type-display tabular-nums\">\n   <template for={machine.getUnits()} as={unit} key={unit.type}>\n    <div class=\"flex flex-col items-center\"\n     {...machine.getItemProps({ type: unit.type })}>\n     <span class=\"min-w-[2ch] text-center\"\n      {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>\n    </div>\n    <span aria-hidden=\"true\" class=\"text-muted\"\n     {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>\n   </template>\n  </div>\n  <div class=\"mt-3 flex items-center justify-center gap-2\"\n   {...machine.getControlProps()}>\n   <button\n    class=\"secondary s-sm\"\n    {...machine.getActionTriggerProps({ action: \"start\" })}>Start</button>\n   <button\n    class=\"secondary s-sm\"\n    {...machine.getActionTriggerProps({ action: \"pause\" })}>Pause</button>\n  <button\n   class=\"secondary s-sm\"\n   {...machine.getActionTriggerProps({ action: \"resume\" })}>Resume</button>\n   <button\n    class=\"secondary s-sm\"\n    {...machine.getActionTriggerProps({ action: \"reset\" })}>Reset</button>\n  </div>\n </div>\n</div>\n";
+export { large_default as default };
+
+//# sourceMappingURL=large.html.js.map

package/dist/timer/examples/minimal.html

@@ -13,7 +13,7 @@ const machine = timer({
      show={unit.type === "minutes" || unit.type === "seconds"}>
      <div class="flex flex-col items-center" {...machine.getItemProps({ type: unit.type })}>
       <span class="min-w-[2ch] text-center" {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
-     </div><span aria-hidden="true" class="text-text-muted" {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
+     </div><span aria-hidden="true" class="text-muted" {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
     </div>
    </template>
   </div>

package/dist/timer/examples/minimal.html.js

@@ -0,0 +1,5 @@
+// src/timer/examples/minimal.html
+var minimal_default = "<script lang=\"ts\">\nimport { timer } from \"../timer.presentation.ts\";\n\nconst machine = timer({\n targetMs: \"300000\",\n});\n<\/script>\n<div class=\"mx-auto w-full max-w-[20rem]\" {...machine.getRootProps()}>\n <div class=\"text-center\" {...machine.getAreaProps()}>\n  <div class=\"inline-flex items-center stat-value tabular-nums\">\n   <template for={machine.getUnits()} as={unit} key={unit.type}>\n    <div class=\"flex items-center\"\n     show={unit.type === \"minutes\" || unit.type === \"seconds\"}>\n     <div class=\"flex flex-col items-center\" {...machine.getItemProps({ type: unit.type })}>\n      <span class=\"min-w-[2ch] text-center\" {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>\n     </div><span aria-hidden=\"true\" class=\"text-muted\" {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>\n    </div>\n   </template>\n  </div>\n </div>\n</div>\n";
+export { minimal_default as default };
+
+//# sourceMappingURL=minimal.html.js.map

package/dist/timer/examples/pomodoro.html

@@ -11,7 +11,7 @@ const machine = timer({
   class="rounded-lg border-2 border-solid border-semantic-error bg-surface-raised p-4"
   {...machine.getAreaProps()}>
   <div
-   class="mb-3 flex items-center justify-center gap-2"><span class="grid h-8 w-8 place-items-center rounded-full bg-semantic-error text-on-semantic-error"><span class="i-lucide-coffee text-sm"></span></span><span class="font-semibold text-text">Focus Time</span></div>
+   class="mb-3 flex items-center justify-center gap-2"><span class="grid h-8 w-8 place-items-center rounded-full bg-semantic-error text-on-semantic-error"><span class="i-lucide-coffee"></span></span><span class="type-body-emphasized">Focus Time</span></div>
   <div
    class="flex items-center justify-center stat-value tabular-nums">
    <template for={machine.getUnits()} as={unit} key={unit.type}>
@@ -20,12 +20,12 @@ const machine = timer({
      <span class="min-w-[2ch] text-center"
       {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
     </div>
-    <span aria-hidden="true" class="text-lg text-text-muted"
+    <span aria-hidden="true" class="stat-value text-muted"
      {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
    </template>
   </div>
   <div
-   class="mt-1 text-center text-xs text-text-muted">25 minutes of focused work</div>
+   class="mt-1 text-center type-caption text-muted">25 minutes of focused work</div>
   <div class="mt-3 flex items-center justify-center gap-2"
    {...machine.getControlProps()}>
    <button

package/dist/timer/examples/pomodoro.html.js

@@ -0,0 +1,5 @@
+// src/timer/examples/pomodoro.html
+var pomodoro_default = "<script lang=\"ts\">\nimport { timer } from \"../timer.presentation.ts\";\n\nconst machine = timer({\n startMs: \"1500000\",\n countdown: true,\n});\n<\/script>\n<div class=\"mx-auto w-full max-w-[20rem]\" {...machine.getRootProps()}>\n <div\n  class=\"rounded-lg border-2 border-solid border-semantic-error bg-surface-raised p-4\"\n  {...machine.getAreaProps()}>\n  <div\n   class=\"mb-3 flex items-center justify-center gap-2\"><span class=\"grid h-8 w-8 place-items-center rounded-full bg-semantic-error text-on-semantic-error\"><span class=\"i-lucide-coffee\"></span></span><span class=\"type-body-emphasized\">Focus Time</span></div>\n  <div\n   class=\"flex items-center justify-center stat-value tabular-nums\">\n   <template for={machine.getUnits()} as={unit} key={unit.type}>\n    <div class=\"flex flex-col items-center\"\n     {...machine.getItemProps({ type: unit.type })}>\n     <span class=\"min-w-[2ch] text-center\"\n      {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>\n    </div>\n    <span aria-hidden=\"true\" class=\"stat-value text-muted\"\n     {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>\n   </template>\n  </div>\n  <div\n   class=\"mt-1 text-center type-caption text-muted\">25 minutes of focused work</div>\n  <div class=\"mt-3 flex items-center justify-center gap-2\"\n   {...machine.getControlProps()}>\n   <button\n    class=\"secondary s-sm\"\n    {...machine.getActionTriggerProps({ action: \"start\" })}>Start</button>\n   <button\n    class=\"secondary s-sm\"\n    {...machine.getActionTriggerProps({ action: \"pause\" })}>Pause</button>\n  <button\n   class=\"secondary s-sm\"\n   {...machine.getActionTriggerProps({ action: \"resume\" })}>Resume</button>\n   <button\n    class=\"secondary s-sm\"\n    {...machine.getActionTriggerProps({ action: \"reset\" })}>Reset</button>\n  </div>\n </div>\n</div>\n";
+export { pomodoro_default as default };
+
+//# sourceMappingURL=pomodoro.html.js.map

package/dist/timer/examples/workout.html

@@ -11,7 +11,7 @@ const machine = timer({
   class="rounded-lg border-2 border-solid border-semantic-success bg-surface-raised p-4"
   {...machine.getAreaProps()}>
   <div
-   class="mb-3 flex items-center justify-center gap-2"><span class="grid h-8 w-8 place-items-center rounded-full bg-semantic-success text-on-semantic-success"><span class="i-lucide-dumbbell text-sm"></span></span><span class="font-semibold text-text">Workout — Round 1 / 4</span></div>
+   class="mb-3 flex items-center justify-center gap-2"><span class="grid h-8 w-8 place-items-center rounded-full bg-semantic-success text-on-semantic-success"><span class="i-lucide-dumbbell"></span></span><span class="type-body-emphasized">Workout — Round 1 / 4</span></div>
   <div
    class="flex items-center justify-center stat-value tabular-nums">
    <template for={machine.getUnits()} as={unit} key={unit.type}>
@@ -19,15 +19,15 @@ const machine = timer({
      {...machine.getItemProps({ type: unit.type })}>
      <span class="min-w-[2ch] text-center"
       {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
-     <span class="text-xs text-text-muted"
+     <span class="type-caption text-muted"
       {...machine.getItemLabelProps({ type: unit.type })}>{unit.label}</span>
     </div>
-    <span aria-hidden="true" class="text-lg text-text-muted"
+    <span aria-hidden="true" class="stat-value text-muted"
      {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
    </template>
   </div>
   <div
-   class="mt-1 text-center text-xs text-text-muted">45s work · 15s rest · 4 rounds</div>
+   class="mt-1 text-center type-caption text-muted">45s work · 15s rest · 4 rounds</div>
   <div class="mt-3 flex items-center justify-center gap-2"
    {...machine.getControlProps()}>
    <button

package/dist/timer/examples/workout.html.js

@@ -0,0 +1,5 @@
+// src/timer/examples/workout.html
+var workout_default = "<script lang=\"ts\">\nimport { timer } from \"../timer.presentation.ts\";\n\nconst machine = timer({\n startMs: \"1800000\",\n countdown: true,\n});\n<\/script>\n<div class=\"mx-auto w-full max-w-[20rem]\" {...machine.getRootProps()}>\n <div\n  class=\"rounded-lg border-2 border-solid border-semantic-success bg-surface-raised p-4\"\n  {...machine.getAreaProps()}>\n  <div\n   class=\"mb-3 flex items-center justify-center gap-2\"><span class=\"grid h-8 w-8 place-items-center rounded-full bg-semantic-success text-on-semantic-success\"><span class=\"i-lucide-dumbbell\"></span></span><span class=\"type-body-emphasized\">Workout — Round 1 / 4</span></div>\n  <div\n   class=\"flex items-center justify-center stat-value tabular-nums\">\n   <template for={machine.getUnits()} as={unit} key={unit.type}>\n    <div class=\"flex flex-col items-center\"\n     {...machine.getItemProps({ type: unit.type })}>\n     <span class=\"min-w-[2ch] text-center\"\n      {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>\n     <span class=\"type-caption text-muted\"\n      {...machine.getItemLabelProps({ type: unit.type })}>{unit.label}</span>\n    </div>\n    <span aria-hidden=\"true\" class=\"stat-value text-muted\"\n     {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>\n   </template>\n  </div>\n  <div\n   class=\"mt-1 text-center type-caption text-muted\">45s work · 15s rest · 4 rounds</div>\n  <div class=\"mt-3 flex items-center justify-center gap-2\"\n   {...machine.getControlProps()}>\n   <button\n    class=\"secondary s-sm\"\n    {...machine.getActionTriggerProps({ action: \"start\" })}>Start</button>\n   <button\n    class=\"secondary s-sm\"\n    {...machine.getActionTriggerProps({ action: \"pause\" })}>Pause</button>\n  <button\n   class=\"secondary s-sm\"\n   {...machine.getActionTriggerProps({ action: \"resume\" })}>Resume</button>\n   <button\n    class=\"secondary s-sm\"\n    {...machine.getActionTriggerProps({ action: \"reset\" })}>Reset</button>\n  </div>\n </div>\n</div>";
+export { workout_default as default };
+
+//# sourceMappingURL=workout.html.js.map

package/dist/timer/timer.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface TimerEvents {
   "START": {};
   "PAUSE": {};
@@ -14,5 +14,4 @@ export interface TimerEvents {
     currentMs: string | number;
   };
 }
-export type TimerEvent = EventUnion<TimerEvents>;
-//# sourceMappingURL=timer.events.d.ts.map
+export type TimerEvent = EventUnion<TimerEvents>;

package/dist/timer/timer.machine.d.ts

@@ -1,5 +1,4 @@
 import { TimerArgs, TimerContext, TimerState } from "./timer.state.js";
 import { TimerEvents } from "./timer.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
-export declare function timer(args?: TimerArgs, authored?: (name: string) => boolean): Machine<TimerContext, TimerEvents, TimerState>;
-//# sourceMappingURL=timer.machine.d.ts.map
+import { Machine } from "@spinjs/components/fsm";
+export declare function timer(args?: TimerArgs, authored?: (name: string) => boolean): Machine<TimerContext, TimerEvents, TimerState>;