elseware-ui 3.0.12 → 3.0.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.
package/dist/index.js CHANGED
@@ -3,13 +3,13 @@
3
3
  var React26 = require('react');
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
5
  var tailwindMerge = require('tailwind-merge');
6
- var index_js$1 = require('react-icons/ai/index.js');
6
+ var index_js = require('react-icons/ai/index.js');
7
7
  var formik = require('formik');
8
8
  var index_js$2 = require('react-icons/fa/index.js');
9
9
  var classNames69 = require('classnames');
10
10
  var reactBeautifulDnd = require('react-beautiful-dnd');
11
11
  var cloudinaryReact = require('cloudinary-react');
12
- var index_js = require('react-icons/md/index.js');
12
+ var index_js$1 = require('react-icons/md/index.js');
13
13
  var index_js$3 = require('react-icons/bs/index.js');
14
14
  var framerMotion = require('framer-motion');
15
15
  var recharts = require('recharts');
@@ -5596,6 +5596,11 @@ var isMatch = (itemPath, currentPath) => {
5596
5596
  };
5597
5597
 
5598
5598
  // src/utils/styles.ts
5599
+ function extractTextColorClasses(className) {
5600
+ return className.split(/\s+/).filter(
5601
+ (token) => token.startsWith("text-") || token.startsWith("dark:text-") || token.startsWith("disabled:text-")
5602
+ ).join(" ");
5603
+ }
5599
5604
  function resolveAppearanceStyles({
5600
5605
  appearance = "solid",
5601
5606
  variant = "default",
@@ -6249,14 +6254,6 @@ var toastShapeStyles = {
6249
6254
  };
6250
6255
 
6251
6256
  // src/components/data-entry/button/base/Button.styles.ts
6252
- var buttonShapes = shapes;
6253
- var buttonIconSizes = {
6254
- xs: 14,
6255
- sm: 16,
6256
- md: 18,
6257
- lg: 20,
6258
- xl: 22
6259
- };
6260
6257
  function resolveButtonVariantStyles({
6261
6258
  appearance,
6262
6259
  variant
@@ -6270,108 +6267,199 @@ function resolveButtonVariantStyles({
6270
6267
  });
6271
6268
  }
6272
6269
 
6273
- // src/components/data-entry/button/web/Button.web.styles.ts
6274
- var webButtonSizes = {
6275
- xs: "px-2 py-1 text-xs",
6276
- sm: "px-3 py-1.5 text-sm",
6277
- md: "px-4 py-2 text-base",
6278
- lg: "px-5 py-3 text-lg",
6279
- xl: "px-6 py-4 text-xl"
6270
+ // src/components/data-entry/button/base/Button.tokens.ts
6271
+ var buttonSizeTokens = {
6272
+ xs: {
6273
+ padding: "px-2 py-1",
6274
+ text: "text-xs",
6275
+ icon: 14,
6276
+ minHeight: "min-h-[30px]",
6277
+ leading: "leading-[14px]",
6278
+ slot: "h-[14px] w-[14px]"
6279
+ },
6280
+ sm: {
6281
+ padding: "px-3 py-1.5",
6282
+ text: "text-sm",
6283
+ icon: 16,
6284
+ minHeight: "min-h-9",
6285
+ leading: "leading-4",
6286
+ slot: "h-4 w-4"
6287
+ },
6288
+ md: {
6289
+ padding: "px-4 py-2",
6290
+ text: "text-base",
6291
+ icon: 18,
6292
+ minHeight: "min-h-11",
6293
+ leading: "leading-[18px]",
6294
+ slot: "h-[18px] w-[18px]"
6295
+ },
6296
+ lg: {
6297
+ padding: "px-5 py-3",
6298
+ text: "text-lg",
6299
+ icon: 20,
6300
+ minHeight: "min-h-[50px]",
6301
+ leading: "leading-5",
6302
+ slot: "h-5 w-5"
6303
+ },
6304
+ xl: {
6305
+ padding: "px-6 py-4",
6306
+ text: "text-xl",
6307
+ icon: 22,
6308
+ minHeight: "min-h-14",
6309
+ leading: "leading-[22px]",
6310
+ slot: "h-[22px] w-[22px]"
6311
+ }
6280
6312
  };
6281
- function Button({
6282
- type: type2 = "button",
6283
- icon,
6284
- text: text10,
6285
- children: children3,
6286
- loading = false,
6287
- disabled = false,
6288
- block = false,
6289
- compact = false,
6290
- glow = true,
6291
- mode,
6292
- contentClassName,
6293
- labelClassName,
6294
- variant,
6295
- appearance,
6296
- shape,
6297
- size,
6298
- accessibilityLabel,
6299
- accessibilityRole,
6300
- accessibilityState,
6301
- testID,
6302
- className,
6303
- onMouseMove,
6304
- onClick,
6305
- onPress,
6306
- ...rest
6307
- }) {
6308
- const accessibility = accessibilityState;
6313
+ var buttonShapes = shapes;
6314
+ var buttonTextModeClassName = "border-transparent bg-transparent";
6315
+
6316
+ // src/components/data-entry/button/base/useButton.ts
6317
+ function useButton(props) {
6309
6318
  const {
6310
- shape: resolvedShape,
6311
- size: resolvedSize,
6312
- variant: resolvedVariant,
6313
- appearance: resolvedAppearance
6314
- } = useResolvedButtonConfig({
6315
- compact,
6319
+ // Consumed by the shared model
6320
+ icon,
6321
+ iconPosition = "leading",
6322
+ text: text10,
6323
+ children: children3,
6324
+ loading = false,
6325
+ disabled = false,
6326
+ block = false,
6327
+ compact = false,
6316
6328
  mode,
6317
6329
  variant,
6318
6330
  appearance,
6319
6331
  shape,
6320
- size
6321
- });
6322
- const btnRef = React26.useRef(null);
6323
- const variantStyles = resolveButtonVariantStyles({
6332
+ size,
6333
+ accessibilityState,
6334
+ onPress,
6335
+ // Owned by the platform views — pulled out here only so `rootRest` is a
6336
+ // clean pass-through (no library props leak onto the DOM / native root).
6337
+ type: _type,
6338
+ glow: _glow,
6339
+ className: _className,
6340
+ contentClassName: _contentClassName,
6341
+ labelClassName: _labelClassName,
6342
+ accessibilityLabel: _accessibilityLabel,
6343
+ accessibilityRole: _accessibilityRole,
6344
+ testID: _testID,
6345
+ onClick: _onClick,
6346
+ onMouseMove: _onMouseMove,
6347
+ ...rootRest
6348
+ } = props;
6349
+ const { shape: resolvedShape, size: resolvedSize, variant: resolvedVariant, appearance: resolvedAppearance } = useResolvedButtonConfig({ compact, mode, variant, appearance, shape, size });
6350
+ const tokens = buttonSizeTokens[resolvedSize];
6351
+ const variantClassName = resolveButtonVariantStyles({
6324
6352
  appearance: resolvedAppearance,
6325
6353
  variant: resolvedVariant
6326
6354
  });
6327
- const iconSize = buttonIconSizes[resolvedSize];
6328
- const labelContent = text10 || children3;
6329
- const resolvedIcon = typeof icon === "function" ? icon({
6330
- color: "currentColor",
6331
- size: iconSize
6332
- }) : icon;
6355
+ const label = text10 ?? children3;
6356
+ const resolvedIcon = typeof icon === "function" ? icon({ color: "currentColor", size: tokens.icon }) : icon;
6357
+ const isBusy = disabled || loading;
6358
+ return {
6359
+ size: resolvedSize,
6360
+ shape: resolvedShape,
6361
+ tokens,
6362
+ isBusy,
6363
+ isInteractive: !isBusy,
6364
+ isTextMode: mode === "text",
6365
+ block,
6366
+ loading,
6367
+ iconSize: tokens.icon,
6368
+ icon: resolvedIcon,
6369
+ iconPosition,
6370
+ label,
6371
+ hasTextLabel: typeof label === "string" || typeof label === "number",
6372
+ variantClassName,
6373
+ shapeClassName: buttonShapes[resolvedShape],
6374
+ labelColorClassName: extractTextColorClasses(variantClassName),
6375
+ selected: accessibilityState?.selected,
6376
+ onPress,
6377
+ rootRest
6378
+ };
6379
+ }
6380
+ var WEB_ROOT = "relative overflow-hidden group inline-flex items-center justify-center gap-2 transition-all duration-300";
6381
+ var Button = React26.forwardRef(function Button2(props, ref) {
6382
+ const {
6383
+ type: type2 = "button",
6384
+ glow = true,
6385
+ className,
6386
+ contentClassName,
6387
+ labelClassName,
6388
+ accessibilityLabel,
6389
+ accessibilityRole,
6390
+ testID,
6391
+ onClick,
6392
+ onMouseMove
6393
+ } = props;
6394
+ const model = useButton(props);
6395
+ const localRef = React26.useRef(null);
6396
+ const setRef = (node2) => {
6397
+ localRef.current = node2;
6398
+ if (typeof ref === "function") ref(node2);
6399
+ else if (ref) ref.current = node2;
6400
+ };
6333
6401
  const handleMouseMove = (e) => {
6334
- const btn = btnRef.current;
6335
- if (!btn || !glow) {
6336
- onMouseMove?.(e);
6337
- return;
6402
+ const btn = localRef.current;
6403
+ if (btn && glow) {
6404
+ const rect = btn.getBoundingClientRect();
6405
+ btn.style.setProperty("--glow-x", `${e.clientX - rect.left}px`);
6406
+ btn.style.setProperty("--glow-y", `${e.clientY - rect.top}px`);
6338
6407
  }
6339
- const rect = btn.getBoundingClientRect();
6340
- const x3 = e.clientX - rect.left;
6341
- const y3 = e.clientY - rect.top;
6342
- btn.style.setProperty("--glow-x", `${x3}px`);
6343
- btn.style.setProperty("--glow-y", `${y3}px`);
6344
6408
  onMouseMove?.(e);
6345
6409
  };
6346
6410
  const handleClick = (e) => {
6347
6411
  onClick?.(e);
6348
- if (!e.defaultPrevented) {
6349
- onPress?.();
6350
- }
6412
+ if (!e.defaultPrevented) model.onPress?.();
6351
6413
  };
6414
+ const iconGroup = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6415
+ model.loading && /* @__PURE__ */ jsxRuntime.jsx(index_js.AiOutlineLoading, { className: "animate-spin z-10" }),
6416
+ model.icon && /* @__PURE__ */ jsxRuntime.jsx(
6417
+ "span",
6418
+ {
6419
+ className: cn(
6420
+ "z-10 inline-flex shrink-0 items-center justify-center leading-none",
6421
+ contentClassName
6422
+ ),
6423
+ style: { height: model.iconSize, width: model.iconSize, lineHeight: 0 },
6424
+ children: model.icon
6425
+ }
6426
+ )
6427
+ ] });
6428
+ const labelNode = model.label != null && model.label !== "" ? /* @__PURE__ */ jsxRuntime.jsx(
6429
+ "span",
6430
+ {
6431
+ className: cn(
6432
+ "z-10 inline-flex items-center justify-center leading-none",
6433
+ labelClassName
6434
+ ),
6435
+ style: { minHeight: model.iconSize },
6436
+ children: model.label
6437
+ }
6438
+ ) : null;
6439
+ const trailing = model.iconPosition === "trailing";
6352
6440
  return /* @__PURE__ */ jsxRuntime.jsxs(
6353
6441
  "button",
6354
6442
  {
6355
- ...rest,
6356
- ref: btnRef,
6443
+ ...model.rootRest,
6444
+ ref: setRef,
6357
6445
  type: type2,
6358
- disabled: disabled || loading,
6446
+ disabled: model.isBusy,
6359
6447
  onClick: handleClick,
6360
6448
  onMouseMove: handleMouseMove,
6361
- "aria-disabled": disabled || loading,
6449
+ "aria-disabled": model.isBusy,
6362
6450
  "aria-label": accessibilityLabel,
6363
- "aria-pressed": accessibility?.selected === void 0 ? void 0 : Boolean(accessibility.selected),
6451
+ "aria-pressed": model.selected,
6364
6452
  "data-testid": testID,
6365
6453
  role: accessibilityRole,
6366
6454
  className: cn(
6367
- "relative overflow-hidden group inline-flex items-center justify-center gap-2 transition-all duration-300",
6368
- variantStyles,
6369
- buttonShapes[resolvedShape],
6370
- webButtonSizes[resolvedSize],
6371
- block && "w-full",
6372
- mode === "text" && "border-transparent bg-transparent",
6373
- (loading || disabled) && "brightness-75 grayscale cursor-not-allowed",
6374
- !loading && !disabled && "hover:cursor-pointer",
6455
+ WEB_ROOT,
6456
+ model.variantClassName,
6457
+ model.shapeClassName,
6458
+ model.tokens.padding,
6459
+ model.tokens.text,
6460
+ model.block && "w-full",
6461
+ model.isTextMode && buttonTextModeClassName,
6462
+ model.isBusy ? "brightness-75 grayscale cursor-not-allowed" : "hover:cursor-pointer",
6375
6463
  className
6376
6464
  ),
6377
6465
  children: [
@@ -6380,49 +6468,16 @@ function Button({
6380
6468
  {
6381
6469
  className: "pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300",
6382
6470
  style: {
6383
- background: `
6384
- radial-gradient(
6385
- 200px circle at var(--glow-x) var(--glow-y),
6386
- rgba(255,255,255,0.18),
6387
- transparent 50%
6388
- )
6389
- `
6471
+ background: "radial-gradient(200px circle at var(--glow-x) var(--glow-y), rgba(255,255,255,0.18), transparent 50%)"
6390
6472
  }
6391
6473
  }
6392
6474
  ),
6393
- loading && /* @__PURE__ */ jsxRuntime.jsx(index_js$1.AiOutlineLoading, { className: "animate-spin z-10" }),
6394
- resolvedIcon && /* @__PURE__ */ jsxRuntime.jsx(
6395
- "span",
6396
- {
6397
- className: cn(
6398
- "z-10 inline-flex shrink-0 items-center justify-center leading-none",
6399
- contentClassName
6400
- ),
6401
- style: {
6402
- height: iconSize,
6403
- lineHeight: 0,
6404
- width: iconSize
6405
- },
6406
- children: resolvedIcon
6407
- }
6408
- ),
6409
- labelContent && /* @__PURE__ */ jsxRuntime.jsx(
6410
- "span",
6411
- {
6412
- className: cn(
6413
- "z-10 inline-flex items-center justify-center leading-none",
6414
- labelClassName
6415
- ),
6416
- style: {
6417
- minHeight: iconSize
6418
- },
6419
- children: labelContent
6420
- }
6421
- )
6475
+ trailing ? labelNode : iconGroup,
6476
+ trailing ? iconGroup : labelNode
6422
6477
  ]
6423
6478
  }
6424
6479
  );
6425
- }
6480
+ });
6426
6481
  var Button_web_default = Button;
6427
6482
 
6428
6483
  // src/data/styles/shared.styles.tsx
@@ -8640,7 +8695,7 @@ var ImageInput = React26.forwardRef(
8640
8695
  }),
8641
8696
  htmlFor: `${field.name}`,
8642
8697
  children: [
8643
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl text-gray-300 group-hover:text-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdUpload, {}) }),
8698
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl text-gray-300 group-hover:text-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdUpload, {}) }),
8644
8699
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xl font-bold text-gray-500 group-hover:text-gray-500", children: title })
8645
8700
  ]
