@ekanos/ui 0.1.0

package/dist/alert.d.ts

@@ -0,0 +1,12 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+
+export { Alert, AlertDescription, AlertTitle };

package/dist/alert.js

@@ -0,0 +1,92 @@
+// ../ui/src/shadcn/alert.tsx
+import { cva } from "class-variance-authority";
+
+// ../ui/src/lib/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ../ui/src/shadcn/alert.tsx
+import { jsx } from "react/jsx-runtime";
+var alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>i]:grid-cols-[auto_1fr] has-[>i]:gap-x-3 has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>i]:shrink-0 [&>i]:translate-y-0.5 [&>i]:text-current [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        /*
+         * The `-strong` steps, not the base tokens.
+         *
+         * An alert's title and description are small text, so 4.5:1 applies —
+         * and the base status colours are FILL colours. `--destructive` reads
+         * 2.66:1 as dark-mode text on `--card`, and `--success` reads 3.94:1 on
+         * a light `bg-success/5` tint. Both tokens already ship a text step for
+         * exactly this; `--warning` and `--info` clear AA as-is and keep theirs.
+         *
+         * The description drops to /90 of the same step rather than of the base,
+         * so it stays above the floor too.
+         */
+        destructive: "bg-card text-destructive-strong *:data-[slot=alert-description]:text-destructive-strong/90 [&>svg]:text-current",
+        success: "bg-card text-success-strong *:data-[slot=alert-description]:text-success-strong/90 [&>svg]:text-current",
+        warning: "bg-card text-warning *:data-[slot=alert-description]:text-warning/90 [&>svg]:text-current",
+        info: "bg-card text-info *:data-[slot=alert-description]:text-info/90 [&>svg]:text-current"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Alert({
+  className,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert",
+      role: "alert",
+      className: cn(alertVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: cn(
+        // Wraps rather than clamps: an alert title is the sentence that names
+        // the problem, and a clamped one on a 390px screen names half of it.
+        "col-start-2 min-h-4 font-medium tracking-tight text-balance",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Alert,
+  AlertDescription,
+  AlertTitle
+};

package/dist/badge.d.ts

@@ -0,0 +1,12 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "success" | "warning" | "info" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type BadgeProps = useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>;
+declare function Badge({ className, variant, render, ...props }: BadgeProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+
+export { Badge, type BadgeProps, badgeVariants };

package/dist/badge.js

@@ -0,0 +1,60 @@
+// ../ui/src/shadcn/badge.tsx
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+
+// ../ui/src/lib/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ../ui/src/shadcn/badge.tsx
+var badgeVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "bg-destructive text-destructive-foreground focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+        // `text-success-strong`, not `text-success`: a badge label is `text-xs`,
+        // and the base green reaches only 4.19:1 on `--background`. The strong
+        // step clears AA on both card and page, and is the same token in dark.
+        success: "border-success text-success-strong",
+        warning: "border-warning text-warning",
+        info: "border-info text-info"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps(
+      {
+        "data-slot": "badge",
+        "data-variant": variant,
+        className: cn(badgeVariants({ variant }), className)
+      },
+      props
+    )
+  });
+}
+export {
+  Badge,
+  badgeVariants
+};

package/dist/button.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { VariantProps } from 'class-variance-authority';
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "success" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonProps = Button$1.Props & VariantProps<typeof buttonVariants>;
+declare function Button({ className, variant, size, ...props }: ButtonProps): React.JSX.Element;
+
+export { Button, type ButtonProps, buttonVariants };

package/dist/button.js

@@ -0,0 +1,64 @@
+// ../ui/src/shadcn/button.tsx
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+
+// ../ui/src/lib/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ../ui/src/shadcn/button.tsx
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary-strong text-primary-foreground hover:bg-primary-strong/90",
+        destructive: "bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 text-destructive-foreground",
+        outline: "bg-background hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 border shadow-xs",
+        success: "bg-success-strong text-success-foreground hover:bg-success-strong/90 focus-visible:ring-success-strong/30",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ButtonPrimitive,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+export {
+  Button,
+  buttonVariants
+};

package/dist/card.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+
+/**
+ * Takes a `render` prop (the Base UI convention — see packages/ui/CLAUDE.md) so
+ * a card that is itself a destination can BE the link rather than wrapping one:
+ * `<Card render={<Link href={href} />}>`. Without it, clickable cards get
+ * hand-styled anchors and the surface drifts from this one.
+ */
+declare function Card({ className, render, ...props }: useRender.ComponentProps<'div'>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/card.js

@@ -0,0 +1,108 @@
+// ../ui/src/shadcn/card.tsx
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+// ../ui/src/lib/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ../ui/src/shadcn/card.tsx
+import { jsx } from "react/jsx-runtime";
+function Card({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps(
+      {
+        "data-slot": "card",
+        className: cn(
+          "bg-card text-card-foreground shadow-card flex flex-col gap-6 rounded-lg border-0 py-5",
+          className
+        )
+      },
+      props
+    )
+  });
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-5 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-5", className),
+      ...props
+    }
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center px-5 [.border-t]:pt-5", className),
+      ...props
+    }
+  );
+}
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+};

package/dist/dialog.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
+
+declare function Dialog({ ...props }: Dialog$1.Root.Props): React.JSX.Element;
+declare function DialogTrigger({ ...props }: Dialog$1.Trigger.Props): React.JSX.Element;
+declare function DialogPortal({ ...props }: Dialog$1.Portal.Props): React.JSX.Element;
+declare function DialogClose({ ...props }: Dialog$1.Close.Props): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: Dialog$1.Backdrop.Props): React.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: Dialog$1.Popup.Props & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<'div'> & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: Dialog$1.Title.Props): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: Dialog$1.Description.Props): React.JSX.Element;
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };