@clickhouse/click-ui 0.8.0 → 0.10.0-rc1

package/dist/esm/components/FileUpload/useDragAndDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDragAndDrop.js","sources":["../../../../src/components/FileUpload/useDragAndDrop.ts"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useCallback,\n  useEffect,\n  type DragEvent,\n  type RefObject,\n  type ChangeEvent,\n} from 'react';\n\nexport interface UseDragAndDropOptions {\n  onFilesProcessed: (files: File[]) => void;\n  supportedFileTypes: string[];\n  onFileFailure?: () => void;\n  multiple?: boolean;\n}\n\nexport interface UseDragAndDropReturn {\n  isDragging: boolean;\n  isNotSupported: boolean;\n  fileInputRef: RefObject<HTMLInputElement>;\n  handleDragEnter: (e: DragEvent<HTMLDivElement>) => void;\n  handleDragLeave: (e: DragEvent<HTMLDivElement>) => void;\n  handleDragOver: (e: DragEvent<HTMLDivElement>) => void;\n  handleDrop: (e: DragEvent<HTMLDivElement>) => void;\n  handleFileSelect: (e: ChangeEvent<HTMLInputElement>) => void;\n  handleBrowseClick: () => void;\n}\n\nconst isFiletypeSupported = (filename: string, supportedTypes: string[]): boolean => {\n  if (!supportedTypes.length) {\n    return true;\n  }\n\n  const extension = filename.toLowerCase().slice(filename.lastIndexOf('.'));\n  return supportedTypes.some(type => type.toLowerCase() === extension.toLowerCase());\n};\n\nexport const useDragAndDrop = ({\n  onFilesProcessed,\n  supportedFileTypes,\n  onFileFailure,\n  multiple = false,\n}: UseDragAndDropOptions): UseDragAndDropReturn => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [isNotSupported, setIsNotSupported] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const dragCounterRef = useRef(0);\n\n  useEffect(() => {\n    let timeoutId: NodeJS.Timeout;\n    if (isNotSupported) {\n      timeoutId = setTimeout(() => {\n        setIsNotSupported(false);\n      }, 2000);\n    }\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [isNotSupported]);\n\n  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    dragCounterRef.current += 1;\n    setIsDragging(true);\n  }, []);\n\n  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    dragCounterRef.current -= 1;\n\n    // Only set to false when left the container\n    if (dragCounterRef.current <= 0) {\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n    }\n  }, []);\n\n  const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n  }, []);\n\n  // Reset state when drag ends anywhere in the document\n  useEffect(() => {\n    const handleDragEnd = () => {\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n    };\n\n    window.addEventListener('dragend', handleDragEnd);\n    document.addEventListener('drop', handleDragEnd);\n    document.addEventListener('mouseleave', handleDragEnd);\n\n    return () => {\n      window.removeEventListener('dragend', handleDragEnd);\n      document.removeEventListener('drop', handleDragEnd);\n      document.removeEventListener('mouseleave', handleDragEnd);\n    };\n  }, []);\n\n  const processFiles = useCallback(\n    (files: File[]) => {\n      const validFiles: File[] = [];\n      let hasInvalidFile = false;\n\n      files.forEach(file => {\n        if (isFiletypeSupported(file.name, supportedFileTypes)) {\n          validFiles.push(file);\n        } else {\n          hasInvalidFile = true;\n        }\n      });\n\n      if (hasInvalidFile) {\n        setIsNotSupported(true);\n        if (onFileFailure) {\n          onFileFailure();\n        }\n      }\n\n      if (validFiles.length > 0) {\n        setIsNotSupported(false);\n        onFilesProcessed(validFiles);\n      }\n    },\n    [onFilesProcessed, supportedFileTypes, onFileFailure]\n  );\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        const files = Array.from(e.dataTransfer.files);\n        processFiles(multiple ? files : [files[0]]);\n      }\n    },\n    [processFiles, multiple]\n  );\n\n  const handleFileSelect = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        const files = Array.from(e.target.files);\n        processFiles(files);\n      }\n    },\n    [processFiles]\n  );\n\n  const handleBrowseClick = useCallback(() => {\n    if (fileInputRef.current) {\n      fileInputRef.current.click();\n    }\n  }, []);\n\n  return {\n    isDragging,\n    isNotSupported,\n    fileInputRef,\n    handleDragEnter,\n    handleDragLeave,\n    handleDragOver,\n    handleDrop,\n    handleFileSelect,\n    handleBrowseClick,\n  };\n};\n"],"names":["isFiletypeSupported","filename","supportedTypes","length","extension","toLowerCase","slice","lastIndexOf","some","type","useDragAndDrop","onFilesProcessed","supportedFileTypes","onFileFailure","multiple","isDragging","setIsDragging","useState","isNotSupported","setIsNotSupported","fileInputRef","useRef","dragCounterRef","useEffect","timeoutId","setTimeout","clearTimeout","handleDragEnter","useCallback","e","preventDefault","stopPropagation","current","handleDragLeave","handleDragOver","handleDragEnd","window","addEventListener","document","removeEventListener","processFiles","files","validFiles","hasInvalidFile","forEach","file","name","push","handleDrop","dataTransfer","Array","from","handleFileSelect","target","handleBrowseClick","click"],"mappings":"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"}
+{"version":3,"file":"useDragAndDrop.js","sources":["../../../../src/components/FileUpload/useDragAndDrop.ts"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useCallback,\n  useEffect,\n  type DragEvent,\n  type RefObject,\n  type ChangeEvent,\n} from 'react';\n\nexport interface UseDragAndDropOptions {\n  onFilesProcessed: (files: File[]) => void;\n  supportedFileTypes: string[];\n  onFileFailure?: () => void;\n  multiple?: boolean;\n}\n\nexport interface UseDragAndDropReturn {\n  isDragging: boolean;\n  isNotSupported: boolean;\n  fileInputRef: RefObject<HTMLInputElement>;\n  handleDragEnter: (e: DragEvent<HTMLDivElement>) => void;\n  handleDragLeave: (e: DragEvent<HTMLDivElement>) => void;\n  handleDragOver: (e: DragEvent<HTMLDivElement>) => void;\n  handleDrop: (e: DragEvent<HTMLDivElement>) => void;\n  handleFileSelect: (e: ChangeEvent<HTMLInputElement>) => void;\n  handleBrowseClick: () => void;\n}\n\nconst isFiletypeSupported = (filename: string, supportedTypes: string[]): boolean => {\n  if (!supportedTypes.length) {\n    return true;\n  }\n\n  const extension = filename.toLowerCase().slice(filename.lastIndexOf('.'));\n  return supportedTypes.some(type => type.toLowerCase() === extension.toLowerCase());\n};\n\nexport const useDragAndDrop = ({\n  onFilesProcessed,\n  supportedFileTypes,\n  onFileFailure,\n  multiple = false,\n}: UseDragAndDropOptions): UseDragAndDropReturn => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [isNotSupported, setIsNotSupported] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const dragCounterRef = useRef(0);\n\n  useEffect(() => {\n    let timeoutId: NodeJS.Timeout;\n    if (isNotSupported) {\n      timeoutId = setTimeout(() => {\n        setIsNotSupported(false);\n      }, 2000);\n    }\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [isNotSupported]);\n\n  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    dragCounterRef.current += 1;\n    setIsDragging(true);\n  }, []);\n\n  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    dragCounterRef.current -= 1;\n\n    // Only set to false when left the container\n    if (dragCounterRef.current <= 0) {\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n    }\n  }, []);\n\n  const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n  }, []);\n\n  // Reset state when drag ends anywhere in the document\n  useEffect(() => {\n    const handleDragEnd = () => {\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n    };\n\n    window.addEventListener('dragend', handleDragEnd);\n    document.addEventListener('drop', handleDragEnd);\n    document.addEventListener('mouseleave', handleDragEnd);\n\n    return () => {\n      window.removeEventListener('dragend', handleDragEnd);\n      document.removeEventListener('drop', handleDragEnd);\n      document.removeEventListener('mouseleave', handleDragEnd);\n    };\n  }, []);\n\n  const processFiles = useCallback(\n    (files: File[]) => {\n      const validFiles: File[] = [];\n      let hasInvalidFile = false;\n\n      files.forEach(file => {\n        if (isFiletypeSupported(file.name, supportedFileTypes)) {\n          validFiles.push(file);\n        } else {\n          hasInvalidFile = true;\n        }\n      });\n\n      if (hasInvalidFile) {\n        setIsNotSupported(true);\n        if (onFileFailure) {\n          onFileFailure();\n        }\n      }\n\n      if (validFiles.length > 0) {\n        setIsNotSupported(false);\n        onFilesProcessed(validFiles);\n      }\n    },\n    [onFilesProcessed, supportedFileTypes, onFileFailure]\n  );\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        const files = Array.from(e.dataTransfer.files);\n        processFiles(multiple ? files : [files[0]]);\n      }\n    },\n    [processFiles, multiple]\n  );\n\n  const handleFileSelect = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        const files = Array.from(e.target.files);\n        processFiles(files);\n      }\n    },\n    [processFiles]\n  );\n\n  const handleBrowseClick = useCallback(() => {\n    if (fileInputRef.current) {\n      fileInputRef.current.click();\n    }\n  }, []);\n\n  return {\n    isDragging,\n    isNotSupported,\n    fileInputRef,\n    handleDragEnter,\n    handleDragLeave,\n    handleDragOver,\n    handleDrop,\n    handleFileSelect,\n    handleBrowseClick,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/components/Flyout/Flyout.css

@@ -1,4 +1,4 @@
-@keyframes flyout-animation-width__LabkI {
+@layer clickui {@keyframes flyout-animation-width__LabkI {
   from {
     width: 0;
   }
@@ -229,3 +229,4 @@
   display: inline-block;
   max-width: calc(100% - 1rem);
 }
+}

package/dist/esm/components/Flyout/index.js

@@ -1,7 +1,7 @@
 import "./Flyout.css";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
-import { useTheme } from 'styled-components';
+import { useTheme } from '../../theme/ThemeContext.js';
 import { Dialog, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogClose, DialogTitle, DialogDescription } from '@radix-ui/react-dialog';
 import { CrossButton } from '../CrossButton/index.js';
 import { useResolvedPortalContainer } from '../../providers/PortalContext.js';
@@ -15,16 +15,16 @@ import { CodeBlock } from '../CodeBlock/index.js';
 import { Spacer } from '../Spacer/index.js';
 import { cva } from 'class-variance-authority';
 
-const Flyout = ({
-  modal = false,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(Dialog, { modal, ...props });
+const Flyout = ({ modal = false, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      modal,
+      ...props
+    }
+  );
 };
-const Trigger = ({
-  children,
-  ...props
-}) => {
+const Trigger = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { ...props, children }) });
 };
 Trigger.displayName = "Flyout.Trigger";
@@ -82,19 +82,23 @@ const Content = ({
   }, [width, size, style, theme]);
   return /* @__PURE__ */ jsxs(DialogPortal, { container: portalContainer, children: [
     showOverlay && /* @__PURE__ */ jsx(DialogOverlay, { className: "DialogOverlay" }),
-    /* @__PURE__ */ jsx(DialogContent, { onInteractOutside: (e) => {
-      if (!closeOnInteractOutside) {
-        e.preventDefault();
-      }
-      if (typeof onInteractOutside === "function") {
-        onInteractOutside(e);
+    /* @__PURE__ */ jsx(
+      DialogContent,
+      {
+        onInteractOutside: (e) => {
+          if (!closeOnInteractOutside) {
+            e.preventDefault();
+          }
+          if (typeof onInteractOutside === "function") {
+            onInteractOutside(e);
+          }
+        },
+        ...props,
+        style: mergedStyle,
+        className: cn(contentVariants({ type, strategy, align, hasShadow }), className),
+        children
       }
-    }, ...props, style: mergedStyle, className: cn(contentVariants({
-      type,
-      strategy,
-      align,
-      hasShadow
-    }), className), children })
+    )
   ] });
 };
 Content.displayName = "Flyout.Content";
@@ -110,13 +114,16 @@ const elementVariants = cva(styles.element, {
     type: "default"
   }
 });
