beads-kanban-ui 0.1.0 → 0.1.2

package/src/components/ui/button.tsx

@@ -1,433 +0,0 @@
-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

@@ -1,24 +0,0 @@
-// 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

@@ -1,197 +0,0 @@
-.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;
-  }
-}