archos-ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,34 @@
+# Non-Commercial Source Available License
+
+Copyright (c) 2026 Arch Technologies Inc
+
+## Permissions
+
+You may:
+
+- Use this software for personal, non-commercial purposes
+- Modify the software for your own use
+- Distribute copies of the software to others for non-commercial use
+- Run instances of this software for yourself, your friends, or your family
+
+## Restrictions
+
+You may NOT:
+
+- Use this software for any commercial purpose without a separate written agreement
+- Host this software as a service for paying users
+- Sell access to an instance of this software
+- Integrate this software into a commercial product
+- Use this software to generate revenue in any form (including advertising, donations, or paid support)
+
+## Commercial Use
+
+If you wish to use this software commercially (including hosting as a service), please contact:
+
+hello@chuksemmanuel.com
+
+A commercial license agreement will be provided. Pricing is negotiable based on your use case.
+
+## No Warranty
+
+This software is provided "as is" without warranty of any kind.

package/LICENSE.shadcn-svelte

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2023 Hunter Johnston <https://github.com/huntabyte>
+Copyright (c) 2023 CokaKoala <https://github.com/adriangonz97>
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,111 @@
-# Temporary Holding Version
+# archos-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Arch's Svelte component library implements the One UI visual language. Components are owned and
+maintained in `src/lib/components`; they do not require a component registry at install time.
+
+## Usage
+
+Import components from the public package entry and the theme stylesheet once in the app shell:
+
+```svelte
+<script lang="ts">
+  import { Button, Input } from 'archos-ui';
+  import 'archos-ui/theme.css';
+</script>
+
+<Input aria-label="Search" />
+<Button>Search</Button>
+```
+
+Consumer Tailwind builds must scan their own routes and components. `archos-ui/theme.css` scans its
+own component source, not Arch's platform. The stylesheet defines semantic CSS variables on
+`:root` and `.dark`, Tailwind color/radius aliases, Arch spacing and typography utilities, and
+the minimal base styles needed by current consumers. Load consumer CSS after the theme stylesheet
+to override equal-specificity rules. Higher-specificity selectors and `!important` still follow
+normal CSS cascade rules. Plain CSS can override semantic variables at an app root, for example:
+
+```css
+:root {
+  --primary: #2563eb;
+}
+```
+
+The theme stylesheet is the source of truth for Arch's default token values. After changing its
+`:root` or `.dark` declarations, run `pnpm theme:generate` to update the TypeScript theme constant.
+`pnpm check` and `pnpm build` reject stale generated constants. Other named theme definitions retain
+their current compatibility contracts.
+
+State-variant and accordion CSS adapted from shadcn-svelte retains its MIT notice in
+[`LICENSE.shadcn-svelte`](./LICENSE.shadcn-svelte). The package has no shadcn-svelte runtime or
+registry dependency.
+
+The Phase 9 NativeSelect, Select, Checkbox, Switch, RadioGroup, Spinner, Alert, and Empty families
+adapt the Svelte 5 composition and primitive-wrapping patterns in the local shadcn-svelte reference
+at commit `3ef557c8` (`docs/src/lib/registry/ui/{native-select,select,checkbox,switch,radio-group,spinner,alert,empty}`).
+Their styles and application behavior are Arch-owned; the upstream MIT notice ships with this package.
+
+Phase 10 DropdownMenu, Table, Pagination, Command, and Combobox use the same local reference commit
+`3ef557c8` (`docs/src/lib/registry/ui/{dropdown-menu,table,pagination,command}` and the Combobox
+composition examples). Arch provides its own tokens, typed wrappers, toast store, and interaction
+contracts; no upstream component package is a runtime dependency. The upstream MIT notice remains
+in [`LICENSE.shadcn-svelte`](./LICENSE.shadcn-svelte).
+
+## Public API and compatibility
+
+Prefer the root entry for existing components. New code may use focused entry points such as
+`archos-ui/button` and `archos-ui/field`; the latter exports the compound parts and their prop types.
+Import class utilities from `archos-ui/utils` and theme helpers from `archos-ui/theme`. Public entry
+points resolve to `dist`, not `src`, so a consuming app needs no Arch repository aliases.
+
+| Legacy path                                 | Replacement                                  | Status                                                    |
+| ------------------------------------------- | -------------------------------------------- | --------------------------------------------------------- |
+| `archos-ui/utils.js`                        | `archos-ui/utils`                            | Supported; one development warning per module load.       |
+| `archos-ui/components/<name>`               | Focused entry when available, otherwise root | Supported; no warning yet.                                |
+| `archos-ui/components/<name>/index.js`      | Focused entry when available, otherwise root | Supported; no warning yet.                                |
+| `archos-ui/components/<name>/<file>.svelte` | Public component entry                       | Supported for existing deep consumers; avoid in new code. |
+
+The existing root names remain stable during this overhaul. We will not remove a legacy path
+without a separately documented major-version migration. Warnings are development-only and
+deduplicated; they do not appear in production logs.
+
+## Component contributor recipe
+
+1. Build the component in `src/lib/components/<name>` and expose a typed `Props` alias plus any
+   variants from its `index.ts`. Keep native element attributes, `on*` handlers, `children`/other
+   snippets, and `ref` in the public type. Forward remaining attributes to the rendered element.
+2. Treat `class` as a consumer override: merge defaults first and the supplied class last with
+   `cn()`. Avoid source-only `archos-ui` imports inside the package; use relative imports.
+3. Add a focused package export when the component is compound or its types are commonly used.
+   Keep its existing root export and legacy deep path working.
+4. Add a fixture to `tests/public-api.ts` covering native attributes, events, refs, snippets,
+   variants, and at least one invalid value. Update `scripts/check-package.mjs` for a new runtime
+   subpath and add a regression test for any compatibility behavior.
+5. Run `pnpm api:check`, `pnpm check`, `pnpm lint`, and `pnpm build` in `packages/ui`. Check a
+   generated tarball and a consumer without source aliases before considering the export stable.
+
+## Storybook and shared examples
+
+Run `pnpm dev:storybook` from the repository root to start the isolated UI workshop on port 6006.
+It does not restart the platform or docs servers. Run `pnpm build:storybook` for a static build and
+`pnpm test:storybook` for real-browser interaction and accessibility checks. On a machine with
+system Chromium but no Playwright browser download, set `ARCH_TEST_CHROMIUM=/path/to/chromium` for
+the test command. Otherwise install the matching Playwright Chromium binary once.
+Run `pnpm -F archos-ui test:coverage` to generate a component coverage report in
+`packages/ui/coverage/`; CI uploads it as an artifact. Treat uncovered branches as a review list,
+not a reason to weaken tests or claim completeness from a single percentage.
+
+Examples live in `examples/`, outside the published package. Each example has one Svelte source
+used by a Storybook story and the matching Astro docs page; `examples/manifest.ts` records the
+story, source, and docs route. Add new examples there rather than copying demo markup between sites.
+The Storybook build resolves App Bridge to `.storybook/mocks/app-bridge.ts`, so stories never call a
+real Arch platform. Console warnings/errors and rejected promises fail interaction tests rather
+than being hidden. Mock any other external integration explicitly before adding its story.
+
+### Visual regression
+
+Capture the same story ID at 390, 768, and 1440 pixel widths, in both light and dark themes. Turn
+on the `reducedMotion` toolbar setting, wait for `document.fonts.ready`, and keep the story's data
+and clock deterministic. Name baseline images by story ID, theme, and viewport; review image diffs
+before updating a baseline. Do not treat a baseline update as proof of correctness. Storybook's
+viewport and theme controls provide the matching manual review states until automated screenshot
+baselines are introduced for each component phase.

