@oppulence/design-system 1.0.2

package/src/components/molecules/popover.tsx

@@ -0,0 +1,96 @@
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import * as React from "react";
+
+import { cn } from "../../../lib/utils";
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  className,
+  ...props
+}: PopoverPrimitive.Trigger.Props) {
+  return (
+    <PopoverPrimitive.Trigger
+      data-slot="popover-trigger"
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+function PopoverContent({
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}: Omit<PopoverPrimitive.Popup.Props, "className"> &
+  Pick<
+    PopoverPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className="bg-popover text-popover-foreground 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 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 w-72 origin-(--transform-origin) outline-hidden"
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverHeader({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className="flex flex-col gap-0.5 text-sm"
+      {...props}
+    />
+  );
+}
+
+function PopoverTitle({
+  ...props
+}: Omit<PopoverPrimitive.Title.Props, "className">) {
+  return (
+    <PopoverPrimitive.Title
+      data-slot="popover-title"
+      className="font-medium"
+      {...props}
+    />
+  );
+}
+
+function PopoverDescription({
+  ...props
+}: Omit<PopoverPrimitive.Description.Props, "className">) {
+  return (
+    <PopoverPrimitive.Description
+      data-slot="popover-description"
+      className="text-muted-foreground"
+      {...props}
+    />
+  );
+}
+
+export {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+};

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

@@ -0,0 +1,37 @@
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+
+import { CircleIcon } from "lucide-react";
+
+function RadioGroup({
+  ...props
+}: Omit<RadioGroupPrimitive.Props, "className">) {
+  return (
+    <RadioGroupPrimitive
+      data-slot="radio-group"
+      className="grid gap-2 w-full"
+      {...props}
+    />
+  );
+}
+
+function RadioGroupItem({
+  ...props
+}: Omit<RadioPrimitive.Root.Props, "className">) {
+  return (
+    <RadioPrimitive.Root
+      data-slot="radio-group-item"
+      className="border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50"
+      {...props}
+    >
+      <RadioPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center"
+      >
+        <CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current" />
+      </RadioPrimitive.Indicator>
+    </RadioPrimitive.Root>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };

package/src/components/molecules/resizable.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import * as ResizablePrimitive from "react-resizable-panels";
+
+type ResizablePanelGroupProps = Omit<
+  ResizablePrimitive.GroupProps,
+  "className"
+>;
+
+function ResizablePanelGroup({
+  orientation = "horizontal",
+  ...props
+}: ResizablePanelGroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      data-orientation={orientation}
+      orientation={orientation}
+      className="flex h-full w-full data-[orientation=vertical]:flex-col"
+      {...props}
+    />
+  );
+}
+
+type ResizablePanelProps = Omit<ResizablePrimitive.PanelProps, "className">;
+
+function ResizablePanel({ ...props }: ResizablePanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+type ResizableHandleProps = Omit<
+  ResizablePrimitive.SeparatorProps,
+  "className"
+> & {
+  withHandle?: boolean;
+};
+
+function ResizableHandle({ withHandle, ...props }: ResizableHandleProps) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className="bg-border hover:bg-muted-foreground/20 focus-visible:ring-ring relative flex w-px items-center justify-center transition-colors after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]>div]:rotate-90"
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-1 shrink-0 rounded-full" />
+      )}
+    </ResizablePrimitive.Separator>
+  );
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/src/components/molecules/scroll-area.tsx

@@ -0,0 +1,45 @@
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+
+function ScrollArea({
+  children,
+  ...props
+}: Omit<ScrollAreaPrimitive.Root.Props, "className">) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className="relative overflow-hidden size-full"
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full overflow-auto rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  orientation = "vertical",
+  ...props
+}: Omit<ScrollAreaPrimitive.Scrollbar.Props, "className">) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className="data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none"
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        data-slot="scroll-area-thumb"
+        className="rounded-full bg-border relative flex-1"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };

package/src/components/molecules/section.tsx

