tera-system-ui 0.1.76 → 0.2.2

package/dist/tokens/index.js

@@ -0,0 +1,122 @@
+/**
+ * Token map — typed `var()` references to the design-token contract.
+ *
+ * This is the cross-app contract that stays shared at every divergence rung.
+ * Use it for inline styles, programmatic config, or anywhere a Tailwind utility
+ * class isn't available; recipes generally reference tokens through utilities
+ * (e.g. `bg-surface`, `text-text-primary`) instead.
+ *
+ *   import { token } from 'tera-system-ui/tokens';
+ *   <div style:background={token.color.surfaceRaised} />
+ *
+ * `componentVars` lists the per-component override hooks (the "restyle
+ * internals" rung). Set them in a theme/app stylesheet to retune one
+ * component without touching markup, e.g. `--tera-button-radius: 16px`.
+ */
+const cssVar = (name) => `var(${name})`;
+export const token = {
+    color: {
+        // Surfaces (by elevation)
+        surface: cssVar("--color-surface"),
+        surfaceRaised: cssVar("--color-surface-raised"),
+        surfaceSunken: cssVar("--color-surface-sunken"),
+        surfaceHover: cssVar("--color-surface-hover"),
+        surfaceControl: cssVar("--color-surface-control"),
+        // Borders
+        borderDefault: cssVar("--color-border-default"),
+        borderStrong: cssVar("--color-border-strong"),
+        // Text (prominence)
+        textPrimary: cssVar("--color-text-primary"),
+        textSecondary: cssVar("--color-text-secondary"),
+        textTertiary: cssVar("--color-text-tertiary"),
+        textDisabled: cssVar("--color-text-disabled"),
+        // Interactive (primary action)
+        interactive: cssVar("--color-interactive"),
+        interactiveHover: cssVar("--color-interactive-hover"),
+        interactiveActive: cssVar("--color-interactive-active"),
+        interactiveSubtle: cssVar("--color-interactive-subtle"),
+        interactiveBorder: cssVar("--color-interactive-border"),
+        interactiveText: cssVar("--color-interactive-text"),
+        interactiveOn: cssVar("--color-interactive-on"),
+        overlay: cssVar("--color-overlay"),
+        // Status (default rung; subtle/muted/border/hover/active/text also exist)
+        error: cssVar("--color-error-default"),
+        warning: cssVar("--color-warning-default"),
+        success: cssVar("--color-success-default"),
+        information: cssVar("--color-information-default"),
+        // Brand
+        brand: cssVar("--color-brand-500"),
+    },
+    radius: {
+        sm: cssVar("--tera-radius-sm"),
+        base: cssVar("--tera-radius-base"),
+        lg: cssVar("--tera-radius-lg"),
+        xl: cssVar("--tera-radius-xl"),
+        container: cssVar("--border-radius-container"),
+    },
+    duration: {
+        micro: cssVar("--tera-duration-micro"),
+        fast: cssVar("--tera-duration-fast"),
+        base: cssVar("--tera-duration-base"),
+        slow: cssVar("--tera-duration-slow"),
+    },
+    easing: {
+        ui: cssVar("--ease-ui"),
+        spring: cssVar("--ease-spring"),
+        out: cssVar("--ease-out"),
+        inOut: cssVar("--ease-in-out"),
+    },
+    shadow: {
+        sm: cssVar("--shadow-sm"),
+        md: cssVar("--shadow-md"),
+        lg: cssVar("--shadow-lg"),
+        glow: cssVar("--shadow-glow"),
+        focus: cssVar("--shadow-focus"),
+    },
+    font: {
+        sans: cssVar("--font-sans"),
+        mono: cssVar("--font-mono"),
+        display: cssVar("--font-display"),
+    },
+};
+/**
+ * Per-component override hooks — the raw CSS custom-property names. Set these
+ * (not the values above) to restyle a single component's internals. Each
+ * defaults to a global axis token in tera-ui-base.css, so unset = base look.
+ */
+export const componentVars = {
+    button: {
+        radius: "--tera-button-radius",
+        fontWeight: "--tera-button-font-weight",
+        activeScale: "--tera-button-active-scale",
+        hoverLift: "--tera-button-hover-lift",
+    },
+    input: { radius: "--tera-input-radius" },
+    select: { radius: "--tera-select-radius", contentRadius: "--tera-select-content-radius" },
+    textArea: { radius: "--tera-textarea-radius" },
+    card: { radius: "--tera-card-radius" },
+    badge: { radius: "--tera-badge-radius" },
+    checkbox: { radius: "--tera-checkbox-radius" },
+    switch: { radius: "--tera-switch-radius" },
+    accordion: {
+        triggerPy: "--tera-accordion-trigger-py",
+        triggerWeight: "--tera-accordion-trigger-weight",
+        contentPb: "--tera-accordion-content-pb",
+    },
+    dialog: { radius: "--tera-dialog-radius" },
+    dropdownMenu: { radius: "--tera-dropdown-radius" },
+    popover: { radius: "--tera-popover-radius" },
+    tooltip: { radius: "--tera-tooltip-radius" },
+    drawer: { radius: "--tera-drawer-radius" },
+    slider: { radius: "--tera-slider-radius" },
+    alert: { radius: "--tera-alert-radius" },
+    combobox: { radius: "--tera-combobox-radius", contentRadius: "--tera-combobox-content-radius" },
+    tabs: { radius: "--tera-tabs-radius" },
+    avatar: { radius: "--tera-avatar-radius" },
+    table: { radius: "--tera-table-radius" },
+    command: { radius: "--tera-command-radius" },
+    skeleton: { radius: "--tera-skeleton-radius" },
+    dateRangePicker: { radius: "--tera-date-range-picker-radius", panelRadius: "--tera-date-range-picker-panel-radius" },
+    marketing: { featureCardRadius: "--tera-feature-card-radius", pricingCardRadius: "--tera-pricing-card-radius", testimonialCardRadius: "--tera-testimonial-card-radius" },
+    ai: { promptRadius: "--tera-ai-prompt-radius" },
+};

