"use client";
import {
  cn,
  init_cn
} from "./chunk-XTCBRQN2.js";
import {
  CheckboxCheckmarkIcon
} from "./chunk-6U3IUD57.js";

// src/components/ui/field-wrapper.tsx
init_cn();
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var errorVariantClasses = {
  error: "text-ods-error",
  warning: "text-[var(--ods-attention-yellow-warning)]"
};
var FieldWrapper = React.forwardRef(
  ({ label, error, errorVariant = "error", className, children }, ref) => {
    const hasChrome = label != null || error != null;
    return /* @__PURE__ */ jsxs("div", { ref, className: cn(hasChrome ? "relative flex w-full flex-col" : "contents", className), children: [
      label && /* @__PURE__ */ jsx("label", { className: "text-h4 text-ods-text-primary mb-1", children: label }),
      children,
      error && /* @__PURE__ */ jsx("p", { className: cn("absolute bottom-0 left-0 right-0 translate-y-full text-h6 truncate", errorVariantClasses[errorVariant]), title: error, children: error })
    ] });
  }
);
FieldWrapper.displayName = "FieldWrapper";

// src/components/ui/input.tsx
init_cn();
import * as React2 from "react";
import { Loader2 } from "lucide-react";
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
var invalidBorderClasses = {
  error: "border-ods-error hover:border-ods-error has-[:focus]:border-ods-error",
  warning: "!border-[var(--ods-attention-yellow-warning)] hover:!border-[var(--ods-attention-yellow-warning)] has-[:focus]:!border-[var(--ods-attention-yellow-warning)]"
};
var Input = React2.forwardRef(
  ({ className, type, invalid = false, startAdornment, endAdornment, label, error, errorVariant = "error", loading = false, ...props }, ref) => {
    const isInvalid = invalid || !!error;
    if (type === "range") {
      const rangeInput = /* @__PURE__ */ jsx2(
        "input",
        {
          type: "range",
          className: cn(
            "w-full cursor-pointer appearance-none rounded-full bg-white/30 h-1",
            // Webkit (Chrome/Safari) thumb
            "[&::-webkit-slider-thumb]:appearance-none",
            "[&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3",
            "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white",
            "[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:shadow-sm",
            // Firefox thumb
            "[&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3",
            "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white",
            "[&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer",
            // Firefox track
            "[&::-moz-range-track]:bg-transparent",
            // Disabled
            "disabled:cursor-not-allowed disabled:opacity-50",
            className
          ),
          ref,
          ...props
        }
      );
      return label ? /* @__PURE__ */ jsx2(FieldWrapper, { label, error, errorVariant, children: rangeInput }) : rangeInput;
    }
    const content = /* @__PURE__ */ jsxs2(
      "label",
      {
        "data-invalid": isInvalid || void 0,
        className: cn(
          // Layout & spacing
          "flex w-full items-center gap-2 rounded-[6px] border px-3 h-11 md:h-12 cursor-text",
          // Focus-within states
          "has-[:focus-visible]:outline-none",
          "group",
          // Animations & touch UX
          "transition-colors duration-200",
          // Theme palette
          "bg-ods-card border-ods-border has-[:focus]:border-ods-accent",
          // Hover & active (not disabled)
          !props.disabled && "hover:bg-ods-bg-hover hover:border-ods-border-hover active:bg-ods-bg-active active:border-ods-border-active",
          // Disabled
          props.disabled && "!cursor-not-allowed bg-ods-bg",
          // Invalid
          isInvalid && invalidBorderClasses[errorVariant],
          className
        ),
        children: [
          startAdornment && /* @__PURE__ */ jsx2("span", { className: "text-h6 flex-shrink-0 text-ods-text-secondary transition-colors duration-200 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6", children: startAdornment }),
          /* @__PURE__ */ jsx2(
            "input",
            {
              type,
              className: cn(
                // Layout
                "flex-1 min-w-0 bg-transparent border-none outline-none",
                // Typography
                "text-h4",
                // Colors
                "text-ods-text-primary placeholder:text-ods-text-secondary",
                // File input adjustments
                "file:border-0 file:bg-transparent",
                // Disabled
                "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border",
                // Touch
                "touch-manipulation",
                // Autofill override
                "[&:-webkit-autofill]:[-webkit-box-shadow:0_0_0_9999px_transparent_inset] [&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-text-primary)] [&:-webkit-autofill]:[caret-color:var(--color-text-primary)] [&:-webkit-autofill]:[transition:background-color_9999s_ease-in-out_0s]"
              ),
              ref,
              ...props
            }
          ),
          loading && /* @__PURE__ */ jsx2(Loader2, { className: "animate-spin flex-shrink-0 text-ods-text-secondary size-4 md:size-6" }),
          !loading && endAdornment && /* @__PURE__ */ jsx2("span", { className: "text-h6 flex-shrink-0 text-ods-text-secondary transition-colors duration-200 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6", children: endAdornment })
        ]
      }
    );
    return /* @__PURE__ */ jsx2(FieldWrapper, { label, error, errorVariant, children: content });
  }
);
Input.displayName = "Input";

