@ouraihub/aether-ui 0.0.0-stage → 0.1.0

package/src/components/ui/select/select-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithoutChild } from "#lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = "default",
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> & {
+		size?: "sm" | "default";
+	} = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={cn(
+		"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-kit border bg-transparent py-2 pr-2 pl-2.5 text-kit-base transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-kit-control data-[size=sm]:h-kit-control-sm data-[size=sm]:rounded-kit-sm *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon class="text-muted-foreground size-4 pointer-events-none" />
+</SelectPrimitive.Trigger>

package/src/components/ui/select/select-value.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SelectPrimitive.ValueProps = $props();
+</script>
+
+<SelectPrimitive.Value bind:ref data-slot="select-value" {...restProps} />

package/src/components/ui/select/select.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let {
+		open = $bindable(false),
+		value = $bindable(),
+		...restProps
+	}: SelectPrimitive.RootProps = $props();
+</script>
+
+<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />

package/src/components/ui/separator/index.ts

@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};

package/src/components/ui/separator/separator.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "#lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		"data-slot": dataSlot = "separator",
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	data-slot={dataSlot}
+	class={cn(
+		"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+		className
+	)}
+	{...restProps}
+/>

package/src/components/ui/sonner/index.ts

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

package/src/components/ui/sonner/sonner.svelte

@@ -0,0 +1,40 @@
+<!-- Local change: `theme` falls back to "system" before mode-watcher resolves, as exactOptionalPropertyTypes rejects `undefined` (docs/04 §4). -->
+<script lang="ts">
+	import { mode } from "mode-watcher";
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import CircleCheckIcon from '@lucide/svelte/icons/circle-check';
+	import OctagonXIcon from '@lucide/svelte/icons/octagon-x';
+	import InfoIcon from '@lucide/svelte/icons/info';
+	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
+
+	let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+	theme={mode.current ?? "system"}
+	class="toaster group"
+	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
+	toastOptions={{
+		classes: {
+			toast: "cn-toast",
+		},
+	}}
+	{...restProps}
+>
+	{#snippet loadingIcon()}
+		<Loader2Icon class="size-4 animate-spin" />
+	{/snippet}
+	{#snippet successIcon()}
+		<CircleCheckIcon class="size-4" />
+	{/snippet}
+	{#snippet errorIcon()}
+		<OctagonXIcon class="size-4" />
+	{/snippet}
+	{#snippet infoIcon()}
+		<InfoIcon class="size-4" />
+	{/snippet}
+	{#snippet warningIcon()}
+		<TriangleAlertIcon class="size-4" />
+	{/snippet}
+</Sonner>

package/src/components/ui/switch/index.ts

@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch,
+};

package/src/components/ui/switch/switch.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "#lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = $bindable(false),
+		size = "default",
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
+		size?: "sm" | "default";
+	} = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	data-size={size}
+	class={cn(
+		"data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/35 focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 shrink-0 rounded-full p-0.5 focus-visible:ring-3 aria-invalid:ring-3 group-has-[:focus-visible]/field-label:ring-0 data-[size=default]:h-5 data-[size=default]:w-[34px] data-[size=sm]:h-4 data-[size=sm]:w-7 peer group/switch relative inline-flex items-center transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-45",
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class={cn(
+			"bg-white rounded-full shadow-sm group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:group-data-[state=checked]/switch:translate-x-[14px] group-data-[size=sm]/switch:group-data-[state=checked]/switch:translate-x-3 pointer-events-none block ring-0 transition-transform",
+			"rtl:group-data-[state=checked]/switch:-translate-x-[14px]"
+		)}
+	/>
+</SwitchPrimitive.Root>

package/src/components/ui/textarea/index.ts

@@ -0,0 +1,7 @@
+import Root from "./textarea.svelte";
+
+export {
+	Root,
+	//
+	Root as Textarea,
+};

package/src/components/ui/textarea/textarea.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "#lib/utils.js";
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "textarea",
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={cn(
+		"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-kit border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-kit-base flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	{...restProps}></textarea>

package/src/context.ts

@@ -0,0 +1,34 @@
+// Host-injected dependencies of kit containers (docs/16 §3, docs/04 §5 "依赖注入走 context").
+import { createContext } from 'svelte'
+import type { KitI18n } from './i18n'
+import type { KitPorts } from './ports'
+
+export type LogFields = Record<string, string | number | boolean>
+
+export interface KitLogger {
+  debug(event: string, fields?: LogFields): void
+  info(event: string, fields?: LogFields): void
+  warn(event: string, fields?: LogFields): void
+  error(event: string, fields?: LogFields): void
+}
+
+export interface ConfirmOptions {
+  title: string
+  body: string
+  danger?: boolean
+}
+
+export interface KitNotify {
+  toast(kind: 'info' | 'success' | 'error', text: string): void
+  confirm(options: ConfirmOptions): Promise<boolean>
+}
+
+export interface KitContext {
+  ports: KitPorts
+  i18n: KitI18n
+  notify: KitNotify
+  logger: KitLogger
+}
+
+/** The host root component calls `setKitContext` once; kit containers call `getKitContext`. */
+export const [getKitContext, setKitContext] = createContext<KitContext>()

package/src/dev/Demo.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  // Component playground (`pnpm -F @ouraihub/aether-ui dev`) and the overlay test fixture (docs/16 §6, 陷阱 2).
+  import { Button } from '#lib/components/ui/button/index.js'
+  import * as Dialog from '#lib/components/ui/dialog/index.js'
+  import * as Field from '#lib/components/ui/field/index.js'
+  import { Input } from '#lib/components/ui/input/index.js'
+  import { createI18n } from '../i18n'
+  import KitNotifier from '../KitNotifier.svelte'
+  import { createDefaultNotify } from '../notify.svelte'
+
+  const notify = createDefaultNotify()
+  const i18n = createI18n('zh-CN')
+  let clicks = $state(0)
+  let answer = $state('none')
+
+  async function ask() {
+    answer = String(await notify.confirm({ title: 'Delete?', body: 'This cannot be undone.', danger: true }))
+  }
+</script>
+
+<main class="flex flex-col items-start gap-4 p-6">
+  <Dialog.Root>
+    <Dialog.Trigger>
+      {#snippet child({ props })}
+        <Button {...props}>Open dialog</Button>
+      {/snippet}
+    </Dialog.Trigger>
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>Settings</Dialog.Title>
+        <Dialog.Description>Overlay must unmount on close.</Dialog.Description>
+      </Dialog.Header>
+      <Field.Group>
+        <Field.Field>
+          <Field.Label for="demo-name">Name</Field.Label>
+          <Input id="demo-name" />
+        </Field.Field>
+      </Field.Group>
+    </Dialog.Content>
+  </Dialog.Root>
+  <Button variant="outline" onclick={() => void ask()}>Confirm</Button>
+  <Button variant="secondary" onclick={() => clicks++}>Background clicks: {clicks}</Button>
+  <p class="text-muted-foreground">Answer: {answer}</p>
+</main>
+<KitNotifier {notify} {i18n} />

package/src/dev/main.ts

@@ -0,0 +1,7 @@
+import { mount } from 'svelte'
+import '../styles/kit.css'
+import Demo from './Demo.svelte'
+
+const target = document.getElementById('app')
+if (!target) throw new Error('#app missing')
+mount(Demo, { target })