shadcn_phlexcomponents 0.1.9 → 0.1.14

data/app/stylesheets/tw-animate.css

@@ -0,0 +1,486 @@
+/**
+ * TailwindCSS v4.0 compatible replacement for `tailwindcss-animate`.
+ *
+ * @author Luca Bosin <https://github.com/Wombosvideo>
+ * @license MIT
+ */
+
+:root {
+  /* @property declarations for animation variables, to prevent inheritance */
+  @property --tw-animation-duration {
+    syntax: '*';
+    inherits: false;
+  }
+
+  @property --tw-enter-opacity {
+    syntax: '*';
+    inherits: false;
+    initial-value: 1;
+  }
+
+  @property --tw-enter-rotate {
+    syntax: '*';
+    inherits: false;
+    initial-value: 0;
+  }
+
+  @property --tw-enter-scale {
+    syntax: '*';
+    inherits: false;
+    initial-value: 1;
+  }
+
+  @property --tw-enter-translate-x {
+    syntax: '*';
+    inherits: false;
+    initial-value: 0;
+  }
+
+  @property --tw-enter-translate-y {
+    syntax: '*';
+    inherits: false;
+    initial-value: 0;
+  }
+
+  @property --tw-exit-opacity {
+    syntax: '*';
+    inherits: false;
+    initial-value: 1;
+  }
+
+  @property --tw-exit-rotate {
+    syntax: '*';
+    inherits: false;
+    initial-value: 0;
+  }
+
+  @property --tw-exit-scale {
+    syntax: '*';
+    inherits: false;
+    initial-value: 1;
+  }
+
+  @property --tw-exit-translate-x {
+    syntax: '*';
+    inherits: false;
+    initial-value: 0;
+  }
+
+  @property --tw-exit-translate-y {
+    syntax: '*';
+    inherits: false;
+    initial-value: 0;
+  }
+}
+
+@theme inline {
+  /* Predefined values */
+
+  --animation-delay-0: 0s;
+  --animation-delay-75: 75ms;
+  --animation-delay-100: 0.1s;
+  --animation-delay-150: 0.15s;
+  --animation-delay-200: 0.2s;
+  --animation-delay-300: 0.3s;
+  --animation-delay-500: 0.5s;
+  --animation-delay-700: 0.7s;
+  --animation-delay-1000: 1s;
+
+  --animation-repeat-0: 0;
+  --animation-repeat-1: 1;
+  --animation-repeat-infinite: infinite;
+
+  --animation-direction-normal: normal;
+  --animation-direction-reverse: reverse;
+  --animation-direction-alternate: alternate;
+  --animation-direction-alternate-reverse: alternate-reverse;
+
+  --animation-fill-mode-none: none;
+  --animation-fill-mode-forwards: forwards;
+  --animation-fill-mode-backwards: backwards;
+  --animation-fill-mode-both: both;
+
+  --percentage-0: 0;
+  --percentage-5: 0.05;
+  --percentage-10: 0.1;
+  --percentage-15: 0.15;
+  --percentage-20: 0.2;
+  --percentage-25: 0.25;
+  --percentage-30: 0.3;
+  --percentage-35: 0.35;
+  --percentage-40: 0.4;
+  --percentage-45: 0.45;
+  --percentage-50: 0.5;
+  --percentage-55: 0.55;
+  --percentage-60: 0.6;
+  --percentage-65: 0.65;
+  --percentage-70: 0.7;
+  --percentage-75: 0.75;
+  --percentage-80: 0.8;
+  --percentage-85: 0.85;
+  --percentage-90: 0.9;
+  --percentage-95: 0.95;
+  --percentage-100: 1;
+  --percentage-translate-full: 1;
+
+  /* Animations and keyframes */
+
+  --animate-in: enter var(--tw-animation-duration, var(--tw-duration, 150ms))
+    var(--tw-ease, ease);
+  --animate-out: exit var(--tw-animation-duration, var(--tw-duration, 150ms))
+    var(--tw-ease, ease);
+
+  @keyframes enter {
+    from {
+      opacity: var(--tw-enter-opacity, 1);
+      transform: translate3d(
+          var(--tw-enter-translate-x, 0),
+          var(--tw-enter-translate-y, 0),
+          0
+        )
+        scale3d(
+          var(--tw-enter-scale, 1),
+          var(--tw-enter-scale, 1),
+          var(--tw-enter-scale, 1)
+        )
+        rotate(var(--tw-enter-rotate, 0));
+    }
+  }
+
+  @keyframes exit {
+    to {
+      opacity: var(--tw-exit-opacity, 1);
+      transform: translate3d(
+          var(--tw-exit-translate-x, 0),
+          var(--tw-exit-translate-y, 0),
+          0
+        )
+        scale3d(
+          var(--tw-exit-scale, 1),
+          var(--tw-exit-scale, 1),
+          var(--tw-exit-scale, 1)
+        )
+        rotate(var(--tw-exit-rotate, 0));
+    }
+  }
+
+  /*
+  * Radix, Bits UI and Reka UI utilize CSS variables to define the height of Accordion and Collapsible
+  * content during open/close animations. The `--radix/bits/reka-accordion-content-height` variables
+  * control the height of Accordion content, while `collapsible` variables are used for Collapsibles.
+  *
+  * The fallback value `auto` is used here, but it depends on the `interpolate-size: allow-keywords`
+  * property, which currently has limited browser support. For more details, see: 
+  * <https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size>
+  */
+
+  --animate-accordion-down: accordion-down
+    var(--tw-animation-duration, var(--tw-duration, 200ms)) ease-out;
+  --animate-accordion-up: accordion-up
+    var(--tw-animation-duration, var(--tw-duration, 200ms)) ease-out;
+  --animate-collapsible-down: collapsible-down
+    var(--tw-animation-duration, var(--tw-duration, 200ms)) ease-out;
+  --animate-collapsible-up: collapsible-up
+    var(--tw-animation-duration, var(--tw-duration, 200ms)) ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(
+        --radix-accordion-content-height,
+        var(
+          --bits-accordion-content-height,
+          var(--reka-accordion-content-height, auto)
+        )
+      );
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(
+        --radix-accordion-content-height,
+        var(
+          --bits-accordion-content-height,
+          var(--reka-accordion-content-height, auto)
+        )
+      );
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(
+        --radix-collapsible-content-height,
+        var(
+          --bits-collapsible-content-height,
+          var(--reka-collapsible-content-height, auto)
+        )
+      );
+    }
+  }
+
+  @keyframes collapsible-up {
+    from {
+      height: var(
+        --radix-collapsible-content-height,
+        var(
+          --bits-collapsible-content-height,
+          var(--reka-collapsible-content-height, auto)
+        )
+      );
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
+
+  @keyframes caret-blink {
+    0%,
+    70%,
+    100% {
+      opacity: 1;
+    }
+    20%,
+    50% {
+      opacity: 0;
+    }
+  }
+}
+
+/* Utility classes */
+
+@utility animation-duration-* {
+  --tw-animation-duration: calc(--value(number) * 1ms);
+  --tw-animation-duration: --value(
+    --animation-duration- *,
+    [duration],
+    'initial',
+    [ *]
+  );
+  animation-duration: calc(--value(number) * 1ms);
+  animation-duration: --value(
+    --animation-duration- *,
+    [duration],
+    'initial',
+    [ *]
+  );
+}
+
+@utility delay-* {
+  animation-delay: calc(--value(number) * 1ms);
+  animation-delay: --value(--animation-delay- *, [duration], 'initial', [ *]);
+}
+
+@utility repeat-* {
+  animation-iteration-count: --value(
+    --animation-repeat- *,
+    number,
+    'initial',
+    [ *]
+  );
+}
+
+@utility direction-* {
+  animation-direction: --value(--animation-direction- *, 'initial', [ *]);
+}
+
+@utility fill-mode-* {
+  animation-fill-mode: --value(--animation-fill-mode- *, 'initial', [ *]);
+}
+
+@utility running {
+  animation-play-state: running;
+}
+@utility paused {
+  animation-play-state: paused;
+}
+@utility play-state-* {
+  animation-play-state: --value('initial', [ *]);
+}
+
+@utility fade-in {
+  --tw-enter-opacity: 0;
+}
+@utility fade-in-* {
+  --tw-enter-opacity: calc(--value(number) / 100);
+  --tw-enter-opacity: --value(--percentage- *, [ *]);
+}
+
+@utility fade-out {
+  --tw-exit-opacity: 0;
+}
+@utility fade-out-* {
+  --tw-exit-opacity: calc(--value(number) / 100);
+  --tw-exit-opacity: --value(--percentage- *, [ *]);
+}
+
+@utility zoom-in {
+  --tw-enter-scale: 0;
+}
+@utility zoom-in-* {
+  --tw-enter-scale: calc(--value(number) * 1%);
+  --tw-enter-scale: calc(--value(ratio));
+  --tw-enter-scale: --value(--percentage- *, [ *]);
+}
+@utility -zoom-in-* {
+  --tw-enter-scale: calc(--value(number) * -1%);
+  --tw-enter-scale: calc(--value(ratio) * -1);
+  --tw-enter-scale: --value(--percentage- *, [ *]);
+}
+
+@utility zoom-out {
+  --tw-exit-scale: 0;
+}
+@utility zoom-out-* {
+  --tw-exit-scale: calc(--value(number) * 1%);
+  --tw-exit-scale: calc(--value(ratio));
+  --tw-exit-scale: --value(--percentage- *, [ *]);
+}
+@utility -zoom-out-* {
+  --tw-exit-scale: calc(--value(number) * -1%);
+  --tw-exit-scale: calc(--value(ratio) * -1);
+  --tw-exit-scale: --value(--percentage- *, [ *]);
+}
+
+@utility spin-in {
+  --tw-enter-rotate: 30deg;
+}
+@utility spin-in-* {
+  --tw-enter-rotate: calc(--value(number) * 1deg);
+  --tw-enter-rotate: calc(--value(ratio) * 360deg);
+  --tw-enter-rotate: --value(--rotate- *, [ *]);
+}
+@utility -spin-in {
+  --tw-enter-rotate: -30deg;
+}
+@utility -spin-in-* {
+  --tw-enter-rotate: calc(--value(number) * -1deg);
+  --tw-enter-rotate: calc(--value(ratio) * -360deg);
+  --tw-enter-rotate: --value(--rotate- *, [ *]);
+}
+
+@utility spin-out {
+  --tw-exit-rotate: 30deg;
+}
+@utility spin-out-* {
+  --tw-exit-rotate: calc(--value(number) * 1deg);
+  --tw-exit-rotate: calc(--value(ratio) * 360deg);
+  --tw-exit-rotate: --value(--rotate- *, [ *]);
+}
+@utility -spin-out {
+  --tw-exit-rotate: -30deg;
+}
+@utility -spin-out-* {
+  --tw-exit-rotate: calc(--value(number) * -1deg);
+  --tw-exit-rotate: calc(--value(ratio) * -360deg);
+  --tw-exit-rotate: --value(--rotate- *, [ *]);
+}
+
+@utility slide-in-from-top {
+  --tw-enter-translate-y: -100%;
+}
+@utility slide-in-from-top-* {
+  --tw-enter-translate-y: calc(--value(integer) * var(--spacing) * -1);
+  --tw-enter-translate-y: calc(
+    --value(--percentage- *, --percentage-translate- *) * -100%
+  );
+  --tw-enter-translate-y: calc(--value(ratio) * -100%);
+  --tw-enter-translate-y: calc(
+    --value(--translate- *, [percentage], [length]) * -1
+  );
+}
+@utility slide-in-from-bottom {
+  --tw-enter-translate-y: 100%;
+}
+@utility slide-in-from-bottom-* {
+  --tw-enter-translate-y: calc(--value(integer) * var(--spacing));
+  --tw-enter-translate-y: calc(
+    --value(--percentage- *, --percentage-translate- *) * 100%
+  );
+  --tw-enter-translate-y: calc(--value(ratio) * 100%);
+  --tw-enter-translate-y: --value(--translate- *, [percentage], [length]);
+}
+@utility slide-in-from-left {
+  --tw-enter-translate-x: -100%;
+}
+@utility slide-in-from-left-* {
+  --tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1);
+  --tw-enter-translate-x: calc(
+    --value(--percentage- *, --percentage-translate- *) * -100%
+  );
+  --tw-enter-translate-x: calc(--value(ratio) * 100%);
+  --tw-enter-translate-x: calc(
+    --value(--translate- *, [percentage], [length]) * -1
+  );
+}
+@utility slide-in-from-right {
+  --tw-enter-translate-x: 100%;
+}
+@utility slide-in-from-right-* {
+  --tw-enter-translate-x: calc(--value(integer) * var(--spacing));
+  --tw-enter-translate-x: calc(
+    --value(--percentage- *, --percentage-translate- *) * 100%
+  );
+  --tw-enter-translate-x: calc(--value(ratio) * 100%);
+  --tw-enter-translate-x: --value(--translate- *, [percentage], [length]);
+}
+
+@utility slide-out-to-top {
+  --tw-exit-translate-y: -100%;
+}
+@utility slide-out-to-top-* {
+  --tw-exit-translate-y: calc(--value(integer) * var(--spacing) * -1);
+  --tw-exit-translate-y: calc(
+    --value(--percentage- *, --percentage-translate- *) * -100%
+  );
+  --tw-exit-translate-y: calc(--value(ratio) * 100%);
+  --tw-exit-translate-y: calc(
+    --value(--translate- *, [percentage], [length]) * -1
+  );
+}
+@utility slide-out-to-bottom {
+  --tw-exit-translate-y: 100%;
+}
+@utility slide-out-to-bottom-* {
+  --tw-exit-translate-y: calc(--value(integer) * var(--spacing));
+  --tw-exit-translate-y: calc(
+    --value(--percentage- *, --percentage-translate- *) * 100%
+  );
+  --tw-exit-translate-y: calc(--value(ratio) * 100%);
+  --tw-exit-translate-y: --value(--translate- *, [percentage], [length]);
+}
+@utility slide-out-to-left {
+  --tw-exit-translate-x: -100%;
+}
+@utility slide-out-to-left-* {
+  --tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1);
+  --tw-exit-translate-x: calc(
+    --value(--percentage- *, --percentage-translate- *) * -100%
+  );
+  --tw-exit-translate-x: calc(--value(ratio) * 100%);
+  --tw-exit-translate-x: calc(
+    --value(--translate- *, [percentage], [length]) * -1
+  );
+}
+@utility slide-out-to-right {
+  --tw-exit-translate-x: 100%;
+}
+@utility slide-out-to-right-* {
+  --tw-exit-translate-x: calc(--value(integer) * var(--spacing));
+  --tw-exit-translate-x: calc(
+    --value(--percentage- *, --percentage-translate- *) * 100%
+  );
+  --tw-exit-translate-x: calc(--value(ratio) * 100%);
+  --tw-exit-translate-x: --value(--translate- *, [percentage], [length]);
+}

