@breadcoop/ui 1.0.25 → 2.0.0

package/dist/chunk-FWCSY2DS.mjs

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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;
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __objRest
+};

package/dist/components/LiftedButton/LiftedButton.d.mts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { LiftedButtonPreset, LiftedButtonColors } from './LiftedButtonPresets.mjs';
+
+type LiftedButtonProps = {
+    children: React__default.ReactNode;
+    leftIcon?: React__default.ReactNode;
+    rightIcon?: React__default.ReactNode;
+    disabled?: boolean;
+    preset?: LiftedButtonPreset;
+    colorOverrides?: Partial<LiftedButtonColors>;
+    offsetPx?: number;
+    durationMs?: number;
+    className?: string;
+    width?: "full" | "auto" | "mobile-full";
+    scrollTo?: string;
+} & React__default.ComponentPropsWithoutRef<"button">;
+/**
+ * LiftedButton — a square-edged button that floats up-left of a dark base layer.
+ * - Preset: Choose "primary" (default), "secondary", "destructive", or "positive"
+ * - ColorOverrides: Pass in a dict specifying manual colours
+ * - Hover: fades to alternate colors.
+ * - Active: depresses button and colors return to normal.
+ * - Transition duration defaults to 500ms.
+ * - Icons can be rendered on the right or left.
+ */
+declare function LiftedButton({ children, leftIcon, rightIcon, disabled, preset, colorOverrides, offsetPx, durationMs, className, type, width, scrollTo, ...rest }: LiftedButtonProps): react_jsx_runtime.JSX.Element;
+
+export { type LiftedButtonProps, LiftedButton as default };

package/dist/components/LiftedButton/LiftedButton.mjs

@@ -0,0 +1,149 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-FWCSY2DS.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import {
+  LIFTED_BUTTON_PRESETS,
+  colorsToStyleVars
+} from "./LiftedButtonPresets.mjs";
+import { validateCSSVariables } from "../../utils/cssValidation.mjs";
+const cloneWithClasses = (element, additionalClasses) => {
+  if (React.isValidElement(element)) {
+    const existingClassName = element.props.className || "";
+    const newClassName = `${existingClassName} ${additionalClasses}`.trim();
+    return React.cloneElement(element, {
+      className: newClassName
+    });
+  }
+  return element;
+};
+function LiftedButton(_a) {
+  var _b = _a, {
+    children,
+    leftIcon,
+    rightIcon,
+    disabled = false,
+    preset = "primary",
+    colorOverrides = {},
+    offsetPx = 4,
+    durationMs = 300,
+    className = "",
+    type = "button",
+    width = "auto",
+    scrollTo
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "leftIcon",
+    "rightIcon",
+    "disabled",
+    "preset",
+    "colorOverrides",
+    "offsetPx",
+    "durationMs",
+    "className",
+    "type",
+    "width",
+    "scrollTo"
+  ]);
+  React.useEffect(() => {
+    validateCSSVariables();
+  }, []);
+  const base = LIFTED_BUTTON_PRESETS[preset];
+  const mergedColors = __spreadValues(__spreadValues({}, base), colorOverrides);
+  const styleVars = __spreadProps(__spreadValues({}, colorsToStyleVars(mergedColors)), {
+    ["--btn-offset"]: `${offsetPx}px`,
+    ["--btn-duration"]: `${durationMs}ms`
+  });
+  const baseClassNames = [
+    "lifted-button-base",
+    width === "full" ? "w-full" : "",
+    width === "mobile-full" ? "w-full xl:w-auto" : ""
+  ];
+  const getPresetClass = () => {
+    return "lifted-button";
+  };
+  const activeClassNames = [
+    getPresetClass(),
+    // motion
+    "lifted-button-motion",
+    // lifted offset
+    "lifted-button-lifted",
+    // depress to base on active
+    "lifted-button-active"
+  ];
+  const disabledClassNames = ["lifted-button-disabled"];
+  const classNames = baseClassNames.concat(
+    disabled ? disabledClassNames : activeClassNames
+  );
+  classNames.push(className);
+  const handleClick = (e) => {
+    var _a2;
+    if (scrollTo) {
+      e.preventDefault();
+      (_a2 = document.getElementById(scrollTo)) == null ? void 0 : _a2.scrollIntoView({
+        behavior: "smooth"
+      });
+    }
+    if (rest.onClick) {
+      rest.onClick(e);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: [
+        width === "full" ? "relative block select-none align-middle" : width === "mobile-full" ? "relative block md:inline-block select-none align-middle" : "relative inline-block select-none align-middle",
+        "group"
+        // allows us to inherit hover activity on this parent in the children
+      ].join(" "),
+      style: styleVars,
+      children: [
+        disabled ? null : /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "lifted-button-shadow",
+            style: {
+              transform: `translateX(2px) translateY(2px)`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          __spreadProps(__spreadValues({
+            type,
+            className: classNames.join(" "),
+            onClick: handleClick
+          }, rest), {
+            children: [
+              leftIcon ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "shrink-0 py-[5px] flex items-center justify-center",
+                  "aria-hidden": true,
+                  children: cloneWithClasses(leftIcon, "w-6 h-6")
+                }
+              ) : null,
+              /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap mt-1 leading-none p-[5px]", children }),
+              rightIcon ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "shrink-0 py-[5px] flex items-center justify-center",
+                  "aria-hidden": true,
+                  children: cloneWithClasses(rightIcon, "w-6 h-6")
+                }
+              ) : null
+            ]
+          })
+        )
+      ]
+    }
+  );
+}
+export {
+  LiftedButton as default
+};