package/dist/types/index.d.ts

@@ -1,25 +1,20 @@
-export type { AccordionProps, AccordionItemProps, AccordionContentProps, AccordionTriggerProps } from '../components/accordion/Accordion.js';
-export type { AvatarProps } from '../components/avatar/Avatar.js';
-export type { BrandLogoProps } from '../components/brand-logo/BrandLogo.js';
-export type { ButtonProps } from '../components/button/Button.js';
-export type { CheckboxProps } from '../components/checkbox/Checkbox.js';
-export type { ComboboxProps } from '../components/combobox/Combobox.js';
-export type { DialogProps, DialogPropsAstro } from '../components/dialog/Dialog.js';
-export type { DropdownMenuProps, DropdownMenuItemProps, DropdownMenuGroupProps, DropdownMenuHeaderProps, DropdownMenuSeparatorProps } from '../components/dropdown-menu/DropdownMenu.js';
-export type { HeaderProps } from '../components/header/Header.js';
-export type { InputProps } from '../components/input/Input.js';
-export type { LabelProps } from '../components/label/Label.js';
-export type { LanguagePickerButtonProps } from '../components/language-picker-button/LanguagePickerButton.js';
-export type { LightDarkToggleProps } from '../components/light-dark-toggle/LightDarkToggle.js';
-export type { PopoverProps } from '../components/popover/Popover.js';
-export type { PopoverResponsiveProps } from '../components/popover-responsive/PopoverResponsive.js';
-export type { SelectProps } from '../components/select/Select.js';
-export type { SideNavigationProps, SideNavigationItem } from '../components/side-navigation/SideNavigation.js';
-export type { SliderProps } from '../components/slider/Slider.js';
-export type { StarRatingProps } from '../components/star-rating/StarRating.js';
-export type { SwitchProps } from '../components/switch/Switch.js';
-export type { TabsProps, TabsListProps, TabsItemProps, TabsContentProps } from '../components/tabs/Tabs.svelte.js';
-export type { TeraUiContextProps, TeraUiContext } from '../components/tera-ui-context/TeraUiContext.js';
-export type { TextAreaProps, AutoSizeConfig } from '../components/text-area/TextArea.js';
-export type { UserAvatarWithMenuProps } from '../components/user-avatar-with-menu/UserAvatarWithMenu.js';
+export type { AccordionProps, AccordionItemProps, AccordionContentProps, AccordionTriggerProps } from '../components/accordion/Accordion.recipe.js';
+export type { AvatarProps } from '../components/avatar/Avatar.recipe.js';
+export type { BottomSheetProps } from '../components/bottom-sheet/BottomSheet.recipe.js';
+export type { BottomSheetConfig, SheetStackItem } from '../components/bottom-sheet/bottomSheetStore.svelte.js';
+export type { ButtonProps, ButtonRecipeProps } from '../components/button/Button.recipe.js';
+export type { CheckboxProps } from '../components/checkbox/Checkbox.recipe.js';
+export type { ComboboxProps } from '../components/combobox/Combobox.recipe.js';
+export type { DialogProps, DialogPropsAstro } from '../components/dialog/Dialog.recipe.js';
+export type { DropdownMenuProps, DropdownMenuItemProps, DropdownMenuGroupProps, DropdownMenuHeaderProps, DropdownMenuSeparatorProps } from '../components/dropdown-menu/DropdownMenu.recipe.js';
+export type { InputProps } from '../components/input/Input.recipe.js';
+export type { LabelProps } from '../components/label/Label.recipe.js';
+export type { PopoverProps } from '../components/popover/Popover.recipe.js';
+export type { PopoverResponsiveProps } from '../components/popover-responsive/PopoverResponsive.recipe.js';
+export type { SelectProps } from '../components/select/Select.recipe.js';
+export type { SliderProps } from '../components/slider/Slider.recipe.js';
+export type { StarRatingProps } from '../components/star-rating/StarRating.recipe.js';
+export type { SwitchProps } from '../components/switch/Switch.recipe.js';
+export type { TabsProps, TabsListProps, TabsItemProps, TabsContentProps } from '../components/tabs/Tabs.recipe.js';
+export type { TextAreaProps, AutoSizeConfig } from '../components/text-area/TextArea.recipe.js';
 export type { UserData, JwtToken } from './user-data.js';

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "tera-system-ui",
-  "version": "0.1.76",
+  "version": "0.2.2",
   "scripts": {
     "dev": "vite dev",
-    "build": "npm run customPrepublish && npm run generate-index && npm run generate-llms && vite build && npm run package && npm run copy-docs && npm run copy-llms && npm run postpublish",
+    "build": "npm run customPrepublish && npm run generate-index && npm run generate-registry && npm run generate-llms && vite build && npm run package && npm run copy-docs && npm run copy-llms && npm run postpublish",
     "copy-docs": "node ./scripts/copy-docs.js",
     "generate-llms": "node ./scripts/generate-llms.js",
     "copy-llms": "node ./scripts/copy-llms.js",
@@ -16,16 +16,25 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "lang-compile": "paraglide-js compile --project src/lib/tera-i18n/projects/tera-system-ui/project.inlang --outdir ./src/lib/paraglide",
     "generate-index": "node ./scripts/generate-ts-index.js",
-    "fix-icon-imports": "node ./dev-tools/fix-icon-import/fix-import-icon-script.ts"
+    "generate-registry": "node ./scripts/generate-registry.mjs",
+    "fix-icon-imports": "node ./dev-tools/fix-icon-import/fix-import-icon-script.ts",
+    "test": "npm run test:e2e",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:report": "playwright show-report",
+    "test:visual": "playwright test bottom-sheet.visual",
+    "test:visual:update": "playwright test bottom-sheet.visual --update-snapshots"
   },
   "bin": {
     "ui": "./scripts/add-component-template.js",
-    "gen": "./scripts/generate-ts-index.js"
+    "gen": "./scripts/generate-ts-index.js",
+    "tera-ui": "./scripts/tera-ui.mjs"
   },
   "files": [
     "dist",
+    "registry",
+    "scripts/tera-ui.mjs",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
@@ -49,15 +58,14 @@
       "types": "./dist/utils/index.d.ts",
       "default": "./dist/utils/index.js"
     },
