@wrdagency/blockout 0.0.0

package/dist/VIIRIBF3-XWA2y8Hu.js

@@ -0,0 +1,21 @@
+import { c as r, P as t, o as v, C as a, a as d } from "./P7GR5CS5-BryEvRCz.js";
+import { createContext as n } from "react";
+var o = r(
+  [v],
+  [t]
+), P = o.useProviderContext, C = o.ContextProvider, x = o.ScopedContextProvider, e = r(
+  [d, C],
+  [a, x]
+), c = e.useContext, p = e.useScopedContext, u = e.useProviderContext, S = e.ContextProvider, m = e.ScopedContextProvider;
+n(
+  void 0
+);
+export {
+  x as H,
+  m as M,
+  c as a,
+  P as b,
+  u as c,
+  S as d,
+  p as u
+};

package/dist/_commonjsHelpers-C6fGbg64.js

@@ -0,0 +1,6 @@
+function e(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+export {
+  e as g
+};

package/dist/assets/index.css

@@ -0,0 +1 @@
+.primitive-resizable{position:relative}.primitive-resizable__handle{position:absolute;z-index:2}.primitive-resizable__handle--x{top:0;bottom:0;right:-.75rem;height:100%;width:1.5rem;cursor:ew-resize}.primitive-resizable__handle--y{left:0;right:0;bottom:-.75rem;width:100%;height:1.5rem;cursor:ns-resize}.primitive-resizable__handle:after{content:"";display:block;position:absolute;z-index:1;background-color:var(--blockout__colours__surface--950);opacity:0;transition:opacity .25s ease}.primitive-resizable__handle--x:after{top:10%;bottom:10%;left:calc(50% - 1px);height:80%;width:2px}.primitive-resizable__handle--y:after{left:10%;right:10%;top:calc(50% - 1px);width:80%;height:2px}.primitive-resizable__handle:before{content:"";display:block;position:absolute;z-index:1;border:1px solid var(--blockout__colours__surface--400);opacity:0;transform:scale(1.125);transition:opacity .25s ease,transform .25s ease}.primitive-resizable__handle--x:before{top:1rem;bottom:1rem;left:0;right:0;height:calc(100% - 2rem);width:100%;border-top:none;border-bottom:none}.primitive-resizable__handle--y:before{left:1.5rem;right:1.5rem;top:0;bottom:0;width:calc(100% - 3rem);height:100%;border-left:none;border-right:none}.primitive-resizable__handle:hover:after,.primitive-resizable__handle:focus:after,.primitive-resizable__handle[data-dragging=true]:after{opacity:1}.primitive-resizable__handle[data-dragging=true]:after{background-color:var(--blockout__colours__primary--500)}.primitive-resizable__handle:hover:before,.primitive-resizable__handle:focus:before,.primitive-resizable__handle[data-dragging=true]:before{opacity:1;transform:scale(1)}

package/dist/assets/index10.css

@@ -0,0 +1 @@
+.component-menu__button{outline:0px solid transparent;outline-offset:0px;cursor:pointer;transition:background-color .25s ease,outline .25s ease,outline-offset .25s ease}.component-menu__button:hover{background-color:var(--blockout__colours__surface--50)}.component-menu__button:focus-visible{background-color:transparent;outline:1px solid var(--blockout__colours__surface--950);outline-offset:4px}.component-menu__menu-wrapper{z-index:9999!important}.component-menu{display:flex;flex-direction:column;background-color:var(--blockout__colours__surface--0);border:1px solid var(--blockout__colours__surface--300);min-width:8rem;gap:.325rem;padding:.325rem;box-shadow:0 .175rem .375rem #0000001a}.component-menu__arrow>svg{fill:var(--blockout__colours__surface--0)!important;stroke:var(--blockout__colours__surface--300)!important}.component-menu__item{display:flex;align-items:baseline;gap:.875rem;padding:.375rem .675rem;width:100%;cursor:pointer;transition:background-color .25s ease}.component-menu__item[data-active-item=true]{background-color:var(--blockout__colours__primary--50)}.component-menu__item:focus-visible{outline:none}.component-menu__item[data-active-item=true] .component-menu__item__label{color:var(--blockout__colours__primary--950)}.component-menu__item[data-active-item=true] .component-menu__item__description{color:var(--blockout__colours__primary--900);opacity:.7}.component-menu__item__icon{width:1.25rem;height:1.25rem;fill:var(--blockout__colours__surface--400)}.component-menu__item__icon--pictoral{transform:translateY(.25rem)}.component-menu__item__text{flex-grow:1}.component-menu__item__text__header{display:flex;align-items:center;gap:2rem;justify-content:space-between;width:100%}.component-menu__item__text__header+.component-menu__item__description{margin-top:.25rem}.component-menu__item__label{font-weight:500;color:var(--blockout__colours__surface--950);transition:color .25s ease}.component-menu__item__description{font-weight:400;color:var(--blockout__colours__surface--500);font-size:.875rem;padding-right:.375rem;transition:color .25s ease,opacity .25s ease}.component-menu__item--toggle--checked .component-menu__item__icon--checkbox{fill:var(--blockout__colours__surface--950)}.component-menu__separator{margin:0 -.325rem;border-top:1px solid var(--blockout__colours__surface--300);border-bottom:none}

package/dist/assets/index11.css

@@ -0,0 +1 @@
+.component-select-control__input{-webkit-appearance:none;-moz-appearance:none;cursor:pointer;display:flex;width:100%}.component-select-control__input:focus{outline:none}.component-select-control__value{flex-grow:1;padding:.75rem;min-height:40px;width:100%;min-width:0;max-width:100%;color:var(--blockout__colours__surface--800);font-size:1rem;text-align:left;background-color:transparent;transition:background-color .25s ease}.component-select-control__value:hover{background-color:var(--blockout__colours__surface--50)}.component-select-control__caret{width:2rem;display:flex;justify-content:center;align-items:center;border-left:1px solid var(--blockout__colours__surface--300);background-color:var(--blockout__colours__surface--0);cursor:pointer;transition:background-color .25s ease}.component-select-control__caret:hover{background-color:var(--blockout__colours__surface--50)}.component-select-control__caret>svg{width:.75rem;height:.75rem;fill:currentColor}.component-select-control__popover__wrapper{z-index:9999!important}.component-select-control__popover{display:flex;flex-direction:column;gap:.325rem;padding:.325rem;background-color:var(--blockout__colours__surface--0);border:1px solid var(--blockout__colours__surface--300);box-shadow:0 .175rem .375rem #0000001a;width:calc(var(--popover-anchor-width) + 2px);max-height:var(--popover-available-height);overflow-y:auto}.component-select-control__popover:focus{outline:none}.component-select-control__option{display:flex;justify-content:start;align-items:start;flex-direction:column;gap:.25rem;padding:.375rem .675rem;min-height:40px;cursor:pointer;transition:background-color .25s ease}.component-select-control__option:first-child{border-top:none}.component-select-control__option__label{font-weight:500;color:var(--blockout__colours__surface--950);transition:color .25s ease}.component-select-control__option__description{font-weight:400;color:var(--blockout__colours__surface--500);font-size:.875rem;transition:color .25s ease,opacity .25s ease}.component-select-control__option[data-active-item=true]{background-color:var(--blockout__colours__primary--50)}.component-select-control__option[data-active-item=true] .component-select-control__option__label{color:var(--blockout__colours__primary--950)}.component-select-control__option[data-active-item=true] .component-select-control__option__description{color:var(--blockout__colours__primary--900);opacity:.7}

package/dist/assets/index2.css

@@ -0,0 +1 @@
+.component-toggle-control__buttons{display:flex;overflow:hidden}.component-toggle-control__on,.component-toggle-control__off{padding:.5rem .75rem;min-height:40px;width:100%;color:var(--blockout__colours__surface--800);font-size:1rem;font-weight:500;flex-basis:50%;cursor:pointer;position:relative;transition:color .25s ease,background-color .25s ease}.component-toggle-control__on{border-right:1px solid var(--blockout__colours__surface--300)}.component-toggle-control__on,.component-toggle-control__buttons:has(input:checked) .component-toggle-control__off{background-color:var(--blockout__colours__surface--100);color:var(--blockout__colours__surface--600);box-shadow:none;z-index:1}.component-toggle-control__off,.component-toggle-control__buttons:has(input:checked) .component-toggle-control__on{background-color:var(--blockout__colours__surface--0);color:var(--blockout__colours__surface--950);box-shadow:0 0 .75rem .125rem #0003;z-index:2}

package/dist/assets/index3.css

@@ -0,0 +1 @@
+.component-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}

package/dist/assets/index4.css

@@ -0,0 +1 @@
+.component-textarea-control__input{min-height:5rem!important;max-height:85vh!important;resize:vertical}

package/dist/assets/index5.css

@@ -0,0 +1 @@
+.component-number-control__input::-webkit-outer-spin-button,.component-number-control__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.component-number-control__input{-moz-appearance:textfield}.component-number-control__spinbox{width:2rem;display:flex;flex-direction:column;border-left:1px solid var(--blockout__colours__surface--300);background-color:var(--blockout__colours__surface--0)}.component-number-control__spinbox__button{display:flex;align-items:center;justify-content:center;flex-basis:50%;cursor:pointer;transition:background-color .25s ease}.component-number-control__spinbox__button:hover{background-color:var(--blockout__colours__surface--50)}.component-number-control__spinbox__button:first-child{border-bottom:1px solid var(--blockout__colours__surface--300)}.component-number-control__spinbox__button>svg{width:.75rem;height:.75rem;fill:currentColor}

package/dist/assets/index6.css

@@ -0,0 +1 @@
+.component-button{--button__bg: var(--blockout__colours__primary--500);--button__bg--hover: var(--blockout__colours__primary--600);--button__text: var(--blockout__colours__surface--50);--button__text--hover: var(--blockout__colours__surface--50);display:flex;align-items:center;justify-content:center;gap:1rem;padding:.75rem 1.25rem;min-height:40px;font-size:1rem;width:fit-content;background-color:var(--button__bg);color:var(--button__text);cursor:pointer;outline:0px solid transparent;outline-offset:0px;transition:background-color .25s ease,outline .25s ease,outline-offset .25s ease,border-color .25s ease,color .25s ease}.component-button>svg{width:1.25rem;height:1.25rem;color:currentColor}.component-button:hover{background-color:var(--button__bg--hover);color:var(--button__text--hover)}.component-button:focus{background-color:var(--button__bg--hover);color:var(--button__text--hover);outline:1px solid var(--blockout__colours__surface--950);outline-offset:4px}.component-button:active{outline-offset:3px}.component-button--wide{width:100%}.component-button--outline{border:2px solid var(--button__bg);color:var(--button__bg);background-color:transparent}.component-button--outline:hover{border:2px solid var(--button__bg--hover);color:var(--button__bg--hover);background-color:transparent}.component-button--outline:focus{border:2px solid var(--button__bg--hover);color:var(--button__bg--hover);background-color:transparent}.component-button--primary{--button__bg: var(--blockout__colours__primary--500);--button__bg--hover: var(--blockout__colours__primary--600);--button__text: var(--blockout__colours__surface--50);--button__text--hover: var(--blockout__colours__surface--50)}.component-button--dark{--button__bg: var(--blockout__colours__surface--950);--button__bg--hover: var(--blockout__colours__surface--900);--button__text: var(--blockout__colours__surface--50);--button__text--hover: var(--blockout__colours__surface--50)}.component-button--light{--button__bg: var(--blockout__colours__surface--100);--button__bg--hover: var(--blockout__colours__surface--200);--button__text: var(--blockout__colours__surface--950);--button__text--hover: var(--blockout__colours__surface--950)}

package/dist/assets/index7.css

@@ -0,0 +1 @@
+.component-button-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}

package/dist/assets/index8.css

@@ -0,0 +1 @@
+.component-base-control{display:flex;flex-direction:column}.component-base-control__label{display:block;font-weight:500;color:var(--blockout__colours__surface--950);font-size:.75rem;text-transform:uppercase;padding-bottom:.375rem}.component-base-control__label__required{color:#df1414;padding-left:.25rem}.component-base-control__box{display:flex;flex-direction:row;border:1px solid var(--blockout__colours__surface--300);background-color:var(--blockout__colours__surface--0);transition:outline .25s ease,outline-offset .25s ease,border-color .25s ease,color .25s ease}.component-base-control__box:focus-within{background-color:var(--blockout__colours__surface--0);outline:1px solid var(--blockout__colours__surface--950);outline-offset:4px}.component-base-control__control{flex-grow:1}.component-base-control__control>input,.component-base-control__control>select,.component-base-control__control>textarea{display:block;padding:.75rem;min-height:40px;width:100%;min-width:0;max-width:100%;color:var(--blockout__colours__surface--800);font-size:1rem;background-color:transparent;transition:background-color .25s ease}.component-base-control__control>input:hover,.component-base-control__control>select:hover,.component-base-control__control>textarea:hover{background-color:var(--blockout__colours__surface--50)}.component-base-control__control>input:focus,.component-base-control__control>select:focus,.component-base-control__control>textarea:focus{background-color:transparent;outline:none}.component-base-control__help{margin-top:.25rem;font-size:.75rem;font-weight:400;color:var(--blockout__colours__surface--600)}

package/dist/assets/index9.css

@@ -0,0 +1 @@
+.component-data-table__table{border-collapse:separate;border-spacing:0}.component-data-table__th__target,.component-data-table__td{padding:1.25rem;border-bottom:1px solid var(--blockout__colours__surface--300)}.component-data-table__th:first-child .component-data-table__th__target,.component-data-table__td:first-child{padding-left:.25rem}.component-data-table__th:last-child .component-data-table__th__target,.component-data-table__td:last-child{padding-right:.25rem}.component-data-table__th{text-align:left;font-weight:500}.component-data-table__th__target{display:flex;align-items:center;gap:.75rem;width:100%;height:100%;font-weight:500}.component-data-table__th__sort-indicator{width:1rem;height:1rem;fill:var(--blockout__colours__surface--400)}.component-data-table__td{white-space:nowrap}.component-data-table__td--sticky,.component-data-table__th--sticky{position:sticky;left:0;background-color:var(--blockout__colours__surface--0)}.component-data-table__td--sticky:after,.component-data-table__th--sticky:after{content:"";position:absolute;top:-1px;left:100%;bottom:0;width:1rem;pointer-events:none;background:linear-gradient(90deg,#00000016,#0000)}.component-data-table__tfoot .component-data-table__td{padding-top:.75rem;padding-bottom:.75rem;font-size:.875rem;color:var(--blockout__colours__surface--600)}

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    className?: string;
+    variant?: "primary" | "light" | "dark";
+    wide?: boolean;
+    outline?: boolean;
+}
+export declare const Button: FC<ButtonProps>;
+export {};

package/dist/components/button/index.js

@@ -0,0 +1,28 @@
+import { jsx as p } from "react/jsx-runtime";
+import { cn as c } from "../../utils/css.js";
+import '../../assets/index6.css';const a = ({
+  children: t,
+  className: o,
+  variant: n = "primary",
+  wide: e = !1,
+  outline: m = !1,
+  type: r = "button",
+  ...u
+}) => /* @__PURE__ */ p(
+  "button",
+  {
+    type: r,
+    className: c(
+      o,
+      "component-button",
+      `component-button--${n}`,
+      e && "component-button--wide",
+      m && "component-button--outline"
+    ),
+    ...u,
+    children: t
+  }
+);
+export {
+  a as Button
+};

package/dist/components/button-group/index.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+interface ButtonGroupProps extends PropsWithChildren {
+    className?: string;
+}
+export declare const ButtonGroup: FC<ButtonGroupProps>;
+export {};

package/dist/components/button-group/index.js

@@ -0,0 +1,6 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as n } from "../../utils/css.js";
+import '../../assets/index7.css';const u = ({ children: o, className: t }) => /* @__PURE__ */ r("div", { className: n("component-button-group", t), children: o });
+export {
+  u as ButtonGroup
+};

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BaseProps } from './props';
+export declare const BaseControl: FC<BaseProps>;

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

@@ -0,0 +1,26 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { cn as i } from "../../../utils/css.js";
+import '../../../assets/index8.css';const d = ({
+  label: c,
+  className: l,
+  id: s,
+  help: n,
+  children: a,
+  prefix: r,
+  suffix: t,
+  required: m
+}) => /* @__PURE__ */ o("div", { className: i("component-base-control", l), children: [
+  /* @__PURE__ */ o("label", { className: "component-base-control__label", htmlFor: s, children: [
+    c,
+    m && /* @__PURE__ */ e("span", { className: "component-base-control__label__required", children: "*" })
+  ] }),
+  /* @__PURE__ */ o("div", { className: "component-base-control__box", children: [
+    r,
+    /* @__PURE__ */ e("div", { className: "component-base-control__control", children: a }),
+    t
+  ] }),
+  n && /* @__PURE__ */ e("div", { className: "component-base-control__help", children: n })
+] });
+export {
+  d as BaseControl
+};

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

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from 'react';
+export type CommonProps = {
+    label?: string;
+    className?: string;
+    help?: string;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    required?: boolean;
+};
+export type BaseProps = CommonProps & {
+    id: string;
+    children?: ReactNode;
+};
+export type ControlProps<T> = CommonProps & T;
+export type ControlFC<T> = FC<ControlProps<T>>;
+type UseBaseControlPropsReturn<T> = {
+    baseProps: BaseProps;
+    controlProps: T & {
+        id: string;
+    };
+};
+export declare function useBaseControlProps<T>(props: ControlProps<T>, overrideProps?: CommonProps): UseBaseControlPropsReturn<T>;
+export {};

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

@@ -0,0 +1,21 @@
+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 = {
+    id: r,
+    label: t,
+    help: c,
+    prefix: n,
+    suffix: a,
+    required: o.required,
+    ...s,
+    className: m(l, s.className)
+  }, i = { ...o, id: r };
+  return {
+    baseProps: p,
+    controlProps: i
+  };
+}
+export {
+  x as useBaseControlProps
+};

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

@@ -0,0 +1,6 @@
+export { BaseControl } from './base-control';
+export { NumberControl } from './number-control';
+export { SelectControl } from './select-control';
+export { TextControl } from './text-control';
+export { TextareaControl } from './textarea-control';
+export { ToggleControl } from './toggle-control';

package/dist/components/controls/index.js

@@ -0,0 +1,14 @@
+import { BaseControl as t } from "./base-control/index.js";
+import { NumberControl as l } from "./number-control/index.js";
+import { SelectControl as m } from "./select-control/index.js";
+import { TextControl as n } from "./text-control/index.js";
+import { TextareaControl as C } from "./textarea-control/index.js";
+import { ToggleControl as T } from "./toggle-control/index.js";
+export {
+  t as BaseControl,
+  l as NumberControl,
+  m as SelectControl,
+  n as TextControl,
+  C as TextareaControl,
+  T as ToggleControl
+};

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

@@ -0,0 +1,6 @@
+import { InputHTMLAttributes } from 'react';
+import { ControlFC } from '../base-control/props';
+interface NumberControlProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+}
+export declare const NumberControl: ControlFC<NumberControlProps>;
+export {};

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

