rivet-ui 0.1.0

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

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/components/NavigationMenu/NavigationMenu.tsx"],
+  "sourcesContent": [
+    "import * as React from 'react';\nimport { NavigationMenu } from '@base-ui/react/navigation-menu';\nimport { cn } from '../../utils/cn';\n\nexport const NavigationMenuPortal = NavigationMenu.Portal;\n\nexport const NavigationMenuRoot = React.forwardRef<\n    HTMLElement,\n    React.ComponentPropsWithoutRef<typeof NavigationMenu.Root>\n>(({ className, ...props }, ref) => (\n    <NavigationMenu.Root\n        ref={ref}\n        className={cn('relative flex items-center', className)}\n        {...props}\n    />\n));\nNavigationMenuRoot.displayName = 'NavigationMenuRoot';\n\nexport const NavigationMenuList = React.forwardRef<\n    HTMLUListElement,\n    React.ComponentPropsWithoutRef<typeof NavigationMenu.List>\n>(({ className, ...props }, ref) => (\n    <NavigationMenu.List\n        ref={ref}\n        className={cn(\n            'flex flex-1 list-none items-center justify-center gap-1',\n            className\n        )}\n        {...props}\n    />\n));\nNavigationMenuList.displayName = 'NavigationMenuList';\n\nexport const NavigationMenuItem = React.forwardRef<\n    HTMLLIElement,\n    React.ComponentPropsWithoutRef<typeof NavigationMenu.Item>\n>(({ className, ...props }, ref) => (\n    <NavigationMenu.Item\n        ref={ref}\n        className={cn('relative', className)}\n        {...props}\n    />\n));\nNavigationMenuItem.displayName = 'NavigationMenuItem';\n\nexport const NavigationMenuTrigger = React.forwardRef<\n    HTMLButtonElement,\n    React.ComponentPropsWithoutRef<typeof NavigationMenu.Trigger>\n>(({ className, ...props }, ref) => (\n    <NavigationMenu.Trigger\n        ref={ref}\n        className={cn(\n            'group inline-flex h-9 items-center justify-center gap-1 rounded-lg bg-transparent px-3 py-2 text-sm font-medium text-kraft transition-colors hover:bg-canvas/40 hover:text-kraft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon data-popup-open:bg-canvas/40',\n            className\n        )}\n        {...props}\n    />\n));\nNavigationMenuTrigger.displayName = 'NavigationMenuTrigger';\n\nexport const NavigationMenuIcon = React.forwardRef<\n    HTMLSpanElement,\n    React.ComponentPropsWithoutRef<typeof NavigationMenu.Icon>\n>(({ className, children, ...props }, ref) => (\n    <NavigationMenu.Icon\n        ref={ref}\n        className={cn(\n            'relative top-px ml-0.5 transition-transform duration-200 group-data-popup-open:rotate-180',\n            className\n        )}\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    </NavigationMenu.Icon>\n));\nNavigationMenuIcon.displayName = 'NavigationMenuIcon';\n\nexport const NavigationMenuPositioner = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof NavigationMenu.Positioner>\n>(({ className, ...props }, ref) => (\n    <NavigationMenu.Positioner\n        ref={ref}\n        className={cn('absolute top-full left-0 z-50', className)}\n        {...props}\n    />\n));\nNavigationMenuPositioner.displayName = 'NavigationMenuPositioner';\n\nexport const NavigationMenuViewport = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof NavigationMenu.Viewport>\n>(({ className, ...props }, ref) => (\n    <NavigationMenu.Viewport\n        ref={ref}\n        className={cn(\n            'mt-1 overflow-hidden rounded-xl border border-kraft/15 bg-surface shadow-lg shadow-kraft/10',\n            'transition-[width,height] duration-200 origin-top-left',\n            className\n        )}\n        {...props}\n    />\n));\nNavigationMenuViewport.displayName = 'NavigationMenuViewport';\n\nexport const NavigationMenuPopup = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof NavigationMenu.Popup>\n>(({ className, ...props }, ref) => (\n    <NavigationMenu.Popup\n        ref={ref}\n        className={cn('p-1', className)}\n        {...props}\n    />\n));\nNavigationMenuPopup.displayName = 'NavigationMenuPopup';\n\nexport const NavigationMenuContent = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof NavigationMenu.Content>\n>(({ className, ...props }, ref) => (\n    <NavigationMenu.Content\n        ref={ref}\n        className={cn('p-3', className)}\n        {...props}\n    />\n));\nNavigationMenuContent.displayName = 'NavigationMenuContent';\n\nexport const NavigationMenuLink = React.forwardRef<\n    HTMLAnchorElement,\n    React.ComponentPropsWithoutRef<typeof NavigationMenu.Link>\n>(({ className, ...props }, ref) => (\n    <NavigationMenu.Link\n        ref={ref}\n        className={cn(\n            'block select-none rounded-lg px-3 py-2 text-sm text-kraft leading-snug no-underline outline-none transition-colors hover:bg-canvas/40 focus-visible:bg-canvas/40',\n            className\n        )}\n        {...props}\n    />\n));\nNavigationMenuLink.displayName = 'NavigationMenuLink';\n"
+  ],
+  "mappings": ";;;;;AAAA;AACA;;AAGO,IAAM,uBAAuB,eAAe;AAE5C,IAAM,qBAA2B,iBAGtC,GAAG,cAAc,SAAS,wBACxB,IAAC,eAAe,MAAhB;AAAA,EACI;AAAA,EACA,WAAW,GAAG,8BAA8B,SAAS;AAAA,KACjD;AAAA,CACR,CACH;AACD,mBAAmB,cAAc;AAE1B,IAAM,qBAA2B,iBAGtC,GAAG,cAAc,SAAS,wBACxB,IAAC,eAAe,MAAhB;AAAA,EACI;AAAA,EACA,WAAW,GACP,2DACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,mBAAmB,cAAc;AAE1B,IAAM,qBAA2B,iBAGtC,GAAG,cAAc,SAAS,wBACxB,IAAC,eAAe,MAAhB;AAAA,EACI;AAAA,EACA,WAAW,GAAG,YAAY,SAAS;AAAA,KAC/B;AAAA,CACR,CACH;AACD,mBAAmB,cAAc;AAE1B,IAAM,wBAA8B,iBAGzC,GAAG,cAAc,SAAS,wBACxB,IAAC,eAAe,SAAhB;AAAA,EACI;AAAA,EACA,WAAW,GACP,2RACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,sBAAsB,cAAc;AAE7B,IAAM,qBAA2B,iBAGtC,GAAG,WAAW,aAAa,SAAS,wBAClC,IAwBE,eAAe,MAxBjB;AAAA,EACI;AAAA,EACA,WAAW,GACP,6FACA,SACJ;AAAA,KACI;AAAA,EANR,UAQK,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,mBAAmB,cAAc;AAE1B,IAAM,2BAAiC,iBAG5C,GAAG,cAAc,SAAS,wBACxB,IAAC,eAAe,YAAhB;AAAA,EACI;AAAA,EACA,WAAW,GAAG,iCAAiC,SAAS;AAAA,KACpD;AAAA,CACR,CACH;AACD,yBAAyB,cAAc;AAEhC,IAAM,yBAA+B,iBAG1C,GAAG,cAAc,SAAS,wBACxB,IAAC,eAAe,UAAhB;AAAA,EACI;AAAA,EACA,WAAW,GACP,+FACA,0DACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,uBAAuB,cAAc;AAE9B,IAAM,sBAA4B,iBAGvC,GAAG,cAAc,SAAS,wBACxB,IAAC,eAAe,OAAhB;AAAA,EACI;AAAA,EACA,WAAW,GAAG,OAAO,SAAS;AAAA,KAC1B;AAAA,CACR,CACH;AACD,oBAAoB,cAAc;AAE3B,IAAM,wBAA8B,iBAGzC,GAAG,cAAc,SAAS,wBACxB,IAAC,eAAe,SAAhB;AAAA,EACI;AAAA,EACA,WAAW,GAAG,OAAO,SAAS;AAAA,KAC1B;AAAA,CACR,CACH;AACD,sBAAsB,cAAc;AAE7B,IAAM,qBAA2B,iBAGtC,GAAG,cAAc,SAAS,wBACxB,IAAC,eAAe,MAAhB;AAAA,EACI;AAAA,EACA,WAAW,GACP,oKACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,mBAAmB,cAAc;",
+  "debugId": "A43D4C7F728B250464756E2164756E21",
+  "names": []
+}

