@oppulence/design-system 1.0.2

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

@@ -0,0 +1,151 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../../../lib/utils";
+import { buttonVariants } from "../atoms/button";
+
+function InputGroup({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className="border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto"
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "pl-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first",
+        "inline-end":
+          "pr-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last",
+        "block-start":
+          "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+        "block-end":
+          "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+);
+
+function InputGroupAddon({
+  align = "inline-start",
+  ...props
+}: Omit<React.ComponentProps<"div">, "className"> &
+  VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={inputGroupAddonVariants({ align })}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva(
+  "gap-2 text-sm shadow-none flex items-center",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  },
+);
+
+function InputGroupButton({
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<ButtonPrimitive.Props, "className" | "type"> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    variant?:
+      | "default"
+      | "outline"
+      | "secondary"
+      | "ghost"
+      | "destructive"
+      | "link";
+    type?: "button" | "submit" | "reset";
+  }) {
+  return (
+    <ButtonPrimitive
+      type={type}
+      data-size={size}
+      className={cn(
+        buttonVariants({ variant }),
+        inputGroupButtonVariants({ size }),
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({
+  align = "inline-start",
+  ...props
+}: Omit<React.ComponentProps<"div">, "className"> &
+  VariantProps<typeof inputGroupAddonVariants>) {
+  return <InputGroupAddon align={align} {...props} />;
+}
+
+function InputGroupInput({
+  ...props
+}: Omit<React.ComponentProps<"input">, "className">) {
+  return (
+    <InputPrimitive
+      data-slot="input-group-control"
+      className="h-8 rounded-none border-0 bg-transparent px-2.5 py-1 text-base shadow-none ring-0 transition-colors focus-visible:ring-0 aria-invalid:ring-0 md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-transparent flex-1"
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({
+  ...props
+}: Omit<React.ComponentProps<"textarea">, "className">) {
+  return (
+    <textarea
+      data-slot="input-group-control"
+      className="rounded-none border-0 bg-transparent px-2.5 py-2 text-base shadow-none ring-0 transition-colors focus-visible:ring-0 aria-invalid:ring-0 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-transparent flex-1 resize-none"
+      {...props}
+    />
+  );
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+};

package/src/components/molecules/input-otp.tsx

@@ -0,0 +1,74 @@
+import { OTPInput, OTPInputContext } from "input-otp";
+import * as React from "react";
+
+import { MinusIcon } from "lucide-react";
+
+function InputOTP({
+  className: _className,
+  ...props
+}: React.ComponentProps<typeof OTPInput>) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName="cn-input-otp flex items-center has-disabled:opacity-50"
+      spellCheck={false}
+      className="disabled:cursor-not-allowed"
+      {...props}
+    />
+  );
+}
+
+function InputOTPGroup({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className="has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[3px] flex items-center"
+      {...props}
+    />
+  );
+}
+
+function InputOTPSlot({
+  index,
+  ...props
+}: Omit<React.ComponentProps<"div">, "className"> & {
+  index: number;
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className="dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10"
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="input-otp-separator"
+      className="[&_svg:not([class*='size-'])]:size-4 flex items-center"
+      role="separator"
+      {...props}
+    >
+      <MinusIcon />
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/src/components/molecules/item.tsx

@@ -0,0 +1,194 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+
+function ItemGroup({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className="gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col"
+      {...props}
+    />
+  );
+}
+
+function ItemSeparator({
+  ...props
+}: Omit<SeparatorPrimitive.Props, "className">) {
+  return (
+    <SeparatorPrimitive
+      data-slot="item-separator"
+      orientation="horizontal"
+      className="bg-border shrink-0 h-px w-full my-2"
+      {...props}
+    />
+  );
+}
+
+const itemVariants = cva(
+  "[a]:hover:bg-muted rounded-md border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50 border-transparent",
+      },
+      size: {
+        default: "gap-3.5 px-4 py-3.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Item({
+  variant = "default",
+  size = "default",
+  render,
+  ...props
+}: Omit<useRender.ComponentProps<"div">, "className"> &
+  VariantProps<typeof itemVariants>) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: itemVariants({ variant, size }),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "item",
+      variant,
+      size,
+    },
+  });
+}
+
+const itemMediaVariants = cva(
+  "gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function ItemMedia({
+  variant = "default",
+  ...props
+}: Omit<React.ComponentProps<"div">, "className"> &
+  VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={itemMediaVariants({ variant })}
+      {...props}
+    />
+  );
+}
+
+function ItemContent({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="item-content"
+      className="gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none"
+      {...props}
+    />
+  );
+}
+
+function ItemTitle({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="item-title"
+      className="gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center"
+      {...props}
+    />
+  );
+}
+
+function ItemDescription({
+  ...props
+}: Omit<React.ComponentProps<"p">, "className">) {
+  return (
+    <p
+      data-slot="item-description"
+      className="text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4"
+      {...props}
+    />
+  );
+}
+
+function ItemActions({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className="gap-2 flex items-center"
+      {...props}
+    />
+  );
+}
+
+function ItemHeader({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="item-header"
+      className="gap-2 flex basis-full items-center justify-between"
+      {...props}
+    />
+  );
+}
+
+function ItemFooter({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className="gap-2 flex basis-full items-center justify-between"
+      {...props}
+    />
+  );
+}
+
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+};

