@dilipod/ui 0.2.13 → 0.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dilipod/ui",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "Dilipod Design System - Shared UI components and styles",
   "author": "Dilipod <hello@dilipod.com>",
   "license": "MIT",
@@ -70,7 +70,8 @@
     "@radix-ui/react-toast": "^1.2.15",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "tailwind-merge": "^3.3.0"
+    "tailwind-merge": "^3.3.0",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@radix-ui/react-label": "^2.1.8",
@@ -85,6 +86,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "autoprefixer": "^10.4.21",
+    "playwright": "^1.57.0",
     "postcss": "^8.5.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/src/components/dialog.stories.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from './dialog'
+import { Button } from './button'
+
+const meta: Meta<typeof Dialog> = {
+  title: 'Components/Dialog',
+  component: Dialog,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Dialog>
+
+export const Default: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Dialog Title</DialogTitle>
+          <DialogDescription>
+            This is a dialog description. The dialog should open and close with a subtle fade and zoom animation.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <p className="text-sm text-gray-600">
+            Click outside or press the X button to close and see the exit animation.
+          </p>
+        </div>
+        <DialogFooter>
+          <Button variant="outline">Cancel</Button>
+          <Button>Confirm</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+}
+
+export const WithForm: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Edit Profile</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <label htmlFor="name" className="text-sm font-medium">Name</label>
+            <input
+              id="name"
+              defaultValue="John Doe"
+              className="flex h-10 w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm"
+            />
+          </div>
+          <div className="grid gap-2">
+            <label htmlFor="email" className="text-sm font-medium">Email</label>
+            <input
+              id="email"
+              defaultValue="john@example.com"
+              className="flex h-10 w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button>Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+}

package/src/components/dialog.tsx

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-150',
+      'fixed inset-0 z-50 bg-black/60',
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-white p-6 shadow-lg duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-[0.98] data-[state=open]:zoom-in-[0.98] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg gap-4 border border-border bg-white p-6 shadow-lg rounded-sm',
         className
       )}
       {...props}

package/src/components/dropdown-menu.stories.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from './dropdown-menu'
+import { Button } from './button'
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: 'Components/DropdownMenu',
+  component: DropdownMenu,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof DropdownMenu>
+
+export const Default: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open Menu</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Profile</DropdownMenuItem>
+        <DropdownMenuItem>Settings</DropdownMenuItem>
+        <DropdownMenuItem>Billing</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Log out</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+}
+
+export const UserMenu: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button className="flex items-center gap-2 rounded-full hover:ring-2 hover:ring-gray-200 transition-all focus-visible:outline-none">
+          <div className="h-8 w-8 rounded-full bg-cyan-400 flex items-center justify-center text-sm font-semibold">
+            JD
+          </div>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-64">
+        <DropdownMenuLabel className="px-3 py-3">
+          <div className="flex flex-col space-y-0.5">
+            <p className="text-sm font-semibold">John Doe</p>
+            <p className="text-xs text-gray-500 font-normal">john@example.com</p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="px-3 py-2">Your profile</DropdownMenuItem>
+        <DropdownMenuItem className="px-3 py-2">Terms & policies</DropdownMenuItem>
+        <DropdownMenuItem className="px-3 py-2">Help</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="px-3 py-2">Log out</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+}
+
+export const WithSubMenu: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Options</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem>New Tab</DropdownMenuItem>
+        <DropdownMenuItem>New Window</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>Share</DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem>Email</DropdownMenuItem>
+            <DropdownMenuItem>Messages</DropdownMenuItem>
+            <DropdownMenuItem>Slack</DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Print</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+}

package/src/components/dropdown-menu.tsx

@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-sm border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-98 origin-[--radix-dropdown-menu-content-transform-origin]",
+      "z-50 min-w-[8rem] overflow-hidden rounded-sm border bg-popover p-1 text-popover-foreground shadow-lg",
       className
     )}
     {...props}
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-sm border bg-popover p-1.5 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-98 origin-[--radix-dropdown-menu-content-transform-origin]",
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-sm border bg-popover p-1.5 text-popover-foreground shadow-md",
         className
       )}
       {...props}

