tera-system-ui 0.1.75 → 0.2.1

package/dist/components/skeleton/Skeleton.recipe.js

@@ -0,0 +1,41 @@
+import { tv } from "tailwind-variants";
+/**
+ * Skeleton recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component: the recipe is slotted by role — root (the labelled
+ * loading region) / shape (circle, rect, and each line bar) / lines (the
+ * stacked-line wrapper). The `animate` variant swaps the shimmer animation for
+ * a flat surface fill; the `variant`/`tone` slots carry the per-shape radius.
+ *
+ * Primary customization surface: extend with `tv({ extend: skeletonRecipe, ... })`
+ * in typed code. Lighter rung: the per-component CSS var (--tera-skeleton-radius)
+ * lets a theme retune the rect corner radius with no code change; it defaults to
+ * the global base-radius token. See docs/ARCHITECTURE.md for worked examples
+ * (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
+ */
+export const skeletonRecipe = tv({
+    slots: {
+        root: '',
+        lines: 'flex flex-col gap-2',
+        circle: 'rounded-full',
+        rect: 'rounded-[var(--tera-skeleton-radius,var(--border-radius-base))]',
+        line: 'h-3 rounded-full',
+    },
+    variants: {
+        animate: {
+            true: {
+                circle: 'skeleton-shimmer',
+                rect: 'skeleton-shimmer',
+                line: 'skeleton-shimmer',
+            },
+            false: {
+                circle: 'bg-surface-hover',
+                rect: 'bg-surface-hover',
+                line: 'bg-surface-hover',
+            },
+        },
+    },
+    defaultVariants: {
+        animate: true,
+    },
+});

package/dist/components/skeleton/Skeleton.svelte

@@ -1,27 +1,28 @@
-<script lang="ts">"use strict";
+<script lang="ts">import { skeletonRecipe } from './Skeleton.recipe';
 let { variant = 'line', width, height, lines = 1, animate = true, class: className = '', } = $props();
+const styles = $derived(skeletonRecipe({ animate }));
 </script>
 
 <div
     aria-label="Loading..."
     aria-busy="true"
