@multicomma/arkcn 0.1.0

package/src/components/ui/progress.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Progress as ProgressPrimitive } from "@ark-ui/react"
+
+function Progress({ className, children, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root data-slot="progress" className={cn("flex w-full flex-col gap-1", className)} {...props}>
+      {children}
+      <ProgressTrack>
+        <ProgressRange />
+      </ProgressTrack>
+    </ProgressPrimitive.Root>
+  )
+}
+
+function ProgressRoot({ className, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root data-slot="progress" className={cn("flex w-full flex-col gap-1", className)} {...props} />
+  )
+}
+
+function ProgressContext({ ...props }: React.ComponentProps<typeof ProgressPrimitive.Context>) {
+  return <ProgressPrimitive.Context {...props} />
+}
+
+function ProgressLabel({ className, ...props }: React.ComponentProps<typeof ProgressPrimitive.Label>) {
+  return (
+    <ProgressPrimitive.Label data-slot="progress-label" className={cn("text-sm font-medium", className)} {...props} />
+  )
+}
+
+function ProgressValueText({ className, ...props }: React.ComponentProps<typeof ProgressPrimitive.ValueText>) {
+  return (
+    <ProgressPrimitive.ValueText
+      data-slot="progress-value-text"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function ProgressTrack({ className, ...props }: React.ComponentProps<typeof ProgressPrimitive.Track>) {
+  return (
+    <ProgressPrimitive.Track
+      data-slot="progress-track"
+      className={cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+function ProgressRange({ className, ...props }: React.ComponentProps<typeof ProgressPrimitive.Range>) {
+  return (
+    <ProgressPrimitive.Range
+      data-slot="progress-indicator"
+      className={cn(
+        "h-full bg-primary transition-all data-[state=indeterminate]:w-1/3 data-[state=indeterminate]:animate-pulse",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ProgressCircle({ className, ...props }: React.ComponentProps<typeof ProgressPrimitive.Circle>) {
+  return (
+    <ProgressPrimitive.Circle
+      data-slot="progress-circle"
+      className={cn("[--size:2.5rem] [--thickness:3px]", className)}
+      {...props}
+    />
+  )
+}
+
+function ProgressCircleTrack({ className, ...props }: React.ComponentProps<typeof ProgressPrimitive.CircleTrack>) {
+  return (
+    <ProgressPrimitive.CircleTrack
+      data-slot="progress-circle-track"
+      className={cn("stroke-muted", className)}
+      {...props}
+    />
+  )
+}
+
+function ProgressCircleRange({ className, ...props }: React.ComponentProps<typeof ProgressPrimitive.CircleRange>) {
+  return (
+    <ProgressPrimitive.CircleRange
+      data-slot="progress-circle-range"
+      className={cn("stroke-primary transition-all", className)}
+      {...props}
+    />
+  )
+}
+
+/** Renders only while the progress is in the given `state` (`loading`, `complete`, `indeterminate`). */
+function ProgressView({ ...props }: React.ComponentProps<typeof ProgressPrimitive.View>) {
+  return <ProgressPrimitive.View data-slot="progress-view" {...props} />
+}
+
+export {
+  Progress,
+  ProgressCircle,
+  ProgressCircleRange,
+  ProgressCircleTrack,
+  ProgressContext,
+  ProgressLabel,
+  ProgressRange,
+  ProgressRoot,
+  ProgressTrack,
+  ProgressValueText,
+  ProgressView,
+}

package/src/components/ui/qr-code.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { QrCode as QrCodePrimitive } from "@ark-ui/react"
+
+function QrCode({ className, children, ...props }: React.ComponentProps<typeof QrCodePrimitive.Root>) {
+  return (
+    <QrCodePrimitive.Root data-slot="qr-code" className={cn("inline-flex", className)} {...props}>
+      {children ?? (
+        <QrCodeFrame>
+          <QrCodePattern />
+        </QrCodeFrame>
+      )}
+    </QrCodePrimitive.Root>
+  )
+}
+
+function QrCodeContext({ ...props }: React.ComponentProps<typeof QrCodePrimitive.Context>) {
+  return <QrCodePrimitive.Context {...props} />
+}
+
+function QrCodeFrame({ className, ...props }: React.ComponentProps<typeof QrCodePrimitive.Frame>) {
+  return (
+    <QrCodePrimitive.Frame
+      data-slot="qr-code-frame"
+      className={cn("size-40 rounded-lg border bg-background fill-foreground p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function QrCodePattern({ ...props }: React.ComponentProps<typeof QrCodePrimitive.Pattern>) {
+  return <QrCodePrimitive.Pattern data-slot="qr-code-pattern" {...props} />
+}
+
+function QrCodeOverlay({ className, ...props }: React.ComponentProps<typeof QrCodePrimitive.Overlay>) {
+  return (
+    <QrCodePrimitive.Overlay
+      data-slot="qr-code-overlay"
+      className={cn("flex items-center justify-center rounded-md bg-background p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function QrCodeDownloadTrigger({ ...props }: React.ComponentProps<typeof QrCodePrimitive.DownloadTrigger>) {
+  return <QrCodePrimitive.DownloadTrigger data-slot="qr-code-download-trigger" {...props} />
+}
+
+export { QrCode, QrCodeContext, QrCodeDownloadTrigger, QrCodeFrame, QrCodeOverlay, QrCodePattern }