@sublimee/auth-ui 0.1.14 → 0.1.16

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 (5) hide show
  1. package/dist/index.js +38 -40
  2. package/dist/index.mjs +40 -42
  3. package/package.json +2 -2
  4. package/src/base-button.tsx +32 -31
  5. package/src/runtime-styles.ts +12 -18
package/dist/index.js CHANGED
@@ -246,7 +246,7 @@ function useButtonAnimation(animation = "press") {
246
246
 
247
247
  // src/runtime-styles.ts
248
248
  var import_react2 = require("react");
249
- var AUTH_UI_RUNTIME_STYLE_ID = "sublime-auth-ui-runtime-styles";
249
+ var AUTH_UI_RUNTIME_STYLE_HREF = "sublime-auth-ui-runtime-styles";
250
250
  var AUTH_UI_RUNTIME_STYLES = `
251
251
  .sublime-button {
252
252
  --sublime-button-gap: var(--sublime-space-3, 0.75rem);
@@ -506,19 +506,15 @@ var AUTH_UI_RUNTIME_STYLES = `
506
506
  }
507
507
  }
508
508
  `;
509
- function useAuthUiRuntimeStyles() {
510
- (0, import_react2.useInsertionEffect)(() => {
511
- if (typeof document === "undefined") {
512
- return;
513
- }
514
- if (document.getElementById(AUTH_UI_RUNTIME_STYLE_ID)) {
515
- return;
516
- }
517
- const styleElement = document.createElement("style");
518
- styleElement.id = AUTH_UI_RUNTIME_STYLE_ID;
519
- styleElement.textContent = AUTH_UI_RUNTIME_STYLES;
520
- document.head.prepend(styleElement);
521
- }, []);
509
+ function AuthUiRuntimeStyles() {
510
+ return (0, import_react2.createElement)(
511
+ "style",
512
+ {
513
+ href: AUTH_UI_RUNTIME_STYLE_HREF,
514
+ precedence: "medium"
515
+ },
516
+ AUTH_UI_RUNTIME_STYLES
517
+ );
522
518
  }
523
519
 
524
520
  // src/base-button.tsx
@@ -562,7 +558,6 @@ var BaseButton = (0, import_react3.forwardRef)(
562
558
  onTouchStart,
563
559
  ...otherProps
564
560
  } = props;
565
- useAuthUiRuntimeStyles();
566
561
  const { animationClassName, eventHandlers } = useButtonAnimation(
567
562
  disabled || loading ? null : animation
568
563
  );
@@ -574,31 +569,34 @@ var BaseButton = (0, import_react3.forwardRef)(
574
569
  );
575
570
  const visualContent = loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonLoadingIndicator, { animation: loadingAnimation, size: 18 }) : leadingVisual ?? (isIconOnly ? children : void 0);
576
571
  const labelContent = isIconOnly ? null : children;
577
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
578
- import_button.Button,
579
- {
580
- ref: forwardedRef,
581
- type,
582
- disabled: disabled || loading,
583
- className: mergedClassName,
584
- "data-icon-only": isIconOnly ? "true" : void 0,
585
- "data-loading": loading ? "true" : void 0,
586
- "aria-busy": loading ? true : ariaBusy,
587
- ...otherProps,
588
- onBlur: composeEventHandlers(eventHandlers.onBlur, onBlur),
589
- onKeyDown: composeEventHandlers(eventHandlers.onKeyDown, onKeyDown),
590
- onKeyUp: composeEventHandlers(eventHandlers.onKeyUp, onKeyUp),
591
- onMouseDown: composeEventHandlers(eventHandlers.onMouseDown, onMouseDown),
592
- onMouseLeave: composeEventHandlers(eventHandlers.onMouseLeave, onMouseLeave),
593
- onMouseUp: composeEventHandlers(eventHandlers.onMouseUp, onMouseUp),
594
- onTouchEnd: composeEventHandlers(eventHandlers.onTouchEnd, onTouchEnd),
595
- onTouchStart: composeEventHandlers(eventHandlers.onTouchStart, onTouchStart),
596
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "sublime-button__content", children: [
597
- visualContent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sublime-button__visual", children: visualContent }) : null,
598
- labelContent !== null && labelContent !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sublime-button__label", children: labelContent }) : null
599
- ] })
600
- }
601
- );
572
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
573
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AuthUiRuntimeStyles, {}),
574
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
575
+ import_button.Button,
576
+ {
577
+ ref: forwardedRef,
578
+ type,
579
+ disabled: disabled || loading,
580
+ className: mergedClassName,
581
+ "data-icon-only": isIconOnly ? "true" : void 0,
582
+ "data-loading": loading ? "true" : void 0,
583
+ "aria-busy": loading ? true : ariaBusy,
584
+ ...otherProps,
585
+ onBlur: composeEventHandlers(eventHandlers.onBlur, onBlur),
586
+ onKeyDown: composeEventHandlers(eventHandlers.onKeyDown, onKeyDown),
587
+ onKeyUp: composeEventHandlers(eventHandlers.onKeyUp, onKeyUp),
588
+ onMouseDown: composeEventHandlers(eventHandlers.onMouseDown, onMouseDown),
589
+ onMouseLeave: composeEventHandlers(eventHandlers.onMouseLeave, onMouseLeave),
590
+ onMouseUp: composeEventHandlers(eventHandlers.onMouseUp, onMouseUp),
591
+ onTouchEnd: composeEventHandlers(eventHandlers.onTouchEnd, onTouchEnd),
592
+ onTouchStart: composeEventHandlers(eventHandlers.onTouchStart, onTouchStart),
593
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "sublime-button__content", children: [
594
+ visualContent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sublime-button__visual", children: visualContent }) : null,
595
+ labelContent !== null && labelContent !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sublime-button__label", children: labelContent }) : null
596
+ ] })
597
+ }
598
+ )
599
+ ] });
602
600
  }
603
601
  );
604
602
 
package/dist/index.mjs CHANGED
@@ -217,8 +217,8 @@ function useButtonAnimation(animation = "press") {
217
217
  }
218
218
 
219
219
  // src/runtime-styles.ts
220
- import { useInsertionEffect } from "react";
221
- var AUTH_UI_RUNTIME_STYLE_ID = "sublime-auth-ui-runtime-styles";
220
+ import { createElement } from "react";
221
+ var AUTH_UI_RUNTIME_STYLE_HREF = "sublime-auth-ui-runtime-styles";
222
222
  var AUTH_UI_RUNTIME_STYLES = `
