@tuturuuu/ui 0.0.4

package/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,108 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '@tuturuuu/utils/format';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import * as React from 'react';
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        'flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : 'a';
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn('transition-colors hover:text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('font-normal text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};

package/src/components/ui/button.tsx

@@ -0,0 +1,61 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '@tuturuuu/utils/format';
+import { type VariantProps, cva } from 'class-variance-authority';
+import * as React from 'react';
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0",
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        xs: 'h-8 rounded-md has-[>svg]:px-2',
+        sm: 'h-8 rounded-md px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+type ButtonProps = React.ComponentProps<typeof Button>;
+
+export { Button, buttonVariants };
+export type { ButtonProps };

package/src/components/ui/calendar.tsx

@@ -0,0 +1,212 @@
+'use client';
+
+import { buttonVariants } from './button';
+import { DateInput } from './custom/date-input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './select';
+import { cn } from '@tuturuuu/utils/format';
+import { format } from 'date-fns';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+  // eslint-disable-next-line no-unused-vars
+  onSubmit?: (date: Date) => void;
+};
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  onSubmit,
+  ...props
+}: CalendarProps) {
+  const defaultMonth = props.defaultMonth || new Date();
+  const [month, setMonth] = React.useState<Date>(defaultMonth);
+
+  const years = Array.from({ length: 200 }, (_, i) => {
+    const year = new Date().getFullYear() - 100 + i;
+    return { value: year.toString(), label: year.toString() };
+  });
+
+  const months = Array.from({ length: 12 }, (_, i) => {
+    const month = new Date(2024, i, 1);
+    return {
+      value: i.toString(),
+      label: format(month, 'MMMM'),
+    };
+  });
+
+  const currentYear = new Date().getFullYear();
+  const isCurrentYear = month.getFullYear() === currentYear;
+  const isCurrentMonth =
+    month.getMonth() === new Date().getMonth() && isCurrentYear;
+
+  return (
+    <div className="space-y-4">
+      {props.mode === 'single' && (
+        <div className="flex items-center justify-center border-b p-2">
+          <DateInput
+            value={props.selected as Date}
+            onChange={props.onSelect as any}
+            onSubmit={onSubmit}
+          />
+        </div>
+      )}
+
+      <div>
+        <div className="flex items-center justify-between gap-2 border-b px-2 pb-4">
+          <button
+            onClick={() => {
+              const prev = new Date(month);
+              prev.setMonth(prev.getMonth() - 1);
+              setMonth(prev);
+            }}
+            className={cn(
+              buttonVariants({ variant: 'ghost', size: 'icon' }),
+              'h-7 w-7 transition-colors hover:bg-accent/50'
+            )}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+
+          <div className="flex items-center gap-2">
+            <Select
+              value={month.getFullYear().toString()}
+              onValueChange={(year) => {
+                const newDate = new Date(month);
+                newDate.setFullYear(parseInt(year));
+                setMonth(newDate);
+              }}
+            >
+              <SelectTrigger
+                className={cn(
+                  'h-8 w-[90px] transition-colors',
+                  isCurrentYear && 'font-medium text-primary'
+                )}
+              >
+                <SelectValue placeholder="Year" />
+              </SelectTrigger>
+              <SelectContent
+                position="popper"
+                className="h-[300px] overflow-y-auto"
+              >
+                <div className="sticky top-0 -mx-1 flex items-center justify-center border-b bg-background py-1">
+                  <div className="px-2 text-sm font-medium text-muted-foreground">
+                    {currentYear}
+                  </div>
+                </div>
+                {years.map((year) => (
+                  <SelectItem
+                    key={year.value}
+                    value={year.value}
+                    className={cn(
+                      'transition-colors',
+                      parseInt(year.value) === currentYear &&
+                        'font-medium text-primary'
+                    )}
+                  >
+                    {year.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            <Select
+              value={month.getMonth().toString()}
+              onValueChange={(monthValue) => {
+                const newDate = new Date(month);
+                newDate.setMonth(parseInt(monthValue));
+                setMonth(newDate);
+              }}
+            >
+              <SelectTrigger
+                className={cn(
+                  'h-8 w-[130px] transition-colors',
+                  isCurrentMonth && 'font-medium text-primary'
+                )}
+              >
+                <SelectValue placeholder="Month" />
+              </SelectTrigger>
+              <SelectContent position="popper">
+                {months.map((month) => (
+                  <SelectItem
+                    key={month.value}
+                    value={month.value}
+                    className="capitalize"
+                  >
+                    {month.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <button
+            onClick={() => {
+              const next = new Date(month);
+              next.setMonth(next.getMonth() + 1);
+              setMonth(next);
+            }}
+            className={cn(
+              buttonVariants({ variant: 'ghost', size: 'icon' }),
+              'h-7 w-7 transition-colors hover:bg-accent/50'
+            )}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        </div>
+
+        <DayPicker
+          {...props}
+          month={month}
+          onMonthChange={setMonth}
+          defaultMonth={defaultMonth}
+          showOutsideDays={showOutsideDays}
+          className={cn('', className)}
+          classNames={{
+            root: 'bg-transparent',
+            months: 'flex flex-col',
+            month:
+              'space-y-4 min-w-[276px] text-center p-2 font-semibold shrink-0',
+            caption: 'hidden',
+            nav: 'hidden',
+            nav_button: 'hidden',
+            table: 'w-full border-collapse',
+            head_row: 'grid grid-cols-7 gap-1',
+            weekday:
+              'text-muted-foreground rounded-md font-normal text-[0.8rem] text-center',
+            row: 'grid grid-cols-7 gap-1 mt-2',
+            day: 'text-center text-sm p-0 relative w-9',
+            day_button: cn(
+              buttonVariants({ variant: 'ghost' }),
+              'h-9 w-full rounded-md p-0 font-normal transition-colors duration-300',
+              'aria-selected:bg-foreground aria-selected:text-background',
+              'hover:bg-accent/50 hover:text-accent-foreground',
+              'hover:aria-selected:bg-foreground hover:aria-selected:text-background'
+            ),
+            selected: '!bg-foreground !text-background rounded-md',
+            today: 'bg-accent text-accent-foreground rounded-md font-medium',
+            outside: 'text-muted-foreground opacity-50',
+            disabled: 'text-muted-foreground opacity-50',
+            range_start: '!bg-foreground !text-background rounded-l-md',
+            range_end: '!bg-foreground !text-background rounded-r-md',
+            range_middle: 'aria-selected:bg-foreground/20',
+            hidden: 'invisible',
+            month_grid: 'w-full',
+            ...classNames,
+          }}
+          fixedWeeks
+        />
+      </div>
+    </div>
+  );
+}
+
+export { Calendar };

package/src/components/ui/card.tsx

@@ -0,0 +1,74 @@
+import { cn } from '@tuturuuu/utils/format';
+import * as React from 'react';
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'rounded-xl border bg-card text-card-foreground shadow-sm',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn('flex flex-col gap-1.5 p-6', className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold tracking-tight', 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 CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('p-6 pt-0', className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center p-6 pt-0', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

package/src/components/ui/carousel.tsx

@@ -0,0 +1,240 @@
+'use client';
+
+import { Button } from './button';
+import { cn } from '@tuturuuu/utils/format';
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from 'embla-carousel-react';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import * as React from 'react';
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: 'horizontal' | 'vertical';
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />');
+  }
+
+  return context;
+}
+
+function Carousel({
+  orientation = 'horizontal',
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === 'horizontal' ? 'x' : 'y',
+    },
+    plugins
+  );
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext]
+  );
+
+  React.useEffect(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+
+  React.useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on('reInit', onSelect);
+    api.on('select', onSelect);
+
+    return () => {
+      api?.off('select', onSelect);
+    };
+  }, [api, onSelect]);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn('relative', className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CarouselPrevious({
+  className,
+  variant = 'outline',
+  size = 'icon',
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -left-12 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+}
+
+function CarouselNext({
+  className,
+  variant = 'outline',
+  size = 'icon',
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -right-12 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+}
+
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  type CarouselApi,
+};