parthenon-ui 1.0.0

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "parthenon-ui",
+  "version": "1.0.0",
+  "type": "module",
+  "private": false,
+  "description": "A beautiful, modern UI library built with React and Tailwind CSS",
+  "main": "./src/components/index.ts",
+  "types": "./src/components/index.ts",
+  "files": [
+    "src/**/*"
+  ],
+  "scripts": {
+    "lint": "eslint",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit",
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "tailwindcss",
+    "design-system",
+    "parthenon"
+  ],
+  "author": "Athena AI",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/athena-ai/parthenon-ui"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.6.0",
+    "@fontsource-variable/geist": "^5.2.9",
+    "@hugeicons/core-free-icons": "^4.2.0",
+    "@hugeicons/react": "^1.1.6",
+    "@radix-ui/react-use-controllable-state": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^1.22.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "shadcn": "^4.11.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10",
+    "@tailwindcss/vite": "^4",
+    "@turbo/gen": "^2.9.15",
+    "@types/node": "^24",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^10",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17",
+    "tailwindcss": "^4",
+    "typescript": "~6",
+    "typescript-eslint": "^8"
+  },
+  "exports": {
+    "./globals.css": "./src/styles/globals.css",
+    "./lib/*": "./src/lib/*.ts",
+    "./components": "./src/components/index.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts"
+  }
+}

package/src/components/avatar.tsx

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

package/src/components/badge.tsx

@@ -0,0 +1,52 @@
+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 { cn } from "@workspace/ui/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border bg-input/30 text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

package/src/components/button.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { ArrowRight01Icon } from "@hugeicons/core-free-icons"
+
+import { cn } from "@workspace/ui/lib/utils"
+
+const buttonVariants = cva(
+  "group/button relative inline-flex shrink-0 items-center justify-center gap-2 rounded-4xl text-[13px] leading-[18px] font-normal whitespace-nowrap transition-all duration-100 outline-none select-none disabled:pointer-events-none disabled:opacity-40 active:scale-[0.97] active:ring-[3px] active:ring-ring/50 active:ring-offset-2 active:ring-offset-background focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-primary text-primary-foreground",
+          "shadow-[0_1px_1px_0_rgba(0,0,0,0.24),0_2px_3px_0_rgba(0,0,0,0.20),inset_0_1px_1px_0_rgba(255,255,255,0.07),0_0_0_1px_var(--primary)]",
+          "before:absolute before:inset-0 before:rounded-4xl before:bg-linear-[180deg,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0)_100%] before:content-['']",
+          "hover:bg-primary/80",
+          "hover:shadow-[0_1px_1px_0_rgba(0,0,0,0.24),0_2px_3px_0_rgba(0,0,0,0.20),inset_0_1px_1px_0_rgba(255,255,255,0.07),0_0_0_1px_var(--primary)]",
+          "hover:before:bg-linear-[180deg,rgba(255,255,255,0)_0%,rgba(255,255,255,0.1)_100%]",
+        ],
+        secondary: [
+          "bg-secondary text-secondary-foreground",
+          "shadow-[0_1px_1px_0_rgba(0,0,0,0.24),0_2px_3px_0_rgba(0,0,0,0.20),inset_0_1px_1px_0_rgba(255,255,255,0.07),0_0_0_1px_var(--secondary)]",
+          "before:absolute before:inset-0 before:rounded-4xl before:bg-linear-[180deg,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0)_100%] before:content-['']",
+          "hover:bg-secondary/80",
+          "hover:shadow-[0_1px_1px_0_rgba(0,0,0,0.24),0_2px_3px_0_rgba(0,0,0,0.20),inset_0_1px_1px_0_rgba(255,255,255,0.07),0_0_0_1px_var(--secondary)]",
+          "hover:before:bg-linear-[180deg,rgba(255,255,255,0)_0%,rgba(255,255,255,0.1)_100%]",
+        ],
+        outline: [
+          "bg-background text-foreground",
+          "shadow-[0_0_1px_rgba(0,0,0,0.08),0_1px_0_rgba(0,0,0,0.02),0_2px_3px_-1px_rgba(0,0,0,0.08)]",
+          "hover:bg-accent",
+          "hover:shadow-[0_0_4px_rgba(0,0,0,0.12),0_0_1px_rgba(0,0,0,0.08),0_1px_0_rgba(0,0,0,0.02),0_2px_3px_-1px_rgba(0,0,0,0.08)]",
+        ],
+        ghost: [
+          "bg-transparent text-foreground",
+          "hover:bg-accent",
+        ],
+        destructive: [
+          "bg-destructive text-white",
+          "shadow-[0_1px_1px_0_rgba(0,0,0,0.08),0_2px_3px_0_rgba(0,0,0,0.20),inset_0_1px_1px_0_rgba(255,255,255,0.07),0_0_0_1px_var(--destructive)]",
+          "before:absolute before:inset-0 before:rounded-4xl before:bg-linear-[180deg,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0)_100%] before:content-['']",
+          "hover:bg-destructive/80",
+          "hover:shadow-[0_1px_1px_0_rgba(0,0,0,0.08),0_2px_3px_0_rgba(0,0,0,0.20),inset_0_1px_1px_0_rgba(255,255,255,0.07),0_0_0_1px_var(--destructive)]",
+          "hover:before:bg-linear-[180deg,rgba(255,255,255,0)_0%,rgba(255,255,255,0.1)_100%]",
+        ],
+        "destructive-ghost": [
+          "bg-destructive/10 text-destructive",
+          "shadow-[0_0_1px_rgba(0,0,0,0.08),0_0_0_1px_var(--destructive)]",
+          "hover:bg-destructive/20",
+          "hover:shadow-[0_0_8px_rgba(0,0,0,0.15),0_0_1px_rgba(0,0,0,0.08),0_0_0_1px_var(--destructive)]",
+        ],
+        link: [
+          "text-foreground underline-offset-4",
+          "hover:underline",
+          "bg-transparent shadow-none hover:shadow-none",
+        ],
+      },
+      size: {
+        default: "h-8 px-3",
+        xs: "h-6 px-2 text-xs",
+        sm: "h-8 px-3",
+        lg: "h-10 px-4",
+        icon: "size-8",
+        "icon-xs": "size-6",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+interface ButtonProps extends ButtonPrimitive.Props, VariantProps<typeof buttonVariants> {
+  leftIcon?: React.ReactNode
+  rightIcon?: React.ReactNode
+  showArrow?: boolean
+}
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  leftIcon,
+  rightIcon,
+  showArrow = false,
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    >
+      {leftIcon && (
+        <span className="relative z-10 shrink-0 opacity-60 inline-flex [&_svg]:size-4">
+          {leftIcon}
+        </span>
+      )}
+      <span className="relative z-10 inline-flex items-center gap-2">{children}</span>
+      {rightIcon && (
+        <span className="relative z-10 shrink-0 opacity-60 inline-flex [&_svg]:size-4">
+          {rightIcon}
+        </span>
+      )}
+      {showArrow && !rightIcon && (
+        <span className="relative z-10 shrink-0 opacity-60 transition-transform group-hover/button:translate-x-0.5 [&_svg]:size-4">
+          <HugeiconsIcon icon={ArrowRight01Icon} />
+        </span>
+      )}
+    </ButtonPrimitive>
+  )
+}
+
+export { Button, buttonVariants }
+export type { ButtonProps }

