@wrdagency/blockout 0.1.10 → 1.0.0

package/dist/primitives/symbol/index.js

@@ -0,0 +1,12 @@
+import { Danger as o } from "./danger.js";
+import { Progress as r } from "./progress.js";
+const t = Object.assign(
+  {},
+  {
+    Progress: r,
+    Danger: o
+  }
+);
+export {
+  t as Symbol
+};

package/dist/primitives/symbol/progress.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { SymbolProps } from './types';
+export interface ProgressProps {
+    stage: "future" | "to-do" | "pending" | "blocked" | "suceeded" | "failed";
+}
+export declare const Progress: FC<SymbolProps & ProgressProps>;

package/dist/primitives/symbol/progress.js

@@ -0,0 +1,162 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+const l = ({
+  stage: o,
+  ...c
+}) => {
+  switch (o) {
+    case "future":
+      return /* @__PURE__ */ r(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          ...c,
+          children: /* @__PURE__ */ r(
+            "circle",
+            {
+              cx: "12",
+              cy: "12",
+              r: "3",
+              fill: "var(--blockout__colours__surface--400)"
+            }
+          )
+        }
+      );
+    case "to-do":
+      return /* @__PURE__ */ r(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          ...c,
+          children: /* @__PURE__ */ r(
+            "circle",
+            {
+              cx: "12",
+              cy: "12",
+              r: "8",
+              fill: "none",
+              stroke: "var(--blockout__colours__surface--500)",
+              strokeWidth: "2"
+            }
+          )
+        }
+      );
+    case "pending":
+      return /* @__PURE__ */ r(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          ...c,
+          children: /* @__PURE__ */ r(
+            "circle",
+            {
+              cx: "12",
+              cy: "12",
+              r: "8",
+              fill: "none",
+              stroke: "var(--blockout__colours__primary--500)",
+              strokeWidth: "2",
+              strokeDasharray: "4 3"
+            }
+          )
+        }
+      );
+    case "blocked":
+      return /* @__PURE__ */ e(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          ...c,
+          children: [
+            /* @__PURE__ */ r(
+              "circle",
+              {
+                cx: "12",
+                cy: "12",
+                r: "8",
+                fill: "none",
+                stroke: "var(--blockout__colours__surface--950)",
+                strokeWidth: "2"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "line",
+              {
+                x1: "4",
+                y1: "20",
+                x2: "20",
+                y2: "4",
+                fill: "none",
+                stroke: "var(--blockout__colours__surface--950)",
+                strokeWidth: "2"
+              }
+            )
+          ]
+        }
+      );
+    case "suceeded":
+      return /* @__PURE__ */ e(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          ...c,
+          children: [
+            /* @__PURE__ */ r(
+              "circle",
+              {
+                cx: "12",
+                cy: "12",
+                r: "8",
+                fill: "none",
+                stroke: "var(--blockout__colours__surface--400)",
+                strokeWidth: "2"
+              }
+            ),
+            /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "4", fill: "#47CC33" })
+          ]
+        }
+      );
+    case "failed":
+      return /* @__PURE__ */ e(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          ...c,
+          children: [
+            /* @__PURE__ */ r(
+              "circle",
+              {
+                cx: "12",
+                cy: "12",
+                r: "8",
+                fill: "none",
+                stroke: "var(--blockout__colours__surface--400)",
+                strokeWidth: "2"
+              }
+            ),
+            /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "4", fill: "#D93C1B" })
+          ]
+        }
+      );
+  }
+};
+export {
+  l as Progress
+};

package/dist/primitives/symbol/types.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+export type SymbolProps = {
+    className?: string;
+    style?: CSSProperties;
+};

package/dist/primitives/symbol/types.js

@@ -0,0 +1 @@
+

package/dist/primitives/tooltip/index.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+interface TooltipProps extends PropsWithChildren {
+    className?: string;
+    label?: string;
+}
+export declare const Tooltip: FC<TooltipProps>;
+export {};

package/dist/primitives/tooltip/index.js

