odt-ui-rails 2.2.4 → 2.2.6

data/lib/odt_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module OdtUi
-  VERSION = "2.2.4"
+  VERSION = "2.2.6"
 end

data/lib/odt_ui.rb

@@ -1,3 +1,8 @@
 # frozen_string_literal: true
 
-require_relative "odt-ui-rails"
+require "odt_ui/version"
+require "odt_ui/helper"
+require "odt_ui/engine" if defined?(Rails)
+
+module OdtUi
+end

data/sig/odt_ui.rbs

@@ -2,41 +2,45 @@ module OdtUi
   VERSION: String
 
   module Helper
-    type button_variant = :filled | :frosted | :capsule | :ghost | :light | :outline | :outlined | :subtle | String
-    type button_color = :primary | :secondary | :surface | :muted | :inverse | :success | :warning | :danger | :info | :neutral | String
-    type button_size = :xs | :sm | :md | :lg | :xl | String
-    type radius_size = :none | :xs | :sm | :md | :lg | :xl | :"2xl" | :"3xl" | :"4xl" | :full | Symbol | String
-    type shadow_size = :none | :card | :dropdown | :modal | :popover | Symbol | String
-
-    type badge_variant = :subtle | :filled | :outlined | :outline | String
-    type badge_color = :primary | :secondary | :success | :warning | :danger | :info | :neutral | String
-    type badge_size = :sm | :md | String
-
-    type card_variant = :elevated | :outlined | :subtle | :muted | :ghost | :frosted | String
-    type card_background = :base | :surface | :surface_elevated | :surface_muted | :surface_subtle | :gradient_primary | :gradient_secondary | :gradient_vibrant | :gradient_hero | :frosted | :frosted_muted | :frosted_subtle | :frosted_gradient_primary | :frosted_gradient_secondary | :transparent | Symbol | String
-    type card_border = :none | :muted | :base | :strong | :primary | :secondary | :danger | :success | bool | Symbol | String
-    type card_padding = :none | :xs | :sm | :md | :lg | :xl | :"2xl" | Symbol | String
-    type card_tag = :div | :article | :section | :aside | :main | Symbol | String
-
-    type alert_variant = :success | :warning | :danger | :info | String
-    type heading_tag = :h1 | :h2 | :h3 | :h4 | :h5 | :h6 | String
-    type heading_size = :"5xl" | :"4xl" | :"3xl" | :"2xl" | :xl | :lg | Symbol | String
-    type font_weight = :light | :normal | :medium | :semibold | :bold | :extrabold | Symbol | String
-    type typography_color = :strong | :default | :muted | :subtle | :disabled | :primary | :secondary | :success | :warning | :danger | :info | Symbol | String
-
-    type text_tag = :p | :span | :div | :label | :small | Symbol | String
-    type text_size = :xs | :sm | :base | :lg | :xl | :"2xl" | Symbol | String
-
-    type avatar_size = :xs | :sm | :md | :lg | :xl | :"2xl" | String
-    type avatar_color = :secondary | :primary | :neutral | String
-
-    type input_variant = :outlined | :filled | :frosted | String
-    type input_size = :sm | :md | :lg | String
-    type input_resize = :none | :vertical | :horizontal | :both | String
-    type checkbox_color = :primary | :secondary | :success | :warning | :danger | :dark | :neutral | String
-    type checkbox_size = :sm | :md | :lg | String
-
-    # Renders an ODT Button component.
+    type button_variant = :filled | :frosted | :capsule | :ghost
+    type button_color = :primary | :secondary | :surface | :muted | :inverse | :success | :warning | :danger | :info
+    type button_size = :sm | :md | :lg
+    type radius_size = :none | :xs | :sm | :md | :lg | :xl | :"2xl" | :"3xl" | :"4xl" | :full
+    type shadow_size = :none | :card | :dropdown | :modal | :popover
+
+    type badge_variant = :subtle | :filled | :outlined
+    type badge_color = :primary | :secondary | :success | :warning | :danger | :info | :neutral
+    type badge_size = :sm | :md
+
+    type card_variant = :elevated | :outlined | :subtle | :ghost
+    type card_background = :base | :surface | :surface_elevated | :"surface-elevated" | :surface_muted | :"surface-muted" | :surface_subtle | :"surface-subtle" | :gradient_primary | :"gradient-primary" | :gradient_secondary | :"gradient-secondary" | :gradient_vibrant | :"gradient-vibrant" | :gradient_hero | :"gradient-hero" | :frosted | :frosted_muted | :"frosted-muted" | :frosted_subtle | :"frosted-subtle" | :frosted_gradient_primary | :"frosted-gradient-primary" | :frosted_gradient_secondary | :"frosted-gradient-secondary" | :transparent
+    type card_border = :none | :muted | :base | :strong | :primary | :secondary | :danger | :success | bool
+    type card_padding = :none | :xs | :sm | :md | :lg | :xl | :"2xl"
+    type card_tag = :div | :article | :section | :aside | :main
+
+    type alert_variant = :success | :warning | :danger | :info
+
+    type heading_tag = :h1 | :h2 | :h3 | :h4 | :h5 | :h6
+    type heading_size = :"5xl" | :"4xl" | :"3xl" | :"2xl" | :xl | :lg
+    type font_weight = :light | :normal | :medium | :semibold | :bold | :extrabold
+    type typography_color = :strong | :default | :muted | :subtle | :disabled | :inverse | :"inverse-strong" | :inverse_strong | :"inverse-muted" | :inverse_muted | :"inverse-subtle" | :inverse_subtle | :"inverse-disabled" | :inverse_disabled | :primary | :secondary | :success | :warning | :danger | :info
+
+    type text_tag = :p | :span | :div | :label | :small
+    type text_size = :xs | :sm | :base | :lg | :xl | :"2xl"
+
+    type avatar_size = :xs | :sm | :md | :lg | :xl | :"2xl"
+    type avatar_color = :primary | :secondary | :neutral
+
+    type input_variant = :outlined | :filled | :frosted | :unstyled
+    type input_size = :sm | :md | :lg
+    type input_resize = :none | :vertical | :horizontal | :both
+
+    type checkbox_color = :primary | :secondary | :success | :warning | :danger | :dark
+    type checkbox_size = :sm | :md | :lg
+    type radio_color = :primary | :secondary | :success | :warning | :danger | :dark
+    type radio_size = :sm | :md | :lg
+    type radio_orientation = :horizontal | :vertical
+
     def odt_button: (
       ?String? text,
       ?variant: button_variant,
@@ -55,7 +59,6 @@ module OdtUi
       **untyped
     ) ?{ () -> untyped } -> untyped
 
