@sublimee/auth-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Juan Figueroa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,170 @@
+# @sublimee/auth-ui
+
+Headless authentication UI components for Sublime, built on base-ui primitives.
+
+## Design Philosophy
+
+**"Headless but sensible"**
+
+Our components are built on top of [base-ui](https://base-ui.com/) primitives. This means:
+
+- ✅ **We inherit base-ui's sensible defaults** — cursor-pointer, focus states, keyboard navigation, accessibility
+- ✅ **We DON'T impose visual opinions** — you control 100% of styling via Tailwind `className`
+- ✅ **You get a solid, accessible foundation** that looks exactly how you want
+
+This approach solves recurring UI issues (like missing `cursor: pointer`) once and for all, while preserving complete flexibility over visual design.
+
+## Installation
+
+```bash
+pnpm add @sublimee/auth-ui
+```
+
+## Dependencies
+
+- `@base-ui/react` — Button primitives with sensible defaults
+- `react` ^19.0.0
+- `react-dom` ^19.0.0
+
+## Components
+
+### OAuthButton
+
+A headless OAuth authentication button with Google and Discord provider icons.
+
+```tsx
+import { OAuthButton } from '@sublimee/auth-ui';
+
+// Basic usage — inherits cursor-pointer and focus states from base-ui
+<OAuthButton
+  provider="google"
+  onClick={signInWithGoogle}
+  className="flex items-center gap-3 px-6 py-3 bg-white text-gray-900 rounded-lg font-medium"
+/>
+
+// Outline style
+<OAuthButton
+  provider="discord"
+  onClick={signInWithDiscord}
+  className="flex items-center gap-3 px-6 py-3 border border-white/20 text-white rounded-lg hover:bg-white/5"
+/>
+
+// Icon only — pass {null} as children
+<OAuthButton
+  provider="google"
+  onClick={signInWithGoogle}
+  className="p-3 rounded-full bg-white/10 hover:bg-white/20 transition-colors"
+>
+  {null}
+</OAuthButton>
+
+// Loading state
+<OAuthButton
+  provider="google"
+  loading
+  className="opacity-50"
+/>
+
+// Custom text
+<OAuthButton
+  provider="google"
+  onClick={signInWithGoogle}
+  className="px-6 py-3 bg-blue-600 text-white rounded-lg"
+>
+  Sign in with Google
+</OAuthButton>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `provider` | `'google' \| 'discord'` | required | OAuth provider to authenticate with |
+| `onClick` | `() => void` | - | Click handler |
+| `loading` | `boolean` | `false` | Shows spinner when true |
+| `disabled` | `boolean` | `false` | Disables the button |
+| `className` | `string` | - | Tailwind classes for styling |
+| `children` | `ReactNode` | provider name | Button text. Pass `{null}` for icon-only |
+
+#### Sensible defaults we provide
+
+`OAuthButton` includes these UX fundamentals automatically:
+
+| Behavior | Automatic? |
+|----------|------------|
+| `cursor: pointer` on hover | ✅ |
+| `cursor: not-allowed` when disabled/loading | ✅ |
+| **Focus visible states** via base-ui | ✅ |
+| **Keyboard navigation** via base-ui | ✅ |
+| **ARIA attributes** via base-ui | ✅ |
+| **Disabled state handling** via base-ui | ✅ |
+
+You don't need to add `cursor-pointer` to your className — it's automatic. Your `className` is merged with our sensible defaults, with your styles taking precedence.
+
+### Icons
+
+Individual icons are also exported if you need them separately:
+
+```tsx
+import { GoogleIcon, DiscordIcon, SpinnerIcon } from '@sublimee/auth-ui';
+
+<GoogleIcon size={24} className="text-red-500" />
+<DiscordIcon size={20} />
+<SpinnerIcon size={16} className="animate-spin" />
+```
+
+## Styling Guidelines
+
+Since components are headless, you provide all styles via `className`. Here are recommended patterns:
+
+### Common Patterns
+
+```tsx
+// Full-width button
+className="w-full flex items-center justify-center gap-3 px-6 py-3 bg-white text-gray-900 rounded-lg"
+
+// Minimal icon button
+className="p-2 rounded-full hover:bg-white/10 transition-colors"
+
+// Outline variant
+className="flex items-center gap-2 px-4 py-2 border border-current rounded-md hover:bg-white/5"
+
+// Loading state
+className="opacity-50 cursor-wait"
+```
+
+### State Handling
+
+The component accepts a `disabled` prop and renders in a loading state when `loading={true}`. These states automatically get `cursor: not-allowed` from base-ui, but you may want to add visual indicators:
+
+```tsx
+<OAuthButton
+  provider="google"
+  loading={isLoading}
+  disabled={isLoading}
+  className={`flex items-center gap-3 px-6 py-3 rounded-lg ${
+    isLoading ? 'opacity-50' : 'hover:bg-gray-50'
+  }`}
+/>
+```
+
+## TypeScript
+
+Full TypeScript support is included:
+
+```tsx
+import type { OAuthButtonProps, OAuthProvider, OAuthIconsProps } from '@sublimee/auth-ui';
+```
+
+## Why base-ui?
+
+We chose base-ui as our foundation because:
+
+1. **Sensible defaults out of the box** — No more forgetting `cursor: pointer`
+2. **Accessibility built-in** — Proper ARIA, focus management, keyboard support
+3. **Headless by design** — Complete control over styling
+4. **Production-tested** — Built by the MUI team, battle-tested at scale
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,96 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type OAuthProvider = 'google' | 'discord';
+interface OAuthButtonProps {
+    /**
+     * The OAuth provider to authenticate with
+     */
+    provider: OAuthProvider;
+    /**
+     * Click handler - typically calls supabase.auth.signInWithOAuth
+     */
+    onClick?: () => void;
+    /**
+     * Loading state - shows spinner when true
+     */
+    loading?: boolean;
+    /**
+     * Custom className - use Tailwind for styling
+     * @example "flex items-center gap-2 px-4 py-2 bg-white text-gray-900 rounded-lg"
+     */
+    className?: string;
+    /**
+     * Button children - defaults to provider name
+     * Pass `null` for icon-only mode
+     */
+    children?: ReactNode;
+    /**
+     * Disable the button
+     */
+    disabled?: boolean;
+}
+interface OAuthIconsProps {
+    /**
+     * Icon size in pixels (min: 1)
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+
+/**
+ * OAuthButton component
+ *
+ * A headless OAuth button built on top of base-ui's Button primitive.
+ * Includes sensible defaults (cursor-pointer) while remaining fully
+ * customizable via className.
+ *
+ * Design Philosophy:
+ * - We add sensible UX defaults (cursor-pointer, proper disabled states)
+ * - We don't impose visual opinions - you control all styling via className
+ * - The result is a solid, accessible foundation that looks exactly how you want
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - cursor-pointer is automatic
+ * <OAuthButton
+ *   provider="google"
+ *   onClick={signInWithGoogle}
+ *   className="flex items-center gap-3 px-6 py-3 bg-white text-gray-900 rounded-lg font-medium"
+ * />
+ *
+ * // Icon only - pass {null} as children
+ * <OAuthButton
+ *   provider="google"
+ *   className="p-3 rounded-full hover:bg-white/10"
+ * >
+ *   {null}
+ * </OAuthButton>
+ *
+ * // Loading state - cursor-not-allowed is automatic
+ * <OAuthButton provider="google" loading className="opacity-50" />
+ * ```
+ */
+declare const OAuthButton: react.ForwardRefExoticComponent<OAuthButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Google Logo Icon
+ * Official Google "G" logo for OAuth authentication
+ */
+declare function GoogleIcon({ size, className }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
+/**
+ * Discord Logo Icon
+ * Official Discord logo for OAuth authentication
+ */
+declare function DiscordIcon({ size, className }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
+/**
+ * Spinner Icon for loading state
+ */
+declare function SpinnerIcon({ size, className }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
+
+export { DiscordIcon, GoogleIcon, OAuthButton, type OAuthButtonProps, type OAuthIconsProps, type OAuthProvider, SpinnerIcon, OAuthButton as default };

package/dist/index.d.ts

@@ -0,0 +1,96 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type OAuthProvider = 'google' | 'discord';
+interface OAuthButtonProps {
+    /**
+     * The OAuth provider to authenticate with
+     */
+    provider: OAuthProvider;
+    /**
+     * Click handler - typically calls supabase.auth.signInWithOAuth
+     */
+    onClick?: () => void;
+    /**
+     * Loading state - shows spinner when true
+     */
+    loading?: boolean;
+    /**
+     * Custom className - use Tailwind for styling
+     * @example "flex items-center gap-2 px-4 py-2 bg-white text-gray-900 rounded-lg"
+     */
+    className?: string;
+    /**
+     * Button children - defaults to provider name
+     * Pass `null` for icon-only mode
+     */
+    children?: ReactNode;
+    /**
+     * Disable the button
+     */
+    disabled?: boolean;
+}
+interface OAuthIconsProps {
+    /**
+     * Icon size in pixels (min: 1)
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+
+/**
+ * OAuthButton component
+ *
+ * A headless OAuth button built on top of base-ui's Button primitive.
+ * Includes sensible defaults (cursor-pointer) while remaining fully
+ * customizable via className.
+ *
+ * Design Philosophy:
+ * - We add sensible UX defaults (cursor-pointer, proper disabled states)
+ * - We don't impose visual opinions - you control all styling via className
+ * - The result is a solid, accessible foundation that looks exactly how you want
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - cursor-pointer is automatic
+ * <OAuthButton
+ *   provider="google"
+ *   onClick={signInWithGoogle}
+ *   className="flex items-center gap-3 px-6 py-3 bg-white text-gray-900 rounded-lg font-medium"
+ * />
+ *
+ * // Icon only - pass {null} as children
+ * <OAuthButton
+ *   provider="google"
+ *   className="p-3 rounded-full hover:bg-white/10"
+ * >
+ *   {null}
+ * </OAuthButton>
+ *
+ * // Loading state - cursor-not-allowed is automatic
+ * <OAuthButton provider="google" loading className="opacity-50" />
+ * ```
+ */
+declare const OAuthButton: react.ForwardRefExoticComponent<OAuthButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Google Logo Icon
+ * Official Google "G" logo for OAuth authentication
+ */
+declare function GoogleIcon({ size, className }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
+/**
+ * Discord Logo Icon
+ * Official Discord logo for OAuth authentication
+ */
+declare function DiscordIcon({ size, className }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
+/**
+ * Spinner Icon for loading state
+ */
+declare function SpinnerIcon({ size, className }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
+
+export { DiscordIcon, GoogleIcon, OAuthButton, type OAuthButtonProps, type OAuthIconsProps, type OAuthProvider, SpinnerIcon, OAuthButton as default };

package/dist/index.js

@@ -0,0 +1,236 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DiscordIcon: () => DiscordIcon,
+  GoogleIcon: () => GoogleIcon,
+  OAuthButton: () => OAuthButton,
+  SpinnerIcon: () => SpinnerIcon,
+  default: () => oauth_button_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/oauth-button.tsx
+var import_react = require("react");
+var import_button = require("@base-ui/react/button");
+
+// src/icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function getSafeSize(size) {
+  const safeSize = size ?? 24;
+  return Math.max(1, safeSize);
+}
+function GoogleIcon({ size, className }) {
+  const safeSize = getSafeSize(size);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: safeSize,
+      height: safeSize,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z",
+            fill: "#4285F4"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z",
+            fill: "#34A853"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z",
+            fill: "#FBBC05"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z",
+            fill: "#EA4335"
+          }
+        )
+      ]
+    }
+  );
+}
+function DiscordIcon({ size, className }) {
+  const safeSize = getSafeSize(size);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      width: safeSize,
+      height: safeSize,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          d: "M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+}
+function SpinnerIcon({ size, className }) {
+  const safeSize = size ?? 20;
+  const finalSize = Math.max(1, safeSize);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: finalSize,
+      height: finalSize,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4",
+            strokeLinecap: "round",
+            strokeDasharray: "60",
+            strokeDashoffset: "20",
+            opacity: "0.25"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M12 2C6.477 2 2 6.477 2 12",
+            stroke: "currentColor",
+            strokeWidth: "4",
+            strokeLinecap: "round",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "animateTransform",
+              {
+                attributeName: "transform",
+                type: "rotate",
+                from: "0 12 12",
+                to: "360 12 12",
+                dur: "1s",
+                repeatCount: "indefinite"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/oauth-button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PROVIDER_NAMES = {
+  google: "Google",
+  discord: "Discord"
+};
+function getProviderIcon(provider) {
+  switch (provider) {
+    case "google":
+      return GoogleIcon;
+    case "discord":
+      return DiscordIcon;
+    default:
+      return () => null;
+  }
+}
+var SENSIBLE_DEFAULTS = ["cursor-pointer"];
+function mergeButtonClasses(userClassName, isDisabled) {
+  const userClasses = userClassName?.trim() ?? "";
+  const neededDefaults = SENSIBLE_DEFAULTS.filter(
+    (defaultClass) => !userClasses.includes(defaultClass)
+  );
+  if (isDisabled && !userClasses.includes("cursor-not-allowed")) {
+    neededDefaults.push("cursor-not-allowed");
+  }
+  if (neededDefaults.length === 0) {
+    return userClasses;
+  }
+  return `${neededDefaults.join(" ")} ${userClasses}`.trim();
+}
+var OAuthButton = (0, import_react.forwardRef)(
+  function OAuthButton2(props, forwardedRef) {
+    const {
+      provider,
+      onClick,
+      loading = false,
+      className,
+      children,
+      disabled = false,
+      ...otherProps
+    } = props;
+    const isDisabled = disabled || loading;
+    const Icon = getProviderIcon(provider);
+    const defaultText = `Continuar con ${PROVIDER_NAMES[provider]}`;
+    const mergedClassName = (0, import_react.useMemo)(
+      () => mergeButtonClasses(className, isDisabled),
+      [className, isDisabled]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_button.Button,
+      {
+        ref: forwardedRef,
+        onClick,
+        disabled: isDisabled,
+        "aria-busy": loading,
+        className: mergedClassName,
+        ...otherProps,
+        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SpinnerIcon, {}),
+          children !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: children ?? "Conectando..." })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, {}),
+          children !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: children ?? defaultText })
+        ] })
+      }
+    );
+  }
+);
+var oauth_button_default = OAuthButton;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DiscordIcon,
+  GoogleIcon,
+  OAuthButton,
+  SpinnerIcon
+});

