@multicomma/arkcn 0.1.0

package/src/components/ui/radio-group.tsx

@@ -0,0 +1,108 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { RadioGroup as RadioGroupPrimitive } from "@ark-ui/react"
+
+function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return <RadioGroupPrimitive.Root data-slot="radio-group" className={cn("grid w-full gap-2", className)} {...props} />
+}
+
+function RadioGroupContext({ ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Context>) {
+  return <RadioGroupPrimitive.Context {...props} />
+}
+
+function RadioGroupLabel({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Label>) {
+  return (
+    <RadioGroupPrimitive.Label
+      data-slot="radio-group-label"
+      className={cn("text-sm font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupIndicator({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Indicator>) {
+  return (
+    <RadioGroupPrimitive.Indicator
+      data-slot="radio-group-indicator"
+      className={cn("rounded-md bg-background shadow-sm", className)}
+      {...props}
+    />
+  )
+}
+
+/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */
+function RadioGroupItem({
+  className,
+  children,
+  ...props
+}: Omit<React.ComponentProps<typeof RadioGroupPrimitive.Item>, "id">) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className="group/radio-group-item peer inline-flex items-center gap-2"
+      {...props}
+    >
+      <RadioGroupItemControl className={className} />
+      {children && <RadioGroupItemText>{children}</RadioGroupItemText>}
+      <RadioGroupItemHiddenInput />
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+function RadioGroupItemContext({ ...props }: React.ComponentProps<typeof RadioGroupPrimitive.ItemContext>) {
+  return <RadioGroupPrimitive.ItemContext {...props} />
+}
+
+/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */
+function RadioGroupItemControl({
+  className,
+  children,
+  ...props
+}: Omit<React.ComponentProps<typeof RadioGroupPrimitive.ItemControl>, "id">) {
+  return (
+    <RadioGroupPrimitive.ItemControl
+      data-slot="radio-group-item-control"
+      className={cn(
+        "group/radio-group-item-control relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none group-has-focus-visible/field-label:ring-0 group-has-focus-visible/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 data-focus-visible:border-ring data-focus-visible:ring-3 data-focus-visible:ring-ring/50 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 dark:bg-input/30 dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-focus-visible/field-label:data-checked:border-primary data-invalid:data-checked:border-primary dark:data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <span
+          data-slot="radio-group-indicator"
+          className="absolute top-1/2 left-1/2 hidden size-2 -translate-1/2 rounded-full bg-primary-foreground group-data-checked/radio-group-item-control:block"
+        />
+      )}
+    </RadioGroupPrimitive.ItemControl>
+  )
+}
+
+function RadioGroupItemText({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.ItemText>) {
+  return (
+    <RadioGroupPrimitive.ItemText
+      data-slot="radio-group-item-text"
+      className={cn("text-sm leading-none select-none data-disabled:opacity-50", className)}
+      {...props}
+    />
+  )
+}
+
+/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */
+function RadioGroupItemHiddenInput({
+  ...props
+}: Omit<React.ComponentProps<typeof RadioGroupPrimitive.ItemHiddenInput>, "id">) {
+  return <RadioGroupPrimitive.ItemHiddenInput {...props} />
+}
+
+export {
+  RadioGroup,
+  RadioGroupContext,
+  RadioGroupIndicator,
+  RadioGroupItem,
+  RadioGroupItemContext,
+  RadioGroupItemControl,
+  RadioGroupItemHiddenInput,
+  RadioGroupItemText,
+  RadioGroupLabel,
+}

package/src/components/ui/rating-group.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { RatingGroup as RatingGroupPrimitive } from "@ark-ui/react"
+import { StarIcon, StarHalfIcon } from "lucide-react"
+
+function RatingGroup({ className, children, ...props }: React.ComponentProps<typeof RatingGroupPrimitive.Root>) {
+  return (
+    <RatingGroupPrimitive.Root data-slot="rating-group" className={cn("flex flex-col gap-1.5", className)} {...props}>
+      {children ?? (
+        <RatingGroupControl>
+          <RatingGroupContext>
+            {({ items }) => items.map((index) => <RatingGroupItem key={index} index={index} />)}
+          </RatingGroupContext>
+          <RatingGroupHiddenInput />
+        </RatingGroupControl>
+      )}
+    </RatingGroupPrimitive.Root>
+  )
+}
+
+function RatingGroupContext({ ...props }: React.ComponentProps<typeof RatingGroupPrimitive.Context>) {
+  return <RatingGroupPrimitive.Context {...props} />
+}
+
+function RatingGroupLabel({ className, ...props }: React.ComponentProps<typeof RatingGroupPrimitive.Label>) {
+  return (
+    <RatingGroupPrimitive.Label
+      data-slot="rating-group-label"
+      className={cn("text-sm font-medium select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function RatingGroupControl({ className, ...props }: React.ComponentProps<typeof RatingGroupPrimitive.Control>) {
+  return (
+    <RatingGroupPrimitive.Control
+      data-slot="rating-group-control"
+      className={cn(
+        "inline-flex items-center gap-0.5 rounded-md outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function RatingGroupItem({ className, children, ...props }: React.ComponentProps<typeof RatingGroupPrimitive.Item>) {
+  return (
+    <RatingGroupPrimitive.Item
+      data-slot="rating-group-item"
+      className={cn(
+        "group/rating-group-item inline-flex cursor-pointer text-muted-foreground/40 transition-colors data-highlighted:text-primary data-readonly:cursor-default data-disabled:cursor-not-allowed [&_svg]:size-5",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <RatingGroupPrimitive.ItemContext>
+          {({ half, highlighted }) =>
+            half ? (
+              <StarHalfIcon className="fill-current" />
+            ) : (
+              <StarIcon className={highlighted ? "fill-current" : undefined} />
+            )
+          }
+        </RatingGroupPrimitive.ItemContext>
+      )}
+    </RatingGroupPrimitive.Item>
+  )
+}
+
+function RatingGroupItemContext({ ...props }: React.ComponentProps<typeof RatingGroupPrimitive.ItemContext>) {
+  return <RatingGroupPrimitive.ItemContext {...props} />
+}
+
+function RatingGroupHiddenInput({ ...props }: React.ComponentProps<typeof RatingGroupPrimitive.HiddenInput>) {
+  return <RatingGroupPrimitive.HiddenInput {...props} />
+}
+
+export {
+  RatingGroup,
+  RatingGroupContext,
+  RatingGroupControl,
+  RatingGroupHiddenInput,
+  RatingGroupItem,
+  RatingGroupItemContext,
+  RatingGroupLabel,
+}

package/src/components/ui/resizable.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn("flex size-full aria-[orientation=vertical]:flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />}
+    </ResizablePrimitive.Separator>
+  )
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }