@lukoweb/apitogo 0.1.24 → 0.1.38

package/src/lib/ui/Progress.tsx

@@ -1,25 +1,25 @@
-import * as ProgressPrimitive from "@radix-ui/react-progress";
-import * as React from "react";
-import { cn } from "../util/cn.js";
-
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-      className,
-    )}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
-
-export { Progress };
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className,
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };

package/src/lib/ui/RadioGroup.tsx

@@ -1,41 +1,41 @@
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { Circle } from "lucide-react";
-import * as React from "react";
-import { cn } from "../util/cn.js";
-
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-current" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-export { RadioGroup, RadioGroupItem };
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

package/src/lib/ui/ReactComponentDoc.tsx

@@ -1,68 +1,68 @@
-import { Badge } from "./Badge.js";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "./Card.js";
-
-type PropType =
-  | string
-  | { name: string; description: string; required: boolean };
-
-type ReactComponentDocProps = {
-  component: {
-    __docgenInfo?: {
-      displayName: string;
-      description: string;
-      props: Record<
-        string,
-        {
-          type: PropType;
-          description: string;
-          required: boolean;
-        }
-      >;
-    };
-  };
-};
-
-export const ReactComponentDoc = ({ component }: ReactComponentDocProps) => {
-  const docgen = component.__docgenInfo;
-
-  if (!docgen) return null;
-
-  return (
-    <Card className="not-prose">
-      <CardContent className="p-0">
-        <CardHeader className="border-b mb-1 px-4 py-5">
-          <CardTitle>Component Properties</CardTitle>
-          <CardDescription>The properties of the component.</CardDescription>
-        </CardHeader>
-        <div className="grid grid-cols-[1fr_auto_auto] gap-2 divide-y -mx-4 px-4">
-          {Object.entries(docgen.props).map(([key, value]) => (
-            <div
-              key={key}
-              className="px-4 pb-2 col-span-full grid grid-cols-subgrid"
-            >
-              <span className="font-medium text-primary">{key}</span>
-              <div>
-                {value.required && (
-                  <Badge className="ml-2 font-mono">required</Badge>
-                )}
-              </div>
-              <div>
-                {typeof value.type === "object" && value.type.name && (
-                  <Badge className="ml-2 font-mono" variant="muted">
-                    {value.type.name}
-                  </Badge>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
+import { Badge } from "./Badge.js";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./Card.js";
+
+type PropType =
+  | string
+  | { name: string; description: string; required: boolean };
+
+type ReactComponentDocProps = {
+  component: {
+    __docgenInfo?: {
+      displayName: string;
+      description: string;
+      props: Record<
+        string,
+        {
+          type: PropType;
+          description: string;
+          required: boolean;
+        }
+      >;
+    };
+  };
+};
+
+export const ReactComponentDoc = ({ component }: ReactComponentDocProps) => {
+  const docgen = component.__docgenInfo;
+
+  if (!docgen) return null;
+
+  return (
+    <Card className="not-prose">
+      <CardContent className="p-0">
+        <CardHeader className="border-b mb-1 px-4 py-5">
+          <CardTitle>Component Properties</CardTitle>
+          <CardDescription>The properties of the component.</CardDescription>
+        </CardHeader>
+        <div className="grid grid-cols-[1fr_auto_auto] gap-2 divide-y -mx-4 px-4">
+          {Object.entries(docgen.props).map(([key, value]) => (
+            <div
+              key={key}
+              className="px-4 pb-2 col-span-full grid grid-cols-subgrid"
+            >
+              <span className="font-medium text-primary">{key}</span>
+              <div>
+                {value.required && (
+                  <Badge className="ml-2 font-mono">required</Badge>
+                )}
+              </div>
+              <div>
+                {typeof value.type === "object" && value.type.name && (
+                  <Badge className="ml-2 font-mono" variant="muted">
+                    {value.type.name}
+                  </Badge>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

package/src/lib/ui/ScrollArea.tsx

@@ -1,45 +1,45 @@
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import * as React from "react";
-import { cn } from "../util/cn.js";
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className,
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/src/lib/ui/Secret.tsx

@@ -1,133 +1,133 @@
-import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "lucide-react";
-import { useState } from "react";
-import { cn } from "../util/cn.js";
-import { useCopyToClipboard } from "../util/useCopyToClipboard.js";
-import { Button } from "./Button.js";
-
-type Status = "active" | "expired" | "expiring" | "revoked" | "none";
-
-export const SecretText = ({
-  secret,
-  revealed = false,
-  previewChars = 5,
-  className,
-}: {
-  secret: string;
-  revealed?: boolean;
-  previewChars?: number;
-  className?: string;
-}) => {
-  if (revealed) {
-    return <span className={className}>{secret}</span>;
-  }
-
-  const hiddenPart =
-    "•••• ".repeat(secret.slice(0, -previewChars).length / 5) +
-    "•".repeat(secret.slice(0, -previewChars).length % 5);
-  const visiblePart = previewChars > 0 ? secret.slice(-previewChars) : "";
-
-  return (
-    <span
-      className={cn(
-        "block overflow-hidden text-ellipsis whitespace-nowrap",
-        className,
-      )}
-      dir="rtl"
-    >
-      <span dir="ltr" className="inline">
-        <span className="opacity-50">{hiddenPart}</span>
-        {visiblePart && <span>{visiblePart}</span>}
-      </span>
-    </span>
-  );
-};
-
-export const Secret = ({
-  secret,
-  preview = 5,
-  className,
-  status,
-  onCopy,
-  revealed: controlledRevealed,
-  onReveal,
-  noReveal: disabledReveal,
-}: {
-  revealed?: boolean;
-  noReveal?: boolean;
-  secret: string;
-  status?: Status;
-  className?: string;
-  preview?: number;
-  onCopy?: (secret: string) => void;
-  onReveal?: (revealed: boolean) => void;
-}) => {
-  const previewChars = Math.abs(preview);
-  const [isRevealed, setRevealed] = useState(false);
-  const [isCopied, copyToClipboard] = useCopyToClipboard();
-
-  const revealed = controlledRevealed ?? isRevealed;
-
-  return (
-    <div
-      className={cn(
-        "flex gap-2 items-center text-sm border rounded-md px-1",
-        className,
-      )}
-    >
-      <div
-        className={cn(
-          "font-mono w-full h-9 items-center flex px-2 text-xs gap-2 min-w-0",
-          revealed ? "overflow-x-auto" : "overflow-hidden",
-        )}
-      >
-        {status && (
-          <div
-            className={cn(
-              "rounded-full shrink-0 w-2 h-2 mr-2",
-              status === "active" && "bg-emerald-400",
-              status === "expired" && "bg-neutral-200",
-              status === "expiring" && "bg-yellow-400",
-              status === "revoked" && "bg-red-400",
-              status === "none" && "opacity-0",
-            )}
-          />
-        )}
-        <SecretText
-          secret={secret}
-          revealed={revealed}
-          previewChars={previewChars}
-        />
-      </div>
-      {disabledReveal !== true && (
-        <Button
-          variant="ghost"
-          onClick={() => {
-            setRevealed((prev) => !prev);
-            onReveal?.(!revealed);
-          }}
-          size="icon-xs"
-        >
-          {revealed ? (
-            <EyeOffIcon className="size-3.5" />
-          ) : (
-            <EyeIcon className="size-3.5" />
-          )}
-        </Button>
-      )}
-      <Button
-        variant="ghost"
-        onClick={() => {
-          copyToClipboard(secret);
-          onCopy?.(secret);
-        }}
-        size="icon-xs"
-      >
-        {isCopied ? (
-          <CheckIcon className="size-3.5" />
-        ) : (
-          <CopyIcon className="size-3.5" />
-        )}
-      </Button>
-    </div>
-  );
-};
+import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../util/cn.js";
+import { useCopyToClipboard } from "../util/useCopyToClipboard.js";
+import { Button } from "./Button.js";
+
+type Status = "active" | "expired" | "expiring" | "revoked" | "none";
+
+export const SecretText = ({
+  secret,
+  revealed = false,
+  previewChars = 5,
+  className,
+}: {
+  secret: string;
+  revealed?: boolean;
+  previewChars?: number;
+  className?: string;
+}) => {
+  if (revealed) {
+    return <span className={className}>{secret}</span>;
+  }
+
+  const hiddenPart =
+    "•••• ".repeat(secret.slice(0, -previewChars).length / 5) +
+    "•".repeat(secret.slice(0, -previewChars).length % 5);
+  const visiblePart = previewChars > 0 ? secret.slice(-previewChars) : "";
+
+  return (
+    <span
+      className={cn(
+        "block overflow-hidden text-ellipsis whitespace-nowrap",
+        className,
+      )}
+      dir="rtl"
+    >
+      <span dir="ltr" className="inline">
+        <span className="opacity-50">{hiddenPart}</span>
+        {visiblePart && <span>{visiblePart}</span>}
+      </span>
+    </span>
+  );
+};
+
+export const Secret = ({
+  secret,
+  preview = 5,
+  className,
+  status,
+  onCopy,
+  revealed: controlledRevealed,
+  onReveal,
+  noReveal: disabledReveal,
+}: {
+  revealed?: boolean;
+  noReveal?: boolean;
+  secret: string;
+  status?: Status;
+  className?: string;
+  preview?: number;
+  onCopy?: (secret: string) => void;
+  onReveal?: (revealed: boolean) => void;
+}) => {
+  const previewChars = Math.abs(preview);
+  const [isRevealed, setRevealed] = useState(false);
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
+
+  const revealed = controlledRevealed ?? isRevealed;
+
+  return (
+    <div
+      className={cn(
+        "flex gap-2 items-center text-sm border rounded-md px-1",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          "font-mono w-full h-9 items-center flex px-2 text-xs gap-2 min-w-0",
+          revealed ? "overflow-x-auto" : "overflow-hidden",
+        )}
+      >
+        {status && (
+          <div
+            className={cn(
+              "rounded-full shrink-0 w-2 h-2 mr-2",
+              status === "active" && "bg-emerald-400",
+              status === "expired" && "bg-neutral-200",
+              status === "expiring" && "bg-yellow-400",
+              status === "revoked" && "bg-red-400",
+              status === "none" && "opacity-0",
+            )}
+          />
+        )}
+        <SecretText
+          secret={secret}
+          revealed={revealed}
+          previewChars={previewChars}
+        />
+      </div>
+      {disabledReveal !== true && (
+        <Button
+          variant="ghost"
+          onClick={() => {
+            setRevealed((prev) => !prev);
+            onReveal?.(!revealed);
+          }}
+          size="icon-xs"
+        >
+          {revealed ? (
+            <EyeOffIcon className="size-3.5" />
+          ) : (
+            <EyeIcon className="size-3.5" />
+          )}
+        </Button>
+      )}
+      <Button
+        variant="ghost"
+        onClick={() => {
+          copyToClipboard(secret);
+          onCopy?.(secret);
+        }}
+        size="icon-xs"
+      >
+        {isCopied ? (
+          <CheckIcon className="size-3.5" />
+        ) : (
+          <CopyIcon className="size-3.5" />
+        )}
+      </Button>
+    </div>
+  );
+};