shadcn_phlexcomponents 0.1.0

data/app/assets/tailwind/vanilla-calendar-pro.css

@@ -0,0 +1,461 @@
+/* Layout */
+[data-vc='calendar'] {
+  @apply relative border box-border min-w-[272px] flex flex-col p-3 rounded-xl opacity-100 transition-opacity;
+}
+
+[data-vc='calendar']:focus-visible,
+[data-vc='calendar'] button:focus-visible,
+[data-vc='calendar'] [tabindex='0']:focus-visible {
+  @apply outline outline-1 -outline-offset-1 rounded-md;
+}
+
+[data-vc='calendar'][data-vc-type='multiple'] [data-vc='dates'] {
+  @apply grow-0;
+}
+
+[data-vc='calendar'][data-vc-calendar-hidden] {
+  @apply opacity-0 pointer-events-none [&_*]:!pointer-events-none;
+}
+
+[data-vc='calendar'][data-vc-input] {
+  @apply absolute;
+}
+
+[data-vc='calendar'][data-vc-input][data-vc-position='bottom'] {
+  @apply mt-1;
+}
+
+[data-vc='calendar'][data-vc-input][data-vc-position='top'] {
+  @apply -mt-1;
+}
+
+[data-vc='controls'] {
+  @apply absolute z-20 left-0 right-0 -top-1 flex justify-between items-center pt-5 px-4 pointer-events-none box-content;
+}
+
+[data-vc-arrow] {
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm;
+  @apply font-medium ring-offset-background transition-colors focus-visible:outline-none;
+  @apply focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none;
+  @apply disabled:opacity-50 h-7 w-7 p-0 opacity-50 hover:opacity-100 cursor-pointer pointer-events-auto;
+}
+
+[data-vc-arrow='prev']:before {
+  @apply bg-accent-foreground h-7 w-7;
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>');
+  mask-repeat: no-repeat;
+  position: absolute;
+  content: '';
+  mask-size: auto 16px;
+  mask-position: center;
+}
+
+[data-vc-arrow='next']:before {
+  @apply bg-accent-foreground h-7 w-7;
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>');
+  mask-repeat: no-repeat;
+  position: absolute;
+  content: '';
+  mask-size: auto 16px;
+  mask-position: center;
+}
+
+[data-vc='grid'] {
+  @apply flex flex-wrap gap-7 grow;
+}
+
+[data-vc='grid'][data-vc-grid='hidden'] [data-vc='column'] {
+  @apply opacity-30 pointer-events-none;
+}
+
+[data-vc='grid'][data-vc-grid='hidden']
+  [data-vc='column'][data-vc-column='month'],
+[data-vc='grid'][data-vc-grid='hidden']
+  [data-vc='column'][data-vc-column='year'] {
+  @apply opacity-100 pointer-events-auto;
+}
+
+[data-vc='column'] {
+  @apply min-w-[240px] flex flex-col grow;
+}
+
+[data-vc='header'] {
+  @apply relative flex items-center mb-3;
+}
+
+[data-vc-header='content'] {
+  @apply grid grid-flow-col auto-cols-max items-center justify-center px-4 whitespace-pre-wrap grow;
+}
+
+[data-vc='month'],
+[data-vc='year'] {
+  @apply text-base font-bold cursor-pointer rounded p-1 border-0 bg-transparent disabled:pointer-events-none;
+}
+
+[data-vc='wrapper'] {
+  @apply flex grow;
+}
+
+[data-vc='content'] {
+  @apply flex flex-col grow;
+}
+
+[data-vc='months'] {
+  @apply grid gap-y-4 gap-x-1 grid-cols-4 items-center grow;
+}
+
+[data-vc='years'] {
+  @apply grid gap-y-4 gap-x-1 grid-cols-5 items-center grow;
+}
+
+[data-vc-months-month],
+[data-vc-years-year] {
+  @apply flex items-center justify-center h-10 text-center text-xs font-semibold p-1 rounded-md border-0 break-all cursor-pointer disabled:pointer-events-none;
+}
+
+[data-vc-week='numbers'] {
+  @apply flex flex-col;
+}
+
+[data-vc-week-numbers='title'] {
+  @apply text-xs font-bold flex items-center justify-center mb-2;
+}
+
+[data-vc-week-numbers='content'] {
+  @apply grid grid-flow-row items-center justify-items-center gap-y-1;
+}
+
+[data-vc-week-number] {
+  @apply text-xs font-semibold w-full min-h-[1.875rem] min-w-[1.875rem] flex items-center justify-center cursor-pointer bg-transparent border-none p-0 m-0;
+}
+
+[data-vc='week'] {
+  @apply grid grid-cols-[repeat(7,_1fr)] justify-items-center mb-2;
+}
+
+[data-vc-week-day] {
+  @apply text-xs font-bold w-full min-w-[1.875rem] flex items-center justify-center bg-transparent border-none p-0 m-0;
+}
+
+button[data-vc-week-day] {
+  @apply cursor-pointer;
+}
+
+[data-vc='dates'] {
+  @apply grid grid-cols-[repeat(7,_1fr)] justify-items-center items-center grow pointer-events-none;
+}
+
+[data-vc='dates'][data-vc-dates-disabled] [data-vc-date-btn] {
+  @apply cursor-default;
+}
+
+[data-vc-date] {
+  @apply relative w-full flex items-center justify-center py-0.5 pointer-events-auto;
+}
+
+[data-vc-date][data-vc-date-disabled],
+[data-vc-date][data-vc-date-disabled] [data-vc-date-btn],
+[data-vc-date]:not(:has([data-vc-date-btn])) {
+  @apply pointer-events-none;
+}
+
+[data-vc-date][data-vc-date-hover] [data-vc-date-btn] {
+  @apply rounded-none;
+}
+
+[data-vc-date][data-vc-date-hover='first'] [data-vc-date-btn] {
+  @apply rounded-r-none rounded-l-md;
+}
+
+[data-vc-date][data-vc-date-hover='last'] [data-vc-date-btn] {
+  @apply rounded-l-none rounded-r-md;
+}
+
+[data-vc-date][data-vc-date-hover='first-and-last'] [data-vc-date-btn] {
+  @apply rounded-md;
+}
+
+[data-vc-date][data-vc-date-hover='first'][data-vc-date-selected]
+  [data-vc-date-btn] {
+  @apply rounded-l-md;
+}
+
+[data-vc-date][data-vc-date-hover='last'][data-vc-date-selected]
+  [data-vc-date-btn] {
+  @apply rounded-r-md;
+}
+
+[data-vc-date][data-vc-date-selected='first'] [data-vc-date-btn] {
+  @apply rounded-r-none rounded-l-md;
+}
+
+[data-vc-date][data-vc-date-selected='last'] [data-vc-date-btn] {
+  @apply rounded-l-none rounded-r-md;
+}
+
+[data-vc-date][data-vc-date-selected='first-and-last'] [data-vc-date-btn] {
+  @apply rounded-l-md rounded-r-md;
+}
+
+[data-vc-date][data-vc-date-selected='middle'] [data-vc-date-btn] {
+  @apply rounded-none;
+}
+
+[data-vc-date][data-vc-date-disabled]
+  + [data-vc-date-selected]
+  [data-vc-date-btn],
+[data-vc-date][data-vc-date-disabled]
+  + [data-vc-date-hover]
+  [data-vc-date-btn] {
+  @apply rounded-l-md;
+}
+
+[data-vc-date][data-vc-date-hover]:has(+ [data-vc-date-disabled])
+  [data-vc-date-btn],
+[data-vc-date][data-vc-date-selected]:has(+ [data-vc-date-disabled])
+  [data-vc-date-btn] {
+  @apply rounded-r-md;
+}
+
+[data-vc-date-btn]:focus-visible + [data-vc-date-popup],
+[data-vc-date-btn]:hover + [data-vc-date-popup],
+[data-vc-date-popup]:focus-visible,
+[data-vc-date-popup]:hover {
+  @apply opacity-100 pointer-events-auto;
+}
+
+[data-vc-date-btn] {
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm;
+  @apply ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2;
+  @apply focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none;
+  @apply disabled:opacity-50 h-9 w-9 p-0 font-normal aria-selected:opacity-100 cursor-pointer;
+}
+
+[data-vc-date][data-vc-date-today] [data-vc-date-btn] {
+  @apply font-bold;
+}
+
+[data-vc-date-popup] {
+  @apply absolute z-20 -translate-x-1/2 min-w-20 max-w-36 py-1 px-2 text-xs font-normal rounded-md transition-opacity duration-75 opacity-0 pointer-events-none hover:opacity-100 hover:pointer-events-auto;
+}
+
+[data-vc-date-range-tooltip] {
+  @apply absolute z-30 max-w-36 py-1 px-2 text-xs font-normal rounded-md pointer-events-none -translate-x-1/2 -translate-y-full;
+}
+
+[data-vc-date-range-tooltip='hidden'] {
+  @apply opacity-0;
+}
+
+[data-vc-date-range-tooltip='visible'] {
+  @apply opacity-100;
+}
+
+[data-vc='time'] {
+  @apply grid grid-cols-[auto_1fr] gap-3 border-solid border-t border-b-0 border-l-0 border-r-0 pt-3 mt-3;
+}
+
+[data-vc-time='content'] {
+  @apply grid grid-flow-col items-center;
+}
+
+[data-vc-time-input='hour'] {
+  @apply relative w-7 mr-[0.35rem] after:content-[':'] after:block after:absolute after:-right-[5px] after:top-1/2 after:mt-[calc(-50%_+_1px)];
+}
+
+[data-vc-time-input='minute'] {
+  @apply w-7;
+}
+
+[data-vc-time-input='hour'] input,
+[data-vc-time-input='minute'] input {
+  @apply box-border relative block text-lg leading-[1.125rem] font-semibold text-center w-full p-[0.125rem] m-0 border-0 rounded disabled:cursor-default disabled:hover:bg-transparent focus-visible:outline-1 focus-visible:outline;
+}
+
+[data-vc-time='keeping'] {
+  @apply ml-[1px] cursor-pointer text-[0.69rem] w-[22px] rounded mt-1 disabled:cursor-default disabled:hover:bg-transparent focus-visible:outline-1 focus-visible:outline bg-transparent border-0 p-0;
+}
+
+[data-vc-time='ranges'] {
+  @apply grid grid-flow-row;
+}
+
+[data-vc-time-range] {
+  @apply text-[0] relative z-10 before:left-0 after:right-0;
+}
+
+[data-vc-time-range]::before,
+[data-vc-time-range]::after {
+  content: '';
+  transform: translateY(-50%);
+  @apply w-[1px] h-2 absolute z-10 pointer-events-none top-1/2;
+}
+
+[data-vc-time-range] input {
+  @apply w-full relative appearance-none h-5 cursor-pointer m-0 outline-0;
+}
+
+[data-vc-time-range] input::-webkit-slider-thumb {
+  @apply appearance-none -mt-2 relative z-20 box-border border border-solid h-4 w-3 shadow-none rounded cursor-pointer;
+}
+
+[data-vc-time-range] input::-moz-range-thumb {
+  @apply relative z-20 box-border border border-solid h-4 w-3 shadow-none rounded cursor-pointer;
+}
+
+[data-vc-time-range] input::-webkit-slider-runnable-track {
+  @apply box-border w-full h-[1px] mt-[1px] cursor-pointer shadow-none;
+}
+
+[data-vc-time-range] input::-moz-range-track {
+  @apply box-border w-full h-[1px] mt-[1px] cursor-pointer shadow-none;
+}
+
+/* Theme */
+.vc {
+  @apply bg-popover text-popover-foreground;
+}
+
+.vc[data-vc-input] {
+  @apply shadow-[0_9px_20px_rgba(0,0,0,.1)];
+}
+
+.vc:focus-visible,
+.vc button:focus-visible,
+.vc [tabindex='0']:focus-visible {
+  @apply outline-orange-300;
+}
+
+.vc-arrow {
+  @apply border border-input hover:bg-accent hover:text-accent-foreground bg-transparent;
+}
+
+.vc-month,
+.vc-year {
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium rounded-md transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer text-sm hover:bg-accent hover:text-accent-foreground h-9 px-3;
+}
+
+.vc-months__month,
+.vc-years__year {
+  @apply hover:bg-accent hover:text-accent-foreground disabled:opacity-80;
+}
+
+.vc-months__month[data-vc-months-month-selected],
+.vc-years__year[data-vc-years-year-selected] {
+  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground;
+}
+
+.vc-week__day {
+  @apply text-muted-foreground font-normal;
+}
+
+.vc-date[data-vc-date-selected='middle'][data-vc-date-selected] .vc-date__btn {
+  @apply bg-primary/20 hover:bg-primary/20 text-accent-foreground;
+}
+
+.vc-date__btn {
+  @apply hover:bg-accent hover:text-accent-foreground;
+}
+
+.vc-date[data-vc-date-today] .vc-date__btn {
+  @apply bg-accent text-accent-foreground font-bold;
+}
+
+.vc-date[data-vc-date-today][data-vc-date-month='prev'] .vc-date__btn,
+.vc-date[data-vc-date-today][data-vc-date-month='next'] .vc-date__btn {
+  @apply text-muted-foreground;
+}
+
+.vc-date[data-vc-date-month='prev'] .vc-date__btn,
+.vc-date[data-vc-date-month='next'] .vc-date__btn {
+  @apply text-muted-foreground  hover:bg-accent hover:text-accent-foreground;
+}
+
+.vc-date[data-vc-date-disabled] .vc-date__btn {
+  @apply text-muted-foreground opacity-60;
+}
+
+.vc-date[data-vc-date-hover] .vc-date__btn {
+  @apply bg-accent;
+}
+
+.vc-date[data-vc-date-selected] .vc-date__btn {
+  @apply bg-primary text-primary-foreground;
+}
+
+.vc-date[data-vc-date-hover='last'] .vc-date__btn,
+.vc-date[data-vc-date-hover='first'] .vc-date__btn {
+  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground;
+}
+
+.vc-date__popup {
+  @apply text-white bg-slate-800 shadow-[inset_0_0_0_1px_rgb(255_255_255_/_0.05)];
+}
+
+.vc-date-range-tooltip {
+  @apply text-slate-400 bg-slate-800 shadow-[inset_0_0_0_1px_rgb(255_255_255_/_0.05)];
+}
+
+.vc-time {
+  @apply border-slate-800;
+}
+
+.vc-time__hour,
+.vc-time__minute {
+  @apply after:text-white;
+}
+
+.vc-time__hour input,
+.vc-time__minute input {
+  @apply text-white bg-slate-900 hover:bg-slate-700 focus-visible:outline-orange-300;
+}
+
+.vc-time__hour input[data-vc-input-focus],
+.vc-time__minute input[data-vc-input-focus] {
+  @apply bg-slate-700;
+}
+
+.vc-time__keeping {
+  @apply text-slate-500 hover:bg-slate-700 hover:text-slate-400 focus-visible:outline-orange-300;
+}
+
+.vc-time__range input {
+  @apply bg-slate-900;
+}
+
+.vc-time__range::before,
+.vc-time__range::after {
+  @apply bg-slate-600;
+}
+
+.vc-time__range:hover input::-webkit-slider-thumb {
+  @apply border-slate-400;
+}
+
+.vc-time__range:hover input::-moz-range-thumb {
+  @apply border-slate-400;
+}
+
+.vc-time__range input:focus-visible::-webkit-slider-thumb {
+  @apply border-orange-300;
+}
+
+.vc-time__range input:focus-visible::-moz-range-thumb {
+  @apply border-orange-300;
+}
+
+.vc-time__range input::-webkit-slider-thumb {
+  @apply border-slate-600 bg-slate-800;
+}
+
+.vc-time__range input::-moz-range-thumb {
+  @apply border-slate-600 bg-slate-800;
+}
+
+.vc-time__range input::-webkit-slider-runnable-track {
+  @apply bg-slate-600;
+}
+
+.vc-time__range input::-moz-range-track {
+  @apply bg-slate-600;
+}

data/app/javascript/controllers/accordion_controller.js

@@ -0,0 +1,133 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['trigger', 'content', 'item']
+
+  connect() {
+    this.triggers = this.triggerTargets.filter((t) => !t.disabled)
+    this.multiple = this.element.dataset.multiple === 'true'
+    const value = JSON.parse(this.element.dataset.value)
+
+    this.itemTargets.forEach((i) => {
+      if (value.includes(i.dataset.value)) {
+        this.openItem(i)
+      } else {
+        this.closeItem(i)
+      }
+    })
+
+    setTimeout(() => {
+      this.contentTargets.forEach((c) => {
+        this.setContentHeight(c)
+      })
+    }, 200)
+  }
+
+  setContentHeight(element) {
+    const height = this.getContentHeight(element)
+    element.style.setProperty('--accordion-content-height', `${height}px`)
+  }
+
+  getContentHeight(element) {
+    // Store the original styles we need to modify
+    const originalStyles = {
+      display: element.style.display,
+      visibility: element.style.visibility,
+      position: element.style.position,
+    }
+
+    // Make the element visible but not displayed
+    element.style.display = 'block' // or whatever is appropriate (flex, inline, etc.)
+    element.style.visibility = 'hidden'
+    element.style.position = 'absolute'
+
+    // Get the height
+    const height = element.offsetHeight
+
+    // Restore the original styles
+    element.style.display = originalStyles.display
+    element.style.visibility = originalStyles.visibility
+    element.style.position = originalStyles.position
+
+    return height
+  }
+
+  toggleItem(event) {
+    const trigger = event.currentTarget || event.target
+
+    const item = trigger.closest(
+      '[data-shadcn-phlexcomponents--accordion-target="item"]',
+    )
+
+    if (item.dataset.state === 'open') {
+      this.closeItem(item)
+    } else {
+      this.openItem(item)
+    }
+
+    if (!this.multiple) {
+      this.itemTargets.forEach((i) => {
+        if (i !== item) {
+          this.closeItem(i)
+        }
+      })
+    }
+  }
+
+  openItem(item) {
+    const button = item.querySelector(
+      '[data-shadcn-phlexcomponents--accordion-target="trigger"]',
+    )
+    const content = item.querySelector(
+      '[data-shadcn-phlexcomponents--accordion-target="content"]',
+    )
+
+    item.dataset.state = 'open'
+    button.ariaExpanded = true
+    button.dataset.state = 'open'
+    content.dataset.state = 'open'
+    content.classList.remove('hidden')
+  }
+
+  closeItem(item) {
+    const button = item.querySelector(
+      '[data-shadcn-phlexcomponents--accordion-target="trigger"]',
+    )
+    const content = item.querySelector(
+      '[data-shadcn-phlexcomponents--accordion-target="content"]',
+    )
+
+    item.dataset.state = 'closed'
+    button.ariaExpanded = false
+    button.dataset.state = 'closed'
+    content.dataset.state = 'closed'
+
+    setTimeout(() => {
+      content.classList.add('hidden')
+    }, 150)
+  }
+
+  focusNext(event) {
+    const trigger = event.currentTarget || event.target
+    const index = this.triggers.indexOf(trigger)
+    let nextIndex = index + 1
+
+    if (index === this.triggers.length - 1) {
+      nextIndex = 0
+    }
+
+    this.triggers[nextIndex].focus()
+  }
+
+  focusPrev(event) {
+    const trigger = event.currentTarget || event.target
+    const index = this.triggers.indexOf(trigger)
+    let prevIndex = index - 1
+
+    if (index === 0) {
+      prevIndex = this.triggers.length - 1
+    }
+
+    this.triggers[prevIndex].focus()
+  }
+}