// src/components/ui/checkbox.tsx
init_cn();
import * as React3 from "react";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { jsx as jsx3 } from "react/jsx-runtime";
var Checkbox = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
  CheckboxPrimitive.Root,
  {
    ref,
    className: cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-ods-border bg-ods-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-ods-accent data-[state=checked]:border-ods-accent",
      className
    ),
    ...props,
    children: /* @__PURE__ */ jsx3(
      CheckboxPrimitive.Indicator,
      {
        className: cn("flex items-center justify-center text-ods-text-on-accent"),
        children: /* @__PURE__ */ jsx3(CheckboxCheckmarkIcon, { size: 10 })
      }
    )
  }
));
Checkbox.displayName = CheckboxPrimitive.Root.displayName;

// src/components/ui/skeleton.tsx
init_cn();
import * as React4 from "react";
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
var Skeleton = React4.forwardRef(
  ({ className, ...props }, ref) => {
    return /* @__PURE__ */ jsx4(
      "div",
      {
        ref,
        className: cn(
          "animate-pulse rounded-md bg-ods-border",
          className
        ),
        ...props
      }
    );
  }
);
Skeleton.displayName = "Skeleton";
var SkeletonText = React4.forwardRef(
  ({ lines = 1, className, ...props }, ref) => {
    return /* @__PURE__ */ jsx4("div", { ref, className: cn("space-y-2", className), ...props, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx4(
      Skeleton,
      {
        className: cn(
          "h-4",
          i === lines - 1 && lines > 1 && "w-3/4"
          // Last line shorter for multi-line
        )
      },
      i
    )) });
  }
);
SkeletonText.displayName = "SkeletonText";
var SkeletonCard = React4.forwardRef(
  ({ showImage = false, className, ...props }, ref) => {
    return /* @__PURE__ */ jsxs3(
      "div",
      {
        ref,
        className: cn(
          "rounded-lg border border-ods-border overflow-hidden",
          className
        ),
        ...props,
        children: [
          showImage && /* @__PURE__ */ jsx4(Skeleton, { className: "h-48 w-full" }),
          /* @__PURE__ */ jsxs3("div", { className: "p-6", children: [
            /* @__PURE__ */ jsx4(Skeleton, { className: "h-6 w-3/4 mb-4" }),
            /* @__PURE__ */ jsx4(SkeletonText, { lines: 3 })
          ] })
        ]
      }
    );
  }
);
SkeletonCard.displayName = "SkeletonCard";
var SkeletonGrid = React4.forwardRef(
  ({ columns = 3, items = 6, showImages = false, className, ...props }, ref) => {
    return /* @__PURE__ */ jsx4(
      "div",
      {
        ref,
        className: cn(
          `grid grid-cols-1 gap-6`,
          columns === 2 && "md:grid-cols-2",
          columns === 3 && "md:grid-cols-3",
          columns === 4 && "md:grid-cols-4",
          className
        ),
        ...props,
        children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsx4(SkeletonCard, { showImage: showImages }, i))
      }
    );
  }
);
SkeletonGrid.displayName = "SkeletonGrid";
var SkeletonButton = React4.forwardRef(
  ({ size = "default", className, ...props }, ref) => {
    const sizeClasses = {
      sm: "h-8 w-20",
      default: "h-10 w-32",
      lg: "h-12 w-40"
    };
    return /* @__PURE__ */ jsx4(
      Skeleton,
      {
        ref,
        className: cn(
          "rounded-lg",
          sizeClasses[size],
          className
        ),
        ...props
      }
    );
  }
);
SkeletonButton.displayName = "SkeletonButton";
var SkeletonHeading = React4.forwardRef(
  ({ level = 1, className, ...props }, ref) => {
    const heightClasses = {
      1: "h-12",
      2: "h-10",
      3: "h-8",
      4: "h-7",
      5: "h-6",
      6: "h-5"
    };
    return /* @__PURE__ */ jsx4(
      Skeleton,
      {
        ref,
        className: cn(
          heightClasses[level],
          "w-3/4",
          className
        ),
        ...props
      }
    );
  }
);
SkeletonHeading.displayName = "SkeletonHeading";
var SkeletonList = React4.forwardRef(
  ({ items = 5, className, ...props }, ref) => {
    return /* @__PURE__ */ jsx4("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
      /* @__PURE__ */ jsx4(Skeleton, { className: "h-10 w-10 rounded-full flex-shrink-0" }),
      /* @__PURE__ */ jsxs3("div", { className: "flex-1", children: [
        /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/3 mb-1" }),
        /* @__PURE__ */ jsx4(Skeleton, { className: "h-3 w-1/2" })
      ] })
    ] }, i)) });
  }
);
SkeletonList.displayName = "SkeletonList";
var SkeletonNavigation = React4.forwardRef(
  ({ items = 6, className, ...props }, ref) => {
    return /* @__PURE__ */ jsx4("div", { ref, className: cn("flex items-center gap-6", className), ...props, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsx4(Skeleton, { className: "h-5 w-20" }, i)) });
  }
);
SkeletonNavigation.displayName = "SkeletonNavigation";

export {
  FieldWrapper,
  Input,
  Checkbox,
  Skeleton,
  SkeletonText,
  SkeletonCard,
  SkeletonGrid,
  SkeletonButton,
  SkeletonHeading,
  SkeletonList,
  SkeletonNavigation
};
//# sourceMappingURL=chunk-M2OCXTNT.js.map