@oppulence/design-system 1.0.2

package/src/components/molecules/settings.tsx

@@ -0,0 +1,197 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { Heading } from "../atoms/heading";
+import { Stack } from "../atoms/stack";
+import { Text } from "../atoms/text";
+
+const settingRowVariants = cva(
+  "flex w-full items-start justify-between gap-4 py-4 first:pt-0 last:pb-0",
+  {
+    variants: {
+      size: {
+        default: "py-4",
+        sm: "py-3",
+        lg: "py-5",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+interface SettingRowProps
+  extends
+    Omit<React.ComponentProps<"div">, "className">,
+    VariantProps<typeof settingRowVariants> {
+  /** The setting label */
+  label: string;
+  /** Optional description text */
+  description?: string;
+  /** Whether the setting is disabled */
+  disabled?: boolean;
+}
+
+/**
+ * A horizontal row for a single setting with label/description on the left
+ * and a control (switch, button, select, etc.) on the right.
+ */
+function SettingRow({
+  label,
+  description,
+  disabled,
+  size,
+  children,
+  ...props
+}: SettingRowProps) {
+  return (
+    <div
+      data-slot="setting-row"
+      data-disabled={disabled || undefined}
+      className={settingRowVariants({ size })}
+      {...props}
+    >
+      <div className="min-w-0 flex-1">
+        <Stack gap="1">
+          <Text weight="medium" variant={disabled ? "muted" : undefined}>
+            {label}
+          </Text>
+          {description && (
+            <Text size="sm" variant="muted">
+              {description}
+            </Text>
+          )}
+        </Stack>
+      </div>
+      <div className="flex shrink-0 items-center">{children}</div>
+    </div>
+  );
+}
+
+interface SettingGroupProps extends Omit<
+  React.ComponentProps<"div">,
+  "className"
+> {
+  /** Whether to show dividers between rows */
+  divided?: boolean;
+}
+
+/**
+ * Groups multiple SettingRow components together, optionally with dividers.
+ */
+function SettingGroup({
+  divided = true,
+  children,
+  ...props
+}: SettingGroupProps) {
+  return (
+    <div
+      data-slot="setting-group"
+      data-divided={divided || undefined}
+      className={
+        divided
+          ? "[&>[data-slot=setting-row]:not(:last-child)]:border-border [&>[data-slot=setting-row]:not(:last-child)]:border-b"
+          : ""
+      }
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface SettingLabelProps extends Omit<
+  React.ComponentProps<"div">,
+  "className"
+> {}
+
+/**
+ * Custom label area for complex setting rows. Use when you need more than just text.
+ */
+function SettingLabel({ children, ...props }: SettingLabelProps) {
+  return (
+    <div data-slot="setting-label" className="min-w-0 flex-1" {...props}>
+      {children}
+    </div>
+  );
+}
+
+interface SettingControlProps extends Omit<
+  React.ComponentProps<"div">,
+  "className"
+> {}
+
+/**
+ * Control area for setting rows. Use when you need multiple controls or custom layout.
+ */
+function SettingControl({ children, ...props }: SettingControlProps) {
+  return (
+    <div
+      data-slot="setting-control"
+      className="flex shrink-0 items-center gap-2"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface SettingsCardProps extends Omit<
+  React.ComponentProps<"div">,
+  "className"
+> {
+  /** Card title */
+  title: string;
+  /** Optional description */
+  description?: string;
+  /** Hint text shown in footer (left side) */
+  hint?: React.ReactNode;
+  /** Action button/content shown in footer (right side) */
+  action?: React.ReactNode;
+}
+
+/**
+ * A self-contained settings card with title, description, content area, and footer.
+ * Footer shows hint text on left and action button on right.
+ */
+function SettingsCard({
+  title,
+  description,
+  hint,
+  action,
+  children,
+  ...props
+}: SettingsCardProps) {
+  const hasFooter = hint || action;
+
+  return (
+    <div
+      data-slot="settings-card"
+      className="bg-card text-card-foreground rounded-xl border shadow-sm"
+      {...props}
+    >
+      <div className="px-6 pt-6 pb-4">
+        <Stack gap="1">
+          <Text weight="semibold">{title}</Text>
+          {description && (
+            <Text size="sm" variant="muted">
+              {description}
+            </Text>
+          )}
+        </Stack>
+      </div>
+      <div className="px-6 pb-6">{children}</div>
+      {hasFooter && (
+        <div className="border-t bg-muted/30 px-6 py-4">
+          <div className="flex items-center justify-between gap-4">
+            <div className="text-muted-foreground text-sm">{hint}</div>
+            <div className="flex shrink-0 items-center gap-2">{action}</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { SettingControl, SettingGroup, SettingLabel, SettingRow, SettingsCard };

package/src/components/molecules/table.tsx

@@ -0,0 +1,111 @@
+import * as React from "react";
+
+function Table({
+  variant = "default",
+  ...props
+}: Omit<React.ComponentProps<"table">, "className"> & {
+  variant?: "default" | "bordered";
+}) {
+  return (
+    <div
+      data-slot="table-container"
+      data-variant={variant}
+      className="relative w-full overflow-x-auto data-[variant=bordered]:border data-[variant=bordered]:rounded-lg"
+    >
+      <table
+        data-slot="table"
+        className="w-full caption-bottom text-sm"
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({
+  ...props
+}: Omit<React.ComponentProps<"thead">, "className">) {
+  return (
+    <thead data-slot="table-header" className="[&_tr]:border-b" {...props} />
+  );
+}
+
+function TableBody({
+  ...props
+}: Omit<React.ComponentProps<"tbody">, "className">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className="[&_tr:last-child]:border-0"
+      {...props}
+    />
+  );
+}
+
+function TableFooter({
+  ...props
+}: Omit<React.ComponentProps<"tfoot">, "className">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className="bg-muted/50 border-t font-medium [&>tr]:last:border-b-0"
+      {...props}
+    />
+  );
+}
+
+function TableRow({ ...props }: Omit<React.ComponentProps<"tr">, "className">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className="hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors"
+      {...props}
+    />
+  );
+}
+
+function TableHead({
+  ...props
+}: Omit<React.ComponentProps<"th">, "className">) {
+  return (
+    <th
+      data-slot="table-head"
+      className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0"
+      {...props}
+    />
+  );
+}
+
+function TableCell({
+  ...props
+}: Omit<React.ComponentProps<"td">, "className">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className="p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0"
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  ...props
+}: Omit<React.ComponentProps<"caption">, "className">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className="text-muted-foreground mt-4 text-sm"
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+};

package/src/components/molecules/tabs.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva, type VariantProps } from "class-variance-authority";
+
+function Tabs({
+  orientation = "horizontal",
+  ...props
+}: Omit<TabsPrimitive.Root.Props, "className">) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className="group/tabs flex data-[orientation=horizontal]:flex-col"
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva(
+  "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none data-[variant=underline]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+        underline:
+          "p-0 pb-px bg-transparent w-full justify-start items-stretch shadow-[inset_0_-1px_0_0_var(--color-border)]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function TabsList({
+  variant = "default",
+  ...props
+}: Omit<TabsPrimitive.List.Props, "className"> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={tabsListVariants({ variant })}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ ...props }: Omit<TabsPrimitive.Tab.Props, "className">) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none group-data-[variant=underline]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=underline]/tabs-list:bg-transparent group-data-[variant=underline]/tabs-list:data-active:bg-transparent group-data-[variant=underline]/tabs-list:px-3 group-data-[variant=underline]/tabs-list:py-2 group-data-[variant=underline]/tabs-list:mb-0 group-data-[variant=underline]/tabs-list:hover:bg-muted group-data-[variant=underline]/tabs-list:rounded-t-md group-data-[variant=underline]/tabs-list:flex-none dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=underline]/tabs-list:data-active:border-transparent dark:group-data-[variant=underline]/tabs-list:data-active:bg-transparent data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:after:bg-foreground group-data-[variant=underline]/tabs-list:after:bg-primary group-data-[variant=line]/tabs-list:data-active:after:opacity-100 group-data-[variant=underline]/tabs-list:after:h-[3px] group-data-[variant=underline]/tabs-list:after:bottom-0 group-data-[variant=underline]/tabs-list:after:rounded-t-sm group-data-[variant=underline]/tabs-list:h-auto group-data-[variant=underline]/tabs-list:data-active:after:opacity-100"
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  ...props
+}: Omit<TabsPrimitive.Panel.Props, "className">) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className="text-sm flex-1 outline-none animate-in fade-in-0 duration-200"
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger };

package/src/components/molecules/theme-switcher.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+import * as React from "react";
+
+const themeSwitcherVariants = cva(
+  "inline-flex items-center rounded-full p-0.5 bg-muted",
+  {
+    variants: {
+      size: {
+        sm: "gap-0.5",
+        default: "gap-0.5",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+const themeSwitcherButtonVariants = cva(
+  "inline-flex items-center justify-center rounded-full transition-all duration-200",
+  {
+    variants: {
+      size: {
+        sm: "size-6 [&_svg]:size-3",
+        default: "size-7 [&_svg]:size-3.5",
+      },
+      isActive: {
+        true: "bg-background text-foreground shadow-sm",
+        false: "text-muted-foreground hover:text-foreground",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      isActive: false,
+    },
+  },
+);
+
+type Theme = "light" | "dark" | "system";
+
+interface ThemeSwitcherProps
+  extends
+    Omit<React.ComponentProps<"div">, "className" | "onChange">,
+    VariantProps<typeof themeSwitcherVariants> {
+  /** Current theme value */
+  value?: Theme;
+  /** Default theme value (uncontrolled) */
+  defaultValue?: Theme;
+  /** Called when theme changes */
+  onChange?: (theme: Theme) => void;
+  /** Show system option */
+  showSystem?: boolean;
+}
+
+function ThemeSwitcher({
+  value: valueProp,
+  defaultValue = "system",
+  onChange,
+  showSystem = true,
+  size = "default",
+  ...props
+}: ThemeSwitcherProps) {
+  const [internalValue, setInternalValue] = React.useState<Theme>(defaultValue);
+  const value = valueProp ?? internalValue;
+
+  const handleChange = (newTheme: Theme) => {
+    if (valueProp === undefined) {
+      setInternalValue(newTheme);
+    }
+    onChange?.(newTheme);
+  };
+
+  const options: { value: Theme; icon: React.ReactNode; label: string }[] = [
+    { value: "light", icon: <SunIcon />, label: "Light mode" },
+    { value: "dark", icon: <MoonIcon />, label: "Dark mode" },
+    ...(showSystem
+      ? [
+          {
+            value: "system" as Theme,
+            icon: <MonitorIcon />,
+            label: "System theme",
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <div
+      data-slot="theme-switcher"
+      role="radiogroup"
+      aria-label="Theme"
+      className={themeSwitcherVariants({ size })}
+      {...props}
+    >
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          role="radio"
+          aria-checked={value === option.value}
+          aria-label={option.label}
+          onClick={() => handleChange(option.value)}
+          className={themeSwitcherButtonVariants({
+            size,
+            isActive: value === option.value,
+          })}
+        >
+          {option.icon}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// Simple light/dark toggle for compact spaces
+interface ThemeToggleProps extends Omit<
+  React.ComponentProps<"button">,
+  "className" | "onChange"
+> {
+  /** Current theme - true for dark, false for light */
+  isDark?: boolean;
+  /** Called when theme changes */
+  onChange?: (isDark: boolean) => void;
+  /** Size variant */
+  size?: "sm" | "default";
+}
+
+function ThemeToggle({
+  isDark: isDarkProp,
+  onChange,
+  size = "default",
+  ...props
+}: ThemeToggleProps) {
+  const [internalIsDark, setInternalIsDark] = React.useState(false);
+  const isDark = isDarkProp ?? internalIsDark;
+
+  const handleToggle = () => {
+    const newValue = !isDark;
+    if (isDarkProp === undefined) {
+      setInternalIsDark(newValue);
+    }
+    onChange?.(newValue);
+  };
+
+  const iconSize = size === "sm" ? "size-3" : "size-3.5";
+  const buttonSize = size === "sm" ? "h-6 w-12" : "h-7 w-14";
+  const thumbSize = size === "sm" ? "size-5" : "size-6";
+  const thumbTranslate =
+    size === "sm" ? "translate-x-[26px]" : "translate-x-[30px]";
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={isDark}
+      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      onClick={handleToggle}
+      data-slot="theme-toggle"
+      className={`${buttonSize} relative inline-flex items-center rounded-full bg-muted p-0.5 transition-colors`}
+      {...props}
+    >
+      {/* Background icons */}
+      <span className="absolute inset-0 flex items-center justify-between px-1.5">
+        <SunIcon className={`${iconSize} text-amber-500`} />
+        <MoonIcon className={`${iconSize} text-blue-400`} />
+      </span>
+      {/* Sliding thumb */}
+      <span
+        className={`${thumbSize} relative z-10 flex items-center justify-center rounded-full bg-background shadow-sm transition-transform duration-200 ${
+          isDark ? thumbTranslate : "translate-x-0"
+        }`}
+      >
+        {isDark ? (
+          <MoonIcon className={`${iconSize} text-blue-500`} />
+        ) : (
+          <SunIcon className={`${iconSize} text-amber-500`} />
+        )}
+      </span>
+    </button>
+  );
+}
+
+export { ThemeSwitcher, ThemeToggle };
+export type { ThemeSwitcherProps, ThemeToggleProps, Theme };

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

@@ -0,0 +1,89 @@
+"use client";
+
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../../../lib/utils";
+import { toggleVariants } from "../atoms/toggle";
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+    orientation?: "horizontal" | "vertical";
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+  orientation: "horizontal",
+});
+
+type ToggleGroupProps = Omit<ToggleGroupPrimitive.Props, "className"> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+    orientation?: "horizontal" | "vertical";
+  };
+
+function ToggleGroup({
+  variant,
+  size,
+  spacing = 0,
+  orientation = "horizontal",
+  children,
+  ...props
+}: ToggleGroupProps) {
+  return (
+    <ToggleGroupPrimitive
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className="rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch"
+      {...props}
+    >
+      <ToggleGroupContext.Provider
+        value={{ variant, size, spacing, orientation }}
+      >
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  );
+}
+
+type ToggleGroupItemProps = Omit<TogglePrimitive.Props, "className"> &
+  VariantProps<typeof toggleVariants>;
+
+function ToggleGroupItem({
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}: ToggleGroupItemProps) {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <TogglePrimitive
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        "data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+      )}
+      {...props}
+    >
+      {children}
+    </TogglePrimitive>
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };
+export type { ToggleGroupItemProps, ToggleGroupProps };