@easypost/easy-ui 1.0.0-alpha.0

package/types.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type tokens from "@easypost/easy-ui-tokens/js/tokens";
+export type DesignTokens = typeof tokens;
+export type DesignTokenAliases = keyof DesignTokens;
+export type Falsy = boolean | undefined | null | 0;
+export type Namespace<Set, Needle extends string> = Set extends `${Needle}${infer _X}` ? _X : never;
+export type TokenNamespace<Needle extends string> = Namespace<DesignTokenAliases, `${Needle}-`>;
+export type NamespaceWithSuffix<Set, NeedlePrefix extends string, NeedleSuffix extends string> = Set extends `${NeedlePrefix}${infer _X}${NeedleSuffix}` ? _X : never;
+export type TokenNamespaceWithSuffix<NeedlePrefix extends string, NeedleSuffix extends string> = NamespaceWithSuffix<DesignTokenAliases, `${NeedlePrefix}-`, `-${NeedleSuffix}`>;
+type IconSymbolProps = React.SVGProps<SVGSVGElement> & {
+    title?: string;
+    titleId?: string;
+};
+export type IconSymbol = React.FunctionComponent<IconSymbolProps>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,MAAM,MAAM,oCAAoC,CAAC;AAE7D,MAAM,MAAM,YAAY,GAAG,OAAO,MAAM,CAAC;AACzC,MAAM,MAAM,kBAAkB,GAAG,MAAM,YAAY,CAAC;AAEpD,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC;AAGnD,MAAM,MAAM,SAAS,CACnB,GAAG,EACH,MAAM,SAAS,MAAM,IACnB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;AAMpD,MAAM,MAAM,cAAc,CAAC,MAAM,SAAS,MAAM,IAAI,SAAS,CAC3D,kBAAkB,EAClB,GAAG,MAAM,GAAG,CACb,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAC7B,GAAG,EACH,YAAY,SAAS,MAAM,EAC3B,YAAY,SAAS,MAAM,IACzB,GAAG,SAAS,GAAG,YAAY,GAAG,MAAM,EAAE,GAAG,YAAY,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;AAOzE,MAAM,MAAM,wBAAwB,CAClC,YAAY,SAAS,MAAM,EAC3B,YAAY,SAAS,MAAM,IACzB,mBAAmB,CACrB,kBAAkB,EAClB,GAAG,YAAY,GAAG,EAClB,IAAI,YAAY,EAAE,CACnB,CAAC;AAEF,KAAK,eAAe,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC"}

package/utilities/css.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import type { Falsy, TokenNamespace } from "../types";
+export type BreakpointsAlias = TokenNamespace<"breakpoint">;
+export type ResponsiveProp<T> = T | {
+    [Breakpoint in BreakpointsAlias]?: T;
+};
+export declare function classNames(...classes: (string | Falsy)[]): string;
+export declare function variationName(name: string, value: string): string;
+export declare function sanitizeCustomProperties(styles: React.CSSProperties): {
+    [k: string]: any;
+} | undefined;
+export declare function getComponentToken(componentName: string, componentProp: string, tokenSubgroup: string, token?: string): {
+    [x: string]: string;
+};
+export declare function getResponsiveToken(componentName: string, componentProp: string, tokenSubgroup: string, responsiveProp?: ResponsiveProp<string>): {
+    [x: string]: string;
+};
+export declare function getResponsiveValue(componentName: string, componentProp: string, responsiveValue?: ResponsiveProp<string>): {
+    [k: string]: any;
+} | undefined;
+//# sourceMappingURL=css.d.ts.map

package/utilities/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/utilities/css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEtD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;AAC5D,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG;KAAG,UAAU,IAAI,gBAAgB,CAAC,CAAC,EAAE,CAAC;CAAE,CAAC;AAE7E,wBAAgB,UAAU,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,UAExD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAExD;AAED,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa;;cAKnE;AAED,wBAAgB,iBAAiB,CAC/B,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,KAAK,CAAC,EAAE,MAAM;;EAQf;AAED,wBAAgB,kBAAkB,CAChC,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,cAAc,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;;EAgBxC;AAED,wBAAgB,kBAAkB,CAChC,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,eAAe,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;;cAoBzC"}

package/utilities/css.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function $(...e){return e.filter(Boolean).join(" ")}function c(e,t){return`${e}${t.charAt(0).toUpperCase()}${t.slice(1)}`}function u(e){const t=Object.entries(e).filter(([,i])=>i!=null);return t.length?Object.fromEntries(t):void 0}function a(e,t,i,n){return n?{[`--ezui-c-${e}-${t}`]:`var(--ezui-${i}-${n})`}:{}}function f(e,t,i,n){return n?typeof n=="string"?{[`--ezui-c-${e}-${t}-xs`]:`var(--ezui-${i}-${n})`}:Object.fromEntries(Object.entries(n).map(([r,s])=>[`--ezui-c-${e}-${t}-${r}`,`var(--ezui-${i}-${s})`])):{}}function o(e,t,i){return i?u(typeof i=="string"?{[`--ezui-c-${e}-${t}-xs`]:i}:Object.fromEntries(Object.entries(i).map(([n,r])=>[`--ezui-c-${e}-${t}-${n}`,r]))):{}}exports.classNames=$;exports.getComponentToken=a;exports.getResponsiveToken=f;exports.getResponsiveValue=o;exports.sanitizeCustomProperties=u;exports.variationName=c;

package/utilities/css.mjs

@@ -0,0 +1,47 @@
+function f(...t) {
+  return t.filter(Boolean).join(" ");
+}
+function c(t, e) {
+  return `${t}${e.charAt(0).toUpperCase()}${e.slice(1)}`;
+}
+function u(t) {
+  const e = Object.entries(t).filter(
+    ([, i]) => i != null
+  );
+  return e.length ? Object.fromEntries(e) : void 0;
+}
+function s(t, e, i, r) {
+  return r ? {
+    [`--ezui-c-${t}-${e}`]: `var(--ezui-${i}-${r})`
+  } : {};
+}
+function a(t, e, i, r) {
+  return r ? typeof r == "string" ? {
+    [`--ezui-c-${t}-${e}-xs`]: `var(--ezui-${i}-${r})`
+  } : Object.fromEntries(
+    Object.entries(r).map(([n, $]) => [
+      `--ezui-c-${t}-${e}-${n}`,
+      `var(--ezui-${i}-${$})`
+    ])
+  ) : {};
+}
+function z(t, e, i) {
+  return i ? u(typeof i == "string" ? {
+    [`--ezui-c-${t}-${e}-xs`]: i
+  } : Object.fromEntries(
+    Object.entries(i).map(
+      ([r, n]) => [
+        `--ezui-c-${t}-${e}-${r}`,
+        n
+      ]
+    )
+  )) : {};
+}
+export {
+  f as classNames,
+  s as getComponentToken,
+  a as getResponsiveToken,
+  z as getResponsiveValue,
+  u as sanitizeCustomProperties,
+  c as variationName
+};

package/utilities/css.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=css.test.d.ts.map

package/utilities/css.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.test.d.ts","sourceRoot":"","sources":["../../src/utilities/css.test.ts"],"names":[],"mappings":""}

package/utilities/css.test.js

@@ -0,0 +1 @@
+"use strict";const e=require("./css.js");describe("classNames",()=>{it("returns a single string from multiple classes",()=>{expect(e.classNames("btn","btn-sm")).toBe("btn btn-sm")}),it("filters out falsy values",()=>{expect(e.classNames("btn","btn-sm",!1,void 0,null,0)).toBe("btn btn-sm")})});describe("variationName",()=>{it("returns a name with the first character in the value capitalized",()=>{expect(e.variationName("size","medium")).toBe("sizeMedium")})});describe("getResponsiveToken",()=>{it("takes a string and returns the custom token",()=>{expect(e.getResponsiveToken("stack","space","space","4")).toMatchObject({"--ezui-c-stack-space-xs":"var(--ezui-space-4)"})}),it("takes an object with a breakpoint and value and returns the token for each breakpoint",()=>{expect(e.getResponsiveToken("stack","space","space",{xs:"2",md:"8"})).toMatchObject({"--ezui-c-stack-space-xs":"var(--ezui-space-2)","--ezui-c-stack-space-md":"var(--ezui-space-8)"})})});describe("getResponsiveValue",()=>{it("takes a string and returns the custom value",()=>{expect(e.getResponsiveValue("stack","space","4")).toMatchObject({"--ezui-c-stack-space-xs":"4"})}),it("takes an object with a breakpoint and value and returns the value for each breakpoint",()=>{expect(e.getResponsiveValue("stack","space",{xs:"2",md:"8"})).toMatchObject({"--ezui-c-stack-space-xs":"2","--ezui-c-stack-space-md":"8"})}),it("takes an object with a breakpoint and null value and sanitizes its output",()=>{expect(e.getResponsiveValue("stack","space",{xs:"2",md:null})).toMatchObject({"--ezui-c-stack-space-xs":"2"})})});