-    # Renders an ODT Badge component.
     def odt_badge: (
       ?String? text,
       ?variant: badge_variant,
@@ -67,7 +70,6 @@ module OdtUi
       **untyped
     ) ?{ () -> untyped } -> untyped
 
-    # Renders an ODT Card component.
     def odt_card: (
       ?title: String?,
       ?subtitle: String?,
@@ -83,7 +85,6 @@ module OdtUi
       **untyped
     ) ?{ () -> untyped } -> untyped
 
-    # Renders an ODT Alert banner.
     def odt_alert: (
       ?String? message,
       ?variant: alert_variant,
@@ -91,7 +92,6 @@ module OdtUi
       **untyped
     ) ?{ () -> untyped } -> untyped
 
-    # Renders an ODT Heading element.
     def odt_heading: (
       ?String? text,
       ?as: heading_tag,
@@ -102,7 +102,6 @@ module OdtUi
       **untyped
     ) ?{ () -> untyped } -> untyped
 
-    # Renders styled body text.
     def odt_text: (
       ?String? text,
       ?as: text_tag,
@@ -113,18 +112,16 @@ module OdtUi
       **untyped
     ) ?{ () -> untyped } -> untyped
 
-    # Renders an ODT Avatar element.
     def odt_avatar: (
       ?name: String?,
       ?src: String?,
       ?size: avatar_size,
       ?color: avatar_color,
-      ?icon: String,
+      ?icon: String?,
       ?fallback: String?,
       **untyped
     ) -> untyped
 
