@sublimee/auth-ui 0.1.1 → 0.1.13

package/src/base-button.stories.tsx

@@ -0,0 +1,96 @@
+import type { Story } from '@ladle/react';
+
+import { BaseButton } from './base-button';
+import type { ButtonVariant } from './types';
+
+export default {
+  title: 'A Base Button',
+};
+
+interface BaseButtonStoryProps {
+  children: string;
+  disabled: boolean;
+  isIconOnly: boolean;
+  loading: boolean;
+  variant: ButtonVariant;
+}
+
+export const Default: Story<BaseButtonStoryProps> = ({
+  children,
+  disabled,
+  isIconOnly,
+  loading,
+  variant,
+}) => (
+  <div className="flex flex-wrap items-center gap-4">
+    <BaseButton
+      disabled={disabled}
+      isIconOnly={isIconOnly}
+      loading={loading}
+      variant={variant}
+      aria-label={isIconOnly ? children : undefined}
+    >
+      {isIconOnly ? <span aria-hidden="true">G</span> : children}
+    </BaseButton>
+
+    <BaseButton
+      disabled={disabled}
+      loading={loading}
+      isIconOnly
+      variant="secondary"
+      aria-label="Quick action"
+    >
+      <span aria-hidden="true">+</span>
+    </BaseButton>
+  </div>
+);
+
+Default.args = {
+  children: 'Continue',
+  disabled: false,
+  isIconOnly: false,
+  loading: false,
+  variant: 'secondary',
+};
+
+Default.argTypes = {
+  variant: {
+    control: { type: 'select' },
+    options: ['primary', 'secondary'],
+  },
+  children: {
+    control: { type: 'text' },
+  },
+};
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-4 items-start">
+    <div className="space-y-2">
+      <p className="text-sm font-medium text-[var(--sublime-color-text-muted)]">Primary</p>
+      <BaseButton variant="primary">Continue with email</BaseButton>
+    </div>
+
+    <div className="space-y-2">
+      <p className="text-sm font-medium text-[var(--sublime-color-text-muted)]">Secondary</p>
+      <BaseButton variant="secondary">Continue with email</BaseButton>
+    </div>
+  </div>
+);
+
+export const States: Story = () => (
+  <div className="flex flex-col gap-4 items-start">
+    <BaseButton>Default</BaseButton>
+    <BaseButton disabled>Disabled</BaseButton>
+    <BaseButton loading>Saving changes</BaseButton>
+  </div>
+);
+
+export const DarkMode: Story = () => (
+  <div className="dark bg-[var(--sublime-color-surface-0)] p-8 rounded-lg">
+    <div className="flex flex-col gap-4 items-start">
+      <BaseButton variant="primary">Primary</BaseButton>
+      <BaseButton variant="secondary">Secondary</BaseButton>
+      <BaseButton loading variant="secondary">Loading</BaseButton>
+    </div>
+  </div>
+);

package/src/base-button.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { Button } from '@base-ui/react/button';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+import { ButtonLoadingIndicator } from './button-loading-indicator';
+import { useButtonAnimation } from './use-button-animation';
+import { useAuthUiRuntimeStyles } from './runtime-styles';
+import type {
+  ButtonAnimation,
+  ButtonLoadingAnimation,
+  ButtonVariant,
+} from './types';
+
+interface BaseButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+  animation?: ButtonAnimation;
+  isIconOnly?: boolean;
+  leadingVisual?: ReactNode;
+  loading?: boolean;
+  loadingAnimation?: ButtonLoadingAnimation;
+  onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];
+  variant?: ButtonVariant;
+}
+
+type EventHandler<Event> = ((event: Event) => void) | undefined;
+
+function mergeClassNames(...classNames: Array<string | undefined>): string {
+  return classNames.filter(Boolean).join(' ');
+}
+
+function composeEventHandlers<Event>(
+  internalHandler: EventHandler<Event>,
+  externalHandler: EventHandler<Event>
+): EventHandler<Event> {
+  if (!internalHandler) {
+    return externalHandler;
+  }
+
+  if (!externalHandler) {
+    return internalHandler;
+  }
+
+  return (event: Event) => {
+    internalHandler(event);
+    externalHandler(event);
+  };
+}
+
+export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
+  function BaseButton(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
+      ? <ButtonLoadingIndicator animation={loadingAnimation} size={18} />
+      : leadingVisual ?? (isIconOnly ? children : undefined);
+
+    const labelContent = isIconOnly ? null : children;
+
+    return (
+      <Button
+        ref={forwardedRef}
+        type={type}
+        disabled={disabled || loading}
+        className={mergedClassName}
+        data-icon-only={isIconOnly ? 'true' : undefined}
+        data-loading={loading ? 'true' : undefined}
+        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)}
+      >
+        <span className="sublime-button__content">
+          {visualContent ? (
+            <span className="sublime-button__visual">{visualContent}</span>
+          ) : null}
+          {labelContent !== null && labelContent !== undefined ? (
+            <span className="sublime-button__label">{labelContent}</span>
+          ) : null}
+        </span>
+      </Button>
+    );
+  }
+);

