@adam-milo/ui 1.0.33 → 1.0.34

package/dist/index21.js

@@ -1,53 +1,169 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "./index31.js";
 /* empty css        */
-const levelToSizeMap = {
-  1: "2xl",
-  2: "xl",
-  3: "lg",
-  4: "md",
-  5: "sm",
-  6: "xs"
+import { Icon } from "@adam-milo/icons";
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogCloseButton = forwardRef(({ className, "data-cy": dataCy, "data-testid": dataTestId, ...props }, ref) => {
+  const finalDataCy = dataCy || "dialog-close-button";
+  const finalTestId = dataTestId || "dialog-close-button";
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Close,
+    {
+      ref,
+      className: cn("dialog-close-button", className),
+      "data-cy": finalDataCy,
+      "data-testid": finalTestId,
+      "aria-label": "Close dialog",
+      ...props,
+      children: /* @__PURE__ */ jsx(Icon, { name: "Cross2Icon", size: "sm", decorative: true })
+    }
+  );
+});
+DialogCloseButton.displayName = "DialogCloseButton";
+const DialogIcon = ({
+  children,
+  variant = "default",
+  className,
+  "data-cy": dataCy,
+  "data-testid": dataTestId,
+  ...props
+}) => {
+  const finalDataCy = dataCy || "dialog-icon";
+  const finalTestId = dataTestId || "dialog-icon";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("dialog-icon", `dialog-icon--${variant}`, className),
+      "data-cy": finalDataCy,
+      "data-testid": finalTestId,
+      "aria-hidden": "true",
+      ...props,
+      children
+    }
+  );
 };
-const Heading = forwardRef(
-  ({
-    level = 2,
-    size,
-    weight = "bold",
-    color = "text",
-    align = "start",
-    className = "",
-    "data-cy": dataCy,
-    "data-testid": dataTestId,
-    children,
-    ...props
-  }, ref) => {
-    const resolvedSize = size ?? levelToSizeMap[level];
-    const finalDataCy = dataCy || `heading-h${level}-${resolvedSize}`;
-    const finalDataTestId = dataTestId || `heading-h${level}-${resolvedSize}`;
-    const classes = [
-      "heading",
-      `heading--size-${resolvedSize}`,
-      `heading--weight-${weight}`,
-      `heading--color-${color}`,
-      `heading--align-${align}`,
-      className
-    ].filter(Boolean).join(" ");
-    const Tag = `h${level}`;
-    return /* @__PURE__ */ jsx(
-      Tag,
+DialogIcon.displayName = "DialogIcon";
+const DialogOverlay = forwardRef(({ className, "data-cy": dataCy, "data-testid": dataTestId, ...props }, ref) => {
+  const finalDataCy = dataCy || "dialog-overlay";
+  const finalTestId = dataTestId || "dialog-overlay";
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      ref,
+      className: cn("dialog-overlay", className),
+      "data-cy": finalDataCy,
+      "data-testid": finalTestId,
+      ...props
+    }
+  );
+});
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = forwardRef(({ className, children, "data-cy": dataCy, "data-testid": dataTestId, ...props }, ref) => {
+  const finalDataCy = dataCy || "dialog-content";
+  const finalTestId = dataTestId || "dialog-content";
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      DialogPrimitive.Content,
       {
         ref,
-        className: classes,
+        className: cn("dialog-content", className),
         "data-cy": finalDataCy,
-        "data-testid": finalDataTestId,
+        "data-testid": finalTestId,
         ...props,
         children
       }
+    )
+  ] });
+});
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = ({
+  centered = false,
+  className,
+  "data-cy": dataCy,
+  "data-testid": dataTestId,
+  ...props
+}) => {
+  const finalDataCy = dataCy || "dialog-header";
+  const finalTestId = dataTestId || "dialog-header";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("dialog-header", centered && "dialog-header--centered", className),
+      "data-cy": finalDataCy,
+      "data-testid": finalTestId,
+      ...props
+    }
+  );
+};
+DialogHeader.displayName = "DialogHeader";
+const DialogFooter = ({
+  className,
+  "data-cy": dataCy,
+  "data-testid": dataTestId,
+  ...props
+}) => {
+  const finalDataCy = dataCy || "dialog-footer";
+  const finalTestId = dataTestId || "dialog-footer";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("dialog-footer", className),
+      "data-cy": finalDataCy,
+      "data-testid": finalTestId,
+      ...props
+    }
+  );
+};
+DialogFooter.displayName = "DialogFooter";
+const DialogTitle = forwardRef(
+  ({ className, "data-cy": dataCy, "data-testid": dataTestId, ...props }, ref) => {
+    const finalDataCy = dataCy || "dialog-title";
+    const finalTestId = dataTestId || "dialog-title";
+    return /* @__PURE__ */ jsx(
+      DialogPrimitive.Title,
+      {
+        ref,
+        className: cn("dialog-title", className),
+        "data-cy": finalDataCy,
+        "data-testid": finalTestId,
+        ...props
+      }
     );
   }
 );