package/dist/index.mjs

@@ -0,0 +1,206 @@
+// src/oauth-button.tsx
+import { forwardRef, useMemo } 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 GoogleIcon({ size, className }) {
+  const safeSize = getSafeSize(size);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: safeSize,
+      height: safeSize,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z",
+            fill: "#4285F4"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z",
+            fill: "#34A853"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z",
+            fill: "#FBBC05"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z",
+            fill: "#EA4335"
+          }
+        )
+      ]
+    }
+  );
+}
+function DiscordIcon({ size, className }) {
+  const safeSize = getSafeSize(size);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: safeSize,
+      height: safeSize,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+}
+function SpinnerIcon({ size, className }) {
+  const safeSize = size ?? 20;
+  const finalSize = Math.max(1, safeSize);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: finalSize,
+      height: finalSize,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4",
+            strokeLinecap: "round",
+            strokeDasharray: "60",
+            strokeDashoffset: "20",
+            opacity: "0.25"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 2C6.477 2 2 6.477 2 12",
+            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"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/oauth-button.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PROVIDER_NAMES = {
+  google: "Google",
+  discord: "Discord"
+};
+function getProviderIcon(provider) {
+  switch (provider) {
+    case "google":
+      return GoogleIcon;
+    case "discord":
+      return DiscordIcon;
+    default:
+      return () => null;
+  }
+}
+var SENSIBLE_DEFAULTS = ["cursor-pointer"];
+function mergeButtonClasses(userClassName, isDisabled) {
+  const userClasses = userClassName?.trim() ?? "";
+  const neededDefaults = SENSIBLE_DEFAULTS.filter(
+    (defaultClass) => !userClasses.includes(defaultClass)
+  );
+  if (isDisabled && !userClasses.includes("cursor-not-allowed")) {
+    neededDefaults.push("cursor-not-allowed");
+  }
+  if (neededDefaults.length === 0) {
+    return userClasses;
+  }
+  return `${neededDefaults.join(" ")} ${userClasses}`.trim();
+}
+var OAuthButton = forwardRef(
+  function OAuthButton2(props, forwardedRef) {
+    const {
+      provider,
+      onClick,
+      loading = false,
+      className,
+      children,
+      disabled = false,
+      ...otherProps
+    } = props;
+    const isDisabled = disabled || loading;
+    const Icon = getProviderIcon(provider);
+    const defaultText = `Continuar con ${PROVIDER_NAMES[provider]}`;
+    const mergedClassName = useMemo(
+      () => mergeButtonClasses(className, isDisabled),
+      [className, isDisabled]
+    );
+    return /* @__PURE__ */ jsx2(
+      Button,
+      {
+        ref: forwardedRef,
+        onClick,
+        disabled: isDisabled,
+        "aria-busy": loading,
+        className: mergedClassName,
+        ...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 })
+        ] })
+      }
+    );
+  }
+);
+var oauth_button_default = OAuthButton;
+export {
+  DiscordIcon,
+  GoogleIcon,
+  OAuthButton,
+  SpinnerIcon,
+  oauth_button_default as default
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@sublimee/auth-ui",
+  "version": "0.1.0",
+  "description": "Headless authentication UI components for Sublime",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/juancrfig/sublime.git",
+    "directory": "packages/auth-ui"
+  },
+  "keywords": [
+    "react",
+    "authentication",
+    "oauth",
+    "ui",
+    "components",
+    "headless",
+    "base-ui"
+  ],
+  "author": "Sublime Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tsup": "^8",
+    "typescript": "^5"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/icons.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import type { OAuthIconsProps } from './types';
+
+/**
+ * Validates and sanitizes icon size (minimum 1px)
+ */
+function getSafeSize(size: number | undefined): number {
+  const safeSize = size ?? 24;
+  return Math.max(1, safeSize);
+}
+
+/**
+ * Google Logo Icon
+ * Official Google "G" logo for OAuth authentication
+ */
+export function GoogleIcon({ size, className }: OAuthIconsProps) {
+  const safeSize = getSafeSize(size);
+  return (
+    <svg
+      width={safeSize}
+      height={safeSize}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-hidden="true"
+    >
+      <path
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+        fill="#4285F4"
+      />
+      <path
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        fill="#34A853"
+      />
+      <path
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        fill="#FBBC05"
+      />
+      <path
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        fill="#EA4335"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Discord Logo Icon
+ * Official Discord logo for OAuth authentication
+ */
+export function DiscordIcon({ size, className }: OAuthIconsProps) {
+  const safeSize = getSafeSize(size);
+  return (
+    <svg
+      width={safeSize}
+      height={safeSize}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-hidden="true"
+    >
+      <path
+        d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Spinner Icon for loading state
+ */
+export function SpinnerIcon({ size, className }: OAuthIconsProps) {
+  // Spinner defaults to 20px instead of 24px
+  const safeSize = size ?? 20;
+  const finalSize = Math.max(1, safeSize);
+  return (
+    <svg
+      width={finalSize}
+      height={finalSize}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-hidden="true"
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeDasharray="60"
+        strokeDashoffset="20"
+        opacity="0.25"
+      />
+      <path
+        d="M12 2C6.477 2 2 6.477 2 12"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeLinecap="round"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          from="0 12 12"
+          to="360 12 12"
+          dur="1s"
+          repeatCount="indefinite"
+        />
+      </path>
+    </svg>
+  );
+}

package/src/index.ts

@@ -0,0 +1,33 @@
+/**
+ * @sublimee/auth-ui
+ * Headless authentication UI components for Sublime
+ *
+ * Design Philosophy:
+ * -----------------
+ * "Headless but sensible"
+ *
+ * Our components are built on top of base-ui primitives, which means:
+ * - We inherit base-ui's accessibility defaults (focus states, keyboard nav, ARIA)
+ * - We ADD sensible UX defaults (cursor-pointer, disabled states)
+ * - We DON'T impose visual opinions - you control 100% of styling via className
+ * - You get a solid, accessible foundation that looks exactly how you want
+ *
+ * This approach solves recurring UI issues (like cursor:pointer) once and for all,
+ * while preserving the flexibility to style however you need.
+ *
+ * Built with base-ui for maximum flexibility and composability.
+ */
+
+// Components
+export { OAuthButton } from './oauth-button';
+export { default } from './oauth-button';
+
+// Icons
+export { GoogleIcon, DiscordIcon, SpinnerIcon } from './icons';
+
+// Types
+export type {
+  OAuthProvider,
+  OAuthButtonProps,
+  OAuthIconsProps,
+} from './types';

package/src/oauth-button.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { forwardRef, useMemo } from 'react';
+import { Button } from '@base-ui/react/button';
+import type { OAuthButtonProps, OAuthProvider } from './types';
+import { GoogleIcon, DiscordIcon, SpinnerIcon } from './icons';
+
+/**
+ * Maps OAuth providers to their display names
+ */
+const PROVIDER_NAMES: Record<OAuthProvider, string> = {
+  google: 'Google',
+  discord: 'Discord',
+};
+
+/**
+ * Returns the appropriate icon component for the provider
+ */
+function getProviderIcon(provider: OAuthProvider) {
+  switch (provider) {
+    case 'google':
+      return GoogleIcon;
+    case 'discord':
+      return DiscordIcon;
+    default:
+      return () => null;
+  }
+}
+
+/**
+ * Sensible defaults that every button should have.
+ * These are UX fundamentals that don't affect visual design.
+ */
+const SENSIBLE_DEFAULTS: readonly string[] = ['cursor-pointer'];
+
+/**
+ * Merges sensible default classes with user-provided classes.
+ * Prevents duplicate cursor classes if user already specified them.
+ */
+function mergeButtonClasses(userClassName: string | undefined, isDisabled: boolean): string {
+  const userClasses = userClassName?.trim() ?? '';
+
+  // Filter out defaults that user already specified to avoid duplicates
+  const neededDefaults = SENSIBLE_DEFAULTS.filter(
+    defaultClass => !userClasses.includes(defaultClass)
+  );
+
+  // Add disabled cursor class if needed and not already present
+  if (isDisabled && !userClasses.includes('cursor-not-allowed')) {
+    neededDefaults.push('cursor-not-allowed');
+  }
+
+  if (neededDefaults.length === 0) {
+    return userClasses;
+  }
+
+  return `${neededDefaults.join(' ')} ${userClasses}`.trim();
+}
+
+/**
+ * OAuthButton component
+ *
+ * A headless OAuth button built on top of base-ui's Button primitive.
+ * Includes sensible defaults (cursor-pointer) while remaining fully
+ * customizable via className.
+ *
+ * Design Philosophy:
+ * - We add sensible UX defaults (cursor-pointer, proper disabled states)
+ * - We don't impose visual opinions - you control all styling via className
+ * - The result is a solid, accessible foundation that looks exactly how you want
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - cursor-pointer is automatic
+ * <OAuthButton
+ *   provider="google"
+ *   onClick={signInWithGoogle}
+ *   className="flex items-center gap-3 px-6 py-3 bg-white text-gray-900 rounded-lg font-medium"
+ * />
+ *
+ * // Icon only - pass {null} as children
+ * <OAuthButton
+ *   provider="google"
+ *   className="p-3 rounded-full hover:bg-white/10"
+ * >
+ *   {null}
+ * </OAuthButton>
+ *
+ * // Loading state - cursor-not-allowed is automatic
+ * <OAuthButton provider="google" loading className="opacity-50" />
+ * ```
+ */
+export const OAuthButton = forwardRef<HTMLButtonElement, OAuthButtonProps>(
+  function OAuthButton(props, forwardedRef) {
+    const {
+      provider,
+      onClick,
+      loading = false,
+      className,
+      children,
+      disabled = false,
+      ...otherProps
+    } = props;
+
+    const isDisabled = disabled || loading;
+    const Icon = getProviderIcon(provider);
+    const defaultText = `Continuar con ${PROVIDER_NAMES[provider]}`;
+
+    const mergedClassName = useMemo(
+      () => mergeButtonClasses(className, isDisabled),
+      [className, isDisabled]
+    );
+
+    return (
+      <Button
+        ref={forwardedRef}
+        onClick={onClick}
+        disabled={isDisabled}
+        aria-busy={loading}
+        className={mergedClassName}
+        {...otherProps}
+      >
+        {loading ? (
+          <>
+            <SpinnerIcon />
+            {children !== null && <span>{children ?? 'Conectando...'}</span>}
+          </>
+        ) : (
+          <>
+            <Icon />
+            {children !== null && <span>{children ?? defaultText}</span>}
+          </>
+        )}
+      </Button>
+    );
+  }
+);
+
+export default OAuthButton;

package/src/types.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react';
+
+export type OAuthProvider = 'google' | 'discord';
+
+export interface OAuthButtonProps {
+  /**
+   * The OAuth provider to authenticate with
+   */
+  provider: OAuthProvider;
+
+  /**
+   * Click handler - typically calls supabase.auth.signInWithOAuth
+   */
+  onClick?: () => void;
+
+  /**
+   * Loading state - shows spinner when true
+   */
+  loading?: boolean;
+
+  /**
+   * Custom className - use Tailwind for styling
+   * @example "flex items-center gap-2 px-4 py-2 bg-white text-gray-900 rounded-lg"
+   */
+  className?: string;
+
+  /**
+   * Button children - defaults to provider name
+   * Pass `null` for icon-only mode
+   */
+  children?: ReactNode;
+
+  /**
+   * Disable the button
+   */
+  disabled?: boolean;
+}
+
+export interface OAuthIconsProps {
+  /**
+   * Icon size in pixels (min: 1)
+   * @default 24
+   */
+  size?: number;
+
+  /**
+   * Custom className
+   */
+  className?: string;
+}