sve-ui 0.1.2 → 0.2.0

package/dist/components/Spinner/Spinner.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Size = 'sm' | 'md' | 'lg';
+  type Color = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default';
+
+  interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'class' | 'role'> {
+    size?: Size;
+    color?: Color;
+    label?: string;
+    class?: string;
+  }
+
+  let {
+    size = 'md',
+    color = 'default',
+    label = 'Loading',
+    class: cls,
+    ...rest
+  }: Props = $props();
+
+  const className = $derived(
+    [
+      'sve-spinner',
+      `sve-spinner--${size}`,
+      `sve-c-${color}`,
+      cls ?? '',
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<span role="status" class={className} aria-label={label} {...rest}>
+  <span class="sve-spinner__track" aria-hidden="true"></span>
+</span>
+
+<style>
+  .sve-spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  /* --- Sizes --- */
+  .sve-spinner--sm { width: 1rem;    height: 1rem; }
+  .sve-spinner--md { width: 1.5rem;  height: 1.5rem; }
+  .sve-spinner--lg { width: 2.5rem;  height: 2.5rem; }
+
+  /* --- Track (the spinning ring) --- */
+  .sve-spinner__track {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--sve-radius-full);
+    border: 2px solid transparent;
+    border-top-color: currentColor;
+    border-right-color: currentColor;
+    animation: sve-spin 0.7s linear infinite;
+  }
+
+  /* --- Colors via currentColor --- */
+  .sve-c-primary   { color: var(--sve-color-primary); }
+  .sve-c-secondary { color: var(--sve-color-secondary); }
+  .sve-c-success   { color: var(--sve-color-success); }
+  .sve-c-warning   { color: var(--sve-color-warning); }
+  .sve-c-danger    { color: var(--sve-color-danger); }
+  .sve-c-default   { color: var(--sve-color-default-foreground); }
+
+  /* Respect the user's motion preference */
+  @media (prefers-reduced-motion: reduce) {
+    .sve-spinner__track {
+      animation: none;
+    }
+  }
+
+  @keyframes sve-spin {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Size = 'sm' | 'md' | 'lg';
+type Color = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default';
+interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'class' | 'role'> {
+    size?: Size;
+    color?: Color;
+    label?: string;
+    class?: string;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;
+//# sourceMappingURL=Spinner.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Spinner/Spinner.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/B,KAAK,KAAK,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEpF,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7E,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmCH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/Text/Text.svelte

@@ -1,51 +1,90 @@
-<script>import { theme } from "../../theme";
-export let as = "p";
-export let color = "black";
-export let fontWeight = "normal";
-export let fontSize = "md";
-export let fontStyle = "normal";
-export let textDecoration = "none";
-export let letterSpacing = "normal";
-export let lineHeight = "normal";
-export let textAlign = "left";
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  type As = 'p' | 'span' | 'div' | 'label' | 'strong' | 'em' | 'small' | 'li' | 'dt' | 'dd' | 'figcaption' | 'address' | 'cite' | 'code' | 'abbr' | 'time' | 'q' | 'blockquote' | 'pre';
+  type Size = 'sm' | 'md' | 'lg';
+  type Weight = 'normal' | 'medium' | 'bold';
+  type Align = 'left' | 'center' | 'right' | 'justify';
+  type Color = 'inherit' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default';
+
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
+    as?: As;
+    size?: Size;
+    weight?: Weight;
+    color?: Color;
+    align?: Align;
+    truncate?: boolean;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    as = 'p',
+    size,
+    weight,
+    color = 'inherit',
+    align,
+    truncate = false,
+    class: cls,
+    children,
+    ...rest
+  }: Props = $props();
+
+  const className = $derived(
+    [
+      'sve-text',
+      size   ? `sve-text--${size}`   : '',
+      weight ? `sve-text--${weight}` : '',
+      color !== 'inherit' ? `sve-c-${color}` : '',
+      align  ? `sve-text--${align}`  : '',
+      truncate ? 'sve-text--truncate' : '',
+      cls ?? '',
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
 </script>
 
-<svelte:element
-	this={as}
-	style={`
-    font-size: ${theme.fontSizes[fontSize]};
-    color: ${color};
-    font-weight: ${theme.fontWeights[fontWeight]};
-    font-style: ${fontStyle};
-    text-decoration: ${textDecoration};
-    letter-spacing: ${theme.letterSpacings[letterSpacing]};
-    line-height: ${lineHeight};
-    text-align: ${textAlign};
-  `}
->
-	<slot />
+<svelte:element this={as} class={className} {...rest}>
+  {@render children?.()}
 </svelte:element>
 
 <style>
-	/* :root {
-		--breakpoint-sm: 640px;
-		--breakpoint-md: 768px;
-		--breakpoint-lg: 1024px;
-	}
-
-	.container {
-		width: var(--width-container-base);
-
-		@media only screen and (min-width: var(--breakpoint-sm)) {
-			width: var(--width-container-sm);
-		}
-
-		@media only screen and (min-width: var(--breakpoint-md)) {
-			width: var(--width-container-md);
-		}
-
-		@media only screen and (min-width: var(--breakpoint-lg)) {
-			width: var(--width-container-lg);
-		}
-	} */
+  .sve-text {
+    font-family: var(--sve-font-family-sans);
+    line-height: var(--sve-line-height-normal);
+    margin: 0;
+  }
+
+  /* --- Sizes --- */
+  .sve-text--sm { font-size: var(--sve-font-size-sm); }
+  .sve-text--md { font-size: var(--sve-font-size-md); }
+  .sve-text--lg { font-size: var(--sve-font-size-lg); }
+
+  /* --- Weights --- */
+  .sve-text--normal { font-weight: var(--sve-font-weight-normal); }
+  .sve-text--medium { font-weight: var(--sve-font-weight-medium); }
+  .sve-text--bold   { font-weight: var(--sve-font-weight-bold); }
+
+  /* --- Alignment --- */
+  .sve-text--left    { text-align: left; }
+  .sve-text--center  { text-align: center; }
+  .sve-text--right   { text-align: right; }
+  .sve-text--justify { text-align: justify; }
+
+  /* --- Truncate --- */
+  .sve-text--truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* --- Semantic colors --- */
+  .sve-c-primary   { color: var(--sve-color-primary); }
+  .sve-c-secondary { color: var(--sve-color-secondary); }
+  .sve-c-success   { color: var(--sve-color-success); }
+  .sve-c-warning   { color: var(--sve-color-warning-foreground); }
+  .sve-c-danger    { color: var(--sve-color-danger); }
+  .sve-c-default   { color: var(--sve-color-default-foreground); }
 </style>

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

@@ -1,45 +1,21 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-         * @default "p"
-         */
-        as?: "div" | "p" | "br" | "a" | "abbr" | "address" | "b" | "bdi" | "bdo" | "blockquote" | "cite" | "code" | "del" | "dfn" | "em" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "i" | "ins" | "kbd" | "mark" | "meter" | "pre" | "q" | "span" | "var" | undefined;
-        /**
-         * @default "black"
-         */
-        color?: string | undefined;
-        fontWeight?: "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "bold" | "extrabold" | "black" | undefined;
-        /**
-         * @default "md"
-         */
-        fontSize?: "sm" | "md" | "lg" | "xl" | "6xs" | "5xs" | "4xs" | "3xs" | "2xs" | "xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | undefined;
-        fontStyle?: string | undefined;
-        textDecoration?: string | undefined;
-        /**
-         * @default "normal"
-         */
-        letterSpacing?: "normal" | "tighter" | "tight" | "wide" | "wider" | "widest" | undefined;
-        /**
-         * @default "normal"
-         */
-        lineHeight?: string | undefined;
-        textAlign?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TextProps = typeof __propDef.props;
-export type TextEvents = typeof __propDef.events;
-export type TextSlots = typeof __propDef.slots;
-/**
- * Text is the used to render text and paragraphs of text.
- * @see Docs https://sveui.org/components/text
- */
-export default class Text extends SvelteComponentTyped<TextProps, TextEvents, TextSlots> {
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type As = 'p' | 'span' | 'div' | 'label' | 'strong' | 'em' | 'small' | 'li' | 'dt' | 'dd' | 'figcaption' | 'address' | 'cite' | 'code' | 'abbr' | 'time' | 'q' | 'blockquote' | 'pre';
+type Size = 'sm' | 'md' | 'lg';
+type Weight = 'normal' | 'medium' | 'bold';
+type Align = 'left' | 'center' | 'right' | 'justify';
+type Color = 'inherit' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
+    as?: As;
+    size?: Size;
+    weight?: Weight;
+    color?: Color;
+    align?: Align;
+    truncate?: boolean;
+    class?: string;
+    children?: Snippet;
 }
-export { Text, TextProps };
+declare const Text: import("svelte").Component<Props, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;
+//# sourceMappingURL=Text.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Text/Text.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,EAAE,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,GAAG,GAAG,YAAY,GAAG,KAAK,CAAC;AACtL,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/B,KAAK,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC3C,KAAK,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AACrD,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEhG,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAChE,EAAE,CAAC,EAAE,EAAE,CAAC;IACR,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8CH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/Tooltip/TooltipContent.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { Tooltip } from 'bits-ui';
+  import type { ComponentProps } from 'svelte';
+
+  type BitsContentProps = ComponentProps<typeof Tooltip.Content>;
+
+  interface Props extends Omit<BitsContentProps, 'class'> {
+    class?: string;
+  }
+
+  let { class: cls, children, ...rest }: Props = $props();
+</script>
+
+<!--
+  TooltipContent renders via a Portal (managed by bits-ui) that wraps:
+  Tooltip.Content — the floating content element with ARIA and positioning via Bits UI.
+
+  Portal defaults to document.body, keeping z-index stacking clean.
+-->
+<Tooltip.Portal>
+  <Tooltip.Content
+    class={['sve-tooltip-content', cls].filter(Boolean).join(' ')}
+    {children}
+    {...rest}
+  />
+</Tooltip.Portal>
+
+<style>
+  :global(.sve-tooltip-content) {
+    background-color: var(--sve-color-default-foreground, #1a202c);
+    color: var(--sve-color-default-surface, #f7fafc);
+    border-radius: var(--sve-radius-sm);
+    padding: var(--sve-space-1) var(--sve-space-2);
+    font-size: var(--sve-font-size-xs);
+    box-shadow: var(--sve-shadow-md);
+    /* z-index convention: Dialog overlay=50/content=51, Dropdown/Popover=60, Tooltip=70 */
+    z-index: 70;
+    max-width: 20rem;
+    word-break: break-word;
+  }
+</style>

package/dist/components/Tooltip/TooltipContent.svelte.d.ts

@@ -0,0 +1,10 @@
+import { Tooltip } from 'bits-ui';
+import type { ComponentProps } from 'svelte';
+type BitsContentProps = ComponentProps<typeof Tooltip.Content>;
+interface Props extends Omit<BitsContentProps, 'class'> {
+    class?: string;
+}
+declare const TooltipContent: import("svelte").Component<Props, {}, "">;
+type TooltipContent = ReturnType<typeof TooltipContent>;
+export default TooltipContent;
+//# sourceMappingURL=TooltipContent.svelte.d.ts.map

package/dist/components/Tooltip/TooltipContent.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipContent.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tooltip/TooltipContent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG3C,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC;AAE/D,UAAU,KAAM,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmBH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,19 @@
+/**
+ * Tooltip namespace — sve-ui styled wrappers over bits-ui Tooltip primitives.
+ *
+ * Provider, Root, Trigger: re-exported as-is (behavior-only, Bits UI owns ARIA + timing).
+ * Content: styled wrapper adding --sve-* token styles.
+ * Content wraps Portal + Bits Content internally (consumers don't manage portaling).
+ *
+ * Confirmed Bits UI 2.x API:
+ *   import { Tooltip } from 'bits-ui'
+ *   Tooltip.Provider / Root / Trigger / Content / Portal
+ */
+import type { Component } from 'svelte';
+import type { TooltipProviderProps, TooltipRootProps, TooltipTriggerProps, TooltipArrowProps } from 'bits-ui';
+export declare const Provider: Component<TooltipProviderProps>;
+export declare const Root: Component<TooltipRootProps>;
+export declare const Trigger: Component<TooltipTriggerProps>;
+export declare const Arrow: Component<TooltipArrowProps>;
+export { default as Content } from './TooltipContent.svelte';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EACV,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAIjB,eAAO,MAAM,QAAQ,EAAE,SAAS,CAAC,oBAAoB,CAA2D,CAAC;AACjH,eAAO,MAAM,IAAI,EAAE,SAAS,CAAC,gBAAgB,CAAmD,CAAC;AACjG,eAAO,MAAM,OAAO,EAAE,SAAS,CAAC,mBAAmB,CAAyD,CAAC;AAE7G,eAAO,MAAM,KAAK,EAAE,SAAS,CAAC,iBAAiB,CAAqD,CAAC;AAErG,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/components/Tooltip/index.js

@@ -0,0 +1,20 @@
+/**
+ * Tooltip namespace — sve-ui styled wrappers over bits-ui Tooltip primitives.
+ *
+ * Provider, Root, Trigger: re-exported as-is (behavior-only, Bits UI owns ARIA + timing).
+ * Content: styled wrapper adding --sve-* token styles.
+ * Content wraps Portal + Bits Content internally (consumers don't manage portaling).
+ *
+ * Confirmed Bits UI 2.x API:
+ *   import { Tooltip } from 'bits-ui'
+ *   Tooltip.Provider / Root / Trigger / Content / Portal
+ */
+import { Tooltip as BitsTooltip } from 'bits-ui';
+// Behavior re-exports — cast to portable Component types to avoid referencing
+// bits-ui internal $$IsomorphicComponent (Svelte 4 generic pattern) in the exported declaration.
+export const Provider = BitsTooltip.Provider;
+export const Root = BitsTooltip.Root;
+export const Trigger = BitsTooltip.Trigger;
+// Arrow: bits-ui floating-ui arrow for visual pointer; positioning is automatic.
+export const Arrow = BitsTooltip.Arrow;
+export { default as Content } from './TooltipContent.svelte';

package/dist/context.d.ts

@@ -0,0 +1,14 @@
+export interface ThemeContext {
+    readonly colorScheme: 'light' | 'dark' | 'system';
+}
+/**
+ * Sets the theme context for the current component tree.
+ * Call this in the ThemeProvider component's script section.
+ */
+export declare function setThemeContext(ctx: ThemeContext): void;
+/**
+ * Retrieves the theme context set by a parent ThemeProvider.
+ * Returns undefined if no ThemeProvider is in the tree.
+ */
+export declare function useTheme(): ThemeContext | undefined;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/lib/context.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;CACnD;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,YAAY,GAAG,IAAI,CAEvD;AAED;;;GAGG;AACH,wBAAgB,QAAQ,IAAI,YAAY,GAAG,SAAS,CAEnD"}

package/dist/context.js

@@ -0,0 +1,16 @@
+import { setContext, getContext } from 'svelte';
+const THEME_CONTEXT_KEY = Symbol('sve-ui:theme');
+/**
+ * Sets the theme context for the current component tree.
+ * Call this in the ThemeProvider component's script section.
+ */
+export function setThemeContext(ctx) {
+    setContext(THEME_CONTEXT_KEY, ctx);
+}
+/**
+ * Retrieves the theme context set by a parent ThemeProvider.
+ * Returns undefined if no ThemeProvider is in the tree.
+ */
+export function useTheme() {
+    return getContext(THEME_CONTEXT_KEY);
+}

package/dist/index.d.ts

@@ -1,28 +1,30 @@
+/**
+ * sve-ui main entry point.
+ *
+ * Exports: ThemeProvider, Button, Dialog namespace, Text, Heading, Badge, Avatar, Spinner,
+ * Card namespace, Alert namespace, Input,
+ * variant helper + types, theme types.
+ */
+export { default as ThemeProvider } from './ThemeProvider.svelte';
 export { default as Button } from './components/Button/Button.svelte';
-export type { ButtonProps } from './components/Button/Button.svelte';
-export { default as CodeExample } from './components/CodeExample/CodeExample.svelte';
-export type { CodeExampleProps } from './components/CodeExample/CodeExample.svelte';
-export { default as Box } from './components/Box/Box.svelte';
-export type { BoxProps } from './components/Box/Box.svelte';
-export { default as Flex } from './components/Flex/Flex.svelte';
-export type { FlexProps } from './components/Flex/Flex.svelte';
-export { default as Center } from './components/Center/Center.svelte';
-export type { CenterProps } from './components/Center/Center.svelte';
-export { default as Spacer } from './components/Spacer/Spacer.svelte';
-export type { SpacerProps } from './components/Spacer/Spacer.svelte';
-export { default as Square } from './components/Square/Square.svelte';
-export type { SquareProps } from './components/Square/Square.svelte';
-export { default as Circle } from './components/Circle/Circle.svelte';
-export type { CircleProps } from './components/Circle/Circle.svelte';
-export { default as Grid } from './components/Grid/Grid.svelte';
-export type { GridProps } from './components/Grid/Grid.svelte';
-export { default as GridItem } from './components/GridItem/GridItem.svelte';
-export type { GridItemProps } from './components/GridItem/GridItem.svelte';
 export { default as Text } from './components/Text/Text.svelte';
-export type { TextProps } from './components/Text/Text.svelte';
-export { default as DotPulse } from './components/Loaders/DotPulse.svelte';
-export type { DotPulseProps } from './components/Loaders/DotPulse.svelte';
-export { default as DotSpinner } from './components/Loaders/DotSpinner.svelte';
-export type { DotSpinnerProps } from './components/Loaders/DotSpinner.svelte';
-export { default as DotWave } from './components/Loaders/DotWave.svelte';
-export type { DotWaveProps } from './components/Loaders/DotWave.svelte';
+export { default as Heading } from './components/Heading/Heading.svelte';
+export { default as Badge } from './components/Badge/Badge.svelte';
+export { default as Spinner } from './components/Spinner/Spinner.svelte';
+export { default as Input } from './components/Input/Input.svelte';
+export * as Dialog from './components/Dialog/index.js';
+export * as DropdownMenu from './components/DropdownMenu/index.js';
+export * as Tooltip from './components/Tooltip/index.js';
+export * as Popover from './components/Popover/index.js';
+export * as Avatar from './components/Avatar/index.js';
+export * as Card from './components/Card/index.js';
+export * as Alert from './components/Alert/index.js';
+export { buttonVariants } from './components/Button/Button.svelte';
+export { badgeVariants, type Variant as BadgeVariant, type Color as BadgeColor, type Size as BadgeSize } from './components/Badge/Badge.svelte';
+export { cardVariants, type Variant as CardVariant, type Padding as CardPadding } from './components/Card/CardRoot.svelte';
+export { alertVariants, type Color as AlertColor, type Variant as AlertVariant } from './components/Alert/AlertRoot.svelte';
+export { inputVariants, type Size as InputSize, type Variant as InputVariant } from './components/Input/Input.svelte';
+export { defineVariants, type VariantSchema, type VariantConfig, type VariantProps, } from './internal/variants';
+export { useTheme, type ThemeContext } from './context';
+export { lightTokens, darkTokens, themeToVars, type SveTheme, type PartialSveTheme, type SveColors, type SveColorRole, type SveSpacing, type SveRadius, type SveTypography, } from './theme/tokens';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iCAAiC,CAAC;AAGnE,OAAO,KAAK,MAAM,MAAM,8BAA8B,CAAC;AAGvD,OAAO,KAAK,YAAY,MAAM,oCAAoC,CAAC;AAGnE,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC;AAGzD,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC;AAGzD,OAAO,KAAK,MAAM,MAAM,8BAA8B,CAAC;AAGvD,OAAO,KAAK,IAAI,MAAM,4BAA4B,CAAC;AAGnD,OAAO,KAAK,KAAK,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,OAAO,EAAE,aAAa,EAAE,KAAK,OAAO,IAAI,YAAY,EAAE,KAAK,KAAK,IAAI,UAAU,EAAE,KAAK,IAAI,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAGhJ,OAAO,EAAE,YAAY,EAAE,KAAK,OAAO,IAAI,WAAW,EAAE,KAAK,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAG3H,OAAO,EAAE,aAAa,EAAE,KAAK,KAAK,IAAI,UAAU,EAAE,KAAK,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAG5H,OAAO,EAAE,aAAa,EAAE,KAAK,IAAI,IAAI,SAAS,EAAE,KAAK,OAAO,IAAI,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAGtH,OAAO,EACL,cAAc,EACd,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,YAAY,GAClB,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EAAE,QAAQ,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAGxD,OAAO,EACL,WAAW,EACX,UAAU,EACV,WAAW,EACX,KAAK,QAAQ,EACb,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,aAAa,GACnB,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -1,15 +1,45 @@
-// Reexport your entry components here
+/**
+ * sve-ui main entry point.
+ *
+ * Exports: ThemeProvider, Button, Dialog namespace, Text, Heading, Badge, Avatar, Spinner,
+ * Card namespace, Alert namespace, Input,
+ * variant helper + types, theme types.
+ */
+// Components
+export { default as ThemeProvider } from './ThemeProvider.svelte';
 export { default as Button } from './components/Button/Button.svelte';
-export { default as CodeExample } from './components/CodeExample/CodeExample.svelte';
-export { default as Box } from './components/Box/Box.svelte';
-export { default as Flex } from './components/Flex/Flex.svelte';
-export { default as Center } from './components/Center/Center.svelte';
-export { default as Spacer } from './components/Spacer/Spacer.svelte';
-export { default as Square } from './components/Square/Square.svelte';
-export { default as Circle } from './components/Circle/Circle.svelte';
-export { default as Grid } from './components/Grid/Grid.svelte';
-export { default as GridItem } from './components/GridItem/GridItem.svelte';
 export { default as Text } from './components/Text/Text.svelte';
-export { default as DotPulse } from './components/Loaders/DotPulse.svelte';
-export { default as DotSpinner } from './components/Loaders/DotSpinner.svelte';
-export { default as DotWave } from './components/Loaders/DotWave.svelte';
+export { default as Heading } from './components/Heading/Heading.svelte';
+export { default as Badge } from './components/Badge/Badge.svelte';
+export { default as Spinner } from './components/Spinner/Spinner.svelte';
+export { default as Input } from './components/Input/Input.svelte';
+// Dialog namespace (composed over bits-ui)
+export * as Dialog from './components/Dialog/index.js';
+// DropdownMenu namespace (composed over bits-ui)
+export * as DropdownMenu from './components/DropdownMenu/index.js';
+// Tooltip namespace (composed over bits-ui)
+export * as Tooltip from './components/Tooltip/index.js';
+// Popover namespace (composed over bits-ui)
+export * as Popover from './components/Popover/index.js';
+// Avatar namespace (composed over bits-ui)
+export * as Avatar from './components/Avatar/index.js';
+// Card namespace
+export * as Card from './components/Card/index.js';
+// Alert namespace
+export * as Alert from './components/Alert/index.js';
+// Button variant types
+export { buttonVariants } from './components/Button/Button.svelte';
+// Badge variant types
+export { badgeVariants } from './components/Badge/Badge.svelte';
+// Card variant types
+export { cardVariants } from './components/Card/CardRoot.svelte';
+// Alert variant types
+export { alertVariants } from './components/Alert/AlertRoot.svelte';
+// Input variant types
+export { inputVariants } from './components/Input/Input.svelte';
+// Variant helper and types
+export { defineVariants, } from './internal/variants';
+// Theme context utilities
+export { useTheme } from './context';
+// Theme types and token maps (re-export from theme subpath for convenience)
+export { lightTokens, darkTokens, themeToVars, } from './theme/tokens';

package/dist/internal/variants.d.ts

@@ -0,0 +1,44 @@
+/**
+ * defineVariants — typed CVA-like variant resolver.
+ *
+ * Returns a resolver function that maps variant × color × size props to a
+ * merged CSS class string. No external dependencies. No `any` in the public
+ * surface. Visual values live in scoped CSS keyed by the emitted class names.
+ */
+/** Maps axis value names to CSS class strings */
+export type VariantSchema = Record<string, Record<string, string>>;
+export interface VariantConfig<S extends VariantSchema> {
+    /** Base class always included in the output */
+    base?: string;
+    /** Per-axis variant definitions: axis → value → class */
+    variants: S;
+    /** Default value for each axis (used when props are omitted) */
+    defaultVariants?: {
+        [K in keyof S]?: keyof S[K];
+    };
+}
+/** Props accepted by the resolver (each axis is optional + extra class string) */
+export type VariantProps<S extends VariantSchema> = {
+    [K in keyof S]?: keyof S[K];
+} & {
+    class?: string;
+};
+/**
+ * Create a variant resolver function from a config.
+ *
+ * @example
+ * const button = defineVariants({
+ *   base: 'btn',
+ *   variants: {
+ *     variant: { solid: 'btn--solid', ghost: 'btn--ghost' },
+ *     size:    { sm: 'btn--sm', md: 'btn--md' },
+ *   },
+ *   defaultVariants: { variant: 'solid', size: 'md' },
+ * });
+ *
+ * button()                          // → 'btn btn--solid btn--md'
+ * button({ variant: 'ghost' })      // → 'btn btn--ghost btn--md'
+ * button({ class: 'extra' })        // → 'btn btn--solid btn--md extra'
+ */
+export declare function defineVariants<S extends VariantSchema>(config: VariantConfig<S>): (props?: VariantProps<S>) => string;
+//# sourceMappingURL=variants.d.ts.map

package/dist/internal/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../src/lib/internal/variants.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,iDAAiD;AACjD,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAEnE,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,aAAa;IACpD,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,EAAE,CAAC,CAAC;IACZ,gEAAgE;IAChE,eAAe,CAAC,EAAE;SACf,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;KAC5B,CAAC;CACH;AAED,kFAAkF;AAClF,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,aAAa,IAAI;KACjD,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;CAC5B,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAMvB;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,aAAa,EACpD,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,GACvB,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,MAAM,CAgCrC"}