@wrdagency/blockout 0.0.3 → 0.0.5

package/dist/assets/index5.css

@@ -1 +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}
+.component-button-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}

package/dist/assets/index6.css

@@ -1 +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)}
+.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;max-width:65ch;font-size:.75rem;font-weight:400;color:var(--blockout__colours__surface--600)}fieldset.component-base-control .component-base-control__box{border:none}fieldset.component-base-control .component-base-control__box:focus-within{outline:none}fieldset.component-base-control .component-base-control__help{order:-1;margin-top:0;margin-bottom:.75rem}

package/dist/assets/index7.css

@@ -1 +1 @@
-.component-button-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}
+.component-choice-control__choices{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}.component-choice-control__choice{display:flex;flex-direction:row;align-items:baseline;gap:.75rem;padding:1rem;border:1px solid var(--blockout__colours__surface--300);background-color:var(--blockout__colours__surface--200);cursor:pointer;transition:background-color .25s ease,outline .25s ease,outline-offset .25s ease}.component-choice-control__choice:focus-within{outline:1px solid var(--blockout__colours__surface--950);outline-offset:4px}.component-choice-control__choice:has(input:checked){background-color:var(--blockout__colours__surface--0)}.component-choice-control__choice__icon{position:relative;border:2px solid var(--blockout__colours__surface--300);width:1rem;height:1rem;transition:border-color .25s ease;border-radius:2px;transform:translateY(.125rem)}.component-choice-control__choice:has(input:checked) .component-choice-control__choice__icon{border-color:var(--blockout__colours__surface--950)}.component-choice-control__choice__icon:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transform:scale(0);display:block;background-color:var(--blockout__colours__primary--950);transition:transform .15s ease;border-radius:1px}.component-choice-control__choice:has(input:checked) .component-choice-control__choice__icon:after{transform:scale(.75)}.component-choice-control__choice--single .component-choice-control__choice__icon{border-radius:1rem}.component-choice-control__choice--single .component-choice-control__choice__icon:after{border-radius:1rem}.component-choice-control__choice__label{font-weight:500;color:var(--blockout__colours__surface--600);transition:color .25s ease}.component-choice-control__choice__description{font-weight:400;color:var(--blockout__colours__surface--500);font-size:.875rem;transition:color .25s ease,opacity .25s ease}.component-choice-control__choice:has(input:checked) .component-choice-control__choice__label{color:var(--blockout__colours__surface--950)}

package/dist/assets/index8.css

@@ -1 +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)}
+.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/style.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/styles.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/components/button/index.js

@@ -1,6 +1,6 @@
 import { jsx as p } from "react/jsx-runtime";
 import { cn as c } from "../../utils/css.js";
-import '../../assets/index6.css';const a = ({
+import '../../assets/index4.css';const a = ({
   children: t,
   className: o,
   variant: n = "primary",

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

@@ -1,6 +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 });
+import '../../assets/index5.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

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

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

@@ -1,26 +1,30 @@
 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 = ({
+import { cn as b } from "../../../utils/css.js";
+import '../../../assets/index6.css';const N = ({
+  as: n = "div",
   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 })
-] });
+  className: s,
+  id: a,
+  help: l,
+  children: r,
+  prefix: t,
+  suffix: m,
+  required: i
+}) => {
+  const d = n, _ = n === "fieldset" ? "legend" : "label";
+  return /* @__PURE__ */ o(d, { className: b("component-base-control", s), children: [
+    /* @__PURE__ */ o(_, { className: "component-base-control__label", htmlFor: a, children: [
+      c,
+      i && /* @__PURE__ */ e("span", { className: "component-base-control__label__required", children: "*" })
+    ] }),
+    /* @__PURE__ */ o("div", { className: "component-base-control__box", children: [
+      t,
+      /* @__PURE__ */ e("div", { className: "component-base-control__control", children: r }),
+      m
+    ] }),
+    l && /* @__PURE__ */ e("div", { className: "component-base-control__help", children: l })
+  ] });
+};
 export {
-  d as BaseControl
+  N as BaseControl
 };

package/dist/components/controls/choice-control/choice.d.ts

@@ -0,0 +1,8 @@
+import { Option } from '../../../types/options';
+import { FC, InputHTMLAttributes } from 'react';
+interface ChoiceProps extends Option, Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value"> {
+    multiple?: boolean;
+    name: string;
+}
+export declare const Choice: FC<ChoiceProps>;
+export {};

package/dist/components/controls/choice-control/choice.js

