@dogsbay/ui 0.2.0-beta.0

package/src/api-symbol/ApiSymbol.astro

@@ -0,0 +1,48 @@
+---
+import CodeBlock from "../code-block/CodeBlock.astro";
+import "./api-symbol.css";
+
+interface Props {
+  name: string;
+  kind: "class" | "method" | "meth" | "attr" | "func" | "module";
+  signature?: string | null;
+  bases?: string[];
+  type?: string | null;
+  default?: string | null;
+  level?: number;
+}
+
+const { name, kind, signature, bases = [], type, level = 2 } = Astro.props;
+const badgeKind = kind === "method" ? "meth" : kind;
+const slug = name.toLowerCase().replace(/[^\w]/g, "-").replace(/-+/g, "-");
+const HeadingTag = `h${level}` as any;
+---
+
+<div class="api-symbol not-prose" data-kind={kind}>
+  <div class="api-symbol-heading">
+    <span class={`api-badge api-badge-${badgeKind}`}>{badgeKind}</span>
+    <HeadingTag id={slug} class="!mt-0 !mb-0 !border-0">
+      <code class="text-lg font-semibold">{name}</code>
+    </HeadingTag>
+  </div>
+
+  {signature && (
+    <CodeBlock code={signature} lang="python" />
+  )}
+
+  {bases.length > 0 && (
+    <p class="api-symbol-bases">
+      Bases: {bases.map((b) => <code>{b}</code>)}
+    </p>
+  )}
+
+  {type && !signature && (
+    <p class="text-sm text-muted-foreground">
+      <strong>Type:</strong> <code>{type}</code>
+    </p>
+  )}
+
+  <div class="mt-3">
+    <slot />
+  </div>
+</div>

package/src/api-symbol/api-symbol.css

@@ -0,0 +1,89 @@
+/* API Symbol badges — colored by kind */
+.api-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.375rem;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+.api-badge-class {
+  background-color: oklch(0.55 0.18 265 / 0.2);
+  color: oklch(0.55 0.18 265);
+}
+.dark .api-badge-class {
+  background-color: oklch(0.7 0.15 265 / 0.2);
+  color: oklch(0.7 0.15 265);
+}
+
+.api-badge-meth {
+  background-color: oklch(0.55 0.15 155 / 0.2);
+  color: oklch(0.55 0.15 155);
+}
+.dark .api-badge-meth {
+  background-color: oklch(0.7 0.15 155 / 0.2);
+  color: oklch(0.7 0.15 155);
+}
+
+.api-badge-attr {
+  background-color: oklch(0.6 0.15 55 / 0.2);
+  color: oklch(0.6 0.15 55);
+}
+.dark .api-badge-attr {
+  background-color: oklch(0.75 0.15 55 / 0.2);
+  color: oklch(0.75 0.15 55);
+}
+
+.api-badge-func {
+  background-color: oklch(0.55 0.18 330 / 0.2);
+  color: oklch(0.55 0.18 330);
+}
+.dark .api-badge-func {
+  background-color: oklch(0.7 0.15 330 / 0.2);
+  color: oklch(0.7 0.15 330);
+}
+
+.api-badge-module {
+  background-color: oklch(0.5 0.12 200 / 0.2);
+  color: oklch(0.5 0.12 200);
+}
+.dark .api-badge-module {
+  background-color: oklch(0.65 0.12 200 / 0.2);
+  color: oklch(0.65 0.12 200);
+}
+
+/* API Symbol container */
+.api-symbol {
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--border, oklch(0.5 0 0 / 0.15));
+}
+
+.api-symbol:first-child {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+}
+
+.api-symbol-heading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.api-symbol-heading code {
+  font-size: 1.25em;
+  font-weight: 600;
+}
+
+.api-symbol-bases {
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+  margin-bottom: 0.5rem;
+}

package/src/api-symbol/index.ts

@@ -0,0 +1 @@
+export { default as ApiSymbol } from "./ApiSymbol.astro";

package/src/api-url-bar/ApiUrlBar.astro

@@ -0,0 +1,63 @@
+---
+/**
+ * Full endpoint URL display with method badge and copy button.
+ *
+ * Renders: [PUT] https://petstore.swagger.io/api/v3/pet/{petId}  [📋]
+ * Path parameters ({petId}) are highlighted in a different color.
+ *
+ * The whole URL bar background and left border tint to the method
+ * colour (Stripe / Redoc / Mintlify convention) so the request method
+ * is the first thing the eye lands on.
+ */
+import { tv } from "tailwind-variants";
+import MethodBadge from "../method-badge/MethodBadge.astro";
+import CopyButton from "../copy-button/CopyButton.astro";
+
+interface Props {
+  method: "get" | "post" | "put" | "patch" | "delete" | "head" | "options";
+  path: string;
+  baseUrl?: string;
+  class?: string;
+}
+
+const { method, path, baseUrl = "", class: className } = Astro.props;
+
+const fullUrl = `${baseUrl}${path}`;
+
+// Split path into segments, highlighting {param} parts
+const pathParts = path.split(/(\{[^}]+\})/g);
+
+const urlBar = tv({
+  base:
+    "flex items-center gap-3 rounded-lg border-l-4 border border-l-current px-4 py-3",
+  variants: {
+    method: {
+      get: "bg-api-get/10 border-l-api-get",
+      post: "bg-api-post/10 border-l-api-post",
+      put: "bg-api-put/10 border-l-api-put",
+      patch: "bg-api-patch/10 border-l-api-patch",
+      delete: "bg-api-delete/10 border-l-api-delete",
+      head: "bg-api-head/10 border-l-api-head",
+      options: "bg-muted/40 border-l-muted-foreground",
+    },
+  },
+});
+---
+
+<div class={urlBar({ method, class: className })}>
+  <MethodBadge method={method} />
+  <code class="flex-1 truncate text-sm font-medium">
+    {baseUrl && <span class="text-muted-foreground">{baseUrl}</span>}
+    {pathParts.map((part) =>
+      part.startsWith("{") ? (
+        <span class="text-api-put">{part}</span>
+      ) : (
+        <span>{part}</span>
+      )
+    )}
+  </code>
+  <CopyButton
+    text={fullUrl}
+    class="shrink-0"
+  />
+</div>

package/src/avatar/Avatar.astro

@@ -0,0 +1,57 @@
+---
+import { tv } from "tailwind-variants";
+
+const avatar = tv({
+  base: "relative inline-flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted",
+});
+
+const avatarImage = tv({
+  base: "aspect-square h-full w-full object-cover",
+});
+
+const avatarFallback = tv({
+  base: "flex h-full w-full items-center justify-center rounded-full bg-muted text-sm font-semibold text-muted-foreground",
+});
+
+interface Props {
+  src?: string;
+  alt?: string;
+  fallback?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+const { src, alt = "", fallback, class: className, ...rest } = Astro.props;
+
+const initials =
+  fallback ||
+  alt
+    .split(" ")
+    .map((w) => w[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+---
+
+<span class={avatar({ class: className })} {...rest}>
+  {
+    src ? (
+      <>
+        <img
+          class={avatarImage()}
+          src={src}
+          alt={alt}
+          width="40"
+          height="40"
+          onerror="this.hidden=true;this.nextElementSibling.hidden=false"
+        />
+        <span class={avatarFallback()} aria-hidden="true" hidden>
+          {initials}
+        </span>
+      </>
+    ) : (
+      <span class={avatarFallback()} aria-hidden="true">
+        {initials}
+      </span>
+    )
+  }
+</span>

package/src/avatar/index.ts

@@ -0,0 +1 @@
+export { default as Avatar } from "./Avatar.astro";

package/src/badge/Badge.astro

@@ -0,0 +1,37 @@
+---
+import { tv, type VariantProps } from "tailwind-variants";
+
+const badge = tv({
+  base: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors",
+  variants: {
+    variant: {
+      default: "border-transparent bg-primary text-primary-foreground",
+      secondary: "border-transparent bg-secondary text-secondary-foreground",
+      destructive:
+        "border-transparent bg-destructive text-destructive-foreground",
+      outline: "text-foreground",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+type BadgeVariants = VariantProps<typeof badge>;
+
+interface Props {
+  variant?: BadgeVariants["variant"];
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { variant = "default", class: className, ...rest } = Astro.props;
+---
+
+<span
+  class={badge({ variant, class: className })}
+  data-variant={variant}
+  {...rest}
+>
+  <slot />
+</span>

package/src/badge/index.ts

@@ -0,0 +1 @@
+export { default as Badge } from "./Badge.astro";

package/src/breadcrumb/Breadcrumb.astro

@@ -0,0 +1,32 @@
+---
+import { tv } from "tailwind-variants";
+
+const breadcrumb = tv({
+  base: "",
+});
+
+const breadcrumbList = tv({
+  base: "flex flex-wrap items-center gap-1 break-words text-sm text-muted-foreground sm:gap-1.5",
+});
+
+interface Props {
+  "aria-label"?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+const {
+  "aria-label": ariaLabel = "Breadcrumb",
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<nav
+  class={breadcrumb({ class: className })}
+  aria-label={ariaLabel}
+  {...rest}
+>
+  <ol class={breadcrumbList()} style="list-style: none; padding: 0; margin: 0;">
+    <slot />
+  </ol>
+</nav>

package/src/breadcrumb/BreadcrumbEllipsis.astro

@@ -0,0 +1,32 @@
+---
+import { tv } from "tailwind-variants";
+
+const breadcrumbEllipsis = tv({
+  base: "flex items-center text-muted-foreground",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+const { class: className, ...rest } = Astro.props;
+---
+
+<li class={breadcrumbEllipsis({ class: className })} {...rest}>
+  <span aria-hidden="true">
+    <slot>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+      >
+        <circle cx="5" cy="12" r="2"></circle>
+        <circle cx="12" cy="12" r="2"></circle>
+        <circle cx="19" cy="12" r="2"></circle>
+      </svg>
+    </slot>
+  </span>
+  <span class="sr-only">More pages</span>
+</li>

package/src/breadcrumb/BreadcrumbItem.astro

@@ -0,0 +1,41 @@
+---
+import { tv } from "tailwind-variants";
+
+const breadcrumbItem = tv({
+  base: "inline-flex items-center gap-1.5",
+});
+
+const breadcrumbLink = tv({
+  base: "text-muted-foreground no-underline transition-colors hover:text-foreground",
+});
+
+const breadcrumbPage = tv({
+  base: "font-medium text-foreground",
+});
+
+interface Props {
+  href?: string;
+  current?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+const { href, current = false, class: className, ...rest } = Astro.props;
+---
+
+<li class={breadcrumbItem({ class: className })} {...rest}>
+  {
+    current ? (
+      <span class={breadcrumbPage()} aria-current="page">
+        <slot />
+      </span>
+    ) : href ? (
+      <a class={breadcrumbLink()} href={href}>
+        <slot />
+      </a>
+    ) : (
+      <span>
+        <slot />
+      </span>
+    )
+  }
+</li>

package/src/breadcrumb/BreadcrumbSeparator.astro

@@ -0,0 +1,33 @@
+---
+import { tv } from "tailwind-variants";
+
+const breadcrumbSeparator = tv({
+  base: "flex items-center text-muted-foreground [&>svg]:h-3.5 [&>svg]:w-3.5",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+const { class: className, ...rest } = Astro.props;
+---
+
+<li
+  class={breadcrumbSeparator({ class: className })}
+  aria-hidden="true"
+  {...rest}
+>
+  <slot>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg
+    >
+  </slot>
+</li>

package/src/breadcrumb/index.ts

@@ -0,0 +1,4 @@
+export { default as Breadcrumb } from "./Breadcrumb.astro";
+export { default as BreadcrumbItem } from "./BreadcrumbItem.astro";
+export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.astro";
+export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.astro";

package/src/button/Button.astro

@@ -0,0 +1,70 @@
+---
+import { tv, type VariantProps } from "tailwind-variants";
+
+const button = tv({
+  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50",
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/90",
+      destructive:
+        "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+      outline:
+        "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground",
+      link: "text-primary underline-offset-4 hover:underline",
+    },
+    size: {
+      default: "h-10 px-4 py-2",
+      sm: "h-9 px-3 text-xs",
+      lg: "h-11 px-8",
+      icon: "h-10 w-10",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+type ButtonVariants = VariantProps<typeof button>;
+
+interface Props {
+  variant?: ButtonVariants["variant"];
+  size?: ButtonVariants["size"];
+  href?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  variant = "default",
+  size = "default",
+  href,
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+{
+  href ? (
+    <a
+      class={button({ variant, size, class: className })}
+      data-variant={variant}
+      data-size={size}
+      href={href}
+      {...rest}
+    >
+      <slot />
+    </a>
+  ) : (
+    <button
+      class={button({ variant, size, class: className })}
+      data-variant={variant}
+      data-size={size}
+      {...rest}
+    >
+      <slot />
+    </button>
+  )
+}

package/src/button/index.ts

@@ -0,0 +1 @@
+export { default as Button } from "./Button.astro";

package/src/card/Card.astro

@@ -0,0 +1,17 @@
+---
+import { tv } from "tailwind-variants";
+
+const card = tv({
+  base: "rounded-lg border bg-card text-card-foreground shadow-sm",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={card({ class: className })} {...rest}>
+  <slot />
+</div>

package/src/card/CardContent.astro

@@ -0,0 +1,17 @@
+---
+import { tv } from "tailwind-variants";
+
+const cardContent = tv({
+  base: "p-6 pt-0",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={cardContent({ class: className })} {...rest}>
+  <slot />
+</div>

package/src/card/CardDescription.astro

@@ -0,0 +1,17 @@
+---
+import { tv } from "tailwind-variants";
+
+const cardDescription = tv({
+  base: "text-sm text-muted-foreground",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+const { class: className, ...rest } = Astro.props;
+---
+
+<p class={cardDescription({ class: className })} {...rest}>
+  <slot />
+</p>

package/src/card/CardFooter.astro

@@ -0,0 +1,17 @@
+---
+import { tv } from "tailwind-variants";
+
+const cardFooter = tv({
+  base: "flex items-center p-6 pt-0",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={cardFooter({ class: className })} {...rest}>
+  <slot />
+</div>

package/src/card/CardHeader.astro

@@ -0,0 +1,17 @@
+---
+import { tv } from "tailwind-variants";
+
+const cardHeader = tv({
+  base: "flex flex-col space-y-1.5 p-6",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={cardHeader({ class: className })} {...rest}>
+  <slot />
+</div>

package/src/card/CardTitle.astro

@@ -0,0 +1,17 @@
+---
+import { tv } from "tailwind-variants";
+
+const cardTitle = tv({
+  base: "text-2xl font-semibold leading-none tracking-tight",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+const { class: className, ...rest } = Astro.props;
+---
+
+<h3 class={cardTitle({ class: className })} {...rest}>
+  <slot />
+</h3>

package/src/card/index.ts

@@ -0,0 +1,6 @@
+export { default as Card } from "./Card.astro";
+export { default as CardHeader } from "./CardHeader.astro";
+export { default as CardTitle } from "./CardTitle.astro";
+export { default as CardDescription } from "./CardDescription.astro";
+export { default as CardContent } from "./CardContent.astro";
+export { default as CardFooter } from "./CardFooter.astro";