sve-ui 0.1.2 → 0.2.1

package/dist/components/Avatar/AvatarRoot.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { Avatar } from 'bits-ui';
+  import type { ComponentProps } from 'svelte';
+  import type { Snippet } from 'svelte';
+
+  type BitsRootProps = ComponentProps<typeof Avatar.Root>;
+
+  type Size = 'sm' | 'md' | 'lg';
+  type Shape = 'circle' | 'square';
+
+  interface Props extends Omit<BitsRootProps, 'class'> {
+    size?: Size;
+    shape?: Shape;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    size = 'md',
+    shape = 'circle',
+    class: cls,
+    children,
+    ...rest
+  }: Props = $props();
+
+  const className = $derived(
+    [
+      'sve-avatar',
+      `sve-avatar--${size}`,
+      `sve-avatar--${shape}`,
+      cls ?? '',
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<Avatar.Root
+  class={className}
+  data-slot="avatar-root"
+  {children}
+  {...rest}
+/>
+
+<style>
+  :global(.sve-avatar) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+    font-family: var(--sve-font-family-sans);
+    font-weight: var(--sve-font-weight-medium);
+    background-color: var(--sve-color-default-surface);
+    color: var(--sve-color-default-foreground);
+  }
+
+  /* --- Sizes --- */
+  :global(.sve-avatar--sm) { width: 2rem;   height: 2rem;   font-size: var(--sve-font-size-sm); }
+  :global(.sve-avatar--md) { width: 2.5rem; height: 2.5rem; font-size: var(--sve-font-size-md); }
+  :global(.sve-avatar--lg) { width: 3.5rem; height: 3.5rem; font-size: var(--sve-font-size-lg); }
+
+  /* --- Shapes --- */
+  :global(.sve-avatar--circle) { border-radius: var(--sve-radius-full); }
+  :global(.sve-avatar--square) { border-radius: var(--sve-radius-md); }
+</style>

package/dist/components/Avatar/AvatarRoot.svelte.d.ts

@@ -0,0 +1,16 @@
+import { Avatar } from 'bits-ui';
+import type { ComponentProps } from 'svelte';
+import type { Snippet } from 'svelte';
+type BitsRootProps = ComponentProps<typeof Avatar.Root>;
+type Size = 'sm' | 'md' | 'lg';
+type Shape = 'circle' | 'square';
+interface Props extends Omit<BitsRootProps, 'class'> {
+    size?: Size;
+    shape?: Shape;
+    class?: string;
+    children?: Snippet;
+}
+declare const AvatarRoot: import("svelte").Component<Props, {}, "">;
+type AvatarRoot = ReturnType<typeof AvatarRoot>;
+export default AvatarRoot;
+//# sourceMappingURL=AvatarRoot.svelte.d.ts.map

package/dist/components/Avatar/AvatarRoot.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarRoot.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Avatar/AvatarRoot.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AAExD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/B,KAAK,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEjC,UAAU,KAAM,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC;IAClD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoCH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,15 @@
+/**
+ * Avatar namespace — sve-ui styled wrappers over bits-ui Avatar primitives.
+ *
+ * Root: styled wrapper adding size + shape via --sve-* tokens.
+ * Image: styled wrapper, forwards img attributes.
+ * Fallback: styled wrapper, shown on load error or while loading.
+ *
+ * Confirmed Bits UI 2.18.1 API:
+ *   import { Avatar } from 'bits-ui'
+ *   Avatar.Root / Avatar.Image / Avatar.Fallback
+ */
+export { default as Root } from './AvatarRoot.svelte';
+export { default as Image } from './AvatarImage.svelte';
+export { default as Fallback } from './AvatarFallback.svelte';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Avatar/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/components/Avatar/index.js

@@ -0,0 +1,14 @@
+/**
+ * Avatar namespace — sve-ui styled wrappers over bits-ui Avatar primitives.
+ *
+ * Root: styled wrapper adding size + shape via --sve-* tokens.
+ * Image: styled wrapper, forwards img attributes.
+ * Fallback: styled wrapper, shown on load error or while loading.
+ *
+ * Confirmed Bits UI 2.18.1 API:
+ *   import { Avatar } from 'bits-ui'
+ *   Avatar.Root / Avatar.Image / Avatar.Fallback
+ */
+export { default as Root } from './AvatarRoot.svelte';
+export { default as Image } from './AvatarImage.svelte';
+export { default as Fallback } from './AvatarFallback.svelte';

package/dist/components/Badge/Badge.svelte

@@ -0,0 +1,125 @@
+<script module lang="ts">
+  import { defineVariants } from '../../internal/variants';
+
+  type Variant = 'solid' | 'outline' | 'subtle';
+  type Color = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default';
+  type Size = 'sm' | 'md' | 'lg';
+
+  export const badgeVariants = defineVariants({
+    base: 'sve-badge',
+    variants: {
+      variant: {
+        solid:   'sve-badge--solid',
+        outline: 'sve-badge--outline',
+        subtle:  'sve-badge--subtle',
+      },
+      color: {
+        primary:   'sve-c-primary',
+        secondary: 'sve-c-secondary',
+        success:   'sve-c-success',
+        warning:   'sve-c-warning',
+        danger:    'sve-c-danger',
+        default:   'sve-c-default',
+      },
+      size: {
+        sm: 'sve-badge--sm',
+        md: 'sve-badge--md',
+        lg: 'sve-badge--lg',
+      },
+    },
+    defaultVariants: {
+      variant: 'subtle',
+      color:   'default',
+      size:    'md',
+    },
+  });
+
+  export type { Variant, Color, Size };
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'class'> {
+    variant?: Variant;
+    color?: Color;
+    size?: Size;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    variant,
+    color,
+    size,
+    class: cls,
+    children,
+    ...rest
+  }: Props = $props();
+
+  const className = $derived(
+    badgeVariants({ variant, color, size, class: cls })
+  );
+</script>
+
+<span class={className} {...rest}>
+  {@render children?.()}
+</span>
+
+<style>
+  .sve-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--sve-font-family-sans);
+    font-weight: var(--sve-font-weight-medium);
+    line-height: var(--sve-line-height-normal);
+    border-radius: var(--sve-radius-full);
+    border: 1px solid transparent;
+    white-space: nowrap;
+  }
+
+  /* --- Sizes --- */
+  .sve-badge--sm {
+    padding: 0 var(--sve-space-2);
+    font-size: var(--sve-font-size-sm);
+    height: 1.25rem;
+  }
+
+  .sve-badge--md {
+    padding: 0 var(--sve-space-3);
+    font-size: var(--sve-font-size-sm);
+    height: 1.5rem;
+  }
+
+  .sve-badge--lg {
+    padding: 0 var(--sve-space-4);
+    font-size: var(--sve-font-size-md);
+    height: 1.75rem;
+  }
+
+  /* --- Solid variant --- */
+  .sve-badge--solid.sve-c-primary   { background-color: var(--sve-color-primary);   color: var(--sve-color-primary-foreground);   border-color: var(--sve-color-primary); }
+  .sve-badge--solid.sve-c-secondary { background-color: var(--sve-color-secondary); color: var(--sve-color-secondary-foreground); border-color: var(--sve-color-secondary); }
+  .sve-badge--solid.sve-c-success   { background-color: var(--sve-color-success);   color: var(--sve-color-success-foreground);   border-color: var(--sve-color-success); }
+  .sve-badge--solid.sve-c-warning   { background-color: var(--sve-color-warning);   color: var(--sve-color-warning-foreground);   border-color: var(--sve-color-warning); }
+  .sve-badge--solid.sve-c-danger    { background-color: var(--sve-color-danger);    color: var(--sve-color-danger-foreground);    border-color: var(--sve-color-danger); }
+  .sve-badge--solid.sve-c-default   { background-color: var(--sve-color-default);   color: var(--sve-color-default-foreground);   border-color: var(--sve-color-default); }
+
+  /* --- Outline variant --- */
+  .sve-badge--outline.sve-c-primary   { background-color: transparent; color: var(--sve-color-primary);           border-color: var(--sve-color-primary-border); }
+  .sve-badge--outline.sve-c-secondary { background-color: transparent; color: var(--sve-color-secondary);         border-color: var(--sve-color-secondary-border); }
+  .sve-badge--outline.sve-c-success   { background-color: transparent; color: var(--sve-color-success);           border-color: var(--sve-color-success-border); }
+  .sve-badge--outline.sve-c-warning   { background-color: transparent; color: var(--sve-color-warning-foreground); border-color: var(--sve-color-warning-border); }
+  .sve-badge--outline.sve-c-danger    { background-color: transparent; color: var(--sve-color-danger);            border-color: var(--sve-color-danger-border); }
+  .sve-badge--outline.sve-c-default   { background-color: transparent; color: var(--sve-color-default-foreground); border-color: var(--sve-color-default-border); }
+
+  /* --- Subtle variant --- */
+  .sve-badge--subtle.sve-c-primary   { background-color: var(--sve-color-primary-surface);   color: var(--sve-color-primary);           border-color: transparent; }
+  .sve-badge--subtle.sve-c-secondary { background-color: var(--sve-color-secondary-surface); color: var(--sve-color-secondary);         border-color: transparent; }
+  .sve-badge--subtle.sve-c-success   { background-color: var(--sve-color-success-surface);   color: var(--sve-color-success);           border-color: transparent; }
+  .sve-badge--subtle.sve-c-warning   { background-color: var(--sve-color-warning-surface);   color: var(--sve-color-warning-foreground); border-color: transparent; }
+  .sve-badge--subtle.sve-c-danger    { background-color: var(--sve-color-danger-surface);    color: var(--sve-color-danger);            border-color: transparent; }
+  .sve-badge--subtle.sve-c-default   { background-color: var(--sve-color-default-surface);   color: var(--sve-color-default-foreground); border-color: transparent; }
+</style>

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

@@ -0,0 +1,37 @@
+type Variant = 'solid' | 'outline' | 'subtle';
+type Color = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default';
+type Size = 'sm' | 'md' | 'lg';
+export declare const badgeVariants: (props?: import("../../internal/variants").VariantProps<{
+    variant: {
+        solid: string;
+        outline: string;
+        subtle: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        default: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}> | undefined) => string;
+export type { Variant, Color, Size };
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'class'> {
+    variant?: Variant;
+    color?: Color;
+    size?: Size;
+    class?: string;
+    children?: Snippet;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;
+//# sourceMappingURL=Badge.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badge/Badge.svelte.ts"],"names":[],"mappings":"AAKE,KAAK,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC9C,KAAK,KAAK,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AACpF,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;yBA2BxB,CAAC;AAEH,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AAGvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8BH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}