data/lib/install/install_shadcn_phlexcomponents.rb

@@ -6,7 +6,20 @@ stimulus_controllers_path = File.expand_path("../../app/javascript", __dir__)
 stimulus_controllers_install_path = Rails.root.join("vendor/shadcn_phlexcomponents/javascript")
 css_path = File.expand_path("../../app/stylesheets", __dir__)
 css_install_path = Rails.root.join("vendor/shadcn_phlexcomponents/stylesheets")
+initializer_file_path = File.expand_path("../shadcn_phlexcomponents/initializers/shadcn_phlexcomponents.rb", __dir__)
+initializer_file_install_path = Rails.root.join("config/initializers/shadcn_phlexcomponents.rb")
 
-directory(components_path, components_install_path)
-directory(stimulus_controllers_path, stimulus_controllers_install_path)
-directory(css_path, css_install_path)
+say "Running the install command will copy a lot of files to your working directory.", :blue
+say "Please make sure to commit or stash your existing changes in your working directory.", :blue
+
+if ENV["ENVIRONMENT"] == "test"
+  directory(components_path, components_install_path)
+  directory(stimulus_controllers_path, stimulus_controllers_install_path)
+  directory(css_path, css_install_path)
+  copy_file(initializer_file_path, initializer_file_install_path)
+elsif yes?("Do you want to continue? (y/n)")
+  directory(components_path, components_install_path)
+  directory(stimulus_controllers_path, stimulus_controllers_install_path)
+  directory(css_path, css_install_path)
+  copy_file(initializer_file_path, initializer_file_install_path)
+end

