create-hyper-effect 0.0.0-stage → 0.1.0-alpha.0

package/template/src/app/tasks/store.ts

@@ -0,0 +1,81 @@
+import { Clock, Context, Data, Effect, Layer, Schema as S, Stream, SubscriptionRef } from 'effect'
+
+/* The task store: the app's shared state, which every page shows live.
+
+   In memory here, with a change feed: `changes` emits the current list at
+   once and then every new one. Pages subscribe to it and get the data itself,
+   so a change needs no extra query. A real app puts a database behind the
+   same service and turns its change notifications (Postgres LISTEN/NOTIFY)
+   into the same stream; see examples/admin/src/app/catalog/postgres.ts in the
+   hyper-effect repository. */
+
+export const Task = S.Struct({
+  id: S.String,
+  title: S.String,
+  isDone: S.Boolean,
+  createdBy: S.String,
+  createdAt: S.Number,
+})
+export type Task = typeof Task.Type
+
+export class TaskNotFound extends Data.TaggedError('TaskNotFound')<{ readonly id: string }> {}
+
+export class Tasks extends Context.Service<
+  Tasks,
+  {
+    readonly current: Effect.Effect<ReadonlyArray<Task>>
+    /** The current list at once, then every new one. */
+    readonly changes: Stream.Stream<ReadonlyArray<Task>>
+    readonly add: (title: string, by: string) => Effect.Effect<Task>
+    readonly toggle: (id: string) => Effect.Effect<Task, TaskNotFound>
+    readonly remove: (id: string) => Effect.Effect<void, TaskNotFound>
+  }
+>()('app/Tasks') {
+  static readonly layer = Layer.effect(
+    Tasks,
+    Effect.gen(function* () {
+      const now = yield* Clock.currentTimeMillis
+      const tasks = yield* SubscriptionRef.make<ReadonlyArray<Task>>([
+        { id: 't1', title: 'Read the README', isDone: true, createdBy: 'hyper-effect', createdAt: now },
+        { id: 't2', title: 'Open this page in a second window', isDone: false, createdBy: 'hyper-effect', createdAt: now },
+        { id: 't3', title: 'Add a task and watch it appear in both', isDone: false, createdBy: 'hyper-effect', createdAt: now },
+      ])
+      let nextId = 4
+
+      const find = (id: string) =>
+        Effect.flatMap(SubscriptionRef.get(tasks), list => {
+          const task = list.find(item => item.id === id)
+          return task === undefined ? Effect.fail(new TaskNotFound({ id })) : Effect.succeed(task)
+        })
+
+      return {
+        current: SubscriptionRef.get(tasks),
+        changes: SubscriptionRef.changes(tasks),
+        add: (title, by) =>
+          Effect.gen(function* () {
+            const task: Task = {
+              id: `t${nextId++}`,
+              title,
+              isDone: false,
+              createdBy: by,
+              createdAt: yield* Clock.currentTimeMillis,
+            }
+            yield* SubscriptionRef.update(tasks, list => [...list, task])
+            return task
+          }),
+        toggle: id =>
+          Effect.gen(function* () {
+            const task = yield* find(id)
+            const toggled = { ...task, isDone: !task.isDone }
+            yield* SubscriptionRef.update(tasks, list => list.map(item => (item.id === id ? toggled : item)))
+            return toggled
+          }),
+        remove: id =>
+          Effect.gen(function* () {
+            yield* find(id)
+            yield* SubscriptionRef.update(tasks, list => list.filter(item => item.id !== id))
+          }),
+      }
+    }),
+  )
+}

package/template/src/lib/button.ts