package/src/components/select.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../lib/utils'
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  error?: boolean
+}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, error, children, ...props }, ref) => {
+    return (
+      <select
+        ref={ref}
+        className={cn(
+          'h-10 w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] ring-offset-background',
+          'placeholder:text-gray-500',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+          'disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors',
+          'appearance-none bg-[url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'%23374151\'%3E%3Cpath stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M19 9l-7 7-7-7\'/%3E%3C/svg%3E")] bg-[length:16px_16px] bg-[right_12px_center] bg-no-repeat pr-10',
+          error
+            ? 'border-red-500 focus-visible:ring-red-500'
+            : 'border-gray-300 focus-visible:ring-[var(--cyan)]',
+          className
+        )}
+        aria-invalid={error ? 'true' : undefined}
+        {...props}
+      >
+        {children}
+      </select>
+    )
+  }
+)
+Select.displayName = 'Select'
+
+export { Select }

package/src/components/toast.tsx

@@ -32,6 +32,7 @@ const toastVariants = cva(
         success: 'bg-[var(--black)] text-white',
         error: 'bg-[var(--black)] text-white',
         warning: 'bg-[var(--black)] text-white',
+        info: 'bg-[var(--black)] text-white',
       },
     },
     defaultVariants: {
@@ -117,7 +118,7 @@ type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
 type ToastActionElement = React.ReactElement<typeof ToastAction>
 
 // Toast icon helper
-const ToastIcon = ({ variant }: { variant?: 'default' | 'success' | 'error' | 'warning' }) => {
+const ToastIcon = ({ variant }: { variant?: 'default' | 'success' | 'error' | 'warning' | 'info' }) => {
   switch (variant) {
     case 'success':
       return <Check size={18} weight="bold" className="text-[var(--cyan)]" />
@@ -125,6 +126,8 @@ const ToastIcon = ({ variant }: { variant?: 'default' | 'success' | 'error' | 'w
       return <WarningCircle size={18} weight="fill" className="text-red-400" />
     case 'warning':
       return <WarningCircle size={18} weight="fill" className="text-amber-400" />
+    case 'info':
+      return <Info size={18} weight="fill" className="text-[var(--cyan)]" />
     default:
       return <Info size={18} weight="fill" className="text-white/70" />
   }

package/src/index.ts

@@ -62,6 +62,9 @@ export type { LabelProps } from '@radix-ui/react-label'
 export { Textarea } from './components/textarea'
 export type { TextareaProps } from './components/textarea'
 
+export { Select } from './components/select'
+export type { SelectProps } from './components/select'
+
 export { Checkbox } from './components/checkbox'
 export type { CheckboxProps } from './components/checkbox'
 

package/src/styles/globals.css

@@ -1,5 +1,104 @@
 @import "tailwindcss";
 
+/* Animation keyframes for dialogs, dropdowns, popovers */
+@keyframes dialogFadeIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes dialogFadeOut {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.98);
+  }
+}
+
+@keyframes overlayFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes overlayFadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes popoverFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes popoverFadeOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+}
+
+/* Dialog overlay animations */
+[data-radix-dialog-overlay][data-state="open"] {
+  animation: overlayFadeIn 100ms ease-out;
+}
+
+[data-radix-dialog-overlay][data-state="closed"] {
+  animation: overlayFadeOut 100ms ease-in;
+}
+
+/* Dialog content animations */
+[data-radix-dialog-content][data-state="open"],
+[role="dialog"][data-state="open"] {
+  animation: dialogFadeIn 100ms ease-out;
+}
+
+[data-radix-dialog-content][data-state="closed"],
+[role="dialog"][data-state="closed"] {
+  animation: dialogFadeOut 100ms ease-in;
+}
+
+/* Dropdown menu animations */
+[data-radix-dropdown-menu-content][data-state="open"],
+[role="menu"][data-state="open"] {
+  animation: popoverFadeIn 100ms ease-out;
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin, top);
+}
+
+[data-radix-dropdown-menu-content][data-state="closed"],
+[role="menu"][data-state="closed"] {
+  animation: popoverFadeOut 100ms ease-in;
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin, top);
+}
+
+/* Sub-menu animations */
+[data-radix-dropdown-menu-sub-content][data-state="open"] {
+  animation: popoverFadeIn 100ms ease-out;
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin, top);
+}
+
+[data-radix-dropdown-menu-sub-content][data-state="closed"] {
+  animation: popoverFadeOut 100ms ease-in;
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin, top);
+}
+
 :root {
   /* ===========================================
      DILIPOD COLOR SYSTEM