entasis 0.4.1 → 0.6.0

package/dist/components/Stat/stat.theme.d.ts

@@ -263,7 +263,7 @@ export declare const setStatTheme: (theme: InferComponentTheme<{
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useStatTheme: (theme?: InferComponentTheme<{
+export declare const useStatTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         size: {
             small: string;
@@ -393,134 +393,4 @@ export declare const useStatTheme: (theme?: InferComponentTheme<{
             comfortable: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-}> | undefined) => {
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-        density: {
-            compact: string;
-            normal: string;
-            comfortable: string;
-        };
-        color: {
-            primary: string;
-            secondary: string;
-            neutral: string;
-            danger: string;
-            success: string;
-            warning: string;
-            info: string;
-        };
-        variant: {
-            solid: string;
-            outline: string;
-            soft: string;
-            ghost: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    region: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        span: {
-            narrow: string;
-            wide: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    label: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-        variant: {
-            solid: string;
-            soft: string;
-            outline: string;
-            ghost: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    value: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    unit: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    aside: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        rows: {
-            single: string;
-            pair: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    action: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    indicator: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-        variant: {
-            default: string;
-            icon: string;
-            badge: string;
-        };
-        color: {
-            primary: string;
-            secondary: string;
-            neutral: string;
-            danger: string;
-            success: string;
-            warning: string;
-            info: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    trend: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    trendIcon: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    trendText: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        trend: {
-            up: string;
-            down: string;
-            neutral: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    description: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-        variant: {
-            solid: string;
-            soft: string;
-            outline: string;
-            ghost: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    separator: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        density: {
-            compact: string;
-            normal: string;
-            comfortable: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-};
+}>;

package/dist/components/Stepper/stepper.theme.d.ts

@@ -62,7 +62,7 @@ export declare const setStepperTheme: (theme: InferComponentTheme<{
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useStepperTheme: (theme?: InferComponentTheme<{
+export declare const useStepperTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     motion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
     root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         mode: {
@@ -82,25 +82,5 @@ export declare const useStepperTheme: (theme?: InferComponentTheme<{
             vertical: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-}> | undefined) => {
-    motion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        mode: {
-            classic: string;
-            vertical: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    container: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        mode: {
-            classic: string;
-            vertical: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    step: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        mode: {
-            classic: string;
-            vertical: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-};
+}>;
 export declare const useStepperMotion: () => import("../../utils/motion/index.js").ComponentMotion<import("../../utils/motion/index.js").MotionVariantShape>;

package/dist/components/Tabbar/tabbar.theme.d.ts

@@ -219,7 +219,7 @@ export declare const setTabbarTheme: (theme: InferComponentTheme<{
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useTabbarTheme: (theme?: InferComponentTheme<{
+export declare const useTabbarTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         orientation: {
             horizontal: string;
@@ -327,112 +327,4 @@ export declare const useTabbarTheme: (theme?: InferComponentTheme<{
             large: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-}> | undefined) => {
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        orientation: {
-            horizontal: string;
-            vertical: string;
-        };
-        scrollFade: {
-            none: string;
-            x: string;
-            y: string;
-        };
-        alignment: {
-            start: string;
-            center: string;
-            end: string;
-        };
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-        variant: {
-            underline: string;
-            pill: string;
-        };
-        fullWidth: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    tab: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-        color: {
-            primary: string;
-            secondary: string;
-            neutral: string;
-            danger: string;
-            success: string;
-            warning: string;
-            info: string;
-        };
-        active: {
-            true: string;
-            false: string;
-        };
-        focused: {
-            true: string;
-            false: string;
-        };
-        disabled: {
-            true: string;
-            false: string;
-        };
-        orientation: {
-            horizontal: string;
-            vertical: string;
-        };
-        position: {
-            top: string;
-            bottom: string;
-            left: string;
-            right: string;
-        };
-        variant: {
-            underline: string;
-            pill: string;
-        };
-        fullWidth: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    indicator: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        variant: {
-            underline: string;
-            pill: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    staticIndicator: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        variant: {
-            underline: string;
-            pill: string;
-        };
-        position: {
-            top: string;
-            bottom: string;
-            left: string;
-            right: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    prefix: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    suffix: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-};
+}>;

package/dist/components/Table/table.theme.d.ts

@@ -83,7 +83,7 @@ export declare const setTableTheme: (theme: InferComponentTheme<{
     prefix: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     suffix: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>) => void;
-export declare const useTableTheme: (theme?: InferComponentTheme<{
+export declare const useTableTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     table: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     thead: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
@@ -123,44 +123,4 @@ export declare const useTableTheme: (theme?: InferComponentTheme<{
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     prefix: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     suffix: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-}> | undefined) => {
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    table: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    thead: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    tbody: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    tfoot: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    row: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        density: {
-            compact: string;
-            normal: string;
-            comfortable: string;
-        };
-        selected: {
-            true: string;
-            false: null;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    head: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        density: {
-            compact: string;
-            normal: string;
-            comfortable: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    cell: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        density: {
-            compact: string;
-            normal: string;
-            comfortable: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    caption: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        density: {
-            compact: string;
-            normal: string;
-            comfortable: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    prefix: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    suffix: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-};
+}>;

package/dist/components/TableOfContents/tableOfContents.theme.d.ts

@@ -55,7 +55,7 @@ export declare const setTableOfContentsTheme: (theme: InferComponentTheme<{
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useTableOfContentsTheme: (theme?: InferComponentTheme<{
+export declare const useTableOfContentsTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     scrollAreaViewport: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
@@ -81,30 +81,4 @@ export declare const useTableOfContentsTheme: (theme?: InferComponentTheme<{
             false: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-}> | undefined) => {
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    scrollAreaViewport: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    list: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    item: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    link: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-        highlighted: {
-            true: string;
-            false: null;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    rail: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    track: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    active: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    marker: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        highlighted: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-};
+}>;

package/dist/components/Tabs/tabs.theme.d.ts

@@ -40,7 +40,7 @@ export declare const setTabsTheme: (theme: InferComponentTheme<{
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useTabsTheme: (theme?: InferComponentTheme<{
+export declare const useTabsTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     motion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
     root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         placement: {
@@ -58,23 +58,5 @@ export declare const useTabsTheme: (theme?: InferComponentTheme<{
             right: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-}> | undefined) => {
-    motion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        placement: {
-            top: string;
-            bottom: string;
-            left: string;
-            right: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    content: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        placement: {
-            top: string;
-            bottom: string;
-            left: string;
-            right: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-};
+}>;
 export declare const useTabsMotion: () => import("../../utils/motion/index.js").ComponentMotion<import("../../utils/motion/index.js").MotionVariantShape>;

package/dist/components/Theme/Theme.svelte

@@ -89,7 +89,7 @@
 		}
 	});
 
-	const sveltaiTheme = new ThemeState(
+	const entasisTheme = new ThemeState(
 		{
 			get spinnerVariant() {
 				return spinnerVariant;
@@ -132,7 +132,7 @@
 	$effect(() => {
 		document.documentElement.toggleAttribute(
 			REDUCED_MOTION_ATTRIBUTE,
-			sveltaiTheme.preferReducesMotion
+			entasisTheme.preferReducesMotion
 		);
 		return () => document.documentElement.removeAttribute(REDUCED_MOTION_ATTRIBUTE);
 	});
@@ -203,13 +203,13 @@
 
 <div
 	{@attach portal()}
-	{@attach sveltaiTheme.floatingWindows.layer}
+	{@attach entasisTheme.floatingWindows.layer}
 	data-slot="floating-window-layer"
 	class="pointer-events-none fixed inset-0"
 	style:z-index={FLOATING_WINDOW_LAYER_Z_INDEX}
 ></div>
 
-{@render children(sveltaiTheme)}
+{@render children(entasisTheme)}
 
 <DialogBackdrop />
 <TooltipHost />

package/dist/components/Theme/theme.designTokens.d.ts

@@ -1,4 +1,5 @@
 import type { Colors } from '../../types/theme.js';
+import { type SpacingStep } from '../../tailwind/spacing.js';
 import { defaultThemeSpacingScale, typeScalePresets, type DeepPartial, type MotionTokens, type ThemeElevation, type ThemeRadius, type ThemeSpacing, type ThemeSpacingScale, type ThemeSpacingStep, type TypeScaleOptions, type TypeScalePreset, type TypeScaleRatio } from '../../tailwind/scales.js';
 export { defaultThemeSpacingScale, typeScalePresets };
 export type { MotionTokens, ThemeElevation, ThemeRadius, ThemeSpacing, ThemeSpacingScale, ThemeSpacingStep, TypeScaleOptions, TypeScalePreset, TypeScaleRatio };
@@ -29,6 +30,13 @@ export type ThemeDesignTokens = {
     hoverColor?: Colors;
     /** State role — the transient pressed tint; falls back to `hoverColor` when omitted. */
     pressedColor?: Colors;
+    /**
+     * How far a drawer `Dialog` stands off the screen edge: a spacing step (`'md'`,
+     * `'layout-sm'`, …) or `'none'` for edge to edge. Defaults to `'layout-md'`. At `'none'` the
+     * drawer's edge corners square off and only the corners facing the page keep their radius.
+     * Writes `--drawer-inset`.
+     */
+    drawerInset?: SpacingStep | 'none';
 };
 export type ThemeDesignTokenMap<T extends readonly string[] = readonly string[]> = Partial<Record<T[number], ThemeDesignTokens>>;
 type CompileThemeDesignTokensOptions<T extends readonly string[]> = {
@@ -43,4 +51,6 @@ type CompileThemeDesignTokensOptions<T extends readonly string[]> = {
      */
     motion?: DeepPartial<MotionTokens>;
 };
+/** `--drawer-inset` for a step: the theme token and a Dialog's `inset` prop share it. */
+export declare const drawerInsetValue: (step: SpacingStep | "none") => string;
 export declare const compileThemeDesignTokens: <T extends readonly string[]>({ designTokens, attribute, value, colorScheme, motion }: CompileThemeDesignTokensOptions<T>) => string;

package/dist/components/Theme/theme.designTokens.js

@@ -1,3 +1,4 @@
+import { spacingValues } from '../../tailwind/spacing.js';
 import { defaultThemeSpacingScale, elevationVariables, formatRem, mergeMotionTokens, motionVariables, presetFactor, radiusVariables, spacingFactors, spacingScaleVariables, typeScalePresets, typeScaleVariables } from '../../tailwind/scales.js';
 // The design scales live in `$lib/tailwind/scales` so the Tailwind plugin and this
 // runtime compiler emit identical variables; they are re-exported here because the
@@ -92,8 +93,20 @@ const tokenVariables = (tokens, colorScheme, baseMotion) => ({
         }),
     ...(tokens.elevation === undefined
         ? {}
-        : elevationVariables(tokens.elevation, colorScheme === 'dark' ? 'dark' : 'light'))
+        : elevationVariables(tokens.elevation, colorScheme === 'dark' ? 'dark' : 'light')),
+    ...(tokens.drawerInset === undefined
+        ? {}
+        : { '--drawer-inset': drawerInsetValue(tokens.drawerInset) })
 });
+/** `--drawer-inset` for a step: the theme token and a Dialog's `inset` prop share it. */
+export const drawerInsetValue = (step) => {
+    if (step === 'none')
+        return '0px';
+    const value = spacingValues[step];
+    if (!value)
+        throw new Error(`Unknown drawerInset "${step}".`);
+    return value;
+};
 const validateThemeName = (themeName) => {
     if (!themeNamePattern.test(themeName)) {
         throw new Error(`Theme name "${themeName}" must start with a letter or underscore and contain only letters, numbers, underscores, or hyphens.`);

package/dist/components/Theme/theme.state.svelte.js

@@ -104,7 +104,7 @@ export class ThemeState extends createBindableStateClass() {
     constructor(options, svelteTheme) {
         super(options);
         this.svelteTheme = svelteTheme;
-        setContext('sveltaiTheme', this);
+        setContext('entasisTheme', this);
         onDestroy(registerActiveTheme(this));
     }
     resolveTransitionProps = (props, defaultTransition) => {
@@ -194,7 +194,7 @@ export class ThemeState extends createBindableStateClass() {
     };
 }
 export const useTheme = () => {
-    const theme = getContext('sveltaiTheme');
+    const theme = getContext('entasisTheme');
     // A missing provider used to surface as `undefined is not an object` from whichever call site
     // dereferenced it first; name the cause instead, at the point where it is known.
     if (!theme) {
@@ -204,5 +204,5 @@ export const useTheme = () => {
 };
 /** Resolve a control color against Theme `defaultColor`. Call inside `$derived`. */
 export const useDefaultColor = (color) => {
-    return color ?? getContext('sveltaiTheme')?.defaultColor ?? 'neutral';
+    return color ?? getContext('entasisTheme')?.defaultColor ?? 'neutral';
 };