@etus/ui 0.3.2 → 0.4.0-beta.10

package/dist/chunk-VAVE4ZJF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Modal/Modal.tsx"],"names":[],"mappings":"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","file":"chunk-VAVE4ZJF.js","sourcesContent":["\"use client\"\n\nimport type { ModalIntent, ModalProps, ModalSize } from \"./Modal.types\"\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\n\n/**\n * Size classes for modal widths\n */\nconst sizeClasses: Record<ModalSize, string> = {\n  \"2xl\": \"sm:max-w-2xl\",\n  full: \"sm:max-w-[calc(100vw-4rem)]\",\n  lg: \"sm:max-w-lg\",\n  md: \"sm:max-w-md\",\n  sm: \"sm:max-w-sm\",\n  xl: \"sm:max-w-xl\",\n}\n\n/**\n * Background/foreground classes for the header icon-pill per intent.\n * Reuses the semantic STATUS tokens exposed as `--modal-icon-pill-color-*`.\n */\nconst iconPillClasses: Record<ModalIntent, string> = {\n  default:\n    \"bg-[color:var(--modal-icon-pill-color-default-bg)] text-[color:var(--modal-icon-pill-color-default-fg)]\",\n  destructive:\n    \"bg-[color:var(--modal-icon-pill-color-destructive-bg)] text-[color:var(--modal-icon-pill-color-destructive-fg)]\",\n  warning:\n    \"bg-[color:var(--modal-icon-pill-color-warning-bg)] text-[color:var(--modal-icon-pill-color-warning-fg)]\",\n}\n\n// Default English fallbacks — override via props for i18n (DES-1286 item 7)\nconst DEFAULT_FALLBACK_TITLE = \"Modal dialog\"\nconst DEFAULT_FALLBACK_DESCRIPTION = \"Use this dialog to complete the current action.\"\nconst DEFAULT_CLOSE_LABEL = \"Close\"\n\n/**\n * Modal - Simplified wrapper over @radix-ui/react-dialog\n *\n * A declarative API for common modal use cases. Modal is NOT a wrapper over\n * Seven's Dialog component — both are sibling wrappers over the same Radix\n * primitive. Modal provides a simpler props-based interface than Dialog's\n * compound subcomponents while maintaining full accessibility.\n *\n * @example\n * ```tsx\n * // With trigger (uncontrolled)\n * <Modal\n *   trigger={<Button>Open Modal</Button>}\n *   title=\"Modal Title\"\n *   description=\"Optional description\"\n *   footer={<Button>Save</Button>}\n * >\n *   <p>Modal content here</p>\n * </Modal>\n *\n * // Controlled\n * <Modal\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n *   title=\"Controlled Modal\"\n * >\n *   <p>Content</p>\n * </Modal>\n * ```\n */\nfunction Modal({\n  children,\n  className,\n  closeLabel = DEFAULT_CLOSE_LABEL,\n  closeOnEscape = true,\n  closeOnOverlayClick = true,\n  defaultOpen = false,\n  description,\n  fallbackDescription = DEFAULT_FALLBACK_DESCRIPTION,\n  fallbackTitle = DEFAULT_FALLBACK_TITLE,\n  footer,\n  icon,\n  intent = \"default\",\n  onOpenChange,\n  open,\n  overlayClassName,\n  showCloseButton = true,\n  size = \"md\",\n  title,\n  trigger,\n}: ModalProps) {\n  const accessibleTitle = title ?? fallbackTitle\n  const accessibleDescription = description ?? fallbackDescription\n\n  const handleOpenChange = (newOpen: boolean): void => {\n    onOpenChange?.(newOpen)\n  }\n\n  const handleEscapeKeyDown = (event: KeyboardEvent): void => {\n    if (!closeOnEscape) {\n      event.preventDefault()\n    }\n  }\n\n  const handleInteractOutside = (\n    event: CustomEvent<{ originalEvent: Event }>\n  ): void => {\n    if (!closeOnOverlayClick) {\n      event.preventDefault()\n    }\n  }\n\n  return (\n    <DialogPrimitive.Root\n      defaultOpen={defaultOpen}\n      open={open}\n      onOpenChange={handleOpenChange}\n    >\n      {trigger && (\n        <DialogPrimitive.Trigger asChild data-slot=\"modal-trigger\">\n          {trigger}\n        </DialogPrimitive.Trigger>\n      )}\n\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Overlay\n          className={cn(\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[color:var(--modal-overlay-bg)]\",\n            overlayClassName\n          )}\n          data-slot=\"modal-overlay\"\n        />\n        <DialogPrimitive.Content\n          className={cn(\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] border duration-200\",\n            \"bg-[color:var(--modal-content-bg)] border-[color:var(--modal-content-border)] gap-[var(--modal-content-gap)] rounded-[var(--modal-content-radius)] p-[var(--modal-content-padding)] shadow-[var(--modal-content-shadow)]\",\n            sizeClasses[size],\n            className\n          )}\n          data-slot=\"modal\"\n          onEscapeKeyDown={handleEscapeKeyDown}\n          onInteractOutside={handleInteractOutside}\n        >\n          {/* Header */}\n          <div\n            className=\"flex flex-col gap-[var(--modal-header-gap)] text-center sm:text-left\"\n            data-slot=\"modal-header\"\n          >\n            {icon && (\n              <span\n                className={cn(\n                  \"inline-flex w-fit items-center justify-center self-center rounded-[var(--modal-icon-pill-radius)] p-[var(--modal-icon-pill-padding)] sm:self-start [&_svg]:size-[var(--modal-icon-pill-icon-size)] [&_svg]:shrink-0\",\n                  iconPillClasses[intent]\n                )}\n                aria-hidden=\"true\"\n                data-intent={intent}\n                data-slot=\"modal-icon-pill\"\n              >\n                {icon}\n              </span>\n            )}\n            <DialogPrimitive.Title\n              className={cn(\n                \"text-lg leading-tight font-semibold\",\n                !title && \"sr-only\"\n              )}\n              data-slot=\"modal-title\"\n            >\n              {accessibleTitle}\n            </DialogPrimitive.Title>\n            <DialogPrimitive.Description\n              className={cn(\n                \"text-muted-foreground text-sm\",\n                !description && \"sr-only\"\n              )}\n              data-slot=\"modal-description\"\n            >\n              {accessibleDescription}\n            </DialogPrimitive.Description>\n          </div>\n\n          {/* Content */}\n          {children && <div data-slot=\"modal-content\">{children}</div>}\n\n          {/* Footer */}\n          {footer && (\n            <div\n              className=\"flex flex-col-reverse gap-[var(--modal-footer-gap)] sm:flex-row sm:justify-end\"\n              data-slot=\"modal-footer\"\n            >\n              {footer}\n            </div>\n          )}\n\n          {/* Close Button */}\n          {showCloseButton && (\n            <DialogPrimitive.Close\n              className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n              data-slot=\"modal-close\"\n            >\n              <X />\n              <span className=\"sr-only\">{closeLabel}</span>\n            </DialogPrimitive.Close>\n          )}\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  )\n}\n\nexport { Modal }\n"]}

