@sublimee/auth-ui 0.1.0 → 0.1.12

package/dist/index.mjs

@@ -1,12 +1,14 @@
 // src/oauth-button.tsx
-import { forwardRef, useMemo } from "react";
+import { forwardRef as forwardRef2 } from "react";
+
+// src/base-button.tsx
+import { forwardRef } from "react";
 import { Button } from "@base-ui/react/button";
 
 // src/icons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function getSafeSize(size) {
-  const safeSize = size ?? 24;
-  return Math.max(1, safeSize);
+function getSafeSize(size, defaultSize = 24) {
+  return Math.max(1, size ?? defaultSize);
 }
 function GoogleIcon({ size, className }) {
   const safeSize = getSafeSize(size);
@@ -18,8 +20,8 @@ function GoogleIcon({ size, className }) {
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className,
       "aria-hidden": "true",
+      className,
       children: [
         /* @__PURE__ */ jsx(
           "path",
@@ -63,8 +65,8 @@ function DiscordIcon({ size, className }) {
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className,
       "aria-hidden": "true",
+      className,
       children: /* @__PURE__ */ jsx(
         "path",
         {
@@ -76,51 +78,36 @@ function DiscordIcon({ size, className }) {
   );
 }
 function SpinnerIcon({ size, className }) {
-  const safeSize = size ?? 20;
-  const finalSize = Math.max(1, safeSize);
+  const safeSize = getSafeSize(size, 20);
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      width: finalSize,
-      height: finalSize,
+      width: safeSize,
+      height: safeSize,
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className,
       "aria-hidden": "true",
+      className,
       children: [
         /* @__PURE__ */ jsx(
           "circle",
           {
             cx: "12",
             cy: "12",
-            r: "10",
+            r: "9",
             stroke: "currentColor",
-            strokeWidth: "4",
-            strokeLinecap: "round",
-            strokeDasharray: "60",
-            strokeDashoffset: "20",
-            opacity: "0.25"
+            strokeWidth: "3",
+            opacity: "0.22"
           }
         ),
         /* @__PURE__ */ jsx(
           "path",
           {
-            d: "M12 2C6.477 2 2 6.477 2 12",
+            d: "M12 3a9 9 0 0 1 9 9",
             stroke: "currentColor",
-            strokeWidth: "4",
-            strokeLinecap: "round",
-            children: /* @__PURE__ */ jsx(
-              "animateTransform",
-              {
-                attributeName: "transform",
-                type: "rotate",
-                from: "0 12 12",
-                to: "360 12 12",
-                dur: "1s",
-                repeatCount: "indefinite"
-              }
-            )
+            strokeWidth: "3",
+            strokeLinecap: "round"
           }
         )
       ]
@@ -128,79 +115,463 @@ function SpinnerIcon({ size, className }) {
   );
 }
 
-// src/oauth-button.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var PROVIDER_NAMES = {
-  google: "Google",
-  discord: "Discord"
+// src/button-loading-indicator.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function SpinnerLoadingIndicator({ size }) {
+  return /* @__PURE__ */ jsx2(SpinnerIcon, { size, className: "sublime-button__spinner" });
+}
+var LOADING_INDICATORS = {
+  spinner: SpinnerLoadingIndicator
 };
-function getProviderIcon(provider) {
-  switch (provider) {
-    case "google":
-      return GoogleIcon;
-    case "discord":
-      return DiscordIcon;
-    default:
-      return () => null;
-  }
+function ButtonLoadingIndicator({
+  animation = "spinner",
+  size = 18
+}) {
+  const LoadingIndicator = LOADING_INDICATORS[animation];
+  return /* @__PURE__ */ jsx2(LoadingIndicator, { size });
 }
-var SENSIBLE_DEFAULTS = ["cursor-pointer"];
-function mergeButtonClasses(userClassName, isDisabled) {
-  const userClasses = userClassName?.trim() ?? "";
-  const neededDefaults = SENSIBLE_DEFAULTS.filter(
-    (defaultClass) => !userClasses.includes(defaultClass)
+
+// src/use-button-animation.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var PRESS_RELEASE_DURATION = 180;
+function useButtonAnimation(animation = "press") {
+  const [phase, setPhase] = useState("idle");
+  const timeoutRef = useRef(null);
+  const clearExistingTimeout = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  useEffect(() => {
+    return () => {
+      clearExistingTimeout();
+    };
+  }, [clearExistingTimeout]);
+  const handlePressStart = useCallback(() => {
+    if (!animation) {
+      return;
+    }
+    clearExistingTimeout();
+    setPhase("pressed");
+  }, [animation, clearExistingTimeout]);
+  const handlePressEnd = useCallback(() => {
+    if (!animation || phase !== "pressed") {
+      return;
+    }
+    setPhase("releasing");
+    timeoutRef.current = setTimeout(() => {
+      setPhase("idle");
+    }, PRESS_RELEASE_DURATION);
+  }, [animation, phase]);
+  const handleBlur = useCallback(() => {
+    clearExistingTimeout();
+    setPhase("idle");
+  }, [clearExistingTimeout]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.repeat) {
+        return;
+      }
+      if (event.key === " " || event.key === "Enter") {
+        handlePressStart();
+      }
+    },
+    [handlePressStart]
+  );
+  const handleKeyUp = useCallback(
+    (event) => {
+      if (event.key === " " || event.key === "Enter") {
+        handlePressEnd();
+      }
+    },
+    [handlePressEnd]
   );
-  if (isDisabled && !userClasses.includes("cursor-not-allowed")) {
-    neededDefaults.push("cursor-not-allowed");
+  const getAnimationClass = () => {
+    if (!animation) {
+      return "";
+    }
+    if (phase === "pressed") {
+      return "sublime-button-pressed";
+    }
+    if (phase === "releasing") {
+      return "animate-sublime-button-press-release";
+    }
+    return "";
+  };
+  return {
+    animationClassName: getAnimationClass(),
+    eventHandlers: {
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      onMouseDown: handlePressStart,
+      onMouseLeave: handlePressEnd,
+      onMouseUp: handlePressEnd,
+      onTouchEnd: handlePressEnd,
+      onTouchStart: handlePressStart
+    }
+  };
+}
+
+// src/runtime-styles.ts
+import { useInsertionEffect } from "react";
+var AUTH_UI_RUNTIME_STYLE_ID = "sublime-auth-ui-runtime-styles";
+var AUTH_UI_RUNTIME_STYLES = `
+.sublime-button {
+  --sublime-button-gap: var(--sublime-space-3, 0.75rem);
+  --sublime-button-padding-x: var(--sublime-space-button-x, 1rem);
+  --sublime-button-padding-y: var(--sublime-space-button-y, 0.75rem);
+  --sublime-button-height: var(--sublime-size-button-height-md, 2.75rem);
+  --sublime-button-radius: var(--sublime-radius-button, 0.875rem);
+  --sublime-button-font-family: var(--sublime-font-family-sans, ui-sans-serif, system-ui, sans-serif);
+  --sublime-button-font-size: var(--sublime-font-size-sm, 0.875rem);
+  --sublime-button-font-weight: var(--sublime-font-weight-medium, 500);
+  --sublime-button-line-height: var(--sublime-line-height-tight, 1.15);
+  --sublime-button-visual-size: 1.25rem;
+  --sublime-button-transition: var(--sublime-transition-button, background-color 160ms cubic-bezier(0.4, 0, 0.2, 1), border-color 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 160ms cubic-bezier(0.4, 0, 0.2, 1), color 160ms cubic-bezier(0.4, 0, 0.2, 1), transform 160ms cubic-bezier(0.4, 0, 0.2, 1));
+  --sublime-button-bg: var(--sublime-color-surface-1, #ffffff);
+  --sublime-button-bg-hover: var(--sublime-color-surface-1-hover, #f8fafc);
+  --sublime-button-bg-active: var(--sublime-color-surface-1-active, #eef2f7);
+  --sublime-button-color: var(--sublime-color-text-primary, #111827);
+  --sublime-button-color-hover: var(--sublime-color-text-primary, #111827);
+  --sublime-button-border: var(--sublime-color-border-primary, #d1d5db);
+  --sublime-button-border-hover: var(--sublime-color-border-primary-hover, #9ca3af);
+  --sublime-button-border-active: var(--sublime-color-border-primary-active, #6b7280);
+  --sublime-button-shadow: var(--sublime-shadow-button, 0 1px 2px rgb(15 23 42 / 0.08));
+  --sublime-button-shadow-hover: var(--sublime-shadow-button-hover, 0 8px 20px rgb(15 23 42 / 0.12));
+  --sublime-button-shadow-active: var(--sublime-shadow-button-active, inset 0 1px 2px rgb(15 23 42 / 0.14));
+  --sublime-button-focus-ring: var(--sublime-color-focus-ring, var(--sublime-color-interactive-accent, #2563eb));
+  --sublime-button-focus-ring-offset: var(--sublime-color-focus-ring-offset, var(--sublime-color-surface-0, #ffffff));
+  position: relative;
+  display: inline-flex;
+  min-height: var(--sublime-button-height);
+  align-items: center;
+  justify-content: center;
+  gap: var(--sublime-button-gap);
+  padding: var(--sublime-button-padding-y) var(--sublime-button-padding-x);
+  border: 1px solid var(--sublime-button-border);
+  border-radius: var(--sublime-button-radius);
+  background: var(--sublime-button-bg);
+  color: var(--sublime-button-color);
+  box-shadow: var(--sublime-button-shadow);
+  font-family: var(--sublime-button-font-family);
+  font-size: var(--sublime-button-font-size);
+  font-weight: var(--sublime-button-font-weight);
+  line-height: var(--sublime-button-line-height);
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  isolation: isolate;
+  overflow: hidden;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: var(--sublime-button-transition);
+}
+
+.sublime-button:hover:not(:disabled) {
+  background: var(--sublime-button-bg-hover);
+  color: var(--sublime-button-color-hover);
+  border-color: var(--sublime-button-border-hover);
+  box-shadow: var(--sublime-button-shadow-hover);
+}
+
+.sublime-button:active:not(:disabled) {
+  background: var(--sublime-button-bg-active);
+  border-color: var(--sublime-button-border-active);
+  box-shadow: var(--sublime-button-shadow-active);
+}
+
+.sublime-button:focus {
+  outline: none;
+}
+
+.sublime-button:focus-visible {
+  box-shadow:
+    0 0 0 2px var(--sublime-button-focus-ring-offset),
+    0 0 0 4px var(--sublime-button-focus-ring),
+    var(--sublime-button-shadow-hover);
+}
+
+.sublime-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  box-shadow: none;
+}
+
+.sublime-button[data-loading='true'] {
+  cursor: progress;
+}
+
+.sublime-button[data-loading='true']:disabled {
+  opacity: 0.78;
+}
+
+.sublime-button[data-icon-only='true'] {
+  min-width: var(--sublime-button-height);
+  padding-inline: calc(var(--sublime-button-padding-y) + 0.125rem);
+}
+
+.sublime-button__content {
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: inherit;
+}
+
+.sublime-button__visual,
+.sublime-button__label {
+  display: inline-flex;
+  align-items: center;
+}
+
+.sublime-button__visual {
+  flex-shrink: 0;
+  justify-content: center;
+  min-width: var(--sublime-button-visual-size);
+}
+
+.sublime-button__visual svg {
+  display: block;
+}
+
+.sublime-button__label {
+  min-width: 0;
+}
+
+.sublime-button--primary {
+  --sublime-button-bg: var(--sublime-color-interactive-primary, #111827);
+  --sublime-button-bg-hover: var(--sublime-color-interactive-primary-hover, #1f2937);
+  --sublime-button-bg-active: var(--sublime-color-interactive-primary-active, #0f172a);
+  --sublime-button-color: var(--sublime-color-interactive-primary-text, #f9fafb);
+  --sublime-button-color-hover: var(--sublime-color-interactive-primary-text, #f9fafb);
+  --sublime-button-border: var(--sublime-color-interactive-primary, #111827);
+  --sublime-button-border-hover: var(--sublime-color-interactive-primary-hover, #1f2937);
+  --sublime-button-border-active: var(--sublime-color-interactive-primary-active, #0f172a);
+}
+
+.sublime-button--secondary {
+  --sublime-button-bg: var(--sublime-color-surface-1, #ffffff);
+  --sublime-button-bg-hover: var(--sublime-color-surface-1-hover, #f8fafc);
+  --sublime-button-bg-active: var(--sublime-color-surface-1-active, #eef2f7);
+  --sublime-button-color: var(--sublime-color-text-primary, #111827);
+  --sublime-button-color-hover: var(--sublime-color-text-primary, #111827);
+  --sublime-button-border: var(--sublime-color-border-primary, #d1d5db);
+  --sublime-button-border-hover: var(--sublime-color-border-primary-hover, #9ca3af);
+  --sublime-button-border-active: var(--sublime-color-border-primary-active, #6b7280);
+}
+
+.sublime-auth-button[data-provider='discord'] .sublime-button__visual {
+  color: #5865f2;
+}
+
+.sublime-auth-button[data-loading='true'] .sublime-button__visual {
+  color: currentColor;
+}
+
+@keyframes sublime-button-press-release {
+  0% {
+    transform: translateY(1px) scale(0.985);
+    box-shadow: var(--sublime-button-shadow-active);
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    box-shadow: var(--sublime-button-shadow);
+  }
+}
+
+@keyframes sublime-button-spinner {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.sublime-button-pressed {
+  transform: translateY(1px) scale(0.985);
+  box-shadow: var(--sublime-button-shadow-active);
+}
+
+.animate-sublime-button-press-release {
+  animation: sublime-button-press-release 180ms var(--sublime-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+.sublime-button__spinner {
+  animation: sublime-button-spinner 720ms linear infinite;
+  transform-origin: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sublime-button,
+  .animate-sublime-button-press-release {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .sublime-button__spinner {
+    animation-duration: 1.6s !important;
   }
-  if (neededDefaults.length === 0) {
-    return userClasses;
+}
+`;
+function useAuthUiRuntimeStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    if (document.getElementById(AUTH_UI_RUNTIME_STYLE_ID)) {
+      return;
+    }
+    const styleElement = document.createElement("style");
+    styleElement.id = AUTH_UI_RUNTIME_STYLE_ID;
+    styleElement.textContent = AUTH_UI_RUNTIME_STYLES;
+    document.head.prepend(styleElement);
+  }, []);
+}
+
+// src/base-button.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function mergeClassNames(...classNames) {
+  return classNames.filter(Boolean).join(" ");
+}
+function composeEventHandlers(internalHandler, externalHandler) {
+  if (!internalHandler) {
+    return externalHandler;
+  }
+  if (!externalHandler) {
+    return internalHandler;
+  }
+  return (event) => {
+    internalHandler(event);
+    externalHandler(event);
+  };
+}
+var BaseButton = forwardRef(
+  function BaseButton2(props, forwardedRef) {
+    const {
+      animation = "press",
+      "aria-busy": ariaBusy,
+      children,
+      className,
+      disabled = false,
+      isIconOnly = false,
+      leadingVisual,
+      loading = false,
+      loadingAnimation = "spinner",
+      type = "button",
+      variant = "secondary",
+      onBlur,
+      onKeyDown,
+      onKeyUp,
+      onMouseDown,
+      onMouseLeave,
+      onMouseUp,
+      onTouchEnd,
+      onTouchStart,
+      ...otherProps
+    } = props;
+    useAuthUiRuntimeStyles();
+    const { animationClassName, eventHandlers } = useButtonAnimation(
+      disabled || loading ? null : animation
+    );
+    const mergedClassName = mergeClassNames(
+      "sublime-button",
+      `sublime-button--${variant}`,
+      animationClassName,
+      className
+    );
+    const visualContent = loading ? /* @__PURE__ */ jsx3(ButtonLoadingIndicator, { animation: loadingAnimation, size: 18 }) : leadingVisual ?? (isIconOnly ? children : void 0);
+    const labelContent = isIconOnly ? null : children;
+    return /* @__PURE__ */ jsx3(
+      Button,
+      {
+        ref: forwardedRef,
+        type,
+        disabled: disabled || loading,
+        className: mergedClassName,
+        "data-icon-only": isIconOnly ? "true" : void 0,
+        "data-loading": loading ? "true" : void 0,
+        "aria-busy": loading ? true : ariaBusy,
+        ...otherProps,
+        onBlur: composeEventHandlers(eventHandlers.onBlur, onBlur),
+        onKeyDown: composeEventHandlers(eventHandlers.onKeyDown, onKeyDown),
+        onKeyUp: composeEventHandlers(eventHandlers.onKeyUp, onKeyUp),
+        onMouseDown: composeEventHandlers(eventHandlers.onMouseDown, onMouseDown),
+        onMouseLeave: composeEventHandlers(eventHandlers.onMouseLeave, onMouseLeave),
+        onMouseUp: composeEventHandlers(eventHandlers.onMouseUp, onMouseUp),
+        onTouchEnd: composeEventHandlers(eventHandlers.onTouchEnd, onTouchEnd),
+        onTouchStart: composeEventHandlers(eventHandlers.onTouchStart, onTouchStart),
+        children: /* @__PURE__ */ jsxs2("span", { className: "sublime-button__content", children: [
+          visualContent ? /* @__PURE__ */ jsx3("span", { className: "sublime-button__visual", children: visualContent }) : null,
+          labelContent !== null && labelContent !== void 0 ? /* @__PURE__ */ jsx3("span", { className: "sublime-button__label", children: labelContent }) : null
+        ] })
+      }
+    );
   }
-  return `${neededDefaults.join(" ")} ${userClasses}`.trim();
+);
+
+// src/oauth-button.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var PROVIDER_NAMES = {
+  google: "Google",
+  discord: "Discord"
+};
+var PROVIDER_ICONS = {
+  google: GoogleIcon,
+  discord: DiscordIcon
+};
+function mergeClassNames2(...classNames) {
+  return classNames.filter(Boolean).join(" ");
 }
-var OAuthButton = forwardRef(
+var OAuthButton = forwardRef2(
   function OAuthButton2(props, forwardedRef) {
     const {
+      "aria-label": ariaLabel,
       provider,
       onClick,
       loading = false,
+      loadingAnimation = "spinner",
+      disabled = false,
+      variant = "secondary",
+      animation = "press",
       className,
       children,
-      disabled = false,
       ...otherProps
     } = props;
-    const isDisabled = disabled || loading;
-    const Icon = getProviderIcon(provider);
+    const isIconOnly = children === null;
+    const Icon = PROVIDER_ICONS[provider];
     const defaultText = `Continuar con ${PROVIDER_NAMES[provider]}`;
-    const mergedClassName = useMemo(
-      () => mergeButtonClasses(className, isDisabled),
-      [className, isDisabled]
-    );
-    return /* @__PURE__ */ jsx2(
-      Button,
+    const buttonLabel = loading ? children ?? "Conectando..." : children ?? defaultText;
+    const resolvedAriaLabel = ariaLabel ?? (isIconOnly ? defaultText : void 0);
+    return /* @__PURE__ */ jsx4(
+      BaseButton,
       {
         ref: forwardedRef,
         onClick,
-        disabled: isDisabled,
-        "aria-busy": loading,
-        className: mergedClassName,
+        disabled,
+        animation,
+        variant,
+        loading,
+        loadingAnimation,
+        isIconOnly,
+        leadingVisual: /* @__PURE__ */ jsx4(Icon, { size: 20 }),
+        className: mergeClassNames2("sublime-auth-button", className),
+        "data-provider": provider,
+        "aria-label": resolvedAriaLabel,
         ...otherProps,
-        children: loading ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2(SpinnerIcon, {}),
-          children !== null && /* @__PURE__ */ jsx2("span", { children: children ?? "Conectando..." })
-        ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2(Icon, {}),
-          children !== null && /* @__PURE__ */ jsx2("span", { children: children ?? defaultText })
-        ] })
+        children: buttonLabel
       }
     );
   }
 );
-var oauth_button_default = OAuthButton;
 export {
   DiscordIcon,
   GoogleIcon,
   OAuthButton,
-  SpinnerIcon,
-  oauth_button_default as default
+  useButtonAnimation
 };

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@sublimee/auth-ui",
-  "version": "0.1.0",
-  "description": "Headless authentication UI components for Sublime",
+  "version": "0.1.12",
+  "description": "Production-ready authentication UI components for Sublime",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "src",
+    "AI_INDEX.md"
   ],
   "exports": {
     ".": {
@@ -15,6 +16,7 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
+    "./animations.css": "./dist/animations.css",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -31,14 +33,15 @@
     "oauth",
     "ui",
     "components",
-    "headless",
+    "semantic",
     "base-ui"
   ],
   "author": "Sublime Team",
   "license": "MIT",
   "peerDependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "@sublimee/tokens": "0.1.10"
   },
   "dependencies": {
     "@base-ui/react": "^1.0.0"
@@ -50,7 +53,7 @@
     "typescript": "^5"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean && cp src/animations.css dist/animations.css",
     "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
     "typecheck": "tsc --noEmit"
   }