223
223
  .sublime-button {
224
224
  --sublime-button-gap: var(--sublime-space-3, 0.75rem);
@@ -478,23 +478,19 @@ var AUTH_UI_RUNTIME_STYLES = `
478
478
  }
479
479
  }
480
480
  `;
481
- function useAuthUiRuntimeStyles() {
482
- useInsertionEffect(() => {
483
- if (typeof document === "undefined") {
484
- return;
485
- }
486
- if (document.getElementById(AUTH_UI_RUNTIME_STYLE_ID)) {
487
- return;
488
- }
489
- const styleElement = document.createElement("style");
490
- styleElement.id = AUTH_UI_RUNTIME_STYLE_ID;
491
- styleElement.textContent = AUTH_UI_RUNTIME_STYLES;
492
- document.head.prepend(styleElement);
493
- }, []);
481
+ function AuthUiRuntimeStyles() {
482
+ return createElement(
483
+ "style",
484
+ {
485
+ href: AUTH_UI_RUNTIME_STYLE_HREF,
486
+ precedence: "medium"
487
+ },
488
+ AUTH_UI_RUNTIME_STYLES
489
+ );
494
490
  }
495
491
 
496
492
  // src/base-button.tsx
497
- import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
493
+ import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
498
494
  function mergeClassNames(...classNames) {
499
495
  return classNames.filter(Boolean).join(" ");
500
496
  }
@@ -534,7 +530,6 @@ var BaseButton = forwardRef(
534
530
  onTouchStart,
535
531
  ...otherProps
536
532
  } = props;
537
- useAuthUiRuntimeStyles();
538
533
  const { animationClassName, eventHandlers } = useButtonAnimation(
539
534
  disabled || loading ? null : animation
540
535
  );
@@ -546,31 +541,34 @@ var BaseButton = forwardRef(
546
541
  );
547
542
  const visualContent = loading ? /* @__PURE__ */ jsx3(ButtonLoadingIndicator, { animation: loadingAnimation, size: 18 }) : leadingVisual ?? (isIconOnly ? children : void 0);
548
543
  const labelContent = isIconOnly ? null : children;
549
- return /* @__PURE__ */ jsx3(
550
- Button,
551
- {
552
- ref: forwardedRef,
553
- type,
554
- disabled: disabled || loading,
555
- className: mergedClassName,
556
- "data-icon-only": isIconOnly ? "true" : void 0,
557
- "data-loading": loading ? "true" : void 0,
558
- "aria-busy": loading ? true : ariaBusy,
559
- ...otherProps,
560
- onBlur: composeEventHandlers(eventHandlers.onBlur, onBlur),
561
- onKeyDown: composeEventHandlers(eventHandlers.onKeyDown, onKeyDown),
562
- onKeyUp: composeEventHandlers(eventHandlers.onKeyUp, onKeyUp),
563
- onMouseDown: composeEventHandlers(eventHandlers.onMouseDown, onMouseDown),
564
- onMouseLeave: composeEventHandlers(eventHandlers.onMouseLeave, onMouseLeave),
565
- onMouseUp: composeEventHandlers(eventHandlers.onMouseUp, onMouseUp),
566
- onTouchEnd: composeEventHandlers(eventHandlers.onTouchEnd, onTouchEnd),
567
- onTouchStart: composeEventHandlers(eventHandlers.onTouchStart, onTouchStart),
568
- children: /* @__PURE__ */ jsxs2("span", { className: "sublime-button__content", children: [
569
- visualContent ? /* @__PURE__ */ jsx3("span", { className: "sublime-button__visual", children: visualContent }) : null,
570
- labelContent !== null && labelContent !== void 0 ? /* @__PURE__ */ jsx3("span", { className: "sublime-button__label", children: labelContent }) : null
571
- ] })
572
- }
573
- );
544
+ return /* @__PURE__ */ jsxs2(Fragment, { children: [
545
+ /* @__PURE__ */ jsx3(AuthUiRuntimeStyles, {}),
546
+ /* @__PURE__ */ jsx3(
547
+ Button,
548
+ {
549
+ ref: forwardedRef,
550
+ type,
551
+ disabled: disabled || loading,
552
+ className: mergedClassName,
553
+ "data-icon-only": isIconOnly ? "true" : void 0,
554
+ "data-loading": loading ? "true" : void 0,
555
+ "aria-busy": loading ? true : ariaBusy,
556
+ ...otherProps,
557
+ onBlur: composeEventHandlers(eventHandlers.onBlur, onBlur),
558
+ onKeyDown: composeEventHandlers(eventHandlers.onKeyDown, onKeyDown),
559
+ onKeyUp: composeEventHandlers(eventHandlers.onKeyUp, onKeyUp),
560
+ onMouseDown: composeEventHandlers(eventHandlers.onMouseDown, onMouseDown),
561
+ onMouseLeave: composeEventHandlers(eventHandlers.onMouseLeave, onMouseLeave),
562
+ onMouseUp: composeEventHandlers(eventHandlers.onMouseUp, onMouseUp),
563
+ onTouchEnd: composeEventHandlers(eventHandlers.onTouchEnd, onTouchEnd),
564
+ onTouchStart: composeEventHandlers(eventHandlers.onTouchStart, onTouchStart),
565
+ children: /* @__PURE__ */ jsxs2("span", { className: "sublime-button__content", children: [
566
+ visualContent ? /* @__PURE__ */ jsx3("span", { className: "sublime-button__visual", children: visualContent }) : null,
567
+ labelContent !== null && labelContent !== void 0 ? /* @__PURE__ */ jsx3("span", { className: "sublime-button__label", children: labelContent }) : null
568
+ ] })
569
+ }
570
+ )
571
+ ] });
574
572
  }
575
573
  );
