magick-ui 0.1.0 → 0.1.1

package/dist/Button-RfQ7L-M8.d.cts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface ButtonProps extends Omit<React.ComponentProps<"button">, "prefix" | "suffix"> {
+    variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost" | "soft" | "ai-filled" | "ai-outline" | "glass" | null;
+    size?: "sm" | "md" | "lg";
+    state?: "loading" | "default";
+    asChild?: boolean;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    onlyIcon?: boolean;
+    children?: React.ReactNode;
+}
+declare function Button({ className, variant, state, size, prefix, suffix, onlyIcon, asChild, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+export { Button as B, type ButtonProps as a };

package/dist/Button-RfQ7L-M8.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface ButtonProps extends Omit<React.ComponentProps<"button">, "prefix" | "suffix"> {
+    variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost" | "soft" | "ai-filled" | "ai-outline" | "glass" | null;
+    size?: "sm" | "md" | "lg";
+    state?: "loading" | "default";
+    asChild?: boolean;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    onlyIcon?: boolean;
+    children?: React.ReactNode;
+}
+declare function Button({ className, variant, state, size, prefix, suffix, onlyIcon, asChild, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+export { Button as B, type ButtonProps as a };

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,11 +17,20 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Button: () => Button,
   ButtonGroupPrimitive: () => ButtonGroupPrimitive,
   CardPrimitive: () => CardPrimitive,
   KeyValuePrimitive: () => KeyValuePrimitive,
@@ -340,6 +351,12 @@ function getFullExample() {
   return componentSchema.full_example;
 }
 
+// src/ui/Button.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_lucide_react = require("lucide-react");
+var React = __toESM(require("react"), 1);
+
 // src/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
@@ -347,6 +364,309 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 
+// src/ui/Button.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "flex group leading-body-sm line-height-body-sm items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-all disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-[20px] shrink-0 [&_svg]:shrink-0 outline-none ring-0",
+  {
+    variants: {
+      variant: {
+        // default:
+        //   "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        primary: "bg-button-primary-enabled text-element-static-white! hover:bg-button-primary-hovered active:bg-button-primary-pressed focus-visible:bg-button-primary-pressed disabled:bg-button-primary-disabled disabled:text-element-inverse-disabled!",
+        secondary: "bg-button-secondary-enabled text-element-inverse-default-alt! hover:bg-button-secondary-hovered active:bg-button-secondary-pressed disabled:bg-button-secondary-disabled disabled:text-element-inverse-disabled!",
+        destructive: "bg-button-destructive-enabled text-element-static-white! hover:bg-button-destructive-hovered active:bg-button-destructive-pressed disabled:bg-button-destructive-disabled disabled:text-element-inverse-disabled!",
+        outline: "border border-stroke-inverse-slate-03 text-element-inverse-default rounded-unit-corner-radius-lg bg-button-outline-enabled hover:bg-button-outline-hovered active:bg-button-outline-pressed disabled:bg-button-outline-disabled disabled:text-element-inverse-disabled!",
+        ghost: "bg-transparent text-element-inverse-default hover:bg-button-ghost-hovered active:bg-button-ghost-pressed disabled:bg-button-ghost-disabled disabled:text-element-inverse-disabled!",
+        soft: "bg-button-soft-enabled text-element-inverse-default hover:bg-button-soft-hovered active:bg-button-soft-pressed disabled:bg-button-soft-disabled disabled:text-element-inverse-disabled!",
+        "ai-filled": "relative",
+        "ai-outline": "relative",
+        glass: "glass-effect bg-button-glass-enabled border border-stroke-inverse-slate-01 hover:bg-button-glass-hovered active:bg-button-glass-pressed disabled:bg-button-glass-disabled"
+      },
+      size: {
+        sm: "rounded-lg gap-1 px-1.5 py-1 text-body-sm",
+        // "icon-sm": "p-4px rounded-md ",
+        md: "px-2.5 py-2 rounded-[10px] gap-2 text-body-sm",
+        // "icon-md": "rounded-lg p-2",
+        lg: "px-3.5 py-3 rounded-xl gap-2 text-body-lg"
+        // "icon-lg": "rounded-xl p-3",
+      },
+      state: {
+        loading: "opacity-80 cursor-progress",
+        default: ""
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      state: "default"
+    }
+  }
+);
+function getButtonPadding(size, prefix, suffix, onlyIcon) {
+  if (prefix && suffix) {
+    if (size === "sm") return "px-1.5";
+    if (size === "md") return "p-2.5";
+    if (size === "lg") return "px-3";
+  } else if (prefix) {
+    if (size === "sm") return "pl-1.5 pr-2";
+    if (size === "md") return "pl-2.5 py-2.5 pr-3";
+    if (size === "lg") return "pl-3.5 pr-4";
+  } else if (suffix) {
+    if (size === "sm") return "pr-1.5 pl-2";
+    if (size === "md") return "pl-3";
+    if (size === "lg") return "pr-3.5 pl-4";
+  } else if (onlyIcon) {
+    if (size === "sm") return "p-1";
+    if (size === "md") return "p-2";
+    if (size === "lg") return "p-3";
+  }
+  return "";
+}
+function Button({
+  className,
+  variant = "primary",
+  state,
+  size = "md",
+  prefix,
+  suffix,
+  onlyIcon,
+  asChild = false,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? import_react_slot.Slot : "button";
+  const isDisabled = state === "loading" || props.disabled;
+  const renderAffix = (node) => {
+    if (!node) return null;
+    if (React.isValidElement(node)) {
+      const nodeElement = node;
+      return React.cloneElement(nodeElement, {
+        className: cn(
+          nodeElement.props?.className || "",
+          isDisabled && "text-element-inverse-disabled"
+        )
+      });
+    }
+    return node;
+  };
+  if (variant === "ai-filled" || variant === "ai-outline") {
+    const isAiFilled = variant === "ai-filled";
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      Comp,
+      {
+        "data-variant": variant,
+        "data-slot": "button",
+        className: cn("group relative cursor-pointer p-0.5"),
+        disabled: isDisabled,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 block",
+                buttonVariants({ size, className })
+              ),
+              style: {
+                backgroundImage: `url(${""})`,
+                backgroundSize: "cover",
+                backgroundPosition: "center"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
+            {
+              className: cn(
+                buttonVariants({ variant, size, className }),
+                size === "sm" && "rounded-[7px]",
+                size === "md" && "rounded-[9px]",
+                size === "lg" && "rounded-[11px]",
+                getButtonPadding(size, prefix, suffix, onlyIcon),
+                {
+                  "gap-1": size === "sm",
+                  "hover:text-element-inverse-default text-white hover:bg-white": isAiFilled,
+                  "text-element-inverse-default dark:bg-fill-background bg-white hover:bg-transparent hover:text-white": !isAiFilled
+                }
+              ),
+              children: [
+                state === "loading" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.Loader2Icon, { className: "animate-spin" }),
+                renderAffix(prefix),
+                children,
+                renderAffix(suffix)
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    Comp,
+    {
+      "data-variant": variant,
+      "data-slot": "button",
+      className: cn(
+        buttonVariants({ variant, size, className }),
+        getButtonPadding(size || "md", prefix, suffix, onlyIcon || false)
+      ),
+      disabled: isDisabled,
+      ...props,
+      children: [
+        state === "loading" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.Loader2Icon, { className: "animate-spin" }),
+        renderAffix(prefix),
+        children,
+        renderAffix(suffix)
+      ]
+    }
+  );
+}
+
+// src/ui/Card.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+
+// src/ui/Dialog.tsx
+var import_react = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+
+// src/ui/Input.tsx
+var import_lucide_react2 = require("lucide-react");
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime8 = require("react/jsx-runtime");
+
+// src/ui/Avatar.tsx
+var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
+var import_class_variance_authority2 = require("class-variance-authority");
+
+// src/ui/Tooltip.tsx
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
+var import_jsx_runtime9 = require("react/jsx-runtime");
+
+// src/ui/Avatar.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react2 = require("react");
+var STATUS_SIZE = {
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  xl: "xl",
+  "2xl": "2xl"
+};
+var AVATAR_SIZE_MAPPER = {
+  xs: {
+    className: "size-5 !text-caption !font-semibold",
+    statusSize: STATUS_SIZE.sm
+  },
+  sm: {
+    className: "size-6 !text-caption !font-semibold",
+    statusSize: STATUS_SIZE.sm
+  },
+  md: {
+    className: "size-7 !text-caption !font-semibold",
+    statusSize: STATUS_SIZE.sm
+  },
+  lg: {
+    className: "size-8 !text-title-sm !font-bold",
+    statusSize: STATUS_SIZE.md
+  },
+  xl: {
+    className: "size-9 !text-title-sm !font-bold",
+    statusSize: STATUS_SIZE.md
+  },
+  "2xl": {
+    className: "size-10 !text-title-lg !font-bold",
+    statusSize: STATUS_SIZE.md
+  },
+  "3xl": {
+    className: "size-16 !text-h5 !font-bold",
+    statusSize: STATUS_SIZE.lg
+  },
+  "4xl": {
+    className: "size-20 !text-h3 !font-bold",
+    statusSize: STATUS_SIZE.xl
+  },
+  "5xl": {
+    className: "size-28 !text-h2 !font-bold",
+    statusSize: STATUS_SIZE["2xl"]
+  }
+};
+var statusVariants = (0, import_class_variance_authority2.cva)(
+  "bg-fill-static-green-03 absolute right-0 bottom-0 rounded-unit-corner-radius-rounded-full border-unit-border-width-sm !border-stroke-inverse-slate-01",
+  {
+    variants: {
+      size: {
+        sm: "size-2 border-unit-border-width-sm",
+        md: "size-[10px] border-unit-border-width-sm",
+        lg: "size-[18px] border-unit-border-width-md",
+        xl: "size-6 border-unit-border-width-md",
+        "2xl": "size-8 border-unit-border-width-lg"
+      },
+      status: {
+        active: "bg-fill-static-green-03",
+        inactive: "bg-fill-static-slate-03"
+      }
+    },
+    defaultVariants: {
+      size: "sm"
+    }
+  }
+);
+
+// src/ui/Badge.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_react_slot2 = require("@radix-ui/react-slot");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var BadgeVariants = (0, import_class_variance_authority3.cva)(
+  "w-full !text-caption leading-caption cursor-default flex max-w-fit items-center justify-center gap-0.5 font-medium",
+  {
+    variants: {
+      type: {
+        // primary: "bg-fill-static-blue-03 text-element-static-white",
+        "primary-hard": "bg-fill-static-blue-03 text-element-static-white",
+        "primary-soft": "bg-fill-inverse-blue-02 text-element-inverse-blue",
+        "destructive-hard": "bg-fill-static-red-03 text-element-static-white",
+        "destructive-soft": "bg-fill-inverse-red-02 text-element-inverse-red",
+        "secondary-hard": "bg-fill-inverse-slate-09 text-element-inverse-default-alt",
+        "secondary-soft": "bg-fill-inverse-slate-03 text-element-inverse-default"
+      },
+      size: {
+        sm: "rounded-unit-corner-radius-sm py-unit-0px px-unit-4px",
+        md: "rounded-unit-corner-radius-md py-unit-2px px-unit-6px"
+      }
+    }
+  }
+);
+var badgeVariants = (0, import_class_variance_authority3.cva)(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+
+// src/ui/Dropdown.tsx
+var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+
+// src/ui/Tabs.tsx
+var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"), 1);
+var import_jsx_runtime13 = require("react/jsx-runtime");
+
+// src/ui/Separator.tsx
+var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+
 // src/design-tokens/design-tokens.ts
 var designTokens = {
   "color-slate-50": "var(--color-slate-50)",
@@ -1307,6 +1627,7 @@ function getTokenValueWithFallback(tokenName, fallback) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Button,
   ButtonGroupPrimitive,
   CardPrimitive,
   KeyValuePrimitive,