-    "./i18n": {
-      "types": "./dist/i18n/index.d.ts",
-      "svelte": "./dist/i18n/index.js",
-      "default": "./dist/i18n/index.js"
+    "./recipes": {
+      "types": "./dist/recipes/index.d.ts",
+      "svelte": "./dist/recipes/index.js",
+      "default": "./dist/recipes/index.js"
     },
-    "./icons": {
-      "types": "./dist/components/icons/index.d.ts",
-      "svelte": "./dist/components/icons/index.js",
-      "default": "./dist/components/icons/index.js"
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "default": "./dist/tokens/index.js"
     },
     "./accordion": {
       "types": "./dist/components/accordion/index.d.ts",
@@ -69,10 +77,10 @@
       "svelte": "./dist/components/avatar/index.js",
       "default": "./dist/components/avatar/index.js"
     },
-    "./brand-logo": {
-      "types": "./dist/components/brand-logo/index.d.ts",
-      "svelte": "./dist/components/brand-logo/index.js",
-      "default": "./dist/components/brand-logo/index.js"
+    "./bottom-sheet": {
+      "types": "./dist/components/bottom-sheet/index.d.ts",
+      "svelte": "./dist/components/bottom-sheet/index.js",
+      "default": "./dist/components/bottom-sheet/index.js"
     },
     "./button": {
       "types": "./dist/components/button/index.d.ts",
@@ -104,11 +112,6 @@
       "svelte": "./dist/components/dropdown-menu/index.js",
       "default": "./dist/components/dropdown-menu/index.js"
     },
-    "./header": {
-      "types": "./dist/components/header/index.d.ts",
-      "svelte": "./dist/components/header/index.js",
-      "default": "./dist/components/header/index.js"
-    },
     "./input": {
       "types": "./dist/components/input/index.d.ts",
       "svelte": "./dist/components/input/index.js",
@@ -119,16 +122,6 @@
       "svelte": "./dist/components/label/index.js",
       "default": "./dist/components/label/index.js"
     },
-    "./language-picker-button": {
-      "types": "./dist/components/language-picker-button/index.d.ts",
-      "svelte": "./dist/components/language-picker-button/index.js",
-      "default": "./dist/components/language-picker-button/index.js"
-    },
-    "./light-dark-toggle": {
-      "types": "./dist/components/light-dark-toggle/index.d.ts",
-      "svelte": "./dist/components/light-dark-toggle/index.js",
-      "default": "./dist/components/light-dark-toggle/index.js"
-    },
     "./popover": {
       "types": "./dist/components/popover/index.d.ts",
       "svelte": "./dist/components/popover/index.js",
@@ -144,11 +137,6 @@
       "svelte": "./dist/components/select/index.js",
       "default": "./dist/components/select/index.js"
     },
-    "./side-navigation": {
-      "types": "./dist/components/side-navigation/index.d.ts",
-      "svelte": "./dist/components/side-navigation/index.js",
-      "default": "./dist/components/side-navigation/index.js"
-    },
     "./slider": {
       "types": "./dist/components/slider/index.d.ts",
       "svelte": "./dist/components/slider/index.js",
@@ -169,28 +157,21 @@
       "svelte": "./dist/components/tabs/index.js",
       "default": "./dist/components/tabs/index.js"
     },
-    "./tera-ui-context": {
-      "types": "./dist/components/tera-ui-context/index.d.ts",
-      "svelte": "./dist/components/tera-ui-context/index.js",
-      "default": "./dist/components/tera-ui-context/index.js"
-    },
     "./text-area": {
       "types": "./dist/components/text-area/index.d.ts",
       "svelte": "./dist/components/text-area/index.js",
       "default": "./dist/components/text-area/index.js"
     },
-    "./user-avatar-with-menu": {
-      "types": "./dist/components/user-avatar-with-menu/index.d.ts",
-      "svelte": "./dist/components/user-avatar-with-menu/index.js",
-      "default": "./dist/components/user-avatar-with-menu/index.js"
-    },
-    "./themes/tera-ui-base": "./dist/themes/tera-ui-base.css"
+    "./themes/tera-ui-base": "./dist/themes/tera-ui-base.css",
+    "./themes/theme-professional": "./dist/themes/theme-professional.css",
+    "./themes/theme-cv-builder": "./dist/themes/theme-cv-builder.css"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
+    "@playwright/test": "^1.61.1",
     "@storybook/addon-docs": "^10.4.0",
     "@storybook/addon-links": "^10.4.0",
     "@storybook/addon-svelte-csf": "^5.1.2",
@@ -213,11 +194,10 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
+    "@fontsource-variable/geist-mono": "^5.2.8",
     "@fontsource-variable/inter": "^5.2.8",
     "@fontsource-variable/open-sans": "^5.2.7",
     "@fontsource-variable/roboto-mono": "^5.2.9",
-    "@fontsource/geist-mono": "^5.2.7",
-    "@inlang/paraglide-js": "2.18.0",
     "@tabler/icons-svelte": "^3.44.0",
     "@tailwindcss/language-server": "^0.14.29",
     "@tailwindcss/postcss": "^4.3.0",

package/registry/accordion.json

@@ -0,0 +1,65 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "accordion",
+  "type": "registry:component",
+  "description": "Collapsible accordion (single/multi-open).",
+  "recipe": "src/lib/components/accordion/Accordion.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/accordion/Accordion.recipe.ts",
+      "target": "Accordion.recipe.ts",
+      "type": "recipe",
+      "content": "/**\n * Accordion recipe — the canonical styled layer for the base design language.\n *\n * Built on the BitsUI Accordion primitive (root / item / header / trigger /\n * content) with full keyboard navigation. The accordion is a multi-part\n * component, so the recipe is SLOTTED: each visible part gets a named slot\n * (root, item, header, trigger, chevron, content, body) that an app can target\n * independently when extending with `tv({ extend: accordionRecipe, ... })`.\n *\n * Restyle-internals (the lighter rung): the per-component CSS vars below\n * (--tera-accordion-*) let a theme/app retune the trigger's vertical rhythm,\n * weight and the content's bottom padding with no code change; they default to\n * global axis tokens in tera-ui-base.css. See docs/ARCHITECTURE.md for the\n * worked extend example (kept out of this JSDoc so the llms doc generator\n * doesn't grep its tokens).\n */\nimport {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\nimport type {HTMLAttributes, HTMLButtonAttributes} from \"svelte/elements\";\n\nexport const accordionRecipe = tv({\n    slots: {\n        root: '',\n        item: 'border-b',\n        header: 'flex',\n        trigger: 'flex flex-1 items-center justify-between py-[var(--tera-accordion-trigger-py,1rem)] [font-weight:var(--tera-accordion-trigger-weight,500)] transition-all [&[data-state=open]>svg]:rotate-180',\n        chevron: 'size-4 shrink-0 transition-transform ease-ui duration-[var(--tera-duration-fast)]',\n        content: 'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm',\n        body: 'pb-[var(--tera-accordion-content-pb,1rem)]',\n    },\n});\n\nexport type AccordionRecipeProps = VariantProps<typeof accordionRecipe>;\n\nexport interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>, AccordionRecipeProps {\n    children?: Snippet;\n    /** Additional CSS classes for the root element. */\n    class?: string;\n    /** Whether only one item can be open at a time ('single') or many ('multiple'). */\n    type: 'multiple' | 'single';\n    /** The currently open item value(s). Bindable. */\n    value: string | string[];\n    /** Called when the open item(s) change. */\n    onchange?: (value: string | string[]) => void;\n    /** Use controlled mode — manage value externally and pass it back via onchange. */\n    controlledValue?: boolean;\n    /** Whether the entire accordion is disabled. */\n    disabled?: boolean;\n    /** Whether keyboard navigation wraps around at the first/last item. */\n    loop?: boolean;\n    /** Layout orientation — affects arrow-key navigation direction. */\n    orientation?: 'horizontal' | 'vertical';\n    /** Bindable reference to the root element. */\n    ref?: HTMLDivElement | null;\n}\n\nexport interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {\n    /** Unique identifier for this item — matched against the root `value`. */\n    value: string;\n    /** Prevents the user from interacting with this specific item. */\n    disabled?: boolean;\n    ref?: HTMLDivElement | null;\n    children?: Snippet;\n}\n\nexport interface AccordionTriggerProps extends HTMLButtonAttributes {\n    children?: Snippet;\n    /** Replace the default chevron with custom markup (structural seam). */\n    chevronIcon?: Snippet;\n    ref?: HTMLButtonElement | null;\n}\n\nexport interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {\n    children?: Snippet;\n    /**\n     * Keep the content mounted in the DOM even when the item is collapsed.\n     * Useful for Svelte transitions or preserving internal component state.\n     */\n    forceMount?: boolean;\n    ref?: HTMLDivElement | null;\n}\n"
+    },
+    {
+      "path": "src/lib/components/accordion/components/Accordion.svelte",
+      "target": "components/Accordion.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\r\n    import {Accordion as AccordionPrimitive} from \"bits-ui\";\r\n    import {accordionRecipe} from \"../Accordion.recipe\";\r\n\r\n    let {\r\n        ref = $bindable(null),\r\n        value = $bindable(),\r\n        class: className,\r\n        ...restProps\r\n    }: AccordionPrimitive.RootProps = $props();\r\n\r\n    const r = accordionRecipe();\r\n</script>\r\n\r\n<AccordionPrimitive.Root\r\n        bind:ref\r\n        bind:value={value as never}\r\n        data-slot=\"accordion\"\r\n        class={r.root({ class: className })}\r\n        {...restProps}\r\n/>"
+    },
+    {
+      "path": "src/lib/components/accordion/components/AccordionContent.svelte",
+      "target": "components/AccordionContent.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\r\n    import { Accordion as AccordionPrimitive, type WithoutChild } from \"bits-ui\";\r\n    import {accordionRecipe} from \"../Accordion.recipe\";\r\n\r\n    let {\r\n        ref = $bindable(null),\r\n        class: className,\r\n        children,\r\n        ...restProps\r\n    }: WithoutChild<AccordionPrimitive.ContentProps> = $props();\r\n\r\n    const r = accordionRecipe();\r\n</script>\r\n\r\n<AccordionPrimitive.Content\r\n        bind:ref\r\n        class={r.content({ class: className })}\r\n        {...restProps}\r\n>\r\n    <div class={r.body()}>{@render children?.()}</div>\r\n</AccordionPrimitive.Content>"
+    },
+    {
+      "path": "src/lib/components/accordion/components/AccordionItem.svelte",
+      "target": "components/AccordionItem.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\r\n    import { Accordion as AccordionPrimitive } from \"bits-ui\";\r\n    import {accordionRecipe} from \"../Accordion.recipe\";\r\n\r\n    let {\r\n        ref = $bindable(null),\r\n        class: className,\r\n        ...restProps\r\n    }: AccordionPrimitive.ItemProps = $props();\r\n\r\n    const r = accordionRecipe();\r\n</script>\r\n\r\n<AccordionPrimitive.Item bind:ref class={r.item({ class: className })} {...restProps} />"
+    },
+    {
+      "path": "src/lib/components/accordion/components/AccordionTrigger.svelte",
+      "target": "components/AccordionTrigger.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\r\n    import { Accordion as AccordionPrimitive, type WithoutChild } from \"bits-ui\";\r\n    import {IconChevronDown} from \"$lib/internal/icons\";\r\n    import {accordionRecipe} from \"../Accordion.recipe\";\r\n    import type {Snippet} from \"svelte\";\r\n\r\n    let {\r\n        ref = $bindable(null),\r\n        class: className,\r\n        level = 3,\r\n        children,\r\n        chevronIcon,\r\n        ...restProps\r\n    }: WithoutChild<AccordionPrimitive.TriggerProps> & {\r\n        level?: AccordionPrimitive.HeaderProps[\"level\"];\r\n        /** Replace the default chevron with custom markup (structural seam). */\r\n        chevronIcon?: Snippet;\r\n    } = $props();\r\n\r\n    const r = accordionRecipe();\r\n</script>\r\n\r\n<AccordionPrimitive.Header {level} class={r.header()}>\r\n    <AccordionPrimitive.Trigger\r\n            bind:ref\r\n            class={r.trigger({ class: className })}\r\n            {...restProps}\r\n    >\r\n        {@render children?.()}\r\n        {#if chevronIcon}\r\n            {@render chevronIcon()}\r\n        {:else}\r\n            <IconChevronDown class={r.chevron()} />\r\n        {/if}\r\n    </AccordionPrimitive.Trigger>\r\n</AccordionPrimitive.Header>"
+    },
+    {
+      "path": "src/lib/components/accordion/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Accordion} from \"./components/Accordion.svelte\";\nexport {default as AccordionItem} from \"./components/AccordionItem.svelte\";\nexport {default as AccordionContent} from \"./components/AccordionContent.svelte\";\nexport {default as AccordionTrigger} from \"./components/AccordionTrigger.svelte\";\n\nexport {accordionRecipe} from \"./Accordion.recipe\";\nexport type {\n    AccordionProps,\n    AccordionItemProps,\n    AccordionContentProps,\n    AccordionTriggerProps,\n    AccordionRecipeProps\n} from './Accordion.recipe'\n"
+    }
+  ],
+  "dependencies": [
+    "bits-ui",
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": true,
+    "hooks": false
+  },
+  "exports": [
+    "Accordion",
+    "AccordionItem",
+    "AccordionContent",
+    "AccordionTrigger",
+    "accordionRecipe"
+  ]
+}