data/lib/shadcn_phlexcomponents/alias.rb

@@ -13,11 +13,15 @@ Card = ShadcnPhlexcomponents::Card
 CheckboxGroup = ShadcnPhlexcomponents::CheckboxGroup
 Checkbox = ShadcnPhlexcomponents::Checkbox
 Collapsible = ShadcnPhlexcomponents::Collapsible
+Command = ShadcnPhlexcomponents::Command
+CommandItem = ShadcnPhlexcomponents::CommandItem
 Combobox = ShadcnPhlexcomponents::Combobox
+ComboboxItem = ShadcnPhlexcomponents::ComboboxItem
 DatePicker = ShadcnPhlexcomponents::DatePicker
 DateRangePicker = ShadcnPhlexcomponents::DateRangePicker
 Dialog = ShadcnPhlexcomponents::Dialog
 DropdownMenu = ShadcnPhlexcomponents::DropdownMenu
+DropdownMenuSub = ShadcnPhlexcomponents::DropdownMenuSub
 Form = ShadcnPhlexcomponents::Form
 HoverCard = ShadcnPhlexcomponents::HoverCard
 Input = ShadcnPhlexcomponents::Input
@@ -31,8 +35,8 @@ RadioGroup = ShadcnPhlexcomponents::RadioGroup
 Select = ShadcnPhlexcomponents::Select
 Separator = ShadcnPhlexcomponents::Separator
 Sheet = ShadcnPhlexcomponents::Sheet
