@carefully-built/cli 0.1.0 → 0.1.2

package/registry/ui/calendar/primitives/calendar.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: React.ComponentProps<typeof DayPicker>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: "flex flex-col gap-4",
+        month: "flex flex-col gap-4",
+        month_caption: "relative flex items-center justify-center pt-1",
+        caption_label: "text-sm font-medium",
+        nav: "flex items-center gap-1",
+        button_previous: cn(
+          buttonVariants({ variant: "ghost", size: "icon-sm" }),
+          "absolute left-1 size-7 bg-transparent p-0 opacity-70 hover:opacity-100"
+        ),
+        button_next: cn(
+          buttonVariants({ variant: "ghost", size: "icon-sm" }),
+          "absolute right-1 size-7 bg-transparent p-0 opacity-70 hover:opacity-100"
+        ),
+        month_grid: "w-full border-collapse space-y-1",
+        weekdays: "flex",
+        weekday:
+          "w-9 text-[0.78rem] font-medium text-muted-foreground",
+        week: "mt-2 flex w-full",
+        day: "size-9 p-0 text-sm",
+        day_button: cn(
+          buttonVariants({ variant: "ghost", size: "icon-sm" }),
+          "size-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        today: "bg-muted text-foreground",
+        outside: "text-muted-foreground opacity-50 aria-selected:bg-primary/10 aria-selected:text-muted-foreground",
+        disabled: "text-muted-foreground opacity-50",
+        hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ orientation, className: iconClassName, ...iconProps }) =>
+          orientation === "left" ? (
+            <ChevronLeft className={cn("size-4", iconClassName)} {...iconProps} />
+          ) : (
+            <ChevronRight className={cn("size-4", iconClassName)} {...iconProps} />
+          ),
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Calendar }

package/registry/ui/calendar/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/registry/ui/card/manifest.json

@@ -0,0 +1,36 @@
+{
+  "name": "card",
+  "description": "Editable source registry entry for card.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "Card",
+    "CardContent",
+    "CardDescription",
+    "CardFooter",
+    "CardHeader",
+    "CardTitle"
+  ],
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "peerDependencies": [
+    "react",
+    "react-dom",
+    "radix-ui",
+    "lucide-react",
+    "react-day-picker",
+    "vaul"
+  ],
+  "files": [
+    {
+      "source": "primitives/card.tsx",
+      "target": "components/ui/card.tsx"
+    },
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    }
+  ]
+}

package/registry/ui/card/primitives/card.tsx

@@ -0,0 +1,80 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+}

package/registry/ui/card/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/registry/ui/chip/manifest.json

@@ -0,0 +1,36 @@
+{
+  "name": "chip",
+  "description": "Editable source registry entry for chip.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "Chip",
+    "ChipButton"
+  ],
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "peerDependencies": [
+    "react",
+    "react-dom",
+    "radix-ui",
+    "lucide-react",
+    "react-day-picker",
+    "vaul"
+  ],
+  "files": [
+    {
+      "source": "primitives/chip-utils.ts",
+      "target": "components/ui/chip-utils.ts"
+    },
+    {
+      "source": "primitives/chip.tsx",
+      "target": "components/ui/chip.tsx"
+    },
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    }
+  ]
+}

package/registry/ui/chip/primitives/chip-utils.ts

@@ -0,0 +1,10 @@
+export const CHIP_CLASS_NAMES = {
+  default: 'inline-flex w-fit max-w-full flex-none items-center gap-1 rounded-md px-1.5 py-[2px] text-xs font-medium leading-4',
+  compact: 'inline-flex w-fit max-w-full flex-none items-center gap-1 rounded-[4px] px-1.5 py-px text-[10px] font-medium leading-3',
+} as const;
+
+export type ChipSize = keyof typeof CHIP_CLASS_NAMES;
+
+export function getChipClassName(size: ChipSize = 'default'): string {
+  return CHIP_CLASS_NAMES[size];
+}

package/registry/ui/chip/primitives/chip.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+
+import { getChipClassName, type ChipSize } from '@/components/ui/chip-utils';
+import { cn } from '@/lib/utils';
+
+interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
+  readonly children: ReactNode;
+  readonly leading?: ReactNode;
+  readonly trailing?: ReactNode;
+  readonly size?: ChipSize;
+}
+
+export function Chip({
+  children,
+  className,
+  leading,
+  size = 'default',
+  trailing,
+  ...props
+}: ChipProps): React.ReactElement {
+  return (
+    <span
+      {...props}
+      className={cn(
+        getChipClassName(size),
+        className
+      )}
+    >
+      {leading ? <span className="shrink-0">{leading}</span> : null}
+      <span className="truncate">{children}</span>
+      {trailing ? <span className="shrink-0">{trailing}</span> : null}
+    </span>
+  );
+}
+
+interface ChipButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  readonly children: ReactNode;
+  readonly leading?: ReactNode;
+  readonly trailing?: ReactNode;
+  readonly selected?: boolean;
+  readonly size?: ChipSize;
+}
+
+export function ChipButton({
+  children,
+  className,
+  leading,
+  selected = false,
+  size = 'default',
+  trailing,
+  ...props
+}: ChipButtonProps): React.ReactElement {
+  return (
+    <button
+      type="button"
+      aria-pressed={selected}
+      {...props}
+      className={cn(
+        getChipClassName(size),
+        'border text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        selected
+          ? 'border-[#713dff] bg-[#f6f1ff] text-[#1f1f23] shadow-[0_0_0_1px_rgba(113,61,255,0.08)] hover:bg-[#f6f1ff]'
+          : 'border-[#e7e8eb] bg-white text-[#5f6368] hover:bg-[#f7f7f9]',
+        className
+      )}
+    >
+      {leading ? <span className="shrink-0">{leading}</span> : null}
+      <span className="truncate">{children}</span>
+      {trailing ? <span className="shrink-0">{trailing}</span> : null}
+    </button>
+  );
+}