package/registry/alert.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "alert",
+  "type": "registry:component",
+  "description": "Contextual alert banner for status messages.",
+  "recipe": "src/lib/components/alert/Alert.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/alert/Alert.recipe.ts",
+      "target": "Alert.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\n\n/**\n * Alert recipe — the canonical styled layer for the base design language.\n *\n * Multi-part inline banner, so it is slotted: `root` (the banner wrapper, where\n * the variant bg/border lives), `icon` (the leading status glyph), `title`,\n * `description` (string/children body), and `close` (the dismiss button). The\n * single `variant` axis (info/success/warning/error) drives the background,\n * left border, and the icon/text colors across every slot. An app owns its look\n * by extending this recipe with `tv({ extend: alertRecipe, ... })` in typed\n * code. See docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc\n * so the llms doc generator doesn't grep its tokens).\n *\n * Restyle-internals (the lighter rung): the per-component CSS var below\n * (--tera-alert-radius) lets a theme/app retune corner radius with no code\n * change; it defaults to the global radius axis token.\n */\nexport const alertRecipe = tv({\n    slots: {\n        // Full border + tint, never a side-stripe. Semantic status tokens so the\n        // banner adapts correctly to dark mode. A colored icon chip carries the\n        // status; title/body stay high-contrast neutral for legibility.\n        root: 'rounded-[var(--tera-alert-radius,var(--border-radius-container))] p-4 flex gap-3 border',\n        icon: 'shrink-0 grid place-items-center size-5 rounded-full text-[11px] font-bold leading-none mt-px',\n        body: 'flex-1 min-w-0',\n        title: 'font-semibold text-sm text-text-primary mb-0.5',\n        description: 'text-sm text-text-secondary',\n        close: 'shrink-0 text-text-tertiary hover:text-text-secondary transition-colors',\n    },\n    variants: {\n        variant: {\n            info: {\n                root: 'bg-information-subtle border-information-border',\n                icon: 'bg-information-default/15 text-information-text',\n            },\n            success: {\n                root: 'bg-success-subtle border-success-border',\n                icon: 'bg-success-default/15 text-success-text',\n            },\n            warning: {\n                root: 'bg-warning-subtle border-warning-border',\n                icon: 'bg-warning-default/15 text-warning-text',\n            },\n            error: {\n                root: 'bg-error-subtle border-error-border',\n                icon: 'bg-error-default/15 text-error-text',\n            },\n        },\n    },\n    defaultVariants: {\n        variant: 'info',\n    },\n});\n\nexport type AlertRecipeProps = VariantProps<typeof alertRecipe>;\n\nexport type AlertVariant = NonNullable<AlertRecipeProps['variant']>;\n\nexport interface AlertProps extends AlertRecipeProps {\n    title?: string;\n    description?: string | Snippet;\n    closable?: boolean;\n    /** Show the leading status icon (default true). */\n    icon?: boolean;\n    children?: Snippet;\n    class?: string;\n    /** Replace the default status glyph with custom markup (structural seam). */\n    iconContent?: Snippet;\n    /** Replace the default close (X) icon with custom markup (structural seam). */\n    closeIcon?: Snippet;\n    [key: string]: unknown;\n}\n"
+    },
+    {
+      "path": "src/lib/components/alert/Alert.svelte",
+      "target": "Alert.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {type AlertProps, type AlertVariant, alertRecipe} from './Alert.recipe';\n\n    let {\n        variant = 'info',\n        title,\n        description,\n        closable,\n        icon = true,\n        children,\n        iconContent,\n        closeIcon,\n        class: className = '',\n        ...props\n    }: AlertProps = $props();\n\n    let visible = $state(true);\n\n    const glyphs: Record<AlertVariant, string> = {\n        info: 'ℹ',\n        success: '✓',\n        warning: '⚠',\n        error: '✕',\n    };\n\n    const r = $derived(alertRecipe({variant}));\n</script>\n\n{#if visible}\n    <div\n        role=\"alert\"\n        class={r.root({class: className})}\n        {...props}\n    >\n        {#if icon}\n            <span class={r.icon()}>\n                {#if iconContent}\n                    {@render iconContent()}\n                {:else}\n                    {glyphs[variant]}\n                {/if}\n            </span>\n        {/if}\n        <div class={r.body()}>\n            {#if title}\n                <p class={r.title()}>{title}</p>\n            {/if}\n            {#if typeof description === 'string'}\n                <p class={r.description()}>{description}</p>\n            {:else if description}\n                {@render description()}\n            {:else if children}\n                <div class={r.description()}>{@render children()}</div>\n            {/if}\n        </div>\n        {#if closable}\n            <button\n                type=\"button\"\n                class={r.close()}\n                onclick={() => visible = false}\n                aria-label=\"Close\"\n            >\n                {#if closeIcon}\n                    {@render closeIcon()}\n                {:else}\n                    <svg class=\"size-4\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n                        <path d=\"M4 4l8 8M12 4l-8 8\"/>\n                    </svg>\n                {/if}\n            </button>\n        {/if}\n    </div>\n{/if}\n"
+    },
+    {
+      "path": "src/lib/components/alert/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Alert} from './Alert.svelte'\nexport {alertRecipe} from './Alert.recipe'\nexport type {AlertRecipeProps, AlertProps, AlertVariant} from './Alert.recipe'\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "Alert",
+    "alertRecipe"
+  ]
+}

