create-mikstack 0.1.0

package/templates/ui-dependency/package.json.partial

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@mikstack/ui": "^0.1.0"
+  }
+}

package/templates/ui-vendor/src/lib/components/ui/Accordion/Accordion.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    summary: Snippet;
+    children: Snippet;
+    open?: boolean;
+  }
+
+  let { summary, children, open = false }: Props = $props();
+</script>
+
+<details {open}>
+  <summary>
+    {@render summary()}
+    <svg class="chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  </summary>
+  <div class="content">
+    {@render children()}
+  </div>
+</details>
+
+<style>
+  details {
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background-color: var(--surface-1);
+  }
+
+  summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-3) var(--space-4);
+    cursor: pointer;
+    font-weight: 500;
+    list-style: none;
+    user-select: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &:hover {
+      background-color: var(--surface-2);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--focus);
+      outline-offset: -2px;
+      border-radius: var(--radius-md);
+    }
+  }
+
+  .chevron {
+    transition: transform 0.2s;
+    flex-shrink: 0;
+  }
+
+  details[open] > summary .chevron {
+    transform: rotate(180deg);
+  }
+
+  .content {
+    padding: 0 var(--space-4) var(--space-4);
+    color: var(--text-2);
+    font-size: var(--text-sm);
+  }
+</style>

package/templates/ui-vendor/src/lib/components/ui/Accordion/index.ts

@@ -0,0 +1 @@
+export { default } from "./Accordion.svelte";

package/templates/ui-vendor/src/lib/components/ui/Alert/Alert.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    variant?: 'info' | 'success' | 'warning' | 'danger';
+    children: Snippet;
+    title?: Snippet;
+  }
+
+  let { variant = 'info', children, title }: Props = $props();
+</script>
+
+<div role="alert" data-variant={variant}>
+  {#if title}
+    <strong class="alert-title">{@render title()}</strong>
+  {/if}
+  <div class="alert-body">
+    {@render children()}
+  </div>
+</div>
+
+<style>
+  [role='alert'] {
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius-md);
+    border: 1px solid;
+    font-size: var(--text-sm);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+
+    &[data-variant='info'] {
+      background-color: oklch(from var(--accent) l c h / 10%);
+      border-color: oklch(from var(--accent) l c h / 30%);
+      color: var(--text-1);
+    }
+
+    &[data-variant='success'] {
+      background-color: oklch(55% 0.15 145 / 10%);
+      border-color: oklch(55% 0.15 145 / 30%);
+      color: var(--text-1);
+    }
+
+    &[data-variant='warning'] {
+      background-color: oklch(75% 0.15 85 / 10%);
+      border-color: oklch(75% 0.15 85 / 30%);
+      color: var(--text-1);
+    }
+
+    &[data-variant='danger'] {
+      background-color: oklch(from var(--danger) l c h / 10%);
+      border-color: oklch(from var(--danger) l c h / 30%);
+      color: var(--text-1);
+    }
+  }
+
+  .alert-title {
+    font-weight: 600;
+  }
+</style>

package/templates/ui-vendor/src/lib/components/ui/Alert/index.ts

@@ -0,0 +1 @@
+export { default } from "./Alert.svelte";

package/templates/ui-vendor/src/lib/components/ui/Badge/Badge.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    variant?: 'default' | 'secondary' | 'success' | 'danger';
+    children: Snippet;
+  }
+
+  let { variant = 'default', children }: Props = $props();
+</script>
+
+<span data-variant={variant}>
+  {@render children()}
+</span>
+
+<style>
+  span {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-2);
+    border-radius: 9999px;
+    font-size: var(--text-xs);
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+
+    &[data-variant='default'] {
+      background-color: var(--accent);
+      color: white;
+    }
+
+    &[data-variant='secondary'] {
+      background-color: var(--surface-3);
+      color: var(--text-1);
+    }
+
+    &[data-variant='success'] {
+      background-color: oklch(55% 0.15 145);
+      color: white;
+    }
+
+    &[data-variant='danger'] {
+      background-color: var(--danger);
+      color: white;
+    }
+  }
+</style>

package/templates/ui-vendor/src/lib/components/ui/Badge/index.ts

@@ -0,0 +1 @@
+export { default } from "./Badge.svelte";