package/registry/ui/chip/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/registry/ui/chip-utils/manifest.json

@@ -0,0 +1,33 @@
+{
+  "name": "chip-utils",
+  "description": "Editable source registry entry for chip-utils.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "CHIP_CLASS_NAMES",
+    "ChipSize",
+    "getChipClassName"
+  ],
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "peerDependencies": [
+    "react",
+    "react-dom",
+    "radix-ui",
+    "lucide-react",
+    "react-day-picker",
+    "vaul"
+  ],
+  "files": [
+    {
+      "source": "primitives/chip-utils.ts",
+      "target": "components/ui/chip-utils.ts"
+    },
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    }
+  ]
+}

package/registry/ui/chip-utils/primitives/chip-utils.ts

@@ -0,0 +1,10 @@
+export const CHIP_CLASS_NAMES = {
+  default: 'inline-flex w-fit max-w-full flex-none items-center gap-1 rounded-md px-1.5 py-[2px] text-xs font-medium leading-4',
+  compact: 'inline-flex w-fit max-w-full flex-none items-center gap-1 rounded-[4px] px-1.5 py-px text-[10px] font-medium leading-3',
+} as const;
+
+export type ChipSize = keyof typeof CHIP_CLASS_NAMES;
+
+export function getChipClassName(size: ChipSize = 'default'): string {
+  return CHIP_CLASS_NAMES[size];
+}

package/registry/ui/chip-utils/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/registry/ui/date-display/manifest.json

@@ -0,0 +1,33 @@
+{
+  "name": "date-display",
+  "description": "Editable source registry entry for date-display.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "DateDisplayValue",
+    "formatAbsoluteDate",
+    "formatDisplayDate"
+  ],
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "peerDependencies": [
+    "react",
+    "react-dom",
+    "radix-ui",
+    "lucide-react",
+    "react-day-picker",
+    "vaul"
+  ],
+  "files": [
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    },
+    {
+      "source": "utils/date-display.ts",
+      "target": "components/ui/date-display.ts"
+    }
+  ]
+}

package/registry/ui/date-display/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/registry/ui/date-display/utils/date-display.ts

@@ -0,0 +1,61 @@
+export type DateDisplayValue = Date | number | string;
+
+function getDate(value: DateDisplayValue): Date {
+  return value instanceof Date ? value : new Date(value);
+}
+
+function startOfDay(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+function getDayDifference(from: Date, to: Date): number {
+  const millisecondsPerDay = 24 * 60 * 60 * 1000;
+  return Math.round((startOfDay(to).getTime() - startOfDay(from).getTime()) / millisecondsPerDay);
+}
+
+function capitalizeMonthLabel(value: string): string {
+  return value
+    .split(' ')
+    .map((part, index) => {
+      if (index !== 1 || part.length === 0) {
+        return part;
+      }
+
+      const [firstCharacter = '', ...restCharacters] = part;
+      return `${firstCharacter.toUpperCase()}${restCharacters.join('')}`;
+    })
+    .join(' ');
+}
+
+export function formatAbsoluteDate(value: DateDisplayValue): string {
+  const date = getDate(value);
+  const currentYear = new Date().getFullYear();
+  const includesYear = date.getFullYear() !== currentYear;
+
+  return capitalizeMonthLabel(
+    new Intl.DateTimeFormat('it-IT', {
+      day: 'numeric',
+      month: 'short',
+      ...(includesYear ? { year: 'numeric' } : {}),
+    }).format(date)
+  );
+}
+
+export function formatDisplayDate(value: DateDisplayValue): string {
+  const date = getDate(value);
+  const dayDifference = getDayDifference(date, new Date());
+
+  if (dayDifference === 0) {
+    return 'Oggi';
+  }
+
+  if (dayDifference === 1) {
+    return 'Ieri';
+  }
+
+  if (dayDifference >= 2 && dayDifference <= 10) {
+    return `${String(dayDifference)} giorni fa`;
+  }
+
+  return formatAbsoluteDate(date);
+}

package/registry/ui/dialog/manifest.json

@@ -0,0 +1,43 @@
+{
+  "name": "dialog",
+  "description": "Editable source registry entry for dialog.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "Dialog",
+    "DialogContent",
+    "DialogDescription",
+    "DialogFooter",
+    "DialogHeader",
+    "DialogOverlay",
+    "DialogPortal",
+    "DialogTitle",
+    "DialogTrigger"
+  ],
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "peerDependencies": [
+    "react",
+    "react-dom",
+    "radix-ui",
+    "lucide-react",
+    "react-day-picker",
+    "vaul"
+  ],
+  "files": [
+    {
+      "source": "primitives/button.tsx",
+      "target": "components/ui/button.tsx"
+    },
+    {
+      "source": "primitives/dialog.tsx",
+      "target": "components/ui/dialog.tsx"
+    },
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    }
+  ]
+}

package/registry/ui/dialog/primitives/button.tsx

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:brightness-90 [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ButtonVariant =
+  | "default"
+  | "outline"
+  | "secondary"
+  | "ghost"
+  | "destructive"
+  | "link";
+type ButtonSize =
+  | "default"
+  | "xs"
+  | "sm"
+  | "lg"
+  | "icon"
+  | "icon-xs"
+  | "icon-sm"
+  | "icon-lg";
+
+interface ButtonProps extends React.ComponentProps<"button"> {
+  readonly asChild?: boolean;
+  readonly size?: ButtonSize;
+  readonly variant?: ButtonVariant;
+}
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };
+export type { ButtonProps, ButtonSize, ButtonVariant };