-    # Renders a styled input field.
     def odt_input: (
       ?label: String?,
       ?variant: input_variant,
@@ -147,7 +144,6 @@ module OdtUi
       **untyped
     ) -> untyped
 
-    # Renders a styled textarea field.
     def odt_textarea: (
       ?label: String?,
       ?variant: input_variant,
@@ -164,7 +160,6 @@ module OdtUi
       **untyped
     ) ?{ () -> untyped } -> untyped
 
-    # Renders a styled native <select> dropdown.
     def odt_select: (
       ?label: String?,
       ?options: untyped,
@@ -181,7 +176,6 @@ module OdtUi
       **untyped
     ) -> untyped
 
-    # Renders a styled checkbox.
     def odt_checkbox: (
       ?label: String?,
       ?description: String?,
@@ -194,19 +188,17 @@ module OdtUi
       **untyped
     ) -> untyped
 
-    # Renders a styled radio button.
     def odt_radio: (
       ?label: String?,
       ?description: String?,
       ?checked: bool,
-      ?color: checkbox_color,
-      ?size: checkbox_size,
+      ?color: radio_color,
+      ?size: radio_size,
       ?disabled: bool,
       ?error: String?,
       **untyped
     ) -> untyped
 
-    # Renders a form field wrapper.
     def odt_form_group: (
       ?label: String?,
       ?error: String?,
@@ -217,48 +209,49 @@ module OdtUi
       **untyped
     ) ?{ () -> untyped } -> untyped
 
-    type toaster_position = :top_right | :top_center | :top_left | :bottom_right | :bottom_center | :bottom_left | Symbol | String
-    type toast_variant = :success | :warning | :danger | :error | :info | :loading | :frosted | Symbol | String
+    type toaster_position = :top_right | :"top-right" | :top_center | :"top-center" | :top_left | :"top-left" | :bottom_right | :"bottom-right" | :bottom_center | :"bottom-center" | :bottom_left | :"bottom-left"
+    type toast_variant = :elevated | :frosted | :subtle | :outlined
+    type toast_type = :default | :success | :warning | :danger | :error | :info | :loading
 
-    # Renders an ODT Toaster viewport container.
     def odt_toaster: (
       ?position: toaster_position,
       ?id: String,
+      ?expand: bool,
       **untyped
     ) ?{ () -> untyped } -> untyped
 
-    # Renders a single ODT Toast card.
     def odt_toast: (
       ?String? message,
       ?title: String?,
       ?variant: toast_variant,
+      ?type: toast_type,
       ?icon: String?,
       ?duration: Integer,
       ?dismissible: bool,
       ?radius: radius_size?,
+      ?rich_colors: bool,
       **untyped
     ) ?{ () -> untyped } -> untyped
 
-    # Renders active flash messages as ODT Toasts.
     def odt_flash_toasts: (
       ?untyped flash_hash,
       ?duration: Integer
     ) -> untyped
 
-    # Generates a Turbo Stream action for a toast.
     def odt_toast_stream: (
       ?String? message,
       ?title: String?,
       ?variant: toast_variant,
+      ?type: toast_type,
       ?target: String,
       ?action: Symbol | String,
       ?duration: Integer,
+      ?rich_colors: bool,
       **untyped
     ) -> untyped
 
-    type modal_size = :sm | :md | :lg | :xl | :full | Symbol | String
+    type modal_size = :sm | :md | :lg | :xl | :full
 
-    # Renders an ODT Modal dialog container.
     def odt_modal: (
       ?id: String?,
       ?title: String?,
@@ -271,7 +264,6 @@ module OdtUi
       **untyped
     ) ?{ () -> untyped } -> untyped
 
-    # Renders an ODT Modal Header subcomponent.
     def odt_modal_header: (
       ?title: String?,
       ?subtitle: String?,
@@ -279,15 +271,81 @@ module OdtUi
       **untyped
     ) ?{ () -> untyped } -> untyped
 
-    # Renders an ODT Modal Body subcomponent.
     def odt_modal_body: (
       **untyped
     ) ?{ () -> untyped } -> untyped
 