@@ -0,0 +1,145 @@
+import { Button as ButtonPrimitive } from '@foldkit/ui'
+import type { Attribute, ChildAttribute, Html, HtmlBuilder } from 'foldkit/html'
+
+export type ButtonType = 'button' | 'submit' | 'reset'
+
+export type ButtonBehaviorProps<Msg> = Readonly<{
+  children: ReadonlyArray<Html | string>
+  onClick?: Msg
+  /** Native behavior attributes supplied by a composing overlay or dialog. */
+  buttonAttributes?: ReadonlyArray<Attribute<Msg> | ChildAttribute>
+  id?: string
+  isDisabled?: boolean
+  isLoading?: boolean
+  loadingContent?: ReadonlyArray<Html | string>
+  leadingIcon?: Html
+  trailingIcon?: Html
+  type?: ButtonType
+  isAutofocus?: boolean
+  ariaLabel?: string
+  name?: string
+  value?: string
+  form?: string
+  slot?: string
+  dataSize?: string
+}>
+
+export type ButtonLinkBehaviorProps = Readonly<{
+  children: ReadonlyArray<Html | string>
+  href: string
+  leadingIcon?: Html
+  trailingIcon?: Html
+  ariaLabel?: string
+  slot?: string
+  dataSize?: string
+  target?: '_blank' | '_self'
+}>
+
+const content = <Msg>(
+  props: Pick<
+    ButtonBehaviorProps<Msg>,
+    'children' | 'isLoading' | 'loadingContent' | 'leadingIcon' | 'trailingIcon'
+  >,
+  h: HtmlBuilder<Msg>,
+): ReadonlyArray<Html> => [
+  ...(props.isLoading === true && props.loadingContent !== undefined
+    ? [
+        h.span(
+          [
+            h.DataAttribute('slot', 'button-loading'),
+            h.AriaHidden(true),
+            h.Style({ display: 'contents' }),
+          ],
+          [...props.loadingContent],
+        ),
+      ]
+    : []),
+  ...(props.leadingIcon === undefined
+    ? []
+    : [
+        h.span(
+          [h.DataAttribute('slot', 'button-icon'), h.AriaHidden(true)],
+          [props.leadingIcon],
+        ),
+      ]),
+  h.span(
+    [
+      h.DataAttribute('slot', 'button-content'),
+      h.Style({ display: 'contents' }),
+    ],
+    [...props.children],
+  ),
+  ...(props.trailingIcon === undefined
+    ? []
+    : [
+        h.span(
+          [h.DataAttribute('slot', 'button-icon'), h.AriaHidden(true)],
+          [props.trailingIcon],
+        ),
+      ]),
+]
+
+export const renderButton = <Msg>(
+  props: ButtonBehaviorProps<Msg>,
+  visualAttributes: ReadonlyArray<Attribute<Msg> | ChildAttribute>,
+  h: HtmlBuilder<Msg>,
+): Html => {
+  const isDisabled = props.isDisabled === true || props.isLoading === true
+
+  return ButtonPrimitive.view(
+    {
+      ...(props.onClick === undefined ? {} : { onClick: props.onClick }),
+      isDisabled,
+      type: props.type ?? 'button',
+      isAutofocus: props.isAutofocus ?? false,
+      toView: ({ button: primitiveAttributes }) =>
+        h.button(
+          [
+            ...primitiveAttributes,
+            h.DataAttribute('slot', props.slot ?? 'button'),
+            h.DataAttribute(
+              'state',
+              props.isLoading === true ? 'loading' : 'idle',
+            ),
+            ...(props.dataSize === undefined
+              ? []
+              : [h.DataAttribute('size', props.dataSize)]),
+            ...(isDisabled ? [h.Disabled(true)] : []),
+            ...(props.id === undefined ? [] : [h.Id(props.id)]),
+            ...(props.ariaLabel === undefined
+              ? []
+              : [h.AriaLabel(props.ariaLabel)]),
+            ...(props.name === undefined ? [] : [h.Name(props.name)]),
+            ...(props.value === undefined ? [] : [h.Value(props.value)]),
+            ...(props.form === undefined ? [] : [h.FormAttr(props.form)]),
+            ...(props.buttonAttributes ?? []),
+            ...visualAttributes,
+          ],
+          content(props, h),
+        ),
+    },
+    h,
+  )
+}
+
+export const renderButtonLink = <Msg>(
+  props: ButtonLinkBehaviorProps,
+  visualAttributes: ReadonlyArray<Attribute<Msg> | ChildAttribute>,
+  h: HtmlBuilder<Msg>,
+): Html =>
+  h.a(
+    [
+      h.Href(props.href),
+      h.DataAttribute('slot', props.slot ?? 'button'),
+      ...(props.dataSize === undefined
+        ? []
+        : [h.DataAttribute('size', props.dataSize)]),
+      ...(props.target === undefined
+        ? []
+        : [h.Attribute('target', props.target)]),
+      ...(props.target === '_blank' ? [h.Rel('noopener noreferrer')] : []),
+      ...(props.ariaLabel === undefined ? [] : [h.AriaLabel(props.ariaLabel)]),
+      ...visualAttributes,
+    ],
+    content(props, h),
+  )

package/template/src/lib/input.ts

@@ -0,0 +1,158 @@
+import { Input as InputPrimitive } from '@foldkit/ui'
+import type { Attribute, Html, HtmlBuilder } from 'foldkit/html'
+
+export type InputMode =
+  | 'none'
+  | 'text'
+  | 'decimal'
+  | 'numeric'
+  | 'tel'
+  | 'search'
+  | 'email'
+  | 'url'
+
+export type InputBehaviorProps<Msg> = Readonly<{
+  id: string
+  value: string
+  onInput?: (value: string) => Msg
+  onChange?: (value: string) => Msg
+  label?: Html | string
+  description?: Html | string
+  placeholder?: string
+  type?: string
+  name?: string
+  form?: string
+  autocomplete?: string
+  inputMode?: InputMode
+  describedBy?: string
+  /** Extra WAI-ARIA role for composite inputs (e.g. 'searchbox', 'combobox'). */
+  role?: string
+  ariaLabel?: string
+  isDisabled?: boolean
+  isReadOnly?: boolean
+  isInvalid?: boolean
+  isAutofocus?: boolean
+  isRequired?: boolean
+  /** Extra attributes for the input element itself, after crease's own: an
+   *  event the props do not name (`h.OnBlur`, `h.OnKeyDown`), a data or ARIA
+   *  attribute. */
+  attributes?: ReadonlyArray<Attribute<Msg>>
+}>
+
+export type InputVisualAttributes<Msg> = Readonly<{
+  field: ReadonlyArray<Attribute<Msg>>
+  label: ReadonlyArray<Attribute<Msg>>
+  input: ReadonlyArray<Attribute<Msg>>
+  description: ReadonlyArray<Attribute<Msg>>
+}>
+
+const descriptionIds = <Msg>(
+  props: InputBehaviorProps<Msg>,
+): string | undefined => {
+  const ids = [
+    ...(props.description === undefined
+      ? []
+      : [InputPrimitive.descriptionId(props.id)]),
+    ...(props.describedBy === undefined ? [] : [props.describedBy]),
+  ]
+
+  return ids.length === 0 ? undefined : [...new Set(ids)].join(' ')
+}
+
+export const renderInput = <Msg>(
+  props: InputBehaviorProps<Msg>,
+  visual: InputVisualAttributes<Msg>,
+  h: HtmlBuilder<Msg>,
+): Html =>
+  InputPrimitive.view(
+    {
+      id: props.id,
+      value: props.value,
+      ...(props.onInput === undefined ? {} : { onInput: props.onInput }),
+      isDisabled: props.isDisabled ?? false,
+      isReadOnly: props.isReadOnly ?? false,
+      isInvalid: props.isInvalid ?? false,
+      isAutofocus: props.isAutofocus ?? false,
+      type: props.type ?? 'text',
+      ...(props.name === undefined ? {} : { name: props.name }),
+      ...(props.placeholder === undefined
+        ? {}
+        : { placeholder: props.placeholder }),
+      toView: ({ input: primitiveInput, label, description }) => {
+        const isInteractive =
+          props.isDisabled !== true && props.isReadOnly !== true
+        const describedBy = descriptionIds(props)
+        const inputAttributes = primitiveInput.filter(
+          attribute => attribute._tag !== 'AriaDescribedBy',
+        )
+        const control = h.input([
+          ...inputAttributes,
+          h.DataAttribute('slot', 'input'),
+          ...(props.onChange === undefined || !isInteractive
+            ? []
+            : [h.OnChange(props.onChange)]),
+          ...(props.isRequired === true
+            ? [h.Required(true), h.AriaRequired(true)]
+            : []),
+          ...(props.form === undefined ? [] : [h.FormAttr(props.form)]),
+          ...(props.autocomplete === undefined
+            ? []
+            : [h.Autocomplete(props.autocomplete)]),
+          ...(props.inputMode === undefined
+            ? []
+            : [h.InputMode(props.inputMode)]),
+          ...(props.role === undefined ? [] : [h.Role(props.role)]),
+          ...(props.ariaLabel === undefined
+            ? []
+            : [h.AriaLabel(props.ariaLabel)]),
+          ...(describedBy === undefined
+            ? []
+            : [h.AriaDescribedBy(describedBy)]),
+          ...visual.input,
+          ...(props.attributes ?? []),
+        ])
+
+        if (props.label === undefined && props.description === undefined)
+          return control
+
+        return h.div(
+          [
+            h.DataAttribute('slot', 'input-field'),
+            h.DataAttribute(
+              'state',
+              props.isInvalid === true ? 'invalid' : 'valid',
+            ),
+            ...visual.field,
+          ],
+          [
+            ...(props.label === undefined
+              ? []
+              : [
+                  h.label(
+                    [
+                      h.DataAttribute('slot', 'input-label'),
+                      ...label,
+                      ...visual.label,
+                    ],
+                    [props.label],
+                  ),
+                ]),
+            control,
+            ...(props.description === undefined
+              ? []
+              : [
+                  h.p(
+                    [
+                      h.DataAttribute('slot', 'input-description'),
+                      ...description,
+                      ...visual.description,
+                    ],
+                    [props.description],
+                  ),
+                ]),
+          ],
+        )
+      },
+    },
+    h,
+  )

