@a5it/sync-ui 0.1.39 → 0.1.41

package/dist/components/cards/detail-line-item.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+export type DetailLineItemProps = React.ComponentProps<"div">;
+/**
+ * A key-value pair row for detail/sidebar cards.
+ *
+ * Compose with `DetailLineItemLabel` and `DetailLineItemValue` as children.
+ *
+ * @example
+ * ```tsx
+ * <DetailLineItem>
+ *   <DetailLineItemLabel>Sub-Total</DetailLineItemLabel>
+ *   <DetailLineItemValue>$1,234.56</DetailLineItemValue>
+ * </DetailLineItem>
+ * ```
+ *
+ * @example — custom label with tooltip
+ * ```tsx
+ * <DetailLineItem>
+ *   <DetailLineItemLabel>
+ *     <span>Est Margin</span>
+ *     <Tooltip>…</Tooltip>
+ *   </DetailLineItemLabel>
+ *   <DetailLineItemValue className="text-[#2e6dfa]">
+ *     $500.00 (15.5%)
+ *   </DetailLineItemValue>
+ * </DetailLineItem>
+ * ```
+ */
+declare function DetailLineItem({ className, children, ...props }: DetailLineItemProps): import("react/jsx-runtime").JSX.Element;
+export type DetailLineItemLabelProps = React.ComponentProps<"div">;
+/**
+ * Left-side label of a key-value row.
+ * Renders with 60% opacity by default. Accepts any ReactNode — plain text,
+ * icons, tooltips, etc.
+ */
+declare function DetailLineItemLabel({ className, children, ...props }: DetailLineItemLabelProps): import("react/jsx-runtime").JSX.Element;
+export type DetailLineItemValueProps = React.ComponentProps<"div">;
+/**
+ * Right-side value of a key-value row.
+ * Renders as semibold text. Accepts any ReactNode — formatted currency,
+ * status pills, links, etc.
+ */
+declare function DetailLineItemValue({ className, children, ...props }: DetailLineItemValueProps): import("react/jsx-runtime").JSX.Element;
+export { DetailLineItem, DetailLineItemLabel, DetailLineItemValue };
+//# sourceMappingURL=detail-line-item.d.ts.map

package/dist/components/cards/detail-line-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-line-item.d.ts","sourceRoot":"","sources":["../../../src/components/cards/detail-line-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAU7E;AAID,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEnE;;;;GAIG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAc1B;AAID,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEnE;;;;GAIG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAa1B;AAID,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/cards/detail-line-item.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+/**
+ * A key-value pair row for detail/sidebar cards.
+ *
+ * Compose with `DetailLineItemLabel` and `DetailLineItemValue` as children.
+ *
+ * @example
+ * ```tsx
+ * <DetailLineItem>
+ *   <DetailLineItemLabel>Sub-Total</DetailLineItemLabel>
+ *   <DetailLineItemValue>$1,234.56</DetailLineItemValue>
+ * </DetailLineItem>
+ * ```
+ *
+ * @example — custom label with tooltip
+ * ```tsx
+ * <DetailLineItem>
+ *   <DetailLineItemLabel>
+ *     <span>Est Margin</span>
+ *     <Tooltip>…</Tooltip>
+ *   </DetailLineItemLabel>
+ *   <DetailLineItemValue className="text-[#2e6dfa]">
+ *     $500.00 (15.5%)
+ *   </DetailLineItemValue>
+ * </DetailLineItem>
+ * ```
+ */
+function DetailLineItem({ className, children, ...props }) {
+    return (_jsx("div", { className: cn("flex w-full items-start gap-2", className), "data-slot": "detail-line-item", ...props, children: children }));
+}
+/**
+ * Left-side label of a key-value row.
+ * Renders with 60% opacity by default. Accepts any ReactNode — plain text,
+ * icons, tooltips, etc.
+ */
+function DetailLineItemLabel({ className, children, ...props }) {
+    return (_jsx("div", { className: cn("flex flex-1 items-center text-[14px] leading-[16px] text-[#1a1a1a]", className), style: { opacity: 0.6 }, "data-slot": "detail-line-item-label", ...props, children: children }));
+}
+/**
+ * Right-side value of a key-value row.
+ * Renders as semibold text. Accepts any ReactNode — formatted currency,
+ * status pills, links, etc.
+ */
+function DetailLineItemValue({ className, children, ...props }) {
+    return (_jsx("div", { className: cn("shrink-0 text-[14px] font-semibold leading-[16px] text-[#1a1a1a]", className), "data-slot": "detail-line-item-value", ...props, children: children }));
+}
+/* ─────────────────────────── Exports ─────────────────────────── */
+export { DetailLineItem, DetailLineItemLabel, DetailLineItemValue };
+//# sourceMappingURL=detail-line-item.js.map

