@easypost/easy-ui 1.0.0-alpha.6 → 1.0.0-alpha.61

package/__chunks__/Theme-CKTfAcvs.mjs

@@ -0,0 +1,147 @@
+import React__default, { createContext, useContext, useState, useMemo } from "react";
+import { e as ezuiTokens } from "./tokens-BolVbjJp.mjs";
+import { getTokenAliases } from "../utilities/tokens.mjs";
+import { tokenSafeKebabCase } from "../utilities/css.mjs";
+const defaultTheme = createTheme(() => {
+  return getThemeFromTokens("theme.light");
+});
+const invertedColorSchemes = {
+  light: "dark",
+  dark: "light",
+  system: "inverted",
+  inverted: "system"
+};
+function NoopComponent(props) {
+  return React__default.createElement(React__default.Fragment, null, props.children);
+}
+const TrackerContext = createContext(0);
+const ThemeContext = createContext(null);
+const ColorSchemeContext = createContext(null);
+function ThemeProvider({ children, colorScheme: colorSchemeFromUser, theme: themeFromUser }) {
+  const parentTheme = useContext(ThemeContext);
+  const isRoot = !parentTheme;
+  if (!isRoot && !themeFromUser && !colorSchemeFromUser) {
+    throw new Error("Must supply theme or colorScheme to ThemeProvider");
+  }
+  const parentContext = useContext(TrackerContext);
+  const [count] = useState(() => parentContext + 1);
+  const ThemeContextComponent = isRoot || themeFromUser ? ThemeContextProvider : NoopComponent;
+  const ColorSchemeContextComponent = isRoot || colorSchemeFromUser ? ColorSchemeContextProvider : NoopComponent;
+  const theme = themeFromUser ? themeFromUser : defaultTheme;
+  const colorScheme = colorSchemeFromUser ? colorSchemeFromUser : "system";
+  return React__default.createElement(TrackerContext.Provider, {
+    value: count
+  }, React__default.createElement(ThemeContextComponent, {
+    theme
+  }, React__default.createElement(ColorSchemeContextComponent, {
+    colorScheme
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Style, {
+    isRoot
+  }), children))));
+}
+function createTheme(themeCreator) {
+  return themeCreator;
+}
+function useTheme() {
+  const themeContext = useContext(ThemeContext);
+  if (!themeContext) {
+    throw new Error("useTheme() must be used within a ThemeProvier");
+  }
+  return themeContext;
+}
+function useColorScheme() {
+  const colorSchemeContext = useContext(ColorSchemeContext);
+  if (!colorSchemeContext) {
+    throw new Error("useColorScheme() must be used within a ThemeProvider");
+  }
+  return colorSchemeContext;
+}
+function Style({ isRoot }) {
+  const parentContext = useContext(TrackerContext);
+  const themeCreator = useTheme();
+  const { resolvedColorScheme } = useColorScheme();
+  const fingerprint = useMemo(() => {
+    return `ezui-theme-style-level-${parentContext}`;
+  }, [parentContext]);
+  const selector = isRoot ? ":root" : `#${fingerprint} ~ *`;
+  const css = useMemo(() => {
+    return resolvedColorScheme === "system" ? `${selector} {
+        ${renderThemeVariables(themeCreator({
+      colorScheme: "light"
+    }))}
+      }
+      @media (prefers-color-scheme: dark) {
+        ${selector} {
+          ${renderThemeVariables(themeCreator({
+      colorScheme: "dark"
+    }))}
+        }
+      }` : resolvedColorScheme === "inverted" ? `${selector} {
+        ${renderThemeVariables(themeCreator({
+      colorScheme: "dark"
+    }))}
+      }
+      @media (prefers-color-scheme: dark) {
+        ${selector} {
+          ${renderThemeVariables(themeCreator({
+      colorScheme: "light"
+    }))}
+        }
+      }` : `${selector} {
+        ${renderThemeVariables(themeCreator({
+      colorScheme: resolvedColorScheme
+    }))}
+      }`;
+  }, [resolvedColorScheme, selector, themeCreator]);
+  return React__default.createElement("style", {
+    id: fingerprint,
+    dangerouslySetInnerHTML: {
+      __html: css
+    }
+  });
+}
+function ThemeContextProvider({ theme, children }) {
+  return React__default.createElement(ThemeContext.Provider, {
+    value: theme
+  }, children);
+}
+function ColorSchemeContextProvider({ colorScheme, children }) {
+  const parentColorSchemeContext = useContext(ColorSchemeContext);
+  const colorSchemeContextValue = useMemo(() => {
+    const resolvedColorScheme = colorScheme === "inverted" && parentColorSchemeContext ? invertedColorSchemes[parentColorSchemeContext.resolvedColorScheme] : colorScheme;
+    return {
+      userColorScheme: colorScheme,
+      resolvedColorScheme
+    };
+  }, [colorScheme, parentColorSchemeContext]);
+  return React__default.createElement(ColorSchemeContext.Provider, {
+    value: colorSchemeContextValue
+  }, children);
+}
+function getThemeInstanceVariables(theme) {
+  return Object.fromEntries(Object.entries(theme).map(([key, value]) => {
+    const property = tokenSafeKebabCase(key);
+    return [`--ezui-${property}`, value];
+  }));
+}
+function renderThemeVariables(theme) {
+  const variables = getThemeInstanceVariables(theme);
+  const css = Object.entries(variables).map((entry) => entry.join(": ") + ";").join("\n");
+  return css;
+}
+function getThemeFromTokens(prefix) {
+  const theme = Object.fromEntries(Object.keys(ezuiTokens).filter((key) => key.startsWith(`${prefix}.`)).map((key) => key.replace(new RegExp(`^${prefix}.`), "")).map((key) => {
+    const value = `var(--ezui-${tokenSafeKebabCase(prefix)}-${tokenSafeKebabCase(key)})`;
+    return [key, value];
+  }));
+  return theme;
+}
+function getThemeTokenAliases(pattern) {
+  return getTokenAliases(getThemeFromTokens("theme.light"), pattern);
+}
+export {
+  ThemeProvider as T,
+  createTheme as c,
+  defaultTheme as d,
+  getThemeTokenAliases as g
+};

