@giddaa-housing/ui 0.1.0

package/README.md

@@ -0,0 +1,41 @@
+# @giddaa-housing/ui
+
+Product-agnostic Giddaa UI primitives, design tokens, and component styles.
+
+## Install
+
+```sh
+pnpm add @giddaa-housing/ui
+pnpm add react react-dom
+```
+
+`react` and `react-dom` are peer dependencies. Component implementation libraries are installed through `@giddaa-housing/ui` dependencies.
+
+## First Use
+
+Import the core package stylesheet once at the app root. Add the optional
+Giddaa theme and font only when the consuming app wants the default brand:
+
+```tsx
+import "@giddaa-housing/ui/styles.css";
+import "@giddaa-housing/ui/theme/giddaa.css";
+import "@giddaa-housing/ui/fonts/red-hat-display.css";
+```
+
+Prefer public subpath imports so consumers only load the component entry points they use:
+
+```tsx
+import { Button } from "@giddaa-housing/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "@giddaa-housing/ui/dialog";
+```
+
+A root export exists for convenience, but examples and consumer code should prefer subpaths.
+
+## Public Contract
+
+- `@giddaa-housing/ui/styles.css` exposes the compiled Tailwind utilities, neutral semantic tokens, typography tokens, and component CSS.
+- `@giddaa-housing/ui/theme/giddaa.css` applies the Giddaa brand color theme.
+- `@giddaa-housing/ui/fonts/red-hat-display.css` loads Red Hat Display and assigns it to `--font-sans`.
+- `@giddaa-housing/ui/base.css` applies optional app-level base styles such as body color, default font, and hidden scrollbars.
+- `@giddaa-housing/ui/<component>` subpaths expose individual ESM component entry points and TypeScript declarations.
+- Consumers must not import from `@giddaa-housing/ui/src/...` or other unpublished source paths.

package/dist/accordion.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
+
+declare function Accordion({ className, variant, ...props }: Accordion$1.Root.Props & {
+    variant?: "surface" | "ghost";
+}): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: Accordion$1.Item.Props): React.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: Accordion$1.Trigger.Props): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: Accordion$1.Panel.Props): React.JSX.Element;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/accordion.js

