@jackcrane/ui 0.1.12 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/jcui.cjs.js +87 -53
  2. package/dist/jcui.es.js +87 -53
  3. package/package.json +1 -1
package/dist/jcui.cjs.js CHANGED
@@ -113,7 +113,8 @@
113
113
  ._secondary_105y0_116:active {
114
114
  --button-bg: var(--secondary-color-300);
115
115
  }
116
- ._chamfer_1o5rm_1 {
116
+ ._chamfer_1unae_1,
117
+ .jcui_chamfer {
117
118
  --bt: var(--border-thickness);
118
119
  --cd: var(--chamfer-distance);
119
120
  --chamfer-color: var(--border-accent-color);
@@ -124,18 +125,24 @@
124
125
  --cd 180ms ease,
125
126
  background-color 180ms ease;
126
127
  }
127
- ._chamfer_1o5rm_1:not(._disabled_1o5rm_15):hover {
128
+ ._chamfer_1unae_1:not(._disabled_1unae_16):hover,
129
+ .jcui_chamfer:not(.jcui_disabled):hover {
128
130
  --cd: calc(var(--chamfer-distance) * 1.5);
129
131
  }
130
- ._chamfer_1o5rm_1:active,
131
- div._chamfer_1o5rm_1:focus-within {
132
+ ._chamfer_1unae_1:active,
133
+ div._chamfer_1unae_1:focus-within,
134
+ .jcui_chamfer:active,
135
+ div.jcui_chamfer:focus-within {
132
136
  --cd: calc(var(--chamfer-distance) * 1.75);
133
137
  }
134
- ._chamfer_1o5rm_1:not(._disabled_1o5rm_15):active,
135
- div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
138
+ ._chamfer_1unae_1:not(._disabled_1unae_16):active,
139
+ div._chamfer_1unae_1:not(._disabled_1unae_16):focus-within,
140
+ .jcui_chamfer:not(.jcui_disabled):active,
141
+ div.jcui_chamfer:not(.jcui_disabled):focus-within {
136
142
  --cd: calc(var(--chamfer-distance) * 1.75);
137
143
  }
138
- ._chamfer_1o5rm_1::before {
144
+ ._chamfer_1unae_1::before,
145
+ .jcui_chamfer::before {
139
146
  content: "";
140
147
  position: absolute;
141
148
  inset: 0;
@@ -162,24 +169,25 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
162
169
  /* ========================= */
163
170
  /* Hover-only variant */
164
171
  /* ========================= */
165
- ._chamferOnHover_1o5rm_60 {
172
+ ._chamferOnHover_1unae_67 {
166
173
  border: none;
167
174
  }
168
- ._chamferOnHover_1o5rm_60::before {
175
+ ._chamferOnHover_1unae_67::before {
169
176
  opacity: 0;
170
177
  }
171
178
  /* Enable effects only on hover / focus / active */
172
- ._chamferOnHover_1o5rm_60:hover,
173
- ._chamferOnHover_1o5rm_60:focus-within,
174
- ._chamferOnHover_1o5rm_60:active {
179
+ ._chamferOnHover_1unae_67:hover,
180
+ ._chamferOnHover_1unae_67:focus-within,
181
+ ._chamferOnHover_1unae_67:active {
175
182
  border: var(--bt) solid var(--border-color);
176
183
  }
177
- ._chamferOnHover_1o5rm_60:hover::before,
178
- ._chamferOnHover_1o5rm_60:focus-within::before,
179
- ._chamferOnHover_1o5rm_60:active::before {
184
+ ._chamferOnHover_1unae_67:hover::before,
185
+ ._chamferOnHover_1unae_67:focus-within::before,
186
+ ._chamferOnHover_1unae_67:active::before {
180
187
  opacity: 1;
181
188
  }
182
- ._hatch_owfoz_1 {
189
+ ._hatch_rrcdt_1,
190
+ .jcui_hatch {
183
191
  --bc: var(--border-color);
184
192
  --bg: transparent;
185
193
  --stripe: var(--border-thickness);
@@ -2264,15 +2272,15 @@ const styles$c = {
2264
2272
  info: info$9,
2265
2273
  secondary: secondary$9
2266
2274
  };
2267
- const chamfer$1 = "_chamfer_1o5rm_1";
2268
- const disabled$6 = "_disabled_1o5rm_15";
2269
- const chamferOnHover = "_chamferOnHover_1o5rm_60";
2275
+ const chamfer$1 = "_chamfer_1unae_1";
2276
+ const disabled$6 = "_disabled_1unae_16";
2277
+ const chamferOnHover = "_chamferOnHover_1unae_67";
2270
2278
  const chamferStyles = {
2271
2279
  chamfer: chamfer$1,
2272
2280
  disabled: disabled$6,
2273
2281
  chamferOnHover
2274
2282
  };
2275
- const hatch$1 = "_hatch_owfoz_1";
2283
+ const hatch$1 = "_hatch_rrcdt_1";
2276
2284
  const hatchStyles = {
2277
2285
  hatch: hatch$1
2278
2286
  };
@@ -27367,39 +27375,65 @@ const styles$1 = {
27367
27375
  };
27368
27376
  const useModal = ({ title: title2, content: content2, footer: footer2 }) => {
27369
27377
  const [open2, setOpen] = React__namespace.useState(false);
27370
- const Modal = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Root, { open: open2, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Portal, { children: [
27371
- /* @__PURE__ */ jsxRuntimeExports.jsx(Overlay, { className: `${styles$1.overlay} ${hatchStyles.hatch}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.overlayBackdrop }) }),
27372
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
27373
- Content,
27374
- {
27375
- className: `${styles$1.content} ${chamferStyles.chamfer}`,
27376
- children: [
27377
- title2 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
27378
- "div",
27379
- {
27380
- style: {
27381
- display: "flex",
27382
- flexDirection: "row",
27383
- justifyContent: "space-between",
27384
- alignItems: "center",
27385
- margin: -12,
27386
- marginBottom: 0,
27387
- padding: 12,
27388
- borderBottom: "var(--border-thickness) solid var(--border-color)"
27389
- },
27390
- className: classNames(hatchStyles.hatch),
27391
- children: [
27392
- /* @__PURE__ */ jsxRuntimeExports.jsx(Title, { className: styles$1.title, children: title2 }),
27393
- /* @__PURE__ */ jsxRuntimeExports.jsx(Close, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", variant: "danger", children: "Close" }) })
27394
- ]
27395
- }
27396
- ),
27397
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.body, children: content2 }),
27398
- footer2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$1.footer, hatchStyles.hatch), children: footer2 })
27399
- ]
27400
- }
27401
- )
27402
- ] }) });
27378
+ const modalConfigRef = React__namespace.useRef({
27379
+ open: open2,
27380
+ setOpen,
27381
+ title: title2,
27382
+ content: content2,
27383
+ footer: footer2
27384
+ });
27385
+ modalConfigRef.current = {
27386
+ open: open2,
27387
+ setOpen,
27388
+ title: title2,
27389
+ content: content2,
27390
+ footer: footer2
27391
+ };
27392
+ const Modal = React__namespace.useMemo(
27393
+ () => function Modal2() {
27394
+ const {
27395
+ open: isOpen,
27396
+ setOpen: onOpenChange,
27397
+ title: currentTitle,
27398
+ content: currentContent,
27399
+ footer: currentFooter
27400
+ } = modalConfigRef.current;
27401
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(Root, { open: isOpen, onOpenChange, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Portal, { children: [
27402
+ /* @__PURE__ */ jsxRuntimeExports.jsx(Overlay, { className: `${styles$1.overlay} ${hatchStyles.hatch}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.overlayBackdrop }) }),
27403
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(
27404
+ Content,
27405
+ {
27406
+ className: `${styles$1.content} ${chamferStyles.chamfer}`,
27407
+ children: [
27408
+ currentTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs(
27409
+ "div",
27410
+ {
27411
+ style: {
27412
+ display: "flex",
27413
+ flexDirection: "row",
27414
+ justifyContent: "space-between",
27415
+ alignItems: "center",
27416
+ margin: -12,
27417
+ marginBottom: 0,
27418
+ padding: 12,
27419
+ borderBottom: "var(--border-thickness) solid var(--border-color)"
27420
+ },
27421
+ className: classNames(hatchStyles.hatch),
27422
+ children: [
27423
+ /* @__PURE__ */ jsxRuntimeExports.jsx(Title, { className: styles$1.title, children: currentTitle }),
27424
+ /* @__PURE__ */ jsxRuntimeExports.jsx(Close, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", variant: "danger", children: "Close" }) })
27425
+ ]
27426
+ }
27427
+ ),
27428
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.body, children: currentContent }),
27429
+ currentFooter && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$1.footer, hatchStyles.hatch), children: currentFooter })
27430
+ ]
27431
+ }
27432
+ )
27433
+ ] }) });
27434
+ },
27435
+ []
27436
+ );
27403
27437
  const trigger2 = (node) => /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger, { asChild: true, children: node });
27404
27438
  return { Modal, trigger: trigger2, open: open2, setOpen };
27405
27439
  };
