aplance-ui 1.0.1

package/registry/components/ui/tabs/tabs.module.css

@@ -0,0 +1,150 @@
+/* ─────────────────────────────────────────────
+   Tabs – root
+───────────────────────────────────────────── */
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  width: 100%;
+}
+
+/* ─────────────────────────────────────────────
+   Tab list
+───────────────────────────────────────────── */
+.list {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  /* style1 – pill container */
+  &.list_style1 {
+    background: var(--color-muted);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-1);
+    gap: var(--spacing-1);
+  }
+
+  /* style2 – underline container */
+  &.list_style2 {
+    border-bottom: var(--border-1) solid var(--color-border);
+    gap: var(--spacing-6);
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Animated sliding indicator
+───────────────────────────────────────────── */
+.indicator {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+  transition:
+    left var(--transition-base),
+    width var(--transition-base);
+  will-change: left, width;
+
+  /* style1 – filled pill */
+  &.indicator_style1 {
+    top: var(--spacing-1);
+    height: calc(100% - var(--spacing-1) * 2);
+    border-radius: calc(var(--radius-md) - var(--spacing-1));
+    background: var(--color-background);
+    box-shadow: var(--shadow-sm);
+  }
+
+  /* style2 – bottom line */
+  &.indicator_style2 {
+    top: auto;
+    bottom: -1px;
+    height: var(--border-2);
+    border-radius: var(--radius-full);
+    background: var(--color-foreground);
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Tab button – shared base
+───────────────────────────────────────────── */
+.tab {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-family-1);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  color: var(--color-muted-foreground);
+  background: transparent;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  white-space: nowrap;
+  transition: color var(--transition-base);
+  user-select: none;
+  -webkit-user-select: none;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* style1 – pill tab */
+  &.tab_style1 {
+    padding: var(--spacing-3) var(--spacing-6);
+    border-radius: calc(var(--radius-md) - var(--spacing-1));
+    min-height: var(--spacing-8);
+
+    &:focus-visible {
+      box-shadow: var(--shadow-ring);
+    }
+
+    &:hover:not(:disabled):not(.tab_active) {
+      color: var(--color-foreground);
+    }
+
+    &.tab_active {
+      color: var(--color-foreground);
+    }
+  }
+
+  /* style2 – underline tab */
+  &.tab_style2 {
+    padding: var(--spacing-3) var(--spacing-1);
+    min-height: var(--spacing-11);
+
+    &:focus-visible {
+      border-radius: var(--radius-sm);
+      box-shadow: var(--shadow-ring);
+    }
+
+    &:hover:not(:disabled):not(.tab_active) {
+      color: var(--color-foreground);
+    }
+
+    &.tab_active {
+      color: var(--color-foreground);
+    }
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Tab panel
+───────────────────────────────────────────── */
+.panel {
+  outline: none;
+  animation: panel_fade_in var(--transition-base) ease both;
+}
+
+@keyframes panel_fade_in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/registry/components/ui/tabs/tabs.tsx

@@ -0,0 +1,134 @@
+import {
+  useState,
+  useRef,
+  useEffect,
+  useId,
+  useCallback,
+  type ReactNode,
+  type ComponentProps,
+} from "react";
+import clsx from "clsx";
+import { useResizeObserver } from "../../../hooks/useResizeObserver";
+import s from "./tabs.module.css";
+
+// Variants & Types
+export const variants = ["style1", "style2"] as const;
+export type Variant = (typeof variants)[number];
+
+export type TabItem = {
+  id: string;
+  label: ReactNode;
+  content?: ReactNode;
+  disabled?: boolean;
+};
+
+type TabsProps = {
+  tabs: TabItem[];
+  defaultTab?: string;
+  activeTab?: string;
+  onTabChange?: (id: string) => void;
+  variant?: Variant;
+  className?: string;
+} & Omit<ComponentProps<"div">, "onChange">;
+
+export const Tabs = ({
+  tabs,
+  defaultTab,
+  activeTab: controlledActive,
+  onTabChange,
+  variant = "style1",
+  className,
+  ...rest
+}: TabsProps) => {
+  const uid = useId();
+  const isControlled = controlledActive !== undefined;
+
+  const [internalActive, setInternalActive] = useState<string>(
+    defaultTab ?? tabs.find((t) => !t.disabled)?.id ?? "",
+  );
+
+  const activeId = isControlled ? controlledActive : internalActive;
+
+  // Sliding indicator state
+  const listRef = useRef<HTMLDivElement>(null);
+  const [indicator, setIndicator] = useState({ left: 0, width: 0 });
+
+  const updateIndicator = useCallback((id: string) => {
+    const list = listRef.current;
+    if (!list) return;
+    const btn = list.querySelector<HTMLButtonElement>(`[data-tab-id="${id}"]`);
+    if (!btn) return;
+    const listRect = list.getBoundingClientRect();
+    const btnRect = btn.getBoundingClientRect();
+    setIndicator({
+      left: btnRect.left - listRect.left,
+      width: btnRect.width,
+    });
+  }, []);
+
+  useEffect(() => {
+    updateIndicator(activeId);
+  }, [activeId, updateIndicator]);
+
+  useResizeObserver(listRef, () => updateIndicator(activeId));
+  const handleSelect = (id: string) => {
+    if (!isControlled) setInternalActive(id);
+    onTabChange?.(id);
+  };
+  const activeContent = tabs.find((t) => t.id === activeId)?.content;
+
+  return (
+    <div className={clsx(s.root, className)} {...rest}>
+      {/* Tab List */}
+      <div
+        ref={listRef}
+        role="tablist"
+        className={clsx(s.list, s[`list_${variant}`])}
+        aria-orientation="horizontal"
+      >
+        {/* Animated indicator */}
+        <span
+          className={clsx(s.indicator, s[`indicator_${variant}`])}
+          style={{ left: indicator.left, width: indicator.width }}
+          aria-hidden="true"
+        />
+
+        {tabs.map((tab) => {
+          const isActive = tab.id === activeId;
+          return (
+            <button
+              key={tab.id}
+              role="tab"
+              id={`${uid}-tab-${tab.id}`}
+              aria-controls={`${uid}-panel-${tab.id}`}
+              aria-selected={isActive}
+              disabled={tab.disabled}
+              data-tab-id={tab.id}
+              className={clsx(
+                s.tab,
+                s[`tab_${variant}`],
+                isActive && s.tab_active,
+              )}
+              onClick={() => !tab.disabled && handleSelect(tab.id)}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Tab Panel */}
+      {activeContent !== undefined && (
+        <div
+          role="tabpanel"
+          id={`${uid}-panel-${activeId}`}
+          aria-labelledby={`${uid}-tab-${activeId}`}
+          className={s.panel}
+          key={activeId}
+        >
+          {activeContent}
+        </div>
+      )}
+    </div>
+  );
+};

package/registry/components/ui/toast/toast.module.css

@@ -0,0 +1,159 @@
+/* Toast - sonner runs with `unstyled: true` and is left on its default
+   `theme="light"`, so none of sonner's dark-only rules ever match. All
+   surface styling is ours and adapts to the host app's `[data-theme]` via
+   our CSS tokens; sonner only drives positioning, mount/swipe and stacking. */
+
+.item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--spacing-6);
+  padding: var(--spacing-7) var(--spacing-8);
+  background: var(--color-background);
+  color: var(--color-foreground);
+  border: var(--border-1) solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  font-family: var(--font-family-1);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-md);
+}
+
+.icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--spacing-9);
+  height: var(--spacing-9);
+  color: var(--color-muted-foreground);
+  /* Sonner's loading bars use `var(--gray11)`; remap locally so the spinner
+     tracks the icon's text colour (and any variant override below). */
+  --gray11: currentColor;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Sonner centres the loader at icon centre with 0×0 size, then anchors a
+     fixed 16px loading-wrapper at top-left - visually the spinner ends up
+     in the icon's bottom-right quadrant. Make the loader fill `.icon` and
+     re-centre the wrapper at our icon size. */
+  :global(.sonner-loader) {
+    inset: 0;
+    transform: none;
+  }
+
+  :global(.sonner-loading-wrapper) {
+    --size: var(--spacing-9);
+    inset: auto;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-foreground);
+}
+
+.description {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-md);
+  color: var(--color-foreground);
+}
+
+.action_button {
+  font-family: var(--font-family-1);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  height: var(--spacing-10);
+  padding: 0 var(--spacing-6);
+  border-radius: var(--radius-sm);
+  border: var(--border-0);
+  background: var(--color-foreground);
+  color: var(--color-background);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: opacity var(--transition-base);
+
+  &:hover {
+    opacity: 0.85;
+  }
+}
+
+.cancel_button {
+  font-family: var(--font-family-1);
+  font-size: var(--font-size-xs);
+  height: var(--spacing-10);
+  padding: 0 var(--spacing-6);
+  border-radius: var(--radius-sm);
+  border: var(--border-0);
+  background: var(--color-muted);
+  color: var(--color-foreground);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background var(--transition-base);
+
+  &:hover {
+    background: var(--color-secondary-muted);
+  }
+}
+
+.close_button {
+  position: absolute;
+  top: 0;
+  left: var(--toast-close-button-start, 0);
+  right: var(--toast-close-button-end, unset);
+  width: var(--spacing-10);
+  height: var(--spacing-10);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: var(--color-background);
+  color: var(--color-muted-foreground);
+  border: var(--border-1) solid var(--color-border);
+  border-radius: var(--radius-full);
+  transform: var(--toast-close-button-transform, translate(-35%, -35%));
+  cursor: pointer;
+  z-index: 1;
+  transition:
+    color var(--transition-base),
+    background var(--transition-base),
+    border-color var(--transition-base);
+
+  &:hover {
+    background: var(--color-muted);
+    color: var(--color-foreground);
+  }
+}
+
+/* Variants - colour the icon only; the toast surface stays neutral so both
+   themes render consistently without rich-colour tinting. */
+.variant_success .icon {
+  color: var(--color-success-foreground);
+}
+
+.variant_error .icon {
+  color: var(--color-error-foreground);
+}
+
+.variant_warning .icon {
+  color: var(--color-warning-foreground);
+}
+
+.variant_info .icon {
+  color: var(--color-info-foreground);
+}

package/registry/components/ui/toast/toast.tsx

@@ -0,0 +1,104 @@
+import {
+  Toaster as SonnerToaster,
+  toast as sonnerToast,
+  type ExternalToast,
+} from "sonner";
+import s from "./toast.module.css";
+
+export const variants = ["default", "success", "error", "warning", "info"] as const;
+export type ToastVariant = (typeof variants)[number];
+
+export const positions = [
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right",
+  "top-center",
+  "bottom-center",
+] as const;
+export type ToastPosition = (typeof positions)[number];
+
+export type ToasterProps = {
+  position?: ToastPosition;
+  visibleToasts?: number;
+  closeButton?: boolean;
+  expand?: boolean;
+  duration?: number;
+  gap?: number;
+  offset?: string | number;
+  className?: string;
+};
+
+/**
+ * Visual theming follows the host app's `[data-theme]` attribute through our
+ * CSS tokens. We don't forward sonner's `theme` prop - leaving sonner on its
+ * default ("light") means its dark-only rules for description and close
+ * button never match, so our class styling is the single source of truth.
+ */
+export const Toaster = ({
+  position = "bottom-right",
+  visibleToasts = 3,
+  closeButton = true,
+  expand = false,
+  duration = 4000,
+  gap = 8,
+  offset,
+  className,
+}: ToasterProps) => (
+  <SonnerToaster
+    position={position}
+    visibleToasts={visibleToasts}
+    closeButton={closeButton}
+    expand={expand}
+    duration={duration}
+    gap={gap}
+    offset={offset}
+    className={className}
+    toastOptions={{
+      unstyled: true,
+      classNames: {
+        toast: s.item,
+        title: s.title,
+        description: s.description,
+        icon: s.icon,
+        content: s.content,
+        actionButton: s.action_button,
+        cancelButton: s.cancel_button,
+        closeButton: s.close_button,
+        success: s.variant_success,
+        error: s.variant_error,
+        warning: s.variant_warning,
+        info: s.variant_info,
+      },
+    }}
+  />
+);
+
+type ToastOptions = ExternalToast & { variant?: ToastVariant };
+type ToastMessage = string | React.ReactNode;
+
+/**
+ * Show a toast notification.
+ *
+ * @example
+ * toast("Copied to clipboard");
+ * toast.success("Profile saved");
+ * toast.error("Upload failed", { description: "File is too large" });
+ * toast.promise(savePromise, { loading: "Saving...", success: "Saved", error: "Save failed" });
+ */
+function toast(message: ToastMessage, options?: ToastOptions): string | number {
+  const { variant, ...rest } = options ?? {};
+  if (variant && variant !== "default") return sonnerToast[variant](message, rest);
+  return sonnerToast(message, rest);
+}
+
+toast.success = sonnerToast.success;
+toast.error = sonnerToast.error;
+toast.warning = sonnerToast.warning;
+toast.info = sonnerToast.info;
+toast.promise = sonnerToast.promise;
+toast.custom = sonnerToast.custom;
+toast.dismiss = sonnerToast.dismiss;
+toast.loading = sonnerToast.loading;
+
+export { toast };

package/registry/components/ui/tooltip/tooltip.module.css

@@ -0,0 +1,82 @@
+/* extends popover primitive
+not including the popover selectors because it's not at all required
+*/
+
+.container {
+  width: 100%;
+  min-width: fit-content;
+  max-width: 250px;
+  background-color: var(--color-secondary);
+  color: var(--color-secondary-foreground);
+  border-radius: var(--radius-sm);
+  padding: var(--spacing-2) var(--spacing-3);
+  font-size: var(--font-size-xs);
+  line-height: 1.2;
+  word-wrap: break-word;
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--color-border);
+  z-index: 1002;
+}
+
+.arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: var(--color-secondary);
+  transform: rotate(45deg);
+  border: 1px solid var(--color-border);
+
+  /* Top/Bottom positions */
+  &[data-position="top"],
+  &[data-position="bottom"] {
+    &[data-align="center"] {
+      left: 50%;
+      margin-left: -4px;
+    }
+    &[data-align="start"] {
+      left: var(--spacing-5);
+    }
+    &[data-align="end"] {
+      right: var(--spacing-5);
+    }
+  }
+
+  &[data-position="top"] {
+    bottom: -4px;
+    border-top: none;
+    border-left: none;
+  }
+
+  &[data-position="bottom"] {
+    top: -4px;
+    border-bottom: none;
+    border-right: none;
+  }
+
+  /* Left/Right positions */
+  &[data-position="left"],
+  &[data-position="right"] {
+    &[data-align="center"] {
+      top: 50%;
+      margin-top: -4px;
+    }
+    &[data-align="start"] {
+      top: var(--spacing-5);
+    }
+    &[data-align="end"] {
+      bottom: var(--spacing-5);
+    }
+  }
+
+  &[data-position="left"] {
+    right: -4px;
+    border-left: none;
+    border-bottom: none;
+  }
+
+  &[data-position="right"] {
+    left: -4px;
+    border-right: none;
+    border-top: none;
+  }
+}