package/dist/chunk-VBJ26PZJ.js

@@ -0,0 +1,147 @@
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from './chunk-N3I6GA4I.js';
+import { Field, FieldLabel, FieldError, FieldDescription } from './chunk-G7PBPX3K.js';
+import * as React from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+function InputOTPField({
+  label,
+  description,
+  errorMessage,
+  required,
+  digits = 6,
+  placeholder,
+  size = "md",
+  slotSize,
+  onChange,
+  onComplete,
+  value,
+  defaultValue,
+  disabled,
+  pattern,
+  className,
+  containerClassName
+}) {
+  const id = React.useId();
+  const inputId = `${id}-input`;
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const hasError = !!errorMessage;
+  const resolvedSlotSize = slotSize ?? size;
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
+  const currentValue = isControlled ? value : internalValue;
+  const handleChange = React.useCallback(
+    (nextValue) => {
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      onChange?.(nextValue);
+    },
+    [isControlled, onChange]
+  );
+  const renderSlots = () => {
+    const slotProps = {
+      size: resolvedSlotSize,
+      ...placeholder ? { placeholder } : {}
+    };
+    if (digits === 4) {
+      return /* @__PURE__ */ jsx(InputOTPGroup, { children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx(InputOTPSlot, { index: i, ...slotProps }, i)) });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(InputOTPGroup, { children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx(InputOTPSlot, { index: i, ...slotProps }, i)) }),
+      /* @__PURE__ */ jsx(InputOTPSeparator, {}),
+      /* @__PURE__ */ jsx(InputOTPGroup, { children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx(InputOTPSlot, { index: i + 3, ...slotProps }, i + 3)) })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(Field, { children: [
+    label && /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: inputId, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      InputOTP,
+      {
+        id: inputId,
+        maxLength: digits,
+        slotSize: resolvedSlotSize,
+        onChange: handleChange,
+        ...onComplete ? { onComplete } : {},
+        disabled,
+        value: currentValue,
+        ...pattern ? { pattern } : {},
+        ...className ? { className } : {},
+        ...containerClassName ? { containerClassName } : {},
+        "aria-describedby": hasError ? errorId : description ? descriptionId : void 0,
+        "aria-invalid": hasError || void 0,
+        "aria-required": required || void 0,
+        children: renderSlots()
+      }
+    ),
+    hasError ? /* @__PURE__ */ jsx(FieldError, { id: errorId, children: errorMessage }) : description ? /* @__PURE__ */ jsx(FieldDescription, { id: descriptionId, children: description }) : null
+  ] });
+}
+var inputOTPFieldVariants = cva(
+  "flex flex-col gap-2",
+  {
+    variants: {
+      size: {
+        sm: "gap-1.5",
+        md: "gap-2",
+        lg: "gap-2.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var inputOTPFieldLabelVariants = cva(
+  "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var inputOTPFieldDescriptionVariants = cva(
+  "text-muted-foreground",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var inputOTPFieldErrorVariants = cva(
+  "text-destructive font-medium",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+
+export { InputOTPField, inputOTPFieldDescriptionVariants, inputOTPFieldErrorVariants, inputOTPFieldLabelVariants, inputOTPFieldVariants };
+//# sourceMappingURL=chunk-VBJ26PZJ.js.map
+//# sourceMappingURL=chunk-VBJ26PZJ.js.map

package/dist/chunk-VBJ26PZJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/InputOTPField/InputOTPField.tsx","../src/components/forms/InputOTPField/InputOTPField.variants.ts"],"names":[],"mappings":"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","file":"chunk-VBJ26PZJ.js","sourcesContent":["\"use client\"\n\nimport type { InputOTPFieldProps } from \"./InputOTPField.types\"\n\nimport * as React from \"react\"\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"../Field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"../InputOTP\"\n\n/**\n * InputOTPField - A complete OTP input field with label, description, and error handling\n *\n * @example\n * ```tsx\n * // 6-digit OTP with two groups\n * <InputOTPField\n *   label=\"Verification Code\"\n *   description=\"Enter the 6-digit code sent to your phone\"\n *   digits={6}\n * />\n *\n * // 4-digit OTP with placeholder\n * <InputOTPField\n *   label=\"PIN\"\n *   digits={4}\n *   placeholder=\"0\"\n * />\n *\n * // With error state\n * <InputOTPField\n *   label=\"Code\"\n *   errorMessage=\"Invalid verification code\"\n *   digits={6}\n * />\n * ```\n */\nfunction InputOTPField({\n  label,\n  description,\n  errorMessage,\n  required,\n  digits = 6,\n  placeholder,\n  size = \"md\",\n  slotSize,\n  onChange,\n  onComplete,\n  value,\n  defaultValue,\n  disabled,\n  pattern,\n  className,\n  containerClassName,\n}: InputOTPFieldProps) {\n  const id = React.useId()\n  const inputId = `${id}-input`\n  const descriptionId = `${id}-description`\n  const errorId = `${id}-error`\n\n  const hasError = !!errorMessage\n  const resolvedSlotSize = slotSize ?? size\n  const isControlled = value !== undefined\n  const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\")\n\n  const currentValue = isControlled ? value : internalValue\n\n  const handleChange = React.useCallback(\n    (nextValue: string) => {\n      if (!isControlled) {\n        setInternalValue(nextValue)\n      }\n      onChange?.(nextValue)\n    },\n    [isControlled, onChange]\n  )\n\n  // Generate slot elements based on digit count\n  // Index keys are safe here: OTP slots are static, fixed-length, never reordered\n  /* eslint-disable @eslint-react/no-array-index-key */\n  const renderSlots = () => {\n    const slotProps = {\n      size: resolvedSlotSize,\n      ...(placeholder ? { placeholder } : {}),\n    }\n\n    if (digits === 4) {\n      return (\n        <InputOTPGroup>\n          {Array.from({ length: 4 }).map((_, i) => (\n            <InputOTPSlot key={i} index={i} {...slotProps} />\n          ))}\n        </InputOTPGroup>\n      )\n    }\n\n    // 6 digits: two groups of 3 with separator\n    return (\n      <>\n        <InputOTPGroup>\n          {Array.from({ length: 3 }).map((_, i) => (\n            <InputOTPSlot key={i} index={i} {...slotProps} />\n          ))}\n        </InputOTPGroup>\n        <InputOTPSeparator />\n        <InputOTPGroup>\n          {Array.from({ length: 3 }).map((_, i) => (\n            <InputOTPSlot key={i + 3} index={i + 3} {...slotProps} />\n          ))}\n        </InputOTPGroup>\n      </>\n    )\n  }\n  /* eslint-enable @eslint-react/no-array-index-key */\n\n  return (\n    <Field>\n      {label && (\n        <FieldLabel htmlFor={inputId}>\n          {label}\n          {required && (\n            <span aria-hidden=\"true\" className=\"text-destructive ml-1\">\n              *\n            </span>\n          )}\n        </FieldLabel>\n      )}\n      <InputOTP\n        id={inputId}\n        maxLength={digits}\n        slotSize={resolvedSlotSize}\n        onChange={handleChange}\n        {...(onComplete ? { onComplete } : {})}\n        disabled={disabled}\n        value={currentValue}\n        {...(pattern ? { pattern } : {})}\n        {...(className ? { className } : {})}\n        {...(containerClassName ? { containerClassName } : {})}\n        aria-describedby={\n          hasError ? errorId : (description ? descriptionId : undefined)\n        }\n        aria-invalid={hasError || undefined}\n        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Using || intentionally: false || undefined = undefined, false ?? undefined = false\n        aria-required={required || undefined}\n      >\n        {renderSlots()}\n      </InputOTP>\n      {hasError ? (\n        <FieldError id={errorId}>{errorMessage}</FieldError>\n      ) : description ? (\n        <FieldDescription id={descriptionId}>{description}</FieldDescription>\n      ) : null}\n    </Field>\n  )\n}\n\nexport { InputOTPField }\n","import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * InputOTPField container variant styles using CVA\n * Wraps the Field + InputOTP combination with consistent spacing\n */\nexport const inputOTPFieldVariants = cva(\n  \"flex flex-col gap-2\",\n  {\n    variants: {\n      size: {\n        sm: \"gap-1.5\",\n        md: \"gap-2\",\n        lg: \"gap-2.5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * InputOTPField label variant styles using CVA\n */\nexport const inputOTPFieldLabelVariants = cva(\n  \"font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-sm\",\n        lg: \"text-base\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * InputOTPField description variant styles using CVA\n */\nexport const inputOTPFieldDescriptionVariants = cva(\n  \"text-muted-foreground\",\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-sm\",\n        lg: \"text-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * InputOTPField error variant styles using CVA\n */\nexport const inputOTPFieldErrorVariants = cva(\n  \"text-destructive font-medium\",\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-sm\",\n        lg: \"text-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type InputOTPFieldVariantProps = VariantProps<typeof inputOTPFieldVariants>\nexport type InputOTPFieldLabelVariantProps = VariantProps<typeof inputOTPFieldLabelVariants>\nexport type InputOTPFieldDescriptionVariantProps = VariantProps<typeof inputOTPFieldDescriptionVariants>\nexport type InputOTPFieldErrorVariantProps = VariantProps<typeof inputOTPFieldErrorVariants>\n"]}

package/dist/chunk-VKDN66VL.js

@@ -0,0 +1,129 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var flexVariants = cva("", {
+  variants: {
+    /**
+     * Display type
+     * - flex: Block-level flex container
+     * - inline: Inline-level flex container
+     */
+    display: {
+      flex: "flex",
+      inline: "inline-flex"
+    },
+    /**
+     * Flex direction
+     * - row: Items in a row (default)
+     * - row-reverse: Items in reverse row order
+     * - col: Items in a column
+     * - col-reverse: Items in reverse column order
+     */
+    direction: {
+      row: "flex-row",
+      "row-reverse": "flex-row-reverse",
+      col: "flex-col",
+      "col-reverse": "flex-col-reverse"
+    },
+    /**
+     * Main axis alignment (justify-content)
+     * - start: Items at the start
+     * - center: Items at the center
+     * - end: Items at the end
+     * - between: Space between items
+     * - around: Space around items
+     * - evenly: Equal space distribution
+     */
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    },
+    /**
+     * Cross axis alignment (align-items)
+     * - start: Items at the start
+     * - center: Items at the center
+     * - end: Items at the end
+     * - baseline: Items aligned by baseline
+     * - stretch: Items stretched to fill
+     */
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      baseline: "items-baseline",
+      stretch: "items-stretch"
+    },
+    /**
+     * Flex wrap behavior
+     * - true/wrap: Allow wrapping
+     * - false/nowrap: No wrapping
+     * - wrap-reverse: Wrap in reverse
+     */
+    wrap: {
+      true: "flex-wrap",
+      false: "flex-nowrap",
+      wrap: "flex-wrap",
+      nowrap: "flex-nowrap",
+      "wrap-reverse": "flex-wrap-reverse"
+    },
+    /**
+     * Gap between items
+     */
+    gap: {
+      0: "gap-0",
+      1: "gap-1",
+      2: "gap-2",
+      3: "gap-3",
+      4: "gap-4",
+      6: "gap-6",
+      8: "gap-8"
+    }
+  },
+  defaultVariants: {
+    display: "flex",
+    direction: "row",
+    justify: "start",
+    align: "stretch",
+    wrap: false
+  }
+});
+function Flex({
+  as: Component = "div",
+  inline = false,
+  direction,
+  justify,
+  align,
+  wrap,
+  gap,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: cn(
+        flexVariants({
+          display: inline ? "inline" : "flex",
+          direction,
+          justify,
+          align,
+          wrap,
+          gap
+        }),
+        className
+      ),
+      "data-slot": "flex",
+      ...props
+    }
+  );
+}
+
+export { Flex, flexVariants };
+//# sourceMappingURL=chunk-VKDN66VL.js.map
+//# sourceMappingURL=chunk-VKDN66VL.js.map

