@blockle/blocks-react 2.0.1 → 2.2.0

package/dist/components/form/Checkbox/checkbox.css.js

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayerComponent } from "@blockle/blocks-core";
+import { layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/form/Checkbox/checkbox.css.ts", "@blockle/blocks-react");
 const container = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       position: "relative",
       cursor: "pointer",
       overflow: "hidden"
@@ -16,7 +16,7 @@ const input = style({
   inset: 0,
   opacity: 0,
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       all: "unset"
     }
   }

package/dist/components/form/Label/Label.d.ts

@@ -16,3 +16,4 @@ export type LabelProps = {
 } & HTMLElementProps<HTMLLabelElement>;
 export declare const Label: React.FC<LabelProps>;
 export {};
+//# sourceMappingURL=Label.d.ts.map

package/dist/components/form/Label/Label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Label/Label.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,KAAK,EAEV,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAI9B,KAAK,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG;IACvB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC1B,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AAEvC,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuBtC,CAAC"}

package/dist/components/form/NumericInput/NumericInput.css.d.ts

@@ -0,0 +1,3 @@
+export declare const numericInputContainer: string;
+export declare const numericInput: string;
+//# sourceMappingURL=NumericInput.css.d.ts.map

package/dist/components/form/NumericInput/NumericInput.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumericInput.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/NumericInput/NumericInput.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,qBAAqB,QAAY,CAAC;AAE/C,eAAO,MAAM,YAAY,QAiBvB,CAAC"}

package/dist/components/form/NumericInput/NumericInput.css.js

@@ -0,0 +1,27 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { layers } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/form/NumericInput/NumericInput.css.ts", "@blockle/blocks-react");
+style({});
+const numericInput = style({
+  "@layer": {
+    [layers.molecule]: {
+      // Hide native number input controls
+      MozAppearance: "textfield",
+      selectors: {
+        "&::-webkit-inner-spin-button": {
+          WebkitAppearance: "none",
+          margin: 0
+        },
+        "&::-webkit-outer-spin-button": {
+          WebkitAppearance: "none",
+          margin: 0
+        }
+      }
+    }
+  }
+});
+endFileScope();
+export {
+  numericInput
+};

package/dist/components/form/NumericInput/NumericInput.d.ts

@@ -0,0 +1,9 @@
+import { TextInputProps } from '../TextInput/TextInput.js';
+export type NumericInputProps = {
+    value: number | string;
+    min?: number;
+    max?: number;
+    step?: number;
+} & TextInputProps;
+export declare const NumericInput: React.FC<NumericInputProps>;
+//# sourceMappingURL=NumericInput.d.ts.map

package/dist/components/form/NumericInput/NumericInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form/NumericInput/NumericInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,cAAc,CAAC;AAEnB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2CpD,CAAC"}

package/dist/components/form/NumericInput/NumericInput.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { composeRefs } from "@blockle/blocks-core";
+import { useRef, useCallback } from "react";
+import { Button } from "../Button/Button.js";
+import { TextInput } from "../TextInput/TextInput.js";
+import { numericInput } from "./NumericInput.css.js";
+const NumericInput = (props) => {
+  const inputRef = useRef(null);
+  const onDecrement = useCallback((event) => {
+    const size = event.shiftKey ? 10 : 1;
+    inputRef.current?.stepDown(size);
+  }, []);
+  const onIncrement = useCallback((event) => {
+    const stepSize = event.shiftKey ? 10 : 1;
+    inputRef.current?.stepUp(stepSize);
+  }, []);
+  const onKeyDown = useCallback((event) => {
+    if (!event.shiftKey) {
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      inputRef.current?.stepUp(10);
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      inputRef.current?.stepDown(10);
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      ref: composeRefs(props.ref, inputRef),
+      inputClassName: numericInput,
+      type: "number",
+      startSlot: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "small", onClick: onDecrement, children: "-" }),
+      endSlot: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "small", onClick: onIncrement, children: "+" }),
+      onKeyDown,
+      ...props
+    }
+  );
+};
+export {
+  NumericInput
+};

package/dist/components/form/Radio/Radio.d.ts

@@ -6,3 +6,4 @@ export type RadioProps = {
     value: string;
 } & HTMLElementProps<HTMLInputElement>;
 export declare const Radio: React.FC<RadioProps>;
+//# sourceMappingURL=Radio.d.ts.map

package/dist/components/form/Radio/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Radio/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAOzE,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AAEvC,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuCtC,CAAC"}

package/dist/components/form/Radio/RadioGroup.d.ts

@@ -6,3 +6,4 @@ export type RadioGroupProps = {
     style?: React.CSSProperties;
 };
 export declare const RadioGroup: React.FC<RadioGroupProps>;
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/components/form/Radio/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Radio/RadioGroup.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAUhD,CAAC"}

package/dist/components/form/Radio/radio.css.d.ts

@@ -1,3 +1,4 @@
 export declare const container: string;
 export declare const input: string;
 export declare const icon: string;
+//# sourceMappingURL=radio.css.d.ts.map

package/dist/components/form/Radio/radio.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Radio/radio.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAQpB,CAAC;AAEH,eAAO,MAAM,KAAK,QAShB,CAAC;AAEH,eAAO,MAAM,IAAI,QAEf,CAAC"}

package/dist/components/form/Radio/radio.css.js

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayerComponent } from "@blockle/blocks-core";
+import { layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/form/Radio/radio.css.ts", "@blockle/blocks-react");
 const container = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       position: "relative",
       cursor: "pointer",
       overflow: "hidden"
@@ -16,7 +16,7 @@ const input = style({
   inset: 0,
   opacity: 0,
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       all: "unset"
     }
   }

package/dist/components/form/Select/Select.d.ts

@@ -9,3 +9,4 @@ export type SelectProps = {
 } & HTMLElementProps<HTMLSelectElement>;
 export declare const Select: React.FC<SelectProps>;
 export {};
+//# sourceMappingURL=Select.d.ts.map

package/dist/components/form/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAC9C,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;AAExC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsCxC,CAAC"}

package/dist/components/form/Select/select.css.d.ts

@@ -1,3 +1,4 @@
 export declare const wrapper: string;
 export declare const select: string;
 export declare const icon: string;
+//# sourceMappingURL=select.css.d.ts.map

package/dist/components/form/Select/select.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select/select.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,QAMlB,CAAC;AAEH,eAAO,MAAM,MAAM,QAOjB,CAAC;AAEH,eAAO,MAAM,IAAI,QAYf,CAAC"}

package/dist/components/form/Select/select.css.js

@@ -1,17 +1,17 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayerComponent } from "@blockle/blocks-core";
+import { layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/form/Select/select.css.ts", "@blockle/blocks-react");
 const wrapper = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       position: "relative"
     }
   }
 });
 const select = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       appearance: "none",
       inlineSize: "100%"
     }
@@ -19,7 +19,7 @@ const select = style({
 });
 const icon = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       position: "absolute",
       right: 0,
       top: 0,

package/dist/components/form/Slider/Slider.d.ts

@@ -19,3 +19,4 @@ export type SliderProps = {
 };
 export declare const Slider: React.FC<SliderProps>;
 export {};
+//# sourceMappingURL=Slider.d.ts.map

package/dist/components/form/Slider/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,IAAI,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACtC,WAAW,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsIxC,CAAC"}

package/dist/components/form/Slider/slider.css.d.ts

@@ -3,3 +3,4 @@ export declare const containerVertical: string;
 export declare const track: string;
 export declare const filledTrack: string;
 export declare const thumb: string;
+//# sourceMappingURL=slider.css.d.ts.map

package/dist/components/form/Slider/slider.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Slider/slider.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAOpB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAM5B,CAAC;AAEH,eAAO,MAAM,KAAK,QAehB,CAAC;AAEH,eAAO,MAAM,WAAW,QAatB,CAAC;AAEH,eAAO,MAAM,KAAK,QAiBhB,CAAC"}

package/dist/components/form/Slider/slider.css.js

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayerComponent } from "@blockle/blocks-core";
+import { layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/form/Slider/slider.css.ts", "@blockle/blocks-react");
 const container = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       position: "relative",
       writingMode: "horizontal-tb"
     }
@@ -12,14 +12,14 @@ const container = style({
 });
 const containerVertical = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       writingMode: "vertical-lr"
     }
   }
 });
 const track = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       cursor: "pointer",
       position: "absolute",
       inlineSize: "100%",
@@ -35,7 +35,7 @@ const track = style({
 });
 const filledTrack = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       position: "absolute",
       blockSize: "100%",
       borderRadius: "inherit",
@@ -49,7 +49,7 @@ const filledTrack = style({
 });
 const thumb = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       cursor: "pointer",
       position: "absolute",
       blockSize: "100%",

package/dist/components/form/Slider/usePointerProgress.d.ts

@@ -9,3 +9,4 @@ export declare function getProgress(event: PointerEvent, rect: DOMRect): [x: num
  */
 export declare function usePointerProgress<T extends React.RefObject<HTMLElement | null>>({ container, orientation, onChange }: PointerProgressOptions<T>): void;
 export {};
+//# sourceMappingURL=usePointerProgress.d.ts.map

package/dist/components/form/Slider/usePointerProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePointerProgress.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Slider/usePointerProgress.ts"],"names":[],"mappings":"AAEA,KAAK,sBAAsB,CAAC,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI;IAC3E,SAAS,EAAE,CAAC,CAAC;IACb,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,wBAAgB,WAAW,CACzB,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,OAAO,GACZ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,CAQxB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC7C,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,IAAI,CA6CvE"}

package/dist/components/form/Switch/Switch.d.ts

@@ -4,3 +4,4 @@ export type SwitchProps = {
     ref?: React.Ref<HTMLInputElement>;
 } & Omit<HTMLElementProps<HTMLInputElement>, 'onChange'>;
 export declare const Switch: React.FC<SwitchProps>;
+//# sourceMappingURL=Switch.d.ts.map

package/dist/components/form/Switch/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAMzE,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC,GAAG,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEzD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwExC,CAAC"}

package/dist/components/form/Switch/switch.css.d.ts

@@ -1,2 +1,3 @@
 export declare const container: string;
 export declare const input: string;
+//# sourceMappingURL=switch.css.d.ts.map

package/dist/components/form/Switch/switch.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Switch/switch.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAQpB,CAAC;AAEH,eAAO,MAAM,KAAK,QAQhB,CAAC"}

package/dist/components/form/Switch/switch.css.js

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayerComponent } from "@blockle/blocks-core";
+import { layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/form/Switch/switch.css.ts", "@blockle/blocks-react");
 const container = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       cursor: "pointer",
       userSelect: "none",
       position: "relative"
@@ -13,7 +13,7 @@ const container = style({
 });
 const input = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       opacity: 0,
       maxBlockSize: 0,
       maxInlineSize: 0

package/dist/components/form/TextInput/TextInput.css.d.ts

@@ -0,0 +1,2 @@
+export declare const input: string;
+//# sourceMappingURL=TextInput.css.d.ts.map

package/dist/components/form/TextInput/TextInput.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/TextInput/TextInput.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,QAYhB,CAAC"}

package/dist/components/form/{Input/input.css.js → TextInput/TextInput.css.js}

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayerComponent } from "@blockle/blocks-core";
+import { layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
-setFileScope("src/components/form/Input/input.css.ts", "@blockle/blocks-react");
+setFileScope("src/components/form/TextInput/TextInput.css.ts", "@blockle/blocks-react");
 const input = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       appearance: "none",
       width: "100%",
       selectors: {

package/dist/components/form/{Input/Input.d.ts → TextInput/TextInput.d.ts}

@@ -1,10 +1,12 @@
 import { HTMLElementProps, OptionalLiteral } from '@blockle/blocks-core';
-export type InputProps = {
+export type TextInputProps = {
     className?: string;
+    inputClassName?: string;
     endSlot?: React.ReactNode;
     name: string;
     ref?: React.Ref<HTMLInputElement>;
     startSlot?: React.ReactNode;
     type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
 } & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
-export declare const Input: React.FC<InputProps>;
+export declare const TextInput: React.FC<TextInputProps>;
+//# sourceMappingURL=TextInput.d.ts.map

package/dist/components/form/TextInput/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form/TextInput/TextInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACrB,MAAM,sBAAsB,CAAC;AAM9B,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,eAAe,CACpB,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,CACzD,CAAC;CAEH,GAAG,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAErD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA0C9C,CAAC"}

package/dist/components/form/{Input/Input.js → TextInput/TextInput.js}

@@ -1,12 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
-import { useId } from "react";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { Box } from "../../layout/Box/Box.js";
-import { input } from "./input.css.js";
-const Input = ({
+import { input } from "./TextInput.css.js";
+const TextInput = ({
   className,
+  inputClassName,
   endSlot,
   name,
   placeholder,
@@ -15,30 +15,28 @@ const Input = ({
   type = "text",
   ...restProps
 }) => {
-  const id = useId();
-  const containerClassName = useComponentStyles(
-    "input",
+  const containerStyles = useComponentStyles(
+    "textInput",
     { container: true },
     false
   );
-  const inputClassName = useComponentStyles("input", { input: true });
+  const inputStyles = useComponentStyles("textInput", { input: true });
   return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
     Box,
     {
       display: "flex",
       alignItems: "center",
-      className: classnames(containerClassName, className),
+      className: classnames(containerStyles, className),
       children: [
         startSlot,
         /* @__PURE__ */ jsx(
           "input",
           {
-            id,
             ref,
             name,
             type,
             placeholder,
-            className: classnames(input, inputClassName),
+            className: classnames(input, inputStyles, inputClassName),
             ...restProps
           }
         ),
@@ -48,5 +46,5 @@ const Input = ({
   ) });
 };
 export {
-  Input
+  TextInput
 };

package/dist/components/form/Textarea/Textarea.css.d.ts

@@ -0,0 +1,2 @@
+export declare const textarea: string;
+//# sourceMappingURL=Textarea.css.d.ts.map

package/dist/components/form/Textarea/Textarea.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Textarea/Textarea.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,QAWnB,CAAC"}

package/dist/components/form/Textarea/Textarea.css.js

@@ -0,0 +1,20 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { layers } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/form/Textarea/Textarea.css.ts", "@blockle/blocks-react");
+const textarea = style({
+  "@layer": {
+    [layers.molecule]: {
+      width: "100%",
+      minHeight: "inherit",
+      resize: "none",
+      display: "block",
+      // @ts-expect-error Property is not yet supported in all browsers
+      fieldSizing: "content"
+    }
+  }
+});
+endFileScope();
+export {
+  textarea
+};

package/dist/components/form/Textarea/Textarea.d.ts

@@ -0,0 +1,7 @@
+import { HTMLElementProps } from '@blockle/blocks-core';
+export type TextareaProps = {
+    value: string;
+    ref: React.RefObject<HTMLTextAreaElement>;
+} & HTMLElementProps<HTMLTextAreaElement>;
+export declare const Textarea: React.FC<TextareaProps>;
+//# sourceMappingURL=Textarea.d.ts.map

package/dist/components/form/Textarea/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Textarea/Textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAMzE,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;CAE3C,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;AAE1C,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAsB5C,CAAC"}

package/dist/components/form/Textarea/Textarea.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { Box } from "../../layout/Box/Box.js";
+import { textarea } from "./Textarea.css.js";
+const Textarea = ({
+  ref,
+  value,
+  ...restProps
+}) => {
+  const containerClassName = useComponentStyles(
+    "textarea",
+    { container: true },
+    false
+  );
+  const inputClassName = useComponentStyles("textarea", { input: true });
+  return /* @__PURE__ */ jsx(Box, { className: containerClassName, children: /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref,
+      value,
+      className: classnames(textarea, inputClassName),
+      ...restProps
+    }
+  ) });
+};
+export {
+  Textarea
+};

package/dist/components/layout/Box/Box.d.ts

@@ -8,3 +8,4 @@ export type BoxProps = {
     style?: React.CSSProperties;
 } & Atoms & HTMLElementProps<HTMLDivElement>;
 export declare const Box: React.FC<BoxProps>;
+//# sourceMappingURL=Box.d.ts.map

package/dist/components/layout/Box/Box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,KAAK,EAIV,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,QAAQ,GAAG;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,KAAK,GACP,gBAAgB,CAAC,cAAc,CAAC,CAAC;AAInC,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAmBlC,CAAC"}

package/dist/components/layout/Grid/Grid.d.ts

@@ -0,0 +1,9 @@
+import { Atoms } from '@blockle/blocks-core';
+export type GridProps = {
+    gap?: Atoms['gap'];
+    rowGap?: Atoms['rowGap'];
+    columnGap?: Atoms['columnGap'];
+    children?: React.ReactNode;
+};
+export declare const Grid: React.FC<GridProps>;
+//# sourceMappingURL=Grid.d.ts.map

package/dist/components/layout/Grid/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAIlD,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACzB,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAiBpC,CAAC"}

package/dist/components/layout/Grid/GridItem.d.ts

@@ -0,0 +1,6 @@
+export type GridItemProps = {
+    children?: React.ReactNode;
+    size: number;
+};
+export declare const GridItem: React.FC<GridItemProps>;
+//# sourceMappingURL=GridItem.d.ts.map

package/dist/components/layout/Grid/GridItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridItem.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Grid/GridItem.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAE5C,CAAC"}

package/dist/components/layout/Inline/Inline.d.ts

@@ -6,7 +6,8 @@ export type InlineProps = {
     children: React.ReactNode;
     className?: string;
     display?: Atoms['display'];
-    spacing: Atoms['gap'];
+    gap: Atoms['gap'];
     style?: React.CSSProperties;
 } & MarginAtoms & PaddingAtoms;
 export declare const Inline: React.FC<InlineProps>;
+//# sourceMappingURL=Inline.d.ts.map

package/dist/components/layout/Inline/Inline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Inline/Inline.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,KAAK,EAEV,KAAK,iBAAiB,EAEtB,KAAK,WAAW,EAChB,KAAK,YAAY,EAClB,MAAM,sBAAsB,CAAC;AAI9B,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,MAAM,iBAAiB,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,aAAa,CAAC;IAC7B,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3B,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,WAAW,GACb,YAAY,CAAC;AAEf,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuBxC,CAAC"}

package/dist/components/layout/Inline/Inline.js

@@ -7,7 +7,7 @@ const Inline = ({
   tag: Tag = "div",
   children,
   display = "flex",
-  spacing,
+  gap,
   ...props
 }) => {
   return /* @__PURE__ */ jsx(
@@ -15,7 +15,7 @@ const Inline = ({
     {
       asChild: true,
       display,
-      gap: spacing,
+      gap,
       flexDirection: "row",
       justifyContent: alignX ? justifyContentMap[alignX] : void 0,
       alignItems: alignY ? alignItemsMap[alignY] : void 0,

package/dist/components/layout/Stack/Stack.d.ts

@@ -5,7 +5,7 @@ export type StackProps = {
     children: React.ReactNode;
     className?: string;
     display?: Atoms['display'];
-    spacing: Atoms['gap'];
+    gap: Atoms['gap'];
     style?: React.CSSProperties;
     role?: React.AriaRole;
     /**
@@ -14,3 +14,4 @@ export type StackProps = {
     start?: number;
 } & MarginAtoms & PaddingAtoms;
 export declare const Stack: React.FC<StackProps>;
+//# sourceMappingURL=Stack.d.ts.map

package/dist/components/layout/Stack/Stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,KAAK,EAEV,KAAK,WAAW,EAChB,KAAK,YAAY,EAClB,MAAM,sBAAsB,CAAC;AAI9B,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,CAAC,EAAE,MAAM,aAAa,CAAC;IAC7B,GAAG,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3B,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,WAAW,GACb,YAAY,CAAC;AAEf,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwBtC,CAAC"}