-    class={className}
+    class={styles.root({class: className})}
 >
     {#if variant === 'circle'}
         <div
-            class="rounded-full {animate ? 'skeleton-shimmer' : 'bg-surface-hover'}"
+            class={styles.circle()}
             style="width:{width ?? '48px'};height:{height ?? width ?? '48px'}"
         ></div>
     {:else if variant === 'rect'}
         <div
-            class="rounded {animate ? 'skeleton-shimmer' : 'bg-surface-hover'}"
+            class={styles.rect()}
             style="width:{width ?? '100%'};height:{height ?? '120px'}"
         ></div>
     {:else}
-        <div class="flex flex-col gap-2" style="width:{width ?? '100%'}">
+        <div class={styles.lines()} style="width:{width ?? '100%'}">
             {#each Array(lines) as _, i (i)}
                 <div
-                    class="h-3 rounded-full {animate ? 'skeleton-shimmer' : 'bg-surface-hover'}"
+                    class={styles.line()}
                     style={i === lines - 1 && lines > 1 ? 'width:70%' : 'width:100%'}
                 ></div>
             {/each}

package/dist/components/skeleton/Skeleton.svelte.d.ts

@@ -1,12 +1,4 @@
-type SkeletonVariant = 'line' | 'circle' | 'rect';
-type $$ComponentProps = {
-    variant?: SkeletonVariant;
-    width?: string;
-    height?: string;
-    lines?: number;
-    animate?: boolean;
-    class?: string;
-};
-declare const Skeleton: import("svelte").Component<$$ComponentProps, {}, "">;
+import { type SkeletonProps } from './Skeleton.recipe';
+declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "">;
 type Skeleton = ReturnType<typeof Skeleton>;
 export default Skeleton;

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

@@ -1 +1,3 @@
 export { default as Skeleton } from './Skeleton.svelte';
+export { skeletonRecipe } from './Skeleton.recipe';
+export type { SkeletonProps, SkeletonRecipeProps, SkeletonVariant } from './Skeleton.recipe';

package/dist/components/skeleton/index.js

@@ -1 +1,2 @@
 export { default as Skeleton } from './Skeleton.svelte';
+export { skeletonRecipe } from './Skeleton.recipe';

package/dist/components/slider/Slider.recipe.d.ts

@@ -0,0 +1,115 @@
+import { type VariantProps } from "tailwind-variants";
+/**
+ * Slider recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component (built on bits-ui Slider): the recipe is slotted by role
+ * — `root` (the Root wrapper / hit area), `track` (the rail), `range` (the
+ * filled portion), `thumb` (the draggable handle). Layout switches on the
+ * `orientation` variant (horizontal / vertical), and the `disabled` variant
+ * dims the whole control.
+ *
+ * Primary customization surface: extend with `tv({ extend: sliderRecipe, ... })`
+ * in typed code. Lighter rung: the per-component CSS var (--tera-slider-radius)
+ * lets a theme retune the thumb corner radius with no code change; it falls back
+ * inline to the prior pill shape. See docs/ARCHITECTURE.md for worked examples
+ * (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
+ */
+export declare const sliderRecipe: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+            track: string;
+            range: string;
+        };
+        vertical: {
+            root: string;
+            track: string;
+            range: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    track: string;
+    range: string;
+    thumb: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+            track: string;
+            range: string;
+        };
+        vertical: {
+            root: string;
+            track: string;
+            range: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    track: string;
+    range: string;
+    thumb: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+            track: string;
+            range: string;
+        };
+        vertical: {
+            root: string;
+            track: string;
+            range: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    track: string;
+    range: string;
+    thumb: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SliderRecipeProps = VariantProps<typeof sliderRecipe>;
+export interface SliderProps {
+    /** Additional CSS classes for the root element. */
+    class?: string;
+    /** Minimum value of the slider range. */
+    min?: number;
+    /** Maximum value of the slider range. */
+    max?: number;
+    /** Step interval between selectable values. */
+    step?: number;
+    /** Current value. Bindable. */
+    value?: number;
+    /** Prevents all interaction and dims the control. */
+    disabled?: boolean;
+    /**
+     * Layout orientation of the slider track and thumb.
+     * When 'vertical', the parent must have an explicit height.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /** Fires continuously as the thumb moves during drag. */
+    onchange?: (value: number) => void;
+    /**
+     * Fires once when the user finishes dragging and releases the thumb.
+     * Prefer this over `onchange` when the handler triggers expensive work.
+     */
+    onValueCommit?: (value: number) => void;
+    /** Bindable reference to the root span element. */
+    ref?: HTMLElement | null;
+}

package/dist/components/slider/Slider.recipe.js

@@ -0,0 +1,50 @@
+import { tv } from "tailwind-variants";
+/**
+ * Slider recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component (built on bits-ui Slider): the recipe is slotted by role
+ * — `root` (the Root wrapper / hit area), `track` (the rail), `range` (the
+ * filled portion), `thumb` (the draggable handle). Layout switches on the
+ * `orientation` variant (horizontal / vertical), and the `disabled` variant
+ * dims the whole control.
+ *
+ * Primary customization surface: extend with `tv({ extend: sliderRecipe, ... })`
+ * in typed code. Lighter rung: the per-component CSS var (--tera-slider-radius)
+ * lets a theme retune the thumb corner radius with no code change; it falls back
+ * inline to the prior pill shape. See docs/ARCHITECTURE.md for worked examples
+ * (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
+ */
+export const sliderRecipe = tv({
+    slots: {
+        root: 'relative flex touch-none select-none items-center',
+        track: `relative grow rounded-full bg-surface-sunken border border-border-strong
+                    shadow-[inset_0_1px_2px_rgba(15,23,42,0.18)] overflow-hidden`,
+        range: 'absolute bg-interactive rounded-full',
+        thumb: `block size-5 rounded-[var(--tera-slider-radius,9999px)] border-2 border-interactive bg-surface-control shadow-key outline-none
+                    transition-[box-shadow,transform,background-color] ease-spring duration-[var(--tera-duration-fast)]
+                    hover:scale-110 hover:shadow-focus
+                    focus-visible:scale-110 focus-visible:shadow-focus
+                    active:scale-95 active:bg-interactive-subtle
+                    data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:shadow-none`,
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                root: 'flex w-full py-2.5',
+                track: 'h-2 w-full',
+                range: 'h-full',
+            },
+            vertical: {
+                root: 'flex flex-col h-full px-2.5',
+                track: 'w-2 h-full',
+                range: 'w-full bottom-0',
+            },
+        },
+        disabled: {
+            true: { root: 'opacity-50 pointer-events-none' },
+        },
+    },
+    defaultVariants: {
+        orientation: 'horizontal',
+    },
+});

package/dist/components/slider/Slider.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { Slider as SliderPrimitive } from 'bits-ui';
+import { sliderRecipe } from './Slider.recipe';
 let { min = 0, max = 100, step = 1, value = $bindable(0), onchange, onValueCommit, disabled, orientation = 'horizontal', class: className = '', } = $props();
