@jackcrane/ui 0.1.3 → 0.1.5

package/dist/components/Hatch/hatch.d.ts

@@ -0,0 +1,5 @@
+export default function Hatch({ children, className, ...props }: {
+    [x: string]: any;
+    children: any;
+    className: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { Loader } from "./components/Loader/loader";
 export { Radio, RadioGroup } from "./components/Radio/radio";
 export { default as Select } from "./components/Select/select";
 export { default as Dropdown } from "./components/Dropdown/dropdown";
+export { default as Hatch } from "./components/Hatch/hatch";
 export { toast } from "./components/Toast/toast";
 export { useModal } from "./components/modal/useModal";
 export { JCUIProvider } from "./components/jcui/provider";

package/dist/jcui.cjs.js

@@ -200,7 +200,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: rotate(360deg);
   }
 }
-._card_1qkhh_1 {
+._card_1u4j4_1 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -209,63 +209,64 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   display: flex;
   flex-direction: column;
 }
-._card_1qkhh_1 ._title_1qkhh_11 {
+._card_1u4j4_1 ._title_1u4j4_11 {
   font-size: 1.25rem;
   padding: 0.5rem 1rem;
   border-bottom: var(--border-thickness) solid var(--border-color);
   background-color: var(--card-bg);
 }
-._card_1qkhh_1 ._body_1qkhh_18 {
+._card_1u4j4_1 ._body_1u4j4_18 {
   padding: 0.5rem 1rem;
   width: 100%;
 }
-._card_1qkhh_1 ._footer_1qkhh_23 {
+._card_1u4j4_1 ._footer_1u4j4_23 {
   border-top: var(--border-thickness) solid var(--border-color);
   flex: 1;
   background-color: var(--card-bg);
+  padding: 0.5rem 1rem;
 }
-._large_1qkhh_29 ._body_1qkhh_18,
-._large_1qkhh_29 ._title_1qkhh_11 {
+._large_1u4j4_30 ._body_1u4j4_18,
+._large_1u4j4_30 ._title_1u4j4_11 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1qkhh_35 ._body_1qkhh_18,
-._small_1qkhh_35 ._title_1qkhh_11 {
+._small_1u4j4_36 ._body_1u4j4_18,
+._small_1u4j4_36 ._title_1u4j4_11 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
 /* Variants */
-._primary_1qkhh_43 {
+._primary_1u4j4_44 {
   --card-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --border-accent-color: var(--primary-color-600);
   --card-color: var(--primary-color-800);
 }
-._success_1qkhh_50 {
+._success_1u4j4_51 {
   --card-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --border-accent-color: var(--success-color-600);
   --card-color: var(--success-color-800);
 }
-._warning_1qkhh_57 {
+._warning_1u4j4_58 {
   --card-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --border-accent-color: var(--warning-color-600);
   --card-color: var(--warning-color-800);
 }
-._danger_1qkhh_64 {
+._danger_1u4j4_65 {
   --card-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --border-accent-color: var(--danger-color-600);
   --card-color: var(--danger-color-800);
 }
-._info_1qkhh_71 {
+._info_1u4j4_72 {
   --card-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --border-accent-color: var(--info-color-600);
   --card-color: var(--info-color-800);
 }
-._secondary_1qkhh_78 {
+._secondary_1u4j4_79 {
   --card-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
@@ -979,6 +980,9 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateX(0);
   }
 }
+._hatch_zh2j3_1 {
+  padding: 0.5rem 1rem;
+}
 ._toastRoot_1iau9_1 {
   background-color: var(--button-bg) !important;
   border: var(--border-thickness) solid var(--border-color);
@@ -1870,7 +1874,7 @@ const warning$7 = "_warning_d2nsp_67";
 const danger$7 = "_danger_d2nsp_80";
 const info$7 = "_info_d2nsp_93";
 const secondary$7 = "_secondary_d2nsp_106";
-const styles$a = {
+const styles$b = {
   button,
   large: large$6,
   small: small$6,
@@ -1890,9 +1894,9 @@ const chamferStyles = {
   disabled: disabled$5,
   chamferOnHover
 };
-const hatch = "_hatch_owfoz_1";
+const hatch$1 = "_hatch_owfoz_1";
 const hatchStyles = {
-  hatch
+  hatch: hatch$1
 };
 const DEFAULT_THEME = "light";
 const ThemeContext = React.createContext({
@@ -1902,10 +1906,10 @@ const ThemeContext = React.createContext({
 });
 const useJCUITheme = () => React.useContext(ThemeContext);
 const loader = "_loader_1y0fe_1";
-const styles$9 = {
+const styles$a = {
   loader
 };
-const Loader = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$9.loader, ...props });
+const Loader = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$a.loader, ...props });
 function Button({
   children: children2,
   variant,
@@ -1919,14 +1923,14 @@ function Button({
     "button",
     {
       className: clsx(
-        styles$a.button,
-        styles$a[variant],
+        styles$b.button,
+        styles$b[variant],
         chamfer2 && chamferStyles.chamfer,
-        size2 === "large" && styles$a.large,
-        size2 === "small" && styles$a.small,
+        size2 === "large" && styles$b.large,
+        size2 === "small" && styles$b.small,
         disabled2 && chamferStyles.disabled,
         disabled2 && hatchStyles.hatch,
-        disabled2 && styles$a.disabled
+        disabled2 && styles$b.disabled
       ),
       disabled: disabled2,
       ...props,
@@ -2034,19 +2038,19 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const card = "_card_1qkhh_1";
-const title$1 = "_title_1qkhh_11";
-const body$1 = "_body_1qkhh_18";
-const footer$1 = "_footer_1qkhh_23";
-const large$5 = "_large_1qkhh_29";
-const small$5 = "_small_1qkhh_35";
-const primary$6 = "_primary_1qkhh_43";
-const success$6 = "_success_1qkhh_50";
-const warning$6 = "_warning_1qkhh_57";
-const danger$6 = "_danger_1qkhh_64";
-const info$6 = "_info_1qkhh_71";
-const secondary$6 = "_secondary_1qkhh_78";
-const styles$8 = {
+const card = "_card_1u4j4_1";
+const title$1 = "_title_1u4j4_11";
+const body$1 = "_body_1u4j4_18";
+const footer$1 = "_footer_1u4j4_23";
+const large$5 = "_large_1u4j4_30";
+const small$5 = "_small_1u4j4_36";
+const primary$6 = "_primary_1u4j4_44";
+const success$6 = "_success_1u4j4_51";
+const warning$6 = "_warning_1u4j4_58";
+const danger$6 = "_danger_1u4j4_65";
+const info$6 = "_info_1u4j4_72";
+const secondary$6 = "_secondary_1u4j4_79";
+const styles$9 = {
   card,
   title: title$1,
   body: body$1,
@@ -2075,20 +2079,20 @@ function Card({
     "div",
     {
       className: classNames(
-        styles$8.card,
-        styles$8[variant],
+        styles$9.card,
+        styles$9[variant],
         chamfer2 && chamferStyles.chamfer,
-        size2 === "large" && styles$8.large,
-        size2 === "small" && styles$8.small
+        size2 === "large" && styles$9.large,
+        size2 === "small" && styles$9.small
       ),
       ...props,
       children: [
-        title2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$8.title, hatchStyles.hatch), children: title2 }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$8.body, children: children2 }),
+        title2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$9.title, hatchStyles.hatch), children: title2 }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$9.body, children: children2 }),
         footerHeight > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: classNames(hatchStyles.hatch, styles$8.footer),
+            className: classNames(hatchStyles.hatch, styles$9.footer),
             style: { flexBasis: footerHeight },
             children: footer2
           }
@@ -2832,7 +2836,7 @@ const success$5 = "_success_178xv_135";
 const warning$5 = "_warning_178xv_144";
 const danger$5 = "_danger_178xv_153";
 const info$5 = "_info_178xv_162";
-const styles$7 = {
+const styles$8 = {
   wrapper: wrapper$1,
   disabled: disabled$4,
   root: root$2,
@@ -2869,32 +2873,32 @@ function Checkbox({
   ...props
 }) {
   const labelContent = label2 ?? children2;
-  const variantClass = variant && styles$7[variant];
-  const sizeClass = size2 === "large" ? styles$7.large : size2 === "small" ? styles$7.small : null;
+  const variantClass = variant && styles$8[variant];
+  const sizeClass = size2 === "large" ? styles$8.large : size2 === "small" ? styles$8.small : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "label",
     {
-      className: clsx(styles$7.wrapper, variantClass, disabled2 && styles$7.disabled),
+      className: clsx(styles$8.wrapper, variantClass, disabled2 && styles$8.disabled),
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Checkbox$1,
           {
             className: clsx(
-              styles$7.root,
+              styles$8.root,
               variantClass,
               sizeClass,
               chamfer2 && chamferStyles.chamfer,
               disabled2 && chamferStyles.disabled,
               disabled2 && hatchStyles.hatch,
-              disabled2 && styles$7.disabledBox,
+              disabled2 && styles$8.disabledBox,
               className
             ),
             disabled: disabled2,
             ...props,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckboxIndicator, { className: styles$7.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, {}) })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckboxIndicator, { className: styles$8.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, {}) })
           }
         ),
-        labelContent && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$7.label, children: labelContent })
+        labelContent && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$8.label, children: labelContent })
       ]
     }
   );
@@ -13744,7 +13748,7 @@ let nextClipId = 0;
 function getClipId() {
   return `plot-clip-${++nextClipId}`;
 }
-function styles$6(mark, {
+function styles$7(mark, {
   title: title2,
   href,
   ariaLabel: variaLabel,
@@ -14110,7 +14114,7 @@ class Mark {
     this.facetAnchor = maybeFacetAnchor(facetAnchor);
     channels = maybeNamed(channels);
     if (extraChannels !== void 0) channels = { ...maybeChannels(extraChannels), ...channels };
-    if (defaults2 !== void 0) channels = { ...styles$6(this, options, defaults2), ...channels };
+    if (defaults2 !== void 0) channels = { ...styles$7(this, options, defaults2), ...channels };
     this.channels = Object.fromEntries(
       Object.entries(channels).map(([name, channel]) => {
         if (isOptions(channel.value)) {
@@ -19148,7 +19152,7 @@ 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 = {
+const styles$6 = {
   input,
   large: large$3,
   small: small$3,
@@ -19171,26 +19175,26 @@ function Input({
   ...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 }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$6.field, children: [
+    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: styles$6.label, htmlFor: inputId, children: label2 }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         className: classNames(
           chamfer2 && chamferStyles.chamfer,
-          styles$5[variant]
+          styles$6[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,
+              styles$6.input,
+              styles$6[variant],
+              size2 === "large" && styles$6.large,
+              size2 === "small" && styles$6.small,
               disabled2 && chamferStyles.disabled,
-              disabled2 && styles$5.disabled,
+              disabled2 && styles$6.disabled,
               disabled2 && hatchStyles.hatch
             ),
             disabled: disabled2,
@@ -19781,7 +19785,7 @@ const success$3 = "_success_hpxu6_130";
 const warning$3 = "_warning_hpxu6_139";
 const danger$3 = "_danger_hpxu6_148";
 const info$3 = "_info_hpxu6_157";
-const styles$4 = {
+const styles$5 = {
   group,
   wrapper,
   disabled: disabled$2,
@@ -19803,7 +19807,7 @@ const styles$4 = {
 const RadioGroup$1 = ({ className, children: children2, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
   Root2$3,
   {
-    className: clsx(styles$4.group, className),
+    className: clsx(styles$5.group, className),
     ...props,
     children: children2
   }
@@ -19818,33 +19822,33 @@ function Radio({
   className,
   ...props
 }) {
-  const variantClass = variant && styles$4[variant];
-  const sizeClass = size2 === "large" ? styles$4.large : size2 === "small" ? styles$4.small : null;
+  const variantClass = variant && styles$5[variant];
+  const sizeClass = size2 === "large" ? styles$5.large : size2 === "small" ? styles$5.small : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "label",
     {
-      className: clsx(styles$4.wrapper, variantClass, disabled2 && styles$4.disabled),
+      className: clsx(styles$5.wrapper, variantClass, disabled2 && styles$5.disabled),
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Item2$2,
           {
             className: clsx(
-              styles$4.root,
+              styles$5.root,
               variantClass,
               sizeClass,
               chamfer2 && chamferStyles.chamfer,
               disabled2 && chamferStyles.disabled,
               disabled2 && hatchStyles.hatch,
-              disabled2 && styles$4.disabledDot,
+              disabled2 && styles$5.disabledDot,
               className
             ),
             value,
             disabled: disabled2,
             ...props,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Indicator, { className: styles$4.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$4.dot }) })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Indicator, { className: styles$5.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$5.dot }) })
           }
         ),
-        label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$4.label, children: label2 })
+        label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$5.label, children: label2 })
       ]
     }
   );
@@ -24404,7 +24408,7 @@ const warning$2 = "_warning_1u214_99";
 const danger$2 = "_danger_1u214_109";
 const info$2 = "_info_1u214_119";
 const secondary$2 = "_secondary_1u214_129";
-const styles$3 = {
+const styles$4 = {
   trigger: trigger$1,
   large: large$1,
   small: small$1,
@@ -24440,18 +24444,18 @@ function SelectInput({
           Trigger$2,
           {
             className: clsx(
-              styles$3.trigger,
-              styles$3[variant],
+              styles$4.trigger,
+              styles$4[variant],
               chamfer2 && chamferStyles.chamfer,
-              size2 === "large" && styles$3.large,
-              size2 === "small" && styles$3.small,
-              disabled2 && styles$3.disabled,
+              size2 === "large" && styles$4.large,
+              size2 === "small" && styles$4.small,
+              disabled2 && styles$4.disabled,
               disabled2 && hatchStyles.hatch
               // loading && styles.disabled
             ),
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Value, {}),
-              loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: styles$3.icon, children: "▾" })
+              loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: styles$4.icon, children: "▾" })
             ]
           }
         ),
@@ -24459,7 +24463,7 @@ function SelectInput({
           Content2$2,
           {
             className: classNames(
-              styles$3.content,
+              styles$4.content,
               chamfer2 && chamferStyles.chamfer
             ),
             sideOffset: 6,
@@ -24468,7 +24472,7 @@ function SelectInput({
               {
                 value: opt.value,
                 disabled: opt.disabled,
-                className: styles$3.item,
+                className: styles$4.item,
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemText, { children: opt.label })
               },
               opt.value
@@ -25512,7 +25516,7 @@ const warning$1 = "_warning_12pwu_170";
 const danger$1 = "_danger_12pwu_181";
 const info$1 = "_info_12pwu_192";
 const secondary$1 = "_secondary_12pwu_203";
-const styles$2 = {
+const styles$3 = {
   trigger,
   large,
   small,
@@ -25555,18 +25559,18 @@ function Dropdown({
   ...props
 }) {
   const triggerClassName = clsx(
-    styles$2.trigger,
-    variant && styles$2[variant],
+    styles$3.trigger,
+    variant && styles$3[variant],
     chamfer2 && chamferStyles.chamfer,
-    size2 === "large" && styles$2.large,
-    size2 === "small" && styles$2.small,
-    disabled2 && styles$2.disabled,
+    size2 === "large" && styles$3.large,
+    size2 === "small" && styles$3.small,
+    disabled2 && styles$3.disabled,
     disabled2 && hatchStyles.hatch,
     _triggerClassName
   );
   const contentClassName = clsx(
-    styles$2.content,
-    variant && styles$2[variant],
+    styles$3.content,
+    variant && styles$3[variant],
     chamfer2 && chamferStyles.chamfer
   );
   const handleItemSelect = (item2) => {
@@ -25595,13 +25599,13 @@ function Dropdown({
         side,
         sideOffset: 0,
         ...contentProps,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$2.viewport, children: items.map((item2, index2) => {
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.viewport, children: items.map((item2, index2) => {
           if (item2.type === "separator") {
             const separatorKey = item2.key ?? `separator-${index2}`;
             return /* @__PURE__ */ jsxRuntimeExports.jsx(
               Separator2,
               {
-                className: styles$2.separator
+                className: styles$3.separator
               },
               separatorKey
             );
@@ -25612,10 +25616,10 @@ function Dropdown({
             {
               onSelect: () => handleItemSelect(item2),
               disabled: item2.disabled,
-              className: styles$2.item,
+              className: styles$3.item,
               children: [
-                item2.icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$2.itemIcon, "aria-hidden": true, children: item2.icon }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$2.itemLabel, children: item2.label })
+                item2.icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.itemIcon, "aria-hidden": true, children: item2.icon }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.itemLabel, children: item2.label })
               ]
             },
             itemKey
@@ -25625,6 +25629,25 @@ function Dropdown({
     ) })
   ] });
 }
+const hatch = "_hatch_zh2j3_1";
+const styles$2 = {
+  hatch
+};
+function Hatch({ children: children2, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: classNames(
+        styles$2.hatch,
+        hatchStyles.hatch,
+        chamferStyles.chamfer,
+        className
+      ),
+      ...props,
+      children: children2
+    }
+  );
+}
 let e = { data: "" }, t = (t4) => {
   if ("object" == typeof window) {
     let e3 = (t4 ? t4.querySelector("#_goober") : window._goober) || Object.assign(document.createElement("style"), { innerHTML: " ", id: "_goober" });
@@ -26788,6 +26811,7 @@ exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.ColorSwitcher = ColorSwitcher;
 exports.Dropdown = Dropdown;
+exports.Hatch = Hatch;
 exports.Input = Input;
 exports.JCUIProvider = JCUIProvider;
 exports.Layout = Layout;

package/dist/jcui.es.js

@@ -200,7 +200,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: rotate(360deg);
   }
 }
-._card_1qkhh_1 {
+._card_1u4j4_1 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -209,63 +209,64 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   display: flex;
   flex-direction: column;
 }
-._card_1qkhh_1 ._title_1qkhh_11 {
+._card_1u4j4_1 ._title_1u4j4_11 {
   font-size: 1.25rem;
   padding: 0.5rem 1rem;
   border-bottom: var(--border-thickness) solid var(--border-color);
   background-color: var(--card-bg);
 }
-._card_1qkhh_1 ._body_1qkhh_18 {
+._card_1u4j4_1 ._body_1u4j4_18 {
   padding: 0.5rem 1rem;
   width: 100%;
 }
-._card_1qkhh_1 ._footer_1qkhh_23 {
+._card_1u4j4_1 ._footer_1u4j4_23 {
   border-top: var(--border-thickness) solid var(--border-color);
   flex: 1;
   background-color: var(--card-bg);
+  padding: 0.5rem 1rem;
 }
-._large_1qkhh_29 ._body_1qkhh_18,
-._large_1qkhh_29 ._title_1qkhh_11 {
+._large_1u4j4_30 ._body_1u4j4_18,
+._large_1u4j4_30 ._title_1u4j4_11 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1qkhh_35 ._body_1qkhh_18,
-._small_1qkhh_35 ._title_1qkhh_11 {
+._small_1u4j4_36 ._body_1u4j4_18,
+._small_1u4j4_36 ._title_1u4j4_11 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
 /* Variants */
-._primary_1qkhh_43 {
+._primary_1u4j4_44 {
   --card-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --border-accent-color: var(--primary-color-600);
   --card-color: var(--primary-color-800);
 }
-._success_1qkhh_50 {
+._success_1u4j4_51 {
   --card-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --border-accent-color: var(--success-color-600);
   --card-color: var(--success-color-800);
 }
-._warning_1qkhh_57 {
+._warning_1u4j4_58 {
   --card-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --border-accent-color: var(--warning-color-600);
   --card-color: var(--warning-color-800);
 }
-._danger_1qkhh_64 {
+._danger_1u4j4_65 {
   --card-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --border-accent-color: var(--danger-color-600);
   --card-color: var(--danger-color-800);
 }
-._info_1qkhh_71 {
+._info_1u4j4_72 {
   --card-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --border-accent-color: var(--info-color-600);
   --card-color: var(--info-color-800);
 }
-._secondary_1qkhh_78 {
+._secondary_1u4j4_79 {
   --card-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
@@ -979,6 +980,9 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateX(0);
   }
 }
+._hatch_zh2j3_1 {
+  padding: 0.5rem 1rem;
+}
 ._toastRoot_1iau9_1 {
   background-color: var(--button-bg) !important;
   border: var(--border-thickness) solid var(--border-color);
@@ -1852,7 +1856,7 @@ const warning$7 = "_warning_d2nsp_67";
 const danger$7 = "_danger_d2nsp_80";
 const info$7 = "_info_d2nsp_93";
 const secondary$7 = "_secondary_d2nsp_106";
-const styles$a = {
+const styles$b = {
   button,
   large: large$6,
   small: small$6,
@@ -1872,9 +1876,9 @@ const chamferStyles = {
   disabled: disabled$5,
   chamferOnHover
 };
-const hatch = "_hatch_owfoz_1";
+const hatch$1 = "_hatch_owfoz_1";
 const hatchStyles = {
-  hatch
+  hatch: hatch$1
 };
 const DEFAULT_THEME = "light";
 const ThemeContext = createContext$1({
@@ -1884,10 +1888,10 @@ const ThemeContext = createContext$1({
 });
 const useJCUITheme = () => useContext(ThemeContext);
 const loader = "_loader_1y0fe_1";
-const styles$9 = {
+const styles$a = {
   loader
 };
-const Loader = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$9.loader, ...props });
+const Loader = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$a.loader, ...props });
 function Button({
   children: children2,
   variant,
@@ -1901,14 +1905,14 @@ function Button({
     "button",
     {
       className: clsx(
-        styles$a.button,
-        styles$a[variant],
+        styles$b.button,
+        styles$b[variant],
         chamfer2 && chamferStyles.chamfer,
-        size2 === "large" && styles$a.large,
-        size2 === "small" && styles$a.small,
+        size2 === "large" && styles$b.large,
+        size2 === "small" && styles$b.small,
         disabled2 && chamferStyles.disabled,
         disabled2 && hatchStyles.hatch,
-        disabled2 && styles$a.disabled
+        disabled2 && styles$b.disabled
       ),
       disabled: disabled2,
       ...props,
@@ -2016,19 +2020,19 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const card = "_card_1qkhh_1";
-const title$1 = "_title_1qkhh_11";
-const body$1 = "_body_1qkhh_18";
-const footer$1 = "_footer_1qkhh_23";
-const large$5 = "_large_1qkhh_29";
-const small$5 = "_small_1qkhh_35";
-const primary$6 = "_primary_1qkhh_43";
-const success$6 = "_success_1qkhh_50";
-const warning$6 = "_warning_1qkhh_57";
-const danger$6 = "_danger_1qkhh_64";
-const info$6 = "_info_1qkhh_71";
-const secondary$6 = "_secondary_1qkhh_78";
-const styles$8 = {
+const card = "_card_1u4j4_1";
+const title$1 = "_title_1u4j4_11";
+const body$1 = "_body_1u4j4_18";
+const footer$1 = "_footer_1u4j4_23";
+const large$5 = "_large_1u4j4_30";
+const small$5 = "_small_1u4j4_36";
+const primary$6 = "_primary_1u4j4_44";
+const success$6 = "_success_1u4j4_51";
+const warning$6 = "_warning_1u4j4_58";
+const danger$6 = "_danger_1u4j4_65";
+const info$6 = "_info_1u4j4_72";
+const secondary$6 = "_secondary_1u4j4_79";
+const styles$9 = {
   card,
   title: title$1,
   body: body$1,
@@ -2057,20 +2061,20 @@ function Card({
     "div",
     {
       className: classNames(
-        styles$8.card,
-        styles$8[variant],
+        styles$9.card,
+        styles$9[variant],
         chamfer2 && chamferStyles.chamfer,
-        size2 === "large" && styles$8.large,
-        size2 === "small" && styles$8.small
+        size2 === "large" && styles$9.large,
+        size2 === "small" && styles$9.small
       ),
       ...props,
       children: [
-        title2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$8.title, hatchStyles.hatch), children: title2 }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$8.body, children: children2 }),
+        title2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$9.title, hatchStyles.hatch), children: title2 }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$9.body, children: children2 }),
         footerHeight > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: classNames(hatchStyles.hatch, styles$8.footer),
+            className: classNames(hatchStyles.hatch, styles$9.footer),
             style: { flexBasis: footerHeight },
             children: footer2
           }
@@ -2814,7 +2818,7 @@ const success$5 = "_success_178xv_135";
 const warning$5 = "_warning_178xv_144";
 const danger$5 = "_danger_178xv_153";
 const info$5 = "_info_178xv_162";
-const styles$7 = {
+const styles$8 = {
   wrapper: wrapper$1,
   disabled: disabled$4,
   root: root$2,
@@ -2851,32 +2855,32 @@ function Checkbox({
   ...props
 }) {
   const labelContent = label2 ?? children2;
-  const variantClass = variant && styles$7[variant];
-  const sizeClass = size2 === "large" ? styles$7.large : size2 === "small" ? styles$7.small : null;
+  const variantClass = variant && styles$8[variant];
+  const sizeClass = size2 === "large" ? styles$8.large : size2 === "small" ? styles$8.small : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "label",
     {
-      className: clsx(styles$7.wrapper, variantClass, disabled2 && styles$7.disabled),
+      className: clsx(styles$8.wrapper, variantClass, disabled2 && styles$8.disabled),
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Checkbox$1,
           {
             className: clsx(
-              styles$7.root,
+              styles$8.root,
               variantClass,
               sizeClass,
               chamfer2 && chamferStyles.chamfer,
               disabled2 && chamferStyles.disabled,
               disabled2 && hatchStyles.hatch,
-              disabled2 && styles$7.disabledBox,
+              disabled2 && styles$8.disabledBox,
               className
             ),
             disabled: disabled2,
             ...props,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckboxIndicator, { className: styles$7.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, {}) })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckboxIndicator, { className: styles$8.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, {}) })
           }
         ),
-        labelContent && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$7.label, children: labelContent })
+        labelContent && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$8.label, children: labelContent })
       ]
     }
   );
@@ -13726,7 +13730,7 @@ let nextClipId = 0;
 function getClipId() {
   return `plot-clip-${++nextClipId}`;
 }
-function styles$6(mark, {
+function styles$7(mark, {
   title: title2,
   href,
   ariaLabel: variaLabel,
@@ -14092,7 +14096,7 @@ class Mark {
     this.facetAnchor = maybeFacetAnchor(facetAnchor);
     channels = maybeNamed(channels);
     if (extraChannels !== void 0) channels = { ...maybeChannels(extraChannels), ...channels };
-    if (defaults2 !== void 0) channels = { ...styles$6(this, options, defaults2), ...channels };
+    if (defaults2 !== void 0) channels = { ...styles$7(this, options, defaults2), ...channels };
     this.channels = Object.fromEntries(
       Object.entries(channels).map(([name, channel]) => {
         if (isOptions(channel.value)) {
@@ -19130,7 +19134,7 @@ 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 = {
+const styles$6 = {
   input,
   large: large$3,
   small: small$3,
@@ -19153,26 +19157,26 @@ function Input({
   ...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 }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$6.field, children: [
+    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: styles$6.label, htmlFor: inputId, children: label2 }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         className: classNames(
           chamfer2 && chamferStyles.chamfer,
-          styles$5[variant]
+          styles$6[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,
+              styles$6.input,
+              styles$6[variant],
+              size2 === "large" && styles$6.large,
+              size2 === "small" && styles$6.small,
               disabled2 && chamferStyles.disabled,
-              disabled2 && styles$5.disabled,
+              disabled2 && styles$6.disabled,
               disabled2 && hatchStyles.hatch
             ),
             disabled: disabled2,
@@ -19763,7 +19767,7 @@ const success$3 = "_success_hpxu6_130";
 const warning$3 = "_warning_hpxu6_139";
 const danger$3 = "_danger_hpxu6_148";
 const info$3 = "_info_hpxu6_157";
-const styles$4 = {
+const styles$5 = {
   group,
   wrapper,
   disabled: disabled$2,
@@ -19785,7 +19789,7 @@ const styles$4 = {
 const RadioGroup$1 = ({ className, children: children2, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
   Root2$3,
   {
-    className: clsx(styles$4.group, className),
+    className: clsx(styles$5.group, className),
     ...props,
     children: children2
   }
@@ -19800,33 +19804,33 @@ function Radio({
   className,
   ...props
 }) {
-  const variantClass = variant && styles$4[variant];
-  const sizeClass = size2 === "large" ? styles$4.large : size2 === "small" ? styles$4.small : null;
+  const variantClass = variant && styles$5[variant];
+  const sizeClass = size2 === "large" ? styles$5.large : size2 === "small" ? styles$5.small : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "label",
     {
-      className: clsx(styles$4.wrapper, variantClass, disabled2 && styles$4.disabled),
+      className: clsx(styles$5.wrapper, variantClass, disabled2 && styles$5.disabled),
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Item2$2,
           {
             className: clsx(
-              styles$4.root,
+              styles$5.root,
               variantClass,
               sizeClass,
               chamfer2 && chamferStyles.chamfer,
               disabled2 && chamferStyles.disabled,
               disabled2 && hatchStyles.hatch,
-              disabled2 && styles$4.disabledDot,
+              disabled2 && styles$5.disabledDot,
               className
             ),
             value,
             disabled: disabled2,
             ...props,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Indicator, { className: styles$4.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$4.dot }) })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Indicator, { className: styles$5.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$5.dot }) })
           }
         ),
-        label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$4.label, children: label2 })
+        label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$5.label, children: label2 })
       ]
     }
   );
@@ -24386,7 +24390,7 @@ const warning$2 = "_warning_1u214_99";
 const danger$2 = "_danger_1u214_109";
 const info$2 = "_info_1u214_119";
 const secondary$2 = "_secondary_1u214_129";
-const styles$3 = {
+const styles$4 = {
   trigger: trigger$1,
   large: large$1,
   small: small$1,
@@ -24422,18 +24426,18 @@ function SelectInput({
           Trigger$2,
           {
             className: clsx(
-              styles$3.trigger,
-              styles$3[variant],
+              styles$4.trigger,
+              styles$4[variant],
               chamfer2 && chamferStyles.chamfer,
-              size2 === "large" && styles$3.large,
-              size2 === "small" && styles$3.small,
-              disabled2 && styles$3.disabled,
+              size2 === "large" && styles$4.large,
+              size2 === "small" && styles$4.small,
+              disabled2 && styles$4.disabled,
               disabled2 && hatchStyles.hatch
               // loading && styles.disabled
             ),
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Value, {}),
-              loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: styles$3.icon, children: "▾" })
+              loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: styles$4.icon, children: "▾" })
             ]
           }
         ),
@@ -24441,7 +24445,7 @@ function SelectInput({
           Content2$2,
           {
             className: classNames(
-              styles$3.content,
+              styles$4.content,
               chamfer2 && chamferStyles.chamfer
             ),
             sideOffset: 6,
@@ -24450,7 +24454,7 @@ function SelectInput({
               {
                 value: opt.value,
                 disabled: opt.disabled,
-                className: styles$3.item,
+                className: styles$4.item,
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemText, { children: opt.label })
               },
               opt.value
@@ -25494,7 +25498,7 @@ const warning$1 = "_warning_12pwu_170";
 const danger$1 = "_danger_12pwu_181";
 const info$1 = "_info_12pwu_192";
 const secondary$1 = "_secondary_12pwu_203";
-const styles$2 = {
+const styles$3 = {
   trigger,
   large,
   small,
@@ -25537,18 +25541,18 @@ function Dropdown({
   ...props
 }) {
   const triggerClassName = clsx(
-    styles$2.trigger,
-    variant && styles$2[variant],
+    styles$3.trigger,
+    variant && styles$3[variant],
     chamfer2 && chamferStyles.chamfer,
-    size2 === "large" && styles$2.large,
-    size2 === "small" && styles$2.small,
-    disabled2 && styles$2.disabled,
+    size2 === "large" && styles$3.large,
+    size2 === "small" && styles$3.small,
+    disabled2 && styles$3.disabled,
     disabled2 && hatchStyles.hatch,
     _triggerClassName
   );
   const contentClassName = clsx(
-    styles$2.content,
-    variant && styles$2[variant],
+    styles$3.content,
+    variant && styles$3[variant],
     chamfer2 && chamferStyles.chamfer
   );
   const handleItemSelect = (item2) => {
@@ -25577,13 +25581,13 @@ function Dropdown({
         side,
         sideOffset: 0,
         ...contentProps,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$2.viewport, children: items.map((item2, index2) => {
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.viewport, children: items.map((item2, index2) => {
           if (item2.type === "separator") {
             const separatorKey = item2.key ?? `separator-${index2}`;
             return /* @__PURE__ */ jsxRuntimeExports.jsx(
               Separator2,
               {
-                className: styles$2.separator
+                className: styles$3.separator
               },
               separatorKey
             );
@@ -25594,10 +25598,10 @@ function Dropdown({
             {
               onSelect: () => handleItemSelect(item2),
               disabled: item2.disabled,
-              className: styles$2.item,
+              className: styles$3.item,
               children: [
-                item2.icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$2.itemIcon, "aria-hidden": true, children: item2.icon }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$2.itemLabel, children: item2.label })
+                item2.icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.itemIcon, "aria-hidden": true, children: item2.icon }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.itemLabel, children: item2.label })
               ]
             },
             itemKey
@@ -25607,6 +25611,25 @@ function Dropdown({
     ) })
   ] });
 }
+const hatch = "_hatch_zh2j3_1";
+const styles$2 = {
+  hatch
+};
+function Hatch({ children: children2, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: classNames(
+        styles$2.hatch,
+        hatchStyles.hatch,
+        chamferStyles.chamfer,
+        className
+      ),
+      ...props,
+      children: children2
+    }
+  );
+}
 let e = { data: "" }, t = (t4) => {
   if ("object" == typeof window) {
     let e3 = (t4 ? t4.querySelector("#_goober") : window._goober) || Object.assign(document.createElement("style"), { innerHTML: " ", id: "_goober" });
@@ -26771,6 +26794,7 @@ export {
   Checkbox,
   ColorSwitcher,
   Dropdown,
+  Hatch,
   Input,
   JCUIProvider,
   Layout,

package/package.json

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