-Sidebar = ShadcnPhlexcomponents::Sidebar
 Skeleton = ShadcnPhlexcomponents::Skeleton
+Slider = ShadcnPhlexcomponents::Slider
 Switch = ShadcnPhlexcomponents::Switch
 Table = ShadcnPhlexcomponents::Table
 Tabs = ShadcnPhlexcomponents::Tabs
@@ -40,4 +44,5 @@ Textarea = ShadcnPhlexcomponents::Textarea
 ThemeSwitcher = ShadcnPhlexcomponents::ThemeSwitcher
 Toast = ShadcnPhlexcomponents::Toast
 ToastContainer = ShadcnPhlexcomponents::ToastContainer
+Toggle = ShadcnPhlexcomponents::Toggle
 Tooltip = ShadcnPhlexcomponents::Tooltip

data/lib/shadcn_phlexcomponents/components/accordion.rb

@@ -0,0 +1,130 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Accordion < Base
+    def initialize(value: nil, multiple: false, **attributes)
+      @multiple = multiple
+      @value = value.is_a?(Array) ? value : [value]
+      @aria_id = "accordion-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def item(**attributes, &)
+      AccordionItem(**attributes, &)
+    end
+
+    def trigger(**attributes, &)
+      AccordionTrigger(aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      AccordionContent(aria_id: @aria_id, **attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          multiple: @multiple.to_s,
+          controller: "accordion",
+          accordion_open_items_value: @value.compact.to_json,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class AccordionItem < Base
+    class_variants(base: "border-b last:border-b-0")
+
+    def initialize(value:, **attributes)
+      @value = value
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          value: @value,
+          accordion_target: "item",
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class AccordionTrigger < Base
+    class_variants(
+      base: <<~HEREDOC,
+        focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between
+        gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline
+        focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180
+      HEREDOC
+    )
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        type: "button",
+        id: "#{@aria_id}-trigger",
+        aria: {
+          controls: "#{@aria_id}-content",
+          expanded: "false",
+        },
+        data: {
+          state: "closed",
+          accordion_target: "trigger",
+          action: <<~HEREDOC,
+            click->accordion#toggle
+            keydown.up->accordion#focusTrigger:prevent
+            keydown.down->accordion#focusTrigger:prevent
+          HEREDOC
+        },
+      }
+    end
+
+    def view_template(&)
+      h3(class: "flex") do
+        button(**@attributes) do
+          yield
+
+          icon("chevron-down", class: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200")
+        end
+      end
+    end
+  end
+
+  class AccordionContent < Base
+    class_variants(base: "pt-0 pb-4")
+
+    def initialize(aria_id: :nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(
+        class: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+        id: "#{@aria_id}-content",
+        role: "region",
+        aria: {
+          labelledby: "#{@aria_id}-trigger",
+        },
+        data: {
+          state: "closed",
+          accordion_target: "content"
+        },
+      ) do
+        div(**@attributes, &)
+      end
+    end
+  end
+end