package/src/components/card.tsx

@@ -0,0 +1,108 @@
+import * as React from "react"
+
+import { cn } from "@workspace/ui/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card relative flex flex-col gap-(--card-spacing) overflow-hidden rounded-2xl bg-[#f0f0f0] dark:bg-[#111111] py-(--card-spacing) text-sm text-card-foreground",
+        "transition-all duration-150",
+        "border border-[#e0e0e0] dark:border-[#222222]",
+        "shadow-[inset_0_1px_0_0_rgba(255,255,255,0.7),inset_0_-1px_0_0_rgba(0,0,0,0.04),0_1px_3px_0_rgba(0,0,0,0.06),0_2px_0_0_rgba(0,0,0,0.03)]",
+        "before:absolute before:inset-x-0 before:top-0 before:h-24 before:rounded-t-2xl before:z-0 before:content-['']",
+        "before:bg-[linear-gradient(180deg,rgba(255,255,255,0.5)_0%,rgba(255,255,255,0.15)_30%,rgba(255,255,255,0)_100%)]",
+        "dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.04),inset_0_-1px_0_0_rgba(0,0,0,0.4),0_0_0_1px_rgba(0,0,0,0.5),0_1px_3px_0_rgba(0,0,0,0.6),0_2px_0_0_rgba(0,0,0,0.3)]",
+        "dark:before:bg-[linear-gradient(180deg,rgba(255,255,255,0.03)_0%,rgba(255,255,255,0.005)_30%,rgba(255,255,255,0)_100%)]",
+        "[--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-2 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("font-heading text-base font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-(--card-spacing)", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/components/checkbox.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
+
+import { cn } from "@workspace/ui/lib/utils"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { Tick02Icon } from "@hugeicons/core-free-icons"
+
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[6px] border border-input transition-all duration-150 outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 active:ring-[3px] active:ring-ring/50 active:ring-offset-2 active:ring-offset-background",
+        "shadow-[0_1px_1px_0_rgba(0,0,0,0.24),0_2px_3px_0_rgba(0,0,0,0.20),inset_0_1px_1px_0_rgba(255,255,255,0.07),0_0_0_1px_var(--input)]",
+        "before:absolute before:inset-0 before:rounded-[6px] before:bg-linear-[180deg,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0)_100%] before:content-[''] before:pointer-events-none",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:shadow-[0_1px_1px_0_rgba(0,0,0,0.24),0_2px_3px_0_rgba(0,0,0,0.20),inset_0_1px_1px_0_rgba(255,255,255,0.07),0_0_0_1px_var(--ring)]",
+        "focus-visible:before:bg-linear-[180deg,rgba(255,255,255,0)_0%,rgba(255,255,255,0.1)_100%]",
+        "disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        "data-checked:shadow-[inset_0_1px_1px_0_rgba(0,0,0,0.24),inset_0_2px_3px_0_rgba(0,0,0,0.20),0_1px_1px_0_rgba(255,255,255,0.07),0_0_0_1px_var(--primary)]",
+        "data-checked:before:bg-linear-[180deg,rgba(255,255,255,0)_0%,rgba(255,255,255,0.1)_100%]",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+      >
+        <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

package/src/components/collapsible.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
+
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
+  return (
+    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
+  )
+}
+
+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+  return (
+    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }