kiso 0.2.2.pre → 0.4.0.pre

data/lib/kiso/themes/alert_dialog.rb

@@ -0,0 +1,78 @@
+module Kiso
+  module Themes
+    # Alert dialog for confirmations that require an explicit user action.
+    # Wraps the native +<dialog>+ element with +role="alertdialog"+.
+    # Unlike {Dialog}, cannot be dismissed by backdrop click or Escape key.
+    #
+    # Reuses the +kiso--dialog+ Stimulus controller with
+    # +dismissable: false+.
+    #
+    # Sub-parts: {AlertDialogContent}, {AlertDialogHeader},
+    # {AlertDialogTitle}, {AlertDialogDescription}, {AlertDialogMedia},
+    # {AlertDialogFooter}, {AlertDialogAction}, {AlertDialogCancel}
+    AlertDialog = ClassVariants.build(
+      base: "fixed inset-0 z-50 m-0 h-full w-full max-w-none max-h-none bg-black/50 p-0 " \
+            "items-center justify-center backdrop:bg-transparent open:flex"
+    )
+
+    # The centered panel inside the {AlertDialog} overlay. Supports
+    # +size:+ variant (+:default+ or +:sm+).
+    AlertDialogContent = ClassVariants.build(
+      base: "bg-background text-foreground relative grid w-full max-w-[calc(100%-2rem)] " \
+            "gap-4 rounded-lg border p-6 shadow-lg outline-none group/alert-dialog-content",
+      variants: {
+        size: {
+          default: "sm:max-w-lg",
+          sm: "max-w-xs"
+        }
+      },
+      defaults: {size: :default}
+    )
+
+    # Grid container for {AlertDialogTitle}, {AlertDialogDescription},
+    # and optional {AlertDialogMedia}. Adapts layout responsively when
+    # media is present via +has-[...]+ selectors.
+    AlertDialogHeader = ClassVariants.build(
+      base: "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center " \
+            "has-[[data-slot=alert-dialog-media]]:grid-rows-[auto_auto_1fr] " \
+            "has-[[data-slot=alert-dialog-media]]:gap-x-6 " \
+            "sm:group-data-[size=default]/alert-dialog-content:place-items-start " \
+            "sm:group-data-[size=default]/alert-dialog-content:text-left " \
+            "sm:group-data-[size=default]/alert-dialog-content:has-[[data-slot=alert-dialog-media]]:grid-rows-[auto_1fr]"
+    )
+
+    # Action buttons container. Reversed column on mobile, horizontal
+    # on desktop. Grid layout when parent content is +:sm+ size.
+    AlertDialogFooter = ClassVariants.build(
+      base: "flex flex-col-reverse gap-2 " \
+            "group-data-[size=sm]/alert-dialog-content:grid " \
+            "group-data-[size=sm]/alert-dialog-content:grid-cols-2 " \
+            "sm:flex-row sm:justify-end"
+    )
+
+    # The alert dialog heading. Renders as +<h2>+. Shifts to column 2
+    # when media is present in default size.
+    AlertDialogTitle = ClassVariants.build(
+      base: "text-lg font-semibold " \
+            "sm:group-data-[size=default]/alert-dialog-content:group-has-[[data-slot=alert-dialog-media]]/alert-dialog-content:col-start-2"
+    )
+
+    # Descriptive text below the {AlertDialogTitle}.
+    AlertDialogDescription = ClassVariants.build(
+      base: "text-muted-foreground text-sm"
+    )
+
+    # Optional icon or image container in the header. Renders as a
+    # rounded box with muted background. Spans 2 rows in default size.
+    AlertDialogMedia = ClassVariants.build(
+      base: "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md " \
+            "sm:group-data-[size=default]/alert-dialog-content:row-span-2 " \
+            "*:[svg:not([class*='size-'])]:size-8"
+    )
+
+    # Action and Cancel buttons are styled directly via
+    # {Kiso::Themes::Button} in their partials — no theme constants
+    # needed. See +alert_dialog/_action.html.erb+ and
+    # +alert_dialog/_cancel.html.erb+.
+  end
+end

data/lib/kiso/themes/aspect_ratio.rb

@@ -0,0 +1,16 @@
+module Kiso
+  module Themes
+    # Displays content within a desired width-to-height ratio.
+    #
+    # @example
+    #   AspectRatio.render
+    #
+    # No variants — purely structural. The ratio is set via inline style
+    # on the partial (`aspect-ratio: <ratio>`).
+    #
+    # shadcn: Radix AspectRatio primitive with data-slot="aspect-ratio"
+    AspectRatio = ClassVariants.build(
+      base: "relative w-full"
+    )
+  end
+end

data/lib/kiso/themes/dashboard.rb

@@ -5,7 +5,7 @@ module Kiso
     )
 
     DashboardNavbar = ClassVariants.build(
-      base: "flex items-center gap-3 px-4 border-b border-border bg-background shrink-0 z-[--z-topbar]"
+      base: "flex items-center gap-3 px-4 border-b border-border bg-background shrink-0 z-(--z-topbar)"
     )
 
     DashboardNavbarToggle = ClassVariants.build(
@@ -21,11 +21,11 @@ module Kiso
     )
 
     DashboardSidebarHeader = ClassVariants.build(
-      base: "shrink-0 flex items-center gap-1.5 px-4"
+      base: "shrink-0 flex flex-col gap-2 p-2"
     )
 
     DashboardSidebarFooter = ClassVariants.build(
-      base: "shrink-0 flex items-center gap-1.5 px-4 py-2"
+      base: "shrink-0 flex flex-col gap-2 p-2"
     )
 
     DashboardSidebarToggle = ClassVariants.build(

data/lib/kiso/themes/dialog.rb

@@ -0,0 +1,57 @@
+module Kiso
+  module Themes
+    # Modal dialog wrapping the native +<dialog>+ element. Opens with
+    # +showModal()+ via a Stimulus controller for proper focus trapping,
+    # backdrop, and Escape-to-close behavior.
+    #
+    # The dialog element itself acts as the backdrop overlay (same
+    # pattern as {CommandDialog}). A {DialogContent} wrapper inside
+    # provides the centered panel.
+    #
+    # Sub-parts: {DialogContent}, {DialogHeader}, {DialogTitle},
+    # {DialogDescription}, {DialogBody}, {DialogFooter}, {DialogClose}
+    Dialog = ClassVariants.build(
+      base: "fixed inset-0 z-50 m-0 h-full w-full max-w-none max-h-none bg-black/50 p-0 " \
+            "items-center justify-center backdrop:bg-transparent open:flex"
+    )
+
+    # The centered panel inside the {Dialog} overlay.
+    DialogContent = ClassVariants.build(
+      base: "bg-background text-foreground relative grid w-full max-w-[calc(100%-2rem)] " \
+            "gap-4 rounded-lg border p-6 shadow-lg outline-none sm:max-w-lg"
+    )
+
+    # Flex column container for {DialogTitle} and {DialogDescription}.
+    DialogHeader = ClassVariants.build(
+      base: "flex flex-col gap-2 text-center sm:text-left"
+    )
+
+    # Reversed column layout on mobile, horizontal on desktop.
+    DialogFooter = ClassVariants.build(
+      base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
+    )
+
+    # The dialog heading. Renders as +<h2>+.
+    DialogTitle = ClassVariants.build(
+      base: "text-lg leading-none font-semibold"
+    )
+
+    # Descriptive text below the {DialogTitle}.
+    DialogDescription = ClassVariants.build(
+      base: "text-muted-foreground text-sm"
+    )
+
+    # Main content area between header and footer.
+    DialogBody = ClassVariants.build(
+      base: "text-sm"
+    )
+
+    # Absolutely positioned close button in the top-right corner.
+    DialogClose = ClassVariants.build(
+      base: "absolute top-4 right-4 rounded-xs opacity-70 transition-opacity " \
+            "hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 " \
+            "focus-visible:outline-ring disabled:pointer-events-none " \
+            "[&>svg]:size-4 cursor-pointer"
+    )
+  end
+end

data/lib/kiso/themes/empty.rb

@@ -9,7 +9,7 @@ module Kiso
     #   Empty.render
     #
     # Sub-parts: {EmptyHeader}, {EmptyMedia}, {EmptyTitle}, {EmptyDescription},
-    # {EmptyContent}
+    # {EmptyActions}, {EmptyContent}
     #
     # shadcn base: flex min-w-0 flex-1 flex-col ... border-dashed p-6 ... md:p-12
     Empty = ClassVariants.build(
@@ -46,6 +46,11 @@ module Kiso
       base: "text-muted-foreground text-sm/relaxed [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4"
     )
 
+    # Centered button group for call-to-action buttons.
+    EmptyActions = ClassVariants.build(
+      base: "flex flex-wrap items-center justify-center gap-2"
+    )
+
     # Container for action buttons or other interactive content.
     EmptyContent = ClassVariants.build(
       base: "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance"

data/lib/kiso/themes/input_otp.rb

@@ -21,8 +21,8 @@ module Kiso
     #   InputOtpSlot.render(size: :md)
     InputOtpSlot = ClassVariants.build(
       base: "border-border relative flex items-center justify-center " \
-            "border-y border-r shadow-xs transition-all outline-none " \
-            "first:rounded-l-md first:border-l last:rounded-r-md " \
+            "border -ml-px shadow-xs transition-all outline-none " \
+            "first:ml-0 first:rounded-l-md last:rounded-r-md " \
             "data-[active=true]:z-10 data-[active=true]:border-primary " \
             "data-[active=true]:ring-[3px] data-[active=true]:ring-primary/50 " \
             "aria-invalid:border-error " \

data/lib/kiso/themes/layout.rb

@@ -0,0 +1,69 @@
+module Kiso
+  module Themes
+    # Root application wrapper. Provides base structure and sets
+    # `text-foreground` for dark mode inheritance.
+    #
+    # @example
+    #   App.render
+    #
+    # No variants — purely structural.
+    App = ClassVariants.build(
+      base: "bg-background text-foreground antialiased"
+    )
+
+    # Content containment with consistent max-width and padding.
+    #
+    # @example
+    #   Container.render(size: :default)
+    #
+    # Variants:
+    # - +size+ — :narrow, :default, :wide, :full
+    #
+    # Nuxt UI base: w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8
+    Container = ClassVariants.build(
+      base: "mx-auto w-full px-4 sm:px-6 lg:px-8",
+      variants: {
+        size: {
+          narrow: "max-w-3xl",
+          default: "max-w-7xl",
+          wide: "max-w-screen-2xl",
+          full: "max-w-full"
+        }
+      },
+      defaults: {size: :default}
+    )
+
+    # Site/app header. Semantic `<header>` element.
+    #
+    # @example
+    #   Header.render
+    #
+    # No variants — purely structural.
+    #
+    # Nuxt UI base: bg-default/75 backdrop-blur border-b border-default
+    #   h-(--ui-header-height) sticky top-0 z-50
+    Header = ClassVariants.build(
+      base: "bg-background/75 backdrop-blur border-b border-border sticky top-0 z-50"
+    )
+
+    # Site/app footer. Semantic `<footer>` element.
+    #
+    # @example
+    #   Footer.render
+    #
+    # No variants — purely structural.
+    Footer = ClassVariants.build(
+      base: ""
+    )
+
+    # Primary content area wrapper. Semantic `<main>` element.
+    #
+    # @example
+    #   Main.render
+    #
+    # No variants — purely structural.
+    Main = ClassVariants.build(
+      base: "flex-1"
+    )
+  end
+end

data/lib/kiso/themes/page.rb

@@ -0,0 +1,295 @@
+module Kiso
+  module Themes
+    # Page layout wrapper with optional left/right sidebar grid.
+    #
+    # Provides a responsive grid that switches from stacked (mobile) to
+    # a 10-column grid (desktop). Left and right sidebars each take 2
+    # columns, the center adjusts automatically.
+    #
+    # @example
+    #   Page.render
+    #
+    # Sub-parts: {PageLeft}, {PageCenter}, {PageRight}
+    #
+    # Nuxt UI base: flex flex-col lg:grid lg:grid-cols-10 lg:gap-10
+    Page = ClassVariants.build(
+      base: "flex flex-col lg:grid lg:grid-cols-10 lg:gap-10"
+    )
+
+    # Left sidebar slot — 2 columns on desktop.
+    #
+    # Nuxt UI: lg:col-span-2
+    PageLeft = ClassVariants.build(
+      base: "lg:col-span-2"
+    )
+
+    # Center content area — adjusts span based on sidebar presence.
+    #
+    # Nuxt UI: lg:col-span-8 (default), lg:col-span-6 (both sidebars),
+    # lg:col-span-10 (no sidebars)
+    PageCenter = ClassVariants.build(
+      base: "lg:col-span-8"
+    )
+
+    # Right sidebar slot — 2 columns, ordered first on mobile, last on desktop.
+    #
+    # Nuxt UI: lg:col-span-2 order-first lg:order-last
+    PageRight = ClassVariants.build(
+      base: "lg:col-span-2 order-first lg:order-last"
+    )
+
+    # Page header with title, description, and links.
+    #
+    # Section header for page-level content with border-bottom divider.
+    # Supports headline, title, description, and action links.
+    #
+    # @example
+    #   PageHeader.render
+    #
+    # Sub-parts: {PageHeaderHeadline}, {PageHeaderTitle},
+    # {PageHeaderDescription}, {PageHeaderLinks}
+    #
+    # Nuxt UI base: relative border-b border-default py-8
+    PageHeader = ClassVariants.build(
+      base: "relative border-b border-border py-8 text-foreground"
+    )
+
+    # Inner wrapper for page header content — flex row on desktop.
+    #
+    # Nuxt UI: flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4
+    PageHeaderWrapper = ClassVariants.build(
+      base: "flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4"
+    )
+
+    # Headline eyebrow text above the page header title.
+    #
+    # Nuxt UI: mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5
+    PageHeaderHeadline = ClassVariants.build(
+      base: "mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5"
+    )
+
+    # Page header title — large bold heading.
+    #
+    # Nuxt UI: text-3xl sm:text-4xl text-pretty font-bold text-highlighted
+    PageHeaderTitle = ClassVariants.build(
+      base: "text-3xl sm:text-4xl text-pretty font-bold text-foreground"
+    )
+
+    # Page header description text.
+    #
+    # Nuxt UI: text-lg text-pretty text-muted
+    PageHeaderDescription = ClassVariants.build(
+      base: "mt-4 text-lg text-pretty text-muted-foreground"
+    )
+
+    # Action links container in page header.
+    #
+    # Nuxt UI: flex flex-wrap items-center gap-1.5
+    PageHeaderLinks = ClassVariants.build(
+      base: "flex flex-wrap items-center gap-1.5"
+    )
+
+    # Page body — main content wrapper with vertical spacing.
+    #
+    # Nuxt UI base: mt-8 pb-24 space-y-12
+    PageBody = ClassVariants.build(
+      base: "mt-8 pb-24 space-y-12"
+    )
+
+    # Content section with consistent vertical spacing and optional title.
+    #
+    # Supports horizontal and vertical orientations. Horizontal uses a
+    # 2-column grid for side-by-side content. Vertical centers text.
+    #
+    # @example
+    #   PageSection.render(orientation: :vertical)
+    #
+    # Sub-parts: {PageSectionWrapper}, {PageSectionHeader},
+    # {PageSectionTitle}, {PageSectionDescription}, {PageSectionBody},
+    # {PageSectionLinks}
+    #
+    # Nuxt UI base: relative isolate
+    PageSection = ClassVariants.build(
+      base: "relative isolate text-foreground",
+      variants: {
+        orientation: {
+          horizontal: "",
+          vertical: ""
+        }
+      },
+      defaults: {orientation: :horizontal}
+    )
+
+    # Section inner container — switches to grid on desktop.
+    #
+    # Nuxt UI: flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16
+    PageSectionContainer = ClassVariants.build(
+      base: "flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16",
+      variants: {
+        orientation: {
+          horizontal: "lg:grid-cols-2 lg:items-center",
+          vertical: ""
+        }
+      },
+      defaults: {orientation: :horizontal}
+    )
+
+    # Section text/content wrapper.
+    PageSectionWrapper = ClassVariants.build(
+      base: "",
+      variants: {
+        order: {
+          first: "",
+          last: "order-last"
+        }
+      },
+      defaults: {order: :first}
+    )
+
+    # Section header for title/description/links grouping.
+    PageSectionHeader = ClassVariants.build(
+      base: ""
+    )
+
+    # Section headline eyebrow text.
+    #
+    # Nuxt UI: mb-3 font-semibold text-primary flex items-center gap-1.5
+    PageSectionHeadline = ClassVariants.build(
+      base: "mb-3 font-semibold text-primary flex items-center gap-1.5",
+      variants: {
+        orientation: {
+          horizontal: "",
+          vertical: "justify-center"
+        }
+      },
+      defaults: {orientation: :horizontal}
+    )
+
+    # Section title — large bold heading.
+    #
+    # Nuxt UI: text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted
+    PageSectionTitle = ClassVariants.build(
+      base: "text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-foreground",
+      variants: {
+        orientation: {
+          horizontal: "",
+          vertical: "text-center"
+        }
+      },
+      defaults: {orientation: :horizontal}
+    )
+
+    # Section description text.
+    #
+    # Nuxt UI: text-base sm:text-lg text-muted
+    PageSectionDescription = ClassVariants.build(
+      base: "mt-6 text-base sm:text-lg text-muted-foreground",
+      variants: {
+        orientation: {
+          horizontal: "text-pretty",
+          vertical: "text-center text-balance"
+        }
+      },
+      defaults: {orientation: :horizontal}
+    )
+
+    # Section body for additional content.
+    PageSectionBody = ClassVariants.build(
+      base: "mt-8"
+    )
+
+    # Section action links container.
+    #
+    # Nuxt UI: flex flex-wrap gap-x-6 gap-y-3
+    PageSectionLinks = ClassVariants.build(
+      base: "mt-8 flex flex-wrap gap-x-6 gap-y-3",
+      variants: {
+        orientation: {
+          horizontal: "",
+          vertical: "justify-center"
+        }
+      },
+      defaults: {orientation: :horizontal}
+    )
+
+    # Responsive grid for page cards/features.
+    #
+    # Nuxt UI base: relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8
+    PageGrid = ClassVariants.build(
+      base: "relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
+    )
+
+    # Content card for grid/column layouts.
+    #
+    # Supports outline, soft, subtle, and ghost variants.
+    # Ghost variant has no background or border for minimal styling.
+    #
+    # @example
+    #   PageCard.render(variant: :outline)
+    #
+    # Sub-parts: {PageCardHeader}, {PageCardBody}, {PageCardFooter},
+    # {PageCardIcon}, {PageCardTitle}, {PageCardDescription}
+    #
+    # Nuxt UI base: relative flex rounded-lg
+    PageCard = ClassVariants.build(
+      base: "relative flex rounded-lg text-foreground",
+      variants: {
+        variant: {
+          outline: "bg-background ring ring-inset ring-border",
+          soft: "bg-elevated/50",
+          subtle: "bg-elevated/50 ring ring-inset ring-border",
+          ghost: ""
+        }
+      },
+      defaults: {variant: :outline}
+    )
+
+    # Page card inner container with padding.
+    #
+    # Nuxt UI: relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6
+    PageCardContainer = ClassVariants.build(
+      base: "relative flex flex-col flex-1 gap-x-8 gap-y-4 p-4 sm:p-6"
+    )
+
+    # Page card content wrapper.
+    PageCardWrapper = ClassVariants.build(
+      base: "flex flex-col flex-1 items-start"
+    )
+
+    # Page card header area.
+    PageCardHeader = ClassVariants.build(
+      base: "mb-4"
+    )
+
+    # Page card body — grows to fill available space.
+    PageCardBody = ClassVariants.build(
+      base: "flex-1"
+    )
+
+    # Page card footer area.
+    PageCardFooter = ClassVariants.build(
+      base: "pt-4 mt-auto"
+    )
+
+    # Page card leading icon.
+    #
+    # Nuxt UI: size-5 shrink-0 text-primary
+    PageCardIcon = ClassVariants.build(
+      base: "inline-flex items-center mb-2.5 [&_svg]:size-5 [&_svg]:shrink-0 [&_svg]:text-primary"
+    )
+
+    # Page card title text.
+    #
+    # Nuxt UI: text-base text-pretty font-semibold text-highlighted
+    PageCardTitle = ClassVariants.build(
+      base: "text-base text-pretty font-semibold text-foreground"
+    )
+
+    # Page card description text.
+    #
+    # Nuxt UI: text-[15px] text-pretty text-muted
+    PageCardDescription = ClassVariants.build(
+      base: "mt-1 text-sm text-pretty text-muted-foreground"
+    )
+  end
+end

data/lib/kiso/themes/skeleton.rb

@@ -0,0 +1,16 @@
+module Kiso
+  module Themes
+    # Placeholder element displayed while content is loading.
+    #
+    # @example
+    #   Skeleton.render
+    #
+    # No variants — dimensions set by consumer via css_classes.
+    #
+    # shadcn base: animate-pulse rounded-md bg-accent
+    # Nuxt UI base: animate-pulse rounded-md bg-elevated
+    Skeleton = ClassVariants.build(
+      base: "animate-pulse rounded-md bg-elevated"
+    )
+  end
+end

data/lib/kiso/themes/slider.rb

@@ -0,0 +1,53 @@
+module Kiso
+  module Themes
+    # Range slider with track, filled range, and draggable thumb.
+    #
+    # @example
+    #   Slider.render(size: :md)
+    #
+    # Variants:
+    # - +size+ — :sm, :md (default), :lg
+    #
+    # Sub-parts: {SliderTrack}, {SliderRange}, {SliderThumb}
+    #
+    # shadcn base: relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50
+    Slider = ClassVariants.build(
+      base: "relative flex w-full touch-none items-center select-none"
+    )
+
+    # shadcn: relative grow overflow-hidden rounded-full bg-muted h-1.5 w-full
+    SliderTrack = ClassVariants.build(
+      base: "relative grow cursor-pointer overflow-hidden rounded-full bg-muted w-full",
+      variants: {
+        size: {
+          sm: "h-1",
+          md: "h-1.5",
+          lg: "h-2"
+        }
+      },
+      defaults: {size: :md}
+    )
+
+    # shadcn: absolute h-full bg-primary
+    SliderRange = ClassVariants.build(
+      base: "absolute h-full bg-primary"
+    )
+
+    # shadcn: block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm
+    #         ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4
+    #         focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50
+    SliderThumb = ClassVariants.build(
+      base: "block shrink-0 rounded-full border border-primary bg-white shadow-sm " \
+            "ring-ring/50 transition-[color,box-shadow] hover:ring-4 " \
+            "focus-visible:ring-4 focus-visible:outline-hidden",
+      variants: {
+        size: {
+          sm: "size-3",
+          md: "size-4",
+          lg: "size-5"
+        }
+      },
+      defaults: {size: :md}
+    )
+  end
+end

data/lib/kiso/version.rb

@@ -2,5 +2,5 @@
 
 module Kiso
   # @return [String] the current gem version
-  VERSION = "0.2.2.pre"
+  VERSION = "0.4.0.pre"
 end