aplance-ui 1.0.1

package/registry/components/ui/accordion/accordion.tsx

@@ -0,0 +1,327 @@
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import clsx from "clsx";
+import { IconChevronDown } from "@tabler/icons-react";
+import { useResizeObserver } from "../../../hooks/useResizeObserver";
+import s from "./accordion.module.css";
+
+export type AccordionVariant = "bordered" | "minimal";
+
+export type AccordionMode = "single" | "multiple";
+
+export type AccordionSize = "sm" | "md" | "lg";
+
+export type AccordionItem = {
+  id: string;
+  title: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+  defaultOpen?: boolean;
+};
+
+type AccordionBaseProps = {
+  className?: string;
+  style?: CSSProperties;
+  itemClassName?: string;
+  triggerClassName?: string;
+  contentClassName?: string;
+  variant?: AccordionVariant;
+  size?: AccordionSize;
+  icon?: ReactNode;
+  iconRotation?: number;
+};
+
+type AccordionSingleProps = {
+  title: ReactNode;
+  children: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onToggle?: (open: boolean) => void;
+  disabled?: boolean;
+  id?: string;
+  items?: never;
+  mode?: never;
+  value?: never;
+  defaultValue?: never;
+  onValueChange?: never;
+  collapsible?: never;
+};
+
+type AccordionGroupProps = {
+  items: AccordionItem[];
+  mode?: AccordionMode;
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (openIds: string[]) => void;
+  collapsible?: boolean;
+  title?: never;
+  children?: never;
+  open?: never;
+  defaultOpen?: never;
+  onToggle?: never;
+  disabled?: never;
+  id?: never;
+};
+
+type VariantProps = AccordionSingleProps | AccordionGroupProps;
+export type AccordionProps = AccordionBaseProps & VariantProps;
+
+type ItemViewProps = {
+  uid: string;
+  item: AccordionItem;
+  isOpen: boolean;
+  onToggle: () => void;
+  size: AccordionSize;
+  variant: AccordionVariant;
+  icon?: ReactNode;
+  itemClassName?: string;
+  triggerClassName?: string;
+  contentClassName?: string;
+};
+
+const isGroupProps = (props: VariantProps): props is AccordionGroupProps =>
+  "items" in props;
+
+const normalizeIds = (
+  value: string | string[] | undefined,
+  mode: AccordionMode,
+): string[] => {
+  if (value === undefined) return [];
+  const ids = Array.isArray(value) ? value : [value];
+  const deduped = Array.from(new Set(ids.filter(Boolean)));
+  return mode === "single" ? deduped.slice(0, 1) : deduped;
+};
+
+const toDomSafeId = (value: string): string => {
+  const safe = value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9_-]+/g, "-");
+  return safe.length > 0 ? safe : "item";
+};
+
+const AccordionItemView = ({
+  uid,
+  item,
+  isOpen,
+  onToggle,
+  size,
+  variant,
+  icon,
+  itemClassName,
+  triggerClassName,
+  contentClassName,
+}: ItemViewProps) => {
+  const safeId = toDomSafeId(item.id);
+  const triggerId = `${uid}-trigger-${safeId}`;
+  const panelId = `${uid}-content-${safeId}`;
+
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [panelHeight, setPanelHeight] = useState(0);
+
+  const updateHeight = () => {
+    const element = contentRef.current;
+    if (!element) return;
+    setPanelHeight(isOpen ? element.scrollHeight : 0);
+  };
+
+  useEffect(() => {
+    updateHeight();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  useResizeObserver(contentRef, updateHeight, { enabled: isOpen });
+
+  return (
+    <section
+      className={clsx(
+        s.item,
+        s[`item_${variant}`],
+        isOpen && s.item_open,
+        item.disabled && s.item_disabled,
+        itemClassName,
+      )}
+      data-state={isOpen ? "open" : "closed"}
+    >
+      <button
+        id={triggerId}
+        type="button"
+        disabled={item.disabled}
+        aria-expanded={isOpen}
+        aria-controls={panelId}
+        onClick={onToggle}
+        className={clsx(
+          s.trigger,
+          s[`trigger_${size}`],
+          s[`trigger_${variant}`],
+          isOpen && s.trigger_open,
+          triggerClassName,
+        )}
+      >
+        <span className={clsx(s.title, s[`title_${size}`])}>{item.title}</span>
+        <span
+          className={clsx(s.icon, isOpen && s.icon_open)}
+          aria-hidden="true"
+        >
+          {icon ?? (
+            <IconChevronDown
+              size={size === "sm" ? 16 : size === "lg" ? 20 : 18}
+            />
+          )}
+        </span>
+      </button>
+
+      <div
+        id={panelId}
+        role="region"
+        aria-labelledby={triggerId}
+        aria-hidden={!isOpen}
+        className={clsx(s.panel, isOpen && s.panel_open)}
+        style={{ height: `${panelHeight}px` }}
+      >
+        <div
+          ref={contentRef}
+          className={clsx(
+            s.panel_inner,
+            s[`panel_inner_${size}`],
+            s[`panel_inner_${variant}`],
+            isOpen && s.panel_inner_open,
+            contentClassName,
+          )}
+        >
+          {item.content}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export const Accordion = ({
+  className,
+  style,
+  itemClassName,
+  triggerClassName,
+  contentClassName,
+  variant = "bordered",
+  size = "md",
+  icon,
+  iconRotation = 180,
+  ...variantProps
+}: AccordionProps) => {
+  const uid = useId();
+  const rootStyle = {
+    ...style,
+    "--accordion-icon-rotation": `${iconRotation}deg`,
+  } as CSSProperties;
+
+  const isGroup = isGroupProps(variantProps);
+  const mode: AccordionMode = isGroup
+    ? (variantProps.mode ?? "single")
+    : "single";
+
+  const singleItemId = isGroup ? "" : (variantProps.id ?? "item-1");
+  const items: AccordionItem[] = isGroup
+    ? variantProps.items
+    : [
+        {
+          id: singleItemId,
+          title: variantProps.title,
+          content: variantProps.children,
+          disabled: variantProps.disabled,
+          defaultOpen: variantProps.defaultOpen,
+        },
+      ];
+
+  const controlledOpenIds = isGroup
+    ? variantProps.value !== undefined
+      ? normalizeIds(variantProps.value, mode)
+      : undefined
+    : variantProps.open !== undefined
+      ? variantProps.open
+        ? [singleItemId]
+        : []
+      : undefined;
+
+  const initialOpenIds = isGroup
+    ? variantProps.defaultValue !== undefined
+      ? normalizeIds(variantProps.defaultValue, mode)
+      : normalizeIds(
+          items
+            .filter((item) => item.defaultOpen && !item.disabled)
+            .map((item) => item.id),
+          mode,
+        )
+    : variantProps.defaultOpen && !variantProps.disabled
+      ? [singleItemId]
+      : [];
+
+  const [internalOpenIds, setInternalOpenIds] = useState<string[]>(
+    () => initialOpenIds,
+  );
+
+  const isControlled = controlledOpenIds !== undefined;
+  const openIds = normalizeIds(
+    isControlled ? controlledOpenIds : internalOpenIds,
+    mode,
+  );
+
+  const emitChange = (nextOpenIds: string[]) => {
+    const normalized = normalizeIds(nextOpenIds, mode);
+    if (!isControlled) {
+      setInternalOpenIds(normalized);
+    }
+
+    if (isGroup) {
+      variantProps.onValueChange?.(normalized);
+      return;
+    }
+
+    variantProps.onToggle?.(normalized.includes(singleItemId));
+  };
+
+  const toggleItem = (item: AccordionItem) => {
+    if (item.disabled) return;
+
+    const isItemOpen = openIds.includes(item.id);
+    let nextOpenIds: string[];
+
+    if (!isGroup) {
+      nextOpenIds = isItemOpen ? [] : [item.id];
+    } else if (mode === "multiple") {
+      nextOpenIds = isItemOpen
+        ? openIds.filter((openId) => openId !== item.id)
+        : [...openIds, item.id];
+    } else {
+      const collapsible = variantProps.collapsible ?? true;
+      nextOpenIds = isItemOpen ? (collapsible ? [] : [item.id]) : [item.id];
+    }
+
+    emitChange(normalizeIds(nextOpenIds, mode));
+  };
+
+  return (
+    <div className={clsx(s.root, className)} style={rootStyle}>
+      {items.map((item) => (
+        <AccordionItemView
+          key={item.id}
+          uid={uid}
+          item={item}
+          isOpen={openIds.includes(item.id)}
+          onToggle={() => toggleItem(item)}
+          size={size}
+          variant={variant}
+          icon={icon}
+          itemClassName={itemClassName}
+          triggerClassName={triggerClassName}
+          contentClassName={contentClassName}
+        />
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,32 @@
+.base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+  letter-spacing: var(--letter-spacing-tight);
+  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+  box-shadow: var(--shadow-sm);
+  text-transform: uppercase;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.sm {
+  width: var(--spacing-10);
+  height: var(--spacing-10);
+  font-size: var(--font-size-xs);
+}
+
+.md {
+  width: var(--spacing-12);
+  height: var(--spacing-12);
+  font-size: var(--font-size-sm);
+}
+
+.lg {
+  width: 3.25rem;
+  height: 3.25rem;
+  font-size: var(--font-size-lg);
+}

package/registry/components/ui/avatar/avatar.tsx

@@ -0,0 +1,37 @@
+import clsx from "clsx";
+import s from "./avatar.module.css";
+import { getInitials, hashName } from "../../../lib/string";
+
+type AvatarSize = "sm" | "md" | "lg";
+
+type AvatarProps = {
+  name: string;
+  size?: AvatarSize;
+  className?: string;
+};
+
+const COLORS = [
+  { bg: "oklch(0.92 0.05 280)", fg: "oklch(0.4 0.15 280)" },
+  { bg: "oklch(0.92 0.05 200)", fg: "oklch(0.4 0.15 200)" },
+  { bg: "oklch(0.92 0.05 155)", fg: "oklch(0.4 0.15 155)" },
+  { bg: "oklch(0.92 0.06 85)", fg: "oklch(0.4 0.15 85)" },
+  { bg: "oklch(0.92 0.05 25)", fg: "oklch(0.4 0.15 25)" },
+  { bg: "oklch(0.92 0.05 330)", fg: "oklch(0.4 0.15 330)" },
+];
+
+
+
+export function Avatar({ name, size = "md", className }: AvatarProps) {
+  const color = COLORS[hashName(name) % COLORS.length];
+  const initials = getInitials(name) || "?";
+  return (
+    <div
+      className={clsx(s.base, s[size], className)}
+      style={{ backgroundColor: color.bg, color: color.fg }}
+      title={name}
+      aria-label={`Avatar for ${name}`}
+    >
+      {initials}
+    </div>
+  );
+}

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

@@ -0,0 +1,103 @@
+.base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  text-align: center;
+  letter-spacing: var(--letter-spacing-normal);
+  gap: var(--spacing-2);
+  white-space: nowrap;
+  vertical-align: middle;
+  border-radius: var(--radius-md);
+  min-height: var(--spacing-7);
+  padding: var(--spacing-1) var(--spacing-5);
+  border: 1px solid var(--color-border);
+  box-shadow:
+    inset 0 1px 0 color-mix(in oklch, var(--color-background) 70%, transparent),
+    var(--shadow-sm);
+}
+
+.sm {
+  font-size: var(--font-size-xs);
+  min-height: var(--spacing-6);
+  padding: var(--spacing-1) var(--spacing-4);
+}
+
+.default {
+  background-color: var(--color-muted);
+  color: var(--color-foreground);
+  border-color: var(--color-border);
+}
+
+.primary {
+  background-color: color-mix(
+    in oklch,
+    var(--color-primary) 15%,
+    var(--color-background)
+  );
+  color: var(--color-primary);
+  border-color: color-mix(
+    in oklch,
+    var(--color-primary) 30%,
+    var(--color-border)
+  );
+}
+
+.success {
+  background-color: var(--color-success-subtle);
+  color: var(--color-success-foreground);
+  border-color: color-mix(
+    in oklch,
+    var(--color-success-foreground) 24%,
+    var(--color-border)
+  );
+}
+
+.warning {
+  background-color: var(--color-warning-subtle);
+  color: var(--color-warning-foreground);
+  border-color: color-mix(
+    in oklch,
+    var(--color-warning-foreground) 24%,
+    var(--color-border)
+  );
+}
+
+.error {
+  background-color: var(--color-error-subtle);
+  color: var(--color-error-foreground);
+  border-color: color-mix(
+    in oklch,
+    var(--color-error-foreground) 24%,
+    var(--color-border)
+  );
+}
+
+.info {
+  background-color: var(--color-info-subtle);
+  color: var(--color-info-foreground);
+  border-color: color-mix(
+    in oklch,
+    var(--color-info-foreground) 24%,
+    var(--color-border)
+  );
+}
+
+/* Count badge (small circle) */
+.count {
+  min-width: var(--spacing-7);
+  min-height: var(--spacing-7);
+  padding: var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius-md);
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
+  font-size: var(--font-size-xs);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  letter-spacing: var(--letter-spacing-normal);
+  box-shadow: var(--shadow-sm);
+}

package/registry/components/ui/badge/badge.tsx

@@ -0,0 +1,29 @@
+import clsx from "clsx";
+import s from "./badge.module.css";
+
+type BadgeVariant = "default" | "primary" | "success" | "warning" | "error" | "info";
+type BadgeSize = "default" | "sm";
+
+type BadgeProps = {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  className?: string;
+  children: React.ReactNode;
+};
+
+export function Badge({ variant = "default", size = "default", className, children }: BadgeProps) {
+  return (
+    <span className={clsx(s.base, s[variant], size === "sm" && s.sm, className)}>
+      {children}
+    </span>
+  );
+}
+
+export function CountBadge({ count, className }: { count: number; className?: string }) {
+  if (count <= 0) return null;
+  return (
+    <span className={clsx(s.count, className)} aria-label={`${count} notifications`}>
+      {count > 99 ? "99+" : count}
+    </span>
+  );
+}