@dmsi/wedgekit-react 0.0.65 → 0.0.67

package/dist/components/Upload.cjs

@@ -0,0 +1,488 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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/components/Upload.tsx
+var Upload_exports = {};
+__export(Upload_exports, {
+  Upload: () => Upload
+});
+module.exports = __toCommonJS(Upload_exports);
+var import_clsx5 = __toESM(require("clsx"), 1);
+
+// src/classNames.ts
+var import_clsx = __toESM(require("clsx"), 1);
+var typography = {
+  display1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
+    "leading-display-1-mobile desktop:leading-display-1-desktop"
+  ),
+  display2: (0, import_clsx.default)(
+    "font-sans font-bold",
+    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
+    "leading-display-2-mobile desktop:leading-display-2-desktop"
+  ),
+  heading1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
+    "leading-heading-1-mobile desktop:leading-heading-1-desktop"
+  ),
+  heading2: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
+    "leading-heading-2-mobile desktop:leading-heading-2-desktop"
+  ),
+  heading3: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
+    "leading-heading-3-mobile desktop:leading-heading-3-desktop"
+  ),
+  subheader: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
+    "leading-subheader-mobile desktop:leading-subheader-desktop"
+  ),
+  link: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
+    "leading-link-mobile desktop:leading-link-desktop"
+  ),
+  buttonLabel: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  label: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  paragraph: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-paragraph-mobile desktop:leading-paragraph-desktop"
+  ),
+  caption: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
+    "leading-caption-mobile desktop:leading-caption-desktop"
+  )
+};
+var baseTransition = (0, import_clsx.default)(
+  "transition-colors duration-100 ease-in-out"
+);
+var componentGap = (0, import_clsx.default)(
+  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
+);
+var paddingUsingComponentGap = (0, import_clsx.default)(
+  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
+);
+var paddingXUsingLayoutGroupGap = (0, import_clsx.default)(
+  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
+);
+var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var componentPadding = (0, import_clsx.default)(
+  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+);
+var componentPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
+);
+var componentPaddingX = (0, import_clsx.default)(
+  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
+);
+var componentPaddingY = (0, import_clsx.default)(
+  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
+);
+var componentPaddingXUsingComponentGap = (0, import_clsx.default)(
+  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
+);
+var componentPaddingYUsingComponentGap = (0, import_clsx.default)(
+  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
+);
+var componentPaddingMinusBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
+);
+var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
+);
+var layoutPaddding = (0, import_clsx.default)(
+  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
+);
+var layoutPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
+);
+var layoutPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
+);
+var containerPaddingX = (0, import_clsx.default)(
+  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
+);
+var containerPaddingY = (0, import_clsx.default)(
+  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
+);
+var layoutGroupGapPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var layoutGroupGap = (0, import_clsx.default)(
+  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
+);
+var layoutGap = (0, import_clsx.default)(
+  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
+);
+var gapUsingContainerPadding = (0, import_clsx.default)(
+  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
+);
+
+// src/components/Icon.tsx
+var import_clsx2 = __toESM(require("clsx"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function Icon(_a) {
+  var _b = _a, {
+    name,
+    size = 24,
+    variant = "outline"
+  } = _b, props = __objRest(_b, [
+    "name",
+    "size",
+    "variant"
+  ]);
+  const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
+  const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    __spreadProps(__spreadValues({}, props), {
+      className: (0, import_clsx2.default)(
+        "icon",
+        `icon-${size}`,
+        // size === 16 ? "font-normal" : "font-light", // size 16 font weight is not working as normal from before
+        props.className
+      ),
+      style: __spreadValues({
+        fontVariationSettings: variantStyle + `, ${weightStyle}`
+      }, props.style),
+      children: name
+    })
+  );
+}
+
+// src/components/Paragraph.tsx
+var import_clsx3 = __toESM(require("clsx"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Paragraph = (_a) => {
+  var _b = _a, {
+    className,
+    color,
+    padded,
+    align = "left",
+    tall,
+    addOverflow,
+    children,
+    as = "p",
+    id
+  } = _b, props = __objRest(_b, [
+    "className",
+    "color",
+    "padded",
+    "align",
+    "tall",
+    "addOverflow",
+    "children",
+    "as",
+    "id"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
+      className: (0, import_clsx3.default)(
+        typography.paragraph,
+        className,
+        padded && componentPaddingXUsingComponentGap,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        tall && "!leading-6",
+        addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      }),
+      children
+    })
+  );
+};
+Paragraph.displayName = "Paragraph";
+
+// src/components/Button.tsx
+var import_clsx4 = __toESM(require("clsx"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Button = (_a) => {
+  var _b = _a, {
+    variant = "primary",
+    as = "button",
+    block,
+    leftIcon,
+    rightIcon,
+    className,
+    classNameLabel,
+    disabled = false,
+    children,
+    iconOnly = false,
+    colorClassName,
+    href,
+    id
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "as",
+    "block",
+    "leftIcon",
+    "rightIcon",
+    "className",
+    "classNameLabel",
+    "disabled",
+    "children",
+    "iconOnly",
+    "colorClassName",
+    "href",
+    "id"
+  ]);
+  const primaryVariantStyles = variant === "primary" && (0, import_clsx4.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-background-action-primary-normal border-background-action-primary-normal",
+    "hover:bg-background-action-primary-hover hover:border-background-action-primary-hover",
+    "focus:bg-background-action-primary-hover focus:border-background-action-primary-hover focus:outline-0",
+    "active:bg-background-action-primary-active active:border-background-action-primary-active",
+    "disabled:bg-background-action-primary-disabled disabled:border-background-action-primary-disabled disabled:text-text-on-action-primary-disabled"
+  );
+  const secondaryVariantStyles = variant === "secondary" && (0, import_clsx4.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    "bg-background-action-secondary-normal border-border-action-normal",
+    "hover:bg-background-action-secondary-hover hover:border-border-action-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:border-border-action-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:border-border-action-active active:text-text-action-primary-active",
+    "disabled:bg-background-action-primary-disabled disabled:border-border-action-disabled disabled:text-text-action-primary-disabled"
+  );
+  const tertiaryVariantStyles = variant === "tertiary" && (0, import_clsx4.default)(
+    "bg-transparent border-transparent",
+    iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    "bg-transparent border-transparent",
+    "hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
+  );
+  const primaryCriticalVariantStyles = variant === "primary-critical" && (0, import_clsx4.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
+    "hover:bg-background-action-critical-primary-hover hover:border-background-action-critical-primary-hover",
+    "focus:bg-background-action-critical-primary-hover focus:border-background-action-critical-primary-hover focus:outline-0",
+    "active:bg-background-action-critical-primary-active active:border-background-action-critical-primary-active",
+    "disabled:bg-background-action-critical-primary-disabled disabled:border-background-action-critical-primary-disabled disabled:text-text-on-action-primary-disabled"
+  );
+  const secondaryCriticalVariantStyles = variant === "secondary-critical" && (0, import_clsx4.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
+    "bg-background-action-critical-secondary-normal border-border-action-critical-normal",
+    "hover:bg-background-action-critical-secondary-hover hover:border-border-action-critical-hover hover:text-text-action-critical-hover",
+    "focus:bg-background-action-critical-secondary-hover focus:border-border-action-critical-hover focus:text-text-action-critical-hover focus:outline-0",
+    "active:bg-background-action-critical-secondary-active active:border-border-action-critical-active active:text-text-action-critical-active",
+    "disabled:bg-background-action-critical-disabled disabled:border-border-action-critical-disabled disabled:text-text-action-critical-disabled"
+  );
+  const tertiaryCriticalVariantStyles = variant === "tertiary-critical" && (0, import_clsx4.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
+    "bg-transparent border-transparent text-text-action-critical-normal",
+    "hover:bg-background-action-critical-secondary-hover hover:border-background-action-critical-secondary-hover hover:text-text-action-critical-hover",
+    "focus:bg-background-action-critical-secondary-hover focus:border-background-action-critical-secondary-hover focus:text-text-action-critical-hover focus:outline-0",
+    "active:bg-background-action-critical-secondary-active active:border-background-action-critical-secondary-active active:text-text-action-critical-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
+  );
+  const navigationVarianStyles = variant === "navigation" && (0, import_clsx4.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-transparent",
+    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
+    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
+    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
+    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
+    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
+    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
+    "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
+    "flex-col",
+    paddingUsingComponentGap
+  );
+  const notNavigationVariantStyles = variant !== "navigation" && (0, import_clsx4.default)("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
+  const buttonClasses = (0, import_clsx4.default)(
+    disabled ? "cursor-default" : "cursor-pointer",
+    block ? "w-full" : "w-fit",
+    baseTransition,
+    "rounded-sm whitespace-nowrap inline-flex items-center justify-center group/btn",
+    primaryVariantStyles,
+    secondaryVariantStyles,
+    tertiaryVariantStyles,
+    primaryCriticalVariantStyles,
+    secondaryCriticalVariantStyles,
+    tertiaryCriticalVariantStyles,
+    navigationVarianStyles,
+    notNavigationVariantStyles,
+    className
+  );
+  const labelClasses = (0, import_clsx4.default)(
+    "min-h-6 flex items-center justify-center",
+    classNameLabel,
+    componentPaddingXUsingComponentGap,
+    typography.buttonLabel
+  );
+  const Element = href ? "a" : as;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    Element,
+    __spreadProps(__spreadValues({
+      id,
+      type: Element === "button" ? "button" : void 0,
+      className: buttonClasses
+    }, props), {
+      disabled,
+      href,
+      children: [
+        leftIcon && leftIcon,
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
+        rightIcon && rightIcon
+      ]
+    })
+  );
+};
+Button.displayName = "Button";
+
+// src/components/Upload.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Upload(props) {
+  const _a = props, {
+    isLoading,
+    style,
+    errorText,
+    text = "Upload your file",
+    value,
+    onRemove
+  } = _a, rest = __objRest(_a, [
+    "isLoading",
+    "style",
+    "errorText",
+    "text",
+    "value",
+    "onRemove"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "label",
+    {
+      style: __spreadValues({}, style),
+      className: (0, import_clsx5.default)(
+        "border border-dashed border-border-primary-normal",
+        "flex flex-col items-center justify-center",
+        "p-6",
+        "cursor-pointer",
+        "relative",
+        "w-full h-[166px] desktop:w-[340px] desktop:h-[190px]",
+        componentGap
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          __spreadProps(__spreadValues({}, rest), {
+            type: "file",
+            className: "sr-only"
+          })
+        ),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "cached", className: "text-icon-primary-normal animate-spin" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Paragraph, { color: "text-secondary-normal", children: "Loading..." })
+        ] }),
+        !value && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "cloud_upload", className: "text-icon-primary-normal" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Paragraph, { color: errorText ? "text-primary-error" : "text-secondary-normal", children: errorText ? errorText : text })
+        ] }),
+        value && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "img",
+            {
+              src: value,
+              alt: "",
+              className: "absolute inset-0 object-contain object-center max-h-full max-w-full self-center justify-self-center"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            Button,
+            {
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onRemove == null ? void 0 : onRemove();
+              },
+              iconOnly: true,
+              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "delete" })
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Upload
+});

package/dist/components/Upload.js

@@ -0,0 +1,95 @@
+import {
+  Paragraph
+} from "../chunk-VG4EPHJA.js";
+import {
+  Button
+} from "../chunk-MZJS2ZAU.js";
+import {
+  Icon
+} from "../chunk-IGQVA7SC.js";
+import {
+  componentGap
+} from "../chunk-RDLEIAQU.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+
+// src/components/Upload.tsx
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Upload(props) {
+  const _a = props, {
+    isLoading,
+    style,
+    errorText,
+    text = "Upload your file",
+    value,
+    onRemove
+  } = _a, rest = __objRest(_a, [
+    "isLoading",
+    "style",
+    "errorText",
+    "text",
+    "value",
+    "onRemove"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      style: __spreadValues({}, style),
+      className: clsx(
+        "border border-dashed border-border-primary-normal",
+        "flex flex-col items-center justify-center",
+        "p-6",
+        "cursor-pointer",
+        "relative",
+        "w-full h-[166px] desktop:w-[340px] desktop:h-[190px]",
+        componentGap
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadProps(__spreadValues({}, rest), {
+            type: "file",
+            className: "sr-only"
+          })
+        ),
+        isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Icon, { name: "cached", className: "text-icon-primary-normal animate-spin" }),
+          /* @__PURE__ */ jsx(Paragraph, { color: "text-secondary-normal", children: "Loading..." })
+        ] }),
+        !value && !isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Icon, { name: "cloud_upload", className: "text-icon-primary-normal" }),
+          /* @__PURE__ */ jsx(Paragraph, { color: errorText ? "text-primary-error" : "text-secondary-normal", children: errorText ? errorText : text })
+        ] }),
+        value && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: value,
+              alt: "",
+              className: "absolute inset-0 object-contain object-center max-h-full max-w-full self-center justify-self-center"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onRemove == null ? void 0 : onRemove();
+              },
+              iconOnly: true,
+              leftIcon: /* @__PURE__ */ jsx(Icon, { name: "delete" })
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Upload
+};