package/utilities/css.test.mjs

@@ -0,0 +1,56 @@
+import { classNames as t, variationName as s, getResponsiveToken as a, getResponsiveValue as e } from "./css.mjs";
+describe("classNames", () => {
+  it("returns a single string from multiple classes", () => {
+    expect(t("btn", "btn-sm")).toBe("btn btn-sm");
+  }), it("filters out falsy values", () => {
+    expect(
+      t(
+        "btn",
+        "btn-sm",
+        !1,
+        void 0,
+        null,
+        0
+      )
+    ).toBe("btn btn-sm");
+  });
+});
+describe("variationName", () => {
+  it("returns a name with the first character in the value capitalized", () => {
+    expect(s("size", "medium")).toBe("sizeMedium");
+  });
+});
+describe("getResponsiveToken", () => {
+  it("takes a string and returns the custom token", () => {
+    expect(a("stack", "space", "space", "4")).toMatchObject({
+      "--ezui-c-stack-space-xs": "var(--ezui-space-4)"
+    });
+  }), it("takes an object with a breakpoint and value and returns the token for each breakpoint", () => {
+    expect(
+      a("stack", "space", "space", { xs: "2", md: "8" })
+    ).toMatchObject({
+      "--ezui-c-stack-space-xs": "var(--ezui-space-2)",
+      "--ezui-c-stack-space-md": "var(--ezui-space-8)"
+    });
+  });
+});
+describe("getResponsiveValue", () => {
+  it("takes a string and returns the custom value", () => {
+    expect(e("stack", "space", "4")).toMatchObject({
+      "--ezui-c-stack-space-xs": "4"
+    });
+  }), it("takes an object with a breakpoint and value and returns the value for each breakpoint", () => {
+    expect(
+      e("stack", "space", { xs: "2", md: "8" })
+    ).toMatchObject({
+      "--ezui-c-stack-space-xs": "2",
+      "--ezui-c-stack-space-md": "8"
+    });
+  }), it("takes an object with a breakpoint and null value and sanitizes its output", () => {
+    expect(
+      e("stack", "space", { xs: "2", md: null })
+    ).toMatchObject({
+      "--ezui-c-stack-space-xs": "2"
+    });
+  });
+});

package/utilities/storybook.d.ts

@@ -0,0 +1,33 @@
+export declare function createLabelledOptionsControl(opts: Record<string, unknown>, control?: {}): {
+    options: string[];
+    mapping: Record<string, unknown>;
+    control: {
+        type: string;
+        labels: {};
+    };
+};
+export declare function createFontStyleTokensControl(): {
+    options: string[];
+    mapping: Record<string, unknown>;
+    control: {
+        type: string;
+        labels: {};
+    };
+};
+export declare function createColorTokensControl(): {
+    options: string[];
+    mapping: Record<string, unknown>;
+    control: {
+        type: string;
+        labels: {};
+    };
+};
+export declare function getTokensControl(pattern: string): {
+    options: string[];
+    mapping: Record<string, unknown>;
+    control: {
+        type: string;
+        labels: {};
+    };
+};
+//# sourceMappingURL=storybook.d.ts.map

package/utilities/storybook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storybook.d.ts","sourceRoot":"","sources":["../../src/utilities/storybook.ts"],"names":[],"mappings":"AAGA,wBAAgB,4BAA4B,CAC1C,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7B,OAAO,KAAK;;;;;;;EAWb;AAED,wBAAgB,4BAA4B;;;;;;;EAE3C;AAED,wBAAgB,wBAAwB;;;;;;;EAEvC;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM;;;;;;;EAO/C"}

package/utilities/storybook.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../tokens-e7406ce6.js"),c=require("./tokens.js");function l(e,o={}){return{options:Object.keys(e),mapping:e,control:{type:"select",labels:Object.keys(e).reduce((t,r)=>({...t,[r]:r}),{}),...o}}}function i(){return n("font-style-{alias}-family")}function a(){return n("color-{alias}")}function n(e){return l(c.getTokenAliases(s.tokens,e).reduce((o,t)=>({...o,[t]:t}),{}))}exports.createColorTokensControl=a;exports.createFontStyleTokensControl=i;exports.createLabelledOptionsControl=l;exports.getTokensControl=n;

package/utilities/storybook.mjs

@@ -0,0 +1,33 @@
+import { t as l } from "../tokens-713623f4.mjs";
+import { getTokenAliases as c } from "./tokens.mjs";
+function s(e, t = {}) {
+  return {
+    options: Object.keys(e),
+    mapping: e,
+    control: {
+      type: "select",
+      labels: Object.keys(e).reduce((o, n) => ({ ...o, [n]: n }), {}),
+      ...t
+    }
+  };
+}
+function u() {
+  return r("font-style-{alias}-family");
+}
+function f() {
+  return r("color-{alias}");
+}
+function r(e) {
+  return s(
+    c(l, e).reduce(
+      (t, o) => ({ ...t, [o]: o }),
+      {}
+    )
+  );
+}
+export {
+  f as createColorTokensControl,
+  u as createFontStyleTokensControl,
+  s as createLabelledOptionsControl,
+  r as getTokensControl
+};

package/utilities/tokens.d.ts

@@ -0,0 +1,2 @@
+export declare function getTokenAliases<T extends object>(tokens: T, pattern: string): string[];
+//# sourceMappingURL=tokens.d.ts.map

package/utilities/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/utilities/tokens.ts"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,YAS3E"}

package/utilities/tokens.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function i(a,s){if(!s.includes("{alias}"))throw new Error("Provided pattern must include {alias}");const t=new RegExp(`^${s.replace("{alias}","([a-z0-9-]+)")}$`);return Object.keys(a).filter(e=>t.test(e)).map(e=>e.match(t)[1])}exports.getTokenAliases=i;

package/utilities/tokens.mjs

@@ -0,0 +1,9 @@
+function r(t, a) {
+  if (!a.includes("{alias}"))
+    throw new Error("Provided pattern must include {alias}");
+  const s = new RegExp(`^${a.replace("{alias}", "([a-z0-9-]+)")}$`);
+  return Object.keys(t).filter((e) => s.test(e)).map((e) => e.match(s)[1]);
+}
+export {
+  r as getTokenAliases
+};

package/utilities/tokens.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tokens.test.d.ts.map

package/utilities/tokens.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.test.d.ts","sourceRoot":"","sources":["../../src/utilities/tokens.test.ts"],"names":[],"mappings":""}

package/utilities/types.d.ts

@@ -0,0 +1,7 @@
+import type tokens from "@easypost/easy-ui-tokens/js/tokens";
+export type DesignTokens = typeof tokens;
+export type DesignTokenAliases = keyof DesignTokens;
+export type Falsy = boolean | undefined | null | 0;
+export type Namespace<Set, Needle extends string> = Set extends `${Needle}${infer _X}` ? _X : never;
+export type TokenNamespace<Needle extends string> = Namespace<DesignTokenAliases, `${Needle}-`>;
+//# sourceMappingURL=types.d.ts.map

package/utilities/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utilities/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,oCAAoC,CAAC;AAE7D,MAAM,MAAM,YAAY,GAAG,OAAO,MAAM,CAAC;AACzC,MAAM,MAAM,kBAAkB,GAAG,MAAM,YAAY,CAAC;AAEpD,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC;AAGnD,MAAM,MAAM,SAAS,CACnB,GAAG,EACH,MAAM,SAAS,MAAM,IACnB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;AAMpD,MAAM,MAAM,cAAc,CAAC,MAAM,SAAS,MAAM,IAAI,SAAS,CAC3D,kBAAkB,EAClB,GAAG,MAAM,GAAG,CACb,CAAC"}

package/utilities/types.js

@@ -0,0 +1 @@
+"use strict";

package/utilities/types.mjs

@@ -0,0 +1 @@
+