@@ -0,0 +1,178 @@
+import { jsx as S, jsxs as M } from "react/jsx-runtime";
+import { cn as $ } from "../../utils/css.js";
+import { useRef as Q, useEffect as y, useState as W } from "react";
+import '../../assets/style4.css';/* empty css                   */
+import { c as q, u as z, a as G, b as J } from "../../MR26YJYP-BdwVX8xi.js";
+import { c as N, b as K, d as H, e as C } from "../../YV4JVR4I-DOlaib2E.js";
+import { Q as k, S as f, R as h, I as L, o as V, c as A, p as R, _ as I, i as j, j as U, m as T, k as B, a4 as E, M as X, a1 as Y, b as _ } from "../../LMDWO4NN-DyBcLLfK.js";
+import { H as Z, a as ee } from "../../EM5CXX6A-iTR0FDQv.js";
+import { c as te } from "../../G7GW6PWC-FbNigUHQ.js";
+function oe(o = {}) {
+  var r;
+  process.env.NODE_ENV !== "production" && o.type === "label" && console.warn(
+    "The `type` option on the tooltip store is deprecated.",
+    "Render a visually hidden label or use the `aria-label` or `aria-labelledby` attributes on the anchor element instead.",
+    "See https://ariakit.org/components/tooltip#tooltip-anchors-must-have-accessible-names"
+  );
+  const t = (r = o.store) == null ? void 0 : r.getState(), e = q(k(h({}, o), {
+    placement: f(
+      o.placement,
+      t == null ? void 0 : t.placement,
+      "top"
+    ),
+    hideTimeout: f(o.hideTimeout, t == null ? void 0 : t.hideTimeout, 0)
+  })), l = k(h({}, e.getState()), {
+    type: f(o.type, t == null ? void 0 : t.type, "description"),
+    skipTimeout: f(o.skipTimeout, t == null ? void 0 : t.skipTimeout, 300)
+  }), i = N(l, e, o.store);
+  return h(h({}, e), i);
+}
+function re(o, r, t) {
+  return H(o, t, "type"), H(o, t, "skipTimeout"), z(o, r, t);
+}
+function ne(o = {}) {
+  const [r, t] = K(oe, o);
+  return re(r, t, o);
+}
+var g = L(
+  [ee],
+  [Z]
+), x = g.useProviderContext, ie = g.ContextProvider, ae = g.ScopedContextProvider, se = "div", ue = A(
+  function(r) {
+    var t = r, {
+      store: e,
+      portal: l = !0,
+      gutter: i = 8,
+      preserveTabOrder: b = !1,
+      hideOnHoverOutside: p = !0,
+      hideOnInteractOutside: v = !0
+    } = t, s = I(t, [
+      "store",
+      "portal",
+      "gutter",
+      "preserveTabOrder",
+      "hideOnHoverOutside",
+      "hideOnInteractOutside"
+    ]);
+    const m = x();
+    e = e || m, j(
+      e,
+      process.env.NODE_ENV !== "production" && "Tooltip must receive a `store` prop or be wrapped in a TooltipProvider component."
+    ), s = U(
+      s,
+      (a) => /* @__PURE__ */ S(ae, { value: e, children: a }),
+      [e]
+    );
+    const P = e.useState(
+      (a) => a.type === "description" ? "tooltip" : "none"
+    );
+    return s = T({ role: P }, s), s = G(B(T({}, s), {
+      store: e,
+      portal: l,
+      gutter: i,
+      preserveTabOrder: b,
+      hideOnHoverOutside(a) {
+        if (E(p, a)) return !1;
+        const c = e == null ? void 0 : e.getState().anchorElement;
+        return c ? !("focusVisible" in c.dataset) : !0;
+      },
+      hideOnInteractOutside: (a) => {
+        if (E(v, a)) return !1;
+        const c = e == null ? void 0 : e.getState().anchorElement;
+        return c ? !X(c, a.target) : !0;
+      }
+    })), s;
+  }
+), le = te(
+  V(function(r) {
+    const t = ue(r);
+    return R(se, t);
+  }),
+  x
+);
+function ce(o = {}) {
+  const r = ne(o);
+  return /* @__PURE__ */ S(ie, { value: r, children: o.children });
+}
+var de = "div", d = N({
+  activeStore: null
+});
+function w(o) {
+  return () => {
+    const { activeStore: r } = d.getState();
+    r === o && d.setState("activeStore", null);
+  };
+}
+var pe = A(
+  function(r) {
+    var t = r, { store: e, showOnHover: l = !0 } = t, i = I(t, ["store", "showOnHover"]);
+    const b = x();
+    e = e || b, j(
+      e,
+      process.env.NODE_ENV !== "production" && "TooltipAnchor must receive a `store` prop or be wrapped in a TooltipProvider component."
+    );
+    const p = Q(!1);
+    y(() => C(e, ["mounted"], (n) => {
+      n.mounted || (p.current = !1);
+    }), [e]), y(() => {
+      if (e)
+        return Y(
+          // Immediately remove the current store from the global store when
+          // the component unmounts. This is useful, for example, to avoid
+          // showing tooltips immediately on serial tests.
+          w(e),
+          C(e, ["mounted", "skipTimeout"], (n) => {
+            if (!e) return;
+            if (n.mounted) {
+              const { activeStore: O } = d.getState();
+              return O !== e && (O == null || O.hide()), d.setState("activeStore", e);
+            }
+            const u = setTimeout(
+              w(e),
+              n.skipTimeout
+            );
+            return () => clearTimeout(u);
+          })
+        );
+    }, [e]);
+    const v = i.onMouseEnter, s = _((n) => {
+      v == null || v(n), p.current = !0;
+    }), m = i.onFocusVisible, P = _((n) => {
+      m == null || m(n), !n.defaultPrevented && (e == null || e.setAnchorElement(n.currentTarget), e == null || e.show());
+    }), a = i.onBlur, c = _((n) => {
+      if (a == null || a(n), n.defaultPrevented) return;
+      const { activeStore: u } = d.getState();
+      p.current = !1, u === e && d.setState("activeStore", null);
+    }), D = e.useState("type"), F = e.useState((n) => {
+      var u;
+      return (u = n.contentElement) == null ? void 0 : u.id;
+    });
+    return i = B(T({
+      "aria-labelledby": D === "label" ? F : void 0
+    }, i), {
+      onMouseEnter: s,
+      onFocusVisible: P,
+      onBlur: c
+    }), i = J(T({
+      store: e,
+      showOnHover(n) {
+        if (!p.current || E(l, n)) return !1;
+        const { activeStore: u } = d.getState();
+        return u ? (e == null || e.show(), !1) : !0;
+      }
+    }, i)), i;
+  }
+), ve = V(function(r) {
+  const t = pe(r);
+  return R(de, t);
+});
+const Ee = ({ className: o, label: r, children: t }) => {
+  const [e, l] = W(!1);
+  return r ? /* @__PURE__ */ M(ce, { open: e, setOpen: l, children: [
+    /* @__PURE__ */ S(ve, { className: $("primitive-tooltip", o), children: t }),
+    e && /* @__PURE__ */ S(le, { className: "primitive-tooltip__label", children: r })
+  ] }) : t;
+};
+export {
+  Ee as Tooltip
+};

package/dist/primitives/truncate/index.js

@@ -1,43 +1,44 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { cn as m } from "../../utils/css.js";
-import { a as f } from "../../index-1AjPIqTN.js";
+import { b as f } from "../../index-D7vLJIGX.js";
 import { useState as l, useRef as o, useEffect as v } from "react";
-import '../../assets/style4.css';/* empty css                   */
+import '../../assets/style5.css';/* empty css                   */
 const S = ({
   className: c,
-  scrollOnHover: a = !0,
-  children: s
+  scrollOnHover: s = !0,
+  children: a
 }) => {
-  const d = f(), [t, p] = l({
+  const p = f(), [t, d] = l({
     container: 0,
     contents: 0,
     padding: 0
-  }), e = o(void 0), n = o(void 0), r = () => {
+  }), e = o(void 0), n = o(void 0), i = () => {
     const u = window.getComputedStyle(e.current, null).getPropertyValue("padding-right");
-    p({
+    d({
       container: e.current.offsetWidth || 0,
       contents: n.current.offsetWidth || 0,
       padding: parseFloat(u) || 0
     });
   };
   return v(() => {
-    r(), setTimeout(r, 500);
-  }, [d, e.current, n.current]), /* @__PURE__ */ i(
+    i(), setTimeout(i, 500);
+  }, [p, e.current, n.current]), /* @__PURE__ */ r(
     "div",
     {
       className: m(
         "primitive-truncate",
-        a && "primitive-truncate--scroll-on-hover",
+        t.contents > t.container && "primitive-truncate--is-overflowing",
+        s && "primitive-truncate--scroll-on-hover",
         c
       ),
       style: {
         "--primtive-truncate__container-width": `${t.container}px`,
         "--primtive-truncate__container-padding": `${t.padding}px`,
         "--primtive-truncate__contents-width": `${t.contents}px`,
-        "--primtive-truncate__duration": `${t.contents - t.container / 50}s`
+        "--primtive-truncate__duration": `${(t.contents - t.container) / 100}s`
       },
       ref: e,
-      children: /* @__PURE__ */ i("span", { className: "primitive-truncate__contents", ref: n, children: s })
+      children: /* @__PURE__ */ r("span", { className: "primitive-truncate__contents", ref: n, children: a })
     }
   );
 };

package/dist/primitives/typography/heading.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, FC, PropsWithChildren } from 'react';
+interface HeadingProps extends PropsWithChildren {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    size?: 1 | 2 | 3 | 4 | 5 | 6;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const Heading: FC<HeadingProps>;
+export declare const H1: FC<Omit<HeadingProps, "level">>;
+export declare const H2: FC<Omit<HeadingProps, "level">>;
+export declare const H3: FC<Omit<HeadingProps, "level">>;
+export declare const H4: FC<Omit<HeadingProps, "level">>;
+export declare const H5: FC<Omit<HeadingProps, "level">>;
+export declare const H6: FC<Omit<HeadingProps, "level">>;
+export {};

package/dist/primitives/typography/heading.js

@@ -0,0 +1,50 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cn as l } from "../../utils/css.js";
+import '../../assets/style6.css';/* empty css                   */
+const h = (e) => {
+  switch (e) {
+    case 1:
+      return "h1";
+    case 2:
+      return "h2";
+    case 3:
+      return "h3";
+    case 4:
+      return "h4";
+    case 5:
+      return "h5";
+    case 6:
+      return "h6";
+  }
+}, t = ({
+  level: e = 2,
+  size: r = 3,
+  className: n,
+  id: s,
+  children: c,
+  style: i
+}) => {
+  const o = h(e);
+  return /* @__PURE__ */ a(
+    o,
+    {
+      id: s,
+      className: l(
+        "primitive-heading",
+        `primitive-heading--size-${r}`,
+        n
+      ),
+      style: i,
+      children: c
+    }
+  );
+}, g = (e) => t({ level: 1, ...e }), u = (e) => t({ level: 2, ...e }), p = (e) => t({ level: 3, ...e }), d = (e) => t({ level: 4, ...e }), f = (e) => t({ level: 5, ...e }), x = (e) => t({ level: 6, ...e });
+export {
+  g as H1,
+  u as H2,
+  p as H3,
+  d as H4,
+  f as H5,
+  x as H6,
+  t as Heading
+};

package/dist/primitives/typography/index.d.ts

@@ -0,0 +1,2 @@
+export { H1, H2, H3, H4, H5, H6, Heading } from './heading';
+export { Paragraph } from './paragraph';

package/dist/primitives/typography/index.js

@@ -0,0 +1,12 @@
+import { H1 as a, H2 as o, H3 as e, H4 as p, H5 as f, H6 as g, Heading as m } from "./heading.js";
+import { Paragraph as x } from "./paragraph.js";
+export {
+  a as H1,
+  o as H2,
+  e as H3,
+  p as H4,
+  f as H5,
+  g as H6,
+  m as Heading,
+  x as Paragraph
+};

package/dist/primitives/typography/paragraph.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, FC, PropsWithChildren } from 'react';
+interface ParagraphProps extends PropsWithChildren {
+    variant?: "small" | "normal" | "large";
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const Paragraph: FC<ParagraphProps>;
+export {};

package/dist/primitives/typography/paragraph.js

@@ -0,0 +1,25 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cn as t } from "../../utils/css.js";
+import '../../assets/style6.css';/* empty css                   */
+const c = ({
+  variant: r = "normal",
+  className: a,
+  style: p,
+  id: i,
+  children: m
+}) => /* @__PURE__ */ o(
+  "p",
+  {
+    id: i,
+    className: t(
+      "primitive-paragraph",
+      `primitive-paragraph--size-${r}`,
+      a
+    ),
+    style: p,
+    children: m
+  }
+);
+export {
+  c as Paragraph
+};