-const isVertical = $derived(orientation === 'vertical');
+const r = $derived(sliderRecipe({ orientation, disabled }));
 </script>
 
 <SliderPrimitive.Root
@@ -13,25 +14,18 @@ const isVertical = $derived(orientation === 'vertical');
     {step}
     {disabled}
     {orientation}
-    class="{isVertical
-        ? 'relative flex flex-col h-full touch-none select-none items-center px-2.5'
-        : 'relative flex w-full touch-none select-none items-center py-2.5'
-    } {disabled ? 'opacity-50 pointer-events-none' : ''} {className}"
+    class={r.root({class: className})}
 >
     {#snippet children({ thumbItems })}
         <!-- Track wrapper -->
-        <div class="{isVertical ? 'relative w-1.5 h-full grow rounded-full' : 'relative h-1.5 w-full grow rounded-full'} bg-neutral-token-4">
-            <SliderPrimitive.Range class="{isVertical ? 'absolute w-full bottom-0' : 'absolute h-full'} bg-interactive rounded-full" />
+        <div class={r.track()}>
+            <SliderPrimitive.Range class={r.range()} />
         </div>
 
         {#each thumbItems as { index } (index)}
             <SliderPrimitive.Thumb
                 {index}
-                class="block size-4 rounded-full border-2 border-interactive bg-surface-control shadow-sm outline-none
-                    transition-[box-shadow,transform] ease-ui duration-150
-                    hover:shadow-focus hover:scale-110
-                    focus-visible:shadow-focus focus-visible:scale-110
-                    data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+                class={r.thumb()}
             />
         {/each}
     {/snippet}

package/dist/components/slider/Slider.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SliderProps } from './Slider.js';
+import { type SliderProps } from './Slider.recipe';
 declare const Slider: import("svelte").Component<SliderProps, {}, "value">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

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

@@ -1,2 +1,4 @@
 export { default as Slider } from './Slider.svelte';
-export type { SliderProps } from './Slider';
+export type { SliderProps } from './Slider.recipe';
+export { sliderRecipe } from './Slider.recipe';
+export type { SliderRecipeProps } from './Slider.recipe';

package/dist/components/slider/index.js

@@ -1 +1,2 @@
 export { default as Slider } from './Slider.svelte';
+export { sliderRecipe } from './Slider.recipe';

package/dist/components/spinner/Spinner.recipe.d.ts

@@ -0,0 +1,60 @@
+import { type VariantProps } from "tailwind-variants";
+import type { SVGAttributes } from "svelte/elements";
+/**
+ * Spinner recipe — the canonical styled layer for the loading indicator.
+ *
+ * A single stylable part (the spinning `<svg>`), so this is a base-string
+ * recipe. The base carries the `animate-spin` rotation; the `size` and `color`
+ * variants are the typed extension surface. The spinner sizes its viewport and
+ * tints its stroke through SVG presentation attributes (numeric width/height and
+ * a CSS color), driven by the `sizeMap` / `colorMap` in the component — values a
+ * Tailwind utility can't express on an SVG element — so the variant classes
+ * themselves stay empty by design and the visual scale/tint is attribute-driven.
+ *
+ * Primary customization surface: an app owns its look by extending this recipe
+ * with `tv({ extend: spinnerRecipe, ... })` in typed code — the rotation is
+ * inherited; only the design language changes. See docs/ARCHITECTURE.md for the
+ * worked example (kept out of this JSDoc so the llms doc generator doesn't grep
+ * its variant tokens).
+ */
+export declare const spinnerRecipe: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    color: {
+        primary: string;
+        white: string;
+        current: string;
+    };
+}, undefined, "animate-spin", {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    color: {
+        primary: string;
+        white: string;
+        current: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    color: {
+        primary: string;
+        white: string;
+        current: string;
+    };
+}, undefined, "animate-spin", unknown, unknown, undefined>>;
+export type SpinnerRecipeProps = VariantProps<typeof spinnerRecipe>;
+export interface SpinnerProps extends Omit<SVGAttributes<SVGSVGElement>, 'color'>, SpinnerRecipeProps {
+    class?: string;
+}

package/dist/components/spinner/Spinner.recipe.js

@@ -0,0 +1,38 @@
+import { tv } from "tailwind-variants";
+/**
+ * Spinner recipe — the canonical styled layer for the loading indicator.
+ *
+ * A single stylable part (the spinning `<svg>`), so this is a base-string
+ * recipe. The base carries the `animate-spin` rotation; the `size` and `color`
+ * variants are the typed extension surface. The spinner sizes its viewport and
+ * tints its stroke through SVG presentation attributes (numeric width/height and
+ * a CSS color), driven by the `sizeMap` / `colorMap` in the component — values a
+ * Tailwind utility can't express on an SVG element — so the variant classes
+ * themselves stay empty by design and the visual scale/tint is attribute-driven.
+ *
+ * Primary customization surface: an app owns its look by extending this recipe
+ * with `tv({ extend: spinnerRecipe, ... })` in typed code — the rotation is
+ * inherited; only the design language changes. See docs/ARCHITECTURE.md for the
+ * worked example (kept out of this JSDoc so the llms doc generator doesn't grep
+ * its variant tokens).
+ */
+export const spinnerRecipe = tv({
+    base: 'animate-spin',
+    variants: {
+        size: {
+            xs: '',
+            sm: '',
+            md: '',
+            lg: '',
+        },
+        color: {
+            primary: '',
+            white: '',
+            current: '',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        color: 'primary',
+    },
+});

package/dist/components/spinner/Spinner.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">"use strict";
+<script lang="ts">import { spinnerRecipe } from './Spinner.recipe';
 let { size = 'md', color = 'primary', class: className = '', } = $props();
 const sizeMap = { xs: 12, sm: 16, md: 20, lg: 28 };
 const colorMap = {
@@ -13,7 +13,7 @@ const circumference = 2 * Math.PI * r;
 </script>
 
 <svg
-    class="animate-spin {className}"
+    class={spinnerRecipe({size, color, class: className})}
     width={px}
     height={px}
     viewBox="0 0 20 20"

package/dist/components/spinner/Spinner.svelte.d.ts

@@ -1,10 +1,4 @@
-type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
-type SpinnerColor = 'primary' | 'white' | 'current';
-type $$ComponentProps = {
-    size?: SpinnerSize;
-    color?: SpinnerColor;
-    class?: string;
-};
-declare const Spinner: import("svelte").Component<$$ComponentProps, {}, "">;
+import { type SpinnerProps } from './Spinner.recipe';
+declare const Spinner: import("svelte").Component<SpinnerProps, {}, "">;
 type Spinner = ReturnType<typeof Spinner>;
 export default Spinner;

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

@@ -1 +1,3 @@
 export { default as Spinner } from './Spinner.svelte';
+export { spinnerRecipe } from './Spinner.recipe';
+export type { SpinnerRecipeProps, SpinnerProps } from './Spinner.recipe';

package/dist/components/spinner/index.js

@@ -1 +1,2 @@
 export { default as Spinner } from './Spinner.svelte';
+export { spinnerRecipe } from './Spinner.recipe';

package/dist/components/star-rating/StarRating.recipe.d.ts

@@ -0,0 +1,49 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+/**
+ * StarRating recipe — the canonical styled layer for the interactive 1–5 star
+ * control. A single stylable part (each star button), so this is a base-string
+ * recipe; the `size` variant scales the hit target and glyph.
+ *
+ * Primary customization surface: an app owns its look by extending this recipe
+ * with `tv({ extend: starRatingRecipe, ... })` in typed code — base sizing is
+ * inherited; only the design language changes. See docs/ARCHITECTURE.md for the
+ * worked example (kept out of this JSDoc so the llms doc generator doesn't grep
+ * its variant tokens).
+ *
+ * The filled/empty star glyph is a structural seam (`starIcon` snippet prop on
+ * the component) so rung-3 owners can swap the icon without forking markup.
+ */
+export declare const starRatingRecipe: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "", {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;
+export type StarRatingRecipeProps = VariantProps<typeof starRatingRecipe>;
+export interface StarRatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>, StarRatingRecipeProps {
+    children?: Snippet;
+    /** Replace the default star glyph (structural seam). `filled` reflects the active/hovered state. */
+    starIcon?: Snippet<[{
+        filled: boolean;
+        index: number;
+    }]>;
+    class?: string;
+    value?: number;
+    onchange?: (value: number) => void;
+    ref?: HTMLDivElement | null;
+}

package/dist/components/star-rating/StarRating.recipe.js

@@ -0,0 +1,29 @@
+import { tv } from "tailwind-variants";
+/**
+ * StarRating recipe — the canonical styled layer for the interactive 1–5 star
+ * control. A single stylable part (each star button), so this is a base-string
+ * recipe; the `size` variant scales the hit target and glyph.
+ *
+ * Primary customization surface: an app owns its look by extending this recipe
+ * with `tv({ extend: starRatingRecipe, ... })` in typed code — base sizing is
+ * inherited; only the design language changes. See docs/ARCHITECTURE.md for the
+ * worked example (kept out of this JSDoc so the llms doc generator doesn't grep
+ * its variant tokens).
+ *
+ * The filled/empty star glyph is a structural seam (`starIcon` snippet prop on
+ * the component) so rung-3 owners can swap the icon without forking markup.
+ */
+export const starRatingRecipe = tv({
+    base: '',
+    variants: {
+        size: {
+            sm: 'size-6 p-1',
+            md: 'size-8 p-1',
+            lg: 'size-10 p-1'
+        }
+    },
+    compoundVariants: [],
+    defaultVariants: {
+        size: 'md'
+    },
+});

package/dist/components/star-rating/StarRating.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">import { styles } from "./StarRating";
-let { children, value = $bindable(), onchange, size = 'md', ...props } = $props();
+<script lang="ts">import { starRatingRecipe } from "./StarRating.recipe";
+let { children, value = $bindable(), onchange, size = 'md', starIcon, ...props } = $props();
 let hoverRating = $state(0);
 // Descriptive texts for each star rating
 const descriptions = [
@@ -30,38 +30,42 @@ function resetHover(e) {
     hoverRating = 0;
     // console.log('resetHover', e.type)
 }
-</script>
-
-<div
-        tabindex="0"
-        role="radiogroup"
-        class="star-rating-container inline-flex items-center">
-    {#each Array(5) as _, index (index)}
-        <button role="radio"
-                tabindex="0"
-                aria-checked={(hoverRating || value) > index}
-                aria-posinset={index + 1}
-                aria-setsize="5"
-                data-rating-icon
-                data-hovering={hoverRating === (index + 1)}
-                aria-label={`Rate ${index + 1} out of 5 stars`}
-                onpointerenter={(e) => setHover(index + 1, e)}
-                onpointerleave={resetHover}
-                ontouchendcapture={resetHover}
-                onclick={(e) => setRating(index + 1, e)}
-                class={styles({size})}>
-            <svg
-                    viewBox="64 64 896 896" focusable="true" data-icon="star" width="1em" height="1em"
-                    fill="currentColor"
-                    class="h-full w-full fill-inherit"
-                    aria-hidden="true">
-                <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
-            </svg>
-        </button>
-    {/each}
-</div>
-
-
+</script>
+
+<div
+        tabindex="0"
+        role="radiogroup"
+        class="star-rating-container inline-flex items-center">
+    {#each Array(5) as _, index (index)}
+        <button role="radio"
+                tabindex="0"
+                aria-checked={(hoverRating || value) > index}
+                aria-posinset={index + 1}
+                aria-setsize="5"
+                data-rating-icon
+                data-hovering={hoverRating === (index + 1)}
+                aria-label={`Rate ${index + 1} out of 5 stars`}
+                onpointerenter={(e) => setHover(index + 1, e)}
+                onpointerleave={resetHover}
+                ontouchendcapture={resetHover}
+                onclick={(e) => setRating(index + 1, e)}
+                class={starRatingRecipe({size})}>
+            {#if starIcon}
+                {@render starIcon({ filled: (hoverRating || (value ?? 0)) > index, index })}
+            {:else}
+                <svg
+                        viewBox="64 64 896 896" focusable="true" data-icon="star" width="1em" height="1em"
+                        fill="currentColor"
+                        class="h-full w-full fill-inherit"
+                        aria-hidden="true">
+                    <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
+                </svg>
+            {/if}
+        </button>
+    {/each}
+</div>
+
+
 <style>[data-rating-icon]:first-child {
   padding-left: 0;
 }
@@ -77,4 +81,4 @@ function resetHover(e) {
 }
 [data-rating-icon][data-hovering=true] {
   transform: scale(1.1);
-}</style>
+}</style>

package/dist/components/star-rating/StarRating.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type StarRatingProps } from "./StarRating";
+import { type StarRatingProps } from "./StarRating.recipe";
 declare const StarRating: import("svelte").Component<StarRatingProps, {}, "value">;
 type StarRating = ReturnType<typeof StarRating>;
 export default StarRating;

package/dist/components/star-rating/index.d.ts

@@ -1,2 +1,3 @@
 export { default as StarRating } from './StarRating.svelte';
-export type { StarRatingProps } from './StarRating';
+export { starRatingRecipe } from './StarRating.recipe';
+export type { StarRatingProps, StarRatingRecipeProps } from './StarRating.recipe';

package/dist/components/star-rating/index.js

@@ -1 +1,2 @@
 export { default as StarRating } from './StarRating.svelte';
+export { starRatingRecipe } from './StarRating.recipe';