@lukoweb/apitogo 0.1.24 → 0.1.37

package/src/lib/ui/Callout.tsx

@@ -1,113 +1,113 @@
-import {
-  AlertTriangleIcon,
-  InfoIcon,
-  LightbulbIcon,
-  type LucideIcon,
-  ShieldAlertIcon,
-} from "lucide-react";
-import type { ReactNode } from "react";
-import { cn } from "../util/cn.js";
-
-const stylesMap = {
-  note: {
-    border: "border-gray-300 dark:border-zinc-800",
-    bg: "bg-gray-100 dark:bg-zinc-800/50",
-    iconColor: "text-gray-600 dark:text-zinc-300",
-    titleColor: "text-gray-600 dark:text-zinc-300",
-    textColor:
-      "text-gray-600 dark:text-zinc-300 [&_a]:hover:text-gray-700 [&_a]:dark:hover:text-zinc-400",
-    Icon: InfoIcon as LucideIcon,
-  },
-  tip: {
-    border: "border-green-500 dark:border-green-800",
-    bg: "bg-green-200/25 dark:bg-green-950/70",
-    iconColor: "text-green-600 dark:text-green-200",
-    titleColor: "text-green-700 dark:text-green-200",
-    textColor:
-      "text-green-600 dark:text-green-50 [&_a]:hover:text-green-700 [&_a]:dark:hover:text-green-300",
-    Icon: LightbulbIcon as LucideIcon,
-  },
-  info: {
-    border: "border-blue-400 dark:border-blue-900/60",
-    bg: "bg-blue-50 dark:bg-blue-950/40",
-    iconColor: "text-blue-400 dark:text-blue-200",
-    titleColor: "text-blue-700 dark:text-blue-200",
-    textColor:
-      "text-blue-600 dark:text-blue-100 [&_a]:hover:text-blue-800 [&_a]:dark:hover:text-blue-300",
-    Icon: InfoIcon as LucideIcon,
-  },
-  caution: {
-    border: "border-yellow-400 dark:border-yellow-400/25",
-    bg: "bg-yellow-100/60 dark:bg-yellow-400/10",
-    iconColor: "text-yellow-500 dark:text-yellow-300",
-    titleColor: "text-yellow-600 dark:text-yellow-300",
-    textColor:
-      "text-yellow-700 dark:text-yellow-200 [&_a]:hover:text-yellow-800 [&_a]:dark:hover:text-yellow-300",
-    Icon: AlertTriangleIcon as LucideIcon,
-  },
-  danger: {
-    border: "border-rose-400 dark:border-rose-800",
-    bg: "bg-rose-50 dark:bg-rose-950/40",
-    iconColor: "text-rose-400 dark:text-rose-300",
-    titleColor: "text-rose-800 dark:text-rose-300",
-    textColor:
-      "text-rose-700 dark:text-rose-100 [&_a]:hover:text-rose-800 [&_a]:dark:hover:text-rose-300",
-    Icon: ShieldAlertIcon as LucideIcon,
-  },
-} as const;
-
-type CalloutProps = {
-  type: keyof typeof stylesMap;
-  title?: string;
-  children: ReactNode;
-  className?: string;
-  icon?: boolean;
-};
-
-export const Callout = ({
-  type,
-  children,
-  title,
-  className,
-  icon = true,
-}: CalloutProps) => {
-  const { border, bg, iconColor, titleColor, textColor, Icon } =
-    stylesMap[type];
-
-  return (
-    <div
-      className={cn(
-        "not-prose rounded-md border p-4 text-md my-2",
-        icon &&
-          "grid grid-cols-[min-content_1fr] items-baseline grid-rows-[fit-content_1fr] gap-x-4 gap-y-2",
-        !icon && title && "flex flex-col gap-2",
-        "[&_a]:underline [&_a]:decoration-current [&_a]:decoration-from-font [&_a]:underline-offset-4 hover:[&_a]:decoration-1",
-        "[&_.code-block-wrapper]:border",
-        "[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:ps-4 [&_ul>li]:ps-1 [&_ul>li]:my-1",
-        icon && title && "items-center",
-        border,
-        bg,
-        className,
-      )}
-    >
-      {icon && (
-        <Icon
-          className={cn(!title ? "translate-y-1" : "align-middle", iconColor)}
-          size={20}
-          aria-hidden="true"
-        />
-      )}
-      {title && <h3 className={cn("font-medium", titleColor)}>{title}</h3>}
-      <div
-        className={cn(
-          icon && "col-start-2",
-          !title && icon && "row-start-1",
-          textColor,
-          "overflow-x-auto",
-        )}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
+import {
+  AlertTriangleIcon,
+  InfoIcon,
+  LightbulbIcon,
+  type LucideIcon,
+  ShieldAlertIcon,
+} from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../util/cn.js";
+
+const stylesMap = {
+  note: {
+    border: "border-gray-300 dark:border-zinc-800",
+    bg: "bg-gray-100 dark:bg-zinc-800/50",
+    iconColor: "text-gray-600 dark:text-zinc-300",
+    titleColor: "text-gray-600 dark:text-zinc-300",
+    textColor:
+      "text-gray-600 dark:text-zinc-300 [&_a]:hover:text-gray-700 [&_a]:dark:hover:text-zinc-400",
+    Icon: InfoIcon as LucideIcon,
+  },
+  tip: {
+    border: "border-green-500 dark:border-green-800",
+    bg: "bg-green-200/25 dark:bg-green-950/70",
+    iconColor: "text-green-600 dark:text-green-200",
+    titleColor: "text-green-700 dark:text-green-200",
+    textColor:
+      "text-green-600 dark:text-green-50 [&_a]:hover:text-green-700 [&_a]:dark:hover:text-green-300",
+    Icon: LightbulbIcon as LucideIcon,
+  },
+  info: {
+    border: "border-blue-400 dark:border-blue-900/60",
+    bg: "bg-blue-50 dark:bg-blue-950/40",
+    iconColor: "text-blue-400 dark:text-blue-200",
+    titleColor: "text-blue-700 dark:text-blue-200",
+    textColor:
+      "text-blue-600 dark:text-blue-100 [&_a]:hover:text-blue-800 [&_a]:dark:hover:text-blue-300",
+    Icon: InfoIcon as LucideIcon,
+  },
+  caution: {
+    border: "border-yellow-400 dark:border-yellow-400/25",
+    bg: "bg-yellow-100/60 dark:bg-yellow-400/10",
+    iconColor: "text-yellow-500 dark:text-yellow-300",
+    titleColor: "text-yellow-600 dark:text-yellow-300",
+    textColor:
+      "text-yellow-700 dark:text-yellow-200 [&_a]:hover:text-yellow-800 [&_a]:dark:hover:text-yellow-300",
+    Icon: AlertTriangleIcon as LucideIcon,
+  },
+  danger: {
+    border: "border-rose-400 dark:border-rose-800",
+    bg: "bg-rose-50 dark:bg-rose-950/40",
+    iconColor: "text-rose-400 dark:text-rose-300",
+    titleColor: "text-rose-800 dark:text-rose-300",
+    textColor:
+      "text-rose-700 dark:text-rose-100 [&_a]:hover:text-rose-800 [&_a]:dark:hover:text-rose-300",
+    Icon: ShieldAlertIcon as LucideIcon,
+  },
+} as const;
+
+type CalloutProps = {
+  type: keyof typeof stylesMap;
+  title?: string;
+  children: ReactNode;
+  className?: string;
+  icon?: boolean;
+};
+
+export const Callout = ({
+  type,
+  children,
+  title,
+  className,
+  icon = true,
+}: CalloutProps) => {
+  const { border, bg, iconColor, titleColor, textColor, Icon } =
+    stylesMap[type];
+
+  return (
+    <div
+      className={cn(
+        "not-prose rounded-md border p-4 text-md my-2",
+        icon &&
+          "grid grid-cols-[min-content_1fr] items-baseline grid-rows-[fit-content_1fr] gap-x-4 gap-y-2",
+        !icon && title && "flex flex-col gap-2",
+        "[&_a]:underline [&_a]:decoration-current [&_a]:decoration-from-font [&_a]:underline-offset-4 hover:[&_a]:decoration-1",
+        "[&_.code-block-wrapper]:border",
+        "[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:ps-4 [&_ul>li]:ps-1 [&_ul>li]:my-1",
+        icon && title && "items-center",
+        border,
+        bg,
+        className,
+      )}
+    >
+      {icon && (
+        <Icon
+          className={cn(!title ? "translate-y-1" : "align-middle", iconColor)}
+          size={20}
+          aria-hidden="true"
+        />
+      )}
+      {title && <h3 className={cn("font-medium", titleColor)}>{title}</h3>}
+      <div
+        className={cn(
+          icon && "col-start-2",
+          !title && icon && "row-start-1",
+          textColor,
+          "overflow-x-auto",
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/lib/ui/Card.tsx

@@ -1,95 +1,95 @@
-import type * as React from "react";
-import { cn } from "../util/cn.js";
-
-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 CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        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,
-  CardAction,
-  CardDescription,
-  CardContent,
-};
+import type * as React from "react";
+import { cn } from "../util/cn.js";
+
+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 CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        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,
+  CardAction,
+  CardDescription,
+  CardContent,
+};