@robr0/design-system 0.1.0

package/components/AppSidebar/AppSidebar.js

@@ -0,0 +1,272 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useCallback } from "react";
+import "./AppSidebar.css";
+import "../../fonts/material-symbols.css";
+function DefaultLogo() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M18.0309 14.98C18.6612 14.8653 19.2184 14.6623 19.7208 14.3712C20.214 14.08 20.6343 13.7358 20.9814 13.3211C21.3285 12.9063 21.5934 12.4387 21.776 11.9269C21.9587 11.4062 22.05 10.8592 22.05 10.2856C22.05 9.22672 21.8034 8.35314 21.3011 7.67368C20.8078 6.99423 20.1775 6.45596 19.4103 6.05889C18.6429 5.6618 17.7935 5.37943 16.8618 5.22942C15.9301 5.07059 15.0258 5 14.158 5L0 5C0 5 1.7355 8.8561 6.49444 8.8561C11.2534 8.8561 14.5417 8.8561 14.5417 8.8561C15.3638 8.8561 16.0123 8.99729 16.4691 9.28849C16.9257 9.57968 17.1541 10.0121 17.1541 10.5856C17.1541 11.1062 16.8983 11.5122 16.3959 11.8033C15.8936 12.1033 15.2725 12.2445 14.5417 12.2445C14.5417 12.2445 7.84631 12.2445 4.28395 12.2445C0.876885 12.2445 1.18745 15.5535 1.18745 15.5535L1.18745 19.8244C1.18745 19.8244 5.93725 19.8068 5.93725 15.9065H13.2263C16.9714 21.2627 23 19.8244 23 19.8244L18.0309 14.98Z",
+            fill: "url(#sidebar_paint0)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            opacity: "0.4",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8 8.69492C12.0901 8.69492 14.6165 8.70339 14.6165 8.70339C16.5233 8.76271 16.9046 9.10173 17 9.5C17 6.11865 13.0434 5 11.0795 5C9.11546 5 8 5 8 5V8.69492Z",
+            fill: "url(#sidebar_paint1)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            opacity: "0.5",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M14.2646 5.38135C14.2646 5.38135 13.2763 5 12.3696 5C10.5018 5 9.44108 5 9.44108 5L1 5C1 5 2.72267 6.89831 7.44641 6.89831L13.4213 6.90678C17.3472 6.90678 17.9094 9.61018 18 10C18 7.5678 16.0507 6.04237 14.2646 5.38135Z",
+            fill: "url(#sidebar_paint2)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            opacity: "0.4",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M13 12.5C11.9827 12.5 10.372 12.5 9 12.5C6.30269 12.5 6 15.5 6 15.5H13V12.5Z",
+            fill: "url(#sidebar_paint3)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            opacity: "0.5",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M6 13C4.69445 13 5.42838 13 4.39805 13C1.76576 13 2.0057 15.6193 2.0057 15.6193L2.0057 19C2.0057 19 3.57237 17.7218 3.57237 16.206C3.57237 14.6904 3.95346 13 6 13Z",
+            fill: "url(#sidebar_paint4)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            opacity: "0.5",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M17.947 15C17.947 15 17.4185 15.1645 16 15C18.392 20.0731 23 19.9999 23 19.9999L17.947 15Z",
+            fill: "url(#sidebar_paint5)"
+          }
+        ),
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("linearGradient", { id: "sidebar_paint0", x1: "3.83825", y1: "15.8618", x2: "13.4908", y2: "5.78849", gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsx("stop", { stopColor: "#2980B9" }),
+            /* @__PURE__ */ jsx("stop", { offset: "0.5484", stopColor: "#2980B9" }),
+            /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#34495E" })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: "sidebar_paint1", x1: "9.8045", y1: "7.5", x2: "16.6666", y2: "7.5", gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsx("stop", { stopColor: "#2980B9" }),
+            /* @__PURE__ */ jsx("stop", { offset: "0.5484", stopColor: "#2980B9" }),
+            /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#34495E" })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: "sidebar_paint2", x1: "0.874018", y1: "7.27631", x2: "9.44862", y2: "8.80891", gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsx("stop", { stopColor: "#2980B9" }),
+            /* @__PURE__ */ jsx("stop", { offset: "0.5484", stopColor: "#2980B9" }),
+            /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#34495E" })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: "sidebar_paint3", x1: "14.3715", y1: "14", x2: "7.79961", y2: "14", gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsx("stop", { stopColor: "#2980B9" }),
+            /* @__PURE__ */ jsx("stop", { offset: "0.5484", stopColor: "#2980B9" }),
+            /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#34495E" })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: "sidebar_paint4", x1: "4", y1: "18.7627", x2: "4", y2: "15.6662", gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsx("stop", { stopColor: "#2980B9" }),
+            /* @__PURE__ */ jsx("stop", { offset: "0.5484", stopColor: "#2980B9" }),
+            /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#34495E" })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: "sidebar_paint5", x1: "21.5356", y1: "19.143", x2: "19.9551", y2: "16.6911", gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsx("stop", { stopColor: "#2980B9" }),
+            /* @__PURE__ */ jsx("stop", { offset: "0.5484", stopColor: "#2980B9" }),
+            /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#34495E" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+const AppSidebar = ({
+  sections,
+  profile,
+  activeKey,
+  activeSubKey,
+  defaultExpanded = false,
+  expanded: controlledExpanded,
+  onExpandedChange,
+  onProfileMore,
+  className = "",
+  logo,
+  logoText = "robr0"
+}) => {
+  const baseClass = "ds-app-sidebar";
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const isExpanded = controlledExpanded ?? internalExpanded;
+  const toggleExpanded = useCallback(() => {
+    const next = !isExpanded;
+    setInternalExpanded(next);
+    onExpandedChange?.(next);
+  }, [isExpanded, onExpandedChange]);
+  const [openKeys, setOpenKeys] = useState(/* @__PURE__ */ new Set());
+  const toggleAccordion = useCallback((key) => {
+    setOpenKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+  const classes = [
+    baseClass,
+    isExpanded ? `${baseClass}--expanded` : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("nav", { className: classes, "aria-label": "App navigation", children: [
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__top`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__logo`, children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `${baseClass}__logo-inner`,
+            onClick: !isExpanded ? toggleExpanded : void 0,
+            role: !isExpanded ? "button" : void 0,
+            tabIndex: !isExpanded ? 0 : void 0,
+            "aria-label": !isExpanded ? "Expand sidebar" : void 0,
+            onKeyDown: !isExpanded ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                toggleExpanded();
+              }
+            } : void 0,
+            style: !isExpanded ? { cursor: "pointer" } : void 0,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__logo-icon`, children: logo || /* @__PURE__ */ jsx(DefaultLogo, {}) }),
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__logo-text`, children: logoText })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: `${baseClass}__toggle`,
+            onClick: toggleExpanded,
+            "aria-label": isExpanded ? "Collapse sidebar" : "Expand sidebar",
+            children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: isExpanded ? "left_panel_close" : "left_panel_open" })
+          }
+        )
+      ] }),
+      sections.map((section, si) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__nav`, children: [
+        section.category && /* @__PURE__ */ jsx("div", { className: `${baseClass}__category`, children: section.category }),
+        section.items.map((item) => {
+          const hasChildren = item.children && item.children.length > 0;
+          const isOpen = openKeys.has(item.key);
+          const isActive = activeKey === item.key;
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: [
+                  `${baseClass}__btn`,
+                  isActive ? `${baseClass}__btn--active` : ""
+                ].filter(Boolean).join(" "),
+                onClick: () => {
+                  if (hasChildren && isExpanded) {
+                    toggleAccordion(item.key);
+                  }
+                  item.onClick?.();
+                },
+                "aria-expanded": hasChildren ? isOpen : void 0,
+                title: !isExpanded ? item.label : void 0,
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: `${baseClass}__btn-left`, children: [
+                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-icon material-symbols-rounded`, children: item.icon }),
+                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-label`, children: item.label })
+                  ] }),
+                  hasChildren && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: [
+                        `${baseClass}__btn-chevron material-symbols-rounded`,
+                        isOpen ? `${baseClass}__btn-chevron--open` : ""
+                      ].filter(Boolean).join(" "),
+                      children: "chevron_right"
+                    }
+                  )
+                ]
+              }
+            ),
+            hasChildren && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: [
+                  `${baseClass}__sub-items`,
+                  isOpen && isExpanded ? `${baseClass}__sub-items--open` : ""
+                ].filter(Boolean).join(" "),
+                children: item.children.map((sub) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__sub-item`, children: [
+                  /* @__PURE__ */ jsx("div", { className: `${baseClass}__sub-line` }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: [
+                        `${baseClass}__sub-btn`,
+                        activeSubKey === sub.key ? `${baseClass}__sub-btn--active` : ""
+                      ].filter(Boolean).join(" "),
+                      onClick: sub.onClick,
+                      children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__sub-label`, children: sub.label })
+                    }
+                  )
+                ] }, sub.key))
+              }
+            )
+          ] }, item.key);
+        })
+      ] }, si))
+    ] }),
+    profile && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__profile`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__profile-left`, children: [
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__avatar`, children: profile.avatarUrl && /* @__PURE__ */ jsx("img", { src: profile.avatarUrl, alt: profile.name }) }),
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__profile-info`, children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__profile-name`, children: profile.name }),
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__profile-email`, children: profile.email })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `${baseClass}__profile-more`,
+          onClick: onProfileMore,
+          "aria-label": "Profile options",
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: "more_horiz" })
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  AppSidebar
+};

package/components/Avatar/Avatar.css

@@ -0,0 +1,133 @@
+/* ============================================
+   AVATAR COMPONENT
+   User profile image with initials fallback
+   ============================================ */
+
+.ds-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full); /* 999px */
+  background-color: var(--color-bg-container-secondary);
+  flex-shrink: 0;
+}
+
+/* ============================================
+   SIZES
+   ============================================ */
+
+.ds-avatar--sm {
+  width: 32px;
+  height: 32px;
+}
+
+.ds-avatar--md {
+  width: 40px;
+  height: 40px;
+}
+
+.ds-avatar--lg {
+  width: 56px;
+  height: 56px;
+}
+
+/* ============================================
+   IMAGE
+   ============================================ */
+
+.ds-avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  border-radius: var(--radius-full);
+}
+
+/* ============================================
+   INITIALS FALLBACK
+   ============================================ */
+
+.ds-avatar__initials {
+  font-family: var(--font-paragraph-em-family);
+  font-weight: var(--font-paragraph-em-weight);
+  color: var(--color-text-primary);
+  line-height: 1;
+  user-select: none;
+}
+
+.ds-avatar--sm .ds-avatar__initials {
+  font-size: 12px;
+}
+
+.ds-avatar--md .ds-avatar__initials {
+  font-size: 14px;
+}
+
+.ds-avatar--lg .ds-avatar__initials {
+  font-size: 18px;
+}
+
+/* ============================================
+   ICON FALLBACK
+   ============================================ */
+
+.ds-avatar__icon {
+  color: var(--color-icon-secondary);
+  line-height: 1;
+}
+
+.ds-avatar--sm .ds-avatar__icon {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-avatar--md .ds-avatar__icon {
+  --icon-size: var(--icon-size-md);
+}
+
+.ds-avatar--lg .ds-avatar__icon {
+  --icon-size: var(--icon-size-lg);
+}
+
+/* ============================================
+   STATUS INDICATOR
+   ============================================ */
+
+.ds-avatar__status {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-radius: var(--radius-full);
+  border: 2px solid var(--color-bg-page-primary);
+}
+
+.ds-avatar--sm .ds-avatar__status {
+  width: 10px;
+  height: 10px;
+}
+
+.ds-avatar--md .ds-avatar__status {
+  width: 12px;
+  height: 12px;
+}
+
+.ds-avatar--lg .ds-avatar__status {
+  width: 14px;
+  height: 14px;
+}
+
+.ds-avatar__status--online {
+  background-color: var(--color-status-positive-border);
+}
+
+.ds-avatar__status--away {
+  background-color: var(--color-status-warning-border);
+}
+
+.ds-avatar__status--offline {
+  background-color: var(--color-bg-container-border);
+}
+
+.ds-avatar__status--busy {
+  background-color: var(--color-status-error-border);
+}

package/components/Avatar/Avatar.d.ts

@@ -0,0 +1,20 @@
+export interface AvatarProps {
+    /** Image source URL */
+    src?: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** User's name — used for initials fallback */
+    name?: string;
+    /** Avatar size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Online status indicator */
+    status?: 'online' | 'away' | 'offline' | 'busy';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Avatar component for user profile images.
+ * Falls back to initials derived from the name prop,
+ * or a person icon when neither image nor name is provided.
+ */
+export declare const Avatar: ({ src, alt, name, size, status, className, }: AvatarProps) => import("react").JSX.Element;

package/components/Avatar/Avatar.js

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import "./Avatar.css";
+import "../../fonts/material-symbols.css";
+const Avatar = ({
+  src,
+  alt,
+  name,
+  size = "md",
+  status,
+  className = ""
+}) => {
+  const [imgError, setImgError] = useState(false);
+  const baseClass = "ds-avatar";
+  const sizeClass = `${baseClass}--${size}`;
+  const classes = [baseClass, sizeClass, className].filter(Boolean).join(" ");
+  const getInitials = (fullName) => {
+    const parts = fullName.trim().split(/\s+/);
+    if (parts.length === 1) return parts[0][0].toUpperCase();
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  };
+  const showImage = src && !imgError;
+  const showInitials = !showImage && name;
+  const showIcon = !showImage && !name;
+  const label = alt || name || "User avatar";
+  return /* @__PURE__ */ jsxs("span", { className: classes, role: "img", "aria-label": label, children: [
+    showImage && /* @__PURE__ */ jsx(
+      "img",
+      {
+        className: `${baseClass}__image`,
+        src,
+        alt: alt || name || "",
+        onError: () => setImgError(true)
+      }
+    ),
+    showInitials && /* @__PURE__ */ jsx("span", { className: `${baseClass}__initials`, "aria-hidden": "true", children: getInitials(name) }),
+    showIcon && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${baseClass}__icon material-symbols-rounded`,
+        "aria-hidden": "true",
+        children: "person"
+      }
+    ),
+    status && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${baseClass}__status ${baseClass}__status--${status}`,
+        "aria-label": status
+      }
+    )
+  ] });
+};
+export {
+  Avatar
+};

package/components/Avatar/demoAvatars.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Self-contained demo avatar portraits for docs and stories.
+ *
+ * The Avatar showcase (website page + Storybook stories) needs sample photos to
+ * demonstrate the image state. Pointing at a third-party host (e.g. pravatar.cc)
+ * made the docs depend on an external service — when it was rate-limited or
+ * blocked, every avatar rendered as a broken image with alt text bleeding
+ * through the circle. These inline SVG data URIs render the same everywhere with
+ * no network request, so the docs stay self-contained.
+ */
+/** Distinct demo portraits so multiple avatars in a row read as different people. */
+export declare const demoAvatar1: string;
+export declare const demoAvatar2: string;
+export declare const demoAvatar3: string;

package/components/Avatar/demoAvatars.js

@@ -0,0 +1,16 @@
+const portrait = (bg, accent) => {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
+    <rect width="96" height="96" fill="${bg}"/>
+    <circle cx="48" cy="38" r="17" fill="${accent}"/>
+    <path d="M18 84c0-16.6 13.4-30 30-30s30 13.4 30 30z" fill="${accent}"/>
+  </svg>`;
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+};
+const demoAvatar1 = portrait("#0F6C8C", "#8FD3E8");
+const demoAvatar2 = portrait("#C05B8B", "#F3C6DC");
+const demoAvatar3 = portrait("#4E7A3A", "#C7E6B2");
+export {
+  demoAvatar1,
+  demoAvatar2,
+  demoAvatar3
+};

package/components/Badge/Badge.css

@@ -0,0 +1,68 @@
+/* ============================================
+   BADGE COMPONENT
+   Small inline status labels
+   ============================================ */
+
+.ds-badge {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  padding: var(--padding-xxxs) var(--padding-sm); /* Figma: 2px 8px */
+  border: var(--border-xs) solid transparent;
+  border-radius: var(--radius-xs); /* Figma: 4px */
+  white-space: nowrap;
+}
+
+/* ============================================
+   VARIANT — INFO
+   ============================================ */
+
+.ds-badge--info {
+  background-color: var(--color-status-info-bg);
+  border-color: var(--color-status-info-border);
+  color: var(--color-status-info-text);
+}
+
+/* ============================================
+   VARIANT — POSITIVE
+   ============================================ */
+
+.ds-badge--positive {
+  background-color: var(--color-status-positive-bg);
+  border-color: var(--color-status-positive-border);
+  color: var(--color-status-positive-text);
+}
+
+/* ============================================
+   VARIANT — WARNING
+   ============================================ */
+
+.ds-badge--warning {
+  background-color: var(--color-status-warning-bg);
+  border-color: var(--color-status-warning-border);
+  color: var(--color-status-warning-text);
+}
+
+/* ============================================
+   VARIANT — ERROR
+   ============================================ */
+
+.ds-badge--error {
+  background-color: var(--color-status-error-bg);
+  border-color: var(--color-status-error-border);
+  color: var(--color-status-error-text);
+}
+
+/* ============================================
+   VARIANT — NEUTRAL
+   ============================================ */
+
+.ds-badge--neutral {
+  background-color: var(--color-status-neutral-bg);
+  border-color: var(--color-status-neutral-border);
+  color: var(--color-status-neutral-text);
+}

package/components/Badge/Badge.d.ts

@@ -0,0 +1,13 @@
+export interface BadgeProps {
+    /** Badge label text */
+    label: string;
+    /** Badge variant determines colour */
+    variant?: 'info' | 'positive' | 'warning' | 'error' | 'neutral';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Badge component for small inline status labels.
+ * Supports info, positive, warning, error, and neutral variants.
+ */
+export declare const Badge: ({ label, variant, className, }: BadgeProps) => import("react").JSX.Element;

package/components/Badge/Badge.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import "./Badge.css";
+const Badge = ({
+  label,
+  variant = "neutral",
+  className = ""
+}) => {
+  const baseClass = "ds-badge";
+  const variantClass = `${baseClass}--${variant}`;
+  const classes = [baseClass, variantClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { className: classes, role: "status", children: label });
+};
+export {
+  Badge
+};