@mdigital_ui/ui 0.1.0

package/dist/chunk-KNQ7UQ2W.js

@@ -0,0 +1,143 @@
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-3PFA3YG6.js';
+import { cn } from './chunk-YNNAOXU5.js';
+import { cva } from 'class-variance-authority';
+import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var dropdownItemVariants = cva(
+  "relative cursor-pointer select-none text-text-primary transition-colors flex items-center gap-2 rounded-sm",
+  {
+    variants: {
+      size: {
+        xs: "px-2 py-1 text-xs",
+        sm: "px-3 py-1.5 text-sm",
+        md: "px-4 py-2 text-base",
+        lg: "px-5 py-2.5 text-lg"
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: "hover:bg-surface"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      disabled: false
+    }
+  }
+);
+var Dropdown = React.memo(
+  ({
+    children,
+    items,
+    render,
+    color = "default",
+    size = "md",
+    position = "left",
+    maxHeight = 300,
+    disabled = false,
+    fullWidth = false,
+    hover = false,
+    className,
+    onItemClick
+  }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const handleItemClick = React.useCallback(
+      (item) => {
+        if (!item.disabled) {
+          item.onClick?.();
+          if (item.value !== void 0) {
+            onItemClick?.(item.value);
+          }
+          setIsOpen(false);
+        }
+      },
+      [onItemClick]
+    );
+    const handleClose = React.useCallback(() => {
+      setIsOpen(false);
+    }, []);
+    const handleOpen = React.useCallback(() => {
+      if (!disabled) {
+        setIsOpen(true);
+      }
+    }, [disabled]);
+    const handleToggle = React.useCallback(() => {
+      if (!disabled) {
+        setIsOpen((prev) => !prev);
+      }
+    }, [disabled]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative",
+          fullWidth ? "w-full" : "inline-block",
+          className
+        ),
+        onMouseEnter: hover ? handleOpen : void 0,
+        onMouseLeave: hover ? () => setIsOpen(false) : void 0,
+        children: /* @__PURE__ */ jsxs(
+          Popover,
+          {
+            open: isOpen,
+            onOpenChange: setIsOpen,
+            children: [
+              /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  onClick: hover ? void 0 : handleToggle,
+                  className: cn(
+                    "flex",
+                    !hover && "cursor-pointer",
+                    fullWidth && "w-full",
+                    disabled && "opacity-50 cursor-not-allowed"
+                  ),
+                  children
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                PopoverContent,
+                {
+                  className: "p-0 min-w-[140px]",
+                  align: position === "left" ? "start" : "end",
+                  sideOffset: 4,
+                  color,
+                  style: { maxHeight },
+                  onOpenAutoFocus: (e) => e.preventDefault(),
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "overflow-auto",
+                      style: { maxHeight },
+                      children: render ? render({ close: handleClose }) : items?.map((item, idx) => /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: dropdownItemVariants({
+                            size,
+                            disabled: !!item.disabled
+                          }),
+                          onClick: () => handleItemClick(item),
+                          children: [
+                            item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.icon }),
+                            /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label })
+                          ]
+                        },
+                        `${item.value}-${idx}`
+                      ))
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Dropdown.displayName = "Dropdown";
+var dropdown_default = Dropdown;
+
+export { dropdown_default };
+//# sourceMappingURL=chunk-KNQ7UQ2W.js.map
+//# sourceMappingURL=chunk-KNQ7UQ2W.js.map

package/dist/chunk-KNQ7UQ2W.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dropdown/index.tsx"],"names":[],"mappings":"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","file":"chunk-KNQ7UQ2W.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '../popover'\nimport { cn } from '../utils'\nimport type { DropdownProps } from './types'\n\nconst dropdownItemVariants = cva(\n  'relative cursor-pointer select-none text-text-primary transition-colors flex items-center gap-2 rounded-sm',\n  {\n    variants: {\n      size: {\n        xs: 'px-2 py-1 text-xs',\n        sm: 'px-3 py-1.5 text-sm',\n        md: 'px-4 py-2 text-base',\n        lg: 'px-5 py-2.5 text-lg',\n      },\n      disabled: {\n        true: 'opacity-50 cursor-not-allowed',\n        false: 'hover:bg-surface',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      disabled: false,\n    },\n  },\n)\n\nconst Dropdown = React.memo<DropdownProps>(\n  ({\n    children,\n    items,\n    render,\n    color = 'default',\n    size = 'md',\n    position = 'left',\n    maxHeight = 300,\n    disabled = false,\n    fullWidth = false,\n    hover = false,\n    className,\n    onItemClick,\n  }) => {\n    const [isOpen, setIsOpen] = React.useState(false)\n\n    const handleItemClick = React.useCallback(\n      (item: NonNullable<typeof items>[0]) => {\n        if (!item.disabled) {\n          item.onClick?.()\n          if (item.value !== undefined) {\n            onItemClick?.(item.value)\n          }\n          setIsOpen(false)\n        }\n      },\n      [onItemClick],\n    )\n\n    const handleClose = React.useCallback(() => {\n      setIsOpen(false)\n    }, [])\n\n    const handleOpen = React.useCallback(() => {\n      if (!disabled) {\n        setIsOpen(true)\n      }\n    }, [disabled])\n\n    const handleToggle = React.useCallback(() => {\n      if (!disabled) {\n        setIsOpen((prev) => !prev)\n      }\n    }, [disabled])\n\n    return (\n      <div\n        className={cn(\n          'relative',\n          fullWidth ? 'w-full' : 'inline-block',\n          className,\n        )}\n        onMouseEnter={hover ? handleOpen : undefined}\n        onMouseLeave={hover ? () => setIsOpen(false) : undefined}\n      >\n        <Popover\n          open={isOpen}\n          onOpenChange={setIsOpen}\n        >\n          <PopoverTrigger asChild>\n            <div\n              onClick={hover ? undefined : handleToggle}\n              className={cn(\n                'flex',\n                !hover && 'cursor-pointer',\n                fullWidth && 'w-full',\n                disabled && 'opacity-50 cursor-not-allowed',\n              )}\n            >\n              {children}\n            </div>\n          </PopoverTrigger>\n\n          <PopoverContent\n            className=\"p-0 min-w-[140px]\"\n            align={position === 'left' ? 'start' : 'end'}\n            sideOffset={4}\n            color={color}\n            style={{ maxHeight }}\n            onOpenAutoFocus={(e) => e.preventDefault()}\n          >\n            <div\n              className=\"overflow-auto\"\n              style={{ maxHeight }}\n            >\n              {render\n                ? render({ close: handleClose })\n                : items?.map((item, idx) => (\n                    <div\n                      key={`${item.value}-${idx}`}\n                      className={dropdownItemVariants({\n                        size,\n                        disabled: !!item.disabled,\n                      })}\n                      onClick={() => handleItemClick(item)}\n                    >\n                      {item.icon && (\n                        <span className=\"shrink-0\">{item.icon}</span>\n                      )}\n                      <span className=\"flex-1\">{item.label}</span>\n                    </div>\n                  ))}\n            </div>\n          </PopoverContent>\n        </Popover>\n      </div>\n    )\n  },\n)\n\nDropdown.displayName = 'Dropdown'\n\nexport type * from './types'\nexport default Dropdown\n"]}

package/dist/chunk-KTBPIEP2.js

@@ -0,0 +1,102 @@
+import { cn } from './chunk-YNNAOXU5.js';
+import { cva } from 'class-variance-authority';
+import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var radioVariants = cva(
+  "appearance-none rounded-full border-border border bg-background cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed outline-none",
+  {
+    variants: {
+      color: {
+        primary: "checked:border-primary checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-primary)]",
+        secondary: "checked:border-secondary checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-secondary)]",
+        accent: "checked:border-accent checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-accent)]",
+        success: "checked:border-success checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-success)]",
+        error: "checked:border-error checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-error)]",
+        warning: "checked:border-warning checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-warning)]",
+        info: "checked:border-info checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-info)]"
+      },
+      size: {
+        xs: "w-4 h-4",
+        sm: "w-[var(--checkbox-size-sm)] h-[var(--checkbox-size-sm)]",
+        md: "w-[var(--checkbox-size-md)] h-[var(--checkbox-size-md)]",
+        lg: "w-[var(--checkbox-size-lg)] h-[var(--checkbox-size-lg)]"
+      },
+      error: {
+        true: "border-error checked:border-error",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      color: "primary",
+      size: "md"
+    }
+  }
+);
+var Radio = React.memo(
+  ({
+    color = "primary",
+    size = "md",
+    label,
+    helperText,
+    error,
+    className,
+    ref,
+    ...props
+  }) => {
+    const radioElement = /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "radio",
+        className: cn(
+          radioVariants({ color, size, error: !!error }),
+          className
+        ),
+        ...props
+      }
+    );
+    if (!label && !helperText && !error) return radioElement;
+    return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+      /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: cn(
+            "flex items-center gap-2",
+            !props.disabled && "cursor-pointer"
+          ),
+          children: [
+            radioElement,
+            label && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-sm text-text-secondary select-none",
+                  error && "text-error",
+                  props.disabled && "opacity-50"
+                ),
+                children: label
+              }
+            )
+          ]
+        }
+      ),
+      (helperText || error) && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            "mt-1 ml-0 text-xs",
+            error ? "text-error" : "text-text-secondary"
+          ),
+          children: error || helperText
+        }
+      )
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+var radio_default = Radio;
+
+export { radio_default };
+//# sourceMappingURL=chunk-KTBPIEP2.js.map
+//# sourceMappingURL=chunk-KTBPIEP2.js.map

package/dist/chunk-KTBPIEP2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radio/index.tsx"],"names":[],"mappings":";;;;;AAMA,IAAM,aAAA,GAAgB,GAAA;AAAA,EACpB,6IAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,KAAA,EAAO;AAAA,QACL,OAAA,EACE,uHAAA;AAAA,QACF,SAAA,EACE,2HAAA;AAAA,QACF,MAAA,EACE,qHAAA;AAAA,QACF,OAAA,EACE,uHAAA;AAAA,QACF,KAAA,EACE,mHAAA;AAAA,QACF,OAAA,EACE,uHAAA;AAAA,QACF,IAAA,EAAM;AAAA,OACR;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,yDAAA;AAAA,QACJ,EAAA,EAAI,yDAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,mCAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,KAAA,EAAO,SAAA;AAAA,MACP,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;AAEA,IAAM,QAAQ,KAAA,CAAM,IAAA;AAAA,EAClB,CAAC;AAAA,IACC,KAAA,GAAQ,SAAA;AAAA,IACR,IAAA,GAAO,IAAA;AAAA,IACP,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACL,KAAM;AACJ,IAAA,MAAM,YAAA,mBACJ,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,SAAA,EAAW,EAAA;AAAA,UACT,aAAA,CAAc,EAAE,KAAA,EAAO,IAAA,EAAM,OAAO,CAAC,CAAC,OAAO,CAAA;AAAA,UAC7C;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAGF,IAAA,IAAI,CAAC,KAAA,IAAS,CAAC,UAAA,IAAc,CAAC,OAAO,OAAO,YAAA;AAE5C,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,QAAA,EACb,QAAA,EAAA;AAAA,sBAAA,IAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,EAAA;AAAA,YACT,yBAAA;AAAA,YACA,CAAC,MAAM,QAAA,IAAY;AAAA,WACrB;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,YAAA;AAAA,YACA,KAAA,oBACC,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,EAAA;AAAA,kBACT,yCAAA;AAAA,kBACA,KAAA,IAAS,YAAA;AAAA,kBACT,MAAM,QAAA,IAAY;AAAA,iBACpB;AAAA,gBAEC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,OAEJ;AAAA,MAAA,CACE,cAAc,KAAA,qBACd,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,EAAA;AAAA,YACT,mBAAA;AAAA,YACA,QAAQ,YAAA,GAAe;AAAA,WACzB;AAAA,UAEC,QAAA,EAAA,KAAA,IAAS;AAAA;AAAA;AACZ,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF,CAAA;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA;AAGpB,IAAO,aAAA,GAAQ","file":"chunk-KTBPIEP2.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '../utils'\nimport type { RadioProps } from './types'\n\nconst radioVariants = cva(\n  'appearance-none rounded-full border-border border bg-background cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed outline-none',\n  {\n    variants: {\n      color: {\n        primary:\n          'checked:border-primary checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-primary)]',\n        secondary:\n          'checked:border-secondary checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-secondary)]',\n        accent:\n          'checked:border-accent checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-accent)]',\n        success:\n          'checked:border-success checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-success)]',\n        error:\n          'checked:border-error checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-error)]',\n        warning:\n          'checked:border-warning checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-warning)]',\n        info: 'checked:border-info checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-info)]',\n      },\n      size: {\n        xs: 'w-4 h-4',\n        sm: 'w-[var(--checkbox-size-sm)] h-[var(--checkbox-size-sm)]',\n        md: 'w-[var(--checkbox-size-md)] h-[var(--checkbox-size-md)]',\n        lg: 'w-[var(--checkbox-size-lg)] h-[var(--checkbox-size-lg)]',\n      },\n      error: {\n        true: 'border-error checked:border-error',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      color: 'primary',\n      size: 'md',\n    },\n  },\n)\n\nconst Radio = React.memo<RadioProps>(\n  ({\n    color = 'primary',\n    size = 'md',\n    label,\n    helperText,\n    error,\n    className,\n    ref,\n    ...props\n  }) => {\n    const radioElement = (\n      <input\n        ref={ref}\n        type=\"radio\"\n        className={cn(\n          radioVariants({ color, size, error: !!error }),\n          className,\n        )}\n        {...props}\n      />\n    )\n\n    if (!label && !helperText && !error) return radioElement\n\n    return (\n      <div className=\"w-full\">\n        <label\n          className={cn(\n            'flex items-center gap-2',\n            !props.disabled && 'cursor-pointer',\n          )}\n        >\n          {radioElement}\n          {label && (\n            <span\n              className={cn(\n                'text-sm text-text-secondary select-none',\n                error && 'text-error',\n                props.disabled && 'opacity-50',\n              )}\n            >\n              {label}\n            </span>\n          )}\n        </label>\n        {(helperText || error) && (\n          <p\n            className={cn(\n              'mt-1 ml-0 text-xs',\n              error ? 'text-error' : 'text-text-secondary',\n            )}\n          >\n            {error || helperText}\n          </p>\n        )}\n      </div>\n    )\n  },\n)\n\nRadio.displayName = 'Radio'\n\nexport type * from './types'\nexport default Radio\n"]}