package/src/button-loading-indicator.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+import { SpinnerIcon } from './icons';
+import type { ButtonLoadingAnimation } from './types';
+
+interface ButtonLoadingIndicatorProps {
+  animation?: ButtonLoadingAnimation;
+  size?: number;
+}
+
+interface LoadingIndicatorVisualProps {
+  size: number;
+}
+
+function SpinnerLoadingIndicator({ size }: LoadingIndicatorVisualProps) {
+  return <SpinnerIcon size={size} className="sublime-button__spinner" />;
+}
+
+const LOADING_INDICATORS: Record<
+  ButtonLoadingAnimation,
+  (props: LoadingIndicatorVisualProps) => ReactNode
+> = {
+  spinner: SpinnerLoadingIndicator,
+};
+
+export function ButtonLoadingIndicator({
+  animation = 'spinner',
+  size = 18,
+}: ButtonLoadingIndicatorProps) {
+  const LoadingIndicator = LOADING_INDICATORS[animation];
+
+  return <LoadingIndicator size={size} />;
+}

package/src/icons.tsx

@@ -11,7 +11,7 @@ function getSafeSize(size: number | undefined, defaultSize = 24): number {
  * Google Logo Icon
  * Official Google "G" logo for OAuth authentication
  */
-export function GoogleIcon({ size }: OAuthIconsProps) {
+export function GoogleIcon({ size, className }: OAuthIconsProps) {
   const safeSize = getSafeSize(size);
 
   return (
@@ -22,8 +22,8 @@ export function GoogleIcon({ size }: OAuthIconsProps) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true"
+      className={className}
     >
-      {/* Colored G paths */}
       <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"
@@ -48,8 +48,9 @@ export function GoogleIcon({ size }: OAuthIconsProps) {
  * Discord Logo Icon
  * Official Discord logo for OAuth authentication
  */
-export function DiscordIcon({ size }: OAuthIconsProps) {
+export function DiscordIcon({ size, className }: OAuthIconsProps) {
   const safeSize = getSafeSize(size);
+
   return (
     <svg
       width={safeSize}
@@ -58,6 +59,7 @@ export function DiscordIcon({ size }: OAuthIconsProps) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true"
+      className={className}
     >
       <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"
@@ -68,10 +70,12 @@ export function DiscordIcon({ size }: OAuthIconsProps) {
 }
 
 /**
- * Spinner Icon for loading state
+ * Spinner Icon for loading state.
+ * Motion is applied through package runtime CSS so the icon stays responsive.
  */
-export function SpinnerIcon({ size }: OAuthIconsProps) {
+export function SpinnerIcon({ size, className }: OAuthIconsProps) {
   const safeSize = getSafeSize(size, 20);
+
   return (
     <svg
       width={safeSize}
@@ -80,33 +84,22 @@ export function SpinnerIcon({ size }: OAuthIconsProps) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true"
+      className={className}
     >
       <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"
       />
       <path
-        d="M12 2C6.477 2 2 6.477 2 12"
+        d="M12 3a9 9 0 0 1 9 9"
         stroke="currentColor"
-        strokeWidth="4"
+        strokeWidth="3"
         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

@@ -1,32 +1,38 @@
 /**
  * @sublimee/auth-ui
- * Headless authentication UI components for Sublime
+ * Ready-to-use authentication UI components for Sublime.
  *
- * Design Philosophy:
- * -----------------
- * "Headless but sensible"
+ * Philosophy:
+ * -----------
+ * Auth components in this package are meant to be visible, polished,
+ * and useful on first render. They are semantic and adaptable, not
+ * intentionally bare or headless.
  *
- * 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
+ * Quick Start:
+ * -----------
+ * ```tsx
+ * import '@sublimee/tokens/tokens.css';
+ * import { OAuthButton } from '@sublimee/auth-ui';
  *
- * This approach solves recurring UI issues (like cursor:pointer) once and for all,
- * while preserving the flexibility to style however you need.
+ * <OAuthButton provider="google" />
+ * <OAuthButton provider="discord" variant="primary" loading />
+ * ```
  *
- * Built with base-ui for maximum flexibility and composability.
+ * The package injects its runtime button styles automatically so the
+ * default experience stays zero-setup for consumers.
+ *
+ * @packageDocumentation
  */
 
-// Components
 export { OAuthButton } from './oauth-button';
-
-// Icons
-export { GoogleIcon, DiscordIcon, SpinnerIcon } from './icons';
-
-// Types
+export { useButtonAnimation } from './use-button-animation';
+export { GoogleIcon, DiscordIcon } from './icons';
 export type {
   OAuthProvider,
   OAuthButtonProps,
   OAuthIconsProps,
-} from './types';
+  ButtonVariant,
+  ButtonAnimation,
+  ButtonLoadingAnimation,
+  UseButtonAnimationResult,
+} from './types';