-const Element = ({
-  type,
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx(Container, { orientation: "vertical", padding: "none", gap: "none", ...props, className: cn(elementVariants({
-  type
-}), className) });
+const Element = ({ type, className, ...props }) => /* @__PURE__ */ jsx(
+  Container,
+  {
+    orientation: "vertical",
+    padding: "none",
+    gap: "none",
+    ...props,
+    className: cn(elementVariants({ type }), className)
+  }
+);
 Element.displayName = "Flyout.Element";
 Flyout.Element = Element;
 const headerVariants = cva(styles.header, {
@@ -164,30 +171,88 @@ const Header = ({
 }) => {
   if (children) {
     return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-      /* @__PURE__ */ jsxs(Container, { justifyContent: "space-between", alignItems: "start", padding: "none", gap: "none", fillWidth: false, isResponsive: false, ...props, className: cn(headerVariants({
-        type
-      }), className), children: [
-        /* @__PURE__ */ jsx(Container, { padding: "none", gap: "none", orientation: "vertical", grow: "1", children }),
-        showClose && /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: type === "inline" ? "md" : "lg" }) }) })
-      ] }),
-      showSeparator && /* @__PURE__ */ jsx(Separator, { "data-testid": "flyout-header-separator", size: "lg" })
+      /* @__PURE__ */ jsxs(
+        Container,
+        {
+          justifyContent: "space-between",
+          alignItems: "start",
+          padding: "none",
+          gap: "none",
+          fillWidth: false,
+          isResponsive: false,
+          ...props,
+          className: cn(headerVariants({ type }), className),
+          children: [
+            /* @__PURE__ */ jsx(
+              Container,
+              {
+                padding: "none",
+                gap: "none",
+                orientation: "vertical",
+                grow: "1",
+                children
+              }
+            ),
+            showClose && /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsx(
+              SvgImage,
+              {
+                name: "cross",
+                size: type === "inline" ? "md" : "lg"
+              }
+            ) }) })
+          ]
+        }
+      ),
+      showSeparator && /* @__PURE__ */ jsx(
+        Separator,
+        {
+          "data-testid": "flyout-header-separator",
+          size: "lg"
+        }
+      )
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-    /* @__PURE__ */ jsxs(Container, { justifyContent: "space-between", alignItems: "start", fillWidth: false, isResponsive: false, ...props, className: cn(headerVariants({
-      type
-    }), className), children: [
-      /* @__PURE__ */ jsxs(Container, { padding: "none", gap: "none", orientation: "vertical", grow: "1", children: [
-        /* @__PURE__ */ jsx(DialogTitle, { className: cn(titleVariants({
-          type
-        })), children: title }),
-        description && /* @__PURE__ */ jsx(DialogDescription, { className: cn(descriptionVariants({
-          type
-        })), children: description })
-      ] }),
-      showClose && /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: type === "inline" ? "md" : "lg" }) }) })
-    ] }),
-    showSeparator && /* @__PURE__ */ jsx(Separator, { "data-testid": "flyout-header-separator", size: "lg" })
+    /* @__PURE__ */ jsxs(
+      Container,
+      {
+        justifyContent: "space-between",
+        alignItems: "start",
+        fillWidth: false,
+        isResponsive: false,
+        ...props,
+        className: cn(headerVariants({ type }), className),
+        children: [
+          /* @__PURE__ */ jsxs(
+            Container,
+            {
+              padding: "none",
+              gap: "none",
+              orientation: "vertical",
+              grow: "1",
+              children: [
+                /* @__PURE__ */ jsx(DialogTitle, { className: cn(titleVariants({ type })), children: title }),
+                description && /* @__PURE__ */ jsx(DialogDescription, { className: cn(descriptionVariants({ type })), children: description })
+              ]
+            }
+          ),
+          showClose && /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsx(
+            SvgImage,
+            {
+              name: "cross",
+              size: type === "inline" ? "md" : "lg"
+            }
+          ) }) })
+        ]
+      }
+    ),
+    showSeparator && /* @__PURE__ */ jsx(
+      Separator,
+      {
+        "data-testid": "flyout-header-separator",
+        size: "lg"
+      }
+    )
   ] });
 };
 Header.displayName = "Flyout.Header";
@@ -203,13 +268,16 @@ const bodyVariants = cva(styles.body, {
     align: "default"
   }
 });
-const Body = ({
-  align,
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx(Container, { overflow: "auto", orientation: "vertical", grow: "1", ...props, className: cn(bodyVariants({
-  align
-}), className) });
+const Body = ({ align, className, ...props }) => /* @__PURE__ */ jsx(
+  Container,
+  {
+    overflow: "auto",
+    orientation: "vertical",
+    grow: "1",
+    ...props,
+    className: cn(bodyVariants({ align }), className)
+  }
+);
 Body.displayName = "Flyout.Body";
 Flyout.Body = Body;
 const footerVariants = cva(styles.footer, {
@@ -227,21 +295,41 @@ const FlyoutClose = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: children ?? /* @__PURE__ */ jsx(Button, { type: "secondary", ...props }) });
+  return /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: children ?? /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "secondary",
+      ...props
+    }
+  ) });
 };
 FlyoutClose.displayName = "Flyout.Close";
 Flyout.Close = FlyoutClose;
-const Footer = ({
-  type,
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs(Container, { gap: "none", orientation: "vertical", alignItems: "end", className: styles["footer-container"], children: [
-    /* @__PURE__ */ jsx(Separator, { size: "xs" }),
-    /* @__PURE__ */ jsx(Container, { justifyContent: "end", gap: "none", padding: "none", isResponsive: false, wrap: "wrap", ...props, className: cn(footerVariants({
-      type
-    }), className) })
-  ] });
+const Footer = ({ type, className, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      gap: "none",
+      orientation: "vertical",
+      alignItems: "end",
+      className: styles["footer-container"],
+      children: [
+        /* @__PURE__ */ jsx(Separator, { size: "xs" }),
+        /* @__PURE__ */ jsx(
+          Container,
+          {
+            justifyContent: "end",
+            gap: "none",
+            padding: "none",
+            isResponsive: false,
+            wrap: "wrap",
+            ...props,
+            className: cn(footerVariants({ type }), className)
+          }
+        )
+      ]
+    }
+  );
 };
 Footer.displayName = "Flyout.Footer";
 Flyout.Footer = Footer;
@@ -256,10 +344,29 @@ const FlyoutCodeBlock = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(Element, { fillHeight: true, ...props, children: [
-    /* @__PURE__ */ jsx(CodeBlock, { className: cn(styles["code-block"], className), wrapLines, language, showLineNumbers, showWrapButton, onCopy, onCopyError, children: statement }),
-    /* @__PURE__ */ jsx(Spacer, { size: "xs" })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Element,
+    {
+      fillHeight: true,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          CodeBlock,
+          {
+            className: cn(styles["code-block"], className),
+            wrapLines,
+            language,
+            showLineNumbers,
+            showWrapButton,
+            onCopy,
+            onCopyError,
+            children: statement
+          }
+        ),
+        /* @__PURE__ */ jsx(Spacer, { size: "xs" })
+      ]
+    }
+  );
 };
 Flyout.CodeBlock = FlyoutCodeBlock;
 

