@oppulence/design-system 1.0.2

package/README.md

@@ -0,0 +1,115 @@
+# @oppulence/design-system
+
+A shadcn-style design system with Tailwind CSS v4. Ships raw TypeScript/TSX source files that your app compiles directly.
+
+## Installation
+
+```bash
+npm install @oppulence/design-system
+# or
+bun add @oppulence/design-system
+```
+
+## Setup in Next.js
+
+### 1. Configure Tailwind CSS
+
+Add the design system to your `tailwind.config.ts` content paths:
+
+```ts
+// tailwind.config.ts
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    // Include the design system components
+    "./node_modules/@oppulence/design-system/src/**/*.{js,ts,jsx,tsx}",
+  ],
+  // ... rest of your config
+};
+
+export default config;
+```
+
+### 2. Import Global Styles
+
+Import the design system's CSS in your root layout:
+
+```tsx
+// app/layout.tsx
+import "@oppulence/design-system/globals.css";
+// or import alongside your own globals
+import "./globals.css";
+```
+
+### 3. Configure Next.js to Transpile
+
+Add the package to `transpilePackages` in your `next.config.ts`:
+
+```ts
+// next.config.ts
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  transpilePackages: ["@oppulence/design-system"],
+};
+
+export default nextConfig;
+```
+
+## Usage
+
+Import components directly:
+
+```tsx
+import {
+  Button,
+  Card,
+  CardHeader,
+  CardContent,
+} from "@oppulence/design-system";
+
+export function MyComponent() {
+  return (
+    <Card>
+      <CardHeader>Hello</CardHeader>
+      <CardContent>
+        <Button variant="outline">Click me</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+## Available Exports
+
+| Export                                     | Description                        |
+| ------------------------------------------ | ---------------------------------- |
+| `@oppulence/design-system`                 | All components                     |
+| `@oppulence/design-system/cn`              | `cn()` utility for merging classes |
+| `@oppulence/design-system/globals.css`     | Global CSS with theme variables    |
+| `@oppulence/design-system/tailwind.config` | Tailwind configuration             |
+
+## Components
+
+The design system includes:
+
+- **Layout**: `Container`, `Stack`, `Grid`, `PageLayout`, `Section`
+- **Typography**: `Heading`, `Text`
+- **Forms**: `Button`, `Input`, `Textarea`, `Select`, `Checkbox`, `RadioGroup`, `Switch`, `Label`, `Field`
+- **Data Display**: `Card`, `Badge`, `Avatar`, `Table`, `Progress`
+- **Feedback**: `Alert`, `AlertDialog`, `Dialog`, `Sheet`, `Drawer`, `Tooltip`, `Popover`
+- **Navigation**: `Tabs`, `Breadcrumb`, `Pagination`, `NavigationMenu`, `DropdownMenu`
+- **Utility**: `Separator`, `Skeleton`, `Spinner`, `ScrollArea`, `Collapsible`
+
+## Design Principles
+
+- **No className prop**: Components use variants and props, not className overrides
+- **Semantic tokens**: Uses CSS variables for consistent theming
+- **Dark mode**: Full dark mode support via `next-themes`
+- **Accessible**: Built on Radix UI primitives
+
+## License
+
+MIT

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-vega",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/hooks/use-mobile.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "@oppulence/design-system",
+  "version": "1.0.2",
+  "description": "Design system for Oppulence - shadcn-style components with Tailwind CSS v4",
+  "type": "module",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./components/*": {
+      "types": "./src/components/ui/*.tsx",
+      "import": "./src/components/ui/*.tsx",
+      "default": "./src/components/ui/*.tsx"
+    },
+    "./cn": {
+      "types": "./lib/utils.ts",
+      "import": "./lib/utils.ts",
+      "default": "./lib/utils.ts"
+    },
+    "./globals.css": "./src/styles/globals.css",
+    "./tailwind.config": {
+      "types": "./tailwind.config.ts",
+      "import": "./tailwind.config.ts",
+      "default": "./tailwind.config.ts"
+    },
+    "./postcss.config": "./postcss.config.mjs"
+  },
+  "files": [
+    "src",
+    "lib",
+    "hooks",
+    "tailwind.config.ts",
+    "postcss.config.mjs",
+    "components.json",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Oppulence-Engineering/design-system.git",
+    "directory": "packages/design-system"
+  },
+  "license": "MIT",
+  "keywords": [
+    "design-system",
+    "components",
+    "react",
+    "tailwindcss",
+    "shadcn",
+    "ui"
+  ],
+  "scripts": {
+    "clean": "rm -rf .turbo node_modules",
+    "format": "prettier --write .",
+    "lint": "prettier --check .",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.0.0",
+    "@fontsource-variable/plus-jakarta-sans": "^5.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.562.0",
+    "next-themes": "^0.4.6",
+    "react-day-picker": "^9.13.0",
+    "react-resizable-panels": "^4.2.0",
+    "recharts": "2.15.4",
+    "shadcn": "^3.6.2",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.10",
+    "@types/node": "^22.18.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.4",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.0",
+    "tailwindcss": "^4.1.8",
+    "typescript": "^5.9.3"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/src/components/atoms/aspect-ratio.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+function AspectRatio({
+  ratio,
+  ...props
+}: Omit<React.ComponentProps<"div">, "className"> & { ratio: number }) {
+  return (
+    <div
+      data-slot="aspect-ratio"
+      style={
+        {
+          "--ratio": ratio,
+        } as React.CSSProperties
+      }
+      className="relative aspect-(--ratio)"
+      {...props}
+    />
+  );
+}
+
+export { AspectRatio };

package/src/components/atoms/avatar.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import * as React from "react";
+
+type AvatarSize = "xs" | "sm" | "default" | "lg" | "xl";
+
+function Avatar({
+  size = "default",
+  ...props
+}: Omit<AvatarPrimitive.Root.Props, "className"> & {
+  size?: AvatarSize;
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className="size-8 rounded-full after:rounded-full data-[size=xs]:size-5 data-[size=sm]:size-6 data-[size=lg]:size-10 data-[size=xl]:size-14 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten"
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  ...props
+}: Omit<AvatarPrimitive.Image.Props, "className">) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className="rounded-full aspect-square size-full object-cover"
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  ...props
+}: Omit<AvatarPrimitive.Fallback.Props, "className">) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className="bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-xs group-data-[size=xs]/avatar:text-[8px] group-data-[size=sm]/avatar:text-[10px] group-data-[size=lg]/avatar:text-sm group-data-[size=xl]/avatar:text-base"
+      {...props}
+    />
+  );
+}
+
+function AvatarBadge({
+  ...props
+}: Omit<React.ComponentProps<"span">, "className">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className="bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none group-data-[size=xs]/avatar:size-1.5 group-data-[size=xs]/avatar:[&>svg]:hidden group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2 group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2 group-data-[size=xl]/avatar:size-3.5 group-data-[size=xl]/avatar:[&>svg]:size-2.5"
+      {...props}
+    />
+  );
+}
+
+function AvatarGroup({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className="*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2"
+      {...props}
+    />
+  );
+}
+
+function AvatarGroupCount({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className="bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=xs]/avatar-group:size-5 group-has-data-[size=xs]/avatar-group:text-[10px] group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=sm]/avatar-group:text-xs group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=lg]/avatar-group:text-base group-has-data-[size=xl]/avatar-group:size-14 group-has-data-[size=xl]/avatar-group:text-lg ring-background relative flex shrink-0 items-center justify-center ring-2"
+      {...props}
+    />
+  );
+}
+
+export {
+  Avatar,
+  AvatarBadge,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+};

package/src/components/atoms/badge.tsx

@@ -0,0 +1,47 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const badgeVariants = cva(
+  "gap-1 rounded-sm px-1.5 py-1 text-[10px] font-semibold uppercase tracking-wider leading-none transition-colors has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:ring-ring/50 focus-visible:ring-[3px] overflow-hidden antialiased select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/90",
+        secondary: "bg-muted text-muted-foreground [a]:hover:bg-muted/80",
+        destructive:
+          "bg-destructive/10 text-destructive [a]:hover:bg-destructive/15 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/15",
+        outline:
+          "border border-border/50 bg-transparent text-foreground [a]:hover:bg-muted/30",
+        ghost:
+          "bg-transparent text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+        link: "bg-transparent text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+type BadgeProps = Omit<useRender.ComponentProps<"span">, "className"> &
+  VariantProps<typeof badgeVariants>;
+
+function Badge({ variant = "default", render, ...props }: BadgeProps) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: badgeVariants({ variant }),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  });
+}
+
+export { Badge, badgeVariants };

package/src/components/atoms/button.tsx

@@ -0,0 +1,128 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { Spinner } from "./spinner";
+
+const buttonVariants = cva(
+  "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 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all duration-150 ease-out active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive:
+          "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      width: {
+        auto: "",
+        full: "w-full",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+        // Round icon buttons - for avatar triggers and circular icons
+        "icon-round": "size-8 rounded-full",
+        "icon-round-xs":
+          "size-6 rounded-full [&_svg:not([class*='size-'])]:size-3",
+        "icon-round-sm": "size-7 rounded-full",
+        "icon-round-lg": "size-9 rounded-full",
+        // Calendar day button - special size for calendar day cells
+        "calendar-day": [
+          // Base sizing
+          "relative isolate z-10 aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal",
+          // Selection states
+          "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground",
+          "data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-middle=true]:rounded-none",
+          "data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius)",
+          "data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius)",
+          // Focus states (from parent day cell)
+          "group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 group-data-[focused=true]/day:ring-[3px]",
+          // Dark mode hover
+          "dark:hover:text-foreground",
+          // Nested span styling for additional content
+          "[&>span]:text-xs [&>span]:opacity-70",
+        ].join(" "),
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      width: "auto",
+      size: "default",
+    },
+  },
+);
+
+type ButtonProps = Omit<ButtonPrimitive.Props, "className"> &
+  VariantProps<typeof buttonVariants> & {
+    /** Show loading spinner and disable button */
+    loading?: boolean;
+    /** Icon to show on the left side of the button */
+    iconLeft?: React.ReactNode;
+    /** Icon to show on the right side of the button */
+    iconRight?: React.ReactNode;
+  };
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = "default",
+      width = "auto",
+      size = "default",
+      loading = false,
+      iconLeft,
+      iconRight,
+      disabled,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const isDisabled = disabled || loading;
+
+    return (
+      <ButtonPrimitive
+        ref={ref}
+        data-slot="button"
+        data-loading={loading || undefined}
+        disabled={isDisabled}
+        className={buttonVariants({ variant, width, size })}
+        {...props}
+      >
+        {loading ? (
+          <Spinner />
+        ) : iconLeft ? (
+          <span data-icon="inline-start" className="shrink-0">
+            {iconLeft}
+          </span>
+        ) : null}
+        {children}
+        {!loading && iconRight ? (
+          <span data-icon="inline-end" className="shrink-0">
+            {iconRight}
+          </span>
+        ) : null}
+      </ButtonPrimitive>
+    );
+  },
+);
+
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
+export type { ButtonProps };

package/src/components/atoms/checkbox.tsx

@@ -0,0 +1,24 @@
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+
+import { CheckIcon } from "lucide-react";
+
+function Checkbox({
+  ...props
+}: Omit<CheckboxPrimitive.Root.Props, "className">) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className="border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
+      >
+        <CheckIcon />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

package/src/components/atoms/container.tsx

@@ -0,0 +1,42 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+const containerVariants = cva("mx-auto w-full", {
+  variants: {
+    size: {
+      sm: "max-w-screen-sm", // 640px
+      md: "max-w-screen-md", // 768px
+      lg: "max-w-screen-lg", // 1024px
+      xl: "max-w-[1200px]",
+      "2xl": "max-w-[1400px]",
+      full: "max-w-full",
+    },
+    padding: {
+      none: "px-0",
+      sm: "px-4",
+      default: "px-4 sm:px-6 lg:px-8",
+      lg: "px-6 sm:px-8 lg:px-12",
+    },
+  },
+  defaultVariants: {
+    size: "xl",
+    padding: "default",
+  },
+});
+
+interface ContainerProps
+  extends
+    Omit<React.ComponentProps<"div">, "className">,
+    VariantProps<typeof containerVariants> {}
+
+function Container({ size, padding, ...props }: ContainerProps) {
+  return (
+    <div
+      data-slot="container"
+      className={containerVariants({ size, padding })}
+      {...props}
+    />
+  );
+}
+
+export { Container, containerVariants };