package/registry/components/ui/tooltip/tooltip.tsx

@@ -0,0 +1,72 @@
+import { type ReactNode, type FC } from "react";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverMenu,
+} from "../../primitives/popover/popover";
+import type { ComponentProps } from "react";
+import s from "./tooltip.module.css";
+import clsx from "clsx";
+
+type TooltipProps = {
+  content: ReactNode;
+  children: ReactNode;
+  showArrow?: boolean;
+  position?: "top" | "bottom" | "left" | "right";
+  animationDuration?: number;
+  offset?: number;
+  align?: "start" | "center" | "end";
+
+  // Nested props for popover components
+  popover?: Omit<
+    ComponentProps<typeof Popover>,
+    "children" | "closeOnClickOutside"
+  >;
+  popoverTrigger?: ComponentProps<typeof PopoverTrigger>;
+  popoverMenu?: ComponentProps<typeof PopoverMenu>;
+};
+
+export const Tooltip: FC<TooltipProps> = ({
+  content,
+  children,
+  showArrow = true,
+  position = "top",
+  animationDuration = 150,
+  offset = 8,
+  align = "center",
+
+  // Destructure nested props
+  popover,
+  popoverTrigger,
+  popoverMenu,
+}) => {
+  return (
+    <Popover
+      trigger="hover"
+      position={position}
+      animationDuration={animationDuration}
+      offset={offset}
+      closeOnClickOutside={true}
+      align={align}
+      {...popover}
+    >
+      <PopoverTrigger asChild {...popoverTrigger}>
+        {children}
+      </PopoverTrigger>
+      {/* Using menu as a direct content wrapper */}
+      <PopoverMenu
+        className={clsx(s.container, popoverMenu?.className)}
+        {...popoverMenu}
+      >
+        {showArrow && (
+          <div
+            className={s.arrow}
+            data-position={position}
+            data-align={align}
+          />
+        )}
+        {content}
+      </PopoverMenu>
+    </Popover>
+  );
+};

package/registry/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const classes: Record<string, string>;
+  export default classes;
+}