package/dist/compat/deprecations.d.ts

@@ -0,0 +1,2 @@
+export declare function warnDeprecated(key: string, replacement: string): void;
+//# sourceMappingURL=deprecations.d.ts.map

package/dist/compat/deprecations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deprecations.d.ts","sourceRoot":"","sources":["../../src/lib/compat/deprecations.ts"],"names":[],"mappings":"AAIA,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI,CAIrE"}

package/dist/compat/deprecations.js

@@ -0,0 +1,8 @@
+import { DEV } from 'esm-env';
+const warned = new Set();
+export function warnDeprecated(key, replacement) {
+    if (!DEV || warned.has(key))
+        return;
+    warned.add(key);
+    console.warn(`[arch/ui] ${key} is deprecated. Use ${replacement} instead.`);
+}

package/dist/components/alert/alert-description.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../utils';
+  let { class: className, children, ...restProps }: HTMLAttributes<HTMLParagraphElement> = $props();
+</script>
+
+<p data-slot="alert-description" class={cn('opacity-85', className)} {...restProps}>
+  {@render children?.()}
+</p>

package/dist/components/alert/alert-description.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const AlertDescription: import("svelte").Component<HTMLAttributes<HTMLParagraphElement>, {}, "">;
+type AlertDescription = ReturnType<typeof AlertDescription>;
+export default AlertDescription;
+//# sourceMappingURL=alert-description.svelte.d.ts.map