@@ -0,0 +1,124 @@
+// src/components/ui/accordion.tsx
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { ChevronRightIcon } from "lucide-react";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "gdt-display",
+            "gdt-h1",
+            "gdt-h2",
+            "gdt-h3",
+            "gdt-h4",
+            "gdt-h5",
+            "gdt-xl",
+            "gdt-lg",
+            "gdt-md",
+            "gdt-sm",
+            "gdt-xs",
+            "gdt-subtext",
+            "gdt-capitalized"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/accordion.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Accordion({
+  className,
+  variant = "surface",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Root,
+    {
+      "data-slot": "accordion",
+      "data-variant": variant,
+      className: cn("group/accordion flex w-full flex-col gap-3", className),
+      ...props
+    }
+  );
+}
+function AccordionItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn(
+        "rounded-xl border border-line-subtle text-fg-primary transition-[background-color,border-color,box-shadow] group-data-[variant=surface]/accordion:bg-surface",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { "data-slot": "accordion-header", className: "flex", children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "group/accordion-trigger flex w-full items-center gap-3 px-4 sm:px-5 py-5.5 aria-expanded:pb-2 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-[padding] aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ChevronRightIcon,
+          {
+            "data-slot": "accordion-trigger-icon",
+            className: "pointer-events-none size-5 shrink-0 text-fg-primary transition-transform duration-200 ease-out group-aria-expanded/accordion-trigger:rotate-90"
+          }
+        ),
+        children
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Panel,
+    {
+      "data-slot": "accordion-content",
+      className: "overflow-hidden h-(--accordion-panel-height) transition-[height] ease-out data-ending-style:h-0 data-starting-style:h-0",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            " pl-12 sm:pl-13 pr-4 sm:pr-5 pt-0 pb-4 sm:pb-5.5 text-fg-secondary text-gdt-md [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+};
+//# sourceMappingURL=accordion.js.map

package/dist/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/accordion.tsx","../src/lib/cn.ts"],"sourcesContent":["import { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\";\nimport { ChevronRightIcon } from \"lucide-react\";\n\nimport { cn } from \"../../lib/cn\";\n\nfunction Accordion({\n\tclassName,\n\tvariant = \"surface\",\n\t...props\n}: AccordionPrimitive.Root.Props & { variant?: \"surface\" | \"ghost\" }) {\n\treturn (\n\t\t<AccordionPrimitive.Root\n\t\t\tdata-slot=\"accordion\"\n\t\t\tdata-variant={variant}\n\t\t\tclassName={cn(\"group/accordion flex w-full flex-col gap-3\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n\treturn (\n\t\t<AccordionPrimitive.Item\n\t\t\tdata-slot=\"accordion-item\"\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-xl border border-line-subtle text-fg-primary transition-[background-color,border-color,box-shadow] group-data-[variant=surface]/accordion:bg-surface\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AccordionTrigger({\n\tclassName,\n\tchildren,\n\t...props\n}: AccordionPrimitive.Trigger.Props) {\n\treturn (\n\t\t<AccordionPrimitive.Header data-slot=\"accordion-header\" className=\"flex\">\n\t\t\t<AccordionPrimitive.Trigger\n\t\t\t\tdata-slot=\"accordion-trigger\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"group/accordion-trigger flex w-full items-center gap-3 px-4 sm:px-5 py-5.5 aria-expanded:pb-2 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-[padding] aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<ChevronRightIcon\n\t\t\t\t\tdata-slot=\"accordion-trigger-icon\"\n\t\t\t\t\tclassName=\"pointer-events-none size-5 shrink-0 text-fg-primary transition-transform duration-200 ease-out group-aria-expanded/accordion-trigger:rotate-90\"\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</AccordionPrimitive.Trigger>\n\t\t</AccordionPrimitive.Header>\n\t);\n}\n\nfunction AccordionContent({\n\tclassName,\n\tchildren,\n\t...props\n}: AccordionPrimitive.Panel.Props) {\n\treturn (\n\t\t<AccordionPrimitive.Panel\n\t\t\tdata-slot=\"accordion-content\"\n\t\t\tclassName=\"overflow-hidden h-(--accordion-panel-height) transition-[height] ease-out data-ending-style:h-0 data-starting-style:h-0\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\" pl-12 sm:pl-13 pr-4 sm:pr-5 pt-0 pb-4 sm:pb-5.5 text-fg-secondary text-gdt-md [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</AccordionPrimitive.Panel>\n\t);\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n"],"mappings":";AAAA,SAAS,aAAa,0BAA0B;AAChD,SAAS,wBAAwB;;;ACDjC,SAA0B,YAAY;AACtC,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB;AAAA,EACnC,QAAQ;AAAA,IACP,aAAa;AAAA,MACZ,aAAa;AAAA,QACZ;AAAA,UACC,MAAM;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC3C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC5B;;;ADpBE,cA6BC,YA7BD;AANF,SAAS,UAAU;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACJ,GAAsE;AACrE,SACC;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACA,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW,GAAG,8CAA8C,SAAS;AAAA,MACpE,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,MAAM,GAAkC;AAC9E,SACC;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,iBAAiB;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAqC;AACpC,SACC,oBAAC,mBAAmB,QAAnB,EAA0B,aAAU,oBAAmB,WAAU,QACjE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,aAAU;AAAA,YACV,WAAU;AAAA;AAAA,QACX;AAAA,QACC;AAAA;AAAA;AAAA,EACF,GACD;AAEF;AAEA,SAAS,iBAAiB;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAmC;AAClC,SACC;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACA,aAAU;AAAA,MACV,WAAU;AAAA,MACT,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACA,WAAW;AAAA,YACV;AAAA,YACA;AAAA,UACD;AAAA,UAEC;AAAA;AAAA,MACF;AAAA;AAAA,EACD;AAEF;","names":[]}

package/dist/alert.d.ts

@@ -0,0 +1,18 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+declare const alertVariants: (props?: ({
+    variant?: "success" | "info" | "warning" | "error" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AlertVariant = NonNullable<VariantProps<typeof alertVariants>["variant"]>;
+type AlertProps = React.ComponentProps<"div"> & VariantProps<typeof alertVariants> & {
+    liveRegion?: "polite" | "assertive" | "off";
+};
+declare function Alert({ className, variant, liveRegion, role, ...props }: AlertProps): 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;
+declare function AlertActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertClose({ className, type, children, "aria-label": ariaLabel, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+
+export { Alert, AlertActions, AlertClose, AlertDescription, type AlertProps, AlertTitle, type AlertVariant, alertVariants };

package/dist/alert.js

@@ -0,0 +1,152 @@
+// src/components/ui/alert.tsx
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "gdt-display",
+            "gdt-h1",
+            "gdt-h2",
+            "gdt-h3",
+            "gdt-h4",
+            "gdt-h5",
+            "gdt-xl",
+            "gdt-lg",
+            "gdt-md",
+            "gdt-sm",
+            "gdt-xs",
+            "gdt-subtext",
+            "gdt-capitalized"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/alert.tsx
+import { jsx } from "react/jsx-runtime";
+var alertVariants = cva(
+  "grid w-full grid-cols-[0_minmax(0,1fr)_auto] items-start gap-y-1 rounded-xl border-2 px-4 py-3.5 text-gdt-sm transition-[background-color,border-color,color,box-shadow] has-[>svg]:grid-cols-[1.25rem_minmax(0,1fr)_auto] has-[>svg]:gap-x-3 [&>svg]:col-start-1 [&>svg]:row-span-2 [&>svg]:mt-0.5 [&>svg]:size-5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        success: "border-status-success bg-surface-brand-subtle text-status-success",
+        info: "border-status-info bg-surface text-status-info",
+        warning: "border-status-warning bg-surface-accent-subtle text-status-warning",
+        error: "border-status-danger bg-surface-danger-subtle text-status-danger"
+      }
+    },
+    defaultVariants: {
+      variant: "info"
+    }
+  }
+);
+function Alert({
+  className,
+  variant = "info",
+  liveRegion,
+  role,
+  ...props
+}) {
+  const resolvedVariant = variant ?? "info";
+  const resolvedRole = role ?? (liveRegion === "off" ? void 0 : getAlertRole(resolvedVariant));
+  const resolvedLiveRegion = liveRegion === "off" ? void 0 : liveRegion ?? (resolvedVariant === "error" ? "assertive" : "polite");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert",
+      "data-variant": resolvedVariant,
+      role: resolvedRole,
+      "aria-live": resolvedLiveRegion,
+      className: cn(alertVariants({ variant: resolvedVariant }), className),
+      ...props
+    }
+  );
+}
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: cn(
+        "col-start-2 row-start-1 font-extrabold text-fg-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: cn(
+        "col-start-2 row-start-2 text-fg-secondary [&_p]:leading-relaxed",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-actions",
+      className: cn(
+        "col-start-2 row-start-3 mt-2 flex shrink-0 items-center gap-2 justify-self-start sm:col-start-3 sm:row-span-2 sm:row-start-1 sm:mt-[-0.125rem] sm:justify-self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertClose({
+  className,
+  type = "button",
+  children,
+  "aria-label": ariaLabel = "Dismiss alert",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-slot": "alert-close",
+      type,
+      className: cn(
+        "inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-fg-secondary transition-[background-color,color,box-shadow] hover:bg-surface-raised hover:text-fg-primary focus-visible:border-line-focus focus-visible:outline-none focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]",
+        className
+      ),
+      "aria-label": ariaLabel,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+    }
+  );
+}
+function getAlertRole(variant) {
+  return variant === "error" ? "alert" : "status";
+}
+export {
+  Alert,
+  AlertActions,
+  AlertClose,
+  AlertDescription,
+  AlertTitle,
+  alertVariants
+};
+//# sourceMappingURL=alert.js.map

