@jackcrane/ui 0.1.0 → 0.1.2

package/dist/components/Input/Input.d.ts

@@ -1,7 +1,8 @@
-export default function Input({ variant, chamfer, size, disabled, ...props }: {
+export default function Input({ variant, chamfer, size, disabled, label, ...props }: {
     [x: string]: any;
     variant: any;
     chamfer?: boolean;
     size: any;
     disabled: any;
+    label: any;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/jcui.cjs.js

@@ -422,7 +422,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   inherits: true;
   initial-value: transparent;
 }
-._input_1em8m_7 {
+._input_rojre_7 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -430,74 +430,82 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   background-color: var(--input-bg, transparent);
   color: var(--input-color, inherit);
   border-color: var(--border-color);
+  width: calc(100% + var(--border-thickness));
 }
-._input_1em8m_7:hover {
+._input_rojre_7:hover {
   --input-bg: var(--secondary-color-100);
 }
-._input_1em8m_7:focus {
+._input_rojre_7:focus {
   outline: none;
 }
-._large_1em8m_23 {
+._large_rojre_24 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1em8m_28 {
+._small_rojre_29 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
-._disabled_1em8m_33 {
+._disabled_rojre_34 {
   opacity: 0.5;
   cursor: not-allowed;
 }
 /* Variants */
-._primary_1em8m_40 {
+._primary_rojre_41 {
   --input-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --border-accent-color: var(--primary-color-600);
 }
-._primary_1em8m_40:hover {
+._primary_rojre_41:hover {
   --input-bg: var(--primary-color-200);
 }
-._success_1em8m_49 {
+._success_rojre_50 {
   --input-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --border-accent-color: var(--success-color-600);
 }
-._success_1em8m_49:hover {
+._success_rojre_50:hover {
   --input-bg: var(--success-color-200);
 }
-._warning_1em8m_57 {
+._warning_rojre_58 {
   --input-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --border-accent-color: var(--warning-color-600);
 }
-._warning_1em8m_57:hover {
+._warning_rojre_58:hover {
   --input-bg: var(--warning-color-200);
 }
-._danger_1em8m_65 {
+._danger_rojre_66 {
   --input-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --border-accent-color: var(--danger-color-600);
 }
-._danger_1em8m_65:hover {
+._danger_rojre_66:hover {
   --input-bg: var(--danger-color-200);
 }
-._info_1em8m_73 {
+._info_rojre_74 {
   --input-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --border-accent-color: var(--info-color-600);
 }
-._info_1em8m_73:hover {
+._info_rojre_74:hover {
   --input-bg: var(--info-color-200);
 }
-._secondary_1em8m_82 {
+._secondary_rojre_83 {
   --input-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
 }
-._secondary_1em8m_82:hover {
+._secondary_rojre_83:hover {
   --input-bg: var(--secondary-color-200);
 }
+._field_rojre_92 {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+._label_rojre_98 {
+}
 @property --radio-hover-bg {
   syntax: "<color>";
   inherits: true;
@@ -2813,7 +2821,7 @@ const indicator$1 = "_indicator_178xv_76";
 const large$4 = "_large_178xv_94";
 const small$4 = "_small_178xv_99";
 const disabledBox = "_disabledBox_178xv_104";
-const label$1 = "_label_178xv_109";
+const label$2 = "_label_178xv_109";
 const primary$5 = "_primary_178xv_117";
 const secondary$5 = "_secondary_178xv_126";
 const success$5 = "_success_178xv_135";
@@ -2828,7 +2836,7 @@ const styles$7 = {
   large: large$4,
   small: small$4,
   disabledBox,
-  label: label$1,
+  label: label$2,
   primary: primary$5,
   secondary: secondary$5,
   success: success$5,
@@ -11318,7 +11326,7 @@ function isBigIntType(type) {
 const reindex = /* @__PURE__ */ Symbol("reindex");
 function valueof(data, value, type) {
   const valueType = typeof value;
-  return valueType === "string" ? isArrowTable(data) ? maybeTypedArrowify(data.getChild(value), type) : maybeTypedMap(data, field(value), type) : valueType === "function" ? maybeTypedMap(data, value, type) : valueType === "number" || value instanceof Date || valueType === "boolean" ? map(data, constant(value), type) : typeof value?.transform === "function" ? maybeTypedArrayify(value.transform(data), type) : maybeTake(maybeTypedArrayify(value, type), data?.[reindex]);
+  return valueType === "string" ? isArrowTable(data) ? maybeTypedArrowify(data.getChild(value), type) : maybeTypedMap(data, field$1(value), type) : valueType === "function" ? maybeTypedMap(data, value, type) : valueType === "number" || value instanceof Date || valueType === "boolean" ? map(data, constant(value), type) : typeof value?.transform === "function" ? maybeTypedArrayify(value.transform(data), type) : maybeTake(maybeTypedArrayify(value, type), data?.[reindex]);
 }
 function maybeTake(values2, index2) {
   return values2 != null && index2 ? take(values2, index2) : values2;
@@ -11336,7 +11344,7 @@ function vectorToArray(vector) {
   return vector.nullCount ? vector.toJSON() : vector.toArray();
 }
 const singleton = [null];
-const field = (name) => (d2) => {
+const field$1 = (name) => (d2) => {
   const v2 = d2[name];
   return v2 === void 0 && d2.type === "Feature" ? d2.properties?.[name] : v2;
 };
@@ -16305,7 +16313,7 @@ function maybeOrder(order, offset2, ky2) {
       case "inside-out":
         return orderInsideOut(compare);
     }
-    return orderAccessor(field(order));
+    return orderAccessor(field$1(order));
   }
   if (typeof order === "function") return (order.length === 1 ? orderAccessor : orderComparator)(order);
   if (isArray(order)) return orderGiven(order);
@@ -19124,16 +19132,18 @@ const RadarChart = ({
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ObservablePlot, { options, className, style });
 };
-const input = "_input_1em8m_7";
-const large$3 = "_large_1em8m_23";
-const small$3 = "_small_1em8m_28";
-const disabled$3 = "_disabled_1em8m_33";
-const primary$4 = "_primary_1em8m_40";
-const success$4 = "_success_1em8m_49";
-const warning$4 = "_warning_1em8m_57";
-const danger$4 = "_danger_1em8m_65";
-const info$4 = "_info_1em8m_73";
-const secondary$4 = "_secondary_1em8m_82";
+const input = "_input_rojre_7";
+const large$3 = "_large_rojre_24";
+const small$3 = "_small_rojre_29";
+const disabled$3 = "_disabled_rojre_34";
+const primary$4 = "_primary_rojre_41";
+const success$4 = "_success_rojre_50";
+const warning$4 = "_warning_rojre_58";
+const danger$4 = "_danger_rojre_66";
+const info$4 = "_info_rojre_74";
+const secondary$4 = "_secondary_rojre_83";
+const field = "_field_rojre_92";
+const label$1 = "_label_rojre_98";
 const styles$5 = {
   input,
   large: large$3,
@@ -19144,41 +19154,52 @@ const styles$5 = {
   warning: warning$4,
   danger: danger$4,
   info: info$4,
-  secondary: secondary$4
+  secondary: secondary$4,
+  field,
+  label: label$1
 };
 function Input({
   variant,
   chamfer: chamfer2 = true,
   size: size2,
   disabled: disabled2,
+  label: label2,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      className: classNames(chamfer2 && chamferStyles.chamfer, styles$5[variant]),
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "input",
-        {
-          className: classNames(
-            styles$5.input,
-            styles$5[variant],
-            size2 === "large" && styles$5.large,
-            size2 === "small" && styles$5.small,
-            disabled2 && chamferStyles.disabled,
-            disabled2 && styles$5.disabled,
-            disabled2 && hatchStyles.hatch
-          ),
-          disabled: disabled2,
-          style: {
-            margin: -1,
-            ...props.style
-          },
-          ...props
-        }
-      )
-    }
-  );
+  const inputId = React.useId();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$5.field, children: [
+    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: styles$5.label, htmlFor: inputId, children: label2 }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: classNames(
+          chamfer2 && chamferStyles.chamfer,
+          styles$5[variant]
+        ),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            id: inputId,
+            className: classNames(
+              styles$5.input,
+              styles$5[variant],
+              size2 === "large" && styles$5.large,
+              size2 === "small" && styles$5.small,
+              disabled2 && chamferStyles.disabled,
+              disabled2 && styles$5.disabled,
+              disabled2 && hatchStyles.hatch
+            ),
+            disabled: disabled2,
+            style: {
+              margin: -1,
+              ...props.style
+            },
+            ...props
+          }
+        )
+      }
+    )
+  ] });
 }
 function createCollection(name) {
   const PROVIDER_NAME = name + "CollectionProvider";

package/dist/jcui.es.js

@@ -422,7 +422,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   inherits: true;
   initial-value: transparent;
 }
-._input_1em8m_7 {
+._input_rojre_7 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -430,74 +430,82 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   background-color: var(--input-bg, transparent);
   color: var(--input-color, inherit);
   border-color: var(--border-color);
+  width: calc(100% + var(--border-thickness));
 }
-._input_1em8m_7:hover {
+._input_rojre_7:hover {
   --input-bg: var(--secondary-color-100);
 }
-._input_1em8m_7:focus {
+._input_rojre_7:focus {
   outline: none;
 }
-._large_1em8m_23 {
+._large_rojre_24 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1em8m_28 {
+._small_rojre_29 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
-._disabled_1em8m_33 {
+._disabled_rojre_34 {
   opacity: 0.5;
   cursor: not-allowed;
 }
 /* Variants */
-._primary_1em8m_40 {
+._primary_rojre_41 {
   --input-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --border-accent-color: var(--primary-color-600);
 }
-._primary_1em8m_40:hover {
+._primary_rojre_41:hover {
   --input-bg: var(--primary-color-200);
 }
-._success_1em8m_49 {
+._success_rojre_50 {
   --input-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --border-accent-color: var(--success-color-600);
 }
-._success_1em8m_49:hover {
+._success_rojre_50:hover {
   --input-bg: var(--success-color-200);
 }
-._warning_1em8m_57 {
+._warning_rojre_58 {
   --input-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --border-accent-color: var(--warning-color-600);
 }
-._warning_1em8m_57:hover {
+._warning_rojre_58:hover {
   --input-bg: var(--warning-color-200);
 }
-._danger_1em8m_65 {
+._danger_rojre_66 {
   --input-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --border-accent-color: var(--danger-color-600);
 }
-._danger_1em8m_65:hover {
+._danger_rojre_66:hover {
   --input-bg: var(--danger-color-200);
 }
-._info_1em8m_73 {
+._info_rojre_74 {
   --input-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --border-accent-color: var(--info-color-600);
 }
-._info_1em8m_73:hover {
+._info_rojre_74:hover {
   --input-bg: var(--info-color-200);
 }
-._secondary_1em8m_82 {
+._secondary_rojre_83 {
   --input-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
 }
-._secondary_1em8m_82:hover {
+._secondary_rojre_83:hover {
   --input-bg: var(--secondary-color-200);
 }
+._field_rojre_92 {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+._label_rojre_98 {
+}
 @property --radio-hover-bg {
   syntax: "<color>";
   inherits: true;
@@ -1516,7 +1524,7 @@ hr {
   width: 100%;
 }`)),document.head.appendChild(r)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
 import * as React from "react";
-import React__default, { useContext, createContext as createContext$1, useLayoutEffect, useState, useRef, useCallback, useEffect, useMemo, forwardRef, createElement } from "react";
+import React__default, { useContext, createContext as createContext$1, useId as useId$1, useLayoutEffect, useState, useRef, useCallback, useEffect, useMemo, forwardRef, createElement } from "react";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
 function getDefaultExportFromCjs(x2) {
@@ -2795,7 +2803,7 @@ const indicator$1 = "_indicator_178xv_76";
 const large$4 = "_large_178xv_94";
 const small$4 = "_small_178xv_99";
 const disabledBox = "_disabledBox_178xv_104";
-const label$1 = "_label_178xv_109";
+const label$2 = "_label_178xv_109";
 const primary$5 = "_primary_178xv_117";
 const secondary$5 = "_secondary_178xv_126";
 const success$5 = "_success_178xv_135";
@@ -2810,7 +2818,7 @@ const styles$7 = {
   large: large$4,
   small: small$4,
   disabledBox,
-  label: label$1,
+  label: label$2,
   primary: primary$5,
   secondary: secondary$5,
   success: success$5,
@@ -11300,7 +11308,7 @@ function isBigIntType(type) {
 const reindex = /* @__PURE__ */ Symbol("reindex");
 function valueof(data, value, type) {
   const valueType = typeof value;
-  return valueType === "string" ? isArrowTable(data) ? maybeTypedArrowify(data.getChild(value), type) : maybeTypedMap(data, field(value), type) : valueType === "function" ? maybeTypedMap(data, value, type) : valueType === "number" || value instanceof Date || valueType === "boolean" ? map(data, constant(value), type) : typeof value?.transform === "function" ? maybeTypedArrayify(value.transform(data), type) : maybeTake(maybeTypedArrayify(value, type), data?.[reindex]);
+  return valueType === "string" ? isArrowTable(data) ? maybeTypedArrowify(data.getChild(value), type) : maybeTypedMap(data, field$1(value), type) : valueType === "function" ? maybeTypedMap(data, value, type) : valueType === "number" || value instanceof Date || valueType === "boolean" ? map(data, constant(value), type) : typeof value?.transform === "function" ? maybeTypedArrayify(value.transform(data), type) : maybeTake(maybeTypedArrayify(value, type), data?.[reindex]);
 }
 function maybeTake(values2, index2) {
   return values2 != null && index2 ? take(values2, index2) : values2;
@@ -11318,7 +11326,7 @@ function vectorToArray(vector) {
   return vector.nullCount ? vector.toJSON() : vector.toArray();
 }
 const singleton = [null];
-const field = (name) => (d2) => {
+const field$1 = (name) => (d2) => {
   const v2 = d2[name];
   return v2 === void 0 && d2.type === "Feature" ? d2.properties?.[name] : v2;
 };
@@ -16287,7 +16295,7 @@ function maybeOrder(order, offset2, ky2) {
       case "inside-out":
         return orderInsideOut(compare);
     }
-    return orderAccessor(field(order));
+    return orderAccessor(field$1(order));
   }
   if (typeof order === "function") return (order.length === 1 ? orderAccessor : orderComparator)(order);
   if (isArray(order)) return orderGiven(order);
@@ -19106,16 +19114,18 @@ const RadarChart = ({
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ObservablePlot, { options, className, style });
 };
-const input = "_input_1em8m_7";
-const large$3 = "_large_1em8m_23";
-const small$3 = "_small_1em8m_28";
-const disabled$3 = "_disabled_1em8m_33";
-const primary$4 = "_primary_1em8m_40";
-const success$4 = "_success_1em8m_49";
-const warning$4 = "_warning_1em8m_57";
-const danger$4 = "_danger_1em8m_65";
-const info$4 = "_info_1em8m_73";
-const secondary$4 = "_secondary_1em8m_82";
+const input = "_input_rojre_7";
+const large$3 = "_large_rojre_24";
+const small$3 = "_small_rojre_29";
+const disabled$3 = "_disabled_rojre_34";
+const primary$4 = "_primary_rojre_41";
+const success$4 = "_success_rojre_50";
+const warning$4 = "_warning_rojre_58";
+const danger$4 = "_danger_rojre_66";
+const info$4 = "_info_rojre_74";
+const secondary$4 = "_secondary_rojre_83";
+const field = "_field_rojre_92";
+const label$1 = "_label_rojre_98";
 const styles$5 = {
   input,
   large: large$3,
@@ -19126,41 +19136,52 @@ const styles$5 = {
   warning: warning$4,
   danger: danger$4,
   info: info$4,
-  secondary: secondary$4
+  secondary: secondary$4,
+  field,
+  label: label$1
 };
 function Input({
   variant,
   chamfer: chamfer2 = true,
   size: size2,
   disabled: disabled2,
+  label: label2,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      className: classNames(chamfer2 && chamferStyles.chamfer, styles$5[variant]),
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "input",
-        {
-          className: classNames(
-            styles$5.input,
-            styles$5[variant],
-            size2 === "large" && styles$5.large,
-            size2 === "small" && styles$5.small,
-            disabled2 && chamferStyles.disabled,
-            disabled2 && styles$5.disabled,
-            disabled2 && hatchStyles.hatch
-          ),
-          disabled: disabled2,
-          style: {
-            margin: -1,
-            ...props.style
-          },
-          ...props
-        }
-      )
-    }
-  );
+  const inputId = useId$1();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$5.field, children: [
+    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: styles$5.label, htmlFor: inputId, children: label2 }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: classNames(
+          chamfer2 && chamferStyles.chamfer,
+          styles$5[variant]
+        ),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            id: inputId,
+            className: classNames(
+              styles$5.input,
+              styles$5[variant],
+              size2 === "large" && styles$5.large,
+              size2 === "small" && styles$5.small,
+              disabled2 && chamferStyles.disabled,
+              disabled2 && styles$5.disabled,
+              disabled2 && hatchStyles.hatch
+            ),
+            disabled: disabled2,
+            style: {
+              margin: -1,
+              ...props.style
+            },
+            ...props
+          }
+        )
+      }
+    )
+  ] });
 }
 function createCollection(name) {
   const PROVIDER_NAME = name + "CollectionProvider";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackcrane/ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "sideEffects": false,
   "main": "dist/jcui.cjs.js",