package/dist/components/alert/alert-description.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-description.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/alert/alert-description.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAetD,QAAA,MAAM,gBAAgB,0EAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/alert/alert-title.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../utils';
+  let { class: className, children, ...restProps }: HTMLAttributes<HTMLHeadingElement> = $props();
+</script>
+
+<h3 data-slot="alert-title" class={cn('font-semibold', className)} {...restProps}>
+  {@render children?.()}
+</h3>

package/dist/components/alert/alert-title.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const AlertTitle: import("svelte").Component<HTMLAttributes<HTMLHeadingElement>, {}, "">;
+type AlertTitle = ReturnType<typeof AlertTitle>;
+export default AlertTitle;
+//# sourceMappingURL=alert-title.svelte.d.ts.map

package/dist/components/alert/alert-title.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-title.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/alert/alert-title.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAetD,QAAA,MAAM,UAAU,wEAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/alert/alert.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { WithElementRef } from '../../utils';
+  export type AlertProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    variant?: 'default' | 'destructive';
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from '../../utils';
+  let {
+    ref = $bindable(null),
+    variant = 'default',
+    class: className,
+    children,
+    ...restProps
+  }: AlertProps = $props();
+</script>
+
+<div
+  bind:this={ref}
+  role="alert"
+  data-slot="alert"
+  data-variant={variant}
+  class={cn(
+    'border-border bg-card text-card-foreground grid w-full gap-1 rounded-2xl border px-4 py-3 text-sm',
+    variant === 'destructive' && 'border-destructive/50 text-destructive',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/components/alert/alert.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../utils';
+export type AlertProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    variant?: 'default' | 'destructive';
+};
+declare const Alert: import("svelte").Component<AlertProps, {}, "ref">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;
+//# sourceMappingURL=alert.svelte.d.ts.map

package/dist/components/alert/alert.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/alert/alert.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,GAAG;IACxF,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CACrC,CAAC;AA4BJ,QAAA,MAAM,KAAK,mDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/alert/index.d.ts

@@ -0,0 +1,5 @@
+import Root from './alert.svelte';
+import Title from './alert-title.svelte';
+import Description from './alert-description.svelte';
+export { Root, Title, Description, Root as Alert, Title as AlertTitle, Description as AlertDescription };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,gBAAgB,CAAC;AAClC,OAAO,KAAK,MAAM,sBAAsB,CAAC;AACzC,OAAO,WAAW,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACL,IAAI,EACJ,KAAK,EACL,WAAW,EACX,IAAI,IAAI,KAAK,EACb,KAAK,IAAI,UAAU,EACnB,WAAW,IAAI,gBAAgB,EAChC,CAAC"}

package/dist/components/alert/index.js

@@ -0,0 +1,4 @@
+import Root from './alert.svelte';
+import Title from './alert-title.svelte';
+import Description from './alert-description.svelte';
+export { Root, Title, Description, Root as Alert, Title as AlertTitle, Description as AlertDescription };

package/dist/components/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import type { AlertDialog as AlertDialogTypes } from 'bits-ui';
+
+  export type AlertDialogContentProps = Omit<AlertDialogTypes.ContentProps, 'children'> & {
+    children: Snippet;
+    mobileBottom?: boolean;
+  };
+</script>
+
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import { cn } from '../../utils';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    mobileBottom = true,
+    ...restProps
+  }: AlertDialogContentProps = $props();
+</script>
+
+<AlertDialogPrimitive.Portal>
+  <AlertDialogPrimitive.Overlay
+    data-slot="alert-dialog-overlay"
+    class="reduce-transparency:bg-black/60 reduce-transparency:backdrop-blur-none fixed inset-0 z-110 bg-black/40 backdrop-blur-sm"
+  />
+  <AlertDialogPrimitive.Content
+    bind:ref
+    data-slot="alert-dialog-content"
+    class={cn(
+      'bg-card text-card-foreground shadow-overlay fixed z-111 flex max-h-[min(85dvh,48rem)] w-full flex-col gap-4 overflow-y-auto rounded-2xl p-5 outline-none',
+      mobileBottom
+        ? 'inset-x-0 bottom-0 mx-auto rounded-b-none md:inset-x-auto md:top-1/2 md:bottom-auto md:left-1/2 md:max-w-lg md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-b-2xl'
+        : 'top-1/2 left-1/2 max-w-lg -translate-x-1/2 -translate-y-1/2',
+      className
+    )}
+    {...restProps}
+  >
+    {@render children()}
+  </AlertDialogPrimitive.Content>
+</AlertDialogPrimitive.Portal>