@@ -0,0 +1,54 @@
+import { jsxs as n, jsx as c } from "react/jsx-runtime";
+import { cn as m } from "../../../utils/css.js";
+import { useId as s } from "react";
+import '../../../assets/style.css';/* empty css                      */
+import { VisuallyHidden as a } from "../../../primitives/visually-hidden/index.js";
+const x = ({
+  value: t,
+  label: r,
+  description: o,
+  disabled: l,
+  multiple: e = !1,
+  className: _,
+  ...h
+}) => {
+  const i = s();
+  return /* @__PURE__ */ n(
+    "label",
+    {
+      className: m(
+        "component-choice-control__choice",
+        `component-choice-control__choice--${e ? "multiple" : "single"}`,
+        _
+      ),
+      htmlFor: i,
+      children: [
+        /* @__PURE__ */ c(a, { children: /* @__PURE__ */ c(
+          "input",
+          {
+            ...h,
+            className: "component-choice-control__choice__input",
+            id: i,
+            type: e ? "checkbox" : "radio",
+            value: t,
+            disabled: l
+          }
+        ) }),
+        /* @__PURE__ */ c(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "component-choice-control__choice__icon"
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: "component-choice-control__choice__text", children: [
+          /* @__PURE__ */ c("div", { className: "component-choice-control__choice__label", children: r }),
+          o && /* @__PURE__ */ c("p", { className: "component-choice-control__choice__description", children: o })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  x as Choice
+};

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

@@ -0,0 +1,9 @@
+import { Optionable } from '../../../types/options';
+import { InputHTMLAttributes } from 'react';
+import { ControlFC } from '../base-control/props';
+interface ChoiceControlProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    options?: Optionable[];
+    multiple?: boolean;
+}
+export declare const ChoiceControl: ControlFC<ChoiceControlProps>;
+export {};

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

@@ -0,0 +1,31 @@
+import { jsx as o } from "react/jsx-runtime";
+import { normalizeOption as p } from "../../../types/options.js";
+import "react";
+import { BaseControl as a } from "../base-control/index.js";
+import { useBaseControlProps as f } from "../base-control/props.js";
+import { Choice as h } from "./choice.js";
+import '../../../assets/index7.css';const B = (t) => {
+  const { baseProps: r, controlProps: n } = f(t, {
+    className: "component-choice-control"
+  }), {
+    options: s,
+    multiple: i = !1,
+    name: c = r.id,
+    value: d,
+    // Remove value from restControlProps
+    ...m
+  } = n, l = (s || []).map(p);
+  return /* @__PURE__ */ o(a, { as: "fieldset", ...r, children: /* @__PURE__ */ o("div", { className: "component-choice-control__choices", children: l.map((e) => /* @__PURE__ */ o(
+    h,
+    {
+      name: c,
+      multiple: i,
+      ...e,
+      ...m
+    },
+    e.value
+  )) }) });
+};
+export {
+  B as ChoiceControl
+};

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

@@ -1,4 +1,5 @@
 export { BaseControl } from './base-control';
+export { ChoiceControl } from './choice-control';
 export { NumberControl } from './number-control';
 export { SelectControl } from './select-control';
 export { TextControl } from './text-control';

package/dist/components/controls/index.js

@@ -1,14 +1,16 @@
 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";
+import { ChoiceControl as l } from "./choice-control/index.js";
+import { NumberControl as m } from "./number-control/index.js";
+import { SelectControl as f } from "./select-control/index.js";
+import { TextControl as p } from "./text-control/index.js";
+import { TextareaControl as T } from "./textarea-control/index.js";
+import { ToggleControl as g } from "./toggle-control/index.js";
 export {
   t as BaseControl,
-  l as NumberControl,
-  m as SelectControl,
-  n as TextControl,
-  C as TextareaControl,
-  T as ToggleControl
+  l as ChoiceControl,
+  m as NumberControl,
+  f as SelectControl,
+  p as TextControl,
+  T as TextareaControl,
+  g as ToggleControl
 };

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

@@ -4,7 +4,7 @@ import { r as u } from "../../../CaretUp.es-Cy8czlHG.js";
 import { useRef as p } from "react";
 import { BaseControl as a } from "../base-control/index.js";
 import { useBaseControlProps as b } from "../base-control/props.js";
-import '../../../assets/index5.css';const h = (t) => {
+import '../../../assets/index8.css';const h = (t) => {
   const o = p(null), c = () => /* @__PURE__ */ i("div", { className: "component-number-control__spinbox", children: [
     /* @__PURE__ */ n(
       "button",

package/dist/components/controls/ranked-choice-control/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/controls/ranked-choice-control/index.js

@@ -0,0 +1 @@
+

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

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