576
574
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sublimee/auth-ui",
3
- "version": "0.1.14",
3
+ "version": "0.1.16",
4
4
  "description": "Production-ready authentication UI components for Sublime",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -41,7 +41,7 @@
41
41
  "peerDependencies": {
42
42
  "react": "^19.0.0",
43
43
  "react-dom": "^19.0.0",
44
- "@sublimee/tokens": "0.1.12"
44
+ "@sublimee/tokens": "0.1.14"
45
45
  },
46
46
  "peerDependenciesMeta": {
47
47
  "@sublimee/tokens": {
package/src/base-button.tsx CHANGED
@@ -6,7 +6,7 @@ import type { ButtonHTMLAttributes, ReactNode } from 'react';
6
6
 
7
7
  import { ButtonLoadingIndicator } from './button-loading-indicator';
8
8
  import { useButtonAnimation } from './use-button-animation';
9
- import { useAuthUiRuntimeStyles } from './runtime-styles';
9
+ import { AuthUiRuntimeStyles } from './runtime-styles';
10
10
  import type {
11
11
  ButtonAnimation,
12
12
  ButtonLoadingAnimation,
@@ -72,8 +72,6 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
72
72
  ...otherProps
73
73
  } = props;
74
74
 
75
- useAuthUiRuntimeStyles();
76
-
77
75
  const { animationClassName, eventHandlers } = useButtonAnimation(
78
76
  disabled || loading ? null : animation
79
77
  );
@@ -92,33 +90,36 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
92
90
  const labelContent = isIconOnly ? null : children;
93
91
 
94
92
  return (
95
- <Button
96
- ref={forwardedRef}
97
- type={type}
98
- disabled={disabled || loading}
99
- className={mergedClassName}
100
- data-icon-only={isIconOnly ? 'true' : undefined}
101
- data-loading={loading ? 'true' : undefined}
102
- aria-busy={loading ? true : ariaBusy}
103
- {...otherProps}
104
- onBlur={composeEventHandlers(eventHandlers.onBlur, onBlur)}
105
- onKeyDown={composeEventHandlers(eventHandlers.onKeyDown, onKeyDown)}
106
- onKeyUp={composeEventHandlers(eventHandlers.onKeyUp, onKeyUp)}
107
- onMouseDown={composeEventHandlers(eventHandlers.onMouseDown, onMouseDown)}
108
- onMouseLeave={composeEventHandlers(eventHandlers.onMouseLeave, onMouseLeave)}
109
- onMouseUp={composeEventHandlers(eventHandlers.onMouseUp, onMouseUp)}
110
- onTouchEnd={composeEventHandlers(eventHandlers.onTouchEnd, onTouchEnd)}
111
- onTouchStart={composeEventHandlers(eventHandlers.onTouchStart, onTouchStart)}
112
- >
113
- <span className="sublime-button__content">
114
- {visualContent ? (
115
- <span className="sublime-button__visual">{visualContent}</span>
116
- ) : null}
117
- {labelContent !== null && labelContent !== undefined ? (
118
- <span className="sublime-button__label">{labelContent}</span>
119
- ) : null}
120
- </span>
121
- </Button>
93
+ <>
94
+ <AuthUiRuntimeStyles />
95
+ <Button
96
+ ref={forwardedRef}
97
+ type={type}
98
+ disabled={disabled || loading}
99
+ className={mergedClassName}
100
+ data-icon-only={isIconOnly ? 'true' : undefined}
101
+ data-loading={loading ? 'true' : undefined}
102
+ aria-busy={loading ? true : ariaBusy}
103
+ {...otherProps}
104
+ onBlur={composeEventHandlers(eventHandlers.onBlur, onBlur)}
105
+ onKeyDown={composeEventHandlers(eventHandlers.onKeyDown, onKeyDown)}
106
+ onKeyUp={composeEventHandlers(eventHandlers.onKeyUp, onKeyUp)}
107
+ onMouseDown={composeEventHandlers(eventHandlers.onMouseDown, onMouseDown)}
108
+ onMouseLeave={composeEventHandlers(eventHandlers.onMouseLeave, onMouseLeave)}
109
+ onMouseUp={composeEventHandlers(eventHandlers.onMouseUp, onMouseUp)}
110
+ onTouchEnd={composeEventHandlers(eventHandlers.onTouchEnd, onTouchEnd)}
111
+ onTouchStart={composeEventHandlers(eventHandlers.onTouchStart, onTouchStart)}
112
+ >
113
+ <span className="sublime-button__content">
114
+ {visualContent ? (
115
+ <span className="sublime-button__visual">{visualContent}</span>
116
+ ) : null}
117
+ {labelContent !== null && labelContent !== undefined ? (
118
+ <span className="sublime-button__label">{labelContent}</span>
119
+ ) : null}
120
+ </span>
121
+ </Button>
122
+ </>
122
123
  );
123
124
  }
124
- );
125
+ );
package/src/runtime-styles.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  'use client';
2
2
 
