@wrdagency/blockout 0.1.10 → 1.0.0

package/dist/components/avatar/index.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+interface AvatarProps {
+    className?: string;
+    image?: string;
+    name?: string;
+    size?: "small" | "normal" | "large";
+    withName?: boolean;
+}
+export declare const Avatar: FC<AvatarProps>;
+export {};

package/dist/components/avatar/index.js

@@ -0,0 +1,42 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import { Colourway as e } from "../../primitives/colourway/index.js";
+import { cn as n } from "../../utils/css.js";
+import { useMemo as c } from "react";
+import '../../assets/styles.css';import '../../assets/style6.css';import '../../assets/style5.css';import '../../assets/style4.css';import '../../assets/style3.css';import '../../assets/style2.css';import '../../assets/style.css';import '../../assets/index2.css';/* empty css                   */
+/* empty css                   */
+import "../../primitives/popover/index.js";
+/* empty css                   */
+import "../../primitives/scroll-area/index.js";
+import "../../primitives/symbol/index.js";
+/* empty css                   */
+/* empty css                   */
+/* empty css                   */
+/* empty css                    */
+import { getRandomTheme as l } from "../../primitives/colourway/util.js";
+const C = ({
+  className: r,
+  image: t = "",
+  name: o = "",
+  size: m = "normal",
+  withName: i = !1
+}) => {
+  const p = c(() => f(o, 2), [o]);
+  return /* @__PURE__ */ s(
+    e,
+    {
+      className: n(
+        "component-avatar",
+        `component-avatar--size-${m}`,
+        r
+      ),
+      theme: l(t + o),
+      children: [
+        t ? /* @__PURE__ */ a("img", { className: "component-avatar__image", src: t, alt: o }) : /* @__PURE__ */ a("div", { className: "component-avatar__fallback", children: p }),
+        o && i && /* @__PURE__ */ a("span", { className: "component-avatar__name", children: o })
+      ]
+    }
+  );
+}, f = (r, t) => r.split(" ").slice(0, t).map((o) => o[0]).join("");
+export {
+  C as Avatar
+};

package/dist/components/badge/index.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+interface BadgeProps extends PropsWithChildren {
+    className?: string;
+    value?: number | boolean;
+}
+export declare const Badge: FC<BadgeProps>;
+export {};

package/dist/components/badge/index.js

@@ -0,0 +1,24 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { cn as c } from "../../utils/css.js";
+import '../../assets/index3.css';const a = ({
+  className: n,
+  value: e = !0,
+  children: o
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: c(
+      "component-badge",
+      !!e && "component-badge--enabled",
+      typeof e == "number" && "component-badge--with-value",
+      n
+    ),
+    children: [
+      o,
+      /* @__PURE__ */ r("div", { className: "component-badge__indicator", children: e })
+    ]
+  }
+);
+export {
+  a as Badge
+};

package/dist/components/breadcrumbs/index.d.ts

@@ -1,7 +1,8 @@
-import { FC, HTMLAttributes } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 import { Crumb } from './types';
 interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
     crumbs: Crumb[];
+    separator?: ReactNode;
 }
 export declare const Breadcrumbs: FC<BreadcrumbsProps>;
 export {};

package/dist/components/breadcrumbs/index.js