package/dist/components/alert-dialog/alert-dialog-content.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { AlertDialog as AlertDialogTypes } from 'bits-ui';
+export type AlertDialogContentProps = Omit<AlertDialogTypes.ContentProps, 'children'> & {
+    children: Snippet;
+    mobileBottom?: boolean;
+};
+declare const AlertDialogContent: import("svelte").Component<AlertDialogContentProps, {}, "ref">;
+type AlertDialogContent = ReturnType<typeof AlertDialogContent>;
+export default AlertDialogContent;
+//# sourceMappingURL=alert-dialog-content.svelte.d.ts.map

package/dist/components/alert-dialog/alert-dialog-content.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-content.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/alert-dialog/alert-dialog-content.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE/D,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG;IACtF,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAoCJ,QAAA,MAAM,kBAAkB,gEAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/alert-dialog/index.d.ts

@@ -0,0 +1,24 @@
+import { AlertDialog as Primitive } from 'bits-ui';
+import Content from './alert-dialog-content.svelte';
+export type { AlertDialogContentProps } from './alert-dialog-content.svelte';
+export declare const Root: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+export declare const Trigger: import("svelte").Component<Primitive.TriggerProps, {}, "ref">;
+export declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+export declare const Overlay: import("svelte").Component<Primitive.OverlayProps, {}, "ref">;
+export declare const Title: import("svelte").Component<Primitive.TitleProps, {}, "ref">;
+export declare const Description: import("svelte").Component<Primitive.DescriptionProps, {}, "ref">;
+export declare const Action: import("svelte").Component<Primitive.TriggerProps, {}, "ref">;
+export declare const Cancel: import("svelte").Component<Primitive.TriggerProps, {}, "ref">;
+export { Content };
+export declare const AlertDialog: {
+    Root: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+    Trigger: import("svelte").Component<Primitive.TriggerProps, {}, "ref">;
+    Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+    Overlay: import("svelte").Component<Primitive.OverlayProps, {}, "ref">;
+    Title: import("svelte").Component<Primitive.TitleProps, {}, "ref">;
+    Description: import("svelte").Component<Primitive.DescriptionProps, {}, "ref">;
+    Action: import("svelte").Component<Primitive.TriggerProps, {}, "ref">;
+    Cancel: import("svelte").Component<Primitive.TriggerProps, {}, "ref">;
+    Content: import("svelte").Component<import("./alert-dialog-content.svelte").AlertDialogContentProps, {}, "ref">;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/alert-dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/alert-dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,SAAS,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,OAAO,MAAM,+BAA+B,CAAC;AAEpD,YAAY,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AAC7E,eAAO,MAAM,IAAI,2FAAiB,CAAC;AACnC,eAAO,MAAM,OAAO,+DAAoB,CAAC;AACzC,eAAO,MAAM,MAAM,mEAAmB,CAAC;AACvC,eAAO,MAAM,OAAO,+DAAoB,CAAC;AACzC,eAAO,MAAM,KAAK,6DAAkB,CAAC;AACrC,eAAO,MAAM,WAAW,mEAAwB,CAAC;AACjD,eAAO,MAAM,MAAM,+DAAmB,CAAC;AACvC,eAAO,MAAM,MAAM,+DAAmB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,eAAO,MAAM,WAAW;;;;;;;;;;CAUvB,CAAC"}

package/dist/components/alert-dialog/index.js

@@ -0,0 +1,22 @@
+import { AlertDialog as Primitive } from 'bits-ui';
+import Content from './alert-dialog-content.svelte';
+export const Root = Primitive.Root;
+export const Trigger = Primitive.Trigger;
+export const Portal = Primitive.Portal;
+export const Overlay = Primitive.Overlay;
+export const Title = Primitive.Title;
+export const Description = Primitive.Description;
+export const Action = Primitive.Action;
+export const Cancel = Primitive.Cancel;
+export { Content };
+export const AlertDialog = {
+    Root,
+    Trigger,
+    Portal,
+    Overlay,
+    Title,
+    Description,
+    Action,
+    Cancel,
+    Content
+};

package/dist/components/badge/badge-dot.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn } from '../../utils';
+
+  let {
+    count,
+    label,
+    class: className
+  }: { count?: number; label?: string; class?: string } = $props();
+
+  const dot = $derived(count === undefined);
+</script>
+
+<!-- One UI badge: a small dot, or a count pill when `count` is given. -->
+<span
+  aria-label={label}
+  role={label ? 'status' : undefined}
+  class={cn(
+    'bg-primary text-primary-foreground inline-flex items-center justify-center rounded-full font-bold',
+    dot ? 'size-2' : 'min-h-[16px] min-w-[16px] px-1 text-[10px] leading-none',
+    className
+  )}
+  >{#if !dot}{count! > 99 ? '99+' : count}{/if}</span
+>

package/dist/components/badge/badge-dot.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    count?: number;
+    label?: string;
+    class?: string;
+};
+declare const BadgeDot: import("svelte").Component<$$ComponentProps, {}, "">;
+type BadgeDot = ReturnType<typeof BadgeDot>;
+export default BadgeDot;
+//# sourceMappingURL=badge-dot.svelte.d.ts.map