package/dist/components/NumberField/NumberField.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export declare const NumberFieldRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const NumberFieldGroup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const NumberFieldDecrement: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldDecrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const NumberFieldIncrement: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldIncrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const NumberFieldInput: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const NumberFieldScrubArea: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldScrubAreaProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const NumberFieldScrubAreaCursor: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldScrubAreaCursorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const WithStep: Story;
+export declare const Disabled: Story;

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

@@ -0,0 +1 @@
+export { NumberFieldRoot, NumberFieldGroup, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea, NumberFieldScrubAreaCursor } from './NumberField';

package/dist/components/NumberField/index.js

@@ -0,0 +1,84 @@
+import {
+  cn
+} from "../../utils/cn.js";
+
+// src/components/NumberField/NumberField.tsx
+import * as React from "react";
+import { NumberField } from "@base-ui/react/number-field";
+import { jsx } from "react/jsx-runtime";
+var NumberFieldRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(NumberField.Root, {
+  ref,
+  className: cn("flex flex-col gap-1", className),
+  ...props
+}));
+NumberFieldRoot.displayName = "NumberFieldRoot";
+var NumberFieldGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(NumberField.Group, {
+  ref,
+  className: cn("flex h-10 items-center overflow-hidden rounded-lg border border-kraft/25 bg-surface focus-within:ring-2 focus-within:ring-ribbon focus-within:ring-offset-2", className),
+  ...props
+}));
+NumberFieldGroup.displayName = "NumberFieldGroup";
+var NumberFieldDecrement = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(NumberField.Decrement, {
+  ref,
+  className: cn("flex h-full w-9 shrink-0 items-center justify-center border-r border-kraft/15 text-kraft/60 transition-colors hover:bg-canvas/40 hover:text-kraft focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+  ...props,
+  children: children ?? /* @__PURE__ */ jsx("svg", {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    className: "h-3.5 w-3.5",
+    "aria-hidden": true,
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M5 12h14"
+    })
+  })
+}));
+NumberFieldDecrement.displayName = "NumberFieldDecrement";
+var NumberFieldIncrement = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(NumberField.Increment, {
+  ref,
+  className: cn("flex h-full w-9 shrink-0 items-center justify-center border-l border-kraft/15 text-kraft/60 transition-colors hover:bg-canvas/40 hover:text-kraft focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+  ...props,
+  children: children ?? /* @__PURE__ */ jsx("svg", {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    className: "h-3.5 w-3.5",
+    "aria-hidden": true,
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M12 5v14M5 12h14"
+    })
+  })
+}));
+NumberFieldIncrement.displayName = "NumberFieldIncrement";
+var NumberFieldInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(NumberField.Input, {
+  ref,
+  className: cn("h-full min-w-0 flex-1 bg-transparent px-3 text-center text-sm text-kraft focus-visible:outline-none", className),
+  ...props
+}));
+NumberFieldInput.displayName = "NumberFieldInput";
+var NumberFieldScrubArea = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(NumberField.ScrubArea, {
+  ref,
+  className: cn("cursor-ew-resize select-none", className),
+  ...props
+}));
+NumberFieldScrubArea.displayName = "NumberFieldScrubArea";
+var NumberFieldScrubAreaCursor = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(NumberField.ScrubAreaCursor, {
+  ref,
+  className: cn("drop-shadow", className),
+  ...props
+}));
+NumberFieldScrubAreaCursor.displayName = "NumberFieldScrubAreaCursor";
+export {
+  NumberFieldScrubAreaCursor,
+  NumberFieldScrubArea,
+  NumberFieldRoot,
+  NumberFieldInput,
+  NumberFieldIncrement,
+  NumberFieldGroup,
+  NumberFieldDecrement
+};
+export { NumberFieldRoot, NumberFieldGroup, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea, NumberFieldScrubAreaCursor };
+
+//# debugId=E92C99C58DD01F0C64756E2164756E21

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

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/components/NumberField/NumberField.tsx"],
+  "sourcesContent": [
+    "import * as React from 'react';\nimport { NumberField } from '@base-ui/react/number-field';\nimport { cn } from '../../utils/cn';\n\nexport const NumberFieldRoot = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof NumberField.Root>\n>(({ className, ...props }, ref) => (\n    <NumberField.Root\n        ref={ref}\n        className={cn('flex flex-col gap-1', className)}\n        {...props}\n    />\n));\nNumberFieldRoot.displayName = 'NumberFieldRoot';\n\nexport const NumberFieldGroup = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof NumberField.Group>\n>(({ className, ...props }, ref) => (\n    <NumberField.Group\n        ref={ref}\n        className={cn(\n            'flex h-10 items-center overflow-hidden rounded-lg border border-kraft/25 bg-surface focus-within:ring-2 focus-within:ring-ribbon focus-within:ring-offset-2',\n            className\n        )}\n        {...props}\n    />\n));\nNumberFieldGroup.displayName = 'NumberFieldGroup';\n\nexport const NumberFieldDecrement = React.forwardRef<\n    HTMLButtonElement,\n    React.ComponentPropsWithoutRef<typeof NumberField.Decrement>\n>(({ className, children, ...props }, ref) => (\n    <NumberField.Decrement\n        ref={ref}\n        className={cn(\n            'flex h-full w-9 shrink-0 items-center justify-center border-r border-kraft/15 text-kraft/60 transition-colors hover:bg-canvas/40 hover:text-kraft focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50',\n            className\n        )}\n        {...props}\n    >\n        {children ?? (\n            <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={2}\n                className=\"h-3.5 w-3.5\"\n                aria-hidden\n            >\n                <path d=\"M5 12h14\" />\n            </svg>\n        )}\n    </NumberField.Decrement>\n));\nNumberFieldDecrement.displayName = 'NumberFieldDecrement';\n\nexport const NumberFieldIncrement = React.forwardRef<\n    HTMLButtonElement,\n    React.ComponentPropsWithoutRef<typeof NumberField.Increment>\n>(({ className, children, ...props }, ref) => (\n    <NumberField.Increment\n        ref={ref}\n        className={cn(\n            'flex h-full w-9 shrink-0 items-center justify-center border-l border-kraft/15 text-kraft/60 transition-colors hover:bg-canvas/40 hover:text-kraft focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50',\n            className\n        )}\n        {...props}\n    >\n        {children ?? (\n            <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={2}\n                className=\"h-3.5 w-3.5\"\n                aria-hidden\n            >\n                <path d=\"M12 5v14M5 12h14\" />\n            </svg>\n        )}\n    </NumberField.Increment>\n));\nNumberFieldIncrement.displayName = 'NumberFieldIncrement';\n\nexport const NumberFieldInput = React.forwardRef<\n    HTMLInputElement,\n    React.ComponentPropsWithoutRef<typeof NumberField.Input>\n>(({ className, ...props }, ref) => (\n    <NumberField.Input\n        ref={ref}\n        className={cn(\n            'h-full min-w-0 flex-1 bg-transparent px-3 text-center text-sm text-kraft focus-visible:outline-none',\n            className\n        )}\n        {...props}\n    />\n));\nNumberFieldInput.displayName = 'NumberFieldInput';\n\nexport const NumberFieldScrubArea = React.forwardRef<\n    HTMLSpanElement,\n    React.ComponentPropsWithoutRef<typeof NumberField.ScrubArea>\n>(({ className, ...props }, ref) => (\n    <NumberField.ScrubArea\n        ref={ref}\n        className={cn('cursor-ew-resize select-none', className)}\n        {...props}\n    />\n));\nNumberFieldScrubArea.displayName = 'NumberFieldScrubArea';\n\nexport const NumberFieldScrubAreaCursor = React.forwardRef<\n    HTMLSpanElement,\n    React.ComponentPropsWithoutRef<typeof NumberField.ScrubAreaCursor>\n>(({ className, ...props }, ref) => (\n    <NumberField.ScrubAreaCursor\n        ref={ref}\n        className={cn('drop-shadow', className)}\n        {...props}\n    />\n));\nNumberFieldScrubAreaCursor.displayName = 'NumberFieldScrubAreaCursor';\n"
+  ],
+  "mappings": ";;;;;AAAA;AACA;;AAGO,IAAM,kBAAwB,iBAGnC,GAAG,cAAc,SAAS,wBACxB,IAAC,YAAY,MAAb;AAAA,EACI;AAAA,EACA,WAAW,GAAG,uBAAuB,SAAS;AAAA,KAC1C;AAAA,CACR,CACH;AACD,gBAAgB,cAAc;AAEvB,IAAM,mBAAyB,iBAGpC,GAAG,cAAc,SAAS,wBACxB,IAAC,YAAY,OAAb;AAAA,EACI;AAAA,EACA,WAAW,GACP,+JACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,iBAAiB,cAAc;AAExB,IAAM,uBAA6B,iBAGxC,GAAG,WAAW,aAAa,SAAS,wBAClC,IAoBE,YAAY,WApBd;AAAA,EACI;AAAA,EACA,WAAW,GACP,0OACA,SACJ;AAAA,KACI;AAAA,EANR,UAQK,4BACG,IASE,OATF;AAAA,IACI,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAa;AAAA,IACb,WAAU;AAAA,IACV,eAAW;AAAA,IANf,0BAQI,IAAC,QAAD;AAAA,MAAM,GAAE;AAAA,KAAW;AAAA,GACrB;AAAA,CAER,CACL;AACD,qBAAqB,cAAc;AAE5B,IAAM,uBAA6B,iBAGxC,GAAG,WAAW,aAAa,SAAS,wBAClC,IAoBE,YAAY,WApBd;AAAA,EACI;AAAA,EACA,WAAW,GACP,0OACA,SACJ;AAAA,KACI;AAAA,EANR,UAQK,4BACG,IASE,OATF;AAAA,IACI,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAa;AAAA,IACb,WAAU;AAAA,IACV,eAAW;AAAA,IANf,0BAQI,IAAC,QAAD;AAAA,MAAM,GAAE;AAAA,KAAmB;AAAA,GAC7B;AAAA,CAER,CACL;AACD,qBAAqB,cAAc;AAE5B,IAAM,mBAAyB,iBAGpC,GAAG,cAAc,SAAS,wBACxB,IAAC,YAAY,OAAb;AAAA,EACI;AAAA,EACA,WAAW,GACP,uGACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,iBAAiB,cAAc;AAExB,IAAM,uBAA6B,iBAGxC,GAAG,cAAc,SAAS,wBACxB,IAAC,YAAY,WAAb;AAAA,EACI;AAAA,EACA,WAAW,GAAG,gCAAgC,SAAS;AAAA,KACnD;AAAA,CACR,CACH;AACD,qBAAqB,cAAc;AAE5B,IAAM,6BAAmC,iBAG9C,GAAG,cAAc,SAAS,wBACxB,IAAC,YAAY,iBAAb;AAAA,EACI;AAAA,EACA,WAAW,GAAG,eAAe,SAAS;AAAA,KAClC;AAAA,CACR,CACH;AACD,2BAA2B,cAAc;",
+  "debugId": "E92C99C58DD01F0C64756E2164756E21",
+  "names": []
+}

