shadcn_phlexcomponents 0.1.9 → 0.1.14

data/app/stylesheets/date_picker.css

@@ -1,13 +1,13 @@
 [data-vc='calendar'] {
-  @apply relative flex flex-col outline-none p-3;
+  @apply relative flex flex-col outline-none;
 }
 
 [data-vc='controls'] {
-  @apply absolute z-20 -left-1 -right-1 -top-1.5 flex justify-between items-center pt-5 px-4 pointer-events-none box-content;
+  @apply absolute z-20 -left-1 -right-1 -top-1.5 flex justify-between items-center pt-1.5 px-1 pointer-events-none box-content;
 }
 
 [data-vc='grid'] {
-  @apply grid grid-cols-1 md:grid-cols-2 gap-6;
+  @apply grid gap-4 grid-cols-1 md:grid-cols-2;
 }
 
 [data-vc='column'] {
@@ -15,125 +15,138 @@
 }
 
 [data-vc='header'] {
-  @apply relative flex items-center mb-3;
+  @apply relative flex items-center mb-4;
 }
 
 [data-vc-header='content'] {
-  @apply grid grid-flow-col auto-cols-max items-center justify-center px-4 whitespace-pre-wrap grow;
+  @apply grid grid-flow-col gap-x-1 auto-cols-max items-center justify-center px-4 whitespace-pre-wrap grow;
 }
 
 [data-vc='month'],