package/dist/esm/components/Flyout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Flyout/Flyout.tsx"],"sourcesContent":["import { CSSProperties, ReactNode, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n} from '@radix-ui/react-dialog';\nimport { Button } from '@/components/Button';\nimport type { ButtonProps } from '@/components/Button';\nimport { CodeBlock } from '@/components/CodeBlock';\nimport { Container } from '@/components/Container';\nimport type { ContainerProps } from '@/components/Container';\nimport { Icon } from '@/components/Icon';\nimport { Separator } from '@/components/Separator';\nimport { Spacer } from '@/components/Spacer';\nimport { CrossButton } from '@/components/CrossButton';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Flyout.module.css';\nimport type {\n  FlyoutProps,\n  FlyoutTriggerProps,\n  FlyoutContentProps,\n  FlyoutHeaderProps,\n  FlyoutFooterProps,\n  FlyoutType,\n} from './Flyout.types';\n\nexport const Flyout = ({ modal = false, ...props }: FlyoutProps) => {\n  return (\n    <Dialog\n      modal={modal}\n      {...props}\n    />\n  );\n};\n\nconst Trigger = ({ children, ...props }: FlyoutTriggerProps) => {\n  return (\n    <DialogTrigger asChild>\n      <div {...props}>{children}</div>\n    </DialogTrigger>\n  );\n};\nTrigger.displayName = 'Flyout.Trigger';\nFlyout.Trigger = Trigger;\n\nconst contentVariants = cva(styles.content, {\n  variants: {\n    type: {\n      default: styles.content_type_default,\n      inline: styles.content_type_inline,\n    },\n    strategy: {\n      relative: styles.content_strategy_relative,\n      absolute: styles.content_strategy_absolute,\n      fixed: styles.content_strategy_fixed,\n    },\n    align: {\n      start: styles.content_align_start,\n      end: styles.content_align_end,\n    },\n    hasShadow: {\n      true: '',\n      false: styles['content_no-shadow'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n    align: 'end',\n    hasShadow: true,\n  },\n});\n\nconst Content = ({\n  showOverlay = false,\n  children,\n  container,\n  strategy = 'relative',\n  size = 'default',\n  type = 'default',\n  closeOnInteractOutside = false,\n  width,\n  align = 'end',\n  hasShadow = true,\n  onInteractOutside,\n  className,\n  style,\n  ...props\n}: FlyoutContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n  const theme = useTheme();\n\n  const mergedStyle = useMemo(() => {\n    // Resolve the default width from the typed theme so an invalid `size`\n    // fails at compile time, rather than silently emitting a non-existent\n    // CSS variable. A non-empty `width` prop always wins; `||` (matching the\n    // pre-migration styled version) also falls back on an empty-string width.\n    const resolvedWidth = width || theme.click.flyout.size[size].width;\n\n    return {\n      '--flyout-width': resolvedWidth,\n      ...style,\n    } as CSSProperties;\n  }, [width, size, style, theme]);\n\n  return (\n    <DialogPortal container={portalContainer}>\n      {showOverlay && <DialogOverlay className=\"DialogOverlay\" />}\n      <DialogContent\n        onInteractOutside={e => {\n          if (!closeOnInteractOutside) {\n            e.preventDefault();\n          }\n          if (typeof onInteractOutside === 'function') {\n            onInteractOutside(e);\n          }\n        }}\n        {...props}\n        style={mergedStyle}\n        className={cn(contentVariants({ type, strategy, align, hasShadow }), className)}\n      >\n        {children}\n      </DialogContent>\n    </DialogPortal>\n  );\n};\nContent.displayName = 'Flyout.Content';\nFlyout.Content = Content;\n\nconst elementVariants = cva(styles.element, {\n  variants: {\n    type: {\n      default: styles.element_type_default,\n      inline: styles.element_type_inline,\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\ninterface ElementProps extends Omit<\n  ContainerProps,\n  'component' | 'padding' | 'gap' | 'orientation'\n> {\n  type?: FlyoutType;\n  className?: string;\n}\n\nconst Element = ({ type, className, ...props }: ElementProps) => (\n  <Container\n    orientation=\"vertical\"\n    padding=\"none\"\n    gap=\"none\"\n    {...props}\n    className={cn(elementVariants({ type }), className)}\n  />\n);\n\nElement.displayName = 'Flyout.Element';\nFlyout.Element = Element;\n\nconst headerVariants = cva(styles.header, {\n  variants: {\n    type: {\n      default: styles.header_type_default,\n      inline: styles.header_type_inline,\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\nconst titleVariants = cva(styles.title, {\n  variants: {\n    type: {\n      default: styles.title_type_default,\n      inline: styles.title_type_inline,\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\nconst descriptionVariants = cva(styles.description, {\n  variants: {\n    type: {\n      default: styles.description_type_default,\n      inline: styles.description_type_inline,\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\nconst Header = ({\n  title,\n  description,\n  type,\n  children,\n  showClose = true,\n  showSeparator = true,\n  className,\n  ...props\n}: FlyoutHeaderProps) => {\n  if (children) {\n    return (\n      <div className={styles.container}>\n        <Container\n          justifyContent=\"space-between\"\n          alignItems=\"start\"\n          padding=\"none\"\n          gap=\"none\"\n          fillWidth={false}\n          isResponsive={false}\n          {...props}\n          className={cn(headerVariants({ type }), className)}\n        >\n          <Container\n            padding=\"none\"\n            gap=\"none\"\n            orientation=\"vertical\"\n            grow=\"1\"\n          >\n            {children}\n          </Container>\n          {showClose && (\n            <DialogClose asChild>\n              <CrossButton data-testid=\"flyout-header-close-btn\">\n                <Icon\n                  name=\"cross\"\n                  size={type === 'inline' ? 'md' : 'lg'}\n                />\n              </CrossButton>\n            </DialogClose>\n          )}\n        </Container>\n        {showSeparator && (\n          <Separator\n            data-testid=\"flyout-header-separator\"\n            size=\"lg\"\n          />\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles.container}>\n      <Container\n        justifyContent=\"space-between\"\n        alignItems=\"start\"\n        fillWidth={false}\n        isResponsive={false}\n        {...props}\n        className={cn(headerVariants({ type }), className)}\n      >\n        <Container\n          padding=\"none\"\n          gap=\"none\"\n          orientation=\"vertical\"\n          grow=\"1\"\n        >\n          <DialogTitle className={cn(titleVariants({ type }))}>{title}</DialogTitle>\n          {description && (\n            <DialogDescription className={cn(descriptionVariants({ type }))}>\n              {description}\n            </DialogDescription>\n          )}\n        </Container>\n        {showClose && (\n          <DialogClose asChild>\n            <CrossButton data-testid=\"flyout-header-close-btn\">\n              <Icon\n                name=\"cross\"\n                size={type === 'inline' ? 'md' : 'lg'}\n              />\n            </CrossButton>\n          </DialogClose>\n        )}\n      </Container>\n      {showSeparator && (\n        <Separator\n          data-testid=\"flyout-header-separator\"\n          size=\"lg\"\n        />\n      )}\n    </div>\n  );\n};\nHeader.displayName = 'Flyout.Header';\nFlyout.Header = Header;\n\ntype FlyoutAlign = 'default' | 'top';\n\nconst bodyVariants = cva(styles.body, {\n  variants: {\n    align: {\n      default: styles.body_align_default,\n      top: styles.body_align_top,\n    },\n  },\n  defaultVariants: {\n    align: 'default',\n  },\n});\n\ninterface BodyProps extends ContainerProps {\n  align?: FlyoutAlign;\n  className?: string;\n}\n\nconst Body = ({ align, className, ...props }: BodyProps) => (\n  <Container\n    overflow=\"auto\"\n    orientation=\"vertical\"\n    grow=\"1\"\n    {...props}\n    className={cn(bodyVariants({ align }), className)}\n  />\n);\n\nBody.displayName = 'Flyout.Body';\nFlyout.Body = Body;\n\nconst footerVariants = cva(styles.footer, {\n  variants: {\n    type: {\n      default: styles.footer_type_default,\n      inline: styles.footer_type_inline,\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\ninterface FlyoutButtonProps extends Omit<ButtonProps, 'children'> {\n  children?: never;\n}\n\nconst FlyoutClose = ({\n  children,\n  ...props\n}: FlyoutButtonProps | { children?: ReactNode }) => {\n  return (\n    <DialogClose asChild>\n      {children ?? (\n        <Button\n          type=\"secondary\"\n          {...props}\n        />\n      )}\n    </DialogClose>\n  );\n};\nFlyoutClose.displayName = 'Flyout.Close';\nFlyout.Close = FlyoutClose;\n\nconst Footer = ({ type, className, ...props }: FlyoutFooterProps) => {\n  return (\n    <Container\n      gap=\"none\"\n      orientation=\"vertical\"\n      alignItems=\"end\"\n      className={styles['footer-container']}\n    >\n      <Separator size=\"xs\" />\n      <Container\n        justifyContent=\"end\"\n        gap=\"none\"\n        padding=\"none\"\n        isResponsive={false}\n        wrap=\"wrap\"\n        {...props}\n        className={cn(footerVariants({ type }), className)}\n      />\n    </Container>\n  );\n};\nFooter.displayName = 'Flyout.Footer';\nFlyout.Footer = Footer;\n\ninterface FlyoutCodeBlockProps extends ContainerProps {\n  language?: string;\n  statement: string;\n  showLineNumbers?: boolean;\n  showWrapButton?: boolean;\n  wrapLines?: boolean;\n  onCopy?: (value: string) => void | Promise<void>;\n  onCopyError?: (error: string) => void | Promise<void>;\n}\nconst FlyoutCodeBlock = ({\n  statement,\n  language,\n  wrapLines,\n  showLineNumbers,\n  showWrapButton,\n  onCopy,\n  onCopyError,\n  className,\n  ...props\n}: FlyoutCodeBlockProps & ElementProps) => {\n  return (\n    <Element\n      fillHeight\n      {...props}\n    >\n      <CodeBlock\n        className={cn(styles['code-block'], className)}\n        wrapLines={wrapLines}\n        language={language}\n        showLineNumbers={showLineNumbers}\n        showWrapButton={showWrapButton}\n        onCopy={onCopy}\n        onCopyError={onCopyError}\n      >\n        {statement}\n      </CodeBlock>\n      <Spacer size=\"xs\" />\n    </Element>\n  );\n};\n\nFlyout.CodeBlock = FlyoutCodeBlock;\n"],"names":["Flyout","modal","props","Trigger","children","displayName","contentVariants","cva","styles","content","variants","type","default","content_type_default","inline","content_type_inline","strategy","relative","content_strategy_relative","absolute","content_strategy_absolute","fixed","content_strategy_fixed","align","start","content_align_start","end","content_align_end","hasShadow","true","false","defaultVariants","Content","showOverlay","container","size","closeOnInteractOutside","width","onInteractOutside","className","style","portalContainer","useResolvedPortalContainer","theme","useTheme","mergedStyle","useMemo","resolvedWidth","click","flyout","e","preventDefault","cn","elementVariants","element","element_type_default","element_type_inline","Element","headerVariants","header","header_type_default","header_type_inline","titleVariants","title","title_type_default","title_type_inline","descriptionVariants","description","description_type_default","description_type_inline","Header","showClose","showSeparator","Icon","bodyVariants","body","body_align_default","top","body_align_top","Body","footerVariants","footer","footer_type_default","footer_type_inline","FlyoutClose","Close","Footer","FlyoutCodeBlock","statement","language","wrapLines","showLineNumbers","showWrapButton","onCopy","onCopyError","CodeBlock"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Flyout/Flyout.tsx"],"sourcesContent":["import { CSSProperties, ReactNode, useMemo } from 'react';\nimport { useTheme } from '@/theme/ThemeContext';\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n} from '@radix-ui/react-dialog';\nimport { Button } from '@/components/Button';\nimport type { ButtonProps } from '@/components/Button';\nimport { CodeBlock } from '@/components/CodeBlock';\nimport { Container } from '@/components/Container';\nimport type { ContainerProps } from '@/components/Container';\nimport { Icon } from '@/components/Icon';\nimport { Separator } from '@/components/Separator';\nimport { Spacer } from '@/components/Spacer';\nimport { CrossButton } from '@/components/CrossButton';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Flyout.module.css';\nimport type {\n  FlyoutProps,\n  FlyoutTriggerProps,\n  FlyoutContentProps,\n  FlyoutHeaderProps,\n  FlyoutFooterProps,\n  FlyoutType,\n} from './Flyout.types';\n\nexport const Flyout = ({ modal = false, ...props }: FlyoutProps) => {\n  return (\n    <Dialog\n      modal={modal}\n      {...props}\n    />\n  );\n};\n\nconst Trigger = ({ children, ...props }: FlyoutTriggerProps) => {\n  return (\n    <DialogTrigger asChild>\n      <div {...props}>{children}</div>\n    </DialogTrigger>\n  );\n};\nTrigger.displayName = 'Flyout.Trigger';\nFlyout.Trigger = Trigger;\n\nconst contentVariants = cva(styles.content, {\n  variants: {\n    type: {\n      default: styles.content_type_default,\n      inline: styles.content_type_inline,\n    },\n    strategy: {\n      relative: styles.content_strategy_relative,\n      absolute: styles.content_strategy_absolute,\n      fixed: styles.content_strategy_fixed,\n    },\n    align: {\n      start: styles.content_align_start,\n      end: styles.content_align_end,\n    },\n    hasShadow: {\n      true: '',\n      false: styles['content_no-shadow'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n    align: 'end',\n    hasShadow: true,\n  },\n});\n\nconst Content = ({\n  showOverlay = false,\n  children,\n  container,\n  strategy = 'relative',\n  size = 'default',\n  type = 'default',\n  closeOnInteractOutside = false,\n  width,\n  align = 'end',\n  hasShadow = true,\n  onInteractOutside,\n  className,\n  style,\n  ...props\n}: FlyoutContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n  const theme = useTheme();\n\n  const mergedStyle = useMemo(() => {\n    // Resolve the default width from the typed theme so an invalid `size`\n    // fails at compile time, rather than silently emitting a non-existent\n    // CSS variable. A non-empty `width` prop always wins; `||` (matching the\n    // pre-migration styled version) also falls back on an empty-string width.\n    const resolvedWidth = width || theme.click.flyout.size[size].width;\n\n    return {\n      '--flyout-width': resolvedWidth,\n      ...style,\n    } as CSSProperties;\n  }, [width, size, style, theme]);\n\n  return (\n    <DialogPortal container={portalContainer}>\n      {showOverlay && <DialogOverlay className=\"DialogOverlay\" />}\n      <DialogContent\n        onInteractOutside={e => {\n          if (!closeOnInteractOutside) {\n            e.preventDefault();\n          }\n          if (typeof onInteractOutside === 'function') {\n            onInteractOutside(e);\n          }\n        }}\n        {...props}\n        style={mergedStyle}\n        className={cn(contentVariants({ type, strategy, align, hasShadow }), className)}\n      >\n        {children}\n      </DialogContent>\n    </DialogPortal>\n  );\n};\nContent.displayName = 'Flyout.Content';\nFlyout.Content = Content;\n\nconst elementVariants = cva(styles.element, {\n  variants: {\n    type: {\n      default: styles.element_type_default,\n      inline: styles.element_type_inline,\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\ninterface ElementProps extends Omit<\n  ContainerProps,\n  'component' | 'padding' | 'gap' | 'orientation'\n> {\n  type?: FlyoutType;\n  className?: string;\n}\n\nconst Element = ({ type, className, ...props }: ElementProps) => (\n  <Container\n    orientation=\"vertical\"\n    padding=\"none\"\n    gap=\"none\"\n    {...props}\n    className={cn(elementVariants({ type }), className)}\n  />\n);\n\nElement.displayName = 'Flyout.Element';\nFlyout.Element = Element;\n\nconst headerVariants = cva(styles.header, {\n  variants: {\n    type: {\n      default: styles.header_type_default,\n      inline: styles.header_type_inline,\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\nconst titleVariants = cva(styles.title, {\n  variants: {\n    type: {\n      default: styles.title_type_default,\n      inline: styles.title_type_inline,\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\nconst descriptionVariants = cva(styles.description, {\n  variants: {\n    type: {\n      default: styles.description_type_default,\n      inline: styles.description_type_inline,\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\nconst Header = ({\n  title,\n  description,\n  type,\n  children,\n  showClose = true,\n  showSeparator = true,\n  className,\n  ...props\n}: FlyoutHeaderProps) => {\n  if (children) {\n    return (\n      <div className={styles.container}>\n        <Container\n          justifyContent=\"space-between\"\n          alignItems=\"start\"\n          padding=\"none\"\n          gap=\"none\"\n          fillWidth={false}\n          isResponsive={false}\n          {...props}\n          className={cn(headerVariants({ type }), className)}\n        >\n          <Container\n            padding=\"none\"\n            gap=\"none\"\n            orientation=\"vertical\"\n            grow=\"1\"\n          >\n            {children}\n          </Container>\n          {showClose && (\n            <DialogClose asChild>\n              <CrossButton data-testid=\"flyout-header-close-btn\">\n                <Icon\n                  name=\"cross\"\n                  size={type === 'inline' ? 'md' : 'lg'}\n                />\n              </CrossButton>\n            </DialogClose>\n          )}\n        </Container>\n        {showSeparator && (\n          <Separator\n            data-testid=\"flyout-header-separator\"\n            size=\"lg\"\n          />\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles.container}>\n      <Container\n        justifyContent=\"space-between\"\n        alignItems=\"start\"\n        fillWidth={false}\n        isResponsive={false}\n        {...props}\n        className={cn(headerVariants({ type }), className)}\n      >\n        <Container\n          padding=\"none\"\n          gap=\"none\"\n          orientation=\"vertical\"\n          grow=\"1\"\n        >\n          <DialogTitle className={cn(titleVariants({ type }))}>{title}</DialogTitle>\n          {description && (\n            <DialogDescription className={cn(descriptionVariants({ type }))}>\n              {description}\n            </DialogDescription>\n          )}\n        </Container>\n        {showClose && (\n          <DialogClose asChild>\n            <CrossButton data-testid=\"flyout-header-close-btn\">\n              <Icon\n                name=\"cross\"\n                size={type === 'inline' ? 'md' : 'lg'}\n              />\n            </CrossButton>\n          </DialogClose>\n        )}\n      </Container>\n      {showSeparator && (\n        <Separator\n          data-testid=\"flyout-header-separator\"\n          size=\"lg\"\n        />\n      )}\n    </div>\n  );\n};\nHeader.displayName = 'Flyout.Header';\nFlyout.Header = Header;\n\ntype FlyoutAlign = 'default' | 'top';\n\nconst bodyVariants = cva(styles.body, {\n  variants: {\n    align: {\n      default: styles.body_align_default,\n      top: styles.body_align_top,\n    },\n  },\n  defaultVariants: {\n    align: 'default',\n  },\n});\n\ninterface BodyProps extends ContainerProps {\n  align?: FlyoutAlign;\n  className?: string;\n}\n\nconst Body = ({ align, className, ...props }: BodyProps) => (\n  <Container\n    overflow=\"auto\"\n    orientation=\"vertical\"\n    grow=\"1\"\n    {...props}\n    className={cn(bodyVariants({ align }), className)}\n  />\n);\n\nBody.displayName = 'Flyout.Body';\nFlyout.Body = Body;\n\nconst footerVariants = cva(styles.footer, {\n  variants: {\n    type: {\n      default: styles.footer_type_default,\n      inline: styles.footer_type_inline,\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\ninterface FlyoutButtonProps extends Omit<ButtonProps, 'children'> {\n  children?: never;\n}\n\nconst FlyoutClose = ({\n  children,\n  ...props\n}: FlyoutButtonProps | { children?: ReactNode }) => {\n  return (\n    <DialogClose asChild>\n      {children ?? (\n        <Button\n          type=\"secondary\"\n          {...props}\n        />\n      )}\n    </DialogClose>\n  );\n};\nFlyoutClose.displayName = 'Flyout.Close';\nFlyout.Close = FlyoutClose;\n\nconst Footer = ({ type, className, ...props }: FlyoutFooterProps) => {\n  return (\n    <Container\n      gap=\"none\"\n      orientation=\"vertical\"\n      alignItems=\"end\"\n      className={styles['footer-container']}\n    >\n      <Separator size=\"xs\" />\n      <Container\n        justifyContent=\"end\"\n        gap=\"none\"\n        padding=\"none\"\n        isResponsive={false}\n        wrap=\"wrap\"\n        {...props}\n        className={cn(footerVariants({ type }), className)}\n      />\n    </Container>\n  );\n};\nFooter.displayName = 'Flyout.Footer';\nFlyout.Footer = Footer;\n\ninterface FlyoutCodeBlockProps extends ContainerProps {\n  language?: string;\n  statement: string;\n  showLineNumbers?: boolean;\n  showWrapButton?: boolean;\n  wrapLines?: boolean;\n  onCopy?: (value: string) => void | Promise<void>;\n  onCopyError?: (error: string) => void | Promise<void>;\n}\nconst FlyoutCodeBlock = ({\n  statement,\n  language,\n  wrapLines,\n  showLineNumbers,\n  showWrapButton,\n  onCopy,\n  onCopyError,\n  className,\n  ...props\n}: FlyoutCodeBlockProps & ElementProps) => {\n  return (\n    <Element\n      fillHeight\n      {...props}\n    >\n      <CodeBlock\n        className={cn(styles['code-block'], className)}\n        wrapLines={wrapLines}\n        language={language}\n        showLineNumbers={showLineNumbers}\n        showWrapButton={showWrapButton}\n        onCopy={onCopy}\n        onCopyError={onCopyError}\n      >\n        {statement}\n      </CodeBlock>\n      <Spacer size=\"xs\" />\n    </Element>\n  );\n};\n\nFlyout.CodeBlock = FlyoutCodeBlock;\n"],"names":["Icon"],"mappings":"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"}

package/dist/esm/components/FormContainer/Error.css

@@ -1,4 +1,5 @@
-.error__Wvrfq {
+@layer clickui {.error__Wvrfq {
   color: var(--click-field-color-label-error);
   font: var(--click-field-typography-label-error);
 }
+}

package/dist/esm/components/FormContainer/Error.js

@@ -3,10 +3,13 @@ import { jsx } from 'react/jsx-runtime';
 import { cn } from '../../lib/cva.js';
 import styles from './Error.module.css.js';
 
-const Error = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx("div", { ...props, className: cn(styles.error, className) });
+const Error = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...props,
+    className: cn(styles.error, className)
+  }
+);
 
 export { Error };
 //# sourceMappingURL=Error.js.map

package/dist/esm/components/FormContainer/Error.js.map

@@ -1 +1 @@
-{"version":3,"file":"Error.js","sources":["../../../../src/components/FormContainer/Error.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './Error.module.css';\n\nexport const Error = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    {...props}\n    className={cn(styles.error, className)}\n  />\n);\n"],"names":["Error","className","props","cn","styles","error"],"mappings":";;;;AAIO,MAAMA,QAAQA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAAW,GAAGC;AAAsC,CAAA,qBAC1E,GAAA,CAAC,SACC,GAAIA,KAAAA,EACJ,WAAWC,EAAAA,CAAGC,MAAAA,CAAOC,KAAAA,EAAOJ,SAAS,CAAA,EAAE;;;;"}
+{"version":3,"file":"Error.js","sources":["../../../../src/components/FormContainer/Error.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './Error.module.css';\n\nexport const Error = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    {...props}\n    className={cn(styles.error, className)}\n  />\n);\n"],"names":[],"mappings":";;;;AAIO,MAAM,QAAQ,CAAC,EAAE,SAAA,EAAW,GAAG,OAAM,qBAC1C,GAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACE,GAAG,KAAA;AAAA,IACJ,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,KAAA,EAAO,SAAS;AAAA;AACvC;;;;"}

package/dist/esm/components/FormContainer/FormElementContainer.css

@@ -1,4 +1,4 @@
-.form-element-container__cy-tb {
+@layer clickui {.form-element-container__cy-tb {
   display: flex;
   /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
    width fallback chain (100% → -webkit-fill-available → fill-available →
@@ -12,3 +12,4 @@
   align-items: flex-start;
   gap: var(--click-field-space-gap);
 }
+}

package/dist/esm/components/FormContainer/FormElementContainer.js

@@ -6,7 +6,13 @@ import styles from './FormElementContainer.module.css.js';
 const FormElementContainer = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx("div", { ...props, className: cn(styles["form-element-container"], className) });
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...props,
+    className: cn(styles["form-element-container"], className)
+  }
+);
 
 export { FormElementContainer };
 //# sourceMappingURL=FormElementContainer.js.map

package/dist/esm/components/FormContainer/FormElementContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementContainer.js","sources":["../../../../src/components/FormContainer/FormElementContainer.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './FormElementContainer.module.css';\n\nexport const FormElementContainer = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    {...props}\n    className={cn(styles['form-element-container'], className)}\n  />\n);\n"],"names":["FormElementContainer","className","props","cn","styles"],"mappings":";;;;AAIO,MAAMA,uBAAuBA,CAAC;AAAA,EACnCC,SAAAA;AAAAA,EACA,GAAGC;AAC2B,CAAA,qBAC9B,GAAA,CAAC,KAAA,EAAA,EACC,GAAIA,KAAAA,EACJ,SAAA,EAAWC,GAAGC,MAAAA,CAAO,wBAAwB,CAAA,EAAGH,SAAS,CAAA,EAAE;;;;"}
+{"version":3,"file":"FormElementContainer.js","sources":["../../../../src/components/FormContainer/FormElementContainer.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './FormElementContainer.module.css';\n\nexport const FormElementContainer = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    {...props}\n    className={cn(styles['form-element-container'], className)}\n  />\n);\n"],"names":[],"mappings":";;;;AAIO,MAAM,uBAAuB,CAAC;AAAA,EACnC,SAAA;AAAA,EACA,GAAG;AACL,CAAA,qBACE,GAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACE,GAAG,KAAA;AAAA,IACJ,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,wBAAwB,GAAG,SAAS;AAAA;AAC3D;;;;"}

package/dist/esm/components/FormContainer/FormRoot.css

@@ -1,4 +1,4 @@
-.form-root__BT-Th {
+@layer clickui {.form-root__BT-Th {
   display: flex;
   width: 100%;
   flex-direction: column-reverse;
@@ -31,3 +31,4 @@
   padding-top: calc(var(--click-field-space-y) + 1px);
   line-height: 1lh;
 }
+}

package/dist/esm/components/FormContainer/FormRoot.js

@@ -29,10 +29,19 @@ const FormRoot = ({
   $addLabelPadding = false,
   className,
   ...props
-}) => /* @__PURE__ */ jsx("div", { ...props, className: cn(formRootVariants({
-  direction: getDirection($orientation, $dir),
-  addLabelPadding: $addLabelPadding && $orientation === "horizontal"
-}), className) });
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...props,
+    className: cn(
+      formRootVariants({
+        direction: getDirection($orientation, $dir),
+        addLabelPadding: $addLabelPadding && $orientation === "horizontal"
+      }),
+      className
+    )
+  }
+);
 
 export { FormRoot };
 //# sourceMappingURL=FormRoot.js.map

package/dist/esm/components/FormContainer/FormRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormRoot.js","sources":["../../../../src/components/FormContainer/FormRoot.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './FormRoot.module.css';\n\nconst formRootVariants = cva(styles['form-root'], {\n  variants: {\n    direction: {\n      'column-reverse': styles['form-root_direction_column-reverse'],\n      column: styles['form-root_direction_column'],\n      'row-reverse': styles['form-root_direction_row-reverse'],\n      row: styles['form-root_direction_row'],\n    },\n    addLabelPadding: {\n      true: styles['form-root_add-label-padding'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    direction: 'column-reverse',\n    addLabelPadding: false,\n  },\n});\n\nexport interface FormRootProps extends HTMLAttributes<HTMLDivElement> {\n  $orientation?: 'horizontal' | 'vertical';\n  $dir?: 'start' | 'end';\n  $addLabelPadding?: boolean;\n}\n\nconst getDirection = (\n  orientation: 'horizontal' | 'vertical',\n  dir: 'start' | 'end'\n): 'column-reverse' | 'column' | 'row-reverse' | 'row' =>\n  orientation === 'horizontal'\n    ? dir === 'start'\n      ? 'row-reverse'\n      : 'row'\n    : dir === 'start'\n      ? 'column-reverse'\n      : 'column';\n\nexport const FormRoot = ({\n  $orientation = 'vertical',\n  $dir = 'start',\n  $addLabelPadding = false,\n  className,\n  ...props\n}: FormRootProps) => (\n  <div\n    {...props}\n    className={cn(\n      formRootVariants({\n        direction: getDirection($orientation, $dir),\n        addLabelPadding: $addLabelPadding && $orientation === 'horizontal',\n      }),\n      className\n    )}\n  />\n);\n"],"names":["formRootVariants","cva","styles","variants","direction","column","row","addLabelPadding","true","false","defaultVariants","getDirection","orientation","dir","FormRoot","$orientation","$dir","$addLabelPadding","className","props","cn"],"mappings":";;;;;AAIA,MAAMA,gBAAAA,GAAmBC,GAAAA,CAAIC,MAAAA,CAAO,WAAW,CAAA,EAAG;AAAA,EAChDC,QAAAA,EAAU;AAAA,IACRC,SAAAA,EAAW;AAAA,MACT,gBAAA,EAAkBF,OAAO,oCAAoC,CAAA;AAAA,MAC7DG,MAAAA,EAAQH,OAAO,4BAA4B,CAAA;AAAA,MAC3C,aAAA,EAAeA,OAAO,iCAAiC,CAAA;AAAA,MACvDI,GAAAA,EAAKJ,OAAO,yBAAyB;AAAA,KACvC;AAAA,IACAK,eAAAA,EAAiB;AAAA,MACfC,IAAAA,EAAMN,OAAO,6BAA6B,CAAA;AAAA,MAC1CO,KAAAA,EAAO;AAAA;AACT,GACF;AAAA,EACAC,eAAAA,EAAiB;AAAA,IACfN,SAAAA,EAAW,gBAAA;AAAA,IACXG,eAAAA,EAAiB;AAAA;AAErB,CAAC,CAAA;AAQD,MAAMI,YAAAA,GAAeA,CACnBC,WAAAA,EACAC,GAAAA,KAEAD,WAAAA,KAAgB,YAAA,GACZC,GAAAA,KAAQ,OAAA,GACN,aAAA,GACA,KAAA,GACFA,GAAAA,KAAQ,OAAA,GACN,gBAAA,GACA,QAAA;AAED,MAAMC,WAAWA,CAAC;AAAA,EACvBC,YAAAA,GAAe,UAAA;AAAA,EACfC,IAAAA,GAAO,OAAA;AAAA,EACPC,gBAAAA,GAAmB,KAAA;AAAA,EACnBC,SAAAA;AAAAA,EACA,GAAGC;AACU,CAAA,yBACZ,KAAA,EAAA,EACC,GAAIA,KAAAA,EACJ,SAAA,EAAWC,GACTpB,gBAAAA,CAAiB;AAAA,EACfI,SAAAA,EAAWO,YAAAA,CAAaI,YAAAA,EAAcC,IAAI,CAAA;AAAA,EAC1CT,eAAAA,EAAiBU,oBAAoBF,YAAAA,KAAiB;AACxD,CAAC,CAAA,EACDG,SACF,CAAA,EAAE;;;;"}
+{"version":3,"file":"FormRoot.js","sources":["../../../../src/components/FormContainer/FormRoot.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './FormRoot.module.css';\n\nconst formRootVariants = cva(styles['form-root'], {\n  variants: {\n    direction: {\n      'column-reverse': styles['form-root_direction_column-reverse'],\n      column: styles['form-root_direction_column'],\n      'row-reverse': styles['form-root_direction_row-reverse'],\n      row: styles['form-root_direction_row'],\n    },\n    addLabelPadding: {\n      true: styles['form-root_add-label-padding'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    direction: 'column-reverse',\n    addLabelPadding: false,\n  },\n});\n\nexport interface FormRootProps extends HTMLAttributes<HTMLDivElement> {\n  $orientation?: 'horizontal' | 'vertical';\n  $dir?: 'start' | 'end';\n  $addLabelPadding?: boolean;\n}\n\nconst getDirection = (\n  orientation: 'horizontal' | 'vertical',\n  dir: 'start' | 'end'\n): 'column-reverse' | 'column' | 'row-reverse' | 'row' =>\n  orientation === 'horizontal'\n    ? dir === 'start'\n      ? 'row-reverse'\n      : 'row'\n    : dir === 'start'\n      ? 'column-reverse'\n      : 'column';\n\nexport const FormRoot = ({\n  $orientation = 'vertical',\n  $dir = 'start',\n  $addLabelPadding = false,\n  className,\n  ...props\n}: FormRootProps) => (\n  <div\n    {...props}\n    className={cn(\n      formRootVariants({\n        direction: getDirection($orientation, $dir),\n        addLabelPadding: $addLabelPadding && $orientation === 'horizontal',\n      }),\n      className\n    )}\n  />\n);\n"],"names":[],"mappings":";;;;;AAIA,MAAM,gBAAA,GAAmB,GAAA,CAAI,MAAA,CAAO,WAAW,CAAA,EAAG;AAAA,EAChD,QAAA,EAAU;AAAA,IACR,SAAA,EAAW;AAAA,MACT,gBAAA,EAAkB,OAAO,oCAAoC,CAAA;AAAA,MAC7D,MAAA,EAAQ,OAAO,4BAA4B,CAAA;AAAA,MAC3C,aAAA,EAAe,OAAO,iCAAiC,CAAA;AAAA,MACvD,GAAA,EAAK,OAAO,yBAAyB;AAAA,KACvC;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,OAAO,6BAA6B,CAAA;AAAA,MAC1C,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,SAAA,EAAW,gBAAA;AAAA,IACX,eAAA,EAAiB;AAAA;AAErB,CAAC,CAAA;AAQD,MAAM,YAAA,GAAe,CACnB,WAAA,EACA,GAAA,KAEA,WAAA,KAAgB,YAAA,GACZ,GAAA,KAAQ,OAAA,GACN,aAAA,GACA,KAAA,GACF,GAAA,KAAQ,OAAA,GACN,gBAAA,GACA,QAAA;AAED,MAAM,WAAW,CAAC;AAAA,EACvB,YAAA,GAAe,UAAA;AAAA,EACf,IAAA,GAAO,OAAA;AAAA,EACP,gBAAA,GAAmB,KAAA;AAAA,EACnB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,qBACE,GAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACE,GAAG,KAAA;AAAA,IACJ,SAAA,EAAW,EAAA;AAAA,MACT,gBAAA,CAAiB;AAAA,QACf,SAAA,EAAW,YAAA,CAAa,YAAA,EAAc,IAAI,CAAA;AAAA,QAC1C,eAAA,EAAiB,oBAAoB,YAAA,KAAiB;AAAA,OACvD,CAAA;AAAA,MACD;AAAA;AACF;AACF;;;;"}