@@ -1,92 +1,60 @@
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
-import { cn as b } from "../../utils/css.js";
-import { C as f } from "../../composite-provider-DNftbE5U.js";
-import { C } from "../../5JTVDSTH-CG1NL6Fw.js";
-import { b as v, c as _ } from "../../P7GR5CS5-BoOYUfSQ.js";
-import { f as h, a as w, q as N, _ as R, i as x, s as E, l as S, o as z, v as P } from "../../LMDWO4NN--KEvZePp.js";
-import { useMemo as V } from "react";
-import { C as j } from "../../6VRAQV3D-2rb_aClP.js";
-import { C as I } from "../../TP7N7UIH-BHb1rEeb.js";
-import '../../assets/index14.css';var k = "div", g = w(
-  function(a) {
-    var r = a, {
-      store: o,
-      "aria-setsize": m,
-      "aria-posinset": p
-    } = r, s = R(r, [
-      "store",
-      "aria-setsize",
-      "aria-posinset"
-    ]);
-    const d = v();
-    o = o || d, x(
-      o,
-      process.env.NODE_ENV !== "production" && "CompositeRow must be wrapped in a Composite component."
-    );
-    const i = E(s.id), c = o.useState(
-      (n) => n.baseElement || void 0
-    ), l = V(
-      () => ({ id: i, baseElement: c, ariaSetSize: m, ariaPosInSet: p }),
-      [i, c, m, p]
-    );
-    return s = S(
-      s,
-      (n) => /* @__PURE__ */ e(_.Provider, { value: l, children: n }),
-      [l]
-    ), s = z({ id: i }, s), P(s);
-  }
-), q = h(function(a) {
-  const r = g(a);
-  return N(k, r);
-});
-const A = ({
-  crumbs: t,
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { cn as t } from "../../utils/css.js";
+import { e as i } from "../../CaretRight.es-vnr78BGI.js";
+import { C as p } from "../../composite-provider-cs4korvf.js";
+import { C as c } from "../../5JTVDSTH-BiHTUReD.js";
+import { C as l } from "../../J2LQO3EC-DIOM09Y6.js";
+import { C as d } from "../../6VRAQV3D-DIdyGLyW.js";
+import { C as b } from "../../TP7N7UIH-DlW_S-4B.js";
+import '../../assets/index4.css';const v = ({
+  crumbs: o,
+  separator: m = /* @__PURE__ */ r(i, {}),
   className: a,
-  ...r
-}) => /* @__PURE__ */ e(f, { orientation: "horizontal", children: /* @__PURE__ */ e(
-  C,
+  ...s
+}) => /* @__PURE__ */ r(p, { orientation: "horizontal", children: /* @__PURE__ */ r(
+  c,
   {
-    render: /* @__PURE__ */ e(
+    render: /* @__PURE__ */ r(
       "nav",
       {
-        className: b("component-breadcrumbs", a),
+        className: t("component-breadcrumbs", a),
         "aria-label": "breadcrumb",
-        ...r
+        ...s
       }
     ),
-    children: /* @__PURE__ */ e(
-      q,
+    children: /* @__PURE__ */ r(
+      l,
       {
-        render: /* @__PURE__ */ e("ol", { className: "component-breadcrumbs__list" }),
-        children: t.map((o) => /* @__PURE__ */ u(
+        render: /* @__PURE__ */ r("ol", { className: "component-breadcrumbs__list" }),
+        children: o.map((e) => /* @__PURE__ */ n(
           "li",
           {
             className: "component-breadcrumbs__item",
             children: [
-              /* @__PURE__ */ e(
-                j,
+              /* @__PURE__ */ r(
+                d,
                 {
-                  render: /* @__PURE__ */ e("a", { href: o.href }),
+                  render: /* @__PURE__ */ r("a", { href: e.href }),
                   className: "component-breadcrumbs__link",
-                  children: o.label
+                  children: e.label
                 }
               ),
-              /* @__PURE__ */ e(
-                I,
+              /* @__PURE__ */ r(
+                b,
                 {
                   className: "component-breacrumbs__separator",
-                  render: /* @__PURE__ */ e("span", {}),
-                  children: "//"
+                  render: /* @__PURE__ */ r("span", {}),
+                  children: m
                 }
               )
             ]
           },
-          o.label + o.href
+          e.label + e.href
         ))
       }
     )
   }
 ) });
 export {
-  A as Breadcrumbs
+  v as Breadcrumbs
 };

package/dist/components/breadcrumbs/types.d.ts

@@ -1,4 +1,5 @@
+import { ReactNode } from 'react';
 export type Crumb = {
     href: string;
-    label: string;
+    label: ReactNode;
 };

package/dist/components/button/button.d.ts

@@ -3,6 +3,7 @@ type BaseProps = {
     variant?: "primary" | "quiet" | "ghost" | "neutral";
     size?: "small" | "medium" | "large";
     wide?: boolean;
+    disabled?: boolean;
 };
 type ButtonButtonProps = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps> & {
     as?: "button";

package/dist/components/button/icon.js

@@ -1,13 +1,34 @@
 import { jsx as t } from "react/jsx-runtime";
-import { cn as n } from "../../utils/css.js";
-import { Button as m } from "./button.js";
-const s = (o) => /* @__PURE__ */ t(
-  m,
-  {
-    ...o,
-    className: n("component-button--icon", o.className)
-  }
-);
+import { cn as i } from "../../utils/css.js";
+import '../../assets/styles.css';import '../../assets/style6.css';import '../../assets/style5.css';import '../../assets/style3.css';import '../../assets/style2.css';import '../../assets/style.css';import '../../assets/style9.css';/* empty css                   */
+import "react";
+/* empty css                   */
+/* empty css                   */
+import "../../primitives/popover/index.js";
+/* empty css                   */
+import "../../primitives/scroll-area/index.js";
+import "../../primitives/symbol/index.js";
+import { Tooltip as n } from "../../primitives/tooltip/index.js";
+/* empty css                   */
+/* empty css                   */
+/* empty css                    */
+import { Button as r } from "./button.js";
+const I = (o) => {
+  const m = o["aria-label"];
+  return m ? /* @__PURE__ */ t(n, { label: m, children: /* @__PURE__ */ t(
+    r,
+    {
+      ...o,
+      className: i("component-button--icon", o.className)
+    }
+  ) }) : /* @__PURE__ */ t(
+    r,
+    {
+      ...o,
+      className: i("component-button--icon", o.className)
+    }
+  );
+};
 export {
-  s as IconButton
+  I as IconButton
 };

package/dist/components/controls/base-control/affix.d.ts

@@ -2,5 +2,5 @@ import { PropsWithChildren } from 'react';
 interface AffixProps extends PropsWithChildren {
     suffix?: boolean;
 }
-export declare const Affix: ({ children, suffix }: AffixProps) => number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | null | undefined;
+export declare const Affix: ({ children, suffix }: AffixProps) => number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

package/dist/components/controls/base-control/index.js

@@ -1,45 +1,57 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { cn as u } from "../../../utils/css.js";
+import { cn as k } from "../../../utils/css.js";
 import "react";
-import { Affix as a } from "./affix.js";
-import '../../../assets/index3.css';const g = ({
+import { Affix as m } from "./affix.js";
+import '../../../assets/styles2.css';/* empty css                       */
+const y = ({
   as: n = "div",
   label: c,
   className: i,
-  id: l,
-  help: s,
-  children: m,
-  prefix: d,
-  suffix: p,
-  required: _
+  id: t,
+  help: l,
+  children: d,
+  icon: p,
+  prefix: b,
+  suffix: _,
+  required: f,
+  variant: h = "normal",
+  tight: u = !1,
+  horizontal: N = !1,
+  directFocus: x = !0,
+  style: v
 }) => {
-  const b = n, t = n === "fieldset", f = t ? "legend" : "label", h = () => {
-    var r;
-    (r = document.getElementById(l)) == null || r.focus();
+  const g = n, s = n === "fieldset", C = s ? "legend" : "label", r = p, j = () => {
+    var a;
+    x && ((a = document.getElementById(t)) == null || a.focus());
   };
   return /* @__PURE__ */ e(
-    b,
+    g,
     {
-      className: u(
+      className: k(
         "component-base-control",
-        t && "component-base-control--fieldset",
+        `component-base-control--${h}`,
+        u && "component-base-control--tight",
+        N && "component-base-control--horizontal",
+        s && "component-base-control--fieldset",
         i
       ),
+      style: v,
       children: [
-        c && /* @__PURE__ */ e(f, { className: "component-base-control__label", htmlFor: l, children: [
+        c && /* @__PURE__ */ e(C, { className: "component-base-control__label", htmlFor: t, children: [
           c,
-          _ && /* @__PURE__ */ o("span", { className: "component-base-control__label__required", children: "*" })
+          f && /* @__PURE__ */ o("span", { className: "component-base-control__label__required", children: "*" })
         ] }),
-        /* @__PURE__ */ e("div", { className: "component-base-control__box", onClick: h, children: [
-          /* @__PURE__ */ o(a, { children: d }),
-          /* @__PURE__ */ o("div", { className: "component-base-control__control", children: m }),
-          /* @__PURE__ */ o(a, { suffix: !0, children: p })
+        /* @__PURE__ */ e("div", { className: "component-base-control__box", onClick: j, children: [
+          r && /* @__PURE__ */ o(r, { className: "component-base-control__icon" }),
+          /* @__PURE__ */ o(m, { children: b }),
+          /* @__PURE__ */ o("div", { className: "component-base-control__control", children: d }),
+          /* @__PURE__ */ o(m, { suffix: !0, children: _ })
         ] }),
-        s && /* @__PURE__ */ o("div", { className: "component-base-control__help", children: s })
+        l && /* @__PURE__ */ o("div", { className: "component-base-control__help", children: l })
       ]
     }
   );
 };
 export {
-  g as BaseControl
+  y as BaseControl
 };

package/dist/components/controls/base-control/props.d.ts

@@ -1,11 +1,19 @@
-import { FC, ReactNode } from 'react';
+import { CSSProperties, FC, ReactNode } from 'react';
 export type CommonProps = {
     label?: ReactNode;
     className?: string;
     help?: ReactNode;
     prefix?: ReactNode;
     suffix?: ReactNode;
+    icon?: (props: {
+        className?: string;
+    }) => ReactNode;
     required?: boolean;
+    variant?: "normal" | "outline" | "ghost";
+    tight?: boolean;
+    horizontal?: boolean;
+    directFocus?: boolean;
+    style?: CSSProperties;
 };
 export type BaseProps = CommonProps & {
     id: string;

package/dist/components/controls/base-control/props.js

@@ -1,21 +1,40 @@
-import { cn as m } from "../../../utils/css.js";
-import { useId as u } from "react";
-function x(e, s = {}) {
-  const { label: t, help: c, prefix: n, suffix: a, className: l, ...o } = e, r = u(), p = {
+import { cn as N } from "../../../utils/css.js";
+import { useId as P } from "react";
+function g(t, s = {}) {
+  const {
+    label: e,
+    help: c,
+    icon: n,
+    prefix: a,
+    suffix: i,
+    className: l,
+    variant: p,
+    tight: u,
+    horizontal: m,
+    directFocus: f,
+    style: d,
+    ...o
+  } = t, r = P(), h = {
     id: r,
-    label: t,
+    label: e,
     help: c,
-    prefix: n,
-    suffix: a,
+    icon: n,
+    prefix: a,
+    suffix: i,
     required: o.required,
+    variant: p,
+    tight: u,
+    horizontal: m,
+    directFocus: f,
+    style: d,
     ...s,
-    className: m(l, s.className)
-  }, i = { ...o, id: r };
+    className: N(l, s.className)
+  }, x = { ...o, id: r };
   return {
-    baseProps: p,
-    controlProps: i
+    baseProps: h,
+    controlProps: x
   };
 }
 export {
-  x as useBaseControlProps
+  g as useBaseControlProps
 };

package/dist/components/controls/base-popover-control/index.js

@@ -1,31 +1,46 @@
-import { jsx as o, jsxs as t } from "react/jsx-runtime";
-import "react";
-import '../../../assets/styles.css';import '../../../assets/style3.css';import '../../../assets/style2.css';import '../../../assets/index16.css';/* empty css                      */
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { Button as a } from "../../button/index.js";
+import '../../../assets/style17.css';import '../../../assets/styles.css';import '../../../assets/style6.css';import '../../../assets/style4.css';import '../../../assets/style3.css';import '../../../assets/style2.css';import '../../../assets/style.css';import '../../../assets/style9.css';/* empty css                      */
+import { useState as c } from "react";
+/* empty css                      */
+/* empty css                      */
+import "../../../primitives/popover/index.js";
+/* empty css                      */
+import { ScrollArea as l } from "../../../primitives/scroll-area/index.js";
+import "../../../primitives/symbol/index.js";
+/* empty css                      */
+import { Truncate as d } from "../../../primitives/truncate/index.js";
 /* empty css                      */
-import { Truncate as a } from "../../../primitives/truncate/index.js";
 /* empty css                       */
-import { e as c } from "../../../CaretDown.es-eySGHzTJ.js";
-import { BaseControl as i } from "../base-control/index.js";
-import { useBaseControlProps as l } from "../base-control/props.js";
-import { u as m, P as v, a as d } from "../../../WMYDSCNQ-Dy1O-Kdl.js";
-import { a as u } from "../../../MTZPJQMC-DyCWBG18.js";
-function P(r = {}) {
-  const e = m(r);
-  return /* @__PURE__ */ o(u, { value: e, children: r.children });
-}
-const y = (r) => {
-  const { baseProps: e, controlProps: p } = l(r, {
+import { e as v } from "../../../CaretDown.es-eyr5AnCc.js";
+import { BaseControl as f } from "../base-control/index.js";
+import { useBaseControlProps as P } from "../base-control/props.js";
+/* empty css                      */
+import { P as u } from "../../../root-j6NM_Xfo.js";
+import { P as _ } from "../../../WMYDSCNQ-YGSwAHQE.js";
+import { P as h } from "../../../G7GW6PWC-FbNigUHQ.js";
+const G = (t) => {
+  const { baseProps: s, controlProps: r } = P(t, {
     className: "component-base-popover-control"
-  }), { placeholder: n, children: s } = p;
-  return /* @__PURE__ */ t(i, { ...e, children: [
-    /* @__PURE__ */ o("input", { ...p.inputProps, id: p.id, type: "hidden" }),
-    /* @__PURE__ */ t(P, { children: [
-      /* @__PURE__ */ t(v, { className: "component-base-popover-control__input", children: [
-        /* @__PURE__ */ o(a, { className: "component-base-popover-control__value", children: n }),
-        /* @__PURE__ */ o("div", { className: "component-base-popover-control__caret", children: /* @__PURE__ */ o(c, {}) })
+  }), [p, n] = c(!1), { placeholder: m, children: i } = r;
+  return /* @__PURE__ */ e(f, { ...s, children: [
+    /* @__PURE__ */ o("input", { ...r.inputProps, id: r.id, type: "hidden" }),
+    /* @__PURE__ */ e(u, { open: p, setOpen: n, children: [
+      /* @__PURE__ */ e(_, { className: "component-base-popover-control__input", children: [
+        /* @__PURE__ */ o(d, { className: "component-base-popover-control__value", children: m }),
+        /* @__PURE__ */ o(
+          a.Icon,
+          {
+            className: "component-base-popover-control__caret",
+            size: "small",
+            variant: "ghost",
+            tabIndex: -1,
+            children: /* @__PURE__ */ o(v, {})
+          }
+        )
       ] }),
-      /* @__PURE__ */ o(
-        d,
+      p && /* @__PURE__ */ o(
+        h,
         {
           className: "component-base-popover-control__popover",
           "data-colour-scheme": "invert",
@@ -35,13 +50,12 @@ const y = (r) => {
           fitViewport: !0,
           gutter: 8,
           overflowPadding: 4,
-          portal: !0,
-          children: s
+          children: /* @__PURE__ */ o(l, { axis: "y", children: i })
         }
       )
     ] })
   ] });
 };
 export {
-  y as BasePopoverControl
+  G as BasePopoverControl
 };

package/dist/components/controls/card-number-control/cards/index.d.ts

@@ -1,5 +1,4 @@
 export * from './american-express';
 export * from './discover';
-export * from './generic';
 export * from './mastercard';
 export * from './visa';

package/dist/components/controls/card-number-control/cards/index.js

@@ -1,12 +1,10 @@
-import { AmericanExpress as o } from "./american-express.js";
+import { AmericanExpress as e } from "./american-express.js";
 import { Discover as p } from "./discover.js";
-import { Generic as x } from "./generic.js";
-import { Mastercard as s } from "./mastercard.js";
-import { Visa as c } from "./visa.js";
+import { Mastercard as t } from "./mastercard.js";
+import { Visa as a } from "./visa.js";
 export {
-  o as AmericanExpress,
+  e as AmericanExpress,
   p as Discover,
-  x as Generic,
-  s as Mastercard,
-  c as Visa
+  t as Mastercard,
+  a as Visa
 };