package/__chunks__/Toggle-BiaALtul.mjs

@@ -0,0 +1,135 @@
+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;
+};
+import { $ as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "./mergeProps-T961Q1yJ.mjs";
+import { $ as $5dc95899b306f630$export$c9058316764c140e } from "./mergeRefs-CCV6itCY.mjs";
+import React__default, { forwardRef } from "react";
+import { T as Text } from "./Text-CQ_8wg0t.mjs";
+import { classNames } from "../utilities/css.mjs";
+import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "./useToggleState-kFojjzgV.mjs";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "./useToggle-CU6aSiOx.mjs";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "./useFocusRing-BUwbt1Yv.mjs";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "./useHover-BOYR4wqI.mjs";
+function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
+  let { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly } = $d2c8e2b0480f3f34$export$cbe85ee05b554577(props, state, ref);
+  return {
+    labelProps,
+    inputProps: __spreadProps(__spreadValues({}, inputProps), {
+      role: "switch",
+      checked: isSelected
+    }),
+    isSelected,
+    isPressed,
+    isDisabled,
+    isReadOnly
+  };
+}
+const Switch$1 = "_Switch_dl3wy_5";
+const focusVisible = "_focusVisible_dl3wy_13";
+const track = "_track_dl3wy_25";
+const thumb = "_thumb_dl3wy_29";
+const hovered = "_hovered_dl3wy_33";
+const disabled = "_disabled_dl3wy_33";
+const selected = "_selected_dl3wy_37";
+const styles$1 = {
+  Switch: Switch$1,
+  focusVisible,
+  track,
+  thumb,
+  hovered,
+  disabled,
+  selected
+};
+function Switch(props) {
+  const { isDisabled, isFocusVisible, isHovered, isSelected } = props;
+  const className = classNames(styles$1.Switch, isDisabled && styles$1.disabled, isFocusVisible && styles$1.focusVisible, isHovered && styles$1.hovered, isSelected && styles$1.selected);
+  return React__default.createElement("span", {
+    className
+  }, React__default.createElement("svg", {
+    width: 32,
+    height: 16,
+    "aria-hidden": "true"
+  }, React__default.createElement("rect", {
+    className: styles$1.track,
+    x: 0,
+    y: 0,
+    width: 32,
+    height: 16,
+    rx: 8
+  }), React__default.createElement("circle", {
+    className: styles$1.thumb,
+    cx: isSelected ? 32 - 8 : 8,
+    cy: 8,
+    r: 6
+  })));
+}
+const Toggle$1 = "_Toggle_n6tef_5";
+const text = "_text_n6tef_25";
+const input = "_input_n6tef_26";
+const styles = {
+  Toggle: Toggle$1,
+  text,
+  input
+};
+const Toggle = forwardRef((props, externalRef) => {
+  const _a = props, { children, isDisabled, defaultSelected: _defaultSelected, isReadOnly: _isReadOnly, isSelected: _isSelected, name: _name, onChange: _onChange, value: _value } = _a, restProps = __objRest(_a, ["children", "isDisabled", "defaultSelected", "isReadOnly", "isSelected", "name", "onChange", "value"]);
+  const ref = React__default.useRef(null);
+  const state = $3017fa7ffdddec74$export$8042c6c013fd5226(props);
+  const { inputProps: inputPropsFromSwitch } = $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref);
+  const { isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
+  const { isHovered, hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456(props);
+  const isSelected = state.isSelected;
+  const className = classNames(styles.Toggle, !children && styles.standalone);
+  const textColor = isDisabled ? "neutral.300" : "primary.800";
+  const RootComponent = children ? "label" : "span";
+  const rootProps = children ? hoverProps : {};
+  const inputProps = children ? $3ef42575df84b30b$export$9d1611c77c2fe928(restProps, inputPropsFromSwitch, focusProps) : $3ef42575df84b30b$export$9d1611c77c2fe928(restProps, inputPropsFromSwitch, focusProps, hoverProps);
+  return React__default.createElement(RootComponent, __spreadProps(__spreadValues({}, rootProps), {
+    className
+  }), React__default.createElement("input", __spreadProps(__spreadValues({}, inputProps), {
+    className: styles.input,
+    ref: $5dc95899b306f630$export$c9058316764c140e(ref, externalRef)
+  })), React__default.createElement(Switch, {
+    isDisabled,
+    isFocusVisible,
+    isHovered,
+    isSelected
+  }), children && React__default.createElement("span", {
+    className: styles.text
+  }, React__default.createElement(Text, {
+    variant: "body1",
+    color: textColor
+  }, children)));
+});
+Toggle.displayName = "Toggle";
+export {
+  Toggle as T
+};

package/__chunks__/Toggle-CYKsPbEK.js

@@ -0,0 +1,134 @@
+"use strict";
+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;
+};
+const mergeProps = require("./mergeProps-DniMwM6P.js");
+const mergeRefs = require("./mergeRefs-CQsNYO0P.js");
+const React = require("react");
+const Text = require("./Text-Dfbyoxsz.js");
+const utilities_css = require("../utilities/css.js");
+const useToggleState = require("./useToggleState-CdbEMLRz.js");
+const useToggle = require("./useToggle-D7gzXCXF.js");
+const useFocusRing = require("./useFocusRing-DFRFvht_.js");
+const useHover = require("./useHover-BIKwjrCT.js");
+function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
+  let { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly } = useToggle.$d2c8e2b0480f3f34$export$cbe85ee05b554577(props, state, ref);
+  return {
+    labelProps,
+    inputProps: __spreadProps(__spreadValues({}, inputProps), {
+      role: "switch",
+      checked: isSelected
+    }),
+    isSelected,
+    isPressed,
+    isDisabled,
+    isReadOnly
+  };
+}
+const Switch$1 = "_Switch_dl3wy_5";
+const focusVisible = "_focusVisible_dl3wy_13";
+const track = "_track_dl3wy_25";
+const thumb = "_thumb_dl3wy_29";
+const hovered = "_hovered_dl3wy_33";
+const disabled = "_disabled_dl3wy_33";
+const selected = "_selected_dl3wy_37";
+const styles$1 = {
+  Switch: Switch$1,
+  focusVisible,
+  track,
+  thumb,
+  hovered,
+  disabled,
+  selected
+};
+function Switch(props) {
+  const { isDisabled, isFocusVisible, isHovered, isSelected } = props;
+  const className = utilities_css.classNames(styles$1.Switch, isDisabled && styles$1.disabled, isFocusVisible && styles$1.focusVisible, isHovered && styles$1.hovered, isSelected && styles$1.selected);
+  return React.createElement("span", {
+    className
+  }, React.createElement("svg", {
+    width: 32,
+    height: 16,
+    "aria-hidden": "true"
+  }, React.createElement("rect", {
+    className: styles$1.track,
+    x: 0,
+    y: 0,
+    width: 32,
+    height: 16,
+    rx: 8
+  }), React.createElement("circle", {
+    className: styles$1.thumb,
+    cx: isSelected ? 32 - 8 : 8,
+    cy: 8,
+    r: 6
+  })));
+}
+const Toggle$1 = "_Toggle_n6tef_5";
+const text = "_text_n6tef_25";
+const input = "_input_n6tef_26";
+const styles = {
+  Toggle: Toggle$1,
+  text,
+  input
+};
+const Toggle = React.forwardRef((props, externalRef) => {
+  const _a = props, { children, isDisabled, defaultSelected: _defaultSelected, isReadOnly: _isReadOnly, isSelected: _isSelected, name: _name, onChange: _onChange, value: _value } = _a, restProps = __objRest(_a, ["children", "isDisabled", "defaultSelected", "isReadOnly", "isSelected", "name", "onChange", "value"]);
+  const ref = React.useRef(null);
+  const state = useToggleState.$3017fa7ffdddec74$export$8042c6c013fd5226(props);
+  const { inputProps: inputPropsFromSwitch } = $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref);
+  const { isFocusVisible, focusProps } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f();
+  const { isHovered, hoverProps } = useHover.$6179b936705e76d3$export$ae780daf29e6d456(props);
+  const isSelected = state.isSelected;
+  const className = utilities_css.classNames(styles.Toggle, !children && styles.standalone);
+  const textColor = isDisabled ? "neutral.300" : "primary.800";
+  const RootComponent = children ? "label" : "span";
+  const rootProps = children ? hoverProps : {};
+  const inputProps = children ? mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(restProps, inputPropsFromSwitch, focusProps) : mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(restProps, inputPropsFromSwitch, focusProps, hoverProps);
+  return React.createElement(RootComponent, __spreadProps(__spreadValues({}, rootProps), {
+    className
+  }), React.createElement("input", __spreadProps(__spreadValues({}, inputProps), {
+    className: styles.input,
+    ref: mergeRefs.$5dc95899b306f630$export$c9058316764c140e(ref, externalRef)
+  })), React.createElement(Switch, {
+    isDisabled,
+    isFocusVisible,
+    isHovered,
+    isSelected
+  }), children && React.createElement("span", {
+    className: styles.text
+  }, React.createElement(Text.Text, {
+    variant: "body1",
+    color: textColor
+  }, children)));
+});
+Toggle.displayName = "Toggle";
+exports.Toggle = Toggle;