@deframe-sdk/components 0.1.3 → 0.1.5

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/dist/index.d.mts +8 -17
  2. package/dist/index.d.ts +8 -17
  3. package/dist/index.js +112 -40
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +112 -40
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +237 -116
  8. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -11,32 +11,23 @@ declare function PercentageButton({ children, disabled, className, type, ...prop
11
11
  /** Primary UI component for user interaction - uses brand-primary color for theming */
12
12
  declare function PrimaryButton({ children, disabled, className, type, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
13
13
 
14
- /** Primary UI component for user interaction */
14
+ /** Secondary UI component for user interaction - outline style using brand-primary color */
15
15
  declare function SecondaryButton({ children, disabled, className, type, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
16
16
 
17
- /** Primary UI component for user interaction */
17
+ /** Tertiary UI component for user interaction - ghost style using brand-tertiary color */
18
18
  declare function TertiaryButton({ children, disabled, className, type, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
19
19
 
20
+ /** 'ButtonProps' defines the properties for button components */
20
21
  interface ButtonProps {
21
- /**
22
- * The content of the button
23
- */
22
+ /** The content of the button */
24
23
  children: React.ReactNode;
25
- /**
26
- * Whether the button is disabled
27
- */
24
+ /** Whether the button is disabled */
28
25
  disabled?: boolean;
29
- /**
30
- * Additional CSS class names
31
- */
26
+ /** Additional CSS class names */
32
27
  className?: string;
33
- /**
34
- * Type of the button
35
- */
28
+ /** Type of the button */
36
29
  type?: 'button' | 'submit' | 'reset';
37
- /**
38
- * Optional click handler
39
- */
30
+ /** Optional click handler */
40
31
  onClick?: () => void;
41
32
  }
42
33
 
package/dist/index.d.ts CHANGED
@@ -11,32 +11,23 @@ declare function PercentageButton({ children, disabled, className, type, ...prop
11
11
  /** Primary UI component for user interaction - uses brand-primary color for theming */
12
12
  declare function PrimaryButton({ children, disabled, className, type, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
13
13
 
14
- /** Primary UI component for user interaction */
14
+ /** Secondary UI component for user interaction - outline style using brand-primary color */
15
15
  declare function SecondaryButton({ children, disabled, className, type, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
16
16
 
17
- /** Primary UI component for user interaction */
17
+ /** Tertiary UI component for user interaction - ghost style using brand-tertiary color */
18
18
  declare function TertiaryButton({ children, disabled, className, type, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
19
19
 
20
+ /** 'ButtonProps' defines the properties for button components */
20
21
  interface ButtonProps {
21
- /**
22
- * The content of the button
23
- */
22
+ /** The content of the button */
24
23
  children: React.ReactNode;
25
- /**
26
- * Whether the button is disabled
27
- */
24
+ /** Whether the button is disabled */
28
25
  disabled?: boolean;
29
- /**
30
- * Additional CSS class names
31
- */
26
+ /** Additional CSS class names */
32
27
  className?: string;
33
- /**
34
- * Type of the button
35
- */
28
+ /** Type of the button */
36
29
  type?: 'button' | 'submit' | 'reset';
37
- /**
38
- * Optional click handler
39
- */
30
+ /** Optional click handler */
40
31
  onClick?: () => void;
41
32
  }
42
33
 
package/dist/index.js CHANGED
@@ -140,11 +140,50 @@ function PrimaryButton(_a) {
140
140
  "className",
141
141
  "type"
142
142
  ]);
143
- const baseStyles = disabled ? "h-12 w-full rounded px-6 py-2.5 inline-flex justify-center items-center gap-2 overflow-hidden cursor-not-allowed bg-bg-muted dark:bg-bg-muted-dark text-text-disabled dark:text-text-disabled-dark opacity-50 text-center text-sm font-semibold font-poppins leading-5" : "h-12 w-full rounded px-6 py-2.5 inline-flex justify-center items-center gap-2 overflow-hidden bg-brand-primary text-text-inverse hover:shadow-md hover:opacity-90 focus:opacity-85 active:opacity-85 transition-all duration-200 text-center text-sm font-semibold font-poppins leading-5 cursor-pointer";
144
- const buttonClasses = tailwindMerge.twMerge(baseStyles, className);
143
+ const baseClasses = [
144
+ /** layout */
145
+ "overflow-hidden w-full flex items-center justify-center transition-all duration-200",
146
+ /** typography */
147
+ "font-[var(--deframe-widget-font-family)]",
148
+ "[font-size:var(--deframe-widget-font-size-md)]",
149
+ "[line-height:var(--deframe-widget-font-leading-md)]",
150
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
151
+ /** spacing */
152
+ "px-[var(--deframe-widget-size-padding-x-xl)]",
153
+ "py-[var(--deframe-widget-size-padding-y-md)]",
154
+ /** container */
155
+ "rounded-[var(--deframe-widget-size-radius-xs)]",
156
+ "border-solid border-[length:var(--deframe-widget-size-border-xs)]",
157
+ "gap-[var(--deframe-widget-size-gap-sm)]"
158
+ ].join(" ");
159
+ const stateClasses = {
160
+ /** enabled state */
161
+ enabled: [
162
+ "hover:opacity-90",
163
+ "text-[var(--deframe-widget-color-text-primary)]",
164
+ "bg-[var(--deframe-widget-color-brand-primary)]",
165
+ "border-[color:var(--deframe-widget-color-border-primary)]",
166
+ "cursor-pointer"
167
+ ].join(" "),
168
+ /** disabled state */
169
+ disabled: [
170
+ "text-[var(--deframe-widget-color-text-primary-disabled)]",
171
+ "bg-[var(--deframe-widget-color-brand-primary-disabled)]",
172
+ "border-[color:var(--deframe-widget-color-border-primary-disabled)]",
173
+ "cursor-not-allowed"
174
+ ].join(" ")
175
+ };
176
+ const buttonClasses = tailwindMerge.twMerge(
177
+ baseClasses,
178
+ stateClasses[disabled ? "disabled" : "enabled"],
179
+ className
180
+ );
145
181
  return /* @__PURE__ */ jsxRuntime.jsx(
146
182
  "button",
147
183
  __spreadProps(__spreadValues({
184
+ "data-slot": "primary-button",
185
+ "data-test-id": "primary-button",
186
+ "aria-label": "primary action",
148
187
  type,
149
188
  className: buttonClasses,
150
189
  disabled
@@ -165,34 +204,52 @@ function SecondaryButton(_a) {
165
204
  "className",
166
205
  "type"
167
206
  ]);
168
- const getStyles = () => {
169
- if (disabled) {
170
- return {
171
- container: "h-12 rounded outline outline-1 outline-offset-[-1px] outline-border-default dark:outline-border-default-dark inline-flex flex-col justify-center items-center gap-2 overflow-hidden",
172
- inner: "self-stretch flex-1 px-6 py-2.5 inline-flex justify-center items-center gap-2",
173
- text: "opacity-state-disabled-content text-center justify-center text-text-disabled dark:text-text-disabled-dark text-sm font-semibold font-poppins leading-5"
174
- };
175
- }
176
- return {
177
- container: "h-12 rounded outline outline-1 outline-offset-[-1px] outline-border-subtle dark:outline-border-subtle-dark inline-flex flex-col justify-center items-center gap-2 overflow-hidden hover:outline-brand-primary focus:outline-brand-primary active:outline-border-default transition-colors duration-200 cursor-pointer",
178
- inner: "self-stretch flex-1 px-6 py-2.5 inline-flex justify-center items-center gap-2 hover:bg-brand-secondary-20 focus:bg-brand-secondary-20 active:bg-transparent transition-colors duration-200",
179
- text: "text-center justify-center text-brand-primary text-sm font-semibold font-poppins leading-5"
180
- };
207
+ const baseClasses = [
208
+ /** layout */
209
+ "overflow-hidden w-full flex items-center justify-center transition-all duration-200",
210
+ /** typography */
211
+ "font-[var(--deframe-widget-font-family)]",
212
+ "[font-size:var(--deframe-widget-font-size-md)]",
213
+ "[line-height:var(--deframe-widget-font-leading-md)]",
214
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
215
+ /** spacing */
216
+ "px-[var(--deframe-widget-size-padding-x-xl)]",
217
+ "py-[var(--deframe-widget-size-padding-y-md)]",
218
+ /** container */
219
+ "bg-transparent",
220
+ "rounded-[var(--deframe-widget-size-radius-xs)]",
221
+ "border-solid border-[length:var(--deframe-widget-size-border-xs)]",
222
+ "gap-[var(--deframe-widget-size-gap-sm)]"
223
+ ].join(" ");
224
+ const stateClasses = {
225
+ enabled: [
226
+ "text-[color:var(--deframe-widget-color-brand-secondary)]",
227
+ "border-[color:var(--deframe-widget-color-border-secondary)]",
228
+ "hover:opacity-90",
229
+ "cursor-pointer"
230
+ ].join(" "),
231
+ disabled: [
232
+ "text-[color:var(--deframe-widget-color-text-secondary-disabled)]",
233
+ "border-[color:var(--deframe-widget-color-border-secondary-disabled)]",
234
+ "cursor-not-allowed"
235
+ ].join(" ")
181
236
  };
182
- const styles = getStyles();
183
- const containerClasses = tailwindMerge.twMerge(
184
- styles.container,
185
- disabled && "cursor-not-allowed",
237
+ const buttonClasses = tailwindMerge.twMerge(
238
+ baseClasses,
239
+ stateClasses[disabled ? "disabled" : "enabled"],
186
240
  className
187
241
  );
188
242
  return /* @__PURE__ */ jsxRuntime.jsx(
189
243
  "button",
190
244
  __spreadProps(__spreadValues({
245
+ "data-slot": "secondary-button",
246
+ "data-test-id": "secondary-button",
247
+ "aria-label": "secondary action",
191
248
  type,
192
- className: containerClasses,
249
+ className: buttonClasses,
193
250
  disabled
194
251
  }, props), {
195
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.inner, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.text, children }) })
252
+ children
196
253
  })
197
254
  );
198
255
  }
@@ -208,34 +265,49 @@ function TertiaryButton(_a) {
208
265
  "className",
209
266
  "type"
210
267
  ]);
211
- const getStyles = () => {
212
- if (disabled) {
213
- return {
214
- container: "h-12 rounded inline-flex flex-col justify-center items-center gap-2 overflow-hidden",
215
- inner: "self-stretch flex-1 px-6 py-2.5 inline-flex justify-center items-center gap-2",
216
- text: "opacity-state-disabled-content text-center justify-center text-text-disabled dark:text-text-disabled-dark text-sm font-semibold font-poppins leading-5"
217
- };
218
- }
219
- return {
220
- container: "h-12 rounded inline-flex flex-col justify-center items-center gap-2 overflow-hidden hover:shadow-md transition-colors duration-200 cursor-pointer",
221
- inner: "self-stretch flex-1 px-6 py-2.5 inline-flex justify-center items-center gap-2 hover:bg-brand-tint dark:hover:bg-brand-tint-dark focus:bg-brand-tint-75 dark:focus:bg-brand-tint-75-dark active:bg-brand-tint-60 dark:active:bg-brand-tint-60-dark transition-colors duration-200",
222
- text: "text-center justify-center text-brand-primary text-sm font-semibold font-poppins leading-5"
223
- };
268
+ const baseClasses = [
269
+ /** layout */
270
+ "overflow-hidden w-full flex items-center justify-center transition-all duration-200",
271
+ /** typography */
272
+ "font-[var(--deframe-widget-font-family)]",
273
+ "[font-size:var(--deframe-widget-font-size-md)]",
274
+ "[line-height:var(--deframe-widget-font-leading-md)]",
275
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
276
+ /** spacing */
277
+ "px-[var(--deframe-widget-size-padding-x-xl)]",
278
+ "py-[var(--deframe-widget-size-padding-y-md)]",
279
+ /** container */
280
+ "bg-transparent border-none",
281
+ "rounded-[var(--deframe-widget-size-radius-xs)]",
282
+ "gap-[var(--deframe-widget-size-gap-sm)]"
283
+ ].join(" ");
284
+ const stateClasses = {
285
+ enabled: [
286
+ "text-[color:var(--deframe-widget-color-brand-tertiary)]",
287
+ "hover:opacity-90",
288
+ "cursor-pointer"
289
+ ].join(" "),
290
+ disabled: [
291
+ "text-[color:var(--deframe-widget-color-text-tertiary-disabled)]",
292
+ "cursor-not-allowed"
293
+ ].join(" ")
224
294
  };
225
- const styles = getStyles();
226
- const containerClasses = tailwindMerge.twMerge(
227
- styles.container,
228
- disabled && "cursor-not-allowed",
295
+ const buttonClasses = tailwindMerge.twMerge(
296
+ baseClasses,
297
+ stateClasses[disabled ? "disabled" : "enabled"],
229
298
  className
230
299
  );
231
300
  return /* @__PURE__ */ jsxRuntime.jsx(
232
301
  "button",
233
302
  __spreadProps(__spreadValues({
303
+ "data-slot": "tertiary-button",
304
+ "data-test-id": "tertiary-button",
305
+ "aria-label": "tertiary action",
234
306
  type,
235
- className: containerClasses,
307
+ className: buttonClasses,
236
308
  disabled
237
309
  }, props), {
238
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.inner, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.text, children }) })
310
+ children
239
311
  })
240
312
  );
241
313
  }