package/dist/index.css

@@ -31,6 +31,7 @@
     --radius-md: 0.375rem;
     --radius-xl: 0.75rem;
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-spin: spin 1s linear infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -532,6 +533,9 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-2 {
+    top: calc(var(--spacing) * 2);
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -740,6 +744,9 @@
   .h-\[120px\] {
     height: 120px;
   }
+  .h-\[166px\] {
+    height: 166px;
+  }
   .h-auto {
     height: auto;
   }
@@ -898,6 +905,9 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
   .\!cursor-default {
     cursor: default !important;
   }
@@ -1070,9 +1080,15 @@
       border-color: var(--color-neutral-500);
     }
   }
+  .self-center {
+    align-self: center;
+  }
   .self-stretch {
     align-self: stretch;
   }
+  .justify-self-center {
+    justify-self: center;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1196,6 +1212,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
   .border-solid {
     --tw-border-style: solid;
     border-style: solid;
@@ -1728,6 +1748,12 @@
     --tw-gradient-to: transparent;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .object-contain {
+    object-fit: contain;
+  }
+  .object-center {
+    object-position: center;
+  }
   .p-0\.5 {
     padding: calc(var(--spacing) * 0.5);
   }
@@ -1743,6 +1769,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
   .p-\[calc\(var\(--spacing-mobile-component-padding\)_-_1px\)\] {
     padding: calc(var(--spacing-mobile-component-padding) - 1px);
   }
@@ -3792,6 +3821,11 @@
       display: none;
     }
   }
