@emara/ui 1.1.0

package/components/ui/breadcrumb.tsx

@@ -0,0 +1,302 @@
+"use client";
+
+import { Fragment, forwardRef, useMemo } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { RiArrowRightSLine, RiMoreLine } from "@remixicon/react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+
+// Per docs/emara-ui-phase-5-components.md §5.
+
+// ===========================================================================
+// Primitives (anatomy mirrors shadcn)
+// ===========================================================================
+
+const breadcrumbVariants = cva("flex items-center w-full", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base",
+    },
+  },
+  defaultVariants: { size: "md" },
+});
+
+type BreadcrumbVariants = VariantProps<typeof breadcrumbVariants>;
+
+type BreadcrumbProps = React.HTMLAttributes<HTMLElement> & BreadcrumbVariants;
+
+const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(function Breadcrumb(
+  { className, size, ...props },
+  ref,
+) {
+  return (
+    <nav
+      ref={ref}
+      aria-label="Breadcrumb"
+      className={cn(breadcrumbVariants({ size }), className)}
+      {...props}
+    />
+  );
+});
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = forwardRef<HTMLOListElement, React.OlHTMLAttributes<HTMLOListElement>>(
+  function BreadcrumbList({ className, ...props }, ref) {
+    return (
+      <ol
+        ref={ref}
+        className={cn(
+          "flex flex-wrap items-center gap-1.5 text-muted-foreground",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = forwardRef<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>>(
+  function BreadcrumbItem({ className, ...props }, ref) {
+    return (
+      <li
+        ref={ref}
+        className={cn("inline-flex items-center gap-1.5", className)}
+        {...props}
+      />
+    );
+  },
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+type BreadcrumbLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+  asChild?: boolean;
+};
+
+const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
+  function BreadcrumbLink({ className, asChild = false, ...props }, ref) {
+    const Comp = asChild ? Slot : "a";
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          "inline-flex items-center gap-1 transition-colors hover:text-foreground hover:underline underline-offset-2 cursor-pointer",
+          "[&_svg]:size-3.5 [&_svg]:shrink-0",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  function BreadcrumbPage({ className, ...props }, ref) {
+    return (
+      <span
+        ref={ref}
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        className={cn(
+          "inline-flex items-center gap-1 font-medium text-foreground",
+          "[&_svg]:size-3.5 [&_svg]:shrink-0",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = forwardRef<HTMLLIElement, React.HTMLAttributes<HTMLLIElement>>(
+  function BreadcrumbSeparator({ className, children, ...props }, ref) {
+    return (
+      <li
+        ref={ref}
+        role="presentation"
+        aria-hidden="true"
+        className={cn(
+          "[&_svg]:size-3.5 [&_svg]:shrink-0 text-muted-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {children ?? <RiArrowRightSLine className="rtl-mirror" />}
+      </li>
+    );
+  },
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  function BreadcrumbEllipsis({ className, ...props }, ref) {
+    return (
+      <span
+        ref={ref}
+        role="presentation"
+        aria-hidden="true"
+        className={cn(
+          "inline-flex size-6 items-center justify-center [&_svg]:size-4 [&_svg]:shrink-0",
+          className,
+        )}
+        {...props}
+      >
+        <RiMoreLine />
+        <span className="sr-only">More items</span>
+      </span>
+    );
+  },
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+
+// ===========================================================================
+// Smart Breadcrumbs (Emara addition)
+// ===========================================================================
+
+interface BreadcrumbsItem {
+  label: React.ReactNode;
+  href?: string;
+  icon?: React.ReactNode;
+}
+
+interface BreadcrumbsProps extends BreadcrumbVariants {
+  items: BreadcrumbsItem[];
+  separator?: React.ReactNode;
+  maxItems?: number;
+  itemsBeforeCollapse?: number;
+  itemsAfterCollapse?: number;
+  className?: string;
+}
+
+const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(function Breadcrumbs(
+  {
+    items,
+    separator,
+    maxItems,
+    itemsBeforeCollapse = 1,
+    itemsAfterCollapse = 1,
+    size,
+    className,
+  },
+  ref,
+) {
+  const shouldCollapse =
+    maxItems !== undefined &&
+    items.length > maxItems &&
+    items.length > itemsBeforeCollapse + itemsAfterCollapse;
+
+  const { start, hidden, end } = useMemo(() => {
+    if (!shouldCollapse) {
+      return { start: items, hidden: [] as BreadcrumbsItem[], end: [] as BreadcrumbsItem[] };
+    }
+    return {
+      start: items.slice(0, itemsBeforeCollapse),
+      hidden: items.slice(itemsBeforeCollapse, items.length - itemsAfterCollapse),
+      end: items.slice(items.length - itemsAfterCollapse),
+    };
+  }, [items, itemsBeforeCollapse, itemsAfterCollapse, shouldCollapse]);
+
+  function renderItem(item: BreadcrumbsItem, isLast: boolean) {
+    const content = (
+      <>
+        {item.icon ? <span aria-hidden="true">{item.icon}</span> : null}
+        <span>{item.label}</span>
+      </>
+    );
+    if (!item.href || isLast) {
+      return <BreadcrumbPage>{content}</BreadcrumbPage>;
+    }
+    return <BreadcrumbLink href={item.href}>{content}</BreadcrumbLink>;
+  }
+
+  return (
+    <Breadcrumb ref={ref} {...(size !== undefined ? { size } : {})} className={className}>
+      <BreadcrumbList>
+        {start.map((item, idx) => {
+          const isLast = !shouldCollapse && idx === items.length - 1;
+          const showSeparator = idx < start.length - 1 || shouldCollapse || end.length > 0;
+          return (
+            <Fragment key={`s-${idx}`}>
+              <BreadcrumbItem>{renderItem(item, isLast)}</BreadcrumbItem>
+              {showSeparator ? (
+                <BreadcrumbSeparator>{separator}</BreadcrumbSeparator>
+              ) : null}
+            </Fragment>
+          );
+        })}
+
+        {shouldCollapse && hidden.length > 0 ? (
+          <>
+            <BreadcrumbItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  aria-label="Show more"
+                  className="inline-flex items-center justify-center rounded p-0.5 cursor-pointer hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  <BreadcrumbEllipsis />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  {hidden.map((item, idx) => (
+                    <DropdownMenuItem
+                      key={idx}
+                      {...(item.icon ? { icon: item.icon } : {})}
+                      onSelect={() => {
+                        if (item.href && typeof window !== "undefined") {
+                          window.location.href = item.href;
+                        }
+                      }}
+                    >
+                      {item.label}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator>{separator}</BreadcrumbSeparator>
+          </>
+        ) : null}
+
+        {end.map((item, idx) => {
+          const isLast = idx === end.length - 1;
+          return (
+            <Fragment key={`e-${idx}`}>
+              <BreadcrumbItem>{renderItem(item, isLast)}</BreadcrumbItem>
+              {!isLast ? <BreadcrumbSeparator>{separator}</BreadcrumbSeparator> : null}
+            </Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+});
+Breadcrumbs.displayName = "Breadcrumbs";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+  Breadcrumbs,
+  breadcrumbVariants,
+};
+export type {
+  BreadcrumbProps,
+  BreadcrumbLinkProps,
+  BreadcrumbsItem,
+  BreadcrumbsProps,
+};

package/components/ui/button.stories.tsx

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { RiArrowRightLine, RiDownloadLine, RiSearchLine } from "@remixicon/react";
+
+import { Button } from "./button";
+
+const meta: Meta<typeof Button> = {
+  title: "Foundations/Button",
+  component: Button,
+  parameters: { layout: "centered" },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [
+        "default",
+        "secondary",
+        "outline",
+        "ghost",
+        "destructive",
+        "link",
+        "success",
+        "warning",
+        "info",
+      ],
+    },
+    size: {
+      control: "select",
+      options: [
+        "xs",
+        "sm",
+        "default",
+        "lg",
+        "xl",
+        "icon-xs",
+        "icon-sm",
+        "icon",
+        "icon-lg",
+        "icon-xl",
+      ],
+    },
+    loading: { control: "boolean" },
+    disabled: { control: "boolean" },
+    fullWidth: { control: "boolean" },
+  },
+  args: {
+    children: "Button",
+    variant: "default",
+    size: "default",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: (args) => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button {...args} variant="default">
+        Default
+      </Button>
+      <Button {...args} variant="secondary">
+        Secondary
+      </Button>
+      <Button {...args} variant="outline">
+        Outline
+      </Button>
+      <Button {...args} variant="ghost">
+        Ghost
+      </Button>
+      <Button {...args} variant="destructive">
+        Destructive
+      </Button>
+      <Button {...args} variant="link">
+        Link
+      </Button>
+      <Button {...args} variant="success">
+        Success
+      </Button>
+      <Button {...args} variant="warning">
+        Warning
+      </Button>
+      <Button {...args} variant="info">
+        Info
+      </Button>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: (args) => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button {...args} size="xs">
+        xs
+      </Button>
+      <Button {...args} size="sm">
+        sm
+      </Button>
+      <Button {...args} size="default">
+        default
+      </Button>
+      <Button {...args} size="lg">
+        lg
+      </Button>
+      <Button {...args} size="xl">
+        xl
+      </Button>
+    </div>
+  ),
+};
+
+export const IconSizes: Story = {
+  render: (args) => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button {...args} size="icon-xs" aria-label="Search">
+        <RiSearchLine />
+      </Button>
+      <Button {...args} size="icon-sm" aria-label="Search">
+        <RiSearchLine />
+      </Button>
+      <Button {...args} size="icon" aria-label="Search">
+        <RiSearchLine />
+      </Button>
+      <Button {...args} size="icon-lg" aria-label="Search">
+        <RiSearchLine />
+      </Button>
+      <Button {...args} size="icon-xl" aria-label="Search">
+        <RiSearchLine />
+      </Button>
+    </div>
+  ),
+};
+
+export const WithIcons: Story = {
+  args: {
+    leftIcon: <RiDownloadLine />,
+    rightIcon: <RiArrowRightLine className="rtl-mirror" />,
+    children: "Continue",
+  },
+};
+
+export const Loading: Story = {
+  args: { loading: true, children: "Save" },
+};
+
+export const LoadingWithText: Story = {
+  args: { loading: true, loadingText: "Saving…", children: "Save" },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, children: "Disabled" },
+};
+
+export const FullWidth: Story = {
+  args: { fullWidth: true, children: "Full width" },
+  parameters: { layout: "padded" },
+  render: (args) => (
+    <div className="w-80">
+      <Button {...args} />
+    </div>
+  ),
+};
+
+export const AsChildLink: Story = {
+  args: { asChild: true, variant: "link" },
+  render: (args) => (
+    <Button {...args}>
+      <a href="https://example.com">Anchor styled as Button</a>
+    </Button>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <div className="grid grid-cols-4 gap-3">
+      <Button>Default</Button>
+      <Button data-state="hover" className="hover:bg-primary/90">
+        Hover
+      </Button>
+      <Button disabled>Disabled</Button>
+      <Button loading loadingText="Loading">
+        Loading
+      </Button>
+    </div>
+  ),
+};

package/components/ui/button.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { RiLoader2Line } from "@remixicon/react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+// Per docs/emara-ui-phase-1-components.md §1.
+
+const buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap",
+    "rounded-md text-sm font-medium select-none cursor-pointer",
+    "transition-colors transition-shadow",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "aria-busy:cursor-progress",
+    "[&_svg]:size-4 [&_svg]:shrink-0",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline:
+          "border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
+        ghost: "text-foreground hover:bg-accent hover:text-accent-foreground",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        link: "text-primary underline-offset-4 hover:underline",
+        success:
+          "bg-success text-primary-foreground hover:bg-success/90 focus-visible:ring-success",
+        warning:
+          "bg-warning text-primary-foreground hover:bg-warning/90 focus-visible:ring-warning",
+        info: "bg-info text-primary-foreground hover:bg-info/90 focus-visible:ring-info",
+      },
+      size: {
+        xs: "h-7 px-2.5 text-xs",
+        sm: "h-8 px-3 text-xs",
+        default: "h-9 px-4 text-sm",
+        lg: "h-10 px-5 text-base",
+        xl: "h-12 px-6 text-base",
+        "icon-xs": "size-7 p-0",
+        "icon-sm": "size-8 p-0",
+        icon: "size-9 p-0",
+        "icon-lg": "size-10 p-0",
+        "icon-xl": "size-12 p-0",
+      },
+      fullWidth: {
+        true: "w-full",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      fullWidth: false,
+    },
+  },
+);
+
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+
+type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> &
+  ButtonVariantProps & {
+    asChild?: boolean;
+    type?: "button" | "submit" | "reset";
+    loading?: boolean;
+    loadingText?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+  };
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    className,
+    variant,
+    size,
+    fullWidth,
+    asChild = false,
+    type = "button",
+    loading = false,
+    loadingText,
+    leftIcon,
+    rightIcon,
+    disabled,
+    children,
+    ...props
+  },
+  ref,
+) {
+  const Comp = asChild ? Slot : "button";
+  const isDisabled = disabled || loading;
+
+  // When `asChild` is true, the Slot pattern requires a single child element —
+  // so spinners/icons are not injected. Consumers compose those themselves.
+  const content = asChild ? (
+    children
+  ) : (
+    <>
+      {loading ? <RiLoader2Line className="animate-spin" /> : leftIcon}
+      {loading && loadingText ? <span>{loadingText}</span> : children}
+      {!loading && rightIcon}
+    </>
+  );
+
+  const compProps = asChild
+    ? { className: cn(buttonVariants({ variant, size, fullWidth }), className), ...props }
+    : {
+        type,
+        disabled: isDisabled,
+        "aria-disabled": isDisabled || undefined,
+        "aria-busy": loading || undefined,
+        className: cn(buttonVariants({ variant, size, fullWidth }), className),
+        ...props,
+      };
+
+  return (
+    <Comp ref={ref} {...compProps}>
+      {content}
+    </Comp>
+  );
+});
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
+export type { ButtonProps };