shadcn_phlexcomponents 0.1.5 → 0.1.11

data/app/stylesheets/nouislider.css

@@ -0,0 +1,173 @@
+/* Functional styling;
+ * These styles are required for noUiSlider to function.
+ * You don't need to change these rules to apply your design.
+ */
+.noUi-target,
+.noUi-target * {
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-user-select: none;
+  -ms-touch-action: none;
+  touch-action: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.noUi-target {
+  position: relative;
+}
+.noUi-base,
+.noUi-connects {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+}
+/* Wrapper for all connect elements.
+ */
+.noUi-connects {
+  overflow: hidden;
+  z-index: 0;
+}
+.noUi-connect,
+.noUi-origin {
+  will-change: transform;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  -ms-transform-origin: 0 0;
+  -webkit-transform-origin: 0 0;
+  -webkit-transform-style: preserve-3d;
+  transform-origin: 0 0;
+  transform-style: flat;
+}
+/* Offset direction
+ */
+.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
+  left: 0;
+  right: auto;
+}
+/* Give origins 0 height/width so they don't interfere with clicking the
+ * connect elements.
+ */
+.noUi-vertical .noUi-origin {
+  top: -100%;
+  width: 0;
+}
+.noUi-horizontal .noUi-origin {
+  height: 0;
+}
+.noUi-handle {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  position: absolute;
+}
+.noUi-touch-area {
+  height: 100%;
+  width: 100%;
+}
+.noUi-state-tap .noUi-connect,
+.noUi-state-tap .noUi-origin {
+  -webkit-transition: transform 0.3s;
+  transition: transform 0.3s;
+}
+.noUi-state-drag * {
+  cursor: inherit !important;
+}
+/* Slider size and handle placement;
+ */
+.noUi-horizontal {
+  @apply h-2;
+}
+.noUi-horizontal .noUi-handle {
+  right: -17px;
+  top: -6px;
+}
+.noUi-vertical {
+  @apply w-2 h-full;
+}
+.noUi-vertical .noUi-handle {
+  right: -6px;
+  bottom: -17px;
+}
+.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
+  left: -17px;
+  right: auto;
+}
+/* Styling;
+ * Giving the connect element a border radius causes issues with using transform: scale
+ */
+.noUi-target {
+  @apply bg-muted rounded-full;
+}
+.noUi-connects {
+  @apply rounded-full;
+}
+.noUi-connect {
+  @apply bg-primary;
+}
+/* Handles and cursors;
+ */
+.noUi-draggable {
+  cursor: ew-resize;
+}
+.noUi-vertical .noUi-draggable {
+  cursor: ns-resize;
+}
+.noUi-handle {
+  @apply border-primary bg-background ring-ring/50 block rounded-full border shadow-sm;
+  @apply transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none;
+  @apply disabled:opacity-50 size-5 focus:ring-4 focus:ring-ring/50;
+}
+
+.noUi-active {
+  @apply ring-4 ring-ring/50;
+}
+
+[disabled].noUi-target {
+  @apply opacity-50;
+}
+[disabled].noUi-target,
+[disabled].noUi-handle,
+[disabled] .noUi-handle {
+  @apply cursor-not-allowed;
+}
+.noUi-tooltip {
+  @apply bg-primary text-primary-foreground w-fit rounded-md px-3 py-1.5 text-xs text-balance;
+  @apply whitespace-nowrap overflow-hidden block absolute;
+}
+.noUi-tooltip {
+  @apply hidden;
+}
+.noUi-active .noUi-tooltip {
+  @apply block;
+}
+.noUi-horizontal .noUi-tooltip {
+  -webkit-transform: translate(-50%, 0);
+  transform: translate(-50%, 0);
+  left: 50%;
+  bottom: 120%;
+}
+.noUi-vertical .noUi-tooltip {
+  -webkit-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+  top: 50%;
+  right: 120%;
+}
+.noUi-horizontal .noUi-origin > .noUi-tooltip {
+  -webkit-transform: translate(50%, 0);
+  transform: translate(50%, 0);
+  left: auto;
+  bottom: 10px;
+}
+.noUi-vertical .noUi-origin > .noUi-tooltip {
+  -webkit-transform: translate(0, -18px);
+  transform: translate(0, -18px);
+  top: auto;
+  right: 28px;
+}

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

@@ -1,12 +1,25 @@
 # frozen_string_literal: true
 
-components_path = File.expand_path("../components", __dir__)
-components_install_path = Rails.root.join("vendor/shadcn_phlexcomponents")
-stimulus_controllers_path = File.expand_path("../../app/javascript/controllers", __dir__)
-stimulus_controllers_install_path = Rails.root.join("app/javascript/controllers/shadcn_phlexcomponents")
-tailwindcss_animate_path = File.expand_path("../../app/assets/tailwind/tailwindcss-animate.css", __dir__)
-tailwindcss_animate_install_path = Rails.root.join("app/assets/tailwind/shadcn_phlexcomponents/tailwindcss-animate.css")
+components_path = File.expand_path("../shadcn_phlexcomponents/components", __dir__)
+components_install_path = Rails.root.join("vendor/shadcn_phlexcomponents/components")
+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)
-copy_file(tailwindcss_animate_path, tailwindcss_animate_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,13 @@ Card = ShadcnPhlexcomponents::Card
 CheckboxGroup = ShadcnPhlexcomponents::CheckboxGroup
 Checkbox = ShadcnPhlexcomponents::Checkbox
 Collapsible = ShadcnPhlexcomponents::Collapsible
+Command = ShadcnPhlexcomponents::Command
 Combobox = ShadcnPhlexcomponents::Combobox
 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 +33,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