package/dist/chunk-VKDN66VL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Flex/Flex.variants.ts","../src/components/layout/Flex/Flex.tsx"],"names":[],"mappings":";;;;;AAMO,IAAM,YAAA,GAAe,IAAI,EAAA,EAAI;AAAA,EAClC,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMR,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,MAAA;AAAA,MACN,MAAA,EAAQ;AAAA,KACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,SAAA,EAAW;AAAA,MACT,GAAA,EAAK,UAAA;AAAA,MACL,aAAA,EAAe,kBAAA;AAAA,MACf,GAAA,EAAK,UAAA;AAAA,MACL,aAAA,EAAe;AAAA,KACjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,eAAA;AAAA,MACP,MAAA,EAAQ,gBAAA;AAAA,MACR,GAAA,EAAK,aAAA;AAAA,MACL,OAAA,EAAS,iBAAA;AAAA,MACT,MAAA,EAAQ,gBAAA;AAAA,MACR,MAAA,EAAQ;AAAA,KACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,KAAA,EAAO;AAAA,MACL,KAAA,EAAO,aAAA;AAAA,MACP,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAK,WAAA;AAAA,MACL,QAAA,EAAU,gBAAA;AAAA,MACV,OAAA,EAAS;AAAA,KACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,IAAA,EAAM;AAAA,MACJ,IAAA,EAAM,WAAA;AAAA,MACN,KAAA,EAAO,aAAA;AAAA,MACP,IAAA,EAAM,WAAA;AAAA,MACN,MAAA,EAAQ,aAAA;AAAA,MACR,cAAA,EAAgB;AAAA,KAClB;AAAA;AAAA;AAAA;AAAA,IAIA,GAAA,EAAK;AAAA,MACH,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG;AAAA;AACL,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,MAAA;AAAA,IACT,SAAA,EAAW,KAAA;AAAA,IACX,OAAA,EAAS,OAAA;AAAA,IACT,KAAA,EAAO,SAAA;AAAA,IACP,IAAA,EAAM;AAAA;AAEV,CAAC;AC1ED,SAAS,IAAA,CAAK;AAAA,EACZ,IAAI,SAAA,GAAY,KAAA;AAAA,EAChB,MAAA,GAAS,KAAA;AAAA,EACT,SAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAc;AACZ,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,YAAA,CAAa;AAAA,UACX,OAAA,EAAS,SAAS,QAAA,GAAW,MAAA;AAAA,UAC7B,SAAA;AAAA,UACA,OAAA;AAAA,UACA,KAAA;AAAA,UACA,IAAA;AAAA,UACA;AAAA,SACD,CAAA;AAAA,QACD;AAAA,OACF;AAAA,MACA,WAAA,EAAU,MAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-VKDN66VL.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Flex variant styles\n * Utility component for flexible box layouts\n */\nexport const flexVariants = cva(\"\", {\n  variants: {\n    /**\n     * Display type\n     * - flex: Block-level flex container\n     * - inline: Inline-level flex container\n     */\n    display: {\n      flex: \"flex\",\n      inline: \"inline-flex\",\n    },\n    /**\n     * Flex direction\n     * - row: Items in a row (default)\n     * - row-reverse: Items in reverse row order\n     * - col: Items in a column\n     * - col-reverse: Items in reverse column order\n     */\n    direction: {\n      row: \"flex-row\",\n      \"row-reverse\": \"flex-row-reverse\",\n      col: \"flex-col\",\n      \"col-reverse\": \"flex-col-reverse\",\n    },\n    /**\n     * Main axis alignment (justify-content)\n     * - start: Items at the start\n     * - center: Items at the center\n     * - end: Items at the end\n     * - between: Space between items\n     * - around: Space around items\n     * - evenly: Equal space distribution\n     */\n    justify: {\n      start: \"justify-start\",\n      center: \"justify-center\",\n      end: \"justify-end\",\n      between: \"justify-between\",\n      around: \"justify-around\",\n      evenly: \"justify-evenly\",\n    },\n    /**\n     * Cross axis alignment (align-items)\n     * - start: Items at the start\n     * - center: Items at the center\n     * - end: Items at the end\n     * - baseline: Items aligned by baseline\n     * - stretch: Items stretched to fill\n     */\n    align: {\n      start: \"items-start\",\n      center: \"items-center\",\n      end: \"items-end\",\n      baseline: \"items-baseline\",\n      stretch: \"items-stretch\",\n    },\n    /**\n     * Flex wrap behavior\n     * - true/wrap: Allow wrapping\n     * - false/nowrap: No wrapping\n     * - wrap-reverse: Wrap in reverse\n     */\n    wrap: {\n      true: \"flex-wrap\",\n      false: \"flex-nowrap\",\n      wrap: \"flex-wrap\",\n      nowrap: \"flex-nowrap\",\n      \"wrap-reverse\": \"flex-wrap-reverse\",\n    },\n    /**\n     * Gap between items\n     */\n    gap: {\n      0: \"gap-0\",\n      1: \"gap-1\",\n      2: \"gap-2\",\n      3: \"gap-3\",\n      4: \"gap-4\",\n      6: \"gap-6\",\n      8: \"gap-8\",\n    },\n  },\n  defaultVariants: {\n    display: \"flex\",\n    direction: \"row\",\n    justify: \"start\",\n    align: \"stretch\",\n    wrap: false,\n  },\n})\n\nexport type FlexVariantProps = VariantProps<typeof flexVariants>\n","import type { FlexProps } from \"./Flex.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { flexVariants } from \"./Flex.variants\"\n\n/**\n * Flex component for creating flexible box layouts\n *\n * A utility component that provides a declarative API for CSS Flexbox,\n * simplifying the creation of flexible and responsive layouts.\n *\n * @example\n * ```tsx\n * <Flex gap={4} justify=\"between\" align=\"center\">\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n * </Flex>\n * ```\n */\nfunction Flex({\n  as: Component = \"div\",\n  inline = false,\n  direction,\n  justify,\n  align,\n  wrap,\n  gap,\n  className,\n  ...props\n}: FlexProps) {\n  return (\n    <Component\n      className={cn(\n        flexVariants({\n          display: inline ? \"inline\" : \"flex\",\n          direction,\n          justify,\n          align,\n          wrap,\n          gap,\n        }),\n        className\n      )}\n      data-slot=\"flex\"\n      {...props}\n    />\n  )\n}\n\nexport { Flex }\n"]}