package/registry/avatar.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "avatar",
+  "type": "registry:component",
+  "description": "User avatar with image + initials fallback.",
+  "recipe": "src/lib/components/avatar/Avatar.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/avatar/Avatar.recipe.ts",
+      "target": "Avatar.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\nimport type {HTMLAttributes} from \"svelte/elements\";\n\n/**\n * Avatar recipe — the canonical styled layer for the base design language.\n *\n * Two stylable parts: `root` (the circular frame holding the image or initials\n * fallback) and `ring` (the overlay border drawn on top). An app owns its look\n * by extending this recipe with `tv({ extend: avatarRecipe, ... })` in typed\n * code — sizing and the fallback behavior are inherited. See\n * docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the\n * llms doc generator doesn't grep its variant tokens).\n *\n * Restyle-internals (the lighter rung): the per-component CSS var below\n * (--tera-avatar-radius) lets a theme/app retune the corner radius with no code\n * change; it defaults to a full circle (9999px).\n */\nexport const avatarRecipe = tv({\n    slots: {\n        root: 'relative rounded-[var(--tera-avatar-radius,9999px)] object-cover bg-surface-sunken text-text-secondary border border-border-strong shadow-xs select-none grid place-content-center leading-none font-mono font-semibold tracking-tight overflow-clip',\n        ring: 'pointer-events-none absolute inset-[0px] border-[2px] border-transparent rounded-[var(--tera-avatar-radius,9999px)]',\n    },\n    variants: {\n        size: {\n            sm: {root: 'size-8 text-xs', ring: 'border-[2px]'},\n            md: {root: 'size-10 text-sm', ring: 'border-[2px]'},\n            lg: {root: 'size-12 text-base', ring: 'border-[3px]'},\n            xl: {root: 'size-16 text-xl', ring: 'border-[3px]'},\n        },\n        border: {\n            true: {root: 'text-text-primary', ring: 'border-border-strong'},\n            false: {},\n        },\n    },\n    defaultVariants: {\n        size: 'md',\n        border: true,\n    },\n});\n\nexport type AvatarRecipeProps = VariantProps<typeof avatarRecipe>;\n\nexport interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size'>, AvatarRecipeProps {\n    children?: Snippet;\n    class?: string;\n    alt?: string;\n    src?: string;\n    ref?: HTMLDivElement | null;\n}\n"
+    },
+    {
+      "path": "src/lib/components/avatar/Avatar.svelte",
+      "target": "Avatar.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {type AvatarProps, avatarRecipe} from \"./Avatar.recipe\";\n\n    let {\n        children,\n        alt = 'Avatar',\n        size = 'md',\n        src,\n        class: className,\n        border = true,\n        ref = $bindable(),\n        ...props\n    }: AvatarProps = $props();\n\n    let isError = $state()\n\n    function handleErrorImage() {\n        isError = true\n    }\n\n    let imgUrl = $derived(src)\n\n    let r = $derived(avatarRecipe({size, border}))\n</script>\n\n<div bind:this={ref}\n     class={r.root({class: className})} {...props}>\n    {#if imgUrl && !isError}\n        <img src={imgUrl} alt={alt} onerror={handleErrorImage} class=\"w-full h-full object-cover\"/>\n    {:else}\n        <span class=\"leading-none\">\n            {@render children?.()}\n        </span>\n    {/if}\n    <div class={r.ring({size, border})}>\n\n    </div>\n</div>\n"
+    },
+    {
+      "path": "src/lib/components/avatar/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Avatar} from './Avatar.svelte'\nexport {avatarRecipe} from './Avatar.recipe'\nexport type {AvatarProps, AvatarRecipeProps} from './Avatar.recipe'\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "Avatar",
+    "avatarRecipe"
+  ]
+}