package/dist/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLElement> {
+    title: string;
+    subtitle?: string;
+    /** Buttons, links, or any controls rendered flush-right */
+    actions?: React.ReactNode;
+    /** Optional slot above the title — useful for breadcrumbs */
+    eyebrow?: React.ReactNode;
+}
+export declare function PageHeader({ title, subtitle, actions, eyebrow, className, ...props }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PageHeader } from './PageHeader';
+declare const meta: Meta<typeof PageHeader>;
+export default meta;
+type Story = StoryObj<typeof PageHeader>;
+export declare const Default: Story;
+export declare const WithSubtitle: Story;
+export declare const WithActions: Story;
+export declare const WithEyebrow: Story;
+export declare const WithBadge: Story;

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

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

package/dist/components/PageHeader/index.js

@@ -0,0 +1,48 @@
+import {
+  cn
+} from "../../utils/cn.js";
+
+// src/components/PageHeader/PageHeader.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PageHeader({
+  title,
+  subtitle,
+  actions,
+  eyebrow,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("header", {
+    className: cn("flex flex-col gap-4 border-b border-kraft/10 pb-6 sm:flex-row sm:items-start sm:justify-between", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "min-w-0 space-y-1",
+        children: [
+          eyebrow && /* @__PURE__ */ jsx("div", {
+            className: "text-xs font-medium uppercase tracking-widest text-kraft/50",
+            children: eyebrow
+          }),
+          /* @__PURE__ */ jsx("h1", {
+            className: "truncate text-2xl font-bold text-kraft",
+            children: title
+          }),
+          subtitle && /* @__PURE__ */ jsx("p", {
+            className: "text-sm text-kraft/60",
+            children: subtitle
+          })
+        ]
+      }),
+      actions && /* @__PURE__ */ jsx("div", {
+        className: "flex shrink-0 items-center gap-2",
+        children: actions
+      })
+    ]
+  });
+}
+export {
+  PageHeader
+};
+export { PageHeader };
+
+//# debugId=F03E1FFDC131D45C64756E2164756E21

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

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/components/PageHeader/PageHeader.tsx"],
+  "sourcesContent": [
+    "import * as React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface PageHeaderProps extends React.HTMLAttributes<HTMLElement> {\n    title: string;\n    subtitle?: string;\n    /** Buttons, links, or any controls rendered flush-right */\n    actions?: React.ReactNode;\n    /** Optional slot above the title — useful for breadcrumbs */\n    eyebrow?: React.ReactNode;\n}\n\nexport function PageHeader({\n    title,\n    subtitle,\n    actions,\n    eyebrow,\n    className,\n    ...props\n}: PageHeaderProps) {\n    return (\n        <header\n            className={cn(\n                'flex flex-col gap-4 border-b border-kraft/10 pb-6 sm:flex-row sm:items-start sm:justify-between',\n                className\n            )}\n            {...props}\n        >\n            <div className=\"min-w-0 space-y-1\">\n                {eyebrow && (\n                    <div className=\"text-xs font-medium uppercase tracking-widest text-kraft/50\">\n                        {eyebrow}\n                    </div>\n                )}\n                <h1 className=\"truncate text-2xl font-bold text-kraft\">\n                    {title}\n                </h1>\n                {subtitle && (\n                    <p className=\"text-sm text-kraft/60\">{subtitle}</p>\n                )}\n            </div>\n            {actions && (\n                <div className=\"flex shrink-0 items-center gap-2\">\n                    {actions}\n                </div>\n            )}\n        </header>\n    );\n}\n"
+  ],
+  "mappings": ";;;;;;AAYO,SAAS,UAAU;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,GACa;AAAA,EAChB,uBACI,KAyBE,UAzBF;AAAA,IACI,WAAW,GACP,mGACA,SACJ;AAAA,OACI;AAAA,IALR,UAyBE;AAAA,sBAlBE,KAYE,OAZF;AAAA,QAAK,WAAU;AAAA,QAAf,UAYE;AAAA,UAXG,2BACG,IAEE,OAFF;AAAA,YAAK,WAAU;AAAA,YAAf,UACK;AAAA,WACH;AAAA,0BAEN,IAEE,MAFF;AAAA,YAAI,WAAU;AAAA,YAAd,UACK;AAAA,WACH;AAAA,UACD,4BACG,IAAiD,KAAjD;AAAA,YAAG,WAAU;AAAA,YAAb,UAAsC;AAAA,WAAW;AAAA;AAAA,OAEvD;AAAA,MACD,2BACG,IAEE,OAFF;AAAA,QAAK,WAAU;AAAA,QAAf,UACK;AAAA,OACH;AAAA;AAAA,GAER;AAAA;",
+  "debugId": "F03E1FFDC131D45C64756E2164756E21",
+  "names": []
+}

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,12 @@
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import React from 'react';
+export declare const PopoverRoot: typeof BasePopover.Root;
+export declare const PopoverPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<React.ComponentPropsWithoutRef<typeof BasePopover.Trigger> & React.RefAttributes<HTMLButtonElement>>;
+export declare const PopoverBackdrop: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverPositioner: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverPopup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverTitle: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const PopoverDescription: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const PopoverClose: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    tags: string[];
+};
+export default meta;
+export declare const Default: StoryObj;
+export declare const RichContent: StoryObj;
+export declare const OpenOnHover: StoryObj;

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

