rivet-ui 0.1.0

package/dist/components/Autocomplete/index.js

@@ -0,0 +1,109 @@
+import {
+  cn
+} from "../../utils/cn.js";
+
+// src/components/Autocomplete/Autocomplete.tsx
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var AutocompleteRoot = Autocomplete.Root;
+var AutocompleteValue = Autocomplete.Value;
+var AutocompletePortal = Autocomplete.Portal;
+var AutocompleteGroup = Autocomplete.Group;
+var AutocompleteCollection = Autocomplete.Collection;
+var AutocompleteInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Autocomplete.Input, {
+  ref,
+  className: cn("flex h-10 w-full rounded-lg border border-kraft/25 bg-surface px-3.5 text-base text-kraft font-normal transition-colors placeholder:text-kraft/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ribbon data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+  ...props
+}));
+AutocompleteInput.displayName = "AutocompleteInput";
+var AutocompleteTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Autocomplete.Trigger, {
+  ref,
+  className: cn("flex h-10 w-7 items-center justify-center rounded-r-md border-0 bg-transparent p-0 text-kraft/60 transition-colors hover:not-data-disabled:text-kraft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-1 data-disabled:opacity-50", className),
+  ...props
+}));
+AutocompleteTrigger.displayName = "AutocompleteTrigger";
+var AutocompleteIcon = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(Autocomplete.Icon, {
+  ref,
+  className: cn("flex items-center justify-center", className),
+  ...props,
+  children: children ?? /* @__PURE__ */ jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    children: /* @__PURE__ */ jsx("polyline", {
+      points: "6 9 12 15 18 9"
+    })
+  })
+}));
+AutocompleteIcon.displayName = "AutocompleteIcon";
+var AutocompleteClear = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Autocomplete.Clear, {
+  ref,
+  className: cn("flex h-10 w-7 items-center justify-center rounded-lg border-0 bg-transparent p-0 text-kraft/50 transition-colors hover:not-data-disabled:text-spool focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-1", className),
+  ...props
+}));
+AutocompleteClear.displayName = "AutocompleteClear";
+var AutocompletePositioner = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Autocomplete.Positioner, {
+  ref,
+  className: cn("z-50 outline-none", className),
+  sideOffset: 4,
+  ...props
+}));
+AutocompletePositioner.displayName = "AutocompletePositioner";
+var AutocompletePopup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Autocomplete.Popup, {
+  ref,
+  className: cn("w-(--anchor-width) max-h-[min(var(--available-height),22rem)] max-w-(--available-width) overflow-y-auto scroll-py-2 overscroll-contain rounded-lg border border-kraft/15 bg-surface py-1.5 shadow-lg shadow-kraft/10 origin-(--transform-origin) transition-[transform,scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0", className),
+  ...props
+}));
+AutocompletePopup.displayName = "AutocompletePopup";
+var AutocompleteList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Autocomplete.List, {
+  ref,
+  className: cn("outline-none data-empty:p-0", className),
+  ...props
+}));
+AutocompleteList.displayName = "AutocompleteList";
+var AutocompleteItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Autocomplete.Item, {
+  ref,
+  className: cn("relative grid cursor-default select-none grid-cols-[0.875rem_1fr] items-center gap-2 px-3 py-2 text-sm text-kraft outline-none data-disabled:pointer-events-none data-disabled:opacity-50", 'data-highlighted:before:absolute data-highlighted:before:inset-x-1.5 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-lg data-highlighted:before:bg-kraft data-highlighted:before:content-[""] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white', className),
+  ...props
+}));
+AutocompleteItem.displayName = "AutocompleteItem";
+var AutocompleteEmpty = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Autocomplete.Empty, {
+  ref,
+  className: cn("px-4 py-3 text-sm text-kraft/60 italic", className),
+  ...props
+}));
+AutocompleteEmpty.displayName = "AutocompleteEmpty";
+var AutocompleteGroupLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Autocomplete.GroupLabel, {
+  ref,
+  className: cn("sticky top-0 z-1 bg-surface px-3 pb-1 pt-2.5 text-[0.65rem] font-semibold uppercase tracking-widest text-kraft/50", className),
+  ...props
+}));
+AutocompleteGroupLabel.displayName = "AutocompleteGroupLabel";
+export {
+  AutocompleteValue,
+  AutocompleteTrigger,
+  AutocompleteRoot,
+  AutocompletePositioner,
+  AutocompletePortal,
+  AutocompletePopup,
+  AutocompleteList,
+  AutocompleteItem,
+  AutocompleteInput,
+  AutocompleteIcon,
+  AutocompleteGroupLabel,
+  AutocompleteGroup,
+  AutocompleteEmpty,
+  AutocompleteCollection,
+  AutocompleteClear
+};
+export { AutocompleteRoot, AutocompleteValue, AutocompletePortal, AutocompleteGroup, AutocompleteCollection, AutocompleteInput, AutocompleteTrigger, AutocompleteIcon, AutocompleteClear, AutocompletePositioner, AutocompletePopup, AutocompleteList, AutocompleteItem, AutocompleteEmpty, AutocompleteGroupLabel };
+
+//# debugId=61B79479E0CAB79564756E2164756E21