8646
8701
  }
@@ -8656,7 +8711,7 @@ var ImageInput = React26.forwardRef(
8656
8711
  ) }),
8657
8712
  loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute", children: [
8658
8713
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[200px] w-[300px] bg-black opacity-50" }),
8659
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.AiOutlineLoading, { className: "animate-spin" }) })
8714
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(index_js.AiOutlineLoading, { className: "animate-spin" }) })
8660
8715
  ] }),
8661
8716
  !loading && url && /* @__PURE__ */ jsxRuntime.jsx(ImageView, { imageUrl: url, alt: url ? url : "image" }),
8662
8717
  (preview || url) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 text-3xl", children: [
@@ -8666,7 +8721,7 @@ var ImageInput = React26.forwardRef(
8666
8721
  className: " text-green-600 hover:cursor-pointer",
8667
8722
  onClick: uploadImage,
8668
8723
  hidden: url ? true : false,
8669
- children: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdOutlineDone, {})
8724
+ children: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdOutlineDone, {})
8670
8725
  }
8671
8726
  ),
8672
8727
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -8674,7 +8729,7 @@ var ImageInput = React26.forwardRef(
8674
8729
  {
8675
8730
  className: "text-red-500 hover:cursor-pointer",
8676
8731
  onClick: handleResetClick,
8677
- children: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdOutlineRemoveCircleOutline, {})
8732
+ children: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdOutlineRemoveCircleOutline, {})
8678
8733
  }
