@spinjs/components 0.0.0-stage → 0.1.0-preview.2

package/dist/listbox/examples/grouped.html

@@ -0,0 +1,58 @@
+<script lang="ts">
+import { listbox } from "../listbox.presentation.js";
+
+const machine = listbox({
+  items: [
+    { "value": "react", "label": "React", "group": "Frontend Frameworks" },
+    { "value": "vue", "label": "Vue", "group": "Frontend Frameworks" },
+    { "value": "angular", "label": "Angular", "group": "Frontend Frameworks" },
+    { "value": "svelte", "label": "Svelte", "group": "Frontend Frameworks" },
+    { "value": "nodejs", "label": "Node.js", "group": "Backend" },
+    { "value": "express", "label": "Express", "group": "Backend" },
+    { "value": "fastapi", "label": "FastAPI", "group": "Backend" },
+    { "value": "django", "label": "Django", "group": "Backend" },
+    { "value": "postgresql", "label": "PostgreSQL", "group": "Databases" },
+    { "value": "mongodb", "label": "MongoDB", "group": "Databases" },
+    { "value": "redis", "label": "Redis", "group": "Databases" },
+    { "value": "mysql", "label": "MySQL", "group": "Databases" },
+  ],
+});
+</script>
+
+<div class="w-64 max-w-full" {...machine.getRootProps()}>
+  <label
+    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    {...machine.getLabelProps()}
+  >Technologies</label>
+
+  <span
+    class={["block text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
+    {...machine.getValueTextProps()}
+  >{machine.valueAsString}</span>
+
+  <div
+    class={["max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised p-1 transition-colors duration-fast ease-decelerate", { "opacity-60": machine.disabled, "hidden": machine.empty }]}
+    {...machine.getContentProps()}
+  >
+    <template for={machine.getBlocks()} as={block} key={block.id}>
+      <div class="py-1" {...machine.getItemGroupProps(block)}>
+        <span class="block px-2 py-1 text-xs font-medium text-text-muted"
+          {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
+        <template for={machine.getRows(block)} as={row} key={row.value}>
+          <div
+            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
+            {...machine.getItemProps(row)}
+          >
+            <span class="min-w-0 flex-1 truncate"
+              {...machine.getItemTextProps(row)}>{row.label}</span>
+            <span
+              aria-hidden="true"
+              class="shrink-0 text-xs text-primary"
+              {...machine.getItemIndicatorProps(row)}
+            ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</div>

package/dist/listbox/examples/icons.html

@@ -0,0 +1,56 @@
+<script lang="ts">
+import { listbox } from "../listbox.presentation.js";
+
+const machine = listbox({
+  items: [
+    { "value": "figma", "label": "Figma" },
+    { "value": "photoshop", "label": "Photoshop" },
+    { "value": "illustrator", "label": "Illustrator" },
+    { "value": "sketch", "label": "Sketch" },
+    { "value": "framer", "label": "Framer" },
+    { "value": "vscode", "label": "VS Code" },
+    { "value": "xd", "label": "Adobe XD" },
+  ],
+  multiple: true,
+  value: ["figma","vscode"],
+});
+</script>
+
+<div class="w-64 max-w-full" {...machine.getRootProps()}>
+  <label
+    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    {...machine.getLabelProps()}
+  >Design & Development Tools</label>
+
+  <span
+    class={["block text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
+    {...machine.getValueTextProps()}
+  >{machine.valueAsString}</span>
+
+  <div
+    class={["max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised p-1 transition-colors duration-fast ease-decelerate", { "opacity-60": machine.disabled, "hidden": machine.empty }]}
+    {...machine.getContentProps()}
+  >
+    <template for={machine.getBlocks()} as={block} key={block.id}>
+      <div class="py-1" {...machine.getItemGroupProps(block)}>
+        <span class="block px-2 py-1 text-xs font-medium text-text-muted"
+          {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
+        <template for={machine.getRows(block)} as={row} key={row.value}>
+          <div
+            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
+            {...machine.getItemProps(row)}
+          >
+            <span class="shrink-0 text-sm text-text-muted" aria-hidden="true"><span show={row.value === "figma"} class="inline-block i-lucide-frame"></span><span show={row.value === "photoshop"} class="inline-block i-lucide-image"></span><span show={row.value === "illustrator"} class="inline-block i-lucide-pen-tool"></span><span show={row.value === "sketch"} class="inline-block i-lucide-square-dashed"></span><span show={row.value === "framer"} class="inline-block i-lucide-layers"></span><span show={row.value === "vscode"} class="inline-block i-lucide-code"></span><span show={row.value === "xd"} class="inline-block i-lucide-droplet"></span></span>
+            <span class="min-w-0 flex-1 truncate"
+              {...machine.getItemTextProps(row)}>{row.label}</span>
+            <span
+              aria-hidden="true"
+              class="shrink-0 text-xs text-primary"
+              {...machine.getItemIndicatorProps(row)}
+            ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</div>

package/dist/listbox/examples/multiple.html

@@ -0,0 +1,56 @@
+<script lang="ts">
+import { listbox } from "../listbox.presentation.js";
+
+const machine = listbox({
+  items: [
+    { "value": "typescript", "label": "TypeScript" },
+    { "value": "javascript", "label": "JavaScript" },
+    { "value": "python", "label": "Python" },
+    { "value": "go", "label": "Go" },
+    { "value": "rust", "label": "Rust" },
+    { "value": "java", "label": "Java" },
+    { "value": "cpp", "label": "C++" },
+    { "value": "swift", "label": "Swift" },
+  ],
+  multiple: true,
+  value: ["typescript","javascript"],
+});
+</script>
+
+<div class="w-64 max-w-full" {...machine.getRootProps()}>
+  <label
+    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    {...machine.getLabelProps()}
+  >Languages</label>
+
+  <span
+    class={["block text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
+    {...machine.getValueTextProps()}
+  >{machine.valueAsString}</span>
+
+  <div
+    class={["max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised p-1 transition-colors duration-fast ease-decelerate", { "opacity-60": machine.disabled, "hidden": machine.empty }]}
+    {...machine.getContentProps()}
+  >
+    <template for={machine.getBlocks()} as={block} key={block.id}>
+      <div class="py-1" {...machine.getItemGroupProps(block)}>
+        <span class="block px-2 py-1 text-xs font-medium text-text-muted"
+          {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
+        <template for={machine.getRows(block)} as={row} key={row.value}>
+          <div
+            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
+            {...machine.getItemProps(row)}
+          >
+            <span class="min-w-0 flex-1 truncate"
+              {...machine.getItemTextProps(row)}>{row.label}</span>
+            <span
+              aria-hidden="true"
+              class="shrink-0 text-xs text-primary"
+              {...machine.getItemIndicatorProps(row)}
+            ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</div>

package/dist/listbox/examples/priority.html

@@ -0,0 +1,50 @@
+<script lang="ts">
+import { listbox } from "../listbox.presentation.js";
+
+const machine = listbox({
+  items: [
+    { "value": "critical", "label": "Critical" },
+    { "value": "high", "label": "High" },
+    { "value": "medium", "label": "Medium" },
+    { "value": "low", "label": "Low" },
+  ],
+});
+</script>
+
+<div class="w-64 max-w-full" {...machine.getRootProps()}>
+  <label
+    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    {...machine.getLabelProps()}
+  >Task Priority</label>
+
+  <span
+    class={["block text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
+    {...machine.getValueTextProps()}
+  >{machine.valueAsString}</span>
+
+  <div
+    class={["max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised p-1 transition-colors duration-fast ease-decelerate", { "opacity-60": machine.disabled, "hidden": machine.empty }]}
+    {...machine.getContentProps()}
+  >
+    <template for={machine.getBlocks()} as={block} key={block.id}>
+      <div class="py-1" {...machine.getItemGroupProps(block)}>
+        <span class="block px-2 py-1 text-xs font-medium text-text-muted"
+          {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
+        <template for={machine.getRows(block)} as={row} key={row.value}>
+          <div
+            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
+            {...machine.getItemProps(row)}
+          >
+            <span class="min-w-0 flex-1 truncate"
+              {...machine.getItemTextProps(row)}>{row.label}</span>
+            <span
+              aria-hidden="true"
+              class="shrink-0 text-xs text-primary"
+              {...machine.getItemIndicatorProps(row)}
+            ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</div>

package/dist/listbox/examples/settings.html

@@ -0,0 +1,64 @@
+<script lang="ts">
+import { listbox } from "../listbox.presentation.js";
+
+const machine = listbox({
+  items: [
+    { "value": "dark-theme", "label": "Dark Theme", "group": "Appearance" },
+    { "value": "system-theme", "label": "System Theme", "group": "Appearance" },
+    { "value": "light-theme", "label": "Light Theme", "group": "Appearance" },
+    {
+      "value": "notifications",
+      "label": "Push Notifications",
+      "group": "Privacy",
+    },
+    { "value": "privacy-mode", "label": "Privacy Mode", "group": "Privacy" },
+    {
+      "value": "public-profile",
+      "label": "Public Profile",
+      "group": "Account",
+    },
+    { "value": "two-factor", "label": "Two-Factor Auth", "group": "Security" },
+    { "value": "mobile-sync", "label": "Mobile Sync", "group": "Sync" },
+  ],
+  multiple: true,
+  value: ["dark-theme","notifications","two-factor"],
+});
+</script>
+
+<div class="w-64 max-w-full" {...machine.getRootProps()}>
+  <label
+    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    {...machine.getLabelProps()}
+  >Settings Preferences</label>
+
+  <span
+    class={["block text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
+    {...machine.getValueTextProps()}
+  >{machine.valueAsString}</span>
+
+  <div
+    class={["max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised p-1 transition-colors duration-fast ease-decelerate", { "opacity-60": machine.disabled, "hidden": machine.empty }]}
+    {...machine.getContentProps()}
+  >
+    <template for={machine.getBlocks()} as={block} key={block.id}>
+      <div class="py-1" {...machine.getItemGroupProps(block)}>
+        <span class="block px-2 py-1 text-xs font-medium text-text-muted"
+          {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
+        <template for={machine.getRows(block)} as={row} key={row.value}>
+          <div
+            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
+            {...machine.getItemProps(row)}
+          >
+            <span class="min-w-0 flex-1 truncate"
+              {...machine.getItemTextProps(row)}>{row.label}</span>
+            <span
+              aria-hidden="true"
+              class="shrink-0 text-xs text-primary"
+              {...machine.getItemIndicatorProps(row)}
+            ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</div>

package/dist/listbox/listbox.events.d.ts

@@ -0,0 +1,42 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface ListboxEvents {
+  "SELECTED_ITEMS.SYNC": {};
+  "HIGHLIGHTED_VALUE.SET": {
+    value?: string | null;
+    highlightedValue?: string | null;
+  };
+  "HIGHLIGHTED_VALUE.CLEAR": {};
+  "ITEM.SELECT": {
+    value: string;
+  };
+  "ITEM.CLEAR": {
+    value: string;
+  };
+  "VALUE.SET": {
+    value: readonly string[];
+  };
+  "VALUE.CLEAR": {};
+  "ITEM.CLICK": {
+    value: string;
+    shiftKey?: boolean;
+    anchorValue?: string;
+    metaKey?: boolean;
+  };
+  "CONTENT.FOCUS": {};
+  "CONTENT.BLUR": {};
+  "CONTENT.TYPEAHEAD": {
+    key: string;
+  };
+  "ITEM.POINTER_MOVE": {
+    value: string;
+  };
+  "ITEM.POINTER_LEAVE": {};
+  "NAVIGATE": {
+    value: string;
+    shiftKey?: boolean;
+    anchorValue?: string;
+    metaKey?: boolean;
+  };
+}
+export type ListboxEvent = EventUnion<ListboxEvents>;
+//# sourceMappingURL=listbox.events.d.ts.map

package/dist/listbox/listbox.events.js

@@ -0,0 +1 @@
+export {};

package/dist/listbox/listbox.machine.d.ts

@@ -0,0 +1,6 @@
+import { ListboxArgs, ListboxContext, ListboxState, hasValue, stringifyValues } from "./listbox.state.js";
+import { ListboxEvents } from "./listbox.events.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function listbox(args: ListboxArgs | undefined, authored: (name: string) => boolean): Machine<ListboxContext, ListboxEvents, ListboxState>;
+export { hasValue, stringifyValues };
+//# sourceMappingURL=listbox.machine.d.ts.map

package/dist/listbox/listbox.machine.js

@@ -0,0 +1,51 @@
+import { hasValue, initial, parseItems, rowsOf, stringifyValues } from "./listbox.state.js";
+import { clearHighlightedValue, clearItem, clearValue, itemClickInner, navigateInner, pointerMove, selectItem, setFocused, setHighlightedItem, setHighlightedValue, setValue, syncSelectedItems, typeaheadInner } from "./listbox.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/listbox/listbox.machine.ts
+function listbox(args = {}, authored) {
+	return createMachine({
+		id: "listbox",
+		initial: "idle",
+		context: initial(args, authored),
+		fields: {
+			value: { event: "VALUE.SET" },
+			highlightedValue: { event: "HIGHLIGHTED_VALUE.SET" },
+			items: { parse: parseItems },
+			readOnly: {},
+			multiple: {},
+			selectOnHighlight: {},
+			loopFocus: {},
+			selectionBehavior: {},
+			orientation: {},
+			dir: {}
+		},
+		on: {
+			"SELECTED_ITEMS.SYNC": { assign: syncSelectedItems },
+			"HIGHLIGHTED_VALUE.SET": { assign: setHighlightedValue },
+			"HIGHLIGHTED_VALUE.CLEAR": { assign: clearHighlightedValue },
+			"ITEM.SELECT": { assign: selectItem },
+			"ITEM.CLEAR": { assign: clearItem },
+			"VALUE.SET": { assign: setValue },
+			"VALUE.CLEAR": { assign: clearValue }
+		},
+		states: { idle: { on: {
+			"CONTENT.FOCUS": [{
+				cond: (ctx) => ctx.value.length > 0 || ctx.highlightedValue !== null,
+				assign: setFocused
+			}, { assign: [setFocused, (ctx) => ({ highlightedValue: rowsOf(ctx.items)[0]?.value ?? null })] }],
+			"CONTENT.BLUR": { assign: () => ({ focused: false }) },
+			"ITEM.CLICK": { assign: [setHighlightedItem, itemClickInner] },
+			"CONTENT.TYPEAHEAD": { assign: [setFocused, typeaheadInner] },
+			"ITEM.POINTER_MOVE": { assign: pointerMove },
+			"ITEM.POINTER_LEAVE": { assign: clearHighlightedValue },
+			NAVIGATE: { assign: [
+				setFocused,
+				setHighlightedItem,
+				navigateInner
+			] }
+		} } }
+	});
+}
+export { hasValue, listbox, stringifyValues };
+
+//# sourceMappingURL=listbox.machine.js.map