@@ -0,0 +1 @@
+export { PopoverRoot, PopoverPortal, PopoverTrigger, PopoverBackdrop, PopoverPositioner, PopoverPopup, PopoverTitle, PopoverDescription, PopoverClose, PopoverArrow } from './Popover';

package/dist/components/Popover/index.js

@@ -0,0 +1,74 @@
+import {
+  cn
+} from "../../utils/cn.js";
+
+// src/components/Popover/Popover.tsx
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var PopoverRoot = BasePopover.Root;
+var PopoverPortal = BasePopover.Portal;
+var PopoverTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BasePopover.Trigger, {
+  ref,
+  className: cn("inline-flex h-9 items-center justify-center rounded-lg border border-kraft/25 bg-surface px-4 text-sm font-medium text-kraft transition-colors select-none hover:bg-canvas focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-2 data-popup-open:bg-canvas", className),
+  ...props
+}));
+PopoverTrigger.displayName = "PopoverTrigger";
+var PopoverBackdrop = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BasePopover.Backdrop, {
+  ref,
+  className: cn("fixed inset-0", className),
+  ...props
+}));
+PopoverBackdrop.displayName = "PopoverBackdrop";
+var PopoverPositioner = React.forwardRef(({ className, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(BasePopover.Positioner, {
+  ref,
+  sideOffset,
+  className: cn("z-50", className),
+  ...props
+}));
+PopoverPositioner.displayName = "PopoverPositioner";
+var PopoverPopup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BasePopover.Popup, {
+  ref,
+  className: cn("origin-[var(--transform-origin)] rounded-lg border border-kraft/15 bg-surface p-4 text-kraft shadow-lg transition-[transform,opacity] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-95 data-starting-style:opacity-0", className),
+  ...props
+}));
+PopoverPopup.displayName = "PopoverPopup";
+var PopoverTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BasePopover.Title, {
+  ref,
+  className: cn("mb-1 text-base font-semibold text-kraft", className),
+  ...props
+}));
+PopoverTitle.displayName = "PopoverTitle";
+var PopoverDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BasePopover.Description, {
+  ref,
+  className: cn("text-sm text-kraft/60", className),
+  ...props
+}));
+PopoverDescription.displayName = "PopoverDescription";
+var PopoverClose = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BasePopover.Close, {
+  ref,
+  className: cn("inline-flex h-9 items-center justify-center rounded-lg border border-kraft/25 bg-surface px-4 text-sm font-medium text-kraft transition-colors select-none hover:bg-canvas focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-2", className),
+  ...props
+}));
+PopoverClose.displayName = "PopoverClose";
+var PopoverArrow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BasePopover.Arrow, {
+  ref,
+  className: cn("flex data-[side=bottom]:top-[-8px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180", className),
+  ...props
+}));
+PopoverArrow.displayName = "PopoverArrow";
+export {
+  PopoverTrigger,
+  PopoverTitle,
+  PopoverRoot,
+  PopoverPositioner,
+  PopoverPortal,
+  PopoverPopup,
+  PopoverDescription,
+  PopoverClose,
+  PopoverBackdrop,
+  PopoverArrow
+};
+export { PopoverRoot, PopoverPortal, PopoverTrigger, PopoverBackdrop, PopoverPositioner, PopoverPopup, PopoverTitle, PopoverDescription, PopoverClose, PopoverArrow };
+
+//# debugId=87FE80B3889D991864756E2164756E21

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

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/components/Popover/Popover.tsx"],
+  "sourcesContent": [
+    "import { Popover as BasePopover } from '@base-ui/react/popover';\nimport React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const PopoverRoot = BasePopover.Root;\nexport const PopoverPortal = BasePopover.Portal;\n\nexport const PopoverTrigger: React.ForwardRefExoticComponent<\n    React.ComponentPropsWithoutRef<typeof BasePopover.Trigger> &\n        React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef<\n    HTMLButtonElement,\n    React.ComponentPropsWithoutRef<typeof BasePopover.Trigger>\n>(({ className, ...props }, ref) => (\n    <BasePopover.Trigger\n        ref={ref}\n        className={cn(\n            'inline-flex h-9 items-center justify-center rounded-lg border border-kraft/25 bg-surface px-4 text-sm font-medium text-kraft transition-colors select-none hover:bg-canvas focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-2 data-popup-open:bg-canvas',\n            className\n        )}\n        {...props}\n    />\n));\nPopoverTrigger.displayName = 'PopoverTrigger';\n\nexport const PopoverBackdrop = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof BasePopover.Backdrop>\n>(({ className, ...props }, ref) => (\n    <BasePopover.Backdrop\n        ref={ref}\n        className={cn('fixed inset-0', className)}\n        {...props}\n    />\n));\nPopoverBackdrop.displayName = 'PopoverBackdrop';\n\nexport const PopoverPositioner = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof BasePopover.Positioner>\n>(({ className, sideOffset = 8, ...props }, ref) => (\n    <BasePopover.Positioner\n        ref={ref}\n        sideOffset={sideOffset}\n        className={cn('z-50', className)}\n        {...props}\n    />\n));\nPopoverPositioner.displayName = 'PopoverPositioner';\n\nexport const PopoverPopup = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof BasePopover.Popup>\n>(({ className, ...props }, ref) => (\n    <BasePopover.Popup\n        ref={ref}\n        className={cn(\n            'origin-[var(--transform-origin)] rounded-lg border border-kraft/15 bg-surface p-4 text-kraft shadow-lg transition-[transform,opacity] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-95 data-starting-style:opacity-0',\n            className\n        )}\n        {...props}\n    />\n));\nPopoverPopup.displayName = 'PopoverPopup';\n\nexport const PopoverTitle = React.forwardRef<\n    HTMLHeadingElement,\n    React.ComponentPropsWithoutRef<typeof BasePopover.Title>\n>(({ className, ...props }, ref) => (\n    <BasePopover.Title\n        ref={ref}\n        className={cn('mb-1 text-base font-semibold text-kraft', className)}\n        {...props}\n    />\n));\nPopoverTitle.displayName = 'PopoverTitle';\n\nexport const PopoverDescription = React.forwardRef<\n    HTMLParagraphElement,\n    React.ComponentPropsWithoutRef<typeof BasePopover.Description>\n>(({ className, ...props }, ref) => (\n    <BasePopover.Description\n        ref={ref}\n        className={cn('text-sm text-kraft/60', className)}\n        {...props}\n    />\n));\nPopoverDescription.displayName = 'PopoverDescription';\n\nexport const PopoverClose = React.forwardRef<\n    HTMLButtonElement,\n    React.ComponentPropsWithoutRef<typeof BasePopover.Close>\n>(({ className, ...props }, ref) => (\n    <BasePopover.Close\n        ref={ref}\n        className={cn(\n            'inline-flex h-9 items-center justify-center rounded-lg border border-kraft/25 bg-surface px-4 text-sm font-medium text-kraft transition-colors select-none hover:bg-canvas focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-2',\n            className\n        )}\n        {...props}\n    />\n));\nPopoverClose.displayName = 'PopoverClose';\n\nexport const PopoverArrow = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof BasePopover.Arrow>\n>(({ className, ...props }, ref) => (\n    <BasePopover.Arrow\n        ref={ref}\n        className={cn(\n            'flex data-[side=bottom]:top-[-8px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n            className\n        )}\n        {...props}\n    />\n));\nPopoverArrow.displayName = 'PopoverArrow';\n"
+  ],
+  "mappings": ";;;;;AAAA,oBAAS;AACT;;AAGO,IAAM,cAAc,YAAY;AAChC,IAAM,gBAAgB,YAAY;AAElC,IAAM,iBAGT,MAAM,WAGR,GAAG,cAAc,SAAS,wBACxB,IAAC,YAAY,SAAb;AAAA,EACI;AAAA,EACA,WAAW,GACP,8SACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,eAAe,cAAc;AAEtB,IAAM,kBAAkB,MAAM,WAGnC,GAAG,cAAc,SAAS,wBACxB,IAAC,YAAY,UAAb;AAAA,EACI;AAAA,EACA,WAAW,GAAG,iBAAiB,SAAS;AAAA,KACpC;AAAA,CACR,CACH;AACD,gBAAgB,cAAc;AAEvB,IAAM,oBAAoB,MAAM,WAGrC,GAAG,WAAW,aAAa,MAAM,SAAS,wBACxC,IAAC,YAAY,YAAb;AAAA,EACI;AAAA,EACA;AAAA,EACA,WAAW,GAAG,QAAQ,SAAS;AAAA,KAC3B;AAAA,CACR,CACH;AACD,kBAAkB,cAAc;AAEzB,IAAM,eAAe,MAAM,WAGhC,GAAG,cAAc,SAAS,wBACxB,IAAC,YAAY,OAAb;AAAA,EACI;AAAA,EACA,WAAW,GACP,qSACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,aAAa,cAAc;AAEpB,IAAM,eAAe,MAAM,WAGhC,GAAG,cAAc,SAAS,wBACxB,IAAC,YAAY,OAAb;AAAA,EACI;AAAA,EACA,WAAW,GAAG,2CAA2C,SAAS;AAAA,KAC9D;AAAA,CACR,CACH;AACD,aAAa,cAAc;AAEpB,IAAM,qBAAqB,MAAM,WAGtC,GAAG,cAAc,SAAS,wBACxB,IAAC,YAAY,aAAb;AAAA,EACI;AAAA,EACA,WAAW,GAAG,yBAAyB,SAAS;AAAA,KAC5C;AAAA,CACR,CACH;AACD,mBAAmB,cAAc;AAE1B,IAAM,eAAe,MAAM,WAGhC,GAAG,cAAc,SAAS,wBACxB,IAAC,YAAY,OAAb;AAAA,EACI;AAAA,EACA,WAAW,GACP,oRACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,aAAa,cAAc;AAEpB,IAAM,eAAe,MAAM,WAGhC,GAAG,cAAc,SAAS,wBACxB,IAAC,YAAY,OAAb;AAAA,EACI;AAAA,EACA,WAAW,GACP,iPACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,aAAa,cAAc;",
+  "debugId": "87FE80B3889D991864756E2164756E21",
+  "names": []
+}

