@oppulence/design-system 1.0.2

package/src/components/molecules/command-search.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import * as React from "react";
+import { SearchIcon } from "lucide-react";
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from "../organisms/command";
+import { Kbd } from "../atoms/kbd";
+
+// ============ TYPES ============
+
+export interface CommandSearchItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  shortcut?: string;
+  onSelect?: () => void;
+  keywords?: string[];
+}
+
+export interface CommandSearchGroup {
+  id: string;
+  label: string;
+  items: CommandSearchItem[];
+}
+
+export interface CommandSearchProps {
+  /** Placeholder text for the search input */
+  placeholder?: string;
+  /** Text shown when no results are found */
+  emptyText?: string;
+  /** Groups of searchable items */
+  groups?: CommandSearchGroup[];
+  /** Flat list of items (alternative to groups) */
+  items?: CommandSearchItem[];
+  /** Callback when an item is selected */
+  onSelect?: (item: CommandSearchItem) => void;
+  /** Controlled open state */
+  open?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Whether to show the trigger input */
+  showTrigger?: boolean;
+  /** Width of the trigger input */
+  triggerWidth?: "sm" | "md" | "lg" | "full";
+}
+
+// ============ COMPONENT ============
+
+function CommandSearch({
+  placeholder = "Search...",
+  emptyText = "No results found.",
+  groups = [],
+  items = [],
+  onSelect,
+  open: openProp,
+  onOpenChange,
+  showTrigger = true,
+  triggerWidth = "md",
+}: CommandSearchProps) {
+  const [_open, _setOpen] = React.useState(false);
+  const open = openProp ?? _open;
+  const setOpen = onOpenChange ?? _setOpen;
+
+  // Listen for Cmd+K / Ctrl+K
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen(!open);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, setOpen]);
+
+  const handleSelect = (item: CommandSearchItem) => {
+    setOpen(false);
+    item.onSelect?.();
+    onSelect?.(item);
+  };
+
+  const widthClasses = {
+    sm: "w-48 md:w-56",
+    md: "w-56 md:w-72",
+    lg: "w-72 md:w-96",
+    full: "w-full max-w-md",
+  };
+
+  // Combine flat items into a default group if provided
+  const allGroups =
+    items.length > 0
+      ? [{ id: "default", label: "", items }, ...groups]
+      : groups;
+
+  return (
+    <>
+      {showTrigger && (
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className={`${widthClasses[triggerWidth]} inline-flex items-center gap-2 rounded-lg border border-input/50 bg-background/50 px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-background hover:border-input focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
+        >
+          <SearchIcon className="size-4" />
+          <span className="flex-1 text-left">{placeholder}</span>
+          <Kbd>⌘K</Kbd>
+        </button>
+      )}
+
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <Command>
+          <CommandInput placeholder={placeholder} />
+          <CommandList>
+            <CommandEmpty>{emptyText}</CommandEmpty>
+            {allGroups.map((group) => (
+              <CommandGroup key={group.id} heading={group.label || undefined}>
+                {group.items.map((item) => (
+                  <CommandItem
+                    key={item.id}
+                    value={item.label}
+                    keywords={item.keywords}
+                    onSelect={() => handleSelect(item)}
+                  >
+                    {item.icon}
+                    <span>{item.label}</span>
+                    {item.shortcut && (
+                      <CommandShortcut>{item.shortcut}</CommandShortcut>
+                    )}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            ))}
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </>
+  );
+}
+
+export { CommandSearch };

package/src/components/molecules/empty.tsx

@@ -0,0 +1,98 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+function Empty({ ...props }: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="empty"
+      className="gap-4 rounded-lg border-dashed p-12 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance"
+      {...props}
+    />
+  );
+}
+
+function EmptyHeader({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className="gap-2 flex max-w-sm flex-col items-center"
+      {...props}
+    />
+  );
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function EmptyMedia({
+  variant = "default",
+  ...props
+}: Omit<React.ComponentProps<"div">, "className"> &
+  VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={emptyMediaVariants({ variant })}
+      {...props}
+    />
+  );
+}
+
+function EmptyTitle({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className="text-lg font-medium tracking-tight"
+      {...props}
+    />
+  );
+}
+
+function EmptyDescription({
+  ...props
+}: Omit<React.ComponentProps<"p">, "className">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className="text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4"
+      {...props}
+    />
+  );
+}
+
+function EmptyContent({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className="gap-4 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance"
+      {...props}
+    />
+  );
+}
+
+export {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+};

package/src/components/molecules/field.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { useMemo } from "react";
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+
+function FieldSet({
+  ...props
+}: Omit<React.ComponentProps<"fieldset">, "className">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className="gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col"
+      {...props}
+    />
+  );
+}
+
+function FieldLegend({
+  variant = "legend",
+  ...props
+}: Omit<React.ComponentProps<"legend">, "className"> & {
+  variant?: "legend" | "label";
+}) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className="mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base"
+      {...props}
+    />
+  );
+}
+
+function FieldGroup({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="field-group"
+      className="gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col"
+      {...props}
+    />
+  );
+}
+
+const fieldVariants = cva(
+  "data-[invalid=true]:text-destructive gap-2 group/field flex w-full",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  },
+);
+
+function Field({
+  orientation = "vertical",
+  ...props
+}: Omit<React.ComponentProps<"div">, "className"> &
+  VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={fieldVariants({ orientation })}
+      {...props}
+    />
+  );
+}
+
+function FieldContent({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="field-content"
+      className="gap-0.5 group/field-content flex flex-1 flex-col leading-snug"
+      {...props}
+    />
+  );
+}
+
+function FieldLabel({
+  ...props
+}: Omit<React.ComponentProps<"label">, "className">) {
+  return (
+    <label
+      data-slot="field-label"
+      className="gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5 group/field-label peer/field-label w-fit leading-snug has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col"
+      {...props}
+    />
+  );
+}
+
+function FieldTitle({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="field-label"
+      className="gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug"
+      {...props}
+    />
+  );
+}
+
+function FieldDescription({
+  ...props
+}: Omit<React.ComponentProps<"p">, "className">) {
+  return (
+    <p
+      data-slot="field-description"
+      className="text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4"
+      {...props}
+    />
+  );
+}
+
+function FieldSeparator({
+  children,
+  ...props
+}: Omit<React.ComponentProps<"div">, "className"> & {
+  children?: React.ReactNode;
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className="-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative"
+      {...props}
+    >
+      <SeparatorPrimitive className="bg-border shrink-0 h-px w-full absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function FieldError({
+  children,
+  errors,
+  ...props
+}: Omit<React.ComponentProps<"div">, "className"> & {
+  errors?: Array<{ message?: string } | undefined>;
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+
+    if (!errors?.length) {
+      return null;
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ];
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>,
+        )}
+      </ul>
+    );
+  }, [children, errors]);
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className="text-destructive text-sm font-normal"
+      {...props}
+    >
+      {content}
+    </div>
+  );
+}
+
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+};

package/src/components/molecules/grid.tsx

@@ -0,0 +1,141 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../../../lib/utils";
+
+const gridVariants = cva("grid", {
+  variants: {
+    gap: {
+      "0": "gap-0",
+      "1": "gap-1",
+      "2": "gap-2",
+      "3": "gap-3",
+      "4": "gap-4",
+      "5": "gap-5",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12",
+    },
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch",
+    },
+  },
+  defaultVariants: {
+    gap: "4",
+    align: "stretch",
+  },
+});
+
+const gridColsVariants = cva("", {
+  variants: {
+    cols: {
+      "1": "grid-cols-1",
+      "2": "grid-cols-2",
+      "3": "grid-cols-3",
+      "4": "grid-cols-4",
+      "5": "grid-cols-5",
+      "6": "grid-cols-6",
+      "12": "grid-cols-12",
+    },
+  },
+  defaultVariants: {
+    cols: "1",
+  },
+});
+
+type ResponsiveCols = {
+  base?: "1" | "2" | "3" | "4" | "5" | "6" | "12";
+  sm?: "1" | "2" | "3" | "4" | "5" | "6" | "12";
+  md?: "1" | "2" | "3" | "4" | "5" | "6" | "12";
+  lg?: "1" | "2" | "3" | "4" | "5" | "6" | "12";
+  xl?: "1" | "2" | "3" | "4" | "5" | "6" | "12";
+};
+
+const responsiveColsMap: Record<string, Record<string, string>> = {
+  base: {
+    "1": "grid-cols-1",
+    "2": "grid-cols-2",
+    "3": "grid-cols-3",
+    "4": "grid-cols-4",
+    "5": "grid-cols-5",
+    "6": "grid-cols-6",
+    "12": "grid-cols-12",
+  },
+  sm: {
+    "1": "sm:grid-cols-1",
+    "2": "sm:grid-cols-2",
+    "3": "sm:grid-cols-3",
+    "4": "sm:grid-cols-4",
+    "5": "sm:grid-cols-5",
+    "6": "sm:grid-cols-6",
+    "12": "sm:grid-cols-12",
+  },
+  md: {
+    "1": "md:grid-cols-1",
+    "2": "md:grid-cols-2",
+    "3": "md:grid-cols-3",
+    "4": "md:grid-cols-4",
+    "5": "md:grid-cols-5",
+    "6": "md:grid-cols-6",
+    "12": "md:grid-cols-12",
+  },
+  lg: {
+    "1": "lg:grid-cols-1",
+    "2": "lg:grid-cols-2",
+    "3": "lg:grid-cols-3",
+    "4": "lg:grid-cols-4",
+    "5": "lg:grid-cols-5",
+    "6": "lg:grid-cols-6",
+    "12": "lg:grid-cols-12",
+  },
+  xl: {
+    "1": "xl:grid-cols-1",
+    "2": "xl:grid-cols-2",
+    "3": "xl:grid-cols-3",
+    "4": "xl:grid-cols-4",
+    "5": "xl:grid-cols-5",
+    "6": "xl:grid-cols-6",
+    "12": "xl:grid-cols-12",
+  },
+};
+
+const getResponsiveClasses = (cols: ResponsiveCols): string => {
+  const classes: string[] = [];
+  const withBase: ResponsiveCols = cols.base ? cols : { base: "1", ...cols };
+
+  for (const [breakpoint, value] of Object.entries(withBase)) {
+    if (value && responsiveColsMap[breakpoint]?.[value]) {
+      classes.push(responsiveColsMap[breakpoint][value]);
+    }
+  }
+
+  return classes.join(" ");
+};
+
+interface GridProps
+  extends
+    Omit<React.ComponentProps<"div">, "cols" | "className">,
+    VariantProps<typeof gridVariants> {
+  cols?: "1" | "2" | "3" | "4" | "5" | "6" | "12" | ResponsiveCols;
+}
+
+function Grid({ cols = "1", gap, align, ...props }: GridProps) {
+  const colsClasses =
+    typeof cols === "object"
+      ? getResponsiveClasses(cols)
+      : gridColsVariants({ cols });
+
+  return (
+    <div
+      data-slot="grid"
+      className={cn(gridVariants({ gap, align }), colsClasses)}
+      {...props}
+    />
+  );
+}
+
+export { Grid, gridVariants };

package/src/components/molecules/hover-card.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+
+function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
+  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
+  return (
+    <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  );
+}
+
+function HoverCardContent({
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 4,
+  ...props
+}: Omit<PreviewCardPrimitive.Popup.Props, "className"> &
+  Pick<
+    PreviewCardPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <PreviewCardPrimitive.Portal data-slot="hover-card-portal">
+      <PreviewCardPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PreviewCardPrimitive.Popup
+          data-slot="hover-card-content"
+          className="data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-4 text-sm shadow-md ring-1 duration-100 z-50 origin-(--transform-origin) outline-hidden"
+          {...props}
+        />
+      </PreviewCardPrimitive.Positioner>
+    </PreviewCardPrimitive.Portal>
+  );
+}
+
+export { HoverCard, HoverCardContent, HoverCardTrigger };

package/src/components/molecules/index.ts

@@ -0,0 +1,29 @@
+export * from "./accordion";
+export * from "./ai-chat";
+export * from "./alert";
+export * from "./breadcrumb";
+export * from "./button-group";
+export * from "./card";
+export * from "./collapsible";
+export * from "./command-search";
+export * from "./empty";
+export * from "./field";
+export * from "./grid";
+export * from "./hover-card";
+export * from "./input-group";
+export * from "./input-otp";
+export * from "./item";
+export * from "./page-header";
+export * from "./pagination";
+export * from "./popover";
+export * from "./radio-group";
+export * from "./resizable";
+export * from "./scroll-area";
+export * from "./section";
+export * from "./select";
+export * from "./settings";
+export * from "./table";
+export * from "./tabs";
+export * from "./theme-switcher";
+export * from "./toggle-group";
+export * from "./tooltip";