package/dist/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/alert.tsx","../src/lib/cn.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nconst alertVariants = cva(\n\t\"grid w-full grid-cols-[0_minmax(0,1fr)_auto] items-start gap-y-1 rounded-xl border-2 px-4 py-3.5 text-gdt-sm transition-[background-color,border-color,color,box-shadow] has-[>svg]:grid-cols-[1.25rem_minmax(0,1fr)_auto] has-[>svg]:gap-x-3 [&>svg]:col-start-1 [&>svg]:row-span-2 [&>svg]:mt-0.5 [&>svg]:size-5 [&>svg]:text-current\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tsuccess:\n\t\t\t\t\t\"border-status-success bg-surface-brand-subtle text-status-success\",\n\t\t\t\tinfo: \"border-status-info bg-surface text-status-info\",\n\t\t\t\twarning:\n\t\t\t\t\t\"border-status-warning bg-surface-accent-subtle text-status-warning\",\n\t\t\t\terror:\n\t\t\t\t\t\"border-status-danger bg-surface-danger-subtle text-status-danger\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"info\",\n\t\t},\n\t},\n);\n\ntype AlertVariant = NonNullable<VariantProps<typeof alertVariants>[\"variant\"]>;\n\ntype AlertProps = React.ComponentProps<\"div\"> &\n\tVariantProps<typeof alertVariants> & {\n\t\tliveRegion?: \"polite\" | \"assertive\" | \"off\";\n\t};\n\nfunction Alert({\n\tclassName,\n\tvariant = \"info\",\n\tliveRegion,\n\trole,\n\t...props\n}: AlertProps) {\n\tconst resolvedVariant: AlertVariant = variant ?? \"info\";\n\tconst resolvedRole =\n\t\trole ?? (liveRegion === \"off\" ? undefined : getAlertRole(resolvedVariant));\n\tconst resolvedLiveRegion =\n\t\tliveRegion === \"off\"\n\t\t\t? undefined\n\t\t\t: (liveRegion ?? (resolvedVariant === \"error\" ? \"assertive\" : \"polite\"));\n\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"alert\"\n\t\t\tdata-variant={resolvedVariant}\n\t\t\trole={resolvedRole}\n\t\t\taria-live={resolvedLiveRegion}\n\t\t\tclassName={cn(alertVariants({ variant: resolvedVariant }), className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"alert-title\"\n\t\t\tclassName={cn(\n\t\t\t\t\"col-start-2 row-start-1 font-extrabold text-fg-primary\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AlertDescription({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"alert-description\"\n\t\t\tclassName={cn(\n\t\t\t\t\"col-start-2 row-start-2 text-fg-secondary [&_p]:leading-relaxed\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AlertActions({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"alert-actions\"\n\t\t\tclassName={cn(\n\t\t\t\t\"col-start-2 row-start-3 mt-2 flex shrink-0 items-center gap-2 justify-self-start sm:col-start-3 sm:row-span-2 sm:row-start-1 sm:mt-[-0.125rem] sm:justify-self-end\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AlertClose({\n\tclassName,\n\ttype = \"button\",\n\tchildren,\n\t\"aria-label\": ariaLabel = \"Dismiss alert\",\n\t...props\n}: React.ComponentProps<\"button\">) {\n\treturn (\n\t\t<button\n\t\t\tdata-slot=\"alert-close\"\n\t\t\ttype={type}\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-fg-secondary transition-[background-color,color,box-shadow] hover:bg-surface-raised hover:text-fg-primary focus-visible:border-line-focus focus-visible:outline-none focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\taria-label={ariaLabel}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children ?? <X className=\"size-4\" aria-hidden=\"true\" />}\n\t\t</button>\n\t);\n}\n\nfunction getAlertRole(variant: AlertVariant) {\n\treturn variant === \"error\" ? \"alert\" : \"status\";\n}\n\nexport {\n\tAlert,\n\tAlertActions,\n\tAlertClose,\n\tAlertDescription,\n\tAlertTitle,\n\talertVariants,\n};\nexport type { AlertProps, AlertVariant };\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n"],"mappings":";AAAA,SAAS,WAA8B;AACvC,SAAS,SAAS;;;ACDlB,SAA0B,YAAY;AACtC,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB;AAAA,EACnC,QAAQ;AAAA,IACP,aAAa;AAAA,MACZ,aAAa;AAAA,QACZ;AAAA,UACC,MAAM;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC3C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC5B;;;ADiBE;AA3CF,IAAM,gBAAgB;AAAA,EACrB;AAAA,EACA;AAAA,IACC,UAAU;AAAA,MACT,SAAS;AAAA,QACR,SACC;AAAA,QACD,MAAM;AAAA,QACN,SACC;AAAA,QACD,OACC;AAAA,MACF;AAAA,IACD;AAAA,IACA,iBAAiB;AAAA,MAChB,SAAS;AAAA,IACV;AAAA,EACD;AACD;AASA,SAAS,MAAM;AAAA,EACd;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAe;AACd,QAAM,kBAAgC,WAAW;AACjD,QAAM,eACL,SAAS,eAAe,QAAQ,SAAY,aAAa,eAAe;AACzE,QAAM,qBACL,eAAe,QACZ,SACC,eAAe,oBAAoB,UAAU,cAAc;AAEhE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,MAAM;AAAA,MACN,aAAW;AAAA,MACX,WAAW,GAAG,cAAc,EAAE,SAAS,gBAAgB,CAAC,GAAG,SAAS;AAAA,MACnE,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AACzE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,iBAAiB;AAAA,EACzB;AAAA,EACA,GAAG;AACJ,GAAgC;AAC/B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC3E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,WAAW;AAAA,EACnB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,cAAc,YAAY;AAAA,EAC1B,GAAG;AACJ,GAAmC;AAClC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACA,cAAY;AAAA,MACX,GAAG;AAAA,MAEH,sBAAY,oBAAC,KAAE,WAAU,UAAS,eAAY,QAAO;AAAA;AAAA,EACvD;AAEF;AAEA,SAAS,aAAa,SAAuB;AAC5C,SAAO,YAAY,UAAU,UAAU;AACxC;","names":[]}

package/dist/avatar.d.ts

@@ -0,0 +1,14 @@
+import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
+import * as React from 'react';
+
+type AvatarSize = "sm" | "md" | "lg";
+declare function Avatar({ className, size, ...props }: Avatar$1.Root.Props & {
+    size?: AvatarSize;
+}): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: Avatar$1.Image.Props): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: Avatar$1.Fallback.Props): React.JSX.Element;
+declare function AvatarStatus({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+
+export { Avatar, AvatarStatus as AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarStatus };

package/dist/avatar.js

@@ -0,0 +1,152 @@
+// src/components/ui/avatar.tsx
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "gdt-display",
+            "gdt-h1",
+            "gdt-h2",
+            "gdt-h3",
+            "gdt-h4",
+            "gdt-h5",
+            "gdt-xl",
+            "gdt-lg",
+            "gdt-md",
+            "gdt-sm",
+            "gdt-xs",
+            "gdt-subtext",
+            "gdt-capitalized"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/avatar.tsx
+import { jsx } from "react/jsx-runtime";
+function Avatar({
+  className,
+  size = "md",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Root,
+    {
+      "data-slot": "avatar",
+      "data-size": size,
+      className: cn(
+        "group/avatar relative flex shrink-0 rounded-full select-none bg-surface-brand",
+        size === "sm" && "size-8",
+        size === "md" && "size-10",
+        size === "lg" && "size-14",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "flex size-full items-center justify-center rounded-full",
+        "bg-surface-brand-subtle text-fg-brand font-semibold",
+        "group-data-[size=sm]/avatar:text-xs",
+        "group-data-[size=md]/avatar:text-sm",
+        "group-data-[size=lg]/avatar:text-base",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarStatus({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "avatar-status",
+      className: cn(
+        "absolute right-0 bottom-0 z-10 rounded-full bg-status-success ring-2 ring-canvas",
+        "group-data-[size=sm]/avatar:size-2",
+        "group-data-[size=md]/avatar:size-2.5",
+        "group-data-[size=lg]/avatar:size-3.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "avatar-group",
+      className: cn(
+        "group/avatar-group flex -space-x-3",
+        "*:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-canvas",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarGroupCount({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "avatar-group-count",
+      className: cn(
+        "relative flex shrink-0 items-center justify-center rounded-full",
+        "bg-action-tertiary text-fg-secondary text-xs font-semibold",
+        "ring-2 ring-canvas",
+        "size-10",
+        "group-has-data-[size=sm]/avatar-group:size-8",
+        "group-has-data-[size=lg]/avatar-group:size-14",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Avatar,
+  AvatarStatus as AvatarBadge,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+  AvatarStatus
+};
+//# sourceMappingURL=avatar.js.map

package/dist/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/avatar.tsx","../src/lib/cn.ts"],"sourcesContent":["\"use client\";\n\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\ntype AvatarSize = \"sm\" | \"md\" | \"lg\";\n\nfunction Avatar({\n\tclassName,\n\tsize = \"md\",\n\t...props\n}: AvatarPrimitive.Root.Props & {\n\tsize?: AvatarSize;\n}) {\n\treturn (\n\t\t<AvatarPrimitive.Root\n\t\t\tdata-slot=\"avatar\"\n\t\t\tdata-size={size}\n\t\t\tclassName={cn(\n\t\t\t\t\"group/avatar relative flex shrink-0 rounded-full select-none bg-surface-brand\",\n\t\t\t\tsize === \"sm\" && \"size-8\",\n\t\t\t\tsize === \"md\" && \"size-10\",\n\t\t\t\tsize === \"lg\" && \"size-14\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n\treturn (\n\t\t<AvatarPrimitive.Image\n\t\t\tdata-slot=\"avatar-image\"\n\t\t\tclassName={cn(\n\t\t\t\t\"aspect-square size-full rounded-full object-cover\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AvatarFallback({\n\tclassName,\n\t...props\n}: AvatarPrimitive.Fallback.Props) {\n\treturn (\n\t\t<AvatarPrimitive.Fallback\n\t\t\tdata-slot=\"avatar-fallback\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex size-full items-center justify-center rounded-full\",\n\t\t\t\t\"bg-surface-brand-subtle text-fg-brand font-semibold\",\n\t\t\t\t\"group-data-[size=sm]/avatar:text-xs\",\n\t\t\t\t\"group-data-[size=md]/avatar:text-sm\",\n\t\t\t\t\"group-data-[size=lg]/avatar:text-base\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AvatarStatus({ className, ...props }: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"avatar-status\"\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute right-0 bottom-0 z-10 rounded-full bg-status-success ring-2 ring-canvas\",\n\t\t\t\t\"group-data-[size=sm]/avatar:size-2\",\n\t\t\t\t\"group-data-[size=md]/avatar:size-2.5\",\n\t\t\t\t\"group-data-[size=lg]/avatar:size-3.5\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"avatar-group\"\n\t\t\tclassName={cn(\n\t\t\t\t\"group/avatar-group flex -space-x-3\",\n\t\t\t\t\"*:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-canvas\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AvatarGroupCount({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"avatar-group-count\"\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex shrink-0 items-center justify-center rounded-full\",\n\t\t\t\t\"bg-action-tertiary text-fg-secondary text-xs font-semibold\",\n\t\t\t\t\"ring-2 ring-canvas\",\n\t\t\t\t\"size-10\",\n\t\t\t\t\"group-has-data-[size=sm]/avatar-group:size-8\",\n\t\t\t\t\"group-has-data-[size=lg]/avatar-group:size-14\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tAvatar,\n\tAvatarImage,\n\tAvatarFallback,\n\tAvatarGroup,\n\tAvatarGroupCount,\n\tAvatarStatus,\n\tAvatarStatus as AvatarBadge,\n};\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n"],"mappings":";AAEA,SAAS,UAAU,uBAAuB;;;ACF1C,SAA0B,YAAY;AACtC,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB;AAAA,EACnC,QAAQ;AAAA,IACP,aAAa;AAAA,MACZ,aAAa;AAAA,QACZ;AAAA,UACC,MAAM;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC3C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC5B;;;ADdE;AARF,SAAS,OAAO;AAAA,EACf;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACJ,GAEG;AACF,SACC;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACA,aAAU;AAAA,MACV,aAAW;AAAA,MACX,WAAW;AAAA,QACV;AAAA,QACA,SAAS,QAAQ;AAAA,QACjB,SAAS,QAAQ;AAAA,QACjB,SAAS,QAAQ;AAAA,QACjB;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC1E,SACC;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,eAAe;AAAA,EACvB;AAAA,EACA,GAAG;AACJ,GAAmC;AAClC,SACC;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAiC;AAC5E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC1E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,iBAAiB;AAAA,EACzB;AAAA,EACA,GAAG;AACJ,GAAgC;AAC/B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;","names":[]}

package/dist/badge.d.ts

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