analytica-frontend-lib 1.0.9 → 1.0.10

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 (6) hide show
  1. package/dist/index.css +35 -4
  2. package/dist/index.d.mts +9 -4
  3. package/dist/index.d.ts +9 -4
  4. package/dist/index.js +49 -44
  5. package/dist/index.mjs +49 -44
  6. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -22,7 +22,6 @@
22
22
  "Courier New",
23
23
  monospace;
24
24
  --spacing: 0.25rem;
25
- --container-2xs: 18rem;
26
25
  --text-xs: 0.75rem;
27
26
  --text-xs--line-height: calc(1 / 0.75);
28
27
  --text-sm: 0.875rem;
@@ -58,6 +57,7 @@
58
57
  --color-primary-800: #0d0d0d;
59
58
  --color-primary-950: #080808;
60
59
  --color-text: #fefeff;
60
+ --color-text-600: #737373;
61
61
  --color-text-700: #525252;
62
62
  --color-text-900: #262627;
63
63
  --color-text-950: #171717;
@@ -290,12 +290,18 @@
290
290
  .my-4 {
291
291
  margin-block: calc(var(--spacing) * 4);
292
292
  }
293
+ .mt-2 {
294
+ margin-top: calc(var(--spacing) * 2);
295
+ }
293
296
  .mr-2 {
294
297
  margin-right: calc(var(--spacing) * 2);
295
298
  }
296
299
  .mb-2 {
297
300
  margin-bottom: calc(var(--spacing) * 2);
298
301
  }
302
+ .mb-3 {
303
+ margin-bottom: calc(var(--spacing) * 3);
304
+ }
299
305
  .ml-2 {
300
306
  margin-left: calc(var(--spacing) * 2);
301
307
  }
@@ -317,9 +323,6 @@
317
323
  .h-8 {
318
324
  height: calc(var(--spacing) * 8);
319
325
  }
320
- .w-2xs {
321
- width: var(--container-2xs);
322
- }
323
326
  .w-5 {
324
327
  width: calc(var(--spacing) * 5);
325
328
  }
@@ -532,6 +535,9 @@
532
535
  .text-text {
533
536
  color: var(--color-text);
534
537
  }
538
+ .text-text-600 {
539
+ color: var(--color-text-600);
540
+ }
535
541
  .text-text-700 {
536
542
  color: var(--color-text-700);
537
543
  }
@@ -541,6 +547,15 @@
541
547
  .text-text-950 {
542
548
  color: var(--color-text-950);
543
549
  }
550
+ .shadow-none {
551
+ --tw-shadow: 0 0 #0000;
552
+ box-shadow:
553
+ var(--tw-inset-shadow),
554
+ var(--tw-inset-ring-shadow),
555
+ var(--tw-ring-offset-shadow),
556
+ var(--tw-ring-shadow),
557
+ var(--tw-shadow);
558
+ }
544
559
  .shadow-soft-shadow-1 {
545
560
  --tw-shadow: 0px 0px 10px var(--tw-shadow-color, rgba(38, 38, 38, 0.1));
546
561
  box-shadow:
@@ -550,6 +565,22 @@
550
565
  var(--tw-ring-shadow),
551
566
  var(--tw-shadow);
552
567
  }
568
+ .ring-2 {
569
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
570
+ box-shadow:
571
+ var(--tw-inset-shadow),
572
+ var(--tw-inset-ring-shadow),
573
+ var(--tw-ring-offset-shadow),
574
+ var(--tw-ring-shadow),
575
+ var(--tw-shadow);
576
+ }
577
+ .ring-primary-950 {
578
+ --tw-ring-color: var(--color-primary-950);
579
+ }
580
+ .ring-offset-0 {
581
+ --tw-ring-offset-width: 0px;
582
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
583
+ }
553
584
  .outline {
554
585
  outline-style: var(--tw-outline-style);
555
586
  outline-width: 1px;
package/dist/index.d.mts CHANGED
@@ -78,13 +78,14 @@ declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconR
78
78
  /**
79
79
  * SelectionButton component for Analytica Ensino platforms
80
80
  *
81
- * Um botão com ícone e texto para ações e navegação.
82
- * Ideal para filtros, tags, categorias, etc.
81
+ * Um botão com ícone e texto para ações e navegação com estado de seleção.
82
+ * Ideal para filtros, tags, categorias, seleção de tipos, etc.
83
83
  * Compatível com Next.js 15 e React 19.
84
84
  * Suporta forwardRef para acesso programático ao elemento DOM.
85
85
  *
86
86
  * @param icon - O ícone a ser exibido no botão
87
87
  * @param label - O texto/label a ser exibido
88
+ * @param selected - Estado de seleção do botão
88
89
  * @param className - Classes CSS adicionais
89
90
  * @param props - Todos os outros atributos HTML padrão de button
90
91
  * @returns Um elemento button estilizado
@@ -94,7 +95,8 @@ declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconR
94
95
  * <SelectionButton
95
96
  * icon={<TagIcon />}
96
97
  * label="Categoria"
97
- * onClick={() => handleAction()}
98
+ * selected={false}
99
+ * onClick={() => handleSelection()}
98
100
  * />
99
101
  * ```
100
102
  *
@@ -111,7 +113,8 @@ declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconR
111
113
  * ref={buttonRef}
112
114
  * icon={<TagIcon />}
113
115
  * label="Categoria"
114
- * onClick={() => handleAction()}
116
+ * selected={isSelected}
117
+ * onClick={() => setSelected(!isSelected)}
115
118
  * />
116
119
  * ```
117
120
  */
@@ -120,6 +123,8 @@ declare const SelectionButton: react.ForwardRefExoticComponent<{
120
123
  icon: ReactNode;
121
124
  /** Texto/label a ser exibido ao lado do ícone */
122
125
  label: string;
126
+ /** Estado de seleção do botão */
127
+ selected?: boolean;
123
128
  /** Additional CSS classes to apply */
124
129
  className?: string;
125
130
  } & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
package/dist/index.d.ts CHANGED
@@ -78,13 +78,14 @@ declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconR
78
78
  /**
79
79
  * SelectionButton component for Analytica Ensino platforms
80
80
  *
81
- * Um botão com ícone e texto para ações e navegação.
82
- * Ideal para filtros, tags, categorias, etc.
81
+ * Um botão com ícone e texto para ações e navegação com estado de seleção.
82
+ * Ideal para filtros, tags, categorias, seleção de tipos, etc.
83
83
  * Compatível com Next.js 15 e React 19.
84
84
  * Suporta forwardRef para acesso programático ao elemento DOM.
85
85
  *
86
86
  * @param icon - O ícone a ser exibido no botão
87
87
  * @param label - O texto/label a ser exibido
88
+ * @param selected - Estado de seleção do botão
88
89
  * @param className - Classes CSS adicionais
89
90
  * @param props - Todos os outros atributos HTML padrão de button
90
91
  * @returns Um elemento button estilizado
@@ -94,7 +95,8 @@ declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconR
94
95
  * <SelectionButton
95
96
  * icon={<TagIcon />}
96
97
  * label="Categoria"
97
- * onClick={() => handleAction()}
98
+ * selected={false}
99
+ * onClick={() => handleSelection()}
98
100
  * />
99
101
  * ```
100
102
  *
@@ -111,7 +113,8 @@ declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconR
111
113
  * ref={buttonRef}
112
114
  * icon={<TagIcon />}
113
115
  * label="Categoria"
114
- * onClick={() => handleAction()}
116
+ * selected={isSelected}
117
+ * onClick={() => setSelected(!isSelected)}
115
118
  * />
116
119
  * ```
117
120
  */
@@ -120,6 +123,8 @@ declare const SelectionButton: react.ForwardRefExoticComponent<{
120
123
  icon: ReactNode;
121
124
  /** Texto/label a ser exibido ao lado do ícone */
122
125
  label: string;
126
+ /** Estado de seleção do botão */
127
+ selected?: boolean;
123
128
  /** Additional CSS classes to apply */
124
129
  className?: string;
125
130
  } & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
package/dist/index.js CHANGED
@@ -128,50 +128,55 @@ var IconRoundedButton = ({
128
128
  // src/components/SelectionButton/SelectionButton.tsx
129
129
  var import_react = require("react");
130
130
  var import_jsx_runtime3 = require("react/jsx-runtime");
131
- var SelectionButton = (0, import_react.forwardRef)(({ icon, label, className = "", disabled, ...props }, ref) => {
132
- const baseClasses = [
133
- "inline-flex",
134
- "items-center",
135
- "justify-start",
136
- "gap-2",
137
- "p-4",
138
- "rounded-xl",
139
- "cursor-pointer",
140
- "border",
141
- "border-border-50",
142
- "bg-background",
143
- "text-sm",
144
- "text-text-700",
145
- "font-bold",
146
- "shadow-soft-shadow-1",
147
- "hover:bg-background-100",
148
- "focus-visible:outline-none",
149
- "focus-visible:ring-2",
150
- "focus-visible:ring-indicator-info",
151
- "focus-visible:ring-offset-0",
152
- "focus-visible:shadow-none",
153
- "active:ring-2",
154
- "active:ring-primary-950",
155
- "active:ring-offset-0",
156
- "active:shadow-none",
157
- "disabled:opacity-50",
158
- "disabled:cursor-not-allowed"
159
- ].join(" ");
160
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
161
- "button",
162
- {
163
- ref,
164
- type: "button",
165
- className: `${baseClasses} ${className}`,
166
- disabled,
167
- ...props,
168
- children: [
169
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
170
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: label })
171
- ]
172
- }
173
- );
174
- });
131
+ var SelectionButton = (0, import_react.forwardRef)(
132
+ ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
133
+ const baseClasses = [
134
+ "inline-flex",
135
+ "items-center",
136
+ "justify-start",
137
+ "gap-2",
138
+ "p-4",
139
+ "rounded-xl",
140
+ "cursor-pointer",
141
+ "border",
142
+ "border-border-50",
143
+ "bg-background",
144
+ "text-sm",
145
+ "text-text-700",
146
+ "font-bold",
147
+ "shadow-soft-shadow-1",
148
+ "hover:bg-background-100",
149
+ "focus-visible:outline-none",
150
+ "focus-visible:ring-2",
151
+ "focus-visible:ring-indicator-info",
152
+ "focus-visible:ring-offset-0",
153
+ "focus-visible:shadow-none",
154
+ "active:ring-2",
155
+ "active:ring-primary-950",
156
+ "active:ring-offset-0",
157
+ "active:shadow-none",
158
+ "disabled:opacity-50",
159
+ "disabled:cursor-not-allowed"
160
+ ];
161
+ const stateClasses = selected ? ["ring-primary-950", "ring-2", "ring-offset-0", "shadow-none"] : [];
162
+ const allClasses = [...baseClasses, ...stateClasses].join(" ");
163
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
164
+ "button",
165
+ {
166
+ ref,
167
+ type: "button",
168
+ className: `${allClasses} ${className}`,
169
+ disabled,
170
+ "aria-pressed": selected,
171
+ ...props,
172
+ children: [
173
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
174
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: label })
175
+ ]
176
+ }
177
+ );
178
+ }
179
+ );
175
180
  SelectionButton.displayName = "SelectionButton";
176
181
 
177
182
  // src/components/Text/Text.tsx
package/dist/index.mjs CHANGED
@@ -99,50 +99,55 @@ var IconRoundedButton = ({
99
99
  // src/components/SelectionButton/SelectionButton.tsx
100
100
  import { forwardRef } from "react";
101
101
  import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
102
- var SelectionButton = forwardRef(({ icon, label, className = "", disabled, ...props }, ref) => {
103
- const baseClasses = [
104
- "inline-flex",
105
- "items-center",
106
- "justify-start",
107
- "gap-2",
108
- "p-4",
109
- "rounded-xl",
110
- "cursor-pointer",
111
- "border",
112
- "border-border-50",
113
- "bg-background",
114
- "text-sm",
115
- "text-text-700",
116
- "font-bold",
117
- "shadow-soft-shadow-1",
118
- "hover:bg-background-100",
119
- "focus-visible:outline-none",
120
- "focus-visible:ring-2",
121
- "focus-visible:ring-indicator-info",
122
- "focus-visible:ring-offset-0",
123
- "focus-visible:shadow-none",
124
- "active:ring-2",
125
- "active:ring-primary-950",
126
- "active:ring-offset-0",
127
- "active:shadow-none",
128
- "disabled:opacity-50",
129
- "disabled:cursor-not-allowed"
130
- ].join(" ");
131
- return /* @__PURE__ */ jsxs2(
132
- "button",
133
- {
134
- ref,
135
- type: "button",
136
- className: `${baseClasses} ${className}`,
137
- disabled,
138
- ...props,
139
- children: [
140
- /* @__PURE__ */ jsx3("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
141
- /* @__PURE__ */ jsx3("span", { children: label })
142
- ]
143
- }
144
- );
145
- });
102
+ var SelectionButton = forwardRef(
103
+ ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
104
+ const baseClasses = [
105
+ "inline-flex",
106
+ "items-center",
107
+ "justify-start",
108
+ "gap-2",
109
+ "p-4",
110
+ "rounded-xl",
111
+ "cursor-pointer",
112
+ "border",
113
+ "border-border-50",
114
+ "bg-background",
115
+ "text-sm",
116
+ "text-text-700",
117
+ "font-bold",
118
+ "shadow-soft-shadow-1",
119
+ "hover:bg-background-100",
120
+ "focus-visible:outline-none",
121
+ "focus-visible:ring-2",
122
+ "focus-visible:ring-indicator-info",
123
+ "focus-visible:ring-offset-0",
124
+ "focus-visible:shadow-none",
125
+ "active:ring-2",
126
+ "active:ring-primary-950",
127
+ "active:ring-offset-0",
128
+ "active:shadow-none",
129
+ "disabled:opacity-50",
130
+ "disabled:cursor-not-allowed"
131
+ ];
132
+ const stateClasses = selected ? ["ring-primary-950", "ring-2", "ring-offset-0", "shadow-none"] : [];
133
+ const allClasses = [...baseClasses, ...stateClasses].join(" ");
134
+ return /* @__PURE__ */ jsxs2(
135
+ "button",
136
+ {
137
+ ref,
138
+ type: "button",
139
+ className: `${allClasses} ${className}`,
140
+ disabled,
141
+ "aria-pressed": selected,
142
+ ...props,
143
+ children: [
144
+ /* @__PURE__ */ jsx3("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
145
+ /* @__PURE__ */ jsx3("span", { children: label })
146
+ ]
147
+ }
148
+ );
149
+ }
150
+ );
146
151
  SelectionButton.displayName = "SelectionButton";
147
152
 
148
153
  // src/components/Text/Text.tsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "analytica-frontend-lib",
3
- "version": "1.0.9",
3
+ "version": "1.0.10",
4
4
  "description": "Repositório público dos componentes utilizados nas plataformas da Analytica Ensino",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "./dist/index.js",