@@ -0,0 +1,108 @@
+import * as React from "react";
+
+import { Heading } from "../atoms/heading";
+import { Text } from "../atoms/text";
+import { Stack } from "../atoms/stack";
+
+interface SectionProps extends Omit<
+  React.ComponentProps<"section">,
+  "className"
+> {
+  title?: string;
+  description?: string;
+  actions?: React.ReactNode;
+  /** Gap between header and content. Default is "4" */
+  gap?: "2" | "3" | "4" | "6" | "8";
+}
+
+function Section({
+  title,
+  description,
+  actions,
+  gap = "4",
+  children,
+  ...props
+}: SectionProps) {
+  const hasHeader = title || description || actions;
+
+  return (
+    <section data-slot="section" className="w-full" {...props}>
+      <Stack gap={gap}>
+        {hasHeader && (
+          <div className="flex items-start justify-between gap-4">
+            <Stack gap="1">
+              {title && <Heading level="3">{title}</Heading>}
+              {description && (
+                <Text size="sm" variant="muted">
+                  {description}
+                </Text>
+              )}
+            </Stack>
+            {actions && (
+              <div className="flex shrink-0 items-center gap-2">{actions}</div>
+            )}
+          </div>
+        )}
+        {children}
+      </Stack>
+    </section>
+  );
+}
+
+function SectionHeader({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="section-header"
+      className="flex items-start justify-between gap-4"
+      {...props}
+    />
+  );
+}
+
+function SectionTitle({
+  ...props
+}: Omit<React.ComponentProps<typeof Heading>, "className">) {
+  return <Heading data-slot="section-title" level="3" {...props} />;
+}
+
+function SectionDescription({
+  ...props
+}: Omit<React.ComponentProps<typeof Text>, "className">) {
+  return (
+    <Text
+      data-slot="section-description"
+      size="sm"
+      variant="muted"
+      {...props}
+    />
+  );
+}
+
+function SectionActions({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="section-actions"
+      className="flex shrink-0 items-center gap-2"
+      {...props}
+    />
+  );
+}
+
+function SectionContent({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return <div data-slot="section-content" className="w-full" {...props} />;
+}
+
+export {
+  Section,
+  SectionActions,
+  SectionContent,
+  SectionDescription,
+  SectionHeader,
+  SectionTitle,
+};

package/src/components/molecules/select.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import * as React from "react";
+
+const Select = SelectPrimitive.Root;
+
+function SelectGroup({
+  ...props
+}: Omit<SelectPrimitive.Group.Props, "className">) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className="scroll-my-1 p-1"
+      {...props}
+    />
+  );
+}
+
+function SelectValue({
+  placeholder,
+  ...props
+}: Omit<SelectPrimitive.Value.Props, "className"> & {
+  /** Text to show when no value is selected */
+  placeholder?: string;
+}) {
+  return (
+    <>
+      <SelectPrimitive.Value
+        data-slot="select-value"
+        className="flex-1 text-left data-[placeholder]:hidden"
+        {...props}
+      />
+      {placeholder && (
+        <span
+          data-slot="select-placeholder"
+          className="text-muted-foreground [[data-slot=select-value]:not([data-placeholder])~&]:hidden"
+        >
+          {placeholder}
+        </span>
+      )}
+    </>
+  );
+}
+
+function SelectTrigger({
+  size = "default",
+  children,
+  ...props
+}: Omit<SelectPrimitive.Trigger.Props, "className"> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:data-[placeholder]:absolute *:data-[slot=select-value]:data-[placeholder]:w-0 *:data-[slot=select-value]:data-[placeholder]:overflow-hidden *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-full items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0"
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={
+          <ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: Omit<SelectPrimitive.Popup.Props, "className"> &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          className="bg-popover text-popover-foreground 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 min-w-(--anchor-width) max-w-80 rounded-lg p-1 shadow-md ring-1 duration-100 relative isolate z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto"
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  ...props
+}: Omit<SelectPrimitive.GroupLabel.Props, "className">) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className="text-muted-foreground px-1.5 py-1 text-xs"
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  children,
+  ...props
+}: Omit<SelectPrimitive.Item.Props, "className">) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className="focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 gap-2 shrink-0 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  ...props
+}: Omit<SelectPrimitive.Separator.Props, "className">) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className="bg-border -mx-1 my-1 h-px pointer-events-none"
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  ...props
+}: Omit<
+  React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>,
+  "className"
+>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className="bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full"
+      {...props}
+    >
+      <ChevronUpIcon />
+    </SelectPrimitive.ScrollUpArrow>
+  );
+}
+
+function SelectScrollDownButton({
+  ...props
+}: Omit<
+  React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>,
+  "className"
+>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className="bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full"
+      {...props}
+    >
+      <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownArrow>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};