package/dist/components/Autocomplete/index.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/components/Autocomplete/Autocomplete.tsx"],
+  "sourcesContent": [
+    "import { Autocomplete } from '@base-ui/react/autocomplete';\nimport React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const AutocompleteRoot = Autocomplete.Root;\nexport const AutocompleteValue = Autocomplete.Value;\nexport const AutocompletePortal = Autocomplete.Portal;\nexport const AutocompleteGroup = Autocomplete.Group;\nexport const AutocompleteCollection = Autocomplete.Collection;\n\nexport const AutocompleteInput = React.forwardRef<\n    HTMLInputElement,\n    React.ComponentPropsWithoutRef<typeof Autocomplete.Input>\n>(({ className, ...props }, ref) => (\n    <Autocomplete.Input\n        ref={ref}\n        className={cn(\n            'flex h-10 w-full rounded-lg border border-kraft/25 bg-surface px-3.5 text-base text-kraft font-normal transition-colors placeholder:text-kraft/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ribbon data-disabled:cursor-not-allowed data-disabled:opacity-50',\n            className\n        )}\n        {...props}\n    />\n));\nAutocompleteInput.displayName = 'AutocompleteInput';\n\nexport const AutocompleteTrigger = React.forwardRef<\n    HTMLButtonElement,\n    React.ComponentPropsWithoutRef<typeof Autocomplete.Trigger>\n>(({ className, ...props }, ref) => (\n    <Autocomplete.Trigger\n        ref={ref}\n        className={cn(\n            'flex h-10 w-7 items-center justify-center rounded-r-md border-0 bg-transparent p-0 text-kraft/60 transition-colors hover:not-data-disabled:text-kraft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-1 data-disabled:opacity-50',\n            className\n        )}\n        {...props}\n    />\n));\nAutocompleteTrigger.displayName = 'AutocompleteTrigger';\n\nexport const AutocompleteIcon = React.forwardRef<\n    HTMLSpanElement,\n    React.ComponentPropsWithoutRef<typeof Autocomplete.Icon>\n>(({ className, children, ...props }, ref) => (\n    <Autocomplete.Icon\n        ref={ref}\n        className={cn('flex items-center justify-center', className)}\n        {...props}\n    >\n        {children ?? (\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2.5\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                aria-hidden\n            >\n                <polyline points=\"6 9 12 15 18 9\" />\n            </svg>\n        )}\n    </Autocomplete.Icon>\n));\nAutocompleteIcon.displayName = 'AutocompleteIcon';\n\nexport const AutocompleteClear = React.forwardRef<\n    HTMLButtonElement,\n    React.ComponentPropsWithoutRef<typeof Autocomplete.Clear>\n>(({ className, ...props }, ref) => (\n    <Autocomplete.Clear\n        ref={ref}\n        className={cn(\n            'flex h-10 w-7 items-center justify-center rounded-lg border-0 bg-transparent p-0 text-kraft/50 transition-colors hover:not-data-disabled:text-spool focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-1',\n            className\n        )}\n        {...props}\n    />\n));\nAutocompleteClear.displayName = 'AutocompleteClear';\n\nexport const AutocompletePositioner = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof Autocomplete.Positioner>\n>(({ className, ...props }, ref) => (\n    <Autocomplete.Positioner\n        ref={ref}\n        className={cn('z-50 outline-none', className)}\n        sideOffset={4}\n        {...props}\n    />\n));\nAutocompletePositioner.displayName = 'AutocompletePositioner';\n\nexport const AutocompletePopup = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof Autocomplete.Popup>\n>(({ className, ...props }, ref) => (\n    <Autocomplete.Popup\n        ref={ref}\n        className={cn(\n            'w-(--anchor-width) max-h-[min(var(--available-height),22rem)] max-w-(--available-width) overflow-y-auto scroll-py-2 overscroll-contain rounded-lg border border-kraft/15 bg-surface py-1.5 shadow-lg shadow-kraft/10 origin-(--transform-origin) transition-[transform,scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0',\n            className\n        )}\n        {...props}\n    />\n));\nAutocompletePopup.displayName = 'AutocompletePopup';\n\nexport const AutocompleteList = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof Autocomplete.List>\n>(({ className, ...props }, ref) => (\n    <Autocomplete.List\n        ref={ref}\n        className={cn('outline-none data-empty:p-0', className)}\n        {...props}\n    />\n));\nAutocompleteList.displayName = 'AutocompleteList';\n\nexport const AutocompleteItem = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof Autocomplete.Item>\n>(({ className, ...props }, ref) => (\n    <Autocomplete.Item\n        ref={ref}\n        className={cn(\n            'relative grid cursor-default select-none grid-cols-[0.875rem_1fr] items-center gap-2 px-3 py-2 text-sm text-kraft outline-none data-disabled:pointer-events-none data-disabled:opacity-50',\n            'data-highlighted:before:absolute data-highlighted:before:inset-x-1.5 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-lg data-highlighted:before:bg-kraft data-highlighted:before:content-[\"\"] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white',\n            className\n        )}\n        {...props}\n    />\n));\nAutocompleteItem.displayName = 'AutocompleteItem';\n\nexport const AutocompleteEmpty = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof Autocomplete.Empty>\n>(({ className, ...props }, ref) => (\n    <Autocomplete.Empty\n        ref={ref}\n        className={cn('px-4 py-3 text-sm text-kraft/60 italic', className)}\n        {...props}\n    />\n));\nAutocompleteEmpty.displayName = 'AutocompleteEmpty';\n\nexport const AutocompleteGroupLabel = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof Autocomplete.GroupLabel>\n>(({ className, ...props }, ref) => (\n    <Autocomplete.GroupLabel\n        ref={ref}\n        className={cn(\n            'sticky top-0 z-1 bg-surface px-3 pb-1 pt-2.5 text-[0.65rem] font-semibold uppercase tracking-widest text-kraft/50',\n            className\n        )}\n        {...props}\n    />\n));\nAutocompleteGroupLabel.displayName = 'AutocompleteGroupLabel';\n"
+  ],
+  "mappings": ";;;;;AAAA;AACA;;AAGO,IAAM,mBAAmB,aAAa;AACtC,IAAM,oBAAoB,aAAa;AACvC,IAAM,qBAAqB,aAAa;AACxC,IAAM,oBAAoB,aAAa;AACvC,IAAM,yBAAyB,aAAa;AAE5C,IAAM,oBAAoB,MAAM,WAGrC,GAAG,cAAc,SAAS,wBACxB,IAAC,aAAa,OAAd;AAAA,EACI;AAAA,EACA,WAAW,GACP,qTACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,kBAAkB,cAAc;AAEzB,IAAM,sBAAsB,MAAM,WAGvC,GAAG,cAAc,SAAS,wBACxB,IAAC,aAAa,SAAd;AAAA,EACI;AAAA,EACA,WAAW,GACP,wRACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,oBAAoB,cAAc;AAE3B,IAAM,mBAAmB,MAAM,WAGpC,GAAG,WAAW,aAAa,SAAS,wBAClC,IAqBE,aAAa,MArBf;AAAA,EACI;AAAA,EACA,WAAW,GAAG,oCAAoC,SAAS;AAAA,KACvD;AAAA,EAHR,UAKK,4BACG,IAaE,OAbF;AAAA,IACI,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAW;AAAA,IAVf,0BAYI,IAAC,YAAD;AAAA,MAAU,QAAO;AAAA,KAAiB;AAAA,GACpC;AAAA,CAER,CACL;AACD,iBAAiB,cAAc;AAExB,IAAM,oBAAoB,MAAM,WAGrC,GAAG,cAAc,SAAS,wBACxB,IAAC,aAAa,OAAd;AAAA,EACI;AAAA,EACA,WAAW,GACP,6PACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,kBAAkB,cAAc;AAEzB,IAAM,yBAAyB,MAAM,WAG1C,GAAG,cAAc,SAAS,wBACxB,IAAC,aAAa,YAAd;AAAA,EACI;AAAA,EACA,WAAW,GAAG,qBAAqB,SAAS;AAAA,EAC5C,YAAY;AAAA,KACR;AAAA,CACR,CACH;AACD,uBAAuB,cAAc;AAE9B,IAAM,oBAAoB,MAAM,WAGrC,GAAG,cAAc,SAAS,wBACxB,IAAC,aAAa,OAAd;AAAA,EACI;AAAA,EACA,WAAW,GACP,wZACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,kBAAkB,cAAc;AAEzB,IAAM,mBAAmB,MAAM,WAGpC,GAAG,cAAc,SAAS,wBACxB,IAAC,aAAa,MAAd;AAAA,EACI;AAAA,EACA,WAAW,GAAG,+BAA+B,SAAS;AAAA,KAClD;AAAA,CACR,CACH;AACD,iBAAiB,cAAc;AAExB,IAAM,mBAAmB,MAAM,WAGpC,GAAG,cAAc,SAAS,wBACxB,IAAC,aAAa,MAAd;AAAA,EACI;AAAA,EACA,WAAW,GACP,6LACA,6TACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,iBAAiB,cAAc;AAExB,IAAM,oBAAoB,MAAM,WAGrC,GAAG,cAAc,SAAS,wBACxB,IAAC,aAAa,OAAd;AAAA,EACI;AAAA,EACA,WAAW,GAAG,0CAA0C,SAAS;AAAA,KAC7D;AAAA,CACR,CACH;AACD,kBAAkB,cAAc;AAEzB,IAAM,yBAAyB,MAAM,WAG1C,GAAG,cAAc,SAAS,wBACxB,IAAC,aAAa,YAAd;AAAA,EACI;AAAA,EACA,WAAW,GACP,qHACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,uBAAuB,cAAc;",
+  "debugId": "61B79479E0CAB79564756E2164756E21",
+  "names": []
+}

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,19 @@
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import { type VariantProps } from 'cva';
+import React from 'react';
+export declare const avatarVariants: (props?: ({
+    color?: "canvas" | "ribbon" | "mustard" | "kraft" | "denim" | "spool" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+} & ({
+    class?: import("cva").ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import("cva").ClassValue;
+})) | undefined) => string;
+export interface AvatarProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseAvatar.Root>, 'color'>, VariantProps<typeof avatarVariants> {
+    src?: string;
+    alt?: string;
+    initials?: string;
+}
+export declare function Avatar({ className, color, size, src, alt, initials, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,29 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Avatar } from './Avatar';
+declare const meta: {
+    title: string;
+    component: typeof Avatar;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        color: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Mustard: Story;
+export declare const Kraft: Story;
+export declare const Denim: Story;
+export declare const Spool: Story;
+export declare const Sizes: Story;
+export declare const AllColors: Story;

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { Avatar, avatarVariants } from './Avatar';
+export type { AvatarProps } from './Avatar';

package/dist/components/Avatar/index.js

@@ -0,0 +1,65 @@
+import {
+  cva
+} from "../../chunk-fjtwj9cw.js";
+import {
+  cn
+} from "../../utils/cn.js";
+
+// src/components/Avatar/Avatar.tsx
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
+import { jsx, jsxs } from "react/jsx-runtime";
+var avatarVariants = cva({
+  base: "inline-flex items-center justify-center rounded-full font-semibold shrink-0 overflow-hidden select-none align-middle",
+  variants: {
+    color: {
+      ribbon: "bg-ribbon text-white",
+      mustard: "bg-mustard text-white",
+      kraft: "bg-kraft text-white",
+      denim: "bg-denim text-white",
+      spool: "bg-spool text-white",
+      canvas: "bg-canvas text-kraft"
+    },
+    size: {
+      sm: "h-8 w-8 text-xs",
+      md: "h-10 w-10 text-sm",
+      lg: "h-14 w-14 text-base"
+    }
+  },
+  defaultVariants: {
+    color: "ribbon",
+    size: "md"
+  }
+});
+function Avatar({
+  className,
+  color,
+  size,
+  src,
+  alt,
+  initials,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(BaseAvatar.Root, {
+    className: cn(avatarVariants({ color, size }), className),
+    ...props,
+    children: [
+      src && /* @__PURE__ */ jsx(BaseAvatar.Image, {
+        src,
+        alt: alt ?? "",
+        className: "h-full w-full object-cover"
+      }),
+      /* @__PURE__ */ jsx(BaseAvatar.Fallback, {
+        className: "flex h-full w-full items-center justify-center",
+        "aria-label": !src ? alt : undefined,
+        children: initials
+      })
+    ]
+  });
+}
+export {
+  avatarVariants,
+  Avatar
+};
+export { avatarVariants, Avatar };
+
+//# debugId=76F8DF60B52F47E464756E2164756E21

package/dist/components/Avatar/index.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/components/Avatar/Avatar.tsx"],
+  "sourcesContent": [
+    "import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { cva, type VariantProps } from 'cva';\nimport { cn } from '../../utils/cn';\nimport React from 'react';\n\nexport const avatarVariants = cva({\n    base: 'inline-flex items-center justify-center rounded-full font-semibold shrink-0 overflow-hidden select-none align-middle',\n    variants: {\n        color: {\n            ribbon: 'bg-ribbon text-white',\n            mustard: 'bg-mustard text-white',\n            kraft: 'bg-kraft text-white',\n            denim: 'bg-denim text-white',\n            'spool': 'bg-spool text-white',\n            canvas: 'bg-canvas text-kraft'\n        },\n        size: {\n            sm: 'h-8 w-8 text-xs',\n            md: 'h-10 w-10 text-sm',\n            lg: 'h-14 w-14 text-base'\n        }\n    },\n    defaultVariants: {\n        color: 'ribbon',\n        size: 'md'\n    }\n});\n\nexport interface AvatarProps\n    extends Omit<\n            React.ComponentPropsWithoutRef<typeof BaseAvatar.Root>,\n            'color'\n        >,\n        VariantProps<typeof avatarVariants> {\n    src?: string;\n    alt?: string;\n    initials?: string;\n}\n\nexport function Avatar({\n    className,\n    color,\n    size,\n    src,\n    alt,\n    initials,\n    ...props\n}: AvatarProps) {\n    return (\n        <BaseAvatar.Root\n            className={cn(avatarVariants({ color, size }), className)}\n            {...props}\n        >\n            {src && (\n                <BaseAvatar.Image\n                    src={src}\n                    alt={alt ?? ''}\n                    className=\"h-full w-full object-cover\"\n                />\n            )}\n            <BaseAvatar.Fallback\n                className=\"flex h-full w-full items-center justify-center\"\n                aria-label={!src ? alt : undefined}\n            >\n                {initials}\n            </BaseAvatar.Fallback>\n        </BaseAvatar.Root>\n    );\n}\n"
+  ],
+  "mappings": ";;;;;;;;AAAA,mBAAS;;AAKF,IAAM,iBAAiB,IAAI;AAAA,EAC9B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,OAAO;AAAA,MACH,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAS;AAAA,MACT,QAAQ;AAAA,IACZ;AAAA,IACA,MAAM;AAAA,MACF,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACR;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AACJ,CAAC;AAaM,SAAS,MAAM;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,GACS;AAAA,EACZ,uBACI,KAiBE,WAAW,MAjBb;AAAA,IACI,WAAW,GAAG,eAAe,EAAE,OAAO,KAAK,CAAC,GAAG,SAAS;AAAA,OACpD;AAAA,IAFR,UAiBE;AAAA,MAbG,uBACG,IAAC,WAAW,OAAZ;AAAA,QACI;AAAA,QACA,KAAK,OAAO;AAAA,QACZ,WAAU;AAAA,OACd;AAAA,sBAEJ,IAKE,WAAW,UALb;AAAA,QACI,WAAU;AAAA,QACV,eAAa,MAAM,MAAM;AAAA,QAF7B,UAIK;AAAA,OACH;AAAA;AAAA,GACJ;AAAA;",
+  "debugId": "76F8DF60B52F47E464756E2164756E21",
+  "names": []
+}

package/dist/components/AvatarLabel/AvatarLabel.d.ts

@@ -0,0 +1,12 @@
+import { type AvatarProps } from '../Avatar';
+export interface AvatarLabelProps {
+    src?: string;
+    alt?: string;
+    initials?: string;
+    avatarColor?: AvatarProps['color'];
+    name: string;
+    subtitle?: string;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function AvatarLabel({ src, alt, initials, avatarColor, name, subtitle, size, className }: AvatarLabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AvatarLabel/AvatarLabel.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AvatarLabel } from './AvatarLabel';
+declare const meta: Meta<typeof AvatarLabel>;
+export default meta;
+type Story = StoryObj<typeof AvatarLabel>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const WithImage: Story;
+export declare const AllColors: Story;

package/dist/components/AvatarLabel/index.d.ts

@@ -0,0 +1,2 @@
+export { AvatarLabel } from './AvatarLabel';
+export type { AvatarLabelProps } from './AvatarLabel';

package/dist/components/AvatarLabel/index.js

@@ -0,0 +1,74 @@
+import {
+  Avatar
+} from "../Avatar/index.js";
+import"../../chunk-fjtwj9cw.js";
+import {
+  cn
+} from "../../utils/cn.js";
+
+// src/components/AvatarLabel/AvatarLabel.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizeConfig = {
+  sm: {
+    avatarSize: "sm",
+    name: "text-sm font-medium",
+    subtitle: "text-xs",
+    gap: "gap-2"
+  },
+  md: {
+    avatarSize: "md",
+    name: "text-sm font-medium",
+    subtitle: "text-xs",
+    gap: "gap-3"
+  },
+  lg: {
+    avatarSize: "lg",
+    name: "text-base font-semibold",
+    subtitle: "text-sm",
+    gap: "gap-4"
+  }
+};
+function AvatarLabel({
+  src,
+  alt,
+  initials,
+  avatarColor,
+  name,
+  subtitle,
+  size = "md",
+  className
+}) {
+  const cfg = sizeConfig[size];
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn("flex items-center", cfg.gap, className),
+    children: [
+      /* @__PURE__ */ jsx(Avatar, {
+        src,
+        alt,
+        initials,
+        color: avatarColor,
+        size: cfg.avatarSize,
+        className: "shrink-0"
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "min-w-0",
+        children: [
+          /* @__PURE__ */ jsx("p", {
+            className: cn("truncate text-kraft", cfg.name),
+            children: name
+          }),
+          subtitle && /* @__PURE__ */ jsx("p", {
+            className: cn("truncate text-kraft/60", cfg.subtitle),
+            children: subtitle
+          })
+        ]
+      })
+    ]
+  });
+}
+export {
+  AvatarLabel
+};
+export { AvatarLabel };
+
+//# debugId=E8E2BB1255807FB164756E2164756E21

package/dist/components/AvatarLabel/index.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/components/AvatarLabel/AvatarLabel.tsx"],
+  "sourcesContent": [
+    "import * as React from 'react';\nimport { Avatar, type AvatarProps } from '../Avatar';\nimport { cn } from '../../utils/cn';\n\nconst sizeConfig = {\n    sm: {\n        avatarSize: 'sm' as const,\n        name: 'text-sm font-medium',\n        subtitle: 'text-xs',\n        gap: 'gap-2'\n    },\n    md: {\n        avatarSize: 'md' as const,\n        name: 'text-sm font-medium',\n        subtitle: 'text-xs',\n        gap: 'gap-3'\n    },\n    lg: {\n        avatarSize: 'lg' as const,\n        name: 'text-base font-semibold',\n        subtitle: 'text-sm',\n        gap: 'gap-4'\n    }\n};\n\nexport interface AvatarLabelProps {\n    src?: string;\n    alt?: string;\n    initials?: string;\n    avatarColor?: AvatarProps['color'];\n    name: string;\n    subtitle?: string;\n    size?: 'sm' | 'md' | 'lg';\n    className?: string;\n}\n\nexport function AvatarLabel({\n    src,\n    alt,\n    initials,\n    avatarColor,\n    name,\n    subtitle,\n    size = 'md',\n    className\n}: AvatarLabelProps) {\n    const cfg = sizeConfig[size];\n    return (\n        <div className={cn('flex items-center', cfg.gap, className)}>\n            <Avatar\n                src={src}\n                alt={alt}\n                initials={initials}\n                color={avatarColor}\n                size={cfg.avatarSize}\n                className=\"shrink-0\"\n            />\n            <div className=\"min-w-0\">\n                <p className={cn('truncate text-kraft', cfg.name)}>{name}</p>\n                {subtitle && (\n                    <p className={cn('truncate text-kraft/60', cfg.subtitle)}>\n                        {subtitle}\n                    </p>\n                )}\n            </div>\n        </div>\n    );\n}\n"
+  ],
+  "mappings": ";;;;;;;;;;AAIA,IAAM,aAAa;AAAA,EACf,IAAI;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,KAAK;AAAA,EACT;AAAA,EACA,IAAI;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,KAAK;AAAA,EACT;AAAA,EACA,IAAI;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,KAAK;AAAA,EACT;AACJ;AAaO,SAAS,WAAW;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,GACiB;AAAA,EACjB,MAAM,MAAM,WAAW;AAAA,EACvB,uBACI,KAiBE,OAjBF;AAAA,IAAK,WAAW,GAAG,qBAAqB,IAAI,KAAK,SAAS;AAAA,IAA1D,UAiBE;AAAA,sBAhBE,IAAC,QAAD;AAAA,QACI;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,MAAM,IAAI;AAAA,QACV,WAAU;AAAA,OACd;AAAA,sBACA,KAOE,OAPF;AAAA,QAAK,WAAU;AAAA,QAAf,UAOE;AAAA,0BANE,IAA2D,KAA3D;AAAA,YAAG,WAAW,GAAG,uBAAuB,IAAI,IAAI;AAAA,YAAhD,UAAoD;AAAA,WAAO;AAAA,UAC1D,4BACG,IAEE,KAFF;AAAA,YAAG,WAAW,GAAG,0BAA0B,IAAI,QAAQ;AAAA,YAAvD,UACK;AAAA,WACH;AAAA;AAAA,OAER;AAAA;AAAA,GACJ;AAAA;",
+  "debugId": "E8E2BB1255807FB164756E2164756E21",
+  "names": []
+}

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,13 @@
+import { type VariantProps } from 'cva';
+export declare const badgeVariants: (props?: ({
+    variant?: "outline" | "ribbon" | "mustard" | "kraft" | "denim" | "spool" | undefined;
+} & ({
+    class?: import("cva").ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import("cva").ClassValue;
+})) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+export declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Badge/Badge.stories.d.ts

@@ -0,0 +1,25 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Badge } from './Badge';
+declare const meta: {
+    title: string;
+    component: typeof Badge;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Ribbon: Story;
+export declare const Mustard: Story;
+export declare const Kraft: Story;
+export declare const Denim: Story;
+export declare const Spool: Story;
+export declare const Outline: Story;
+export declare const AllVariants: Story;

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge, badgeVariants } from './Badge';
+export type { BadgeProps } from './Badge';

