@zauru-sdk/components 6.6.0 → 6.7.0

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 (8) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/DiscountHistory/RejectionPercentageHistoryList.d.ts +1 -0
  3. package/dist/Form/Checkbox/index.d.ts +2 -0
  4. package/dist/esm/DiscountHistory/RejectionPercentageHistoryList.js +14 -7
  5. package/dist/esm/Form/Checkbox/index.js +7 -4
  6. package/package.json +8 -8
  7. package/src/DiscountHistory/RejectionPercentageHistoryList.tsx +16 -3
  8. package/src/Form/Checkbox/index.tsx +33 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [6.7.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.6.0...@zauru-sdk/components@6.7.0) (2026-09-18)
7
+
8
+
9
+ ### Features
10
+
11
+ * descuento sucesivo en porcentajes de rechazo ([c437bbd](https://github.com/intuitiva/zauru-typescript-sdk/commit/c437bbd6a1305fd417c4ac55f8e07eb244f2fe3d))
12
+
13
+
14
+
15
+
16
+
6
17
  # [6.6.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.5.6...@zauru-sdk/components@6.6.0) (2026-09-18)
7
18
 
8
19
 
package/dist/DiscountHistory/RejectionPercentageHistoryList.d.ts CHANGED
@@ -6,6 +6,7 @@ export type RejectionPercentageHistoryItem = {
6
6
  employee_name?: string;
7
7
  created_at?: string;
8
8
  type?: string;
9
+ successive?: boolean;
9
10
  };
10
11
  type NamedRecord = {
11
12
  id?: number;
package/dist/Form/Checkbox/index.d.ts CHANGED
@@ -10,6 +10,8 @@ type Props = {
10
10
  disabled?: boolean;
11
11
  borderColor?: string;
12
12
  required?: boolean;
13
+ helpText?: string;
14
+ helpAriaLabel?: string;
13
15
  };
14
16
  export declare const CheckBox: (props: Props) => import("react/jsx-runtime").JSX.Element;
15
17
  export {};
package/dist/esm/DiscountHistory/RejectionPercentageHistoryList.js CHANGED
@@ -36,19 +36,26 @@ export const RejectionPercentageHistoryList = ({ items, employees, agencies, act
36
36
  }
37
37
  return (_jsx("div", { className: `space-y-3 max-h-60 overflow-y-auto ${className}`.trim(), children: items.map((item, index) => {
38
38
  const isAutomatic = isAutomaticRejectionRuleHistoryType(item.type);
39
+ const isSuccessive = item.successive === true;
39
40
  const employeeName = item.employee_name?.trim() ||
40
41
  findName(employees, item.employee_id) ||
41
42
  (item.employee_id != null ? `ID: ${item.employee_id}` : "No especificado");
42
43
  const agencyName = findName(agencies, item.agency_id) ||
43
44
  (item.agency_id != null ? `ID: ${item.agency_id}` : "No especificada");
44
45
  const description = item.description || "Sin descripción";
45
- return (_jsxs("div", { className: isAutomatic
46
- ? "border border-indigo-200 rounded-lg p-3 bg-indigo-50"
47
- : "border border-gray-100 rounded-lg p-3 bg-gray-50", children: [_jsxs("div", { className: "flex justify-between items-start gap-3 mb-2", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("span", { className: isAutomatic
48
- ? "font-semibold text-indigo-800"
49
- : "font-semibold text-blue-600", children: formatSignedPercentage(Number(item.discount) || 0, isAutomatic) }), isAutomatic ? (_jsx("span", { className: "shrink-0 whitespace-nowrap rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-800", children: "Autom\u00E1tico" })) : null] }), item.created_at ? (_jsx("span", { className: "text-xs text-gray-500 shrink-0", children: formatHistoryDate(item.created_at) })) : null] }), _jsx("p", { className: isAutomatic
50
- ? "text-sm text-indigo-900 mb-1"
51
- : "text-sm text-gray-700 mb-1", title: description, children: description }), _jsxs("div", { className: "flex justify-between gap-3 text-xs text-gray-500", children: [_jsx("span", { className: "min-w-0", children: isAutomatic
46
+ return (_jsxs("div", { className: isSuccessive
47
+ ? "border border-amber-200 rounded-lg p-3 bg-amber-50"
48
+ : isAutomatic
49
+ ? "border border-indigo-200 rounded-lg p-3 bg-indigo-50"
50
+ : "border border-gray-100 rounded-lg p-3 bg-gray-50", children: [_jsxs("div", { className: "flex justify-between items-start gap-3 mb-2", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("span", { className: isSuccessive
51
+ ? "font-semibold text-amber-800"
52
+ : isAutomatic
53
+ ? "font-semibold text-indigo-800"
54
+ : "font-semibold text-blue-600", children: formatSignedPercentage(Number(item.discount) || 0, isAutomatic) }), isSuccessive ? (_jsx("span", { className: "shrink-0 whitespace-nowrap rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800", children: "Sucesivo" })) : null, isAutomatic ? (_jsx("span", { className: "shrink-0 whitespace-nowrap rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-800", children: "Autom\u00E1tico" })) : null] }), item.created_at ? (_jsx("span", { className: "text-xs text-gray-500 shrink-0", children: formatHistoryDate(item.created_at) })) : null] }), _jsx("p", { className: isSuccessive
55
+ ? "text-sm text-amber-900 mb-1"
56
+ : isAutomatic
57
+ ? "text-sm text-indigo-900 mb-1"
58
+ : "text-sm text-gray-700 mb-1", title: description, children: description }), _jsxs("div", { className: "flex justify-between gap-3 text-xs text-gray-500", children: [_jsx("span", { className: "min-w-0", children: isAutomatic
52
59
  ? "Aplicado por el sistema"
53
60
  : `${actorLabel}: ${employeeName}` }), _jsxs("span", { className: "shrink-0", children: ["Agencia: ", agencyName] })] })] }, `${item.created_at ?? "entry"}-${item.type ?? "manual"}-${index}`));
54
61
  }) }));
package/dist/esm/Form/Checkbox/index.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { QuestionMarkIconSVG } from "@zauru-sdk/icons";
2
3
  import { useEffect, useState } from "react";
3
4
  import { useFormContext } from "react-hook-form";
4
5
  export const CheckBox = (props) => {
5
- const { id, name, defaultValue = false, onChange, disabled = false, label, required = false, } = props;
6
+ const { id, name, defaultValue = false, onChange, disabled = false, label, required = false, helpText, helpAriaLabel = "Más información", } = props;
6
7
  const [checked, setChecked] = useState(defaultValue);
8
+ const [showHelp, setShowHelp] = useState(false);
7
9
  useEffect(() => {
8
10
  setChecked(defaultValue);
9
11
  }, [defaultValue]);
@@ -27,9 +29,10 @@ export const CheckBox = (props) => {
27
29
  : undefined; // Solo usar register si está disponible
28
30
  const color = error ? "red" : "gray";
29
31
  const borderColor = disabled ? "border-gray-300" : `border-${color}-500`;
30
- const inputComponent = (_jsx("input", { type: "checkbox", id: id ?? name, checked: checked, className: `form-checkbox h-4 w-4 text-indigo-600 ${borderColor} focus:border-indigo-500 focus:ring-indigo-500`, disabled: disabled, ...(register ?? {}), name: name, onChange: handleInputChange }));
31
- if (!error && !label) {
32
+ const inputComponent = (_jsx("input", { type: "checkbox", id: id ?? name, checked: checked, className: `form-checkbox h-4 w-4 text-indigo-600 ${borderColor} ${disabled ? "cursor-not-allowed" : "cursor-pointer"} focus:border-indigo-500 focus:ring-indigo-500`, disabled: disabled, ...(register ?? {}), name: name, onChange: handleInputChange }));
33
+ const helpButton = helpText ? (_jsxs("div", { className: "relative ml-2 shrink-0", children: [_jsx("button", { type: "button", className: "cursor-pointer inline-flex items-center justify-center text-gray-500 hover:text-indigo-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 rounded-full", "aria-label": helpAriaLabel, "aria-expanded": showHelp, onMouseEnter: () => setShowHelp(true), onMouseLeave: () => setShowHelp(false), onFocus: () => setShowHelp(true), onBlur: () => setShowHelp(false), children: _jsx(QuestionMarkIconSVG, {}) }), showHelp ? (_jsx("div", { className: "absolute z-50 left-1/2 -translate-x-1/2 bottom-full mb-2 w-72 max-w-[min(18rem,calc(100vw-2rem))] rounded border border-gray-200 bg-white p-2 text-left text-sm text-black shadow motion-reduce:transition-none", children: helpText })) : null] })) : null;
34
+ if (!error && !label && !helpText) {
32
35
  return inputComponent;
33
36
  }
34
- return (_jsxs("div", { className: "col-span-6 sm:col-span-3", children: [_jsxs("div", { className: `flex items-center ${borderColor}`, children: [inputComponent, label && (_jsxs("label", { htmlFor: id ?? name, className: `ml-2 block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: [label, required && _jsx("span", { className: "text-red-500", children: "*" })] }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] }))] }));
37
+ return (_jsxs("div", { className: "col-span-6 sm:col-span-3", children: [_jsxs("div", { className: `flex items-center ${borderColor}`, children: [inputComponent, label && (_jsxs("label", { htmlFor: id ?? name, className: `ml-2 block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: [label, required && _jsx("span", { className: "text-red-500", children: "*" })] })), helpButton] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] }))] }));
35
38
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zauru-sdk/components",
3
- "version": "6.6.0",
3
+ "version": "6.7.0",
4
4
  "description": "Componentes reutilizables en las WebApps de Zauru.",
5
5
  "main": "./dist/esm/index.js",
6
6
  "module": "./dist/esm/index.js",
@@ -44,12 +44,12 @@
44
44
  "@reduxjs/toolkit": "^2.2.1",
45
45
  "@remix-run/node": "^2.8.1",
46
46
  "@remix-run/react": "^2.8.1",
47
- "@zauru-sdk/common": "^6.7.0",
48
- "@zauru-sdk/hooks": "^6.3.12",
49
- "@zauru-sdk/icons": "^6.0.0",
50
- "@zauru-sdk/redux": "^6.5.10",
51
- "@zauru-sdk/types": "^6.17.0",
52
- "@zauru-sdk/utils": "^6.17.0",
47
+ "@zauru-sdk/common": "^6.8.0",
48
+ "@zauru-sdk/hooks": "^6.3.13",
49
+ "@zauru-sdk/icons": "^6.1.0",
50
+ "@zauru-sdk/redux": "^6.5.11",
51
+ "@zauru-sdk/types": "^6.18.0",
52
+ "@zauru-sdk/utils": "^6.18.0",
53
53
  "browser-image-compression": "^2.0.2",
54
54
  "framer-motion": "^12.0.0",
55
55
  "jsonwebtoken": "^9.0.2",
@@ -62,5 +62,5 @@
62
62
  "styled-components": "^5.3.5",
63
63
  "zod": "^3.23.8"
64
64
  },
65
- "gitHead": "d3483aa3b55a9a692f955e6a56d13f33b70db1c4"
65
+ "gitHead": "c5b785baa29fdd2ab7f42a9077ba5cbe5c7c9707"
66
66
  }
package/src/DiscountHistory/RejectionPercentageHistoryList.tsx CHANGED
@@ -12,6 +12,7 @@ export type RejectionPercentageHistoryItem = {
12
12
  employee_name?: string;
13
13
  created_at?: string;
14
14
  type?: string;
15
+ successive?: boolean;
15
16
  };
16
17
 
17
18
  type NamedRecord = {
@@ -78,6 +79,7 @@ export const RejectionPercentageHistoryList = ({
78
79
  <div className={`space-y-3 max-h-60 overflow-y-auto ${className}`.trim()}>
79
80
  {items.map((item, index) => {
80
81
  const isAutomatic = isAutomaticRejectionRuleHistoryType(item.type);
82
+ const isSuccessive = item.successive === true;
81
83
  const employeeName =
82
84
  item.employee_name?.trim() ||
83
85
  findName(employees, item.employee_id) ||
@@ -91,7 +93,9 @@ export const RejectionPercentageHistoryList = ({
91
93
  <div
92
94
  key={`${item.created_at ?? "entry"}-${item.type ?? "manual"}-${index}`}
93
95
  className={
94
- isAutomatic
96
+ isSuccessive
97
+ ? "border border-amber-200 rounded-lg p-3 bg-amber-50"
98
+ : isAutomatic
95
99
  ? "border border-indigo-200 rounded-lg p-3 bg-indigo-50"
96
100
  : "border border-gray-100 rounded-lg p-3 bg-gray-50"
97
101
  }
@@ -100,13 +104,20 @@ export const RejectionPercentageHistoryList = ({
100
104
  <div className="flex items-center gap-2 min-w-0">
101
105
  <span
102
106
  className={
103
- isAutomatic
107
+ isSuccessive
108
+ ? "font-semibold text-amber-800"
109
+ : isAutomatic
104
110
  ? "font-semibold text-indigo-800"
105
111
  : "font-semibold text-blue-600"
106
112
  }
107
113
  >
108
114
  {formatSignedPercentage(Number(item.discount) || 0, isAutomatic)}
109
115
  </span>
116
+ {isSuccessive ? (
117
+ <span className="shrink-0 whitespace-nowrap rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800">
118
+ Sucesivo
119
+ </span>
120
+ ) : null}
110
121
  {isAutomatic ? (
111
122
  <span className="shrink-0 whitespace-nowrap rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-800">
112
123
  Automático
@@ -121,7 +132,9 @@ export const RejectionPercentageHistoryList = ({
121
132
  </div>
122
133
  <p
123
134
  className={
124
- isAutomatic
135
+ isSuccessive
136
+ ? "text-sm text-amber-900 mb-1"
137
+ : isAutomatic
125
138
  ? "text-sm text-indigo-900 mb-1"
126
139
  : "text-sm text-gray-700 mb-1"
127
140
  }
package/src/Form/Checkbox/index.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { QuestionMarkIconSVG } from "@zauru-sdk/icons";
1
2
  import React, { useEffect, useState } from "react";
2
3
  import { useFormContext } from "react-hook-form";
3
4
 
@@ -13,6 +14,8 @@ type Props = {
13
14
  disabled?: boolean;
14
15
  borderColor?: string;
15
16
  required?: boolean;
17
+ helpText?: string;
18
+ helpAriaLabel?: string;
16
19
  };
17
20
 
18
21
  export const CheckBox = (props: Props) => {
@@ -24,9 +27,12 @@ export const CheckBox = (props: Props) => {
24
27
  disabled = false,
25
28
  label,
26
29
  required = false,
30
+ helpText,
31
+ helpAriaLabel = "Más información",
27
32
  } = props;
28
33
 
29
34
  const [checked, setChecked] = useState(defaultValue);
35
+ const [showHelp, setShowHelp] = useState(false);
30
36
 
31
37
  useEffect(() => {
32
38
  setChecked(defaultValue);
@@ -63,7 +69,9 @@ export const CheckBox = (props: Props) => {
63
69
  type="checkbox"
64
70
  id={id ?? name}
65
71
  checked={checked}
66
- className={`form-checkbox h-4 w-4 text-indigo-600 ${borderColor} focus:border-indigo-500 focus:ring-indigo-500`}
72
+ className={`form-checkbox h-4 w-4 text-indigo-600 ${borderColor} ${
73
+ disabled ? "cursor-not-allowed" : "cursor-pointer"
74
+ } focus:border-indigo-500 focus:ring-indigo-500`}
67
75
  disabled={disabled}
68
76
  {...(register ?? {})}
69
77
  name={name}
@@ -71,7 +79,29 @@ export const CheckBox = (props: Props) => {
71
79
  />
72
80
  );
73
81
 
74
- if (!error && !label) {
82
+ const helpButton = helpText ? (
83
+ <div className="relative ml-2 shrink-0">
84
+ <button
85
+ type="button"
86
+ className="cursor-pointer inline-flex items-center justify-center text-gray-500 hover:text-indigo-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 rounded-full"
87
+ aria-label={helpAriaLabel}
88
+ aria-expanded={showHelp}
89
+ onMouseEnter={() => setShowHelp(true)}
90
+ onMouseLeave={() => setShowHelp(false)}
91
+ onFocus={() => setShowHelp(true)}
92
+ onBlur={() => setShowHelp(false)}
93
+ >
94
+ <QuestionMarkIconSVG />
95
+ </button>
96
+ {showHelp ? (
97
+ <div className="absolute z-50 left-1/2 -translate-x-1/2 bottom-full mb-2 w-72 max-w-[min(18rem,calc(100vw-2rem))] rounded border border-gray-200 bg-white p-2 text-left text-sm text-black shadow motion-reduce:transition-none">
98
+ {helpText}
99
+ </div>
100
+ ) : null}
101
+ </div>
102
+ ) : null;
103
+
104
+ if (!error && !label && !helpText) {
75
105
  return inputComponent;
76
106
  }
77
107
 
@@ -88,6 +118,7 @@ export const CheckBox = (props: Props) => {
88
118
  {required && <span className="text-red-500">*</span>}
89
119
  </label>
90
120
  )}
121
+ {helpButton}
91
122
  </div>
92
123
  {error && (
93
124
  <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>