-[data-vc='year'],
-[data-vc-months-month],
-[data-vc-years-year] {
-  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base;
-  @apply font-medium transition-colors focus-visible:outline-none focus-visible:ring-1;
-  @apply focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
-  @apply [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer;
-  @apply hover:bg-accent hover:text-accent-foreground px-2 h-10 md:h-8 md:px-3 pointer-events-auto;
+[data-vc='year'] {
+  @apply inline-flex items-center justify-center whitespace-nowrap font-medium transition-all;
+  @apply disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4;
+  @apply shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
+  @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border;
+  @apply shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50;
+  @apply rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-xs h-7 bg-transparent;
+}
+
+[data-vc-arrow='prev'],
+[data-vc-arrow='next'] {
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium;
+  @apply transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none;
+  @apply [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring;
+  @apply focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20;
+  @apply dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border shadow-xs hover:bg-accent;
+  @apply hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 pointer-events-auto;
+  @apply size-7 bg-transparent p-0 opacity-50 hover:opacity-100;
 }
 
-[data-vc-months-month],
-[data-vc-years-year] {
-  @apply md:text-sm;
+[data-vc-arrow='next']:before {
+  @apply bg-current size-4 mask-size-[auto_16px] mask-center mask-no-repeat absolute content-[''];
+  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>');
+}
+
+[data-vc-arrow='prev']:before {
+  @apply bg-current size-4 mask-size-[auto_16px] mask-center mask-no-repeat absolute content-[''];
+  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>');
 }
 
 [data-vc='wrapper'] {
-  @apply flex grow;
+  @apply flex items-center content-center h-full;
 }
 
 [data-vc='content'] {
-  @apply flex flex-col grow;
+  @apply flex flex-col grow h-full;
 }
 
 [data-vc='months'] {
-  @apply grid gap-y-4 gap-x-2 grid-cols-3 md:grid-cols-4 items-center grow;
+  @apply grid gap-2 grid-cols-4 items-center grow;
 }
 
 [data-vc='years'] {
-  @apply grid gap-y-4 gap-x-2 grid-cols-3 md:grid-cols-5 items-center grow;
+  @apply grid gap-2 grid-cols-5 items-center grow;
+}
+
+[data-vc-months-month],
+[data-vc-years-year] {
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all;
+  @apply disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4;
+  @apply shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
+  @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
+  @apply hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-9 px-4 py-2 has-[>svg]:px-3;
+  @apply aria-[selected=true]:text-primary-foreground aria-[selected=true]:bg-primary;
+  @apply aria-[selected=true]:hover:text-primary-foreground aria-[selected=true]:hover:bg-primary;
 }
 
 [data-vc='week'] {
-  @apply grid grid-cols-[repeat(7,_1fr)] justify-items-center mb-2;
+  @apply grid mb-2 grid-cols-[repeat(7,_1fr)] justify-items-center items-center text-center;
 }
 
 [data-vc-week-day] {
-  @apply text-muted-foreground font-normal text-xs flex items-center justify-center;
+  @apply text-muted-foreground rounded-md w-8 font-normal text-[0.8rem];
 }
 
 [data-vc='dates'] {
-  @apply grid gap-y-1 grid-cols-[repeat(7,_1fr)] justify-items-center items-center grow pointer-events-none;
+  @apply grid gap-y-2 grid-cols-[repeat(7,_1fr)] justify-items-center items-center;
 }
 
 [data-vc-date-btn] {
-  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base md:text-sm;
-  @apply font-medium transition-colors focus-visible:outline-none focus-visible:ring-1;
-  @apply focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
-  @apply [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer;
-  @apply hover:bg-accent hover:text-accent-foreground md:h-9 md:w-9 h-10 w-10 pointer-events-auto;
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm transition-all;
+  @apply disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4;
+  @apply shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
+  @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
+  @apply hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 has-[>svg]:px-3 size-8 p-0 font-normal;
+  @apply aria-[disabled]:text-muted-foreground aria-[disabled]:opacity-50 aria-[disabled]:pointer-events-none;
 }
 
-[data-vc-years-year-selected],
-[data-vc-months-month-selected] {
-  @apply bg-primary text-primary-foreground;
+[data-vc-date-selected] [data-vc-date-btn] {
+  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;
 }
 
 [data-vc-date-today] [data-vc-date-btn] {
-  @apply bg-accent text-accent-foreground font-bold;
-}
-
-[data-vc-date-btn][aria-selected='true'] {
-  @apply bg-primary text-primary-foreground hover:bg-primary/90;
+  @apply bg-accent text-accent-foreground;
 }
 
-[data-vc-arrow] {
-  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm;
-  @apply font-medium transition-colors focus-visible:outline-none focus-visible:ring-1;
-  @apply focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
-  @apply [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer;
-  @apply border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground;
-  @apply pointer-events-auto w-7 h-7;
+[data-vc-date-month='prev'] [data-vc-date-btn],
+[data-vc-date-month='next'] [data-vc-date-btn] {
+  @apply text-muted-foreground;
 }
 
-[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-date-selected='middle'][data-vc-date-selected] [data-vc-date-btn] {
+  @apply bg-accent text-accent-foreground;
 }
 
-[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-date-selected='first'][data-vc-date-selected] [data-vc-date-btn] {
+  @apply bg-primary text-primary-foreground;
 }
 
-[data-vc-date-month='prev'] [data-vc-date-btn],
-[data-vc-date-month='next'] [data-vc-date-btn] {
-  @apply text-muted-foreground;
+[data-vc-date-hover] [data-vc-date-btn] {
+  @apply bg-accent text-accent-foreground;
 }
 
-[data-vc-date-disabled] [data-vc-date-btn] {
-  @apply pointer-events-none opacity-50 text-muted-foreground;
+[data-vc='grid'][data-vc-grid='hidden'] [data-vc='column'] {
+  pointer-events: none;
+  opacity: 0.3;
 }
 
-[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'] * {
+  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'][data-vc-column='month']
+  *,
+[data-vc='grid'][data-vc-grid='hidden']
+  [data-vc='column'][data-vc-column='year'],
+[data-vc='grid'][data-vc-grid='hidden']
+  [data-vc='column'][data-vc-column='year']
+  * {
+  pointer-events: auto;
+  opacity: 1;
 }
 
 [data-vc-date][data-vc-date-hover] [data-vc-date-btn] {
@@ -177,36 +190,3 @@
 [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-hover] [data-vc-date-btn] {
-  @apply bg-accent text-accent-foreground;
-}
-
-[data-vc-date-selected] [data-vc-date-btn] {
-  @apply bg-primary text-primary-foreground;
-}
-
-[data-vc-date-selected='middle'][data-vc-date-selected] [data-vc-date-btn] {
-  @apply bg-primary/20 hover:bg-primary/20 text-accent-foreground;
-}
-
-[data-vc-date-hover='last'] [data-vc-date-btn],
-[data-vc-date-hover='first'] [data-vc-date-btn] {
-  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground;
-}

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;
+}