@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.mjs CHANGED
@@ -119,11 +119,50 @@ function PrimaryButton(_a) {
119
119
  "className",
120
120
  "type"
121
121
  ]);
122
- 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";
123
- const buttonClasses = twMerge(baseStyles, className);
122
+ const baseClasses = [
123
+ /** layout */
124
+ "overflow-hidden w-full flex items-center justify-center transition-all duration-200",
125
+ /** typography */
126
+ "font-[var(--deframe-widget-font-family)]",
127
+ "[font-size:var(--deframe-widget-font-size-md)]",
128
+ "[line-height:var(--deframe-widget-font-leading-md)]",
129
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
130
+ /** spacing */
131
+ "px-[var(--deframe-widget-size-padding-x-xl)]",
132
+ "py-[var(--deframe-widget-size-padding-y-md)]",
133
+ /** container */
134
+ "rounded-[var(--deframe-widget-size-radius-xs)]",
135
+ "border-solid border-[length:var(--deframe-widget-size-border-xs)]",
136
+ "gap-[var(--deframe-widget-size-gap-sm)]"
137
+ ].join(" ");
138
+ const stateClasses = {
139
+ /** enabled state */
140
+ enabled: [
141
+ "hover:opacity-90",
142
+ "text-[var(--deframe-widget-color-text-primary)]",
143
+ "bg-[var(--deframe-widget-color-brand-primary)]",
144
+ "border-[color:var(--deframe-widget-color-border-primary)]",
145
+ "cursor-pointer"
146
+ ].join(" "),
147
+ /** disabled state */
148
+ disabled: [
149
+ "text-[var(--deframe-widget-color-text-primary-disabled)]",
150
+ "bg-[var(--deframe-widget-color-brand-primary-disabled)]",
151
+ "border-[color:var(--deframe-widget-color-border-primary-disabled)]",
152
+ "cursor-not-allowed"
153
+ ].join(" ")
154
+ };
155
+ const buttonClasses = twMerge(
156
+ baseClasses,
157
+ stateClasses[disabled ? "disabled" : "enabled"],
158
+ className
159
+ );
124
160
  return /* @__PURE__ */ jsx(
125
161
  "button",
126
162
  __spreadProps(__spreadValues({
163
+ "data-slot": "primary-button",
164
+ "data-test-id": "primary-button",
165
+ "aria-label": "primary action",
127
166
  type,
128
167
  className: buttonClasses,
129
168
  disabled
@@ -144,34 +183,52 @@ function SecondaryButton(_a) {
144
183
  "className",
145
184
  "type"
146
185
  ]);
147
- const getStyles = () => {
148
- if (disabled) {
149
- return {
150
- 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",
151
- inner: "self-stretch flex-1 px-6 py-2.5 inline-flex justify-center items-center gap-2",
152
- 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"
153
- };
154
- }
155
- return {
156
- 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",
157
- 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",
158
- text: "text-center justify-center text-brand-primary text-sm font-semibold font-poppins leading-5"
159
- };
186
+ const baseClasses = [
187
+ /** layout */
188
+ "overflow-hidden w-full flex items-center justify-center transition-all duration-200",
189
+ /** typography */
190
+ "font-[var(--deframe-widget-font-family)]",
191
+ "[font-size:var(--deframe-widget-font-size-md)]",
192
+ "[line-height:var(--deframe-widget-font-leading-md)]",
193
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
194
+ /** spacing */
195
+ "px-[var(--deframe-widget-size-padding-x-xl)]",
196
+ "py-[var(--deframe-widget-size-padding-y-md)]",
197
+ /** container */
198
+ "bg-transparent",
199
+ "rounded-[var(--deframe-widget-size-radius-xs)]",
200
+ "border-solid border-[length:var(--deframe-widget-size-border-xs)]",
201
+ "gap-[var(--deframe-widget-size-gap-sm)]"
202
+ ].join(" ");
203
+ const stateClasses = {
204
+ enabled: [
205
+ "text-[color:var(--deframe-widget-color-brand-secondary)]",
206
+ "border-[color:var(--deframe-widget-color-border-secondary)]",
207
+ "hover:opacity-90",
208
+ "cursor-pointer"
209
+ ].join(" "),
210
+ disabled: [
211
+ "text-[color:var(--deframe-widget-color-text-secondary-disabled)]",
212
+ "border-[color:var(--deframe-widget-color-border-secondary-disabled)]",
213
+ "cursor-not-allowed"
214
+ ].join(" ")
160
215
  };
161
- const styles = getStyles();
162
- const containerClasses = twMerge(
163
- styles.container,
164
- disabled && "cursor-not-allowed",
216
+ const buttonClasses = twMerge(
217
+ baseClasses,
218
+ stateClasses[disabled ? "disabled" : "enabled"],
165
219
  className
166
220
  );
167
221
  return /* @__PURE__ */ jsx(
168
222
  "button",
169
223
  __spreadProps(__spreadValues({
224
+ "data-slot": "secondary-button",
225
+ "data-test-id": "secondary-button",
226
+ "aria-label": "secondary action",
170
227
  type,
171
- className: containerClasses,
228
+ className: buttonClasses,
172
229
  disabled
173
230
  }, props), {
174
- children: /* @__PURE__ */ jsx("div", { className: styles.inner, children: /* @__PURE__ */ jsx("div", { className: styles.text, children }) })
231
+ children
175
232
  })
176
233
  );
177
234
  }
@@ -187,34 +244,49 @@ function TertiaryButton(_a) {
187
244
  "className",
188
245
  "type"
189
246
  ]);
190
- const getStyles = () => {
191
- if (disabled) {
192
- return {
193
- container: "h-12 rounded inline-flex flex-col justify-center items-center gap-2 overflow-hidden",
194
- inner: "self-stretch flex-1 px-6 py-2.5 inline-flex justify-center items-center gap-2",
195
- 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"
196
- };
197
- }
198
- return {
199
- 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",
200
- 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",
201
- text: "text-center justify-center text-brand-primary text-sm font-semibold font-poppins leading-5"
202
- };
247
+ const baseClasses = [
248
+ /** layout */
249
+ "overflow-hidden w-full flex items-center justify-center transition-all duration-200",
250
+ /** typography */
251
+ "font-[var(--deframe-widget-font-family)]",
252
+ "[font-size:var(--deframe-widget-font-size-md)]",
253
+ "[line-height:var(--deframe-widget-font-leading-md)]",
254
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
255
+ /** spacing */
256
+ "px-[var(--deframe-widget-size-padding-x-xl)]",
257
+ "py-[var(--deframe-widget-size-padding-y-md)]",
258
+ /** container */
259
+ "bg-transparent border-none",
260
+ "rounded-[var(--deframe-widget-size-radius-xs)]",
261
+ "gap-[var(--deframe-widget-size-gap-sm)]"
262
+ ].join(" ");
263
+ const stateClasses = {
264
+ enabled: [
265
+ "text-[color:var(--deframe-widget-color-brand-tertiary)]",
266
+ "hover:opacity-90",
267
+ "cursor-pointer"
268
+ ].join(" "),
269
+ disabled: [
270
+ "text-[color:var(--deframe-widget-color-text-tertiary-disabled)]",
271
+ "cursor-not-allowed"
272
+ ].join(" ")
203
273
  };
204
- const styles = getStyles();
205
- const containerClasses = twMerge(
206
- styles.container,
207
- disabled && "cursor-not-allowed",
274
+ const buttonClasses = twMerge(
275
+ baseClasses,
276
+ stateClasses[disabled ? "disabled" : "enabled"],
208
277
  className
209
278
  );
210
279
  return /* @__PURE__ */ jsx(
211
280
  "button",
212
281
  __spreadProps(__spreadValues({
282
+ "data-slot": "tertiary-button",
283
+ "data-test-id": "tertiary-button",
284
+ "aria-label": "tertiary action",
213
285
  type,
214
- className: containerClasses,
286
+ className: buttonClasses,
215
287
  disabled
216
288
  }, props), {
217
- children: /* @__PURE__ */ jsx("div", { className: styles.inner, children: /* @__PURE__ */ jsx("div", { className: styles.text, children }) })
289
+ children
218
290
  })
219
291
  );
220
292
  }