beads-kanban-ui 0.1.0

package/src/components/ui/button.tsx

@@ -0,0 +1,433 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ChevronDown, LucideIcon } from 'lucide-react';
+import { Slot as SlotPrimitive } from 'radix-ui';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'cursor-pointer group whitespace-nowrap focus-visible:outline-hidden inline-flex items-center justify-center has-data-[arrow=true]:justify-between whitespace-nowrap text-sm font-medium ring-offset-background transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-primary text-primary-foreground hover:bg-primary/90 data-[state=open]:bg-primary/90',
+        mono: 'bg-zinc-950 text-white dark:bg-zinc-300 dark:text-black hover:bg-zinc-950/90 dark:hover:bg-zinc-300/90 data-[state=open]:bg-zinc-950/90 dark:data-[state=open]:bg-zinc-300/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90 data-[state=open]:bg-destructive/90',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/90 data-[state=open]:bg-secondary/90',
+        outline: 'bg-background text-accent-foreground border border-input hover:bg-accent data-[state=open]:bg-accent',
+        dashed:
+          'text-accent-foreground border border-input border-dashed bg-background hover:bg-accent hover:text-accent-foreground data-[state=open]:text-accent-foreground',
+        ghost:
+          'text-accent-foreground hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        dim: 'text-muted-foreground hover:text-foreground data-[state=open]:text-foreground',
+        foreground: '',
+        inverse: '',
+      },
+      appearance: {
+        default: '',
+        ghost: '',
+      },
+      underline: {
+        solid: '',
+        dashed: '',
+      },
+      underlined: {
+        solid: '',
+        dashed: '',
+      },
+      size: {
+        lg: 'h-10 px-4 text-sm gap-1.5 [&_svg:not([class*=size-])]:size-4',
+        md: 'h-9 px-3 gap-1.5 text-sm [&_svg:not([class*=size-])]:size-4',
+        sm: 'h-8 px-2.5 gap-1.25 text-xs [&_svg:not([class*=size-])]:size-3.5',
+        xs: 'h-7 px-2 gap-1 text-xs [&_svg:not([class*=size-])]:size-3.5',
+        icon: 'size-9 [&_svg:not([class*=size-])]:size-4 shrink-0',
+      },
+      autoHeight: {
+        true: '',
+        false: '',
+      },
+      radius: {
+        md: 'rounded-md',
+        full: 'rounded-full',
+      },
+      mode: {
+        default: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        icon: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 shrink-0',
+        link: 'text-primary h-auto p-0 bg-transparent rounded-none hover:bg-transparent data-[state=open]:bg-transparent',
+        input: `
+            justify-start font-normal hover:bg-background [&_svg]:transition-colors [&_svg]:hover:text-foreground data-[state=open]:bg-background 
+            focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-[3px] focus-visible:ring-ring/30 
+            [[data-state=open]>&]:border-ring [[data-state=open]>&]:outline-hidden [[data-state=open]>&]:ring-[3px] 
+            [[data-state=open]>&]:ring-ring/30 
+            aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive dark:aria-invalid:ring-destructive/20
+            in-data-[invalid=true]:border-destructive/60 in-data-[invalid=true]:ring-destructive/10  dark:in-data-[invalid=true]:border-destructive dark:in-data-[invalid=true]:ring-destructive/20
+          `,
+      },
+      placeholder: {
+        true: 'text-muted-foreground',
+        false: '',
+      },
+    },
+    compoundVariants: [
+      // Icons opacity for default mode
+      {
+        variant: 'ghost',
+        mode: 'default',
+        className: '[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60',
+      },
+      {
+        variant: 'outline',
+        mode: 'default',
+        className: '[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60',
+      },
+      {
+        variant: 'dashed',
+        mode: 'default',
+        className: '[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60',
+      },
+      {
+        variant: 'secondary',
+        mode: 'default',
+        className: '[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60',
+      },
+
+      // Icons opacity for default mode
+      {
+        variant: 'outline',
+        mode: 'input',
+        className: '[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60',
+      },
+      {
+        variant: 'outline',
+        mode: 'icon',
+        className: '[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60',
+      },
+
+      // Auto height
+      {
+        size: 'xs',
+        autoHeight: true,
+        className: 'h-auto min-h-7',
+      },
+      {
+        size: 'md',
+        autoHeight: true,
+        className: 'h-auto min-h-9',
+      },
+      {
+        size: 'sm',
+        autoHeight: true,
+        className: 'h-auto min-h-8',
+      },
+      {
+        size: 'lg',
+        autoHeight: true,
+        className: 'h-auto min-h-10',
+      },
+
+      // Shadow support
+      {
+        variant: 'primary',
+        mode: 'default',
+        appearance: 'default',
+        className: 'shadow-xs shadow-black/5',
+      },
+      {
+        variant: 'mono',
+        mode: 'default',
+        appearance: 'default',
+        className: 'shadow-xs shadow-black/5',
+      },
+      {
+        variant: 'secondary',
+        mode: 'default',
+        appearance: 'default',
+        className: 'shadow-xs shadow-black/5',
+      },
+      {
+        variant: 'outline',
+        mode: 'default',
+        appearance: 'default',
+        className: 'shadow-xs shadow-black/5',
+      },
+      {
+        variant: 'dashed',
+        mode: 'default',
+        appearance: 'default',
+        className: 'shadow-xs shadow-black/5',
+      },
+      {
+        variant: 'destructive',
+        mode: 'default',
+        appearance: 'default',
+        className: 'shadow-xs shadow-black/5',
+      },
+
+      // Shadow support
+      {
+        variant: 'primary',
+        mode: 'icon',
+        appearance: 'default',
+        className: 'shadow-xs shadow-black/5',
+      },
+      {
+        variant: 'mono',
+        mode: 'icon',
+        appearance: 'default',
+        className: 'shadow-xs shadow-black/5',
+      },
+      {
+        variant: 'secondary',
+        mode: 'icon',
+        appearance: 'default',
+        className: 'shadow-xs shadow-black/5',
+      },
+      {
+        variant: 'outline',
+        mode: 'icon',
+        appearance: 'default',
+        className: 'shadow-xs shadow-black/5',
+      },
+      {
+        variant: 'dashed',
+        mode: 'icon',
+        appearance: 'default',
+        className: 'shadow-xs shadow-black/5',
+      },
+      {
+        variant: 'destructive',
+        mode: 'icon',
+        appearance: 'default',
+        className: 'shadow-xs shadow-black/5',
+      },
+
+      // Link
+      {
+        variant: 'primary',
+        mode: 'link',
+        underline: 'solid',
+        className:
+          'font-medium text-primary hover:text-primary/90 [&_svg:not([role=img]):not([class*=text-])]:opacity-60 hover:underline hover:underline-offset-4 hover:decoration-solid',
+      },
+      {
+        variant: 'primary',
+        mode: 'link',
+        underline: 'dashed',
+        className:
+          'font-medium text-primary hover:text-primary/90 [&_svg:not([role=img]):not([class*=text-])]:opacity-60 hover:underline hover:underline-offset-4 hover:decoration-dashed decoration-1',
+      },
+      {
+        variant: 'primary',
+        mode: 'link',
+        underlined: 'solid',
+        className:
+          'font-medium text-primary hover:text-primary/90 [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-solid',
+      },
+      {
+        variant: 'primary',
+        mode: 'link',
+        underlined: 'dashed',
+        className:
+          'font-medium text-primary hover:text-primary/90 [&_svg]:opacity-60 underline underline-offset-4 decoration-dashed decoration-1',
+      },
+
+      {
+        variant: 'inverse',
+        mode: 'link',
+        underline: 'solid',
+        className:
+          'font-medium text-inherit [&_svg:not([role=img]):not([class*=text-])]:opacity-60 hover:underline hover:underline-offset-4 hover:decoration-solid',
+      },
+      {
+        variant: 'inverse',
+        mode: 'link',
+        underline: 'dashed',
+        className:
+          'font-medium text-inherit [&_svg:not([role=img]):not([class*=text-])]:opacity-60 hover:underline hover:underline-offset-4 hover:decoration-dashed decoration-1',
+      },
+      {
+        variant: 'inverse',
+        mode: 'link',
+        underlined: 'solid',
+        className:
+          'font-medium text-inherit [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-solid',
+      },
+      {
+        variant: 'inverse',
+        mode: 'link',
+        underlined: 'dashed',
+        className:
+          'font-medium text-inherit [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-dashed decoration-1',
+      },
+
+      {
+        variant: 'foreground',
+        mode: 'link',
+        underline: 'solid',
+        className:
+          'font-medium text-foreground [&_svg:not([role=img]):not([class*=text-])]:opacity-60 hover:underline hover:underline-offset-4 hover:decoration-solid',
+      },
+      {
+        variant: 'foreground',
+        mode: 'link',
+        underline: 'dashed',
+        className:
+          'font-medium text-foreground [&_svg:not([role=img]):not([class*=text-])]:opacity-60 hover:underline hover:underline-offset-4 hover:decoration-dashed decoration-1',
+      },
+      {
+        variant: 'foreground',
+        mode: 'link',
+        underlined: 'solid',
+        className:
+          'font-medium text-foreground [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-solid',
+      },
+      {
+        variant: 'foreground',
+        mode: 'link',
+        underlined: 'dashed',
+        className:
+          'font-medium text-foreground [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-dashed decoration-1',
+      },
+
+      // Ghost
+      {
+        variant: 'primary',
+        appearance: 'ghost',
+        className: 'bg-transparent text-primary/90 hover:bg-primary/5 data-[state=open]:bg-primary/5',
+      },
+      {
+        variant: 'destructive',
+        appearance: 'ghost',
+        className: 'bg-transparent text-destructive/90 hover:bg-destructive/5 data-[state=open]:bg-destructive/5',
+      },
+      {
+        variant: 'ghost',
+        mode: 'icon',
+        className: 'text-muted-foreground',
+      },
+
+      // Size
+      {
+        size: 'xs',
+        mode: 'icon',
+        className: 'w-7 h-7 p-0 [[&_svg:not([class*=size-])]:size-3.5',
+      },
+      {
+        size: 'sm',
+        mode: 'icon',
+        className: 'w-8 h-8 p-0 [[&_svg:not([class*=size-])]:size-3.5',
+      },
+      {
+        size: 'md',
+        mode: 'icon',
+        className: 'w-9 h-9 p-0 [&_svg:not([class*=size-])]:size-4',
+      },
+      {
+        size: 'icon',
+        className: 'w-9 h-9 p-0 [&_svg:not([class*=size-])]:size-4',
+      },
+      {
+        size: 'lg',
+        mode: 'icon',
+        className: 'w-10 h-10 p-0 [&_svg:not([class*=size-])]:size-4',
+      },
+
+      // Input mode
+      {
+        mode: 'input',
+        placeholder: true,
+        variant: 'outline',
+        className: 'font-normal text-muted-foreground',
+      },
+      {
+        mode: 'input',
+        variant: 'outline',
+        size: 'sm',
+        className: 'gap-1.25',
+      },
+      {
+        mode: 'input',
+        variant: 'outline',
+        size: 'md',
+        className: 'gap-1.5',
+      },
+      {
+        mode: 'input',
+        variant: 'outline',
+        size: 'lg',
+        className: 'gap-1.5',
+      },
+    ],
+    defaultVariants: {
+      variant: 'primary',
+      mode: 'default',
+      size: 'md',
+      radius: 'md',
+      appearance: 'default',
+    },
+  },
+);
+
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> &
+    VariantProps<typeof buttonVariants> & {
+      selected?: boolean;
+      asChild?: boolean;
+    }
+>(
+  (
+    {
+      className,
+      selected,
+      variant,
+      radius,
+      appearance,
+      mode,
+      size,
+      autoHeight,
+      underlined,
+      underline,
+      asChild = false,
+      placeholder = false,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? SlotPrimitive.Slot : 'button';
+    return (
+      <Comp
+        ref={ref}
+        data-slot="button"
+        className={cn(
+          buttonVariants({
+            variant,
+            size,
+            radius,
+            appearance,
+            mode,
+            autoHeight,
+            placeholder,
+            underlined,
+            underline,
+            className,
+          }),
+          asChild && props.disabled && 'pointer-events-none opacity-50',
+        )}
+        {...(selected && { 'data-state': 'open' })}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+interface ButtonArrowProps extends React.SVGProps<SVGSVGElement> {
+  icon?: LucideIcon; // Allows passing any Lucide icon
+}
+
+function ButtonArrow({ icon: Icon = ChevronDown, className, ...props }: ButtonArrowProps) {
+  return <Icon data-slot="button-arrow" className={cn('ms-auto -me-1', className)} {...props} />;
+}
+
+export { Button, ButtonArrow, buttonVariants };

package/src/components/ui/card/index.tsx

@@ -0,0 +1,24 @@
+// Re-export both shadcn and roiui card components
+// Original shadcn card (for backward compatibility)
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "./shadcn-card";
+
+// Roiui card (newer, with variants and lift effect)
+export {
+  Card as RoiuiCard,
+  CardAction as RoiuiCardAction,
+  CardContent as RoiuiCardContent,
+  CardDescription as RoiuiCardDescription,
+  CardFooter as RoiuiCardFooter,
+  CardHeader as RoiuiCardHeader,
+  CardIcon as RoiuiCardIcon,
+  CardImage as RoiuiCardImage,
+  CardImageContent as RoiuiCardImageContent,
+  CardTitle as RoiuiCardTitle,
+} from "./roiui-card";

package/src/components/ui/card/roiui-card.module.css

@@ -0,0 +1,197 @@
+.card {
+  border-radius: var(--radius);
+  color: hsl(var(--foreground));
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  background-color: hsl(var(--card) / 0.95);
+  border: 1px solid hsl(var(--border) / 0.6);
+  position: relative;
+  justify-content: space-between;
+  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.08);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 0 0 1px hsl(var(--border) / 0.6),
+    0 10px 30px -10px rgba(0, 0, 0, 0.3),
+    0 4px 6px -2px rgba(0, 0, 0, 0.1),
+    0 0 20px -5px rgba(168, 85, 247, 0.15);
+}
+
+.header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.5rem;
+  align-items: center;
+  max-width: 100%;
+}
+
+.title {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: -0.025em;
+  margin: 0;
+}
+
+.description {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: hsl(var(--muted-foreground));
+  margin: 0;
+  grid-column: 1 / -1;
+  white-space: unset;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.cardLift {
+  overflow: hidden;
+  padding-bottom: 0;
+  gap: 0;
+}
+
+.cardLift .content {
+  padding: 1.5rem 1.5rem 2rem;
+  transition: transform 0.25s var(--ease-in-out-quad);
+  background-color: var(--mix-card-33-bg);
+  width: calc(100% + 3rem);
+  margin: 0 -1.5rem;
+}
+
+.textContent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+}
+
+.image {
+  width: calc(100% + 3rem);
+  margin: -1.5rem -1.5rem 0;
+  object-fit: cover;
+  height: 300px;
+  aspect-ratio: 16 / 9;
+  transition: transform 0.25s var(--ease-in-out-quad);
+  border-radius: var(--radius) var(--radius) 0 0;
+  max-width: 100vw;
+  box-sizing: border-box;
+}
+
+.cardLift .footer {
+  opacity: 0;
+  transition:
+    opacity 0.25s var(--ease-in-out-quad),
+    transform 0.25s var(--ease-in-out-quad);
+  position: absolute;
+  bottom: 0;
+  left: 1.5rem;
+  right: 1.5rem;
+}
+
+.cardLift:hover .content {
+  transform: translateY(-2rem);
+}
+
+.cardLift:hover .footer {
+  opacity: 1;
+  transform: translateY(-1rem);
+}
+
+.cardLift:hover .image {
+  transform: scale(1.04);
+}
+
+@media (max-width: 768px) {
+  .image {
+    width: 100%;
+    margin: -1.5rem 0 0;
+    max-width: none;
+    height: 250px;
+  }
+
+  .cardLift .image {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+    width: calc(100% + 3rem);
+  }
+}
+
+.imageContent {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
+  color: white;
+}
+
+.default {
+  background-color: var(--background-muted);
+}
+
+.icon {
+  background-color: hsl(var(--muted));
+  border-radius: var(--radius);
+  border: 1px solid hsl(var(--border) / 0.5);
+  box-shadow: 0 1px 2px hsl(var(--foreground) / 0.04);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 1;
+  padding: 6px;
+  margin-bottom: 1.125rem;
+  width: 32px;
+  height: 32px;
+}
+
+.action {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: start;
+  justify-self: end;
+}
+
+@media (max-width: 640px) {
+  .card {
+    padding: 1.25rem;
+    gap: 1.25rem;
+  }
+
+  .title {
+    font-size: 1.125rem;
+  }
+
+  .description {
+    font-size: 0.9375rem;
+    line-height: 1.5;
+  }
+
+  .content {
+    font-size: 0.9375rem;
+    line-height: 1.5;
+  }
+
+  .icon {
+    width: 28px;
+    height: 28px;
+    margin-bottom: 1rem;
+  }
+}