shadcnui-hono-jsx 0.1.0

package/generated/templates/base-nova/empty.tsx

@@ -0,0 +1,121 @@
+// Generated by shadcnui-hono-jsx. DO NOT EDIT; run `bun run generate empty`.
+// upstream: shadcn/ui base-nova/empty (https://ui.shadcn.com/r/styles/base-nova/empty.json)
+// upstream-revision: sha256:16a341dcd4e1fa3c690e67bbef1e2649834efc9b2f3057a4a0f7e2faee1a06d1; shadcn-ui/ui@98a1fe67b439324ddc857f47fbdce056600a4329
+// mode: generated
+// Derived from shadcn/ui. Copyright (c) 2023 shadcn.
+// Original additions and modifications: Copyright (c) 2026 supermomonga.
+// SPDX-License-Identifier: MIT
+// Full license: LICENSE-shadcnui-hono-jsx.txt at the project root.
+
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+import type { JSX } from "hono/jsx"
+
+/** Props of the intrinsic element `T`, following Hono JSX conventions (`class`, no `render`/`asChild`). */
+type ComponentProps<
+  T extends keyof JSX.IntrinsicElements,
+  Render = never,
+> = JSX.IntrinsicElements[T] & {
+  class?: string | undefined
+  className?: never
+  render?: Render
+  asChild?: never
+}
+
+function Empty({ class: className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      class={cn(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ class: className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      class={cn("flex max-w-sm flex-col items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  class: className,
+  variant = "default",
+  ...props
+}: ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      class={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ class: className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      class={cn("font-heading text-sm font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ class: className, ...props }: ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      class={cn(
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ class: className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      class={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+}

package/generated/templates/base-nova/field.tsx

@@ -0,0 +1,256 @@
+// Generated by shadcnui-hono-jsx. DO NOT EDIT; run `bun run generate field`.
+// upstream: shadcn/ui base-nova/field (https://ui.shadcn.com/r/styles/base-nova/field.json)
+// upstream-revision: sha256:bea69a05de39ce4358d1ae459a5e3ab74ebcc51df9ea3ecb0e22b21d442a84fc; shadcn-ui/ui@98a1fe67b439324ddc857f47fbdce056600a4329
+// mode: generated
+// Derived from shadcn/ui. Copyright (c) 2023 shadcn.
+// Original additions and modifications: Copyright (c) 2026 supermomonga.
+// SPDX-License-Identifier: MIT
+// Full license: LICENSE-shadcnui-hono-jsx.txt at the project root.
+
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+import type { Child, JSX } from "hono/jsx"
+
+import { Label } from "./label"
+import { Separator } from "./separator"
+
+/** Props of the intrinsic element `T`, following Hono JSX conventions (`class`, no `render`/`asChild`). */
+type ComponentProps<
+  T extends keyof JSX.IntrinsicElements,
+  Render = never,
+> = JSX.IntrinsicElements[T] & {
+  class?: string | undefined
+  className?: never
+  render?: Render
+  asChild?: never
+}
+
+function FieldSet({ class: className, ...props }: ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      class={cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  class: className,
+  variant = "legend",
+  ...props
+}: ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      class={cn(
+        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ class: className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      class={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[data-slot=checkbox],[data-slot=radio-group-item]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[data-slot=checkbox],[data-slot=radio-group-item]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  class: className,
+  orientation = "vertical",
+  ...props
+}: ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      class={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ class: className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      class={cn(
+        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  class: className,
+  ...props
+}: Parameters<typeof Label>[0]) {
+  return (
+    <Label
+      data-slot="field-label"
+      class={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-checked:border-primary/30 has-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-checked:border-primary/20 dark:has-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ class: className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      class={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ class: className, ...props }: ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      class={cn(
+        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  class: className,
+  ...props
+}: ComponentProps<"div"> & {
+  children?: Child
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      class={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator class="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          class="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  class: className,
+  children,
+  errors,
+  ...props
+}: ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = (() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul class="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  })()
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      class={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+}