@engineio/ui 0.4.0

package/dist/components/ui/alert/alert.svelte

@@ -0,0 +1,114 @@
+<script lang="ts" module>
+  import { type VariantProps, tv } from "tailwind-variants"
+
+  // The panel is always neutral. A 3px bar inset down the left, with rounded
+  // ends, is the ONLY thing that says whether this is good, bad or a warning —
+  // the fill, the rule and the type never change, so a wall of alerts reads as
+  // one surface with a column of state down the side rather than as four
+  // different components.
+  //
+  // ON THE BRAND RULE. The brand prohibits "a coloured left-edge accent",
+  // twice, and it is worth being precise about what it prohibits: both
+  // wordings scope it to signalling identity — "to signal which sub-brand a
+  // card belongs to", "to indicate category or ownership" — with the reason
+  // given that the lockup does that job. This bar signals STATE, which no
+  // lockup can do and which nothing else in the system claims. That is the
+  // reading this component is built on. It is a reading, though, not an
+  // exemption, so it is raised in the README with the other deviations.
+  //
+  // `alertVariants` is the extension seam — see button.svelte for the
+  // `tv({ extend: … })` recipe.
+  export const alertVariants = tv({
+    base: [
+      "relative w-full rounded-media",
+      "border border-grey-700 bg-card",
+      // Left geometry: 20px to the bar, 3px of bar, then 13px before the text.
+      // The border gap is wider than the text gap on purpose — proximity is
+      // what groups the bar with the message it marks rather than with the
+      // panel edge it sits near. py-3.5 matches the bar's vertical inset.
+      "py-3.5 pr-4 pl-9",
+    ],
+    variants: {
+      // Applied to the bar, not the panel.
+      variant: {
+        default: "[--alert-bar:var(--color-grey-500)]",
+        success: "[--alert-bar:var(--color-success)]",
+        warning: "[--alert-bar:var(--color-warning)]",
+        danger: "[--alert-bar:var(--color-danger)]",
+        // shadcn's name for danger, kept so existing call sites resolve.
+        destructive: "[--alert-bar:var(--color-danger)]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  })
+
+  export type AlertVariant = VariantProps<typeof alertVariants>["variant"]
+</script>
+
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } from "../../../utils.js"
+  import X from "@lucide/svelte/icons/x"
+  import type { HTMLAttributes } from "svelte/elements"
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    variant = "default",
+    onDismiss = undefined,
+    dismissLabel = "Dismiss",
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: AlertVariant
+    /** Supply a handler to render the close control. Omit for a static alert. */
+    onDismiss?: (() => void) | undefined
+    dismissLabel?: string
+  } = $props()
+</script>
+
+<div
+  bind:this={ref}
+  class={cn(alertVariants({ variant }), onDismiss && "pr-11", className)}
+  {...restProps}
+  role="alert"
+>
+  <!--
+    Inset on all three sides with rounded ends, not flush to the edge. Two
+    reasons beyond the look: a flush bar has to be clipped by the panel's
+    radius, which meant `overflow-hidden` on the panel and a bar whose top and
+    bottom were shaved by the corners; and `inset-y-3.5` matches the panel's
+    `py-3.5` exactly, so the bar spans the content box and tracks the text
+    rather than the panel. A one-line alert gets a short bar, as it should.
+
+    A real element rather than a `before:` pseudo: it needs no `content-['']`
+    and cannot be knocked out by a consumer passing their own `before:`
+    utility. `aria-hidden` because the colour is decoration — the text has to
+    say what happened on its own.
+  -->
+  <span
+    aria-hidden="true"
+    class="absolute inset-y-3.5 left-5 w-[3px] rounded-control"
+    style="background-color: var(--alert-bar)"
+  ></span>
+
+  {@render children?.()}
+
+  {#if onDismiss}
+    <button
+      type="button"
+      onclick={onDismiss}
+      aria-label={dismissLabel}
+      class={cn(
+        "absolute top-3 right-3 grid size-6 place-items-center rounded-control",
+        "text-grey-400 transition-colors duration-140 ease-brand",
+        "hover:bg-white/6 hover:text-foreground",
+        "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+      )}
+    >
+      <X class="size-4" />
+    </button>
+  {/if}
+</div>

package/dist/components/ui/alert/alert.svelte.d.ts

@@ -0,0 +1,70 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const alertVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        success: string;
+        warning: string;
+        danger: string;
+        destructive: string;
+    };
+}, undefined, string[], import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        default: string;
+        success: string;
+        warning: string;
+        danger: string;
+        destructive: string;
+    };
+}, {
+    variant: {
+        default: string;
+        success: string;
+        warning: string;
+        danger: string;
+        destructive: string;
+    };
+}>, {
+    variant: {
+        default: string;
+        success: string;
+        warning: string;
+        danger: string;
+        destructive: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        success: string;
+        warning: string;
+        danger: string;
+        destructive: string;
+    };
+}, undefined, string[], import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        default: string;
+        success: string;
+        warning: string;
+        danger: string;
+        destructive: string;
+    };
+}, {
+    variant: {
+        default: string;
+        success: string;
+        warning: string;
+        danger: string;
+        destructive: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+import type { WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: AlertVariant;
+    /** Supply a handler to render the close control. Omit for a static alert. */
+    onDismiss?: (() => void) | undefined;
+    dismissLabel?: string;
+};
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/ui/alert/index.d.ts

@@ -0,0 +1,5 @@
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+export { alertVariants, type AlertVariant } from "./alert.svelte";
+export { Root, Description, Title, Root as Alert, Description as AlertDescription, Title as AlertTitle, };

package/dist/components/ui/alert/index.js

@@ -0,0 +1,7 @@
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+export { alertVariants } from "./alert.svelte";
+export { Root, Description, Title, 
+//
+Root as Alert, Description as AlertDescription, Title as AlertTitle, };

package/dist/components/ui/badge/badge.svelte

@@ -0,0 +1,96 @@
+<script lang="ts" module>
+  import { type VariantProps, tv } from "tailwind-variants"
+
+  // The system's one chip. Badge and Tag used to be separate components with
+  // a rule about which was which — solid pill for status, soft chip for
+  // category — and in practice that rule only ever generated arguments. This
+  // is the merged component: ONE chip, in the soft repository-label treatment
+  // (tinted fill, matching ink, 6px radius) for every job.
+  //
+  // It kept the name `Badge` because that is the name in use: 35 call sites in
+  // the engine repo say `<Badge>`, and none say `<Tag>`. Every variant those
+  // call sites reference — default, secondary, outline, success, destructive —
+  // survives below, so adopting this is a restyle rather than a migration.
+  //
+  // `badgeVariants` is the extension seam — see button.svelte for the
+  // `tv({ extend: … })` recipe.
+  //
+  // FILLS ARE TRANSLUCENT, AND THAT IS THE POINT. A chip has to read on the
+  // page (#0E0E0E), on a card (#161616) and on a table tile (#242424). An
+  // opaque grey fill can only be correct on one of them — the old `secondary`
+  // was grey-700, which vanished on a table tile, and a grey-800 fill would
+  // vanish on a card. A wash composites against whatever is behind it and
+  // stays roughly one step lighter everywhere. This is why there is no
+  // `solid` variant: an opaque chip is a surface-specific chip.
+  //
+  // ON THE BRAND INK. `default` sets its ink to `primary-300` #FF5C9B, not
+  // pure magenta: #FF006A on its own 12% tint measures 4.37:1, under AA, and
+  // the brand forbids magenta text below 15px bold. The lighter step gets
+  // 5.81:1 and ships today as `--brand-300` in integration.css. As a
+  // side-effect this fixes the contrast contradiction the old solid badge
+  // carried — white on magenta at 11px was 3.9:1, a known AA failure.
+  //
+  // ON THE HUES. The status variants are FUNCTIONAL — success, warning and
+  // danger report state. Do not use them as a categorical palette; `success`
+  // meaning "slots" because green looked right spends the only signal they
+  // carry. A real categorical palette is still a brand-team decision.
+  export const badgeVariants = tv({
+    base: [
+      "inline-flex items-center rounded-tag px-2 py-0.5",
+      "text-[13px] font-semibold whitespace-nowrap",
+      "transition-colors duration-140 ease-brand",
+    ],
+    variants: {
+      variant: {
+        // Brand. The default, because an unqualified chip is an Engine chip.
+        default: "bg-primary-tint-12 text-primary-300 hover:bg-primary-tint-24",
+        // Neutral. The workhorse — a label with no state attached.
+        secondary: "bg-white/8 text-grey-200 hover:bg-white/12",
+        // No fill at all, for a chip on an already-busy surface.
+        outline:
+          "border-[1.5px] border-grey-600 text-foreground hover:border-grey-500",
+        // Engine Integration's reserved accent. Not in use — see tokens.css.
+        partner: "bg-partner-yellow-tint-12 text-partner-yellow",
+
+        // Status. Functional colour only.
+        success: "bg-success-tint-12 text-success",
+        warning: "bg-warning-tint-12 text-warning",
+        danger: "bg-danger-tint-12 text-danger",
+        // shadcn's name for danger, kept so existing call sites resolve.
+        destructive: "bg-danger-tint-12 text-danger",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  })
+
+  export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"]
+</script>
+
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } from "../../../utils.js"
+  import type { HTMLAnchorAttributes } from "svelte/elements"
+
+  let {
+    ref = $bindable(null),
+    href,
+    class: className,
+    variant = "default",
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAnchorAttributes> & {
+    variant?: BadgeVariant
+  } = $props()
+</script>
+
+<svelte:element
+  this={href ? "a" : "span"}
+  bind:this={ref}
+  {href}
+  class={cn(badgeVariants({ variant }), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</svelte:element>

package/dist/components/ui/badge/badge.svelte.d.ts

@@ -0,0 +1,88 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        outline: string;
+        partner: string;
+        success: string;
+        warning: string;
+        danger: string;
+        destructive: string;
+    };
+}, undefined, string[], import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        default: string;
+        secondary: string;
+        outline: string;
+        partner: string;
+        success: string;
+        warning: string;
+        danger: string;
+        destructive: string;
+    };
+}, {
+    variant: {
+        default: string;
+        secondary: string;
+        outline: string;
+        partner: string;
+        success: string;
+        warning: string;
+        danger: string;
+        destructive: string;
+    };
+}>, {
+    variant: {
+        default: string;
+        secondary: string;
+        outline: string;
+        partner: string;
+        success: string;
+        warning: string;
+        danger: string;
+        destructive: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        outline: string;
+        partner: string;
+        success: string;
+        warning: string;
+        danger: string;
+        destructive: string;
+    };
+}, undefined, string[], import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        default: string;
+        secondary: string;
+        outline: string;
+        partner: string;
+        success: string;
+        warning: string;
+        danger: string;
+        destructive: string;
+    };
+}, {
+    variant: {
+        default: string;
+        secondary: string;
+        outline: string;
+        partner: string;
+        success: string;
+        warning: string;
+        danger: string;
+        destructive: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+import type { WithElementRef } from "../../../utils.js";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
+    variant?: BadgeVariant;
+};
+declare const Badge: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/ui/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";

package/dist/components/ui/badge/index.js

@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants } from "./badge.svelte";

package/dist/components/ui/button/button.svelte

@@ -0,0 +1,137 @@
+<script lang="ts" module>
+  import type { WithElementRef } from "bits-ui"
+  import type {
+    HTMLAnchorAttributes,
+    HTMLButtonAttributes,
+  } from "svelte/elements"
+  import { type VariantProps, tv } from "tailwind-variants"
+
+  // The system's button: pill controls, bold labels, 140ms mechanical
+  // transitions, a 0.98 press and a magenta focus ring.
+  //
+  // THIS IS THE EXTENSION SEAM. `buttonVariants` is exported so a product can
+  // add its own variants without forking the component or waiting on a
+  // release here:
+  //
+  //     // $lib/components/ui/button-variants.ts
+  //     import { buttonVariants } from "@engineio/ui/components/ui/button"
+  //     import { tv } from "tailwind-variants"
+  //
+  //     export const appButtonVariants = tv({
+  //       extend: buttonVariants,
+  //       variants: {
+  //         variant: {
+  //           tab: "bg-transparent text-grey-300 hover:bg-white/6 hover:text-foreground",
+  //           play: "bg-primary text-primary-foreground hover:bg-primary-press",
+  //         },
+  //       },
+  //     })
+  //
+  // Brand rules (shape, weight, motion, focus) live here and are shared.
+  // Product variants live in the product. The upstream engine button carried
+  // `tab`, `tab-active`, `drawer`, `play` and `filled` in this file; they are
+  // app concerns and have been left to the apps. Its `success` variant was a
+  // stock Tailwind green standing in for a status colour that did not exist —
+  // it is back below, on the real token. See styles/tokens.css.
+  export const buttonVariants = tv({
+    base: [
+      "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap",
+      "rounded-control text-[15px] font-bold tracking-[-0.01em]",
+      "transition-[background-color,color,border-color,transform] duration-140 ease-brand",
+      "active:scale-[0.98]",
+      "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+      "disabled:pointer-events-none disabled:opacity-38",
+      "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    ],
+    variants: {
+      variant: {
+        // The system's four: primary, inverse, secondary, ghost.
+        default: "bg-primary text-primary-foreground hover:bg-primary-press",
+        inverse: "bg-white text-background hover:bg-grey-100",
+        outline:
+          "border-[1.5px] border-grey-500 bg-transparent text-foreground hover:bg-white/6",
+        ghost: "bg-transparent text-foreground hover:bg-white/6",
+
+        secondary: "bg-grey-800 text-foreground hover:bg-grey-700",
+        link: "text-primary underline-offset-4 hover:underline",
+        icon: "bg-transparent text-foreground hover:bg-white/6",
+
+        // Status. Ink is Off Black on every status fill — white fails AA on
+        // all three. These are the only non-magenta fills in the button, and
+        // they are functional rather than decorative: reach for them when the
+        // button's OUTCOME is destructive or confirming, never for emphasis.
+        destructive:
+          "bg-danger text-danger-foreground hover:bg-danger/90",
+        success: "bg-success text-success-foreground hover:bg-success/90",
+      },
+      size: {
+        // 32 / 40 / 48px with the system's 12 / 18 / 24px padding.
+        default: "h-10 px-4.5",
+        sm: "h-8 px-3 text-[13px]",
+        lg: "h-12 px-6 text-lg",
+        icon: "size-10 rounded-full p-0",
+        "icon-sm": "size-8 rounded-full p-0",
+        "icon-lg": "size-12 rounded-full p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  })
+
+  export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"]
+  export type ButtonSize = VariantProps<typeof buttonVariants>["size"]
+
+  export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+    WithElementRef<HTMLAnchorAttributes> & {
+      variant?: ButtonVariant
+      size?: ButtonSize
+      loading?: boolean
+    }
+</script>
+
+<script lang="ts">
+  import { cn } from "../../../utils.js"
+  import LoaderCircle from "@lucide/svelte/icons/loader-circle"
+
+  let {
+    class: className,
+    variant = "default",
+    size = "default",
+    ref = $bindable(null),
+    href = undefined,
+    type = "button",
+    loading = false,
+    disabled = false,
+    children,
+    ...restProps
+  }: ButtonProps = $props()
+</script>
+
+{#if href}
+  <a
+    bind:this={ref}
+    class={cn(buttonVariants({ variant, size }), className)}
+    {href}
+    {...restProps}
+  >
+    {#if loading}
+      <LoaderCircle class="animate-spin" />
+    {/if}
+    {@render children?.()}
+  </a>
+{:else}
+  <button
+    bind:this={ref}
+    class={cn(buttonVariants({ variant, size }), className)}
+    {type}
+    disabled={disabled || loading}
+    {...restProps}
+  >
+    {#if loading}
+      <LoaderCircle class="animate-spin" />
+    {/if}
+    {@render children?.()}
+  </button>
+{/if}

package/dist/components/ui/button/button.svelte.d.ts

@@ -0,0 +1,154 @@
+import type { WithElementRef } from "bits-ui";
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+import { type VariantProps } from "tailwind-variants";
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        inverse: string;
+        outline: string;
+        ghost: string;
+        secondary: string;
+        link: string;
+        icon: string;
+        destructive: string;
+        success: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        "icon-sm": string;
+        "icon-lg": string;
+    };
+}, undefined, string[], import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        default: string;
+        inverse: string;
+        outline: string;
+        ghost: string;
+        secondary: string;
+        link: string;
+        icon: string;
+        destructive: string;
+        success: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        "icon-sm": string;
+        "icon-lg": string;
+    };
+}, {
+    variant: {
+        default: string;
+        inverse: string;
+        outline: string;
+        ghost: string;
+        secondary: string;
+        link: string;
+        icon: string;
+        destructive: string;
+        success: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        "icon-sm": string;
+        "icon-lg": string;
+    };
+}>, {
+    variant: {
+        default: string;
+        inverse: string;
+        outline: string;
+        ghost: string;
+        secondary: string;
+        link: string;
+        icon: string;
+        destructive: string;
+        success: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        "icon-sm": string;
+        "icon-lg": string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        inverse: string;
+        outline: string;
+        ghost: string;
+        secondary: string;
+        link: string;
+        icon: string;
+        destructive: string;
+        success: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        "icon-sm": string;
+        "icon-lg": string;
+    };
+}, undefined, string[], import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        default: string;
+        inverse: string;
+        outline: string;
+        ghost: string;
+        secondary: string;
+        link: string;
+        icon: string;
+        destructive: string;
+        success: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        "icon-sm": string;
+        "icon-lg": string;
+    };
+}, {
+    variant: {
+        default: string;
+        inverse: string;
+        outline: string;
+        ghost: string;
+        secondary: string;
+        link: string;
+        icon: string;
+        destructive: string;
+        success: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        "icon-sm": string;
+        "icon-lg": string;
+    };
+}>, unknown, unknown, undefined>>;
+export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+};
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/ui/button/index.d.ts

@@ -0,0 +1,2 @@
+import Root, { type ButtonProps, type ButtonSize, type ButtonVariant, buttonVariants } from "./button.svelte";
+export { Root, type ButtonProps as Props, Root as Button, buttonVariants, type ButtonProps, type ButtonSize, type ButtonVariant, };