@epicbagel/saas-kit 0.0.0-stage → 1.1.0

package/dist/primitives/inset.cjs

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/inset.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var spacing = {
+  all: { xs: "p-[10px]", sm: "p-[14px]", md: "p-[22px]", lg: "p-[26px]", xl: "p-[30px]" },
+  horizontal: { xs: "px-[10px]", sm: "px-[14px]", md: "px-[22px]", lg: "px-[26px]", xl: "px-[30px]" },
+  vertical: { xs: "py-[10px]", sm: "py-[14px]", md: "py-[22px]", lg: "py-[26px]", xl: "py-[30px]" }
+};
+var Inset = _react.forwardRef.call(void 0, function Inset2({ as, axis = "all", space = "md", className, ...props }, ref) {
+  const Component = _nullishCoalesce(as, () => ( "div"));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, { ref, className: _chunkKWLSBTB2cjs.cn.call(void 0, spacing[axis][space], className), ...props });
+});
+
+
+exports.Inset = Inset;

package/dist/primitives/inset.d.cts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { HTMLAttributes, ElementType } from 'react';
+
+interface InsetProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    axis?: "all" | "horizontal" | "vertical";
+    space?: "xs" | "sm" | "md" | "lg" | "xl";
+}
+/** Tokenised padding wrapper for content that needs inset without bespoke utilities. */
+declare const Inset: React.ForwardRefExoticComponent<InsetProps & React.RefAttributes<HTMLElement>>;
+
+export { Inset, type InsetProps };

package/dist/primitives/inset.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { HTMLAttributes, ElementType } from 'react';
+
+interface InsetProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    axis?: "all" | "horizontal" | "vertical";
+    space?: "xs" | "sm" | "md" | "lg" | "xl";
+}
+/** Tokenised padding wrapper for content that needs inset without bespoke utilities. */
+declare const Inset: React.ForwardRefExoticComponent<InsetProps & React.RefAttributes<HTMLElement>>;
+
+export { Inset, type InsetProps };

package/dist/primitives/inset.js

@@ -0,0 +1,20 @@
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/inset.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var spacing = {
+  all: { xs: "p-[10px]", sm: "p-[14px]", md: "p-[22px]", lg: "p-[26px]", xl: "p-[30px]" },
+  horizontal: { xs: "px-[10px]", sm: "px-[14px]", md: "px-[22px]", lg: "px-[26px]", xl: "px-[30px]" },
+  vertical: { xs: "py-[10px]", sm: "py-[14px]", md: "py-[22px]", lg: "py-[26px]", xl: "py-[30px]" }
+};
+var Inset = forwardRef(function Inset2({ as, axis = "all", space = "md", className, ...props }, ref) {
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsx(Component, { ref, className: cn(spacing[axis][space], className), ...props });
+});
+export {
+  Inset
+};