-    # Renders an ODT Modal Footer subcomponent.
     def odt_modal_footer: (
       **untyped
     ) ?{ () -> untyped } -> untyped
+
+    type dropdown_align = :start | :center | :end
+    type dropdown_side = :bottom | :top | :left | :right
+    type dropdown_variant = :outlined | :filled | :frosted
+    type dropdown_size = :sm | :md | :lg
+
+    def odt_dropdown_menu: (
+      ?open: bool,
+      ?close_on_click_outside: bool,
+      ?close_on_select: bool,
+      ?full_width: bool,
+      **untyped
+    ) ?{ () -> untyped } -> untyped
+
+    def odt_dropdown_trigger: (
+      ?String? text,
+      ?label: String?,
+      ?helper: String?,
+      ?helper_text: String?,
+      ?error: String?,
+      ?variant: dropdown_variant,
+      ?size: dropdown_size,
+      ?radius: radius_size?,
+      ?chevron: bool,
+      ?placeholder: String?,
+      ?left_icon: String?,
+      ?right_icon: String?,
+      ?full_width: bool,
+      ?disabled: bool,
+      **untyped
+    ) ?{ () -> untyped } -> untyped
+
+    def odt_dropdown_content: (
+      ?align: dropdown_align,
+      ?side: dropdown_side,
+      ?radius: radius_size?,
+      ?shadow: shadow_size?,
+      ?full_width: bool,
+      **untyped
+    ) ?{ () -> untyped } -> untyped
+
+    def odt_dropdown_item: (
+      ?String? text,
+      ?href: String?,
+      ?left_icon: String?,
+      ?right_icon: String?,
+      ?shortcut: String?,
+      ?destructive: bool,
+      ?disabled: bool,
+      ?inset: bool,
+      ?value: String?,
+      **untyped
+    ) ?{ () -> untyped } -> untyped
+
+    def odt_dropdown_label: (
+      ?String? text,
+      ?inset: bool,
+      **untyped
+    ) ?{ () -> untyped } -> untyped
+
+    def odt_dropdown_separator: (
+      **untyped
+    ) -> untyped
+
+    def odt_dropdown_shortcut: (
+      ?String? text,
+      **untyped
+    ) ?{ () -> untyped } -> untyped
   end
 end
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: odt-ui-rails
 version: !ruby/object:Gem::Version
-  version: 2.2.4
+  version: 2.2.6
 platform: ruby
 authors:
 - Pixel
@@ -47,14 +47,13 @@ files:
 - README.md
 - app/assets/stylesheets/odt_ui.css
 - app/assets/stylesheets/odt_ui/styles.css
-- app/assets/stylesheets/odt_ui/theme.css
 - app/assets/stylesheets/odt_ui/tokens.css
-- app/javascript/controllers/odt_modal_controller.js
-- app/javascript/controllers/odt_toast_controller.js
 - lib/generators/odt/install_generator.rb
+- lib/generators/odt/templates/odt_dropdown_controller.js
 - lib/generators/odt/templates/odt_modal_controller.js
 - lib/generators/odt/templates/odt_theme.css
 - lib/generators/odt/templates/odt_toast_controller.js
+- lib/generators/odt/templates/odt_toaster_controller.js
 - lib/generators/odt/templates/odt_ui.rbs
 - lib/odt-ui-rails.rb
 - lib/odt_ui.rb

data/app/assets/stylesheets/odt_ui/theme.css