package/src/components/molecules/page-header.tsx

@@ -0,0 +1,89 @@
+import * as React from "react";
+
+import { Heading } from "../atoms/heading";
+import { Text } from "../atoms/text";
+import { Stack } from "../atoms/stack";
+
+interface PageHeaderProps extends Omit<
+  React.ComponentProps<"div">,
+  "className"
+> {
+  title: string;
+  description?: string;
+  /** Additional descriptive text below description */
+  meta?: string;
+  actions?: React.ReactNode;
+}
+
+function PageHeader({
+  title,
+  description,
+  meta,
+  actions,
+  children,
+  ...props
+}: PageHeaderProps) {
+  return (
+    <div
+      data-slot="page-header"
+      className="flex items-center justify-between gap-4"
+      {...props}
+    >
+      <Stack gap="1">
+        <Heading level="1">{title}</Heading>
+        {description && (
+          <Text size="sm" variant="muted">
+            {description}
+          </Text>
+        )}
+        {meta && (
+          <Text size="xs" variant="muted">
+            {meta}
+          </Text>
+        )}
+        {children}
+      </Stack>
+      {actions && (
+        <div className="flex shrink-0 items-center gap-3">{actions}</div>
+      )}
+    </div>
+  );
+}
+
+function PageHeaderTitle({
+  ...props
+}: Omit<React.ComponentProps<typeof Heading>, "className">) {
+  return <Heading data-slot="page-header-title" level="1" {...props} />;
+}
+
+function PageHeaderDescription({
+  ...props
+}: Omit<React.ComponentProps<typeof Text>, "className">) {
+  return (
+    <Text
+      data-slot="page-header-description"
+      size="sm"
+      variant="muted"
+      {...props}
+    />
+  );
+}
+
+function PageHeaderActions({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="page-header-actions"
+      className="flex shrink-0 items-center gap-3"
+      {...props}
+    />
+  );
+}
+
+export {
+  PageHeader,
+  PageHeaderActions,
+  PageHeaderDescription,
+  PageHeaderTitle,
+};

package/src/components/molecules/pagination.tsx

@@ -0,0 +1,130 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react";
+import { buttonVariants } from "../atoms/button";
+
+function Pagination({
+  ...props
+}: Omit<React.ComponentProps<"nav">, "className">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className="mx-auto flex w-full justify-center"
+      {...props}
+    />
+  );
+}
+
+function PaginationContent({
+  ...props
+}: Omit<React.ComponentProps<"ul">, "className">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className="gap-1 flex items-center"
+      {...props}
+    />
+  );
+}
+
+function PaginationItem({
+  ...props
+}: Omit<React.ComponentProps<"li">, "className">) {
+  return <li data-slot="pagination-item" {...props} />;
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+  size?: "default" | "icon";
+} & Omit<React.ComponentProps<"a">, "className">;
+
+function PaginationLink({
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <ButtonPrimitive
+      className={buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      })}
+      render={
+        <a
+          aria-current={isActive ? "page" : undefined}
+          data-slot="pagination-link"
+          data-active={isActive}
+          {...props}
+        />
+      }
+    />
+  );
+}
+
+function PaginationPrevious({ ...props }: Omit<PaginationLinkProps, "size">) {
+  return (
+    <ButtonPrimitive
+      className={`${buttonVariants({ variant: "ghost", size: "default" })} pl-2`}
+      render={
+        <a
+          aria-label="Go to previous page"
+          data-slot="pagination-link"
+          {...props}
+        />
+      }
+    >
+      <ChevronLeftIcon data-icon="inline-start" />
+      <span className="hidden sm:block">Previous</span>
+    </ButtonPrimitive>
+  );
+}
+
+function PaginationNext({ ...props }: Omit<PaginationLinkProps, "size">) {
+  return (
+    <ButtonPrimitive
+      className={`${buttonVariants({ variant: "ghost", size: "default" })} pr-2`}
+      render={
+        <a
+          aria-label="Go to next page"
+          data-slot="pagination-link"
+          {...props}
+        />
+      }
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon data-icon="inline-end" />
+    </ButtonPrimitive>
+  );
+}
+
+function PaginationEllipsis({
+  ...props
+}: Omit<React.ComponentProps<"span">, "className">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className="size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center"
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className="sr-only">More pages</span>
+    </span>
+  );
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};