3
- import { useInsertionEffect } from 'react';
3
+ import { createElement } from 'react';
4
4
 
5
- const AUTH_UI_RUNTIME_STYLE_ID = 'sublime-auth-ui-runtime-styles';
5
+ const AUTH_UI_RUNTIME_STYLE_HREF = 'sublime-auth-ui-runtime-styles';
6
6
 
7
7
  const AUTH_UI_RUNTIME_STYLES = `
8
8
  .sublime-button {
@@ -264,19 +264,13 @@ const AUTH_UI_RUNTIME_STYLES = `
264
264
  }
265
265
  `;
266
266
 
267
- export function useAuthUiRuntimeStyles() {
268
- useInsertionEffect(() => {
269
- if (typeof document === 'undefined') {
270
- return;
271
- }
272
-
273
- if (document.getElementById(AUTH_UI_RUNTIME_STYLE_ID)) {
274
- return;
275
- }
276
-
277
- const styleElement = document.createElement('style');
278
- styleElement.id = AUTH_UI_RUNTIME_STYLE_ID;
279
- styleElement.textContent = AUTH_UI_RUNTIME_STYLES;
280
- document.head.prepend(styleElement);
281
- }, []);
282
- }
267
+ export function AuthUiRuntimeStyles() {
268
+ return createElement(
269
+ 'style',
270
+ {
271
+ href: AUTH_UI_RUNTIME_STYLE_HREF,
272
+ precedence: 'medium',
273
+ },
274
+ AUTH_UI_RUNTIME_STYLES
275
+ );
276
+ }