@classytic/fluid 0.4.2 → 0.5.0

package/dist/{sheet-wrapper-C13Y-Q6w.mjs → sheet-wrapper-B2uxookb.mjs}

@@ -1,6 +1,6 @@
 import { t as cn } from "./utils-DQ5SCVoW.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { LoaderIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet";

package/dist/timeline-Bgu1mIe9.d.mts

@@ -0,0 +1,373 @@
+import * as react from "react";
+import { ComponentType, HTMLAttributes, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { LucideIcon, LucideProps } from "lucide-react";
+
+//#region src/components/accordion-wrapper.d.ts
+interface AccordionSectionProps {
+  title: string;
+  icon?: ReactNode;
+  children: ReactNode;
+  defaultOpen?: boolean;
+  className?: string;
+  badge?: ReactNode;
+}
+/**
+ * AccordionSection - Single collapsible section with smooth animation
+ *
+ * @example
+ * ```tsx
+ * <AccordionSection title="Settings" icon={<Settings className="h-4 w-4" />}>
+ *   <div>Content here</div>
+ * </AccordionSection>
+ * ```
+ */
+declare const AccordionSection: react.NamedExoticComponent<AccordionSectionProps>;
+interface FaqItem {
+  id: string;
+  question: string;
+  answer: ReactNode;
+}
+interface FaqAccordionProps {
+  items: FaqItem[];
+  defaultOpen?: string;
+  className?: string;
+  /** Allow multiple items to be open at once */
+  multiple?: boolean;
+}
+/**
+ * FaqAccordion - FAQ-style accordion where only one item can be open by default
+ *
+ * @example
+ * ```tsx
+ * <FaqAccordion
+ *   items={[
+ *     { id: "1", question: "What is this?", answer: "A FAQ accordion" },
+ *     { id: "2", question: "How does it work?", answer: "Click to expand" },
+ *   ]}
+ * />
+ * ```
+ */
+declare const FaqAccordion: react.NamedExoticComponent<FaqAccordionProps>;
+//#endregion
+//#region src/components/card-wrapper.d.ts
+declare const CARD_VARIANTS: {
+  readonly default: "";
+  readonly outline: "border-2";
+  readonly ghost: "border-0 shadow-none bg-transparent";
+  readonly elevated: "shadow-lg border-0";
+  readonly primary: "border-primary/20 bg-primary/5";
+  readonly secondary: "border-secondary/20 bg-secondary/5";
+  readonly destructive: "border-destructive/20 bg-destructive/5";
+  readonly success: "border-green-500/20 bg-green-500/5";
+  readonly warning: "border-yellow-500/20 bg-yellow-500/5";
+};
+declare const CARD_SIZES: {
+  readonly sm: "p-3";
+  readonly default: "p-6";
+  readonly lg: "p-8";
+  readonly xl: "p-10";
+};
+interface CardWrapperProps {
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Content rendered on the right side of the header (e.g., action buttons, toggles) */
+  headerRight?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+  headerClassName?: string;
+  contentClassName?: string;
+  footerClassName?: string;
+  variant?: keyof typeof CARD_VARIANTS;
+  size?: keyof typeof CARD_SIZES;
+  hideHeader?: boolean;
+}
+declare function CardWrapper({
+  title,
+  description,
+  headerRight,
+  children,
+  footer,
+  className,
+  headerClassName,
+  contentClassName,
+  footerClassName,
+  variant,
+  size,
+  hideHeader
+}: CardWrapperProps): react_jsx_runtime0.JSX.Element;
+interface DataCardProps extends Omit<CardWrapperProps, "children"> {
+  /** Each item's `color` should be a complete Tailwind class (e.g. "text-green-600") */
+  data: Array<{
+    label: string;
+    value: ReactNode;
+    color?: string;
+  }>;
+  /** Number of columns in the data grid. Default: 3 (2 on mobile) */
+  cols?: 1 | 2 | 3 | 4;
+}
+declare function DataCard({
+  title,
+  data,
+  cols,
+  className,
+  ...props
+}: DataCardProps): react_jsx_runtime0.JSX.Element;
+interface LoadingCardProps extends Omit<CardWrapperProps, "children"> {}
+declare function LoadingCard({
+  title,
+  description,
+  className,
+  ...props
+}: LoadingCardProps): react_jsx_runtime0.JSX.Element;
+interface StatsCardProps extends Omit<CardWrapperProps, "children" | "variant"> {
+  value: ReactNode;
+  icon?: ReactNode;
+  trend?: {
+    type: "up" | "down" | "neutral";
+    value: string;
+  };
+  /** Visual variant for the card and icon styling */
+  statsVariant?: "default" | "success" | "warning" | "danger" | "info";
+  /** Icon-only color tint (neutral card background). Overrides statsVariant icon color when set. */
+  iconColor?: "default" | "success" | "warning" | "danger" | "info" | "purple" | "orange";
+  /** Additional class for the icon wrapper */
+  iconClassName?: string;
+}
+declare function StatsCard({
+  title,
+  value,
+  description,
+  icon,
+  trend,
+  className,
+  statsVariant,
+  iconColor,
+  iconClassName,
+  ...props
+}: StatsCardProps): react_jsx_runtime0.JSX.Element;
+interface DragHandleProps extends HTMLAttributes<HTMLDivElement> {
+  icon?: ReactNode;
+}
+interface DraggableCardProps extends Omit<CardWrapperProps, "children"> {
+  subtitle?: ReactNode;
+  badges?: ReactNode;
+  actions?: ReactNode;
+  details?: ReactNode;
+  dragHandleProps?: DragHandleProps;
+  isDragging?: boolean;
+  isHidden?: boolean;
+  children?: ReactNode;
+}
+declare function DraggableCard({
+  title,
+  subtitle,
+  badges,
+  actions,
+  details,
+  dragHandleProps,
+  className,
+  isDragging,
+  isHidden,
+  children,
+  ...props
+}: DraggableCardProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/detail-view.d.ts
+interface DetailViewItemData {
+  label: string;
+  value?: react.ReactNode;
+  /** Custom render function (overrides value) */
+  render?: () => react.ReactNode;
+  /** Hide this item entirely */
+  hidden?: boolean;
+  /** Span full width (ignores columns) */
+  fullWidth?: boolean;
+  /** Additional className for the value cell */
+  className?: string;
+}
+interface DetailViewProps {
+  items?: DetailViewItemData[];
+  /** Grid columns */
+  columns?: 1 | 2 | 3;
+  /** Label placement */
+  layout?: "stacked" | "horizontal" | "inline";
+  /** Size variant */
+  size?: "sm" | "default" | "lg";
+  /** Show dividers between items */
+  dividers?: boolean;
+  /** Striped rows (stacked layout only) */
+  striped?: boolean;
+  /** Card wrapper */
+  bordered?: boolean;
+  /** Section title */
+  title?: string;
+  /** Section description */
+  description?: string;
+  className?: string;
+  children?: react.ReactNode;
+}
+declare function DetailView({
+  items,
+  columns,
+  layout,
+  size,
+  dividers,
+  striped,
+  bordered,
+  title,
+  description,
+  className,
+  children
+}: DetailViewProps): react_jsx_runtime0.JSX.Element;
+interface DetailItemProps {
+  label: string;
+  children?: react.ReactNode;
+  value?: react.ReactNode;
+  className?: string;
+  labelClassName?: string;
+  layout?: "stacked" | "horizontal" | "inline";
+}
+declare function DetailItem({
+  label,
+  children,
+  value,
+  className,
+  labelClassName,
+  layout
+}: DetailItemProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/info-row.d.ts
+interface InfoRowProps {
+  label: string;
+  value: ReactNode;
+  copyable?: boolean;
+  icon?: ComponentType<LucideProps>;
+}
+declare function InfoRow({
+  label,
+  value,
+  copyable,
+  icon: Icon
+}: InfoRowProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region src/components/pill.d.ts
+interface PillProps {
+  variant?: "default" | "secondary" | "destructive" | "outline";
+  themed?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+declare function Pill({
+  variant,
+  themed,
+  className,
+  ...props
+}: PillProps): react_jsx_runtime0.JSX.Element;
+interface PillAvatarProps {
+  fallback?: string;
+  className?: string;
+  src?: string;
+  alt?: string;
+}
+declare function PillAvatar({
+  fallback,
+  className,
+  src,
+  alt,
+  ...props
+}: PillAvatarProps): react_jsx_runtime0.JSX.Element;
+interface PillButtonProps {
+  className?: string;
+  children?: ReactNode;
+  onClick?: () => void;
+}
+declare function PillButton({
+  className,
+  ...props
+}: PillButtonProps): react_jsx_runtime0.JSX.Element;
+interface PillStatusProps {
+  children?: ReactNode;
+  className?: string;
+}
+declare function PillStatus({
+  children,
+  className,
+  ...props
+}: PillStatusProps): react_jsx_runtime0.JSX.Element;
+interface PillIndicatorProps {
+  variant?: "success" | "error" | "warning" | "info";
+  pulse?: boolean;
+}
+declare function PillIndicator({
+  variant,
+  pulse
+}: PillIndicatorProps): react_jsx_runtime0.JSX.Element;
+interface PillDeltaProps {
+  className?: string;
+  delta?: number;
+}
+declare function PillDelta({
+  className,
+  delta
+}: PillDeltaProps): react_jsx_runtime0.JSX.Element;
+interface PillIconProps extends LucideProps {
+  icon: ComponentType<LucideProps>;
+  className?: string;
+}
+declare function PillIcon({
+  icon: Icon,
+  className,
+  ...props
+}: PillIconProps): react_jsx_runtime0.JSX.Element;
+interface PillAvatarGroupProps {
+  children?: ReactNode;
+  className?: string;
+}
+declare function PillAvatarGroup({
+  children,
+  className,
+  ...props
+}: PillAvatarGroupProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/timeline.d.ts
+type TimelineStatus = "default" | "success" | "error" | "warning" | "pending" | "active";
+interface TimelineItem {
+  /** Title of the timeline entry */
+  title: string;
+  /** Description or content */
+  description?: react.ReactNode;
+  /** Timestamp / date string */
+  timestamp?: string;
+  /** Secondary label (e.g., user name) */
+  label?: string;
+  /** Status determines icon color and connector style */
+  status?: TimelineStatus;
+  /** Custom icon override */
+  icon?: LucideIcon | react.ReactNode;
+  /** Additional content below description */
+  content?: react.ReactNode;
+}
+interface TimelineProps {
+  items: TimelineItem[];
+  /** Layout direction */
+  orientation?: "vertical" | "horizontal";
+  /** Size variant */
+  size?: "sm" | "default" | "lg";
+  /** Show connector lines */
+  showConnectors?: boolean;
+  /** Reverse order (newest first) */
+  reverse?: boolean;
+  className?: string;
+}
+declare function Timeline({
+  items,
+  orientation,
+  size,
+  showConnectors,
+  reverse,
+  className
+}: TimelineProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DataCard as A, AccordionSectionProps as B, DetailItem as C, DetailViewProps as D, DetailViewItemData as E, LoadingCard as F, FaqAccordionProps as H, LoadingCardProps as I, StatsCard as L, DragHandleProps as M, DraggableCard as N, CardWrapper as O, DraggableCardProps as P, StatsCardProps as R, InfoRowProps as S, DetailView as T, FaqItem as U, FaqAccordion as V, PillIndicatorProps as _, Pill as a, PillStatusProps as b, PillAvatarGroupProps as c, PillButtonProps as d, PillDelta as f, PillIndicator as g, PillIconProps as h, TimelineStatus as i, DataCardProps as j, CardWrapperProps as k, PillAvatarProps as l, PillIcon as m, TimelineItem as n, PillAvatar as o, PillDeltaProps as p, TimelineProps as r, PillAvatarGroup as s, Timeline as t, PillButton as u, PillProps as v, DetailItemProps as w, InfoRow as x, PillStatus as y, AccordionSection as z };