package/dist/components/Badge/index.js

@@ -0,0 +1,38 @@
+import {
+  cva
+} from "../../chunk-fjtwj9cw.js";
+import {
+  cn
+} from "../../utils/cn.js";
+
+// src/components/Badge/Badge.tsx
+import { jsx } from "react/jsx-runtime";
+var badgeVariants = cva({
+  base: "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors",
+  variants: {
+    variant: {
+      ribbon: "border border-ribbon/20 bg-ribbon/10 text-ribbon",
+      mustard: "border border-mustard/20 bg-mustard/10 text-mustard",
+      kraft: "border border-kraft/15 bg-canvas text-kraft",
+      denim: "border border-denim/20 bg-denim/10 text-denim",
+      spool: "border border-spool/20 bg-spool/10 text-spool",
+      outline: "border border-kraft/30 bg-transparent text-kraft"
+    }
+  },
+  defaultVariants: {
+    variant: "ribbon"
+  }
+});
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("span", {
+    className: cn(badgeVariants({ variant }), className),
+    ...props
+  });
+}
+export {
+  badgeVariants,
+  Badge
+};
+export { badgeVariants, Badge };
+
+//# debugId=0C6F283C3BEC155B64756E2164756E21

package/dist/components/Badge/index.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/components/Badge/Badge.tsx"],
+  "sourcesContent": [
+    "import { cva, type VariantProps } from 'cva';\nimport { cn } from '../../utils/cn';\n\nexport const badgeVariants = cva({\n    base: 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors',\n    variants: {\n        variant: {\n            ribbon: 'border border-ribbon/20 bg-ribbon/10 text-ribbon',\n            mustard: 'border border-mustard/20 bg-mustard/10 text-mustard',\n            kraft: 'border border-kraft/15 bg-canvas text-kraft',\n            denim: 'border border-denim/20 bg-denim/10 text-denim',\n            spool: 'border border-spool/20 bg-spool/10 text-spool',\n            outline: 'border border-kraft/30 bg-transparent text-kraft'\n        }\n    },\n    defaultVariants: {\n        variant: 'ribbon'\n    }\n});\n\nexport interface BadgeProps\n    extends\n        React.HTMLAttributes<HTMLSpanElement>,\n        VariantProps<typeof badgeVariants> {}\n\nexport function Badge({ className, variant, ...props }: BadgeProps) {\n    return (\n        <span\n            className={cn(badgeVariants({ variant }), className)}\n            {...props}\n        />\n    );\n}\n"
+  ],
+  "mappings": ";;;;;;;;;AAGO,IAAM,gBAAgB,IAAI;AAAA,EAC7B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,IACb;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,EACb;AACJ,CAAC;AAOM,SAAS,KAAK,GAAG,WAAW,YAAY,SAAqB;AAAA,EAChE,uBACI,IAAC,QAAD;AAAA,IACI,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,OAC/C;AAAA,GACR;AAAA;",
+  "debugId": "0C6F283C3BEC155B64756E2164756E21",
+  "names": []
+}

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,15 @@
+import { Button as BaseButton } from '@base-ui/react/button';
+import { type VariantProps } from 'cva';
+export declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+} & ({
+    class?: import("cva").ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import("cva").ClassValue;
+})) | undefined) => string;
+export interface ButtonProps extends React.ComponentPropsWithoutRef<typeof BaseButton>, VariantProps<typeof buttonVariants> {
+}
+export declare function Button({ className, variant, size, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/Button.stories.d.ts

@@ -0,0 +1,35 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Button } from './Button';
+declare const meta: {
+    title: string;
+    component: typeof Button;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+        disabled: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Destructive: Story;
+export declare const Outline: Story;
+export declare const Ghost: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const AllVariants: Story;
+export declare const AllSizes: Story;
+export declare const Disabled: Story;

package/dist/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button, buttonVariants } from './Button';
+export type { ButtonProps } from './Button';

package/dist/components/Button/index.js

@@ -0,0 +1,44 @@
+import {
+  cva
+} from "../../chunk-fjtwj9cw.js";
+import {
+  cn
+} from "../../utils/cn.js";
+
+// src/components/Button/Button.tsx
+import { Button as BaseButton } from "@base-ui/react/button";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva({
+  base: "inline-flex items-center justify-center rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 data-disabled:pointer-events-none data-disabled:opacity-50",
+  variants: {
+    variant: {
+      primary: "bg-denim text-white shadow-sm hover:not-data-disabled:bg-denim/90 focus-visible:ring-denim",
+      secondary: "border border-kraft/15 bg-canvas text-kraft hover:not-data-disabled:bg-canvas/70 focus-visible:ring-kraft",
+      destructive: "bg-spool text-white hover:not-data-disabled:bg-spool/85 focus-visible:ring-spool",
+      outline: "border border-kraft/25 bg-transparent text-kraft shadow-sm hover:not-data-disabled:bg-canvas focus-visible:ring-kraft",
+      ghost: "text-kraft hover:not-data-disabled:bg-canvas focus-visible:ring-kraft"
+    },
+    size: {
+      sm: "h-8 px-3 text-sm",
+      md: "h-10 px-4 text-sm",
+      lg: "h-12 px-6 text-base"
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
+  }
+});
+function Button({ className, variant, size, ...props }) {
+  return /* @__PURE__ */ jsx(BaseButton, {
+    className: cn(buttonVariants({ variant, size }), className),
+    ...props
+  });
+}
+export {
+  buttonVariants,
+  Button
+};
+export { buttonVariants, Button };
+
+//# debugId=977B340CD56BA22064756E2164756E21

package/dist/components/Button/index.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/components/Button/Button.tsx"],
+  "sourcesContent": [
+    "import { Button as BaseButton } from '@base-ui/react/button';\nimport { cva, type VariantProps } from 'cva';\nimport { cn } from '../../utils/cn';\n\nexport const buttonVariants = cva({\n    base: 'inline-flex items-center justify-center rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 data-disabled:pointer-events-none data-disabled:opacity-50',\n    variants: {\n        variant: {\n            primary:\n                'bg-denim text-white shadow-sm hover:not-data-disabled:bg-denim/90 focus-visible:ring-denim',\n            secondary:\n                'border border-kraft/15 bg-canvas text-kraft hover:not-data-disabled:bg-canvas/70 focus-visible:ring-kraft',\n            destructive:\n                'bg-spool text-white hover:not-data-disabled:bg-spool/85 focus-visible:ring-spool',\n            outline:\n                'border border-kraft/25 bg-transparent text-kraft shadow-sm hover:not-data-disabled:bg-canvas focus-visible:ring-kraft',\n            ghost: 'text-kraft hover:not-data-disabled:bg-canvas focus-visible:ring-kraft'\n        },\n        size: {\n            sm: 'h-8 px-3 text-sm',\n            md: 'h-10 px-4 text-sm',\n            lg: 'h-12 px-6 text-base'\n        }\n    },\n    defaultVariants: {\n        variant: 'primary',\n        size: 'md'\n    }\n});\n\nexport interface ButtonProps\n    extends React.ComponentPropsWithoutRef<typeof BaseButton>,\n        VariantProps<typeof buttonVariants> {}\n\nexport function Button({ className, variant, size, ...props }: ButtonProps) {\n    return (\n        <BaseButton\n            className={cn(buttonVariants({ variant, size }), className)}\n            {...props}\n        />\n    );\n}\n"
+  ],
+  "mappings": ";;;;;;;;AAAA,mBAAS;;AAIF,IAAM,iBAAiB,IAAI;AAAA,EAC9B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,SACI;AAAA,MACJ,WACI;AAAA,MACJ,aACI;AAAA,MACJ,SACI;AAAA,MACJ,OAAO;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACF,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACR;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,IACT,MAAM;AAAA,EACV;AACJ,CAAC;AAMM,SAAS,MAAM,GAAG,WAAW,SAAS,SAAS,SAAsB;AAAA,EACxE,uBACI,IAAC,YAAD;AAAA,IACI,WAAW,GAAG,eAAe,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,OACtD;AAAA,GACR;AAAA;",
+  "debugId": "977B340CD56BA22064756E2164756E21",
+  "names": []
+}

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Card/Card.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Simple: Story;

package/dist/components/Card/index.d.ts

@@ -0,0 +1 @@
+export { Card, CardHeader, CardTitle, CardContent, CardFooter } from './Card';