@dmsi/wedgekit-react 0.0.2

package/dist/components/Password.js

@@ -0,0 +1,53 @@
+"use client";
+import {
+  InputBase
+} from "../chunk-BWRHL2AG.js";
+import "../chunk-4C66DLIJ.js";
+import {
+  Icon
+} from "../chunk-IGQVA7SC.js";
+import "../chunk-KX3O6GJ6.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+
+// src/components/Password.tsx
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var Password = (_a) => {
+  var props = __objRest(_a, []);
+  const [show, setShow] = useState(false);
+  return /* @__PURE__ */ jsx(
+    InputBase,
+    __spreadProps(__spreadValues({}, props), {
+      type: show ? "text" : "password",
+      after: /* @__PURE__ */ jsx(WhichIcon, { show, setShow })
+    })
+  );
+};
+var WhichIcon = ({ show, setShow }) => {
+  if (show) {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        name: "visibility_off",
+        className: "cursor-pointer",
+        onClick: () => setShow(false)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: "visibility",
+      className: "cursor-pointer",
+      onClick: () => setShow(true)
+    }
+  );
+};
+Password.displayName = "Password";
+export {
+  Password
+};

package/dist/components/ProjectBar.cjs

@@ -0,0 +1,242 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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 __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/ProjectBar.tsx
+var ProjectBar_exports = {};
+__export(ProjectBar_exports, {
+  ProjectBar: () => ProjectBar
+});
+module.exports = __toCommonJS(ProjectBar_exports);
+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/useMatchesMedia.tsx
+var import_react = require("react");
+var useMatchesMedia = (query) => {
+  const [matches, setMatches] = (0, import_react.useState)(
+    () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
+  );
+  (0, import_react.useLayoutEffect)(() => {
+    const mediaQueryList = window.matchMedia(query);
+    const listener = (event) => {
+      setMatches(event.matches);
+    };
+    mediaQueryList.addEventListener("change", listener);
+    setMatches(mediaQueryList.matches);
+    return () => {
+      mediaQueryList.removeEventListener("change", listener);
+    };
+  }, [query]);
+  return matches;
+};
+var useMatchesMobile = () => {
+  const isMobile = useMatchesMedia("(width < 48rem)");
+  return isMobile;
+};
+
+// src/components/ProjectBar.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ProjectBar = ({
+  left,
+  right,
+  mobileLeft,
+  mobileRight
+}) => {
+  const isMobile = useMatchesMobile();
+  const tokenOverrides = isMobile ? {
+    "--color-background-primary-normal": "var(--color-brand-400)",
+    "--color-background-action-primary-normal": "var(--color-neutral-000)",
+    "--color-background-action-primary-hover": "var(--color-critical-100)",
+    "--color-background-action-primary-active": "var(--color-neutral-200)",
+    "--color-background-action-secondary-normal": "var(--color-brand-400)",
+    "--color-background-action-secondary-hover": "var(--color-critical-100)",
+    "--color-text-on-action-primary-normal": "var(--color-brand-400)",
+    "--color-text-primary-normal": "var(--color-neutral-000)",
+    "--color-text-action-primary-normal": "var(--color-neutral-000)",
+    "--color-text-action-primary-hover": "var(--color-critical-500)",
+    "--color-text-action-primary-active": "var(--color-critical-300)",
+    "--color-border-action-normal": "var(--color-neutral-000)",
+    "--color-border-action-hover": "var(--color-critical-500)",
+    "--color-border-action-active": "var(--color-critical-300)"
+  } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: __spreadValues({}, tokenOverrides),
+      className: (0, import_clsx2.default)(
+        "flex items-center justify-between",
+        "bg-background-primary-normal",
+        paddingYUsingLayoutGroupGap,
+        containerPaddingX,
+        layoutGap
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx2.default)("hidden desktop:block flex-1 leading-[1]"), children: left }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx2.default)("hidden desktop:flex items-center", layoutGroupGap), children: right }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx2.default)("flex flex-col desktop:hidden"), children: mobileLeft }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx2.default)("flex items-center desktop:hidden", layoutGroupGap), children: mobileRight })
+      ]
+    }
+  );
+};
+ProjectBar.displayName = "ProjectBar";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProjectBar
+});

package/dist/components/ProjectBar.js

@@ -0,0 +1,63 @@
+import {
+  useMatchesMobile
+} from "../chunk-SEKKGFM6.js";
+import {
+  containerPaddingX,
+  layoutGap,
+  layoutGroupGap,
+  paddingYUsingLayoutGroupGap
+} from "../chunk-KX3O6GJ6.js";
+import {
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+
+// src/components/ProjectBar.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ProjectBar = ({
+  left,
+  right,
+  mobileLeft,
+  mobileRight
+}) => {
+  const isMobile = useMatchesMobile();
+  const tokenOverrides = isMobile ? {
+    "--color-background-primary-normal": "var(--color-brand-400)",
+    "--color-background-action-primary-normal": "var(--color-neutral-000)",
+    "--color-background-action-primary-hover": "var(--color-critical-100)",
+    "--color-background-action-primary-active": "var(--color-neutral-200)",
+    "--color-background-action-secondary-normal": "var(--color-brand-400)",
+    "--color-background-action-secondary-hover": "var(--color-critical-100)",
+    "--color-text-on-action-primary-normal": "var(--color-brand-400)",
+    "--color-text-primary-normal": "var(--color-neutral-000)",
+    "--color-text-action-primary-normal": "var(--color-neutral-000)",
+    "--color-text-action-primary-hover": "var(--color-critical-500)",
+    "--color-text-action-primary-active": "var(--color-critical-300)",
+    "--color-border-action-normal": "var(--color-neutral-000)",
+    "--color-border-action-hover": "var(--color-critical-500)",
+    "--color-border-action-active": "var(--color-critical-300)"
+  } : {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: __spreadValues({}, tokenOverrides),
+      className: clsx(
+        "flex items-center justify-between",
+        "bg-background-primary-normal",
+        paddingYUsingLayoutGroupGap,
+        containerPaddingX,
+        layoutGap
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: clsx("hidden desktop:block flex-1 leading-[1]"), children: left }),
+        /* @__PURE__ */ jsx("div", { className: clsx("hidden desktop:flex items-center", layoutGroupGap), children: right }),
+        /* @__PURE__ */ jsx("div", { className: clsx("flex flex-col desktop:hidden"), children: mobileLeft }),
+        /* @__PURE__ */ jsx("div", { className: clsx("flex items-center desktop:hidden", layoutGroupGap), children: mobileRight })
+      ]
+    }
+  );
+};
+ProjectBar.displayName = "ProjectBar";
+export {
+  ProjectBar
+};