@mieweb/ui 0.1.0

package/dist/chunk-XHJGYBYG.cjs

@@ -0,0 +1,262 @@
+'use strict';
+
+var chunkOR5DRJCW_cjs = require('./chunk-OR5DRJCW.cjs');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var RadioGroupContext = React__namespace.createContext(void 0);
+function useRadioGroupContext() {
+  const context = React__namespace.useContext(RadioGroupContext);
+  if (!context) {
+    throw new Error("Radio must be used within a RadioGroup");
+  }
+  return context;
+}
+var radioVariants = classVarianceAuthority.cva(
+  [
+    "shrink-0 appearance-none",
+    "border-2 border-input rounded-full",
+    "bg-background",
+    "transition-all duration-150",
+    "cursor-pointer",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "checked:border-primary-500"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function RadioGroup({
+  name,
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  label,
+  description,
+  error,
+  disabled = false,
+  size = "md",
+  orientation = "vertical",
+  children,
+  className
+}) {
+  const generatedName = React__namespace.useId();
+  const groupName = name || generatedName;
+  const groupId = React__namespace.useId();
+  const descriptionId = `${groupId}-description`;
+  const errorId = `${groupId}-error`;
+  const [uncontrolledValue, setUncontrolledValue] = React__namespace.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const handleChange = React__namespace.useCallback(
+    (newValue) => {
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [isControlled, onValueChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadioGroupContext.Provider,
+    {
+      value: { name: groupName, value, onChange: handleChange, disabled, size },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "fieldset",
+        {
+          role: "radiogroup",
+          className: chunkOR5DRJCW_cjs.cn("flex flex-col gap-2", className),
+          "aria-describedby": [description ? descriptionId : null, error ? errorId : null].filter(Boolean).join(" ") || void 0,
+          children: [
+            label && /* @__PURE__ */ jsxRuntime.jsx(
+              "legend",
+              {
+                className: chunkOR5DRJCW_cjs.cn(
+                  "text-foreground font-medium",
+                  size === "sm" && "text-xs",
+                  size === "md" && "text-sm",
+                  size === "lg" && "text-base"
+                ),
+                children: label
+              }
+            ),
+            description && /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                id: descriptionId,
+                className: chunkOR5DRJCW_cjs.cn(
+                  "text-muted-foreground",
+                  size === "sm" && "text-[10px]",
+                  size === "md" && "text-xs",
+                  size === "lg" && "text-sm"
+                ),
+                children: description
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: chunkOR5DRJCW_cjs.cn(
+                  "flex gap-4",
+                  orientation === "vertical" && "flex-col gap-3"
+                ),
+                children
+              }
+            ),
+            error && /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                id: errorId,
+                className: chunkOR5DRJCW_cjs.cn(
+                  "text-destructive",
+                  size === "sm" && "text-xs",
+                  size === "md" && "text-sm",
+                  size === "lg" && "text-base"
+                ),
+                role: "alert",
+                children: error
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+RadioGroup.displayName = "RadioGroup";
+var Radio = React__namespace.forwardRef(
+  ({
+    className,
+    size: propSize,
+    value,
+    label,
+    description,
+    labelPosition = "right",
+    disabled: propDisabled,
+    id,
+    ...props
+  }, ref) => {
+    const context = useRadioGroupContext();
+    const generatedId = React__namespace.useId();
+    const radioId = id || generatedId;
+    const descriptionId = `${radioId}-description`;
+    const isChecked = context.value === value;
+    const isDisabled = propDisabled || context.disabled;
+    const size = propSize || context.size;
+    const handleChange = React__namespace.useCallback(() => {
+      if (!isDisabled) {
+        context.onChange(value);
+      }
+    }, [isDisabled, context, value]);
+    const radioElement = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex items-center justify-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref,
+          id: radioId,
+          type: "radio",
+          name: context.name,
+          value,
+          checked: isChecked,
+          disabled: isDisabled,
+          onChange: handleChange,
+          "aria-describedby": description ? descriptionId : void 0,
+          className: chunkOR5DRJCW_cjs.cn(radioVariants({ size }), className),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: chunkOR5DRJCW_cjs.cn(
+            "bg-primary-500 pointer-events-none absolute rounded-full transition-transform",
+            size === "sm" && "h-2 w-2",
+            size === "md" && "h-2.5 w-2.5",
+            size === "lg" && "h-3 w-3",
+            isChecked ? "scale-100" : "scale-0"
+          )
+        }
+      )
+    ] });
+    const labelElement = label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: radioId,
+          className: chunkOR5DRJCW_cjs.cn(
+            "text-foreground cursor-pointer font-medium select-none",
+            size === "sm" && "text-xs",
+            size === "md" && "text-sm",
+            size === "lg" && "text-base",
+            isDisabled && "cursor-not-allowed opacity-50"
+          ),
+          children: label
+        }
+      ),
+      description && /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          id: descriptionId,
+          className: chunkOR5DRJCW_cjs.cn(
+            "text-muted-foreground",
+            size === "sm" && "text-[10px]",
+            size === "md" && "text-xs",
+            size === "lg" && "text-sm"
+          ),
+          children: description
+        }
+      )
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunkOR5DRJCW_cjs.cn(
+          "flex items-start gap-3",
+          labelPosition === "left" && "flex-row-reverse"
+        ),
+        children: [
+          radioElement,
+          labelElement
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+exports.radioVariants = radioVariants;
+//# sourceMappingURL=chunk-XHJGYBYG.cjs.map
+//# sourceMappingURL=chunk-XHJGYBYG.cjs.map

package/dist/chunk-XHJGYBYG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Radio/Radio.tsx"],"names":["React","cva","jsx","jsxs","cn"],"mappings":"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","file":"chunk-XHJGYBYG.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n// ============================================================================\n// Radio Group Context\n// ============================================================================\n\ninterface RadioGroupContextValue {\n  name: string;\n  value: string;\n  onChange: (value: string) => void;\n  disabled?: boolean;\n  size?: 'sm' | 'md' | 'lg' | null;\n}\n\nconst RadioGroupContext = React.createContext<\n  RadioGroupContextValue | undefined\n>(undefined);\n\nfunction useRadioGroupContext() {\n  const context = React.useContext(RadioGroupContext);\n  if (!context) {\n    throw new Error('Radio must be used within a RadioGroup');\n  }\n  return context;\n}\n\n// ============================================================================\n// Radio Variants\n// ============================================================================\n\nconst radioVariants = cva(\n  [\n    'shrink-0 appearance-none',\n    'border-2 border-input rounded-full',\n    'bg-background',\n    'transition-all duration-150',\n    'cursor-pointer',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n    'checked:border-primary-500',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4',\n        md: 'h-5 w-5',\n        lg: 'h-6 w-6',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\n// ============================================================================\n// Radio Group\n// ============================================================================\n\nexport interface RadioGroupProps {\n  /** Group name (required for native form behavior) */\n  name?: string;\n  /** Controlled value */\n  value?: string;\n  /** Default value (uncontrolled) */\n  defaultValue?: string;\n  /** Callback when value changes */\n  onValueChange?: (value: string) => void;\n  /** Group label */\n  label?: string;\n  /** Description for the group */\n  description?: string;\n  /** Error message */\n  error?: string;\n  /** Whether all radios are disabled */\n  disabled?: boolean;\n  /** Size of all radios */\n  size?: 'sm' | 'md' | 'lg';\n  /** Orientation of radio items */\n  orientation?: 'horizontal' | 'vertical';\n  /** Children radio items */\n  children: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n}\n\n/**\n * A radio group component for selecting one option from a set.\n *\n * @example\n * ```tsx\n * <RadioGroup name=\"plan\" label=\"Select a plan\" onValueChange={setPlan}>\n *   <Radio value=\"free\" label=\"Free\" />\n *   <Radio value=\"pro\" label=\"Pro\" />\n *   <Radio value=\"enterprise\" label=\"Enterprise\" />\n * </RadioGroup>\n * ```\n */\nfunction RadioGroup({\n  name,\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  label,\n  description,\n  error,\n  disabled = false,\n  size = 'md',\n  orientation = 'vertical',\n  children,\n  className,\n}: RadioGroupProps) {\n  const generatedName = React.useId();\n  const groupName = name || generatedName;\n  const groupId = React.useId();\n  const descriptionId = `${groupId}-description`;\n  const errorId = `${groupId}-error`;\n\n  const [uncontrolledValue, setUncontrolledValue] =\n    React.useState(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const handleChange = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setUncontrolledValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange]\n  );\n\n  return (\n    <RadioGroupContext.Provider\n      value={{ name: groupName, value, onChange: handleChange, disabled, size }}\n    >\n      <fieldset\n        role=\"radiogroup\"\n        className={cn('flex flex-col gap-2', className)}\n        aria-describedby={\n          [description ? descriptionId : null, error ? errorId : null]\n            .filter(Boolean)\n            .join(' ') || undefined\n        }\n      >\n        {label && (\n          <legend\n            className={cn(\n              'text-foreground font-medium',\n              size === 'sm' && 'text-xs',\n              size === 'md' && 'text-sm',\n              size === 'lg' && 'text-base'\n            )}\n          >\n            {label}\n          </legend>\n        )}\n        {description && (\n          <p\n            id={descriptionId}\n            className={cn(\n              'text-muted-foreground',\n              size === 'sm' && 'text-[10px]',\n              size === 'md' && 'text-xs',\n              size === 'lg' && 'text-sm'\n            )}\n          >\n            {description}\n          </p>\n        )}\n        <div\n          className={cn(\n            'flex gap-4',\n            orientation === 'vertical' && 'flex-col gap-3'\n          )}\n        >\n          {children}\n        </div>\n        {error && (\n          <p\n            id={errorId}\n            className={cn(\n              'text-destructive',\n              size === 'sm' && 'text-xs',\n              size === 'md' && 'text-sm',\n              size === 'lg' && 'text-base'\n            )}\n            role=\"alert\"\n          >\n            {error}\n          </p>\n        )}\n      </fieldset>\n    </RadioGroupContext.Provider>\n  );\n}\n\nRadioGroup.displayName = 'RadioGroup';\n\n// ============================================================================\n// Radio Item\n// ============================================================================\n\nexport interface RadioProps\n  extends\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>,\n    VariantProps<typeof radioVariants> {\n  /** Value for this radio option */\n  value: string;\n  /** Label for the radio */\n  label?: string;\n  /** Description text below the label */\n  description?: string;\n  /** Position of the label */\n  labelPosition?: 'left' | 'right';\n}\n\n/**\n * An individual radio item within a RadioGroup.\n *\n * @example\n * ```tsx\n * <Radio value=\"option1\" label=\"Option 1\" />\n * <Radio value=\"option2\" label=\"Option 2\" description=\"Additional details\" />\n * ```\n */\nconst Radio = React.forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      className,\n      size: propSize,\n      value,\n      label,\n      description,\n      labelPosition = 'right',\n      disabled: propDisabled,\n      id,\n      ...props\n    },\n    ref\n  ) => {\n    const context = useRadioGroupContext();\n    const generatedId = React.useId();\n    const radioId = id || generatedId;\n    const descriptionId = `${radioId}-description`;\n\n    const isChecked = context.value === value;\n    const isDisabled = propDisabled || context.disabled;\n    const size = propSize || context.size;\n\n    const handleChange = React.useCallback(() => {\n      if (!isDisabled) {\n        context.onChange(value);\n      }\n    }, [isDisabled, context, value]);\n\n    const radioElement = (\n      <span className=\"relative inline-flex items-center justify-center\">\n        <input\n          ref={ref}\n          id={radioId}\n          type=\"radio\"\n          name={context.name}\n          value={value}\n          checked={isChecked}\n          disabled={isDisabled}\n          onChange={handleChange}\n          aria-describedby={description ? descriptionId : undefined}\n          className={cn(radioVariants({ size }), className)}\n          {...props}\n        />\n        {/* Custom dot indicator */}\n        <span\n          className={cn(\n            'bg-primary-500 pointer-events-none absolute rounded-full transition-transform',\n            size === 'sm' && 'h-2 w-2',\n            size === 'md' && 'h-2.5 w-2.5',\n            size === 'lg' && 'h-3 w-3',\n            isChecked ? 'scale-100' : 'scale-0'\n          )}\n        />\n      </span>\n    );\n\n    const labelElement = label && (\n      <div className=\"flex flex-col gap-0.5\">\n        <label\n          htmlFor={radioId}\n          className={cn(\n            'text-foreground cursor-pointer font-medium select-none',\n            size === 'sm' && 'text-xs',\n            size === 'md' && 'text-sm',\n            size === 'lg' && 'text-base',\n            isDisabled && 'cursor-not-allowed opacity-50'\n          )}\n        >\n          {label}\n        </label>\n        {description && (\n          <p\n            id={descriptionId}\n            className={cn(\n              'text-muted-foreground',\n              size === 'sm' && 'text-[10px]',\n              size === 'md' && 'text-xs',\n              size === 'lg' && 'text-sm'\n            )}\n          >\n            {description}\n          </p>\n        )}\n      </div>\n    );\n\n    return (\n      <div\n        className={cn(\n          'flex items-start gap-3',\n          labelPosition === 'left' && 'flex-row-reverse'\n        )}\n      >\n        {radioElement}\n        {labelElement}\n      </div>\n    );\n  }\n);\n\nRadio.displayName = 'Radio';\n\nexport { RadioGroup, Radio, radioVariants };\n"]}

package/dist/chunk-XXOBTAKA.js

@@ -0,0 +1,390 @@
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var cardVariants = cva(
+  [
+    "rounded-xl bg-card text-card-foreground",
+    "border border-border",
+    "relative overflow-hidden"
+  ],
+  {
+    variants: {
+      padding: {
+        none: "p-0",
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-6",
+        xl: "p-8"
+      },
+      variant: {
+        default: "shadow-card",
+        elevated: "shadow-lg border-0",
+        outlined: "shadow-none border-2",
+        ghost: "shadow-none border-0 bg-transparent",
+        filled: "shadow-none border-0 bg-muted"
+      },
+      interactive: {
+        true: [
+          "transition-all duration-200",
+          "hover:shadow-md hover:border-primary-200",
+          "dark:hover:border-primary-800",
+          "cursor-pointer",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
+        ],
+        false: ""
+      },
+      selected: {
+        true: "ring-2 ring-primary-500 border-primary-500",
+        false: ""
+      },
+      orientation: {
+        vertical: "flex flex-col",
+        horizontal: "flex flex-row"
+      }
+    },
+    defaultVariants: {
+      padding: "md",
+      variant: "default",
+      interactive: false,
+      selected: false,
+      orientation: "vertical"
+    }
+  }
+);
+var cardAccentVariants = cva("absolute left-0 top-0 bottom-0 w-1", {
+  variants: {
+    color: {
+      primary: "bg-primary-500",
+      success: "bg-success",
+      warning: "bg-warning",
+      destructive: "bg-destructive",
+      info: "bg-primary-200"
+    }
+  }
+});
+var Card = React.forwardRef(
+  ({
+    className,
+    padding,
+    variant,
+    interactive,
+    selected,
+    orientation,
+    accent,
+    loading,
+    as: Component = "div",
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Component,
+      {
+        ref,
+        className: cn(
+          cardVariants({
+            padding,
+            variant,
+            interactive,
+            selected,
+            orientation
+          }),
+          accent && "pl-4",
+          className
+        ),
+        "data-loading": loading || void 0,
+        "aria-busy": loading || void 0,
+        ...props,
+        children: [
+          accent && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(cardAccentVariants({ color: accent })),
+              "aria-hidden": "true"
+            }
+          ),
+          loading && /* @__PURE__ */ jsx("div", { className: "bg-card/80 absolute inset-0 z-10 flex items-center justify-center backdrop-blur-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "bg-primary-500 h-2 w-2 animate-bounce rounded-full [animation-delay:-0.3s]" }),
+            /* @__PURE__ */ jsx("div", { className: "bg-primary-500 h-2 w-2 animate-bounce rounded-full [animation-delay:-0.15s]" }),
+            /* @__PURE__ */ jsx("div", { className: "bg-primary-500 h-2 w-2 animate-bounce rounded-full" })
+          ] }) }),
+          children
+        ]
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+var CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col gap-1.5 pb-4", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    ref,
+    className: cn(
+      "text-lg leading-none font-semibold tracking-tight",
+      className
+    ),
+    ...props,
+    children
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-muted-foreground text-sm", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center pt-4", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+var CardMedia = React.forwardRef(
+  ({ className, aspectRatio = "video", overlay, src, alt, ...props }, ref) => {
+    const aspectClasses = {
+      video: "aspect-video",
+      square: "aspect-square",
+      wide: "aspect-[21/9]",
+      auto: ""
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative -mx-4 -mt-4 overflow-hidden first:rounded-t-xl",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt,
+              className: cn("w-full object-cover", aspectClasses[aspectRatio]),
+              ...props
+            }
+          ),
+          overlay && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-end bg-gradient-to-t from-neutral-900/60 to-transparent p-4", children: overlay })
+        ]
+      }
+    );
+  }
+);
+CardMedia.displayName = "CardMedia";
+var CardBadge = React.forwardRef(
+  ({
+    className,
+    variant = "default",
+    position = "top-right",
+    children,
+    ...props
+  }, ref) => {
+    const variantClasses = {
+      default: "bg-muted text-muted-foreground",
+      primary: "bg-primary-500 text-white",
+      success: "bg-success text-success-foreground",
+      warning: "bg-warning text-warning-foreground",
+      destructive: "bg-destructive text-destructive-foreground"
+    };
+    const positionClasses = {
+      "top-left": "top-2 left-2",
+      "top-right": "top-2 right-2",
+      "bottom-left": "bottom-2 left-2",
+      "bottom-right": "bottom-2 right-2"
+    };
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "absolute z-10 rounded-md px-2 py-1 text-xs font-medium",
+          variantClasses[variant],
+          positionClasses[position],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+CardBadge.displayName = "CardBadge";
+var CardActions = React.forwardRef(
+  ({ className, align = "right", children, ...props }, ref) => {
+    const alignClasses = {
+      left: "justify-start",
+      center: "justify-center",
+      right: "justify-end",
+      between: "justify-between",
+      around: "justify-around"
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center gap-2 pt-4",
+          alignClasses[align],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+CardActions.displayName = "CardActions";
+var CardDivider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "hr",
+  {
+    ref,
+    className: cn("border-border -mx-4 my-4", className),
+    ...props
+  }
+));
+CardDivider.displayName = "CardDivider";
+var CardCollapsible = React.forwardRef(
+  ({
+    className,
+    expanded: controlledExpanded,
+    onExpandChange,
+    trigger = "Show more",
+    children,
+    ...props
+  }, ref) => {
+    const [internalExpanded, setInternalExpanded] = React.useState(false);
+    const isControlled = controlledExpanded !== void 0;
+    const expanded = isControlled ? controlledExpanded : internalExpanded;
+    const handleToggle = () => {
+      if (isControlled) {
+        onExpandChange?.(!expanded);
+      } else {
+        setInternalExpanded(!expanded);
+      }
+    };
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("", className), ...props, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleToggle,
+          className: "text-primary-600 focus-visible:ring-primary-500 flex items-center gap-1 rounded text-sm hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          "aria-expanded": expanded,
+          children: typeof trigger === "string" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            expanded ? "Show less" : trigger,
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: cn(
+                  "h-4 w-4 transition-transform",
+                  expanded && "rotate-180"
+                ),
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M19 9l-7 7-7-7"
+                  }
+                )
+              }
+            )
+          ] }) : trigger
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "grid transition-all duration-300 ease-in-out",
+            expanded ? "mt-3 grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+          ),
+          children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children })
+        }
+      )
+    ] });
+  }
+);
+CardCollapsible.displayName = "CardCollapsible";
+var CardStat = React.forwardRef(
+  ({ className, value, label, trend, icon, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex items-start gap-3", className),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx("div", { className: "bg-primary-500/10 text-primary-600 rounded-lg p-2", children: icon }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold tracking-tight", children: value }),
+            /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-sm", children: label }),
+            trend && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "mt-1 flex items-center gap-1 text-sm",
+                  trend.value >= 0 ? "text-success" : "text-destructive"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      className: cn("h-4 w-4", trend.value < 0 && "rotate-180"),
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M5 10l7-7m0 0l7 7m-7-7v18"
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    Math.abs(trend.value),
+                    "%"
+                  ] }),
+                  trend.label && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: trend.label })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+CardStat.displayName = "CardStat";
+
+export { Card, CardActions, CardBadge, CardCollapsible, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, CardMedia, CardStat, CardTitle, cardAccentVariants, cardVariants };
+//# sourceMappingURL=chunk-XXOBTAKA.js.map
+//# sourceMappingURL=chunk-XXOBTAKA.js.map