-Heading.displayName = "Heading";
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = forwardRef(({ className, "data-cy": dataCy, "data-testid": dataTestId, ...props }, ref) => {
+  const finalDataCy = dataCy || "dialog-description";
+  const finalTestId = dataTestId || "dialog-description";
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      ref,
+      className: cn("dialog-description", className),
+      "data-cy": finalDataCy,
+      "data-testid": finalTestId,
+      ...props
+    }
+  );
+});
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 export {
-  Heading
+  Dialog,
+  DialogClose,
+  DialogCloseButton,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogIcon,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
 };

package/dist/index22.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),e=require("./index23.cjs");;/* empty css          */const t=i.forwardRef(({columns:i=3,rows:t,gap:a="4",rowGap:d,columnGap:s,align:c="stretch",justify:o="stretch",autoFitMinWidth:n="15rem",className:g,children:l,style:u,"data-cy":m,"data-testid":p,...y},$)=>{const f=m||`grid-${i}col`,j=p||`grid-${i}col`,x={...u,..."auto"===i&&{"--grid-auto-fit-min":n}};return r.jsx("div",{ref:$,className:e.cn("grid",`grid--columns-${i}`,t&&`grid--rows-${t}`,`grid--gap-${a}`,d&&`grid--row-gap-${d}`,s&&`grid--column-gap-${s}`,`grid--align-${c}`,`grid--justify-${o}`,g),style:x,"data-cy":f,"data-testid":j,...y,children:l})});t.displayName="Grid",exports.Grid=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),e=require("./index31.cjs");;/* empty css          */const s=a.forwardRef(({direction:a="vertical",spacing:s="4",align:c="stretch",justify:r="start",wrap:i=!1,className:n,children:d,"data-cy":l,"data-testid":o,...u},k)=>{const p=l||`stack-${a}`,j=o||`stack-${a}`;return t.jsx("div",{ref:k,className:e.cn("stack",`stack--${a}`,`stack--spacing-${s}`,`stack--align-${c}`,`stack--justify-${r}`,i&&"stack--wrap",n),"data-cy":p,"data-testid":j,...u,children:d})});s.displayName="Stack",exports.Stack=s;

package/dist/index22.js

@@ -1,46 +1,35 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { cn } from "./index23.js";
+import { cn } from "./index31.js";
 /* empty css        */
-const Grid = forwardRef(
+const Stack = forwardRef(
   ({
-    columns = 3,
-    rows,
-    gap = "4",
-    rowGap,
-    columnGap,
+    direction = "vertical",
+    spacing = "4",
     align = "stretch",
-    justify = "stretch",
-    autoFitMinWidth = "15rem",
+    justify = "start",
+    wrap = false,
     className,
     children,
-    style,
     "data-cy": dataCy,
     "data-testid": dataTestId,
     ...props
   }, ref) => {
-    const finalDataCy = dataCy || `grid-${columns}col`;
-    const finalTestId = dataTestId || `grid-${columns}col`;
-    const customStyle = {
-      ...style,
-      ...columns === "auto" && { "--grid-auto-fit-min": autoFitMinWidth }
-    };
+    const finalDataCy = dataCy || `stack-${direction}`;
+    const finalTestId = dataTestId || `stack-${direction}`;
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         className: cn(
-          "grid",
-          `grid--columns-${columns}`,
-          rows && `grid--rows-${rows}`,
-          `grid--gap-${gap}`,
-          rowGap && `grid--row-gap-${rowGap}`,
-          columnGap && `grid--column-gap-${columnGap}`,
-          `grid--align-${align}`,
-          `grid--justify-${justify}`,
+          "stack",
+          `stack--${direction}`,
+          `stack--spacing-${spacing}`,
+          `stack--align-${align}`,
+          `stack--justify-${justify}`,
+          wrap && "stack--wrap",
           className
         ),
-        style: customStyle,
         "data-cy": finalDataCy,
         "data-testid": finalTestId,
         ...props,
@@ -49,7 +38,7 @@ const Grid = forwardRef(
     );
   }
 );
-Grid.displayName = "Grid";
+Stack.displayName = "Stack";
 export {
-  Grid
+  Stack
 };

package/dist/index23.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("clsx"),r=require("tailwind-merge");let t=0;exports.cn=function(...t){return r.twMerge(e.clsx(t))},exports.generateId=function(e="id"){return t+=1,`${e}-${t}`};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("./index31.cjs");;/* empty css          */const a=t.forwardRef(({className:t,maxWidth:a="lg",padding:n="md","data-cy":i,"data-testid":d,children:c,...s},o)=>{const l=i||"container",u=d||"container";return e.jsx("div",{ref:o,className:r.cn("container",`container--max-width-${a}`,`container--padding-${n}`,t),"data-cy":l,"data-testid":u,...s,children:c})});a.displayName="Container",exports.Container=a;

package/dist/index23.js

@@ -1,14 +1,38 @@
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-let idCounter = 0;
-function generateId(prefix = "id") {
-  idCounter += 1;
-  return `${prefix}-${idCounter}`;
-}
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "./index31.js";
+/* empty css        */
+const Container = forwardRef(
+  ({
+    className,
+    maxWidth = "lg",
+    padding = "md",
+    "data-cy": dataCy,
+    "data-testid": dataTestId,
+    children,
+    ...props
+  }, ref) => {
+    const finalDataCy = dataCy || "container";
+    const finalTestId = dataTestId || "container";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "container",
+          `container--max-width-${maxWidth}`,
+          `container--padding-${padding}`,
+          className
+        ),
+        "data-cy": finalDataCy,
+        "data-testid": finalTestId,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
 export {
-  cn,
-  generateId
+  Container
 };

package/dist/index24.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("@radix-ui/react-separator"),i=require("./index31.cjs");function a(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const t in e)if("default"!==t){const i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,i.get?i:{enumerable:!0,get:()=>e[t]})}return r.default=e,Object.freeze(r)};/* empty css          */const o=a(t),d=r.forwardRef(({orientation:r="horizontal",decorative:t=!0,spacing:a="0",color:d,className:c,style:n,"data-cy":s,"data-testid":u,...l},f)=>{const v=s||`divider-${r}`,g=u||`divider-${r}`;return e.jsx(o.Root,{ref:f,decorative:t,orientation:r,className:i.cn("divider",`divider--${r}`,`divider--spacing-${a}`,c),style:{...d&&{backgroundColor:d},...n},"data-cy":v,"data-testid":g,...l})});d.displayName="Divider",exports.Divider=d;

