@dmsi/wedgekit-react 0.0.2

package/dist/components/Breadcrumbs.cjs

@@ -0,0 +1,376 @@
+"use strict";
+"use client";
+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/Breadcrumbs.tsx
+var Breadcrumbs_exports = {};
+__export(Breadcrumbs_exports, {
+  Breadcrumb: () => Breadcrumb,
+  Breadcrumbs: () => Breadcrumbs
+});
+module.exports = __toCommonJS(Breadcrumbs_exports);
+var import_react = __toESM(require("react"), 1);
+var import_clsx4 = __toESM(require("clsx"), 1);
+
+// src/components/Link.tsx
+var import_clsx2 = __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 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 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 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/Link.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Link = (_a) => {
+  var _b = _a, {
+    as = "a",
+    className,
+    variant = "primary",
+    typographyStyle = "paragraph",
+    disabled = false,
+    color,
+    paddedY,
+    align,
+    underline = false
+  } = _b, props = __objRest(_b, [
+    "as",
+    "className",
+    "variant",
+    "typographyStyle",
+    "disabled",
+    "color",
+    "paddedY",
+    "align",
+    "underline"
+  ]);
+  const Component = as;
+  const primaryStateStyles = variant === "primary" && !disabled && (0, import_clsx2.default)(
+    "text-text-link-normal hover:text-text-link-hover active:text-text-link-active"
+  );
+  const secondaryStateStyles = variant === "secondary" && !disabled && (0, import_clsx2.default)(
+    "text-text-primary-normal hover:text-text-link-hover active:text-text-link-active"
+  );
+  const criticalStateStyles = variant === "critical" && !disabled && (0, import_clsx2.default)(
+    "text-text-action-critical-normal hover:text-text-action-critical-hover active:text-text-action-critical-active"
+  );
+  const criticalStateDisabledStyles = disabled && variant === "critical" && (0, import_clsx2.default)("text-text-action-critical-disabled");
+  const disabledStateStyles = disabled && ["primary", "secondary"].includes(variant) && (0, import_clsx2.default)("text-text-link-disabled");
+  const disabledStyles = disabled && (0, import_clsx2.default)("pointer-events-none cursor-default");
+  const underlineStyles = underline ? "decoration-current" : "decoration-transparent";
+  const paddingY = paddedY && componentPaddingY;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    __spreadProps(__spreadValues({
+      className: (0, import_clsx2.default)(
+        "inline",
+        disabled ? "cursor-default" : "cursor-pointer",
+        "underline decoration-[10%] underline-offset-[32%]",
+        !disabled && "hover:decoration-current",
+        !disabled && "active:decoration-transparent",
+        "flex flex-col items-center justify-center",
+        baseTransition,
+        primaryStateStyles,
+        secondaryStateStyles,
+        criticalStateStyles,
+        criticalStateDisabledStyles,
+        disabledStateStyles,
+        disabledStyles,
+        underlineStyles,
+        typographyStyle === "caption" && typography.caption,
+        typographyStyle === "paragraph" && typography.paragraph,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        paddingY,
+        className
+      )
+    }, props), {
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      }),
+      "aria-disabled": disabled,
+      tabIndex: disabled ? -1 : void 0
+    })
+  );
+};
+Link.displayName = "Link";
+
+// src/components/Icon.tsx
+var import_clsx3 = __toESM(require("clsx"), 1);
+var import_jsx_runtime2 = 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_runtime2.jsx)(
+    "span",
+    __spreadProps(__spreadValues({}, props), {
+      className: (0, import_clsx3.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/Breadcrumbs.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Breadcrumb = ({ href, children, onClick }) => {
+  const linkPadding = (0, import_clsx4.default)(
+    "py-[calc(var(--spacing-mobile-component-padding)_+_3px)] !text-text-link-normal  whitespace-nowrap"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Link, { className: linkPadding, href, onClick, children }) }, href);
+};
+var Chevron = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "chevron_right", size: 16 }) });
+var Breadcrumbs = ({
+  asCardStyle,
+  crumbs
+}) => {
+  const scrollableElement = import_react.default.useRef(null);
+  const [isOverflow, setIsOverflow] = (0, import_react.useState)(false);
+  (0, import_react.useLayoutEffect)(() => {
+    var _a, _b, _c;
+    console.log(scrollableElement.current);
+    (_c = scrollableElement.current) == null ? void 0 : _c.scrollTo({
+      left: (_b = (_a = scrollableElement.current) == null ? void 0 : _a.scrollWidth) != null ? _b : 0,
+      behavior: "instant"
+    });
+    updateOverflow();
+  }, [scrollableElement, crumbs]);
+  const updateOverflow = () => {
+    if (!scrollableElement.current) return;
+    setIsOverflow(
+      scrollableElement.current.scrollWidth !== scrollableElement.current.clientWidth && scrollableElement.current.scrollLeft > 0
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "nav",
+    {
+      className: (0, import_clsx4.default)(
+        "relative select-none flex items-center  max-w-full w-full",
+        {
+          "bg-white rounded-base shadow-4 px-desktop-layout-padding": asCardStyle,
+          "px-desktop-container-padding": !asCardStyle
+        }
+      ),
+      "aria-label": "Breadcrumb",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: (0, import_clsx4.default)(
+              isOverflow ? "opacity-100" : "opacity-0",
+              "absolute left-6 top-0 h-full w-12 bg-gradient-to-r from-white to-transparent pointer-events-none z-10 transition"
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "ol",
+          {
+            className: "flex items-center overflow-x-scroll",
+            style: { scrollbarWidth: "none" },
+            onScroll: updateOverflow,
+            ref: (el) => {
+              scrollableElement.current = el;
+            },
+            children: crumbs.map((crumb, index) => {
+              const { href, children, onClick } = crumb;
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react.default.Fragment, { children: [
+                index > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chevron, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Breadcrumb, { href, onClick, children })
+              ] }, index);
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+Breadcrumbs.displayName = "Breadcrumbs";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Breadcrumb,
+  Breadcrumbs
+});

package/dist/components/Breadcrumbs.js

@@ -0,0 +1,90 @@
+"use client";
+import {
+  Link
+} from "../chunk-SY3HT54E.js";
+import {
+  Icon
+} from "../chunk-IGQVA7SC.js";
+import "../chunk-KX3O6GJ6.js";
+import "../chunk-ORMEWXMH.js";
+
+// src/components/Breadcrumbs.tsx
+import React, { useLayoutEffect, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Breadcrumb = ({ href, children, onClick }) => {
+  const linkPadding = clsx(
+    "py-[calc(var(--spacing-mobile-component-padding)_+_3px)] !text-text-link-normal  whitespace-nowrap"
+  );
+  return /* @__PURE__ */ jsx("li", { className: "flex items-center", children: /* @__PURE__ */ jsx(Link, { className: linkPadding, href, onClick, children }) }, href);
+};
+var Chevron = () => /* @__PURE__ */ jsx("li", { className: "flex items-center", children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right", size: 16 }) });
+var Breadcrumbs = ({
+  asCardStyle,
+  crumbs
+}) => {
+  const scrollableElement = React.useRef(null);
+  const [isOverflow, setIsOverflow] = useState(false);
+  useLayoutEffect(() => {
+    var _a, _b, _c;
+    console.log(scrollableElement.current);
+    (_c = scrollableElement.current) == null ? void 0 : _c.scrollTo({
+      left: (_b = (_a = scrollableElement.current) == null ? void 0 : _a.scrollWidth) != null ? _b : 0,
+      behavior: "instant"
+    });
+    updateOverflow();
+  }, [scrollableElement, crumbs]);
+  const updateOverflow = () => {
+    if (!scrollableElement.current) return;
+    setIsOverflow(
+      scrollableElement.current.scrollWidth !== scrollableElement.current.clientWidth && scrollableElement.current.scrollLeft > 0
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: clsx(
+        "relative select-none flex items-center  max-w-full w-full",
+        {
+          "bg-white rounded-base shadow-4 px-desktop-layout-padding": asCardStyle,
+          "px-desktop-container-padding": !asCardStyle
+        }
+      ),
+      "aria-label": "Breadcrumb",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(
+              isOverflow ? "opacity-100" : "opacity-0",
+              "absolute left-6 top-0 h-full w-12 bg-gradient-to-r from-white to-transparent pointer-events-none z-10 transition"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "ol",
+          {
+            className: "flex items-center overflow-x-scroll",
+            style: { scrollbarWidth: "none" },
+            onScroll: updateOverflow,
+            ref: (el) => {
+              scrollableElement.current = el;
+            },
+            children: crumbs.map((crumb, index) => {
+              const { href, children, onClick } = crumb;
+              return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                index > 0 && /* @__PURE__ */ jsx(Chevron, {}),
+                /* @__PURE__ */ jsx(Breadcrumb, { href, onClick, children })
+              ] }, index);
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+Breadcrumbs.displayName = "Breadcrumbs";
+export {
+  Breadcrumb,
+  Breadcrumbs
+};