package/templates/ui-vendor/src/lib/components/ui/Button/Button.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLButtonAttributes {
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    children: Snippet;
+  }
+
+  let { variant = 'primary', children, ...rest }: Props = $props();
+</script>
+
+<button data-variant={variant} {...rest}>
+  {@render children()}
+</button>
+
+<style>
+  button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-4);
+    border: 1px solid transparent;
+    border-radius: var(--radius-md);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.15s, border-color 0.15s;
+
+    &:focus-visible {
+      outline: 2px solid var(--focus);
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &[data-variant='primary'] {
+      background-color: var(--accent);
+      color: white;
+
+      &:hover:not(:disabled) {
+        background-color: oklch(from var(--accent) calc(l - 0.05) c h);
+      }
+    }
+
+    &[data-variant='secondary'] {
+      background-color: var(--surface-2);
+      border-color: var(--border);
+      color: var(--text-1);
+
+      &:hover:not(:disabled) {
+        background-color: var(--surface-3);
+      }
+    }
+
+    &[data-variant='ghost'] {
+      background-color: transparent;
+      color: var(--text-1);
+
+      &:hover:not(:disabled) {
+        background-color: var(--surface-2);
+      }
+    }
+
+    &[data-variant='danger'] {
+      background-color: var(--danger);
+      color: white;
+
+      &:hover:not(:disabled) {
+        background-color: oklch(from var(--danger) calc(l - 0.05) c h);
+      }
+    }
+  }
+</style>

package/templates/ui-vendor/src/lib/components/ui/Button/index.ts

@@ -0,0 +1 @@
+export { default } from "./Button.svelte";

package/templates/ui-vendor/src/lib/components/ui/Card/Card.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+  }
+
+  let { children, header, footer, ...rest }: Props = $props();
+</script>
+
+<article {...rest}>
+  {#if header}
+    <div class="card-header">
+      {@render header()}
+    </div>
+  {/if}
+  <div class="card-body">
+    {@render children()}
+  </div>
+  {#if footer}
+    <div class="card-footer">
+      {@render footer()}
+    </div>
+  {/if}
+</article>
+
+<style>
+  article {
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background-color: var(--surface-1);
+    overflow: hidden;
+  }
+
+  .card-header {
+    padding: var(--space-4) var(--space-4) 0;
+  }
+
+  .card-body {
+    padding: var(--space-4);
+  }
+
+  .card-footer {
+    padding: 0 var(--space-4) var(--space-4);
+  }
+</style>

package/templates/ui-vendor/src/lib/components/ui/Card/index.ts

@@ -0,0 +1 @@
+export { default } from "./Card.svelte";

package/templates/ui-vendor/src/lib/components/ui/Dialog/Dialog.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open?: boolean;
+    onclose?: () => void;
+    children: Snippet;
+  }
+
+  let { open = $bindable(false), onclose, children }: Props = $props();
+
+  let dialogEl: HTMLDialogElement | undefined = $state();
+
+  $effect(() => {
+    if (!dialogEl) return;
+    if (open && !dialogEl.open) {
+      dialogEl.showModal();
+    } else if (!open && dialogEl.open) {
+      dialogEl.close();
+    }
+  });
+
+  function handleClose() {
+    open = false;
+    onclose?.();
+  }
+
+  function handleClick(e: MouseEvent) {
+    if (e.target === dialogEl) {
+      handleClose();
+    }
+  }
+</script>
+
+<dialog bind:this={dialogEl} onclose={handleClose} onclick={handleClick}>
+  <div class="dialog-content">
+    {@render children()}
+  </div>
+</dialog>
+
+<style>
+  dialog {
+    border: none;
+    border-radius: var(--radius-lg);
+    padding: 0;
+    max-width: min(32rem, calc(100vw - var(--space-6)));
+    max-height: min(85vh, calc(100vh - var(--space-6)));
+    background-color: var(--surface-1);
+    color: var(--text-1);
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 10%),
+      0 4px 6px -4px rgb(0 0 0 / 10%);
+
+    &::backdrop {
+      background-color: rgb(0 0 0 / 50%);
+    }
+
+    &[open] {
+      display: flex;
+    }
+  }
+
+  .dialog-content {
+    padding: var(--space-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    overflow-y: auto;
+  }
+</style>

package/templates/ui-vendor/src/lib/components/ui/Dialog/index.ts

@@ -0,0 +1 @@
+export { default } from "./Dialog.svelte";

package/templates/ui-vendor/src/lib/components/ui/FormField/FormField.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface LabelAttrs {
+    for: string;
+  }
+
+  interface ErrorAttrs {
+    id: string;
+    role: 'alert';
+    'aria-live': 'polite';
+  }
+
+  interface Props {
+    for: string;
+    label: Snippet<[LabelAttrs]>;
+    children: Snippet;
+    error?: Snippet<[ErrorAttrs]>;
+  }
+
+  let { for: htmlFor, label, children, error }: Props = $props();
+</script>
+
+<div class="field">
+  <div class="field-label">
+    {@render label({ for: htmlFor })}
+  </div>
+  {@render children()}
+  {#if error}
+    <div class="field-error">
+      {@render error({ id: `${htmlFor}-error`, role: 'alert', 'aria-live': 'polite' })}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .field-label {
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--text-1);
+  }
+
+  .field-error {
+    font-size: var(--text-sm);
+    color: var(--danger);
+  }
+</style>

package/templates/ui-vendor/src/lib/components/ui/FormField/index.ts

@@ -0,0 +1 @@
+export { default } from "./FormField.svelte";

package/templates/ui-vendor/src/lib/components/ui/Input/Input.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  let { ...rest }: HTMLInputAttributes = $props();
+</script>
+
+<input {...rest} />
+
+<style>
+  input {
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background-color: var(--surface-1);
+    font-size: var(--text-base);
+    width: 100%;
+
+    &:focus-visible {
+      outline: 2px solid var(--focus);
+      outline-offset: 2px;
+    }
+
+    &[aria-invalid] {
+      border-color: var(--danger);
+    }
+  }
+</style>

package/templates/ui-vendor/src/lib/components/ui/Input/index.ts

@@ -0,0 +1 @@
+export { default } from "./Input.svelte";

package/templates/ui-vendor/src/lib/components/ui/Separator/Separator.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  interface Props {
+    orientation?: 'horizontal' | 'vertical';
+  }
+
+  let { orientation = 'horizontal' }: Props = $props();
+</script>
+
+<hr data-orientation={orientation} aria-orientation={orientation} />
+
+<style>
+  hr {
+    border: none;
+    background-color: var(--border);
+
+    &[data-orientation='horizontal'] {
+      height: 1px;
+      width: 100%;
+    }
+
+    &[data-orientation='vertical'] {
+      width: 1px;
+      height: 100%;
+    }
+  }
+</style>

package/templates/ui-vendor/src/lib/components/ui/Separator/index.ts

@@ -0,0 +1 @@
+export { default } from "./Separator.svelte";

package/templates/ui-vendor/src/lib/components/ui/Skeleton/Skeleton.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  interface Props {
+    width?: string;
+    height?: string;
+    circle?: boolean;
+  }
+
+  let { width, height = '1rem', circle = false }: Props = $props();
+</script>
+
+<div
+  class="skeleton"
+  class:circle
+  style:width={circle ? height : width}
+  style:height
+  aria-hidden="true"
+></div>
+
+<style>
+  .skeleton {
+    background-color: var(--surface-3);
+    border-radius: var(--radius-md);
+    animation: pulse 2s ease-in-out infinite;
+  }
+
+  .circle {
+    border-radius: 9999px;
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 0.5;
+    }
+  }
+</style>