package/dist/jcui.es.js CHANGED
@@ -113,7 +113,8 @@
113
113
  ._secondary_105y0_116:active {
114
114
  --button-bg: var(--secondary-color-300);
115
115
  }
116
- ._chamfer_1o5rm_1 {
116
+ ._chamfer_1unae_1,
117
+ .jcui_chamfer {
117
118
  --bt: var(--border-thickness);
118
119
  --cd: var(--chamfer-distance);
119
120
  --chamfer-color: var(--border-accent-color);
@@ -124,18 +125,24 @@
124
125
  --cd 180ms ease,
125
126
  background-color 180ms ease;
126
127
  }
127
- ._chamfer_1o5rm_1:not(._disabled_1o5rm_15):hover {
128
+ ._chamfer_1unae_1:not(._disabled_1unae_16):hover,
129
+ .jcui_chamfer:not(.jcui_disabled):hover {
128
130
  --cd: calc(var(--chamfer-distance) * 1.5);
129
131
  }
130
- ._chamfer_1o5rm_1:active,
131
- div._chamfer_1o5rm_1:focus-within {
132
+ ._chamfer_1unae_1:active,
133
+ div._chamfer_1unae_1:focus-within,
134
+ .jcui_chamfer:active,
135
+ div.jcui_chamfer:focus-within {
132
136
  --cd: calc(var(--chamfer-distance) * 1.75);
133
137
  }
134
- ._chamfer_1o5rm_1:not(._disabled_1o5rm_15):active,
135
- div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
138
+ ._chamfer_1unae_1:not(._disabled_1unae_16):active,
139
+ div._chamfer_1unae_1:not(._disabled_1unae_16):focus-within,
140
+ .jcui_chamfer:not(.jcui_disabled):active,
141
+ div.jcui_chamfer:not(.jcui_disabled):focus-within {
136
142
  --cd: calc(var(--chamfer-distance) * 1.75);
137
143
  }
138
- ._chamfer_1o5rm_1::before {
144
+ ._chamfer_1unae_1::before,
145
+ .jcui_chamfer::before {
139
146
  content: "";
140
147
  position: absolute;
141
148
  inset: 0;
@@ -162,24 +169,25 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
162
169
  /* ========================= */
163
170
  /* Hover-only variant */
164
171
  /* ========================= */
165
- ._chamferOnHover_1o5rm_60 {
172
+ ._chamferOnHover_1unae_67 {
166
173
  border: none;
167
174
  }
168
- ._chamferOnHover_1o5rm_60::before {
175
+ ._chamferOnHover_1unae_67::before {
169
176
  opacity: 0;
170
177
  }
171
178
  /* Enable effects only on hover / focus / active */
172
- ._chamferOnHover_1o5rm_60:hover,
173
- ._chamferOnHover_1o5rm_60:focus-within,
174
- ._chamferOnHover_1o5rm_60:active {
179
+ ._chamferOnHover_1unae_67:hover,
180
+ ._chamferOnHover_1unae_67:focus-within,
181
+ ._chamferOnHover_1unae_67:active {
175
182
  border: var(--bt) solid var(--border-color);
176
183
  }
177
- ._chamferOnHover_1o5rm_60:hover::before,
178
- ._chamferOnHover_1o5rm_60:focus-within::before,
179
- ._chamferOnHover_1o5rm_60:active::before {
184
+ ._chamferOnHover_1unae_67:hover::before,
185
+ ._chamferOnHover_1unae_67:focus-within::before,
186
+ ._chamferOnHover_1unae_67:active::before {
180
187
  opacity: 1;
181
188
  }
182
- ._hatch_owfoz_1 {
189
+ ._hatch_rrcdt_1,
190
+ .jcui_hatch {
183
191
  --bc: var(--border-color);
184
192
  --bg: transparent;
185
193
  --stripe: var(--border-thickness);
@@ -2246,15 +2254,15 @@ const styles$c = {
2246
2254
  info: info$9,
2247
2255
  secondary: secondary$9
2248
2256
  };
2249
- const chamfer$1 = "_chamfer_1o5rm_1";
2250
- const disabled$6 = "_disabled_1o5rm_15";
2251
- const chamferOnHover = "_chamferOnHover_1o5rm_60";
2257
+ const chamfer$1 = "_chamfer_1unae_1";
2258
+ const disabled$6 = "_disabled_1unae_16";
2259
+ const chamferOnHover = "_chamferOnHover_1unae_67";
2252
2260
  const chamferStyles = {
2253
2261
  chamfer: chamfer$1,
2254
2262
  disabled: disabled$6,
2255
2263
  chamferOnHover
2256
2264
  };
2257
- const hatch$1 = "_hatch_owfoz_1";
2265
+ const hatch$1 = "_hatch_rrcdt_1";
2258
2266
  const hatchStyles = {
2259
2267
  hatch: hatch$1
2260
2268
  };
@@ -27349,39 +27357,65 @@ const styles$1 = {
27349
27357
  };
27350
27358
  const useModal = ({ title: title2, content: content2, footer: footer2 }) => {
27351
27359
  const [open2, setOpen] = React.useState(false);
27352
- const Modal = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Root, { open: open2, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Portal, { children: [
27353
- /* @__PURE__ */ jsxRuntimeExports.jsx(Overlay, { className: `${styles$1.overlay} ${hatchStyles.hatch}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.overlayBackdrop }) }),
27354
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
27355
- Content,
27356
- {
27357
- className: `${styles$1.content} ${chamferStyles.chamfer}`,
27358
- children: [
27359
- title2 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
27360
- "div",
27361
- {
27362
- style: {
27363
- display: "flex",
27364
- flexDirection: "row",
27365
- justifyContent: "space-between",
27366
- alignItems: "center",
27367
- margin: -12,
27368
- marginBottom: 0,
27369
- padding: 12,
27370
- borderBottom: "var(--border-thickness) solid var(--border-color)"
27371
- },
27372
- className: classNames(hatchStyles.hatch),
27373
- children: [
27374
- /* @__PURE__ */ jsxRuntimeExports.jsx(Title, { className: styles$1.title, children: title2 }),
27375
- /* @__PURE__ */ jsxRuntimeExports.jsx(Close, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", variant: "danger", children: "Close" }) })
27376
- ]
27377
- }
27378
- ),
27379
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.body, children: content2 }),
27380
- footer2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$1.footer, hatchStyles.hatch), children: footer2 })
27381
- ]
27382
- }
27383
- )
27384
- ] }) });
27360
+ const modalConfigRef = React.useRef({
27361
+ open: open2,
27362
+ setOpen,
27363
+ title: title2,
27364
+ content: content2,
27365
+ footer: footer2
27366
+ });
27367
+ modalConfigRef.current = {
27368
+ open: open2,
27369
+ setOpen,
27370
+ title: title2,
27371
+ content: content2,
27372
+ footer: footer2
27373
+ };
27374
+ const Modal = React.useMemo(
27375
+ () => function Modal2() {
27376
+ const {
27377
+ open: isOpen,
27378
+ setOpen: onOpenChange,
27379
+ title: currentTitle,
27380
+ content: currentContent,
27381
+ footer: currentFooter
27382
+ } = modalConfigRef.current;
27383
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(Root, { open: isOpen, onOpenChange, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Portal, { children: [
27384
+ /* @__PURE__ */ jsxRuntimeExports.jsx(Overlay, { className: `${styles$1.overlay} ${hatchStyles.hatch}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.overlayBackdrop }) }),
27385
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(
27386
+ Content,
27387
+ {
27388
+ className: `${styles$1.content} ${chamferStyles.chamfer}`,
27389
+ children: [
27390
+ currentTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs(
27391
+ "div",
27392
+ {
27393
+ style: {
27394
+ display: "flex",
27395
+ flexDirection: "row",
27396
+ justifyContent: "space-between",
27397
+ alignItems: "center",
27398
+ margin: -12,
27399
+ marginBottom: 0,
27400
+ padding: 12,
27401
+ borderBottom: "var(--border-thickness) solid var(--border-color)"
27402
+ },
27403
+ className: classNames(hatchStyles.hatch),
27404
+ children: [
27405
+ /* @__PURE__ */ jsxRuntimeExports.jsx(Title, { className: styles$1.title, children: currentTitle }),
27406
+ /* @__PURE__ */ jsxRuntimeExports.jsx(Close, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", variant: "danger", children: "Close" }) })
27407
+ ]
27408
+ }
27409
+ ),
27410
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.body, children: currentContent }),
27411
+ currentFooter && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$1.footer, hatchStyles.hatch), children: currentFooter })
27412
+ ]
27413
+ }
27414
+ )
27415
+ ] }) });
27416
+ },
27417
+ []
27418
+ );
27385
27419
  const trigger2 = (node) => /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger, { asChild: true, children: node });
27386
27420
  return { Modal, trigger: trigger2, open: open2, setOpen };
27387
27421
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jackcrane/ui",
3
- "version": "0.1.12",
3
+ "version": "0.1.14",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "main": "dist/jcui.cjs.js",