package/dist/components/LiftedButton/LiftedButtonPresets.d.mts

@@ -0,0 +1,55 @@
+type LiftedButtonColors = {
+    bg: string;
+    text: string;
+    hoverBg: string;
+    hoverText: string;
+    shadowBg: string;
+};
+type LiftedButtonPreset = keyof typeof LIFTED_BUTTON_PRESETS;
+declare const LIFTED_BUTTON_PRESETS: {
+    primary: {
+        bg: string;
+        text: string;
+        hoverBg: string;
+        hoverText: string;
+        shadowBg: string;
+    };
+    secondary: {
+        bg: string;
+        text: string;
+        hoverBg: string;
+        hoverText: string;
+        shadowBg: string;
+    };
+    destructive: {
+        bg: string;
+        text: string;
+        hoverBg: string;
+        hoverText: string;
+        shadowBg: string;
+    };
+    positive: {
+        bg: string;
+        text: string;
+        hoverBg: string;
+        hoverText: string;
+        shadowBg: string;
+    };
+    stroke: {
+        bg: string;
+        text: string;
+        hoverBg: string;
+        hoverText: string;
+        shadowBg: string;
+    };
+    burn: {
+        bg: string;
+        text: string;
+        hoverBg: string;
+        hoverText: string;
+        shadowBg: string;
+    };
+};
+declare function colorsToStyleVars(c: LiftedButtonColors): React.CSSProperties;
+
+export { LIFTED_BUTTON_PRESETS, type LiftedButtonColors, type LiftedButtonPreset, colorsToStyleVars };

package/dist/components/LiftedButton/LiftedButtonPresets.mjs

@@ -0,0 +1,85 @@
+import "../../chunk-FWCSY2DS.mjs";
+const LIFTED_BUTTON_PRESETS = {
+  primary: {
+    bg: "--color-primary-orange",
+    text: "--color-paper-main",
+    hoverBg: "--color-orange-1",
+    hoverText: "#ffffff",
+    shadowBg: "#595959"
+  },
+  secondary: {
+    bg: "#FBDED1",
+    text: "--color-primary-orange",
+    hoverBg: "#FFF1EA",
+    hoverText: "--color-primary-orange",
+    shadowBg: "#595959"
+  },
+  destructive: {
+    bg: "--color-system-red",
+    text: "--color-paper-main",
+    hoverBg: "#BF0A00",
+    hoverText: "#ffffff",
+    shadowBg: "#595959"
+  },
+  positive: {
+    bg: "--color-system-green",
+    text: "--color-paper-main",
+    hoverBg: "#2B8F00",
+    hoverText: "#ffffff",
+    shadowBg: "#595959"
+  },
+  stroke: {
+    bg: "--color-paper-main",
+    text: "--color-surface-ink",
+    hoverBg: "--color-paper-2",
+    hoverText: "--color-surface-ink",
+    shadowBg: "#595959"
+  },
+  burn: {
+    bg: "--color-red-0",
+    text: "--color-red-main",
+    hoverBg: "--color-red-1",
+    hoverText: "--color-red-main",
+    shadowBg: "#595959"
+  }
+};
+function colorsToStyleVars(c) {
+  return {
+    ["--btn-bg"]: asCssValueWithFallback(c.bg),
+    ["--btn-text"]: asCssValueWithFallback(c.text),
+    ["--btn-hover-bg"]: asCssValueWithFallback(c.hoverBg),
+    ["--btn-hover-text"]: asCssValueWithFallback(c.hoverText),
+    ["--btn-shadow"]: asCssValueWithFallback(c.shadowBg)
+  };
+}
+function asCssValue(v) {
+  if (!v) return "";
+  if (v.includes("var(")) return v;
+  if (v.startsWith("--")) return `var(${v})`;
+  return v;
+}
+const CSS_VAR_FALLBACKS = {
+  "--color-primary-orange": "#ea6023",
+  "--color-paper-main": "#f6f3eb",
+  "--color-surface-ink": "#1b201a",
+  "--color-system-red": "#df0b00",
+  "--color-system-green": "#32a800",
+  "--color-orange-1": "#d14a0f",
+  "--color-paper-2": "#eae2d6",
+  "--color-red-0": "#f7cac2",
+  "--color-red-1": "#f4b8ad",
+  "--color-red-main": "#df0b00"
+};
+function asCssValueWithFallback(v) {
+  if (!v) return "";
+  if (v.includes("var(")) return v;
+  if (v.startsWith("--")) {
+    const fallback = CSS_VAR_FALLBACKS[v] || "#000000";
+    return `var(${v}, ${fallback})`;
+  }
+  return v;
+}
+export {
+  LIFTED_BUTTON_PRESETS,
+  colorsToStyleVars
+};

package/dist/components/LiftedButton/index.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/components/Logo/Logo.d.mts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithoutRef } from 'react';
+
+type LogoColor = "orange" | "blue" | "jade" | "white";
+type LogoVariant = "square" | "line";
+type LogoProps = {
+    /** Size of the logo in pixels. Defaults to 32px */
+    size?: number;
+    /** Additional CSS classes to apply to the logo */
+    className?: string;
+    /** Color variant of the logo: "orange" (default), "blue", "jade", or "white" */
+    color?: LogoColor;
+    /** Variant of the logo: "square" or "line" */
+    variant?: LogoVariant;
+    /** Optional text to display next to the logo */
+    text?: string;
+} & ComponentPropsWithoutRef<"svg">;
+/**
+ * Logo component that renders the Bread UI Kit logo SVG.
+ *
+ * @param size - Size of the logo in pixels (default: 32)
+ * @param className - Additional CSS classes
+ * @param color - Color variant: "orange" (default), "blue", "jade", or "white"
+ * @param variant - Variant of the logo: "square" or "line"
+ * @param text - Optional text to display next to the logo
+ */
+declare function Logo({ size, className, color, variant, text, ...rest }: LogoProps): react_jsx_runtime.JSX.Element | undefined;
+
+export { type LogoColor, type LogoProps, type LogoVariant, Logo as default };