package/templates/ui-vendor/src/lib/components/ui/Skeleton/index.ts

@@ -0,0 +1 @@
+export { default } from "./Skeleton.svelte";

package/templates/ui-vendor/src/lib/components/ui/Switch/Switch.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  interface Props extends Omit<HTMLInputAttributes, 'type'> {
+    label?: string;
+  }
+
+  let { label, id, ...rest }: Props = $props();
+
+  const inputId = $derived(id ?? (label ? `switch-${label.toLowerCase().replace(/\s+/g, '-')}` : undefined));
+</script>
+
+<label class="switch-wrapper" for={inputId}>
+  <input type="checkbox" role="switch" id={inputId} {...rest} />
+  <span class="track">
+    <span class="thumb"></span>
+  </span>
+  {#if label}
+    <span class="switch-label">{label}</span>
+  {/if}
+</label>
+
+<style>
+  .switch-wrapper {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+  }
+
+  input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .track {
+    position: relative;
+    width: 2.75rem;
+    height: 1.5rem;
+    background-color: var(--surface-3);
+    border-radius: 9999px;
+    transition: background-color 0.15s;
+  }
+
+  .thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 1.25rem;
+    height: 1.25rem;
+    background-color: white;
+    border-radius: 9999px;
+    transition: transform 0.15s;
+  }
+
+  input:checked + .track {
+    background-color: var(--accent);
+  }
+
+  input:checked + .track .thumb {
+    transform: translateX(1.25rem);
+  }
+
+  input:focus-visible + .track {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+  }
+
+  input:disabled + .track {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .switch-label {
+    font-size: var(--text-sm);
+    color: var(--text-1);
+    user-select: none;
+  }
+</style>

package/templates/ui-vendor/src/lib/components/ui/Switch/index.ts

@@ -0,0 +1 @@
+export { default } from "./Switch.svelte";

package/templates/ui-vendor/src/lib/components/ui/Textarea/Textarea.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+  let { ...rest }: HTMLTextareaAttributes = $props();
+</script>
+
+<textarea {...rest}></textarea>
+
+<style>
+  textarea {
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background-color: var(--surface-1);
+    font-size: var(--text-base);
+    width: 100%;
+    min-height: 5rem;
+    resize: vertical;
+
+    &:focus-visible {
+      outline: 2px solid var(--focus);
+      outline-offset: 2px;
+    }
+
+    &[aria-invalid] {
+      border-color: var(--danger);
+    }
+  }
+</style>

package/templates/ui-vendor/src/lib/components/ui/Textarea/index.ts

@@ -0,0 +1 @@
+export { default } from "./Textarea.svelte";