8679
8734
  )
8680
8735
  ] })
@@ -8830,7 +8885,7 @@ function MultiImageInput({
8830
8885
  children: [
8831
8886
  /* @__PURE__ */ jsxRuntime.jsx(ImageView, { imageUrl: url }),
8832
8887
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-2 top-2 inline-flex items-center gap-1 rounded bg-black/60 px-2 py-1 text-xs text-white", children: [
8833
- /* @__PURE__ */ jsxRuntime.jsx(index_js.MdDragIndicator, {}),
8888
+ /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdDragIndicator, {}),
8834
8889
  index3 + 1
8835
8890
  ] }),
8836
8891
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-2 top-2 flex gap-1", children: [
@@ -8841,7 +8896,7 @@ function MultiImageInput({
8841
8896
  accessibilityLabel: "Move image left",
8842
8897
  disabled: index3 === 0 || isOrganizerBusy,
8843
8898
  glow: false,
8844
- icon: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdKeyboardArrowLeft, {}),
8899
+ icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdKeyboardArrowLeft, {}),
8845
8900
  onPress: () => moveImage(index3, index3 - 1),
8846
8901
  size: "xs",
8847
8902
  className: "h-8 w-8 bg-black/60 p-0 text-xl text-white hover:bg-black/80 disabled:opacity-40"