package/dist/components/PreviewCard/PreviewCard.d.ts

@@ -0,0 +1,9 @@
+import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+import React from 'react';
+export declare const PreviewCardRoot: typeof BasePreviewCard.Root;
+export declare const PreviewCardPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").PreviewCardPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PreviewCardTrigger: React.ForwardRefExoticComponent<Omit<BasePreviewCard.Trigger.Props<unknown> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export declare const PreviewCardBackdrop: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PreviewCardBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PreviewCardPositioner: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PreviewCardPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PreviewCardPopup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PreviewCardArrow: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PreviewCardArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,8 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    tags: string[];
+};
+export default meta;
+export declare const Default: StoryObj;
+export declare const WithArrow: StoryObj;

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

@@ -0,0 +1 @@
+export { PreviewCardRoot, PreviewCardPortal, PreviewCardTrigger, PreviewCardBackdrop, PreviewCardPositioner, PreviewCardPopup, PreviewCardArrow } from './PreviewCard';

package/dist/components/PreviewCard/index.js

@@ -0,0 +1,53 @@
+import {
+  cn
+} from "../../utils/cn.js";
+
+// src/components/PreviewCard/PreviewCard.tsx
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var PreviewCardRoot = BasePreviewCard.Root;
+var PreviewCardPortal = BasePreviewCard.Portal;
+var PreviewCardTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BasePreviewCard.Trigger, {
+  ref,
+  className: cn("text-ribbon underline decoration-ribbon/60 decoration-1 underline-offset-2 outline-none hover:decoration-ribbon focus-visible:rounded-sm focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ribbon data-popup-open:decoration-ribbon", className),
+  ...props
+}));
+PreviewCardTrigger.displayName = "PreviewCardTrigger";
+var PreviewCardBackdrop = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BasePreviewCard.Backdrop, {
+  ref,
+  className: cn("fixed inset-0", className),
+  ...props
+}));
+PreviewCardBackdrop.displayName = "PreviewCardBackdrop";
+var PreviewCardPositioner = React.forwardRef(({ className, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(BasePreviewCard.Positioner, {
+  ref,
+  sideOffset,
+  className: cn("z-50", className),
+  ...props
+}));
+PreviewCardPositioner.displayName = "PreviewCardPositioner";
+var PreviewCardPopup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BasePreviewCard.Popup, {
+  ref,
+  className: cn("origin-[var(--transform-origin)] rounded-lg border border-kraft/15 bg-surface text-kraft shadow-lg transition-[transform,opacity] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0", className),
+  ...props
+}));
+PreviewCardPopup.displayName = "PreviewCardPopup";
+var PreviewCardArrow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BasePreviewCard.Arrow, {
+  ref,
+  className: cn("flex data-[side=bottom]:top-[-8px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180", className),
+  ...props
+}));
+PreviewCardArrow.displayName = "PreviewCardArrow";
+export {
+  PreviewCardTrigger,
+  PreviewCardRoot,
+  PreviewCardPositioner,
+  PreviewCardPortal,
+  PreviewCardPopup,
+  PreviewCardBackdrop,
+  PreviewCardArrow
+};
+export { PreviewCardRoot, PreviewCardPortal, PreviewCardTrigger, PreviewCardBackdrop, PreviewCardPositioner, PreviewCardPopup, PreviewCardArrow };
+
+//# debugId=C98052C5557596CB64756E2164756E21

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

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/components/PreviewCard/PreviewCard.tsx"],
+  "sourcesContent": [
+    "import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';\nimport React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const PreviewCardRoot = BasePreviewCard.Root;\nexport const PreviewCardPortal = BasePreviewCard.Portal;\n\n// PreviewCard.Trigger renders an <a> element — use HTMLAnchorElement\nexport const PreviewCardTrigger = React.forwardRef<\n    HTMLAnchorElement,\n    React.ComponentPropsWithoutRef<typeof BasePreviewCard.Trigger>\n>(({ className, ...props }, ref) => (\n    <BasePreviewCard.Trigger\n        ref={ref}\n        className={cn(\n            'text-ribbon underline decoration-ribbon/60 decoration-1 underline-offset-2 outline-none hover:decoration-ribbon focus-visible:rounded-sm focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ribbon data-popup-open:decoration-ribbon',\n            className\n        )}\n        {...props}\n    />\n));\nPreviewCardTrigger.displayName = 'PreviewCardTrigger';\n\nexport const PreviewCardBackdrop = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof BasePreviewCard.Backdrop>\n>(({ className, ...props }, ref) => (\n    <BasePreviewCard.Backdrop\n        ref={ref}\n        className={cn('fixed inset-0', className)}\n        {...props}\n    />\n));\nPreviewCardBackdrop.displayName = 'PreviewCardBackdrop';\n\nexport const PreviewCardPositioner = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof BasePreviewCard.Positioner>\n>(({ className, sideOffset = 8, ...props }, ref) => (\n    <BasePreviewCard.Positioner\n        ref={ref}\n        sideOffset={sideOffset}\n        className={cn('z-50', className)}\n        {...props}\n    />\n));\nPreviewCardPositioner.displayName = 'PreviewCardPositioner';\n\nexport const PreviewCardPopup = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof BasePreviewCard.Popup>\n>(({ className, ...props }, ref) => (\n    <BasePreviewCard.Popup\n        ref={ref}\n        className={cn(\n            'origin-[var(--transform-origin)] rounded-lg border border-kraft/15 bg-surface text-kraft shadow-lg transition-[transform,opacity] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0',\n            className\n        )}\n        {...props}\n    />\n));\nPreviewCardPopup.displayName = 'PreviewCardPopup';\n\nexport const PreviewCardArrow = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof BasePreviewCard.Arrow>\n>(({ className, ...props }, ref) => (\n    <BasePreviewCard.Arrow\n        ref={ref}\n        className={cn(\n            'flex data-[side=bottom]:top-[-8px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n            className\n        )}\n        {...props}\n    />\n));\nPreviewCardArrow.displayName = 'PreviewCardArrow';\n"
+  ],
+  "mappings": ";;;;;AAAA,wBAAS;AACT;;AAGO,IAAM,kBAAkB,gBAAgB;AACxC,IAAM,oBAAoB,gBAAgB;AAG1C,IAAM,qBAAqB,MAAM,WAGtC,GAAG,cAAc,SAAS,wBACxB,IAAC,gBAAgB,SAAjB;AAAA,EACI;AAAA,EACA,WAAW,GACP,6RACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,mBAAmB,cAAc;AAE1B,IAAM,sBAAsB,MAAM,WAGvC,GAAG,cAAc,SAAS,wBACxB,IAAC,gBAAgB,UAAjB;AAAA,EACI;AAAA,EACA,WAAW,GAAG,iBAAiB,SAAS;AAAA,KACpC;AAAA,CACR,CACH;AACD,oBAAoB,cAAc;AAE3B,IAAM,wBAAwB,MAAM,WAGzC,GAAG,WAAW,aAAa,MAAM,SAAS,wBACxC,IAAC,gBAAgB,YAAjB;AAAA,EACI;AAAA,EACA;AAAA,EACA,WAAW,GAAG,QAAQ,SAAS;AAAA,KAC3B;AAAA,CACR,CACH;AACD,sBAAsB,cAAc;AAE7B,IAAM,mBAAmB,MAAM,WAGpC,GAAG,cAAc,SAAS,wBACxB,IAAC,gBAAgB,OAAjB;AAAA,EACI;AAAA,EACA,WAAW,GACP,oQACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,iBAAiB,cAAc;AAExB,IAAM,mBAAmB,MAAM,WAGpC,GAAG,cAAc,SAAS,wBACxB,IAAC,gBAAgB,OAAjB;AAAA,EACI;AAAA,EACA,WAAW,GACP,iPACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,iBAAiB,cAAc;",
+  "debugId": "C98052C5557596CB64756E2164756E21",
+  "names": []
+}