package/registry/badge.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "badge",
+  "type": "registry:component",
+  "description": "Compact label for counts, status, or categories.",
+  "recipe": "src/lib/components/badge/Badge.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/badge/Badge.recipe.ts",
+      "target": "Badge.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\nimport type {HTMLAttributes} from \"svelte/elements\";\n\n/**\n * Badge recipe — the canonical styled layer for the base design language.\n *\n * Primary customization surface: an app owns its look by extending this recipe\n * with `tv({ extend: badgeRecipe, ... })` in typed code — base sizing and tones\n * are inherited; only the design language changes. See docs/ARCHITECTURE.md for\n * the worked example (kept out of this JSDoc so the llms doc generator doesn't\n * grep its variant tokens).\n *\n * Restyle-internals (the lighter rung): the per-component CSS var below\n * (--tera-badge-radius) lets a theme/app retune the corner radius with no code\n * change; it defaults to a global axis token in tera-ui-base.css.\n */\nexport const badgeRecipe = tv({\n    base: 'inline-flex items-center gap-1.5 rounded-[var(--tera-badge-radius,var(--tera-radius-sm))] font-mono font-medium uppercase whitespace-nowrap select-none shadow-xs transition-[colors,box-shadow] duration-[var(--tera-duration-fast)] ease-ui',\n    variants: {\n        variant: {\n            default:  'bg-surface-sunken text-text-secondary border border-border-strong',\n            primary:  'bg-interactive-subtle text-interactive-text border border-interactive-border',\n            success:  'bg-success-subtle text-success-text border border-success-border',\n            error:    'bg-error-subtle text-error-text border border-error-border',\n            warning:  'bg-warning-subtle text-warning-text border border-warning-border',\n            info:     'bg-information-subtle text-information-text border border-information-border',\n        },\n        size: {\n            sm: 'px-1.5 py-0.5 text-[10px] leading-none tracking-wide',\n            md: 'px-2 py-0.5 text-[11px] leading-none tracking-wider',\n        },\n    },\n    defaultVariants: {\n        variant: 'default',\n        size: 'md',\n    },\n});\n\nexport type BadgeRecipeProps = VariantProps<typeof badgeRecipe>;\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, BadgeRecipeProps {\n    children?: Snippet;\n    class?: string;\n    dot?: boolean;\n    closable?: boolean;\n    onclose?: () => void;\n    /** Replace the default leading dot indicator with custom markup (structural seam). */\n    dotIcon?: Snippet;\n    /** Replace the default close button icon with custom markup (structural seam). */\n    closeIcon?: Snippet;\n}\n"
+    },
+    {
+      "path": "src/lib/components/badge/Badge.svelte",
+      "target": "Badge.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {type BadgeProps, badgeRecipe} from './Badge.recipe';\n\n    let {\n        children,\n        class: className,\n        variant,\n        size,\n        dot,\n        closable,\n        onclose,\n        dotIcon,\n        closeIcon,\n        ...props\n    }: BadgeProps = $props();\n</script>\n\n<span class={badgeRecipe({ variant, size, class: className })} {...props}>\n    {#if dot}\n        {#if dotIcon}\n            {@render dotIcon()}\n        {:else}\n            <span class=\"size-1.5 rounded-[1px] bg-current\" aria-hidden=\"true\"></span>\n        {/if}\n    {/if}\n    {@render children?.()}\n    {#if closable}\n        <button\n            type=\"button\"\n            class=\"ml-0.5 hover:opacity-70 transition-opacity leading-none\"\n            onclick={onclose}\n            aria-label=\"Remove\"\n        >\n            {#if closeIcon}\n                {@render closeIcon()}\n            {:else}\n                <svg class=\"size-2.5\" viewBox=\"0 0 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n                    <path d=\"M2 2l6 6M8 2l-6 6\"/>\n                </svg>\n            {/if}\n        </button>\n    {/if}\n</span>\n"
+    },
+    {
+      "path": "src/lib/components/badge/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Badge} from './Badge.svelte'\nexport {badgeRecipe} from './Badge.recipe'\nexport type {BadgeProps, BadgeRecipeProps} from './Badge.recipe'\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "Badge",
+    "badgeRecipe"
+  ]
+}