@@ -0,0 +1,52 @@
+import { jsx as n, jsxs as i } from "react/jsx-runtime";
+import { e as l } from "../../../CaretDown.es-eySGHzTJ.js";
+import { r as u } from "../../../CaretUp.es-Cy8czlHG.js";
+import { useRef as a } from "react";
+import { BaseControl as p } from "../base-control/index.js";
+import { useBaseControlProps as b } from "../base-control/props.js";
+import '../../../assets/index5.css';const h = (r) => {
+  const o = a(null), c = () => /* @__PURE__ */ i("div", { className: "component-number-control__spinbox", children: [
+    /* @__PURE__ */ n(
+      "button",
+      {
+        className: "component-number-control__spinbox__button",
+        "aria-label": "Increment",
+        role: "spinbutton",
+        "aria-controls": r.id,
+        onClick: () => e(1),
+        tabIndex: -1,
+        children: /* @__PURE__ */ n(u, {})
+      }
+    ),
+    /* @__PURE__ */ n(
+      "button",
+      {
+        className: "component-number-control__spinbox__button",
+        "aria-label": "Decrement",
+        role: "spinbutton",
+        "aria-controls": r.id,
+        onClick: () => e(-1),
+        tabIndex: -1,
+        children: /* @__PURE__ */ n(l, {})
+      }
+    )
+  ] }), e = (t) => {
+    o.current && (t > 0 ? o.current.stepUp(t) : o.current.stepDown(t * -1), o.current.focus());
+  }, { baseProps: s, controlProps: m } = b(r, {
+    className: "component-number-control",
+    suffix: /* @__PURE__ */ n(c, {})
+  });
+  return /* @__PURE__ */ n(p, { ...s, children: /* @__PURE__ */ n(
+    "input",
+    {
+      className: "component-number-control__input",
+      type: "number",
+      inputMode: "numeric",
+      ref: o,
+      ...m
+    }
+  ) });
+};
+export {
+  h as NumberControl
+};

package/dist/components/controls/select-control/index.d.ts

@@ -0,0 +1,9 @@
+import { ControlFC } from '../base-control/props';
+import { Optionable } from './options';
+import * as Ariakit from "@ariakit/react";
+interface SelectControlProps extends Ariakit.SelectOptions {
+    options?: Optionable[];
+    placeholder?: string;
+}
+export declare const SelectControl: ControlFC<SelectControlProps>;
+export {};