package/dist/components/ProfileCard/ProfileCard.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { type AvatarProps } from '../Avatar';
+import { type BadgeProps } from '../Badge';
+export interface ProfileCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Avatar image URL */
+    src?: string;
+    alt?: string;
+    initials?: string;
+    avatarColor?: AvatarProps['color'];
+    name: string;
+    role?: string;
+    /** Short bio or description shown below the role */
+    bio?: string;
+    badge?: string;
+    badgeVariant?: BadgeProps['variant'];
+    /** Action buttons or links rendered in the card footer */
+    actions?: React.ReactNode;
+}
+export declare function ProfileCard({ src, alt, initials, avatarColor, name, role, bio, badge, badgeVariant, actions, className, ...props }: ProfileCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProfileCard } from './ProfileCard';
+declare const meta: Meta<typeof ProfileCard>;
+export default meta;
+type Story = StoryObj<typeof ProfileCard>;
+export declare const Default: Story;
+export declare const WithBadge: Story;
+export declare const WithBio: Story;
+export declare const WithActions: Story;
+export declare const WithImage: Story;
+export declare const Destructive: Story;

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

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

package/dist/components/ProfileCard/index.js

@@ -0,0 +1,97 @@
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader
+} from "../Card/index.js";
+import {
+  Avatar
+} from "../Avatar/index.js";
+import {
+  SeparatorRoot
+} from "../Separator/index.js";
+import {
+  Badge
+} from "../Badge/index.js";
+import"../../chunk-fjtwj9cw.js";
+import {
+  cn
+} from "../../utils/cn.js";
+
+// src/components/ProfileCard/ProfileCard.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function ProfileCard({
+  src,
+  alt,
+  initials,
+  avatarColor,
+  name,
+  role,
+  bio,
+  badge,
+  badgeVariant = "ribbon",
+  actions,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Card, {
+    className: cn("w-72", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs(CardHeader, {
+        className: "items-center text-center gap-3 pb-3",
+        children: [
+          /* @__PURE__ */ jsx(Avatar, {
+            src,
+            alt,
+            initials,
+            color: avatarColor,
+            size: "lg"
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "space-y-1",
+            children: [
+              /* @__PURE__ */ jsx("h3", {
+                className: "text-base font-semibold text-kraft",
+                children: name
+              }),
+              role && /* @__PURE__ */ jsx("p", {
+                className: "text-sm text-kraft/60",
+                children: role
+              }),
+              badge && /* @__PURE__ */ jsx(Badge, {
+                variant: badgeVariant,
+                className: "mt-1",
+                children: badge
+              })
+            ]
+          })
+        ]
+      }),
+      bio && /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx(SeparatorRoot, {}),
+          /* @__PURE__ */ jsx(CardContent, {
+            className: "pt-4 text-sm text-kraft/70 text-center",
+            children: bio
+          })
+        ]
+      }),
+      actions && /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx(SeparatorRoot, {}),
+          /* @__PURE__ */ jsx(CardFooter, {
+            className: "justify-center gap-2 pt-4",
+            children: actions
+          })
+        ]
+      })
+    ]
+  });
+}
+export {
+  ProfileCard
+};
+export { ProfileCard };
+
+//# debugId=4411D3A3DF55D52264756E2164756E21

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

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/components/ProfileCard/ProfileCard.tsx"],
+  "sourcesContent": [
+    "import * as React from 'react';\nimport { Card, CardHeader, CardContent, CardFooter } from '../Card';\nimport { Avatar, type AvatarProps } from '../Avatar';\nimport { Badge, type BadgeProps } from '../Badge';\nimport { SeparatorRoot } from '../Separator';\nimport { cn } from '../../utils/cn';\n\nexport interface ProfileCardProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Avatar image URL */\n    src?: string;\n    alt?: string;\n    initials?: string;\n    avatarColor?: AvatarProps['color'];\n    name: string;\n    role?: string;\n    /** Short bio or description shown below the role */\n    bio?: string;\n    badge?: string;\n    badgeVariant?: BadgeProps['variant'];\n    /** Action buttons or links rendered in the card footer */\n    actions?: React.ReactNode;\n}\n\nexport function ProfileCard({\n    src,\n    alt,\n    initials,\n    avatarColor,\n    name,\n    role,\n    bio,\n    badge,\n    badgeVariant = 'ribbon',\n    actions,\n    className,\n    ...props\n}: ProfileCardProps) {\n    return (\n        <Card className={cn('w-72', className)} {...props}>\n            <CardHeader className=\"items-center text-center gap-3 pb-3\">\n                <Avatar\n                    src={src}\n                    alt={alt}\n                    initials={initials}\n                    color={avatarColor}\n                    size=\"lg\"\n                />\n                <div className=\"space-y-1\">\n                    <h3 className=\"text-base font-semibold text-kraft\">\n                        {name}\n                    </h3>\n                    {role && <p className=\"text-sm text-kraft/60\">{role}</p>}\n                    {badge && (\n                        <Badge variant={badgeVariant} className=\"mt-1\">\n                            {badge}\n                        </Badge>\n                    )}\n                </div>\n            </CardHeader>\n\n            {bio && (\n                <>\n                    <SeparatorRoot />\n                    <CardContent className=\"pt-4 text-sm text-kraft/70 text-center\">\n                        {bio}\n                    </CardContent>\n                </>\n            )}\n\n            {actions && (\n                <>\n                    <SeparatorRoot />\n                    <CardFooter className=\"justify-center gap-2 pt-4\">\n                        {actions}\n                    </CardFooter>\n                </>\n            )}\n        </Card>\n    );\n}\n"
+  ],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAuBO,SAAS,WAAW;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,KACG;AAAA,GACc;AAAA,EACjB,uBACI,KAuCE,MAvCF;AAAA,IAAM,WAAW,GAAG,QAAQ,SAAS;AAAA,OAAO;AAAA,IAA5C,UAuCE;AAAA,sBAtCE,KAmBE,YAnBF;AAAA,QAAY,WAAU;AAAA,QAAtB,UAmBE;AAAA,0BAlBE,IAAC,QAAD;AAAA,YACI;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP,MAAK;AAAA,WACT;AAAA,0BACA,KAUE,OAVF;AAAA,YAAK,WAAU;AAAA,YAAf,UAUE;AAAA,8BATE,IAEE,MAFF;AAAA,gBAAI,WAAU;AAAA,gBAAd,UACK;AAAA,eACH;AAAA,cACD,wBAAQ,IAA6C,KAA7C;AAAA,gBAAG,WAAU;AAAA,gBAAb,UAAsC;AAAA,eAAO;AAAA,cACrD,yBACG,IAEE,OAFF;AAAA,gBAAO,SAAS;AAAA,gBAAc,WAAU;AAAA,gBAAxC,UACK;AAAA,eACH;AAAA;AAAA,WAER;AAAA;AAAA,OACJ;AAAA,MAED,uBACG;AAAA,kBAKE;AAAA,0BAJE,IAAC,eAAD,EAAe;AAAA,0BACf,IAEE,aAFF;AAAA,YAAa,WAAU;AAAA,YAAvB,UACK;AAAA,WACH;AAAA;AAAA,OACJ;AAAA,MAGL,2BACG;AAAA,kBAKE;AAAA,0BAJE,IAAC,eAAD,EAAe;AAAA,0BACf,IAEE,YAFF;AAAA,YAAY,WAAU;AAAA,YAAtB,UACK;AAAA,WACH;AAAA;AAAA,OACJ;AAAA;AAAA,GAER;AAAA;",
+  "debugId": "4411D3A3DF55D52264756E2164756E21",
+  "names": []
+}