package/dist/components/badge/badge-dot.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-dot.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/badge/badge-dot.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAsB7E,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/badge/badge.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+  import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
+  import type { WithElementRef } from '../../utils';
+  import { type VariantProps, tv } from 'tailwind-variants';
+
+  export const badgeVariants = tv({
+    base: 'h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none',
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        destructive:
+          'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
+        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+        link: 'text-primary-text underline-offset-4 hover:underline'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  });
+
+  export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+  export type BadgeProps = WithElementRef<
+    HTMLAttributes<HTMLElement> & HTMLAnchorAttributes,
+    HTMLElement
+  > & { variant?: BadgeVariant };
+</script>
+
+<script lang="ts">
+  import { cn } from '../../utils';
+
+  let {
+    ref = $bindable(null),
+    href,
+    class: className,
+    variant = 'default',
+    children,
+    ...restProps
+  }: BadgeProps = $props();
+</script>
+
+<svelte:element
+  this={href !== undefined ? 'a' : 'span'}
+  bind:this={ref}
+  data-slot="badge"
+  {href}
+  class={cn(badgeVariants({ variant }), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</svelte:element>

package/dist/components/badge/badge.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../utils';
+import { type VariantProps } from 'tailwind-variants';
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+}, undefined, "h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none", {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+}, undefined, "h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none", unknown, unknown, undefined>>;
+export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+export type BadgeProps = WithElementRef<HTMLAttributes<HTMLElement> & HTMLAnchorAttributes, HTMLElement> & {
+    variant?: BadgeVariant;
+};
+declare const Badge: import("svelte").Component<BadgeProps, {}, "ref">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;
+//# sourceMappingURL=badge.svelte.d.ts.map

package/dist/components/badge/badge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/badge/badge.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,KAAK,YAAY,EAAM,MAAM,mBAAmB,CAAC;AAE1D,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;4iBAgBxB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,cAAc,CACrC,cAAc,CAAC,WAAW,CAAC,GAAG,oBAAoB,EAClD,WAAW,CACZ,GAAG;IAAE,OAAO,CAAC,EAAE,YAAY,CAAA;CAAE,CAAC;AA0BjC,QAAA,MAAM,KAAK,mDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/badge/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Badge } from './badge.svelte';
+export { badgeVariants, type BadgeProps, type BadgeVariant } from './badge.svelte';
+export { default as BadgeDot } from './badge-dot.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/badge/index.js

@@ -0,0 +1,3 @@
+export { default as Badge } from './badge.svelte';
+export { badgeVariants } from './badge.svelte';
+export { default as BadgeDot } from './badge-dot.svelte';

package/dist/components/bottom-navigation/BottomNavigation.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { Component } from 'svelte';
+  import type { IconProps } from '@lucide/svelte';
+  import { cn } from '../../utils';
+
+  let {
+    items,
+    active,
+    class: className
+  }: {
+    items: {
+      label: string;
+      icon: Component<IconProps>;
+      href: string;
+      badge?: string | number;
+    }[];
+    active?: string;
+    class?: string;
+  } = $props();
+</script>
+
+<!-- One UI bottom navigation: text-only tabs (icon + label), max 5, no swipe. -->
+<nav
+  aria-label="Primary"
+  class={cn(
+    'bg-card/95 border-border reduce-transparency:bg-card reduce-transparency:backdrop-blur-none flex h-14 w-full items-center border-t backdrop-blur',
+    className
+  )}
+>
+  <ul class="flex w-full items-center justify-around">
+    {#each items as item (item.label)}
+      {@const current = active === item.href}
+      <li>
+        <a
+          href={item.href}
+          aria-current={current ? 'page' : undefined}
+          class={cn(
+            'focus-visible:ring-ring/50 flex flex-col items-center gap-0.5 px-3 py-1 text-[10px] outline-none focus-visible:ring-[3px]',
+            current ? 'text-foreground' : 'text-muted-foreground'
+          )}
+        >
+          <span class="relative">
+            <item.icon />
+            {#if item.badge !== undefined}
+              <span
+                class="bg-primary text-primary-foreground absolute top-0 right-0 flex min-h-[14px] min-w-[14px] translate-x-1 -translate-y-1 items-center justify-center rounded-full px-1 text-[9px] font-bold"
+                >{item.badge}</span
+              >
+            {/if}
+          </span>
+          <span>{item.label}</span>
+        </a>
+      </li>
+    {/each}
+  </ul>
+</nav>

package/dist/components/bottom-navigation/BottomNavigation.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Component } from 'svelte';
+import type { IconProps } from '@lucide/svelte';
+type $$ComponentProps = {
+    items: {
+        label: string;
+        icon: Component<IconProps>;
+        href: string;
+        badge?: string | number;
+    }[];
+    active?: string;
+    class?: string;
+};
+declare const BottomNavigation: Component<$$ComponentProps, {}, "">;
+type BottomNavigation = ReturnType<typeof BottomNavigation>;
+export default BottomNavigation;
+//# sourceMappingURL=BottomNavigation.svelte.d.ts.map