+  .desktop\:h-\[190px\] {
+    @container root (width >= 48rem) {
+      height: 190px;
+    }
+  }
   .desktop\:h-auto {
     @container root (width >= 48rem) {
       height: auto;
@@ -3807,6 +3841,11 @@
       max-height: calc(100vh - 32px);
     }
   }
+  .desktop\:w-\[340px\] {
+    @container root (width >= 48rem) {
+      width: 340px;
+    }
+  }
   .desktop\:w-full {
     @container root (width >= 48rem) {
       width: 100%;
@@ -4656,6 +4695,11 @@ body {
 @property --tw-contain-paint { syntax: "*"; inherits: false; }
 @property --tw-contain-style { syntax: "*"; inherits: false; }
 @property --tw-content { syntax: "*"; initial-value: ""; inherits: false; }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.65",
+  "version": "0.0.67",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/Upload.tsx

@@ -0,0 +1,85 @@
+import clsx from "clsx";
+import { ComponentProps, MouseEvent } from "react";
+import { componentGap } from "../classNames";
+import { Icon } from "./Icon";
+import { Paragraph } from "./Paragraph";
+import { Button } from "./Button";
+
+export type UploadProps = {
+    isLoading?: boolean;
+    text?: string;
+    errorText?: string;
+    onRemove?: () => void;
+} & ComponentProps<"input">;
+
+export function Upload(props: UploadProps) {
+    const {
+        isLoading,
+        style,
+        errorText,
+        text = 'Upload your file',
+        value,
+        onRemove,
+        ...rest
+    } = props;
+
+    return (
+        <label
+            style={{
+                ...style,
+            }}
+            className={clsx(
+                "border border-dashed border-border-primary-normal",
+                "flex flex-col items-center justify-center",
+                "p-6",
+                "cursor-pointer",
+                "relative",
+                "w-full h-[166px] desktop:w-[340px] desktop:h-[190px]",
+                componentGap,
+            )}
+        >
+            <input
+                {...rest}
+                type="file"
+                className="sr-only"
+            />
+
+            {isLoading && (
+                <>
+                    <Icon name="cached" className="text-icon-primary-normal animate-spin" />
+                    <Paragraph color="text-secondary-normal">Loading...</Paragraph>
+                </>
+            )}
+            
+            {!value && !isLoading && (
+                <>
+                    <Icon name="cloud_upload" className="text-icon-primary-normal" />
+                    <Paragraph color={errorText ? 'text-primary-error' : 'text-secondary-normal'}>{errorText ? errorText : text}</Paragraph>
+                </>
+            )}
+
+            {value && (
+                <>
+                    <img
+                        src={value as string}
+                        alt=""
+                        className="absolute inset-0 object-contain object-center max-h-full max-w-full self-center justify-self-center"
+                    />
+
+                    <div className="absolute right-2 top-2">
+                        <Button
+                            onClick={(e: MouseEvent) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+
+                                onRemove?.();
+                            }}
+                            iconOnly
+                            leftIcon={<Icon name="delete" />}
+                        />
+                    </div>
+                </>
+            )}
+        </label>
+    )
+}