package/template/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+// Verbatim shadcn/ui utils.ts — nothing React-specific in it.
+export const cn = (...inputs: ReadonlyArray<ClassValue>): string =>
+  twMerge(clsx(inputs))

package/template/src/main.ts

@@ -0,0 +1,49 @@
+import { NodeHttpServer, NodeRuntime, NodeServices } from '@effect/platform-node'
+import { Layer } from 'effect'
+import { HttpRouter, HttpServerResponse } from 'effect/http'
+import { createServer } from 'node:http'
+import { fileURLToPath } from 'node:url'
+
+import * as Hyper from '@hyper-effect/core'
+
+import * as Auth from '@/app/auth'
+import * as TaskPage from '@/app/tasks/page'
+import { Tasks } from '@/app/tasks/store'
+
+/* The server: one hyper-effect layer per page, plain routes for sign-in and
+   the stylesheet, the app's services, and the session snapshot store.
+
+   Environment:
+   - PORT (default 4000)
+   - APP_SECRET signs the sign-in cookie; HYPER_SNAPSHOT_SECRET seals session
+     snapshots. Both have development values in the source: set them
+     everywhere else. */
+
+const port = Number(process.env['PORT'] ?? 4000)
+const publicFile = (path: string) => fileURLToPath(new URL(`../public/${path}`, import.meta.url))
+
+const page: Hyper.Options = {
+  stylesheets: ['/styles.css'],
+  // Sessions belong to the signed-in user; signing out ends them.
+  principal: Auth.principal,
+  snapshotSecret: Hyper.secretFromEnvironment('HYPER_SNAPSHOT_SECRET', 'dev-snapshot-secret, set HYPER_SNAPSHOT_SECRET'),
+}
+
+const Routes = Layer.mergeAll(
+  Hyper.layer(TaskPage.program, { ...page, path: '/' }),
+  Auth.routes,
+  HttpRouter.add('GET', '/styles.css', HttpServerResponse.file(publicFile('styles.css'), { contentType: 'text/css' })),
+)
+
+HttpRouter.serve(Routes).pipe(
+  Layer.provide([
+    Tasks.layer,
+    // Session snapshots on disk: restart the server and open pages carry on.
+    // Several machines: Hyper.sqlStore() on Postgres instead.
+    Hyper.fileStore('.hyper-sessions'),
+  ]),
+  Layer.provide(NodeServices.layer),
+  Layer.provide(NodeHttpServer.layer(createServer, { port })),
+  Layer.launch,
+  NodeRuntime.runMain,
+)