package/dist/index24.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "./index31.js";
+/* empty css        */
+const Divider = forwardRef(
+  ({
+    orientation = "horizontal",
+    decorative = true,
+    spacing = "0",
+    color,
+    className,
+    style,
+    "data-cy": dataCy,
+    "data-testid": dataTestId,
+    ...props
+  }, ref) => {
+    const finalDataCy = dataCy || `divider-${orientation}`;
+    const finalTestId = dataTestId || `divider-${orientation}`;
+    return /* @__PURE__ */ jsx(
+      SeparatorPrimitive.Root,
+      {
+        ref,
+        decorative,
+        orientation,
+        className: cn(
+          "divider",
+          `divider--${orientation}`,
+          `divider--spacing-${spacing}`,
+          className
+        ),
+        style: {
+          ...color && { backgroundColor: color },
+          ...style
+        },
+        "data-cy": finalDataCy,
+        "data-testid": finalTestId,
+        ...props
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
+export {
+  Divider
+};

package/dist/index25.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("./index23.cjs");;/* empty css          */const a=require("./index26.cjs"),s=require("./index44.cjs"),n=r.forwardRef(({type:n="text",label:l,error:i,helperText:o,fullWidth:u=!1,showPasswordToggle:d=!0,showLastChar:c=!0,lastCharDelay:p=500,validate:h,onValidationChange:f,className:g,id:x,onChange:v,onBlur:w,required:j,value:m,"data-cy":y,"data-testid":k,...b},C)=>{const[$,N]=r.useState(!1),[_,q]=r.useState(),[M,S]=r.useState(!1),[L,R]=r.useState(!1),T=r.useRef(!1),[E,W]=r.useState(""),B=r.useRef(""),F=r.useRef(null),I=r.useRef(null),z=a.useMergedRef(C,I),D=r.useId(),O=x||D,P=`${O}-error`,V=`${O}-helper`,H=y||"input",A=k||"input",G="password"===n,J=G&&d,K=G&&c&&!$,Q=G&&($||K&&B.current.length>0)?"text":n,U=l&&j&&!l.includes("*")?`${l} *`:l,X=r.useMemo(()=>s.debounce(e=>{if(h&&T.current){const r=h(e);q(r),null==f||f(!r)}},300),[h,f]),Y=r.useRef(X);r.useEffect(()=>{Y.current=X},[X]),r.useEffect(()=>{process.env.NODE_ENV},[G,c,m]),r.useEffect(()=>()=>{F.current&&clearTimeout(F.current),Y.current.cancel()},[]);const Z=K&&void 0===m?E:$&&G&&void 0===m?B.current||"":m,ee=i||_,re=b.disabled?"disabled":ee?"error":M?"focus":L?"hover":"idle";return e.jsxs("div",{className:t.cn("input-wrapper",u&&"input-wrapper--full-width"),"data-cy":`${H}-wrapper`,"data-testid":`${A}-wrapper`,children:[l&&e.jsx("label",{htmlFor:O,className:"input__label","data-cy":`${H}-label`,"data-testid":`${A}-label`,children:U}),e.jsxs("div",{className:"input__field-container",children:[e.jsx("input",{ref:z,id:O,type:Q,value:Z,className:t.cn("input",ee&&"input--error",u&&"input--full-width",J&&"input--with-toggle",g),"aria-invalid":ee?"true":"false","aria-required":j?"true":void 0,"aria-describedby":ee?P:o?V:void 0,"data-cy":H,"data-testid":A,"data-state":re,onChange:e=>{null==v||v(e);let r=e.target.value;if(K){const t=e.target,a=t.value;B.current=a;const s=a?"•".repeat(a.length-1)+a.slice(-1):"";W(s),t.value=s,r=a,F.current&&clearTimeout(F.current),F.current=setTimeout(()=>{W("•".repeat(a.length))},p)}T.current&&X(r)},onFocus:e=>{var r;S(!0),null==(r=b.onFocus)||r.call(b,e)},onBlur:e=>{if(S(!1),T.current=!0,h){const r=K?B.current:e.target.value,t=h(r);q(t),null==f||f(!t)}null==w||w(e)},onMouseEnter:()=>{R(!0)},onMouseLeave:()=>{R(!1)},required:j,...b}),J&&e.jsx("button",{type:"button",className:"input__toggle",onClick:()=>{N(e=>!e),setTimeout(()=>{var e;return null==(e=I.current)?void 0:e.focus()},0)},"aria-label":$?"Hide password":"Show password","data-cy":`${H}-toggle`,"data-testid":`${A}-toggle`,children:$?e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e.jsx("path",{d:"M10 4C5.5 4 2 10 2 10s3.5 6 8 6 8-6 8-6-3.5-6-8-6z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"}),e.jsx("circle",{cx:"10",cy:"10",r:"2.5",stroke:"currentColor",strokeWidth:"1.5",fill:"none"})]}):e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e.jsx("path",{d:"M10 4C5.5 4 2 10 2 10s3.5 6 8 6 8-6 8-6-3.5-6-8-6z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"}),e.jsx("circle",{cx:"10",cy:"10",r:"2.5",stroke:"currentColor",strokeWidth:"1.5",fill:"none"}),e.jsx("path",{d:"M3 3l14 14",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})})]}),ee&&e.jsx("span",{id:P,className:"input__error",role:"alert","data-cy":`${H}-error`,"data-testid":`${A}-error`,children:ee}),o&&!ee&&e.jsx("span",{id:V,className:"input__helper","data-cy":`${H}-helper`,"data-testid":`${A}-helper`,children:o})]})});n.displayName="Input",exports.Input=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),t=require("react"),e=require("./index31.cjs"),s=require("./index4.cjs");;/* empty css          */const d=t.forwardRef(({children:t,cardSize:d="lg",logo:i,showSettings:n=!0,showUserMenu:r=!0,userInitials:u,onSettingsClick:c,onUserMenuClick:l,activeMenu:o=null,"data-testid":h,"data-cy":y,...m},$)=>{const g=y||"auth-layout",x=h||"auth-layout";return a.jsxs("div",{ref:$,className:"auth-layout","data-testid":x,"data-cy":g,...m,children:[a.jsx("div",{className:"auth-layout__background","data-testid":`${x}-background`,"data-cy":`${g}-background`,"aria-hidden":"true"}),a.jsxs("header",{className:"auth-layout__header","data-testid":`${x}-header`,"data-cy":`${g}-header`,children:[a.jsx("div",{className:"auth-layout__logo","data-testid":`${x}-logo`,"data-cy":`${g}-logo`,children:i}),a.jsxs("div",{className:"auth-layout__menu","data-testid":`${x}-menu`,"data-cy":`${g}-menu`,children:[n&&a.jsx(s.MenuIconButton,{variant:"settings",selected:"settings"===o,onClick:c,"aria-label":"Settings","data-testid":`${x}-settings-btn`,"data-cy":`${g}-settings-btn`}),r&&a.jsx(s.MenuIconButton,{variant:"user",initials:u,selected:"user"===o,onClick:l,"aria-label":u?`User menu - ${u}`:"User menu","data-testid":`${x}-user-btn`,"data-cy":`${g}-user-btn`})]})]}),a.jsx("main",{className:"auth-layout__main","data-testid":`${x}-main`,"data-cy":`${g}-main`,children:a.jsx("div",{className:e.cn("auth-layout__card",`auth-layout__card--${d}`),"data-testid":`${x}-card`,"data-cy":`${g}-card`,children:t})})]})});d.displayName="AuthLayout",exports.AuthLayout=d;