@@ -8854,7 +8909,7 @@ function MultiImageInput({
8854
8909
  accessibilityLabel: "Move image right",
8855
8910
  disabled: index3 === imageUrls.length - 1 || isOrganizerBusy,
8856
8911
  glow: false,
8857
- icon: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdKeyboardArrowRight, {}),
8912
+ icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdKeyboardArrowRight, {}),
8858
8913
  onPress: () => moveImage(index3, index3 + 1),
8859
8914
  size: "xs",
8860
8915
  className: "h-8 w-8 bg-black/60 p-0 text-xl text-white hover:bg-black/80 disabled:opacity-40"
@@ -8884,7 +8939,7 @@ function MultiImageInput({
8884
8939
  accessibilityLabel: "Change image",
8885
8940
  disabled: isOrganizerBusy,
8886
8941
  glow: false,
8887
- icon: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdUpload, {}),
8942
+ icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdUpload, {}),
8888
8943
  onPress: () => openReplacePicker(index3),
8889
8944
  size: "sm",
8890
8945
  text: "Change",
@@ -8899,14 +8954,14 @@ function MultiImageInput({
8899
8954
  accessibilityLabel: "Delete image",
8900
8955
  disabled: isOrganizerBusy,
8901
8956
  glow: false,
8902
- icon: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdOutlineDelete, {}),
8957
+ icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdOutlineDelete, {}),
8903
8958
  onPress: () => removeImage(index3),
8904
8959
  size: "sm",
8905
8960
  variant: "danger"
8906
8961
  }
8907
8962
  )
8908
8963
  ] }),
8909
- isReplacing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/60 text-2xl text-white", children: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.AiOutlineLoading, { className: "animate-spin" }) })
8964
+ isReplacing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/60 text-2xl text-white", children: /* @__PURE__ */ jsxRuntime.jsx(index_js.AiOutlineLoading, { className: "animate-spin" }) })
8910
8965
  ]
8911
8966
  },
8912
8967
  `${url}-${index3}`
@@ -31450,7 +31505,7 @@ var GlowWrapper = ({
31450
31505
  /* @__PURE__ */ jsxRuntime.jsx(
31451
31506
  "span",
31452
31507
  {
31453
- className: "\r\n pointer-events-none absolute inset-0 opacity-0 \r\n group-hover:opacity-100 transition-opacity duration-300\r\n ",
31508
+ className: "\n pointer-events-none absolute inset-0 opacity-0 \n group-hover:opacity-100 transition-opacity duration-300\n ",
31454
31509
  style: { background: "var(--glow-bg)" }
31455
31510
  }
31456
31511
  ),
@@ -59366,6 +59421,8 @@ exports.ProgressBarRating = ProgressBarRating;
59366
59421
  exports.Quote = Quote;
59367
59422
  exports.Radio = Radio_default;
59368
59423
  exports.RealtimeChartDataSource = RealtimeChartDataSource;
59424
+ exports.ReviewComposer = ReviewComposer_default;
59425
+ exports.ReviewForm = ReviewForm_default;
59369
59426
  exports.ReviewThread = ReviewThread_default;
59370
59427
  exports.RouteTab = RouteTab_default;
59371
59428
  exports.RouteTabs = RouteTabs_default;
@@ -59461,6 +59518,7 @@ exports.ensureAnonymousIdStorage = ensureAnonymousIdStorage;
59461
59518
  exports.enumValues = enumValues;
59462
59519
  exports.euiToast = euiToast;
59463
59520
  exports.extractHeadings = extractHeadings;
59521
+ exports.extractTextColorClasses = extractTextColorClasses;
59464
59522
  exports.findReview = findReview;
59465
59523
  exports.formatChartLabel = formatChartLabel;
59466
59524
  exports.formatChartValue = formatChartValue;