@@ -1,126 +0,0 @@
-/*
- * odt_ui/theme.css
- *
- * Tailwind CSS v4 @theme configuration for ODT Design Tokens.
- *
- * Usage in application.tailwind.css / application.css:
- *   @import "tailwindcss";
- *   @import "odt_ui/tokens.css";
- *   @import "odt_ui/styles.css";
- *   @import "odt_ui/theme.css";
- */
-
-@theme {
-  /* Primary Colors */
-  --color-primary-0: hsl(240 78.3% 100%);
-  --color-primary-50: hsl(240 78.3% 95%);
-  --color-primary-100: hsl(240 78.3% 90%);
-  --color-primary-200: hsl(240 78.3% 85%);
-  --color-primary-300: hsl(240 78.3% 80%);
-  --color-primary-400: hsl(240 78.3% 75%);
-  --color-primary-500: hsl(240 78.3% 65%);
-  --color-primary-600: hsl(240 78.3% 60%);
-  --color-primary-700: hsl(240 78.3% 55%);
-  --color-primary-800: hsl(240 78.3% 45%);
-  --color-primary-900: hsl(240 78.3% 34.3%);
-
-  /* Secondary Colors */
-  --color-secondary-0: hsl(47 100% 100%);
-  --color-secondary-50: hsl(47 100% 95%);
-  --color-secondary-100: hsl(47 100% 85%);
-  --color-secondary-200: hsl(47 100% 80%);
-  --color-secondary-300: hsl(47 100% 75%);
-  --color-secondary-400: hsl(47 100% 70%);
-  --color-secondary-500: hsl(47 100% 65%);
-  --color-secondary-600: hsl(47 100% 60%);
-  --color-secondary-700: hsl(47 100% 55%);
-  --color-secondary-800: hsl(47 100% 50%);
-  --color-secondary-900: hsl(47 100% 45%);
-
-  /* Neutral Palette */
-  --color-neutral-0: hsl(0 0% 100%);
-  --color-neutral-50: hsl(240 10% 98%);
-  --color-neutral-100: hsl(240 10% 96%);
-  --color-neutral-200: hsl(240 9% 90%);
-  --color-neutral-300: hsl(240 8% 82%);
-  --color-neutral-400: hsl(240 8% 64%);
-  --color-neutral-500: hsl(240 7% 46%);
-  --color-neutral-600: hsl(240 7% 32%);
-  --color-neutral-700: hsl(240 8% 25%);
-  --color-neutral-800: hsl(240 10% 15%);
-  --color-neutral-900: hsl(240 12% 9%);
-  --color-neutral-950: hsl(240 14% 4%);
-
-  /* Semantic Colors */
-  --color-success: hsl(142 71% 45%);
-  --color-success-subtle: hsl(142 71% 96%);
-  --color-warning: hsl(38 92% 50%);
-  --color-warning-subtle: hsl(38 92% 96%);
-  --color-danger: hsl(0 84% 60%);
-  --color-danger-subtle: hsl(0 84% 97%);
-  --color-info: hsl(217 91% 60%);
-  --color-info-subtle: hsl(217 91% 97%);
-
-  /* Surfaces & Backgrounds */
-  --color-surface-base: hsl(0 0% 100%);
-  --color-surface: hsl(0 0% 100%);
-  --color-surface-muted: hsl(240 10% 98%);
-  --color-surface-subtle: hsl(240 10% 96%);
-  --color-surface-elevated: hsl(240 10% 98%);
-  --color-surface-primary: hsl(240 78.3% 65%);
-  --color-surface-secondary: hsl(47 100% 65%);
-  --color-surface-success: hsl(142 71% 96%);
-  --color-surface-warning: hsl(38 92% 96%);
-  --color-surface-danger: hsl(0 84% 97%);
-  --color-surface-info: hsl(217 91% 97%);
-
-  /* Foregrounds */
-  --color-fg-strong: hsl(240 10% 15%);
-  --color-fg: hsl(240 8% 25%);
-  --color-fg-muted: hsl(240 7% 46%);
-  --color-fg-subtle: hsl(240 8% 64%);
-  --color-fg-disabled: hsl(240 8% 82%);
-
-  --color-fg-inverse-strong: hsl(0 0% 100%);
-  --color-fg-inverse: hsl(240 10% 98%);
-  --color-fg-inverse-muted: hsl(240 10% 96%);
-  --color-fg-inverse-subtle: hsl(240 8% 82%);
-  --color-fg-inverse-disabled: hsl(240 8% 64%);
-
-  --color-fg-primary: hsl(240 78.3% 34.3%);
-  --color-fg-secondary: hsl(47 100% 45%);
-
-  --color-fg-success: hsl(142 71% 45%);
-  --color-fg-warning: hsl(38 92% 50%);
-  --color-fg-danger: hsl(0 84% 60%);
-  --color-fg-info: hsl(217 91% 60%);
-
-  --color-ring: hsl(240 78.3% 65%);
-
-  /* Lines & Borders */
-  --color-line: hsl(240 9% 90%);
-  --color-line-muted: hsl(240 10% 96%);
-  --color-line-strong: hsl(240 8% 82%);
-  --color-line-primary: hsl(240 78.3% 65%);
-  --color-line-success: hsl(142 71% 45%);
-  --color-line-warning: hsl(38 92% 50%);
-  --color-line-danger: hsl(0 84% 60%);
-
-  /* Radius */
-  --radius-xs: 0.125rem;
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
-  --radius-2xl: 1rem;
-  --radius-3xl: 1.5rem;
-  --radius-4xl: 2rem;
-  --radius-full: 9999px;
-
-  /* Shadows */
-  --color-shadow: hsl(240 78.3% 70%);
-  --shadow-card: 0 8px 26px hsl(240 78.3% 70% / 0.10);
-  --shadow-dropdown: 0 8px 24px hsl(240 78.3% 70% / 0.12);
-  --shadow-modal: 0 16px 40px hsl(240 78.3% 70% / 0.16);
-  --shadow-popover: 0 24px 64px hsl(240 78.3% 70% / 0.20);
-}

data/app/javascript/controllers/odt_modal_controller.js

@@ -1,61 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = ["dialog"]
-  static values = {
-    open: { type: Boolean, default: false },
-    preventBackdropClose: { type: Boolean, default: false }
-  }
-
-  connect() {
-    if (this.openValue) {
-      this.open()
-    }
-  }
-
-  open(event) {
-    if (event) event.preventDefault()
-
-    this.element.classList.remove("hidden")
-    this.element.setAttribute("aria-hidden", "false")
-    this.element.classList.remove("odt-modal-overlay--exiting")
-    if (this.hasDialogTarget) {
-      this.dialogTarget.classList.remove("odt-modal--exiting")
-    }
-
-    document.body.style.overflow = "hidden"
-    this.element.dispatchEvent(new CustomEvent("odt-modal:opened", { bubbles: true }))
-  }
-
-  close(event) {
-    if (event) event.preventDefault()
-
-    this.element.classList.add("odt-modal-overlay--exiting")
-    if (this.hasDialogTarget) {
-      this.dialogTarget.classList.add("odt-modal--exiting")
-    }
-
-    document.body.style.overflow = ""
-
-    setTimeout(() => {
-      this.element.classList.add("hidden")
-      this.element.classList.remove("odt-modal-overlay--exiting")
-      if (this.hasDialogTarget) {
-        this.dialogTarget.classList.remove("odt-modal--exiting")
-      }
-      this.element.setAttribute("aria-hidden", "true")
-      this.element.dispatchEvent(new CustomEvent("odt-modal:closed", { bubbles: true }))
-    }, 200)
-  }
-
-  backdropClose(event) {
-    if (this.preventBackdropCloseValue) return
-    if (event.target === this.element) {
-      this.close(event)
-    }
-  }
-
-  disconnect() {
-    document.body.style.overflow = ""
-  }
-}

data/app/javascript/controllers/odt_toast_controller.js

@@ -1,40 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static values = {
-    duration: { type: Number, default: 4000 }
-  }
-
-  connect() {
-    this.startTimer()
-  }
-
-  startTimer() {
-    if (this.durationValue > 0) {
-      this.timeout = setTimeout(() => this.dismiss(), this.durationValue)
-    }
-  }
-
-  pauseTimer() {
-    if (this.timeout) {
-      clearTimeout(this.timeout)
-      this.timeout = null
-    }
-  }
-
-  resumeTimer() {
-    this.startTimer()
-  }
-
-  dismiss() {
-    this.pauseTimer()
-    this.element.classList.add("odt-toast--exiting")
-    setTimeout(() => {
-      this.element.remove()
-    }, 250)
-  }
-
-  disconnect() {
-    this.pauseTimer()
-  }
-}