package/dist/components/cards/detail-line-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-line-item.js","sourceRoot":"","sources":["../../../src/components/cards/detail-line-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAMrC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,SAAS,cAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAuB;IAC5E,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,eAC/C,kBAAkB,KACxB,KAAK,YAER,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAMD;;;;GAIG;AACH,SAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACiB;IACzB,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,oEAAoE,EACpE,SAAS,CACV,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,eACb,wBAAwB,KAC9B,KAAK,YAER,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAMD;;;;GAIG;AACH,SAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACiB;IACzB,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,kEAAkE,EAClE,SAAS,CACV,eACS,wBAAwB,KAC9B,KAAK,YAER,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,qEAAqE;AAErE,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,CAAC"}

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

@@ -0,0 +1,5 @@
+export { SidebarCard, SidebarCardHeader, SidebarCardTitle, SidebarCardAction, SidebarCardContent, SidebarCardSection, } from "./sidebar-card";
+export type { SidebarCardProps, SidebarCardHeaderProps, SidebarCardTitleProps, SidebarCardActionProps, SidebarCardContentProps, SidebarCardSectionProps, } from "./sidebar-card";
+export { DetailLineItem, DetailLineItemLabel, DetailLineItemValue, } from "./detail-line-item";
+export type { DetailLineItemProps, DetailLineItemLabelProps, DetailLineItemValueProps, } from "./detail-line-item";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/cards/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/cards/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,gBAAgB,CAAC;AACxB,YAAY,EACV,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,EACrB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,GACxB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EACV,mBAAmB,EACnB,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,oBAAoB,CAAC"}

package/dist/components/cards/index.js

@@ -0,0 +1,6 @@
+"use client";
+// ── SidebarCard (composable) ──
+export { SidebarCard, SidebarCardHeader, SidebarCardTitle, SidebarCardAction, SidebarCardContent, SidebarCardSection, } from "./sidebar-card";
+// ── DetailLineItem (composable key-value row) ──
+export { DetailLineItem, DetailLineItemLabel, DetailLineItemValue, } from "./detail-line-item";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/cards/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,iCAAiC;AACjC,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,gBAAgB,CAAC;AAUxB,kDAAkD;AAClD,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,oBAAoB,CAAC"}

package/dist/components/cards/sidebar-card.d.ts

@@ -0,0 +1,87 @@
+import * as React from "react";
+export type SidebarCardProps = React.ComponentProps<"div"> & {
+    /**
+     * Initial open state for collapsible cards.
+     * @default true
+     */
+    defaultOpen?: boolean;
+    /**
+     * Whether the card can be collapsed/expanded.
+     * When `false`, the card renders as a static (always-open) detail card.
+     * @default true
+     */
+    collapsible?: boolean;
+    /** Cypress test identifier */
+    "data-cy"?: string;
+};
+/**
+ * Root container for a sidebar card.
+ *
+ * Manages collapse state via internal context so sub-components
+ * (`SidebarCardHeader`, `SidebarCardContent`, etc.) can read it
+ * without prop drilling.
+ *
+ * @example
+ * ```tsx
+ * <SidebarCard>
+ *   <SidebarCardHeader>
+ *     <SidebarCardTitle>Quote</SidebarCardTitle>
+ *     <SidebarCardAction>
+ *       <MyDropdownMenu />
+ *     </SidebarCardAction>
+ *   </SidebarCardHeader>
+ *   <SidebarCardContent>
+ *     <SidebarCardSection bordered>…</SidebarCardSection>
+ *     <SidebarCardSection>…</SidebarCardSection>
+ *   </SidebarCardContent>
+ * </SidebarCard>
+ * ```
+ */
+declare function SidebarCard({ defaultOpen, collapsible, className, children, ...props }: SidebarCardProps): import("react/jsx-runtime").JSX.Element;
+export type SidebarCardHeaderProps = React.ComponentProps<"div">;
+/**
+ * Header row for the sidebar card (56px height).
+ *
+ * When the card is collapsible, clicking the header area (excluding the
+ * action slot) toggles the card open/closed and renders a chevron icon.
+ *
+ * Compose with `SidebarCardTitle` and optionally `SidebarCardAction`.
+ */
+declare function SidebarCardHeader({ className, children, ...props }: SidebarCardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export type SidebarCardTitleProps = React.ComponentProps<"div">;
+/**
+ * Title text inside the header row.
+ * Renders as 18px bold text with truncation.
+ */
+declare function SidebarCardTitle({ className, children, ...props }: SidebarCardTitleProps): import("react/jsx-runtime").JSX.Element;
+export type SidebarCardActionProps = React.ComponentProps<"div">;
+/**
+ * Right-side action slot in the header.
+ *
+ * The consumer brings their own content (dropdown menu, button, etc.).
+ * Clicks inside this slot are stopped from propagating to the toggle button.
+ */
+declare function SidebarCardAction({ className, children, ...props }: SidebarCardActionProps): import("react/jsx-runtime").JSX.Element;
+export type SidebarCardContentProps = React.ComponentProps<"div">;
+/**
+ * Animated collapsible body of the card.
+ *
+ * Uses a ResizeObserver to measure content height and smoothly transition
+ * between open/closed states. When `collapsible` is `false` in the parent
+ * `SidebarCard`, this component simply renders its children without animation.
+ */
+declare function SidebarCardContent({ className, children, ...props }: SidebarCardContentProps): import("react/jsx-runtime").JSX.Element;
+export type SidebarCardSectionProps = React.ComponentProps<"div"> & {
+    /**
+     * Show a bottom border on this section.
+     * @default false
+     */
+    bordered?: boolean;
+};
+/**
+ * A padded section inside the card content.
+ * Use `bordered` to add a bottom separator between sections.
+ */
+declare function SidebarCardSection({ bordered, className, children, ...props }: SidebarCardSectionProps): import("react/jsx-runtime").JSX.Element;
+export { SidebarCard, SidebarCardHeader, SidebarCardTitle, SidebarCardAction, SidebarCardContent, SidebarCardSection, };
+//# sourceMappingURL=sidebar-card.d.ts.map

package/dist/components/cards/sidebar-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-card.d.ts","sourceRoot":"","sources":["../../../src/components/cards/sidebar-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,iBAAS,WAAW,CAAC,EACnB,WAAkB,EAClB,WAAkB,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA0BlB;AAID,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEjE;;;;;;;GAOG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,sBAAsB,2CA0ExB;AAID,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhE;;;GAGG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAavB;AAID,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEjE;;;;;GAKG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAWxB;AAID,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAElE;;;;;;GAMG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,2CA8DzB;AAID,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAClE;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAczB;AAID,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,GACnB,CAAC"}

package/dist/components/cards/sidebar-card.js

@@ -0,0 +1,156 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronUp } from "lucide-react";
+import { cn } from "../../lib/utils";
+const SidebarCardContext = React.createContext(null);
+function useSidebarCardContext() {
+    const ctx = React.useContext(SidebarCardContext);
+    if (!ctx) {
+        throw new Error("SidebarCard compound components must be used within <SidebarCard>");
+    }
+    return ctx;
+}
+/**
+ * Root container for a sidebar card.
+ *
+ * Manages collapse state via internal context so sub-components
+ * (`SidebarCardHeader`, `SidebarCardContent`, etc.) can read it
+ * without prop drilling.
+ *
+ * @example
+ * ```tsx
+ * <SidebarCard>
+ *   <SidebarCardHeader>
+ *     <SidebarCardTitle>Quote</SidebarCardTitle>
+ *     <SidebarCardAction>
+ *       <MyDropdownMenu />
+ *     </SidebarCardAction>
+ *   </SidebarCardHeader>
+ *   <SidebarCardContent>
+ *     <SidebarCardSection bordered>…</SidebarCardSection>
+ *     <SidebarCardSection>…</SidebarCardSection>
+ *   </SidebarCardContent>
+ * </SidebarCard>
+ * ```
+ */
+function SidebarCard({ defaultOpen = true, collapsible = true, className, children, ...props }) {
+    const [isOpen, setIsOpen] = React.useState(defaultOpen);
+    const toggle = React.useCallback(() => {
+        setIsOpen((prev) => !prev);
+    }, []);
+    const ctx = React.useMemo(() => ({ isOpen: collapsible ? isOpen : true, toggle, collapsible }), [isOpen, toggle, collapsible]);
+    return (_jsx(SidebarCardContext.Provider, { value: ctx, children: _jsx("div", { className: cn("overflow-hidden rounded-[12px] w-full bg-white", className), "data-slot": "sidebar-card", ...props, children: children }) }));
+}
+/**
+ * Header row for the sidebar card (56px height).
+ *
+ * When the card is collapsible, clicking the header area (excluding the
+ * action slot) toggles the card open/closed and renders a chevron icon.
+ *
+ * Compose with `SidebarCardTitle` and optionally `SidebarCardAction`.
+ */
+function SidebarCardHeader({ className, children, ...props }) {
+    const { isOpen, toggle, collapsible } = useSidebarCardContext();
+    return (_jsxs("div", { className: cn("flex h-[56px] w-full items-center gap-[8px] border-b px-[24px] py-[8px]", collapsible && "hover:bg-[#fafafa] transition-colors", isOpen ? "border-[#e6e6e6]" : "border-transparent", className), "data-slot": "sidebar-card-header", ...props, children: [collapsible ? (_jsxs("button", { type: "button", onClick: toggle, className: "flex min-w-0 flex-1 items-center gap-[8px] text-left cursor-pointer rounded-[6px] hover:bg-[#fafafa] transition-colors", "aria-expanded": isOpen, "data-cy": "sidebar-card-toggle", children: [_jsx("div", { className: "size-5 shrink-0", children: _jsx(ChevronUp, { className: cn("size-5 transition-transform duration-200 ease-in-out", !isOpen && "rotate-180"), color: "#1a1a1a" }) }), React.Children.map(children, (child) => {
+                        if (!React.isValidElement(child))
+                            return null;
+                        if (child.type === SidebarCardTitle ||
+                            child.props?.["data-slot"] ===
+                                "sidebar-card-title") {
+                            return child;
+                        }
+                        return null;
+                    })] })) : (_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-[8px]", children: React.Children.map(children, (child) => {
+                    if (!React.isValidElement(child))
+                        return null;
+                    if (child.type === SidebarCardTitle ||
+                        child.props?.["data-slot"] ===
+                            "sidebar-card-title") {
+                        return child;
+                    }
+                    return null;
+                }) })), React.Children.map(children, (child) => {
+                if (!React.isValidElement(child))
+                    return null;
+                if (child.type === SidebarCardAction ||
+                    child.props?.["data-slot"] ===
+                        "sidebar-card-action") {
+                    return child;
+                }
+                return null;
+            })] }));
+}
+/**
+ * Title text inside the header row.
+ * Renders as 18px bold text with truncation.
+ */
+function SidebarCardTitle({ className, children, ...props }) {
+    return (_jsx("div", { className: cn("flex-1 truncate text-[18px] font-bold leading-[24px] text-[#1a1a1a]", className), "data-slot": "sidebar-card-title", ...props, children: children }));
+}
+/**
+ * Right-side action slot in the header.
+ *
+ * The consumer brings their own content (dropdown menu, button, etc.).
+ * Clicks inside this slot are stopped from propagating to the toggle button.
+ */
+function SidebarCardAction({ className, children, ...props }) {
+    return (_jsx("div", { className: cn("shrink-0", className), onClick: (e) => e.stopPropagation(), "data-slot": "sidebar-card-action", ...props, children: children }));
+}
+/**
+ * Animated collapsible body of the card.
+ *
+ * Uses a ResizeObserver to measure content height and smoothly transition
+ * between open/closed states. When `collapsible` is `false` in the parent
+ * `SidebarCard`, this component simply renders its children without animation.
+ */
+function SidebarCardContent({ className, children, ...props }) {
+    const { isOpen, collapsible } = useSidebarCardContext();
+    const contentRef = React.useRef(null);
+    const [height, setHeight] = React.useState(isOpen ? undefined : 0);
+    // Measure content height when opening/closing
+    React.useEffect(() => {
+        if (!collapsible || !contentRef.current)
+            return;
+        if (isOpen) {
+            setHeight(contentRef.current.scrollHeight);
+        }
+        else {
+            setHeight(0);
+        }
+    }, [isOpen, collapsible]);
+    // Handle dynamic content changes while open
+    React.useEffect(() => {
+        if (!collapsible || !contentRef.current || !isOpen)
+            return;
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                if (isOpen) {
+                    const newHeight = entry.contentRect.height;
+                    setHeight((prev) => (prev === newHeight ? prev : newHeight));
+                }
+            }
+        });
+        resizeObserver.observe(contentRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [isOpen, collapsible]);
+    // Non-collapsible: render children directly
+    if (!collapsible) {
+        return (_jsx("div", { "data-slot": "sidebar-card-content", className: className, ...props, children: children }));
+    }
+    return (_jsx("div", { className: cn("overflow-hidden transition-all duration-300 ease-in-out", className), style: {
+            height: height !== undefined ? `${height}px` : undefined,
+        }, "data-slot": "sidebar-card-content", ...props, children: _jsx("div", { ref: contentRef, children: children }) }));
+}
+/**
+ * A padded section inside the card content.
+ * Use `bordered` to add a bottom separator between sections.
+ */
+function SidebarCardSection({ bordered = false, className, children, ...props }) {
+    return (_jsx("div", { className: cn("px-6 py-3", bordered && "border-b border-[#e6e6e6]", className), "data-slot": "sidebar-card-section", ...props, children: children }));
+}
+/* ─────────────────────────── Exports ─────────────────────────── */
+export { SidebarCard, SidebarCardHeader, SidebarCardTitle, SidebarCardAction, SidebarCardContent, SidebarCardSection, };
+//# sourceMappingURL=sidebar-card.js.map

package/dist/components/cards/sidebar-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-card.js","sourceRoot":"","sources":["../../../src/components/cards/sidebar-card.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/button.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, isLoading, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./components/cards";
 export * from "./components/data-table";
 export * from "./components/page-header";
 export * from "./components/sidebar";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -1,4 +1,5 @@
 "use client";
+export * from "./components/cards";
 export * from "./components/data-table";
 export * from "./components/page-header";
 export * from "./components/sidebar";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a5it/sync-ui",
-  "version": "0.1.39",
+  "version": "0.1.41",
   "description": "Shared UI components for A5 apps.",
   "type": "module",
   "main": "./dist/index.js",