package/dist/primitives/interactive-card.cjs

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+"use client";
+
+
+
+var _chunkBEJJN2SYcjs = require('../chunk-BEJJN2SY.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+
+exports.InteractiveCard = _chunkBEJJN2SYcjs.InteractiveCard; exports.interactiveCardClass = _chunkBEJJN2SYcjs.interactiveCardClass;

package/dist/primitives/interactive-card.d.cts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { ElementType, ComponentPropsWithoutRef } from 'react';
+
+interface InteractiveCardVariants {
+    /** Currently chosen — the card the detail pane is showing. */
+    selected?: boolean;
+    /**
+     * @deprecated Interactive cards now have one universal border-only treatment.
+     * Retained as a no-op so existing call sites keep compiling.
+     */
+    flat?: boolean;
+    /** Clip child media/content to the card's rounded boundary. */
+    clip?: boolean;
+    /**
+     * Spacing is semantic so product-required breathing room survives refactors.
+     * `comfortable` is for identity/detail rows such as candidate summaries.
+     */
+    padding?: "none" | "compact" | "row" | "comfortable" | "roomy";
+    radius?: "none" | "lg" | "xl";
+    joined?: "none" | "top";
+    border?: "default" | "none";
+    /** Keep the standard treatment or use a quieter 1px border for nested rows. */
+    borderWidth?: "default" | "thin";
+    display?: "inline" | "block";
+    textSize?: "inherit" | "sm";
+    opacity?: "full" | "subdued";
+    /** Theme-token surface. Subtle adds quiet grouping without changing interaction states. */
+    surface?: "card" | "subtle";
+    /**
+     * @deprecated Interactive cards no longer render a leading accent bar.
+     * Retained as a no-op so existing call sites keep compiling.
+     */
+    indicator?: "bar" | "none";
+}
+/**
+ * The hover treatment for any card you can click.
+ *
+ * Exported as a class recipe as well as a component so other card primitives
+ * can adopt exactly the same states without being restructured.
+ * Two competing hover treatments in one kit is how a design system starts
+ * drifting.
+ *
+ * The card owns a stable border, so hover and focus can strengthen its colour
+ * without moving the content. It defaults to 2px; nested rows can request the
+ * 1px `thin` treatment. It has no accent bar, shadow or lift.
+ * Consumers can opt into one quiet token-based surface tint when a dense list
+ * needs stronger structure without inventing product-specific colours.
+ *
+ * Focus-visible gets the same treatment as hover, so keyboard navigation is
+ * not a second-class way to move through a list. Tailwind v4 scopes `hover:`
+ * to devices that actually hover, so a tap on a phone doesn't leave a card
+ * stuck looking active.
+ */
+declare function interactiveCardClass({ selected, surface, borderWidth, }?: InteractiveCardVariants): string;
+type InteractiveCardProps<T extends ElementType = "button"> = InteractiveCardVariants & {
+    /** Defaults to `button`. Use `a` for a real navigation target. */
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, "as">;
+/**
+ * A clickable list card wearing `interactiveCardClass`.
+ *
+ * Defaults to a `<button>` because most of these select something rather than
+ * navigate; pass `as="a"` (or a router link) when the card really is a link,
+ * so it can be middle-clicked and opened in a new tab.
+ */
+declare const InteractiveCard: React.ForwardRefExoticComponent<Omit<InteractiveCardProps<ElementType>, "ref"> & React.RefAttributes<HTMLElement>>;
+
+export { InteractiveCard, type InteractiveCardProps, type InteractiveCardVariants, interactiveCardClass };

package/dist/primitives/interactive-card.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { ElementType, ComponentPropsWithoutRef } from 'react';
+
+interface InteractiveCardVariants {
+    /** Currently chosen — the card the detail pane is showing. */
+    selected?: boolean;
+    /**
+     * @deprecated Interactive cards now have one universal border-only treatment.
+     * Retained as a no-op so existing call sites keep compiling.
+     */
+    flat?: boolean;
+    /** Clip child media/content to the card's rounded boundary. */
+    clip?: boolean;
+    /**
+     * Spacing is semantic so product-required breathing room survives refactors.
+     * `comfortable` is for identity/detail rows such as candidate summaries.
+     */
+    padding?: "none" | "compact" | "row" | "comfortable" | "roomy";
+    radius?: "none" | "lg" | "xl";
+    joined?: "none" | "top";
+    border?: "default" | "none";
+    /** Keep the standard treatment or use a quieter 1px border for nested rows. */
+    borderWidth?: "default" | "thin";
+    display?: "inline" | "block";
+    textSize?: "inherit" | "sm";
+    opacity?: "full" | "subdued";
+    /** Theme-token surface. Subtle adds quiet grouping without changing interaction states. */
+    surface?: "card" | "subtle";
+    /**
+     * @deprecated Interactive cards no longer render a leading accent bar.
+     * Retained as a no-op so existing call sites keep compiling.
+     */
+    indicator?: "bar" | "none";
+}
+/**
+ * The hover treatment for any card you can click.
+ *
+ * Exported as a class recipe as well as a component so other card primitives
+ * can adopt exactly the same states without being restructured.
+ * Two competing hover treatments in one kit is how a design system starts
+ * drifting.
+ *
+ * The card owns a stable border, so hover and focus can strengthen its colour
+ * without moving the content. It defaults to 2px; nested rows can request the
+ * 1px `thin` treatment. It has no accent bar, shadow or lift.
+ * Consumers can opt into one quiet token-based surface tint when a dense list
+ * needs stronger structure without inventing product-specific colours.
+ *
+ * Focus-visible gets the same treatment as hover, so keyboard navigation is
+ * not a second-class way to move through a list. Tailwind v4 scopes `hover:`
+ * to devices that actually hover, so a tap on a phone doesn't leave a card
+ * stuck looking active.
+ */
+declare function interactiveCardClass({ selected, surface, borderWidth, }?: InteractiveCardVariants): string;
+type InteractiveCardProps<T extends ElementType = "button"> = InteractiveCardVariants & {
+    /** Defaults to `button`. Use `a` for a real navigation target. */
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, "as">;
+/**
+ * A clickable list card wearing `interactiveCardClass`.
+ *
+ * Defaults to a `<button>` because most of these select something rather than
+ * navigate; pass `as="a"` (or a router link) when the card really is a link,
+ * so it can be middle-clicked and opened in a new tab.
+ */
+declare const InteractiveCard: React.ForwardRefExoticComponent<Omit<InteractiveCardProps<ElementType>, "ref"> & React.RefAttributes<HTMLElement>>;
+
+export { InteractiveCard, type InteractiveCardProps, type InteractiveCardVariants, interactiveCardClass };

package/dist/primitives/interactive-card.js

@@ -0,0 +1,11 @@
+"use client";
+"use client";
+import {
+  InteractiveCard,
+  interactiveCardClass
+} from "../chunk-F73ONTCK.js";
+import "../chunk-G6SRSWXB.js";
+export {
+  InteractiveCard,
+  interactiveCardClass
+};

package/dist/primitives/item.cjs

@@ -0,0 +1,197 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkNQK5ZWC7cjs = require('../chunk-NQK5ZWC7.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/item.tsx
+var _classvarianceauthority = require('class-variance-authority');
+var _radixui = require('radix-ui');
+var _jsxruntime = require('react/jsx-runtime');
+function ItemGroup({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      role: "list",
+      "data-slot": "item-group",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkNQK5ZWC7cjs.Separator,
+    {
+      "data-slot": "item-separator",
+      orientation: "horizontal",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "my-2", className),
+      ...props
+    }
+  );
+}
+var itemVariants = _classvarianceauthority.cva.call(void 0, 
+  "group/item flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50"
+      },
+      size: {
+        default: "gap-3.5 px-4 py-3.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? _radixui.Slot.Root : "div";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Comp,
+    {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, itemVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var itemMediaVariants = _classvarianceauthority.cva.call(void 0, 
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, itemMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-content",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-title",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "p",
+    {
+      "data-slot": "item-description",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-actions",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+function ItemHeader({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-header",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemFooter({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-footer",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+
+
+
+
+
+
+
+
+
+
+exports.Item = Item; exports.ItemActions = ItemActions; exports.ItemContent = ItemContent; exports.ItemDescription = ItemDescription; exports.ItemFooter = ItemFooter; exports.ItemGroup = ItemGroup; exports.ItemHeader = ItemHeader; exports.ItemMedia = ItemMedia; exports.ItemSeparator = ItemSeparator; exports.ItemTitle = ItemTitle;

package/dist/primitives/item.d.cts

@@ -0,0 +1,28 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Separator } from './separator.cjs';
+import '@radix-ui/react-separator';
+
+declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
+declare const itemVariants: (props?: ({
+    variant?: "default" | "muted" | "outline" | null | undefined;
+    size?: "xs" | "sm" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Item({ className, variant, size, asChild, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare const itemMediaVariants: (props?: ({
+    variant?: "image" | "default" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): react_jsx_runtime.JSX.Element;
+declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ItemTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ItemDescription({ className, ...props }: React.ComponentProps<"p">): react_jsx_runtime.JSX.Element;
+declare function ItemActions({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ItemHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ItemFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };

package/dist/primitives/item.d.ts

@@ -0,0 +1,28 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Separator } from './separator.js';
+import '@radix-ui/react-separator';
+
+declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
+declare const itemVariants: (props?: ({
+    variant?: "default" | "muted" | "outline" | null | undefined;
+    size?: "xs" | "sm" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Item({ className, variant, size, asChild, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare const itemMediaVariants: (props?: ({
+    variant?: "image" | "default" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): react_jsx_runtime.JSX.Element;
+declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ItemTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ItemDescription({ className, ...props }: React.ComponentProps<"p">): react_jsx_runtime.JSX.Element;
+declare function ItemActions({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ItemHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ItemFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };

package/dist/primitives/item.js

@@ -0,0 +1,197 @@
+"use client";
+import {
+  Separator
+} from "../chunk-HYTILYE5.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/item.tsx
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+function ItemGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "list",
+      "data-slot": "item-group",
+      className: cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "item-separator",
+      orientation: "horizontal",
+      className: cn("my-2", className),
+      ...props
+    }
+  );
+}
+var itemVariants = cva(
+  "group/item flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50"
+      },
+      size: {
+        default: "gap-3.5 px-4 py-3.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(itemVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: cn(itemMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-content",
+      className: cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-title",
+      className: cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "item-description",
+      className: cn(
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-actions",
+      className: cn("flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+function ItemHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-header",
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-footer",
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle
+};