package/template/src/styles.css

@@ -0,0 +1,128 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:is(.dark *));
+@source '../src';
+
+@theme inline {
+    --font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+    --radius: 0.625rem;
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+}
+
+/* Base layer from crease's theme; newer crease-theme registry items install it. */
+@layer base {
+  * {
+    border-color: var(--color-border);
+    outline-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+  }
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    -webkit-font-smoothing: antialiased;
+  }
+}

package/template/src/ui/button.ts

@@ -0,0 +1,101 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+import type { Html, HtmlBuilder } from 'foldkit/html'
+
+import { cn } from '@/lib/utils'
+import {
+  type ButtonBehaviorProps,
+  type ButtonLinkBehaviorProps,
+  renderButton,
+  renderButtonLink,
+} from '@/lib/button'
+
+/* Ported from shadcn/ui button.tsx. The cva config is copied verbatim except:
+   - `disabled:` variants became `data-[disabled]:` + `aria-disabled:` because
+     the foldkit Button primitive signals disabled state via aria-disabled and
+     a data-disabled attribute rather than the native disabled attribute. */
+export const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px data-[disabled]:pointer-events-none data-[disabled]:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+        outline:
+          'border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost:
+          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
+        destructive:
+          'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default:
+          'h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: 'h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',
+        lg: 'h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        icon: 'size-9',
+        'icon-xs':
+          "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm':
+          'size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
+
+export type ButtonProps<Msg> = ButtonBehaviorProps<Msg> &
+  Readonly<{
+    variant?: ButtonVariants['variant']
+    size?: ButtonVariants['size']
+    class?: string
+  }>
+
+export const button = <Msg>(
+  props: ButtonProps<Msg>,
+  h: HtmlBuilder<Msg>,
+): Html => {
+  const variant = props.variant ?? 'default'
+  const size = props.size ?? 'default'
+  return renderButton(
+    props,
+    [
+      h.DataAttribute('variant', variant),
+      ...(props.dataSize === undefined ? [h.DataAttribute('size', size)] : []),
+      h.Class(cn(buttonVariants({ variant, size }), props.class)),
+    ],
+    h,
+  )
+}
+
+export type ButtonLinkProps = ButtonLinkBehaviorProps &
+  Readonly<{
+    variant?: ButtonVariants['variant']
+    size?: ButtonVariants['size']
+    class?: string
+  }>
+
+export const buttonLink = <Msg>(
+  props: ButtonLinkProps,
+  h: HtmlBuilder<Msg>,
+): Html => {
+  const variant = props.variant ?? 'default'
+  const size = props.size ?? 'default'
+  return renderButtonLink(
+    props,
+    [
+      h.DataAttribute('variant', variant),
+      ...(props.dataSize === undefined ? [h.DataAttribute('size', size)] : []),
+      h.Class(cn(buttonVariants({ variant, size }), props.class)),
+    ],
+    h,
+  )
+}