@oppulence/design-system 1.0.2

package/src/components/molecules/breadcrumb.tsx

@@ -0,0 +1,301 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import * as React from "react";
+
+import {
+  ArrowRightIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+  SlashIcon,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../organisms/dropdown-menu";
+
+interface BreadcrumbItemData {
+  /** The text label for the breadcrumb item */
+  label?: React.ReactNode;
+  /** The href for the link. If omitted on the last item, it becomes the current page */
+  href?: string;
+  /** Whether this item is the current page (auto-detected if last item has no href) */
+  isCurrent?: boolean;
+  /** Render as ellipsis (collapsed items indicator) */
+  isEllipsis?: boolean;
+  /** Additional props to pass to the link or page element */
+  props?: Record<string, unknown>;
+}
+
+type BreadcrumbSeparatorType = "chevron" | "slash" | "arrow";
+
+const separatorIcons: Record<BreadcrumbSeparatorType, React.ReactNode> = {
+  chevron: <ChevronRightIcon />,
+  slash: <SlashIcon />,
+  arrow: <ArrowRightIcon />,
+};
+
+interface BreadcrumbProps extends Omit<
+  React.ComponentProps<"nav">,
+  "children" | "className"
+> {
+  /** Simple API: Array of breadcrumb items */
+  items?: BreadcrumbItemData[];
+  /** Separator style: 'chevron' (default), 'slash', or 'arrow' */
+  separator?: BreadcrumbSeparatorType;
+  /** Max visible items (including ellipsis). Default: 4. Set to 0 to disable auto-collapse. */
+  maxItems?: number;
+  /** Number of items to show at the start before ellipsis. Default: 1 */
+  itemsBeforeCollapse?: number;
+  /** Children for compound component pattern */
+  children?: React.ReactNode;
+}
+
+interface CollapseResult {
+  displayItems: Array<
+    BreadcrumbItemData & { collapsedItems?: BreadcrumbItemData[] }
+  >;
+  hasCollapsed: boolean;
+}
+
+function collapseItems({
+  items,
+  maxItems,
+  itemsBeforeCollapse,
+}: {
+  items: BreadcrumbItemData[];
+  maxItems: number;
+  itemsBeforeCollapse: number;
+}): CollapseResult {
+  // If maxItems is 0 or items already fit, return as-is
+  if (maxItems === 0 || items.length <= maxItems) {
+    return { displayItems: items, hasCollapsed: false };
+  }
+
+  // Ensure we have at least 1 item before ellipsis
+  const before = Math.max(1, Math.min(itemsBeforeCollapse, maxItems - 2));
+
+  // Calculate items after ellipsis: maxItems - before - 1 (for ellipsis)
+  const after = maxItems - before - 1;
+
+  // If we can't fit at least 1 after, no point collapsing
+  if (after < 1) {
+    return { displayItems: items, hasCollapsed: false };
+  }
+
+  // If before + after >= items.length, no need to collapse
+  if (before + after >= items.length) {
+    return { displayItems: items, hasCollapsed: false };
+  }
+
+  const startItems = items.slice(0, before);
+  const collapsedItems = items.slice(before, items.length - after);
+  const endItems = items.slice(items.length - after);
+
+  return {
+    displayItems: [
+      ...startItems,
+      { isEllipsis: true, collapsedItems },
+      ...endItems,
+    ],
+    hasCollapsed: true,
+  };
+}
+
+function Breadcrumb({
+  items,
+  separator = "chevron",
+  maxItems = 4,
+  itemsBeforeCollapse = 1,
+  children,
+  ...props
+}: BreadcrumbProps) {
+  // If items prop is provided, render simple API
+  if (items && items.length > 0) {
+    const separatorIcon = separatorIcons[separator];
+
+    // Auto-collapse if needed
+    const { displayItems } = collapseItems({
+      items,
+      maxItems,
+      itemsBeforeCollapse,
+    });
+
+    return (
+      <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props}>
+        <BreadcrumbList>
+          {displayItems.map((item, index) => {
+            const isLast = index === displayItems.length - 1;
+            const isCurrent =
+              item.isCurrent ?? (isLast && !item.href && !item.isEllipsis);
+            const collapsedItems =
+              "collapsedItems" in item ? item.collapsedItems : undefined;
+
+            return (
+              <React.Fragment key={index}>
+                <BreadcrumbItem>
+                  {item.isEllipsis ? (
+                    <BreadcrumbEllipsisMenu collapsedItems={collapsedItems} />
+                  ) : isCurrent ? (
+                    <BreadcrumbPage {...item.props}>
+                      {item.label}
+                    </BreadcrumbPage>
+                  ) : (
+                    <BreadcrumbLink href={item.href} {...item.props}>
+                      {item.label}
+                    </BreadcrumbLink>
+                  )}
+                </BreadcrumbItem>
+                {!isLast && (
+                  <BreadcrumbSeparator>{separatorIcon}</BreadcrumbSeparator>
+                )}
+              </React.Fragment>
+            );
+          })}
+        </BreadcrumbList>
+      </nav>
+    );
+  }
+
+  // Otherwise, render compound component pattern
+  return (
+    <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props}>
+      {children}
+    </nav>
+  );
+}
+
+function BreadcrumbList({
+  ...props
+}: Omit<React.ComponentProps<"ol">, "className">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className="text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words"
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({
+  ...props
+}: Omit<React.ComponentProps<"li">, "className">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className="gap-1.5 inline-flex items-center"
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  render,
+  ...props
+}: Omit<useRender.ComponentProps<"a">, "className">) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: "hover:text-foreground transition-colors",
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "breadcrumb-link",
+    },
+  });
+}
+
+function BreadcrumbPage({
+  ...props
+}: Omit<React.ComponentProps<"span">, "className">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className="text-foreground font-normal"
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  ...props
+}: Omit<React.ComponentProps<"li">, "className">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className="[&>svg]:size-3.5"
+      {...props}
+    >
+      {children ?? <ChevronRightIcon />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  ...props
+}: Omit<React.ComponentProps<"span">, "className">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className="size-5 [&>svg]:size-4 flex items-center justify-center"
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+function BreadcrumbEllipsisMenu({
+  collapsedItems,
+}: {
+  collapsedItems?: BreadcrumbItemData[];
+}) {
+  if (!collapsedItems || collapsedItems.length === 0) {
+    return <BreadcrumbEllipsis />;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        variant="ellipsis"
+        aria-label="Show hidden breadcrumb items"
+      >
+        <MoreHorizontalIcon />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        {collapsedItems.map((item, index) => (
+          <DropdownMenuItem
+            key={index}
+            render={item.href ? <a href={item.href} /> : undefined}
+          >
+            {item.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};
+export type { BreadcrumbItemData, BreadcrumbSeparatorType };

package/src/components/molecules/button-group.tsx

@@ -0,0 +1,96 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const buttonGroupVariants = cva(
+  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 [&>[data-slot]]:rounded-r-none",
+        vertical:
+          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+const buttonGroupTextVariants = cva(
+  "gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        display:
+          "bg-background border-y border-x-0 min-w-[60px] justify-center tabular-nums",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function ButtonGroup({
+  orientation,
+  ...props
+}: Omit<React.ComponentProps<"div">, "className"> &
+  VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={buttonGroupVariants({ orientation })}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupText({
+  variant,
+  render,
+  ...props
+}: Omit<useRender.ComponentProps<"div">, "className"> &
+  VariantProps<typeof buttonGroupTextVariants>) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: buttonGroupTextVariants({ variant }),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "button-group-text",
+      variant,
+    },
+  });
+}
+
+function ButtonGroupSeparator({
+  orientation = "vertical",
+  ...props
+}: Omit<SeparatorPrimitive.Props, "className">) {
+  return (
+    <SeparatorPrimitive
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className="bg-input shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch relative data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto"
+      {...props}
+    />
+  );
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+};

package/src/components/molecules/card.tsx

@@ -0,0 +1,184 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+const cardVariants = cva(
+  "bg-card text-card-foreground border border-border/40 shadow-[0_1px_3px_0_rgb(0_0_0/0.06)] gap-4 overflow-hidden rounded-xl py-4 text-sm has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
+  {
+    variants: {
+      width: {
+        auto: "", // shrink to content (default behavior)
+        full: "w-full", // fill parent container
+        sm: "w-sm", // 24rem (384px)
+        md: "w-md", // 28rem (448px)
+        lg: "w-lg", // 32rem (512px)
+        xl: "w-xl", // 36rem (576px)
+        "2xl": "w-2xl", // 42rem (672px)
+        "3xl": "w-3xl", // 48rem (768px)
+      },
+      maxWidth: {
+        sm: "max-w-sm",
+        md: "max-w-md",
+        lg: "max-w-lg",
+        xl: "max-w-xl",
+        "2xl": "max-w-2xl",
+        "3xl": "max-w-3xl",
+        full: "max-w-full",
+      },
+      spacing: {
+        default: "",
+        tight: "gap-3",
+        relaxed: "gap-6",
+      },
+    },
+    defaultVariants: {
+      width: "auto",
+      spacing: "default",
+    },
+  },
+);
+
+interface CardProps
+  extends
+    Omit<React.ComponentProps<"div">, "className" | "title">,
+    VariantProps<typeof cardVariants> {
+  size?: "default" | "sm";
+  /** Card title - renders in CardHeader */
+  title?: React.ReactNode;
+  /** Card description - renders below title in CardHeader */
+  description?: React.ReactNode;
+  /** Action element(s) in the header (e.g., buttons, badges) */
+  headerAction?: React.ReactNode;
+  /** Footer content */
+  footer?: React.ReactNode;
+}
+
+function Card({
+  size = "default",
+  width,
+  maxWidth,
+  title,
+  description,
+  headerAction,
+  footer,
+  children,
+  ...props
+}: CardProps) {
+  const hasHeader = title || description || headerAction;
+
+  // Check if children contain compound components (have data-slot)
+  const hasCompoundChildren = React.Children.toArray(children).some((child) => {
+    if (React.isValidElement(child)) {
+      const props = child.props as Record<string, unknown>;
+      return (
+        props["data-slot"] === "card-header" ||
+        props["data-slot"] === "card-content" ||
+        props["data-slot"] === "card-footer"
+      );
+    }
+    return false;
+  });
+
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cardVariants({ width, maxWidth })}
+      {...props}
+    >
+      {hasHeader && (
+        <CardHeader>
+          {title && <CardTitle>{title}</CardTitle>}
+          {description && <CardDescription>{description}</CardDescription>}
+          {headerAction && <CardAction>{headerAction}</CardAction>}
+        </CardHeader>
+      )}
+      {hasCompoundChildren
+        ? children
+        : children && <CardContent>{children}</CardContent>}
+      {footer && <CardFooter>{footer}</CardFooter>}
+    </div>
+  );
+}
+
+function CardHeader({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="card-header"
+      className="gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]"
+      {...props}
+    />
+  );
+}
+
+function CardTitle({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="card-title"
+      className="text-base leading-snug font-medium group-data-[size=sm]/card:text-sm"
+      {...props}
+    />
+  );
+}
+
+function CardDescription({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="card-description"
+      className="text-muted-foreground text-sm"
+      {...props}
+    />
+  );
+}
+
+function CardAction({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="card-action"
+      className="col-start-2 row-span-2 row-start-1 self-start justify-self-end"
+      {...props}
+    />
+  );
+}
+
+function CardContent({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="card-content"
+      className="px-4 group-data-[size=sm]/card:px-3"
+      {...props}
+    />
+  );
+}
+
+function CardFooter({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className="bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center"
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  cardVariants,
+};

package/src/components/molecules/collapsible.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
+  return (
+    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
+  );
+}
+
+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+  return (
+    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+  );
+}
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };