@soft-stech/bootsman-ui-shadcn 1.4.37 → 1.5.0

package/src/components/ui/color-picker/BuiColorPicker.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { ref, computed, nextTick } from 'vue'
+import { watchThrottled, watchPausable } from '@vueuse/core'
+import { Primitive } from 'radix-vue'
+import { ColorTranslator } from 'colortranslator'
+import { colorPickerSelectorVariants, colorPickerTrackVariants } from '.'
+import {
+  type HSVColor,
+  HSLtoHSV,
+  HSVtoHSL,
+  normalizeBrightness,
+  normalizeHue
+} from '@/lib/colorUtils'
+import { useColorDraggable } from '@/lib/useColorDraggable'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<{
+    as?: string
+    disabled?: boolean
+    size?: NonNullable<Parameters<typeof colorPickerSelectorVariants>[0]>['size']
+    defaultValue?: string
+    format?: 'hex' | 'rgb' | 'hsl' | 'cmyk' | 'lab'
+    throttle?: number
+    ui?: {
+      selectorClass?: string
+      trackClass?: string
+    }
+  }>(),
+  {
+    as: 'div',
+    format: 'hex',
+    defaultValue: '#FFFFFF',
+    throttle: 50
+  }
+)
+
+const modelValue = defineModel<string>(undefined)
+
+const pickedColor = computed<HSVColor>({
+  get() {
+    try {
+      const color = new ColorTranslator(modelValue.value || props.defaultValue)
+
+      return HSLtoHSV(color.HSLObject)
+    } catch (_) {
+      return { h: 0, s: 0, v: 100 }
+    }
+  },
+
+  set(value) {
+    const color = new ColorTranslator(HSVtoHSL(value), {
+      labUnit: 'percent',
+      cmykUnit: 'percent',
+      cmykFunction: 'cmyk'
+    })
+
+    switch (props.format) {
+      case 'rgb':
+        modelValue.value = color.RGB
+        break
+      case 'hsl':
+        modelValue.value = color.HSL
+        break
+      case 'cmyk':
+        modelValue.value = color.CMYK
+        break
+      case 'lab':
+        modelValue.value = color.CIELab
+        break
+      case 'hex':
+      default:
+        modelValue.value = color.HEX
+    }
+  }
+})
+
+const selectorRef = ref<HTMLDivElement | null>(null)
+const selectorThumbRef = ref<HTMLDivElement | null>(null)
+const trackRef = ref<HTMLDivElement | null>(null)
+const trackThumbRef = ref<HTMLDivElement | null>(null)
+
+const { position: selectorThumbPosition } = useColorDraggable(
+  selectorThumbRef,
+  selectorRef,
+  'both',
+  {
+    x: pickedColor.value.s,
+    y: normalizeBrightness(pickedColor.value.v)
+  },
+  props.disabled
+)
+
+const { position: trackThumbPosition } = useColorDraggable(
+  trackThumbRef,
+  trackRef,
+  'y',
+  {
+    x: 0,
+    y: normalizeHue(pickedColor.value.h, 'right')
+  },
+  props.disabled
+)
+
+const trackThumbColor = computed(
+  () =>
+    new ColorTranslator(
+      HSVtoHSL({
+        h: normalizeHue(trackThumbPosition.value.y),
+        s: 100,
+        v: 100
+      })
+    ).HEX
+)
+
+const selectorStyle = computed(() => ({
+  backgroundColor: trackThumbColor.value
+}))
+
+const selectorThumbStyle = computed(() => ({
+  backgroundColor: new ColorTranslator(modelValue.value || props.defaultValue).HEX,
+  left: `${selectorThumbPosition.value.x}%`,
+  top: `${selectorThumbPosition.value.y}%`
+}))
+
+const trackThumbStyle = computed(() => ({
+  backgroundColor: trackThumbColor.value,
+  top: `${trackThumbPosition.value.y}%`
+}))
+
+const { pause: pauseWatchColor, resume: resumeWatchColor } = watchPausable(pickedColor, (hsv) => {
+  selectorThumbPosition.value = {
+    x: hsv.s,
+    y: normalizeBrightness(hsv.v)
+  }
+  trackThumbPosition.value = {
+    x: 0,
+    y: normalizeHue(hsv.h, 'right')
+  }
+})
+
+watchThrottled(
+  [selectorThumbPosition, trackThumbPosition],
+  () => {
+    pauseWatchColor()
+
+    pickedColor.value = {
+      h: normalizeHue(trackThumbPosition.value.y),
+      s: selectorThumbPosition.value.x,
+      v: normalizeBrightness(selectorThumbPosition.value.y)
+    }
+
+    nextTick(resumeWatchColor)
+  },
+  { throttle: () => props.throttle }
+)
+</script>
+<template>
+  <Primitive
+    :as="as"
+    class="data-[disabled]:opacity-75"
+    :data-disabled="disabled ? true : undefined"
+  >
+    <div class="flex gap-4">
+      <div ref="selectorRef" :class="colorPickerSelectorVariants({ size })" :style="selectorStyle">
+        <div class="relative h-full w-full rounded-md" data-color-picker-background>
+          <div
+            ref="selectorThumbRef"
+            :class="
+              cn(
+                'absolute size-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full ring-2 ring-background data-[disabled]:cursor-not-allowed',
+                ui?.selectorClass
+              )
+            "
+            :style="selectorThumbStyle"
+            :data-disabled="disabled ? true : undefined"
+          ></div>
+        </div>
+      </div>
+      <div ref="trackRef" :class="colorPickerTrackVariants({ size })" data-color-picker-track>
+        <div
+          ref="trackThumbRef"
+          :class="
+            cn(
+              'absolute size-4 -translate-x-[4px] -translate-y-1/2 transform cursor-pointer rounded-full ring-2 ring-background data-[disabled]:cursor-not-allowed rtl:translate-x-[4px]',
+              ui?.trackClass
+            )
+          "
+          :style="trackThumbStyle"
+          :data-disabled="disabled ? true : undefined"
+        ></div>
+      </div>
+    </div>
+  </Primitive>
+</template>
+
+<style scoped>
+[data-color-picker-background] {
+  background-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%),
+    linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+[data-color-picker-track] {
+  background-image: linear-gradient(
+    0deg,
+    red 0,
+    #f0f 17%,
+    #00f 33%,
+    #0ff 50%,
+    #0f0 67%,
+    #ff0 83%,
+    red
+  );
+}
+</style>

package/src/components/ui/color-picker/index.ts

@@ -0,0 +1,33 @@
+import { cva } from 'class-variance-authority'
+
+export { default as BuiColorPicker } from './BuiColorPicker.vue'
+
+export const colorPickerSelectorVariants = cva('touch-none rounded-md', {
+  variants: {
+    size: {
+      xs: 'w-32 h-32',
+      sm: 'w-36 h-36',
+      md: 'w-40 h-40',
+      lg: 'w-44 h-44',
+      xl: 'w-48 h-48'
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+})
+
+export const colorPickerTrackVariants = cva('relative w-[8px] touch-none rounded-md', {
+  variants: {
+    size: {
+      xs: 'h-32',
+      sm: 'h-36',
+      md: 'h-40',
+      lg: 'h-44',
+      xl: 'h-48'
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+})

package/src/components/ui/input/BuiColorInput.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { BuiInput, BuiPopover, BuiPopoverTrigger, BuiPopoverContent } from '@/index'
+import { useElementBounding } from '@vueuse/core'
+import { ref, watch } from 'vue'
+import { Palette as PaletteIcon } from 'lucide-vue-next'
+import BuiColorPicker from '../color-picker/BuiColorPicker.vue'
+import { HEX_REGEXP, HEX_REGEXP_NO_POUND } from '@/lib/colorUtils'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    defaultValue?: string
+    disabled?: boolean
+    ui?: {
+      badgeClass?: string
+      inputClass?: string
+    }
+  }>(),
+  {
+    defaultValue: '#FFFFFF',
+    disabled: false
+  }
+)
+
+const modelValue = defineModel<string>(undefined)
+
+const paletteBadge = ref<HTMLDivElement | null>(null)
+const { width } = useElementBounding(paletteBadge)
+const MAGIC_NUMBER = 12 // 8 (right-2) + 4 (just some offset)
+
+const validatedDefaultValue = () => {
+  if (modelValue.value && HEX_REGEXP.test(modelValue.value)) return modelValue.value
+
+  if (props.defaultValue && HEX_REGEXP.test(props.defaultValue)) return props.defaultValue
+
+  return '#FFFFFF'
+}
+
+const writtenColor = ref<string>(validatedDefaultValue().substring(1))
+const pickedColor = ref<string>(validatedDefaultValue())
+
+watch(writtenColor, () => {
+  if (HEX_REGEXP_NO_POUND.test(writtenColor.value)) {
+    modelValue.value = `#${writtenColor.value}`
+    pickedColor.value = `#${writtenColor.value}`
+  }
+})
+
+watch(pickedColor, () => {
+  modelValue.value = pickedColor.value
+  writtenColor.value = pickedColor.value.substring(1)
+})
+</script>
+
+<template>
+  <BuiPopover>
+    <BuiPopoverTrigger>
+      <div class="nowrap relative flex w-32 flex-row font-medium uppercase text-foreground">
+        <div
+          ref="paletteBadge"
+          :class="cn('absolute left-2 top-1.5 flex flex-row items-center gap-1', ui?.badgeClass)"
+        >
+          <PaletteIcon class="h-4 w-4 shrink-0" />
+          <div class="h-4 w-4 rounded" :style="{ backgroundColor: pickedColor }"></div>
+          <div class="font-bold text-foreground/[.56]">#</div>
+        </div>
+        <BuiInput
+          v-model="writtenColor"
+          :id="id"
+          :style="{ paddingLeft: width + MAGIC_NUMBER + 'px' }"
+          :disabled="disabled"
+          :class="ui?.inputClass"
+        />
+      </div>
+    </BuiPopoverTrigger>
+    <BuiPopoverContent class="w-fit" align="start">
+      <BuiColorPicker
+        v-model="pickedColor"
+        format="hex"
+        :disabled="disabled"
+        :ui="{ selectorClass: 'ring-popover', trackClass: 'ring-popover' }"
+      />
+    </BuiPopoverContent>
+  </BuiPopover>
+</template>

package/src/components/ui/input/index.ts

@@ -3,6 +3,7 @@ import { cva } from 'class-variance-authority'
 export { default as BuiInput } from './BuiInput.vue'
 export { default as BuiPasswordInput } from './BuiPasswordInput.vue'
 export { default as BuiBadgedInput } from './BuiBadgedInput.vue'
+export { default as BuiColorInput } from './BuiColorInput.vue'
 
 export const inputVariants = cva(
   'flex h-8 w-full rounded bg-background border px-2 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-30 dark:disabled:opacity-55 read-only:opacity-30 dark:read-only:opacity-55 aria-[invalid=true]:border-destructive-foreground',

package/src/index.ts

@@ -40,9 +40,7 @@ export * from './components/ui/scroll-area/index'
 export * from './components/ui/collapsible/index'
 export * from './components/ui/auto-form/index'
 export * from './components/ui/sheet/index'
+export * from './components/ui/color-picker/index'
 
 export * from './lib/utils'
 export { default as tailwind } from './tailwind-preset'
-
-// @ts-ignore
-export * from './assets/variables.css'

package/src/lib/colorUtils.ts

@@ -0,0 +1,43 @@
+import { type HSLObject } from 'colortranslator'
+
+export const HEX_REGEXP = /^#(?:(?:[\da-f]{3}){1,2}|(?:[\da-f]{4}){1,2})$/i
+export const HEX_REGEXP_NO_POUND = /^(?:(?:[\da-f]{3}){1,2}|(?:[\da-f]{4}){1,2})$/i
+
+export type HSVColor = {
+  h: number
+  s: number
+  v: number
+}
+
+export function HSLtoHSV(hsl: HSLObject): HSVColor {
+  const x = hsl.S * (hsl.L < 50 ? hsl.L : 100 - hsl.L)
+  const v = hsl.L + x / 100
+
+  return {
+    h: hsl.H,
+    s: hsl.L === 0 ? hsl.S : (2 * x) / v,
+    v
+  }
+}
+
+export function HSVtoHSL(hsv: HSVColor): HSLObject {
+  const x = ((200 - hsv.s) * hsv.v) / 100
+
+  return {
+    H: hsv.h,
+    S: x === 0 || x === 200 ? 0 : Math.round((hsv.s * hsv.v) / (x <= 100 ? x : 200 - x)),
+    L: x / 2
+  }
+}
+
+export function normalizeHue(hue: number, dir: 'left' | 'right' = 'left'): number {
+  if (dir === 'right') {
+    return (hue * 100) / 360
+  }
+
+  return (hue / 100) * 360
+}
+
+export function normalizeBrightness(brightness: number): number {
+  return 100 - brightness
+}

package/src/lib/useColorDraggable.ts

@@ -0,0 +1,75 @@
+import { type MaybeRefOrGetter, ref } from 'vue'
+import { useElementBounding, useEventListener, isClient, toValue } from '@vueuse/core'
+
+export function useColorDraggable(
+  targetElement: MaybeRefOrGetter<HTMLElement | null>,
+  containerElement: MaybeRefOrGetter<HTMLElement | null>,
+  axis: 'x' | 'y' | 'both' = 'both',
+  initialPosition = { x: 0, y: 0 },
+  disabled?: MaybeRefOrGetter<boolean | undefined>
+) {
+  const position = ref<{ x: number; y: number }>(initialPosition)
+  const pressedDelta = ref<{ x: number; y: number }>()
+
+  const handlePointerDown = (event: PointerEvent) => {
+    if (toValue(disabled)) return event.preventDefault()
+
+    const container = toValue(containerElement)
+    const targetRect = useElementBounding(targetElement)
+    const containerRect = useElementBounding(containerElement)
+
+    pressedDelta.value = {
+      x:
+        event.clientX -
+        (container
+          ? event.clientX - containerRect.left.value + container.scrollLeft
+          : targetRect.left.value),
+      y:
+        event.clientY -
+        (container
+          ? event.clientY - containerRect.top.value + container.scrollTop
+          : targetRect.top.value)
+    }
+
+    handlePointerMove(event)
+  }
+  const handlePointerMove = (event: PointerEvent) => {
+    if (!pressedDelta.value) return
+
+    const container = toValue(containerElement)
+    let { x, y } = position.value
+
+    if (container && (axis === 'x' || axis === 'both')) {
+      x = Math.min(
+        Math.max(0, ((event.clientX - pressedDelta.value.x) / container.scrollWidth) * 100),
+        100
+      )
+    }
+
+    if (container && (axis === 'y' || axis === 'both')) {
+      y = Math.min(
+        Math.max(0, ((event.clientY - pressedDelta.value.y) / container.scrollHeight) * 100),
+        100
+      )
+    }
+
+    position.value = { x, y }
+  }
+  const handlePointerUp = () => {
+    if (!pressedDelta.value) {
+      return
+    }
+
+    pressedDelta.value = undefined
+  }
+
+  if (isClient) {
+    useEventListener(containerElement, 'pointerdown', handlePointerDown)
+    useEventListener(window, 'pointermove', handlePointerMove)
+    useEventListener(window, 'pointerup', handlePointerUp)
+  }
+
+  return {
+    position
+  }
+}

package/dist/BuiAutoFormFieldInput.vue_vue_type_script_setup_true_lang-D4RSWQ2a.js

@@ -1,58 +0,0 @@
-import { defineComponent as _, computed as b, openBlock as i, createBlock as r, unref as o, withCtx as a, createVNode as n, normalizeProps as m, guardReactiveProps as l, createTextVNode as d, toDisplayString as f, createCommentVNode as s, renderSlot as g, resolveDynamicComponent as $, mergeProps as y } from "vue";
-import { _ as B } from "./BuiAutoFormLabel.vue_vue_type_script_setup_true_lang-NhOJHYJA.js";
-import { beautifyObjectName as N } from "./components/ui/auto-form/utils.js";
-import { Field as C } from "vee-validate";
-import { d as k, a as q, c as F, f as h } from "./utils-C11OfLQK.js";
-import { BuiInput as v } from "./components/ui/input/index.js";
-import "@vueuse/core";
-import { BuiTextarea as P } from "./components/ui/textarea/index.js";
-const L = /* @__PURE__ */ _({
-  __name: "BuiAutoFormFieldInput",
-  props: {
-    fieldName: {},
-    label: {},
-    required: { type: Boolean },
-    config: {},
-    disabled: { type: Boolean }
-  },
-  setup(p) {
-    const u = p, c = b(() => u.config?.component === "textarea" ? P : v);
-    return (e, V) => (i(), r(o(C), { name: e.fieldName }, {
-      default: a((t) => [
-        n(o(k), m(l(e.$attrs)), {
-          default: a(() => [
-            e.config?.hideLabel ? s("", !0) : (i(), r(B, {
-              key: 0,
-              required: e.required
-            }, {
-              default: a(() => [
-                d(f(e.config?.label || o(N)(e.label ?? e.fieldName)), 1)
-              ]),
-              _: 1
-            }, 8, ["required"])),
-            n(o(q), null, {
-              default: a(() => [
-                g(e.$slots, "default", m(l(t)), () => [
-                  (i(), r($(c.value), y({ type: "text" }, { ...t.componentField, ...e.config?.inputProps }, { disabled: e.disabled }), null, 16, ["disabled"]))
-                ])
-              ]),
-              _: 2
-            }, 1024),
-            e.config?.description ? (i(), r(o(F), { key: 1 }, {
-              default: a(() => [
-                d(f(e.config.description), 1)
-              ]),
-              _: 1
-            })) : s("", !0),
-            n(o(h))
-          ]),
-          _: 2
-        }, 1040)
-      ]),
-      _: 3
-    }, 8, ["name"]));
-  }
-});
-export {
-  L as _
-};

package/dist/BuiAutoFormFieldNumber.vue_vue_type_script_setup_true_lang-Db9bTqM3.js

@@ -1,57 +0,0 @@
-import { defineComponent as f, openBlock as o, createBlock as n, unref as i, withCtx as r, createVNode as a, createTextVNode as t, toDisplayString as m, createCommentVNode as d, renderSlot as s, normalizeProps as u, guardReactiveProps as p, mergeProps as c } from "vue";
-import { _ } from "./BuiAutoFormLabel.vue_vue_type_script_setup_true_lang-NhOJHYJA.js";
-import { beautifyObjectName as b } from "./components/ui/auto-form/utils.js";
-import { Field as g } from "vee-validate";
-import { d as N, a as y, c as $, f as B } from "./utils-C11OfLQK.js";
-import { BuiInput as h } from "./components/ui/input/index.js";
-import "@vueuse/core";
-const v = /* @__PURE__ */ f({
-  inheritAttrs: !1,
-  __name: "BuiAutoFormFieldNumber",
-  props: {
-    fieldName: {},
-    label: {},
-    required: { type: Boolean },
-    config: {},
-    disabled: { type: Boolean }
-  },
-  setup(k) {
-    return (e, q) => (o(), n(i(g), { name: e.fieldName }, {
-      default: r((l) => [
-        a(i(N), null, {
-          default: r(() => [
-            e.config?.hideLabel ? d("", !0) : (o(), n(_, {
-              key: 0,
-              required: e.required
-            }, {
-              default: r(() => [
-                t(m(e.config?.label || i(b)(e.label ?? e.fieldName)), 1)
-              ]),
-              _: 1
-            }, 8, ["required"])),
-            a(i(y), null, {
-              default: r(() => [
-                s(e.$slots, "default", u(p(l)), () => [
-                  a(i(h), c({ type: "number" }, { ...l.componentField, ...e.config?.inputProps }, { disabled: e.disabled }), null, 16, ["disabled"])
-                ])
-              ]),
-              _: 2
-            }, 1024),
-            e.config?.description ? (o(), n(i($), { key: 1 }, {
-              default: r(() => [
-                t(m(e.config.description), 1)
-              ]),
-              _: 1
-            })) : d("", !0),
-            a(i(B))
-          ]),
-          _: 2
-        }, 1024)
-      ]),
-      _: 3
-    }, 8, ["name"]));
-  }
-});
-export {
-  v as _
-};

package/dist/BuiCalendar.css

@@ -1 +0,0 @@
-.calendar{padding:.75rem;text-align:center}.calendar .vc-pane-layout{display:grid;gap:1rem}.calendar .vc-title{pointer-events:none;font-size:.875rem;line-height:1.25rem;font-weight:500}.calendar .vc-pane-header-wrapper{display:none}.calendar .vc-weeks{margin-top:1rem}.calendar .vc-weekdays{display:flex}.calendar .vc-weekday{width:2.25rem;border-radius:calc(var(--radius) - 2px);font-size:.8rem;font-weight:400;color:hsl(var(--muted-foreground))}.calendar .vc-weeks{display:flex;width:100%;flex-direction:column}.calendar .vc-weeks>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.calendar .vc-weeks>div{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.calendar .vc-day:has(.vc-highlights){overflow:hidden;background-color:hsl(var(--accent))}.calendar .vc-day:has(.vc-highlights):first-child{border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.calendar .vc-day:has(.vc-highlights):last-child{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.calendar .vc-day.is-today:not(:has(.vc-day-layer)){border-radius:calc(var(--radius) - 2px);background-color:hsl(var(--secondary))}.calendar .vc-day:has(.vc-highlight-base-start){border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.calendar .vc-day:has(.vc-highlight-base-end){border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)){border-radius:calc(var(--radius) - 2px)}.calendar .vc-day-content{position:relative;display:inline-flex;height:2.25rem;width:2.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;justify-content:center;padding:0;text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:400;--tw-ring-offset-color: hsl(var(--background))}.calendar .vc-day-content:focus-within{position:relative;z-index:20}.calendar .vc-day-content:hover{background-color:hsl(var(--accent) / .08);color:hsl(var(--accent-foreground));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.calendar .vc-day-content:focus-visible{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--ring));--tw-ring-offset-width: 2px}.calendar .vc-day-content[aria-selected=true]{opacity:1}.calendar .vc-day-content:not(.vc-highlight-content-light){border-radius:calc(var(--radius) - 2px)}.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),.calendar .vc-disabled{color:hsl(var(--muted-foreground));opacity:.5}.calendar .vc-highlight-content-solid,.calendar .vc-highlight-content-outline,.calendar .vc-highlight-content-solid:hover,.calendar .vc-highlight-content-outline:hover{--tw-bg-opacity: 1;background-color:hsl(var(--primary) / var(--tw-bg-opacity));--tw-text-opacity: 1;color:hsl(var(--primary-foreground) / var(--tw-text-opacity))}.calendar .vc-highlight-content-solid:focus,.calendar .vc-highlight-content-outline:focus{--tw-bg-opacity: 1;background-color:hsl(var(--primary) / var(--tw-bg-opacity));--tw-text-opacity: 1;color:hsl(var(--primary-foreground) / var(--tw-text-opacity))}.calendar .vc-highlight-content-light{background-color:hsl(var(--accent) / .08);color:hsl(var(--accent-foreground))}.calendar .vc-pane-container.in-transition{overflow:hidden}.calendar .vc-pane-container{position:relative;width:100%}:root{--vc-slide-translate: 22px;--vc-slide-duration: .15s;--vc-slide-timing: ease}.calendar .vc-fade-enter-active,.calendar .vc-fade-leave-active,.calendar .vc-slide-left-enter-active,.calendar .vc-slide-left-leave-active,.calendar .vc-slide-right-enter-active,.calendar .vc-slide-right-leave-active,.calendar .vc-slide-up-enter-active,.calendar .vc-slide-up-leave-active,.calendar .vc-slide-down-enter-active,.calendar .vc-slide-down-leave-active,.calendar .vc-slide-fade-enter-active,.calendar .vc-slide-fade-leave-active{transition:transform var(--vc-slide-duration) var(--vc-slide-timing),opacity var(--vc-slide-duration) var(--vc-slide-timing);backface-visibility:hidden;pointer-events:none}.calendar .vc-none-leave-active,.calendar .vc-fade-leave-active,.calendar .vc-slide-left-leave-active,.calendar .vc-slide-right-leave-active,.calendar .vc-slide-up-leave-active,.calendar .vc-slide-down-leave-active{position:absolute!important;width:100%}.calendar .vc-none-enter-from,.calendar .vc-none-leave-to,.calendar .vc-fade-enter-from,.calendar .vc-fade-leave-to,.calendar .vc-slide-left-enter-from,.calendar .vc-slide-left-leave-to,.calendar .vc-slide-right-enter-from,.calendar .vc-slide-right-leave-to,.calendar .vc-slide-up-enter-from,.calendar .vc-slide-up-leave-to,.calendar .vc-slide-down-enter-from,.calendar .vc-slide-down-leave-to,.calendar .vc-slide-fade-enter-from,.calendar .vc-slide-fade-leave-to{opacity:0}.calendar .vc-slide-left-enter-from,.calendar .vc-slide-right-leave-to,.calendar .vc-slide-fade-enter-from.direction-left,.calendar .vc-slide-fade-leave-to.direction-left{transform:translate(var(--vc-slide-translate))}.calendar .vc-slide-right-enter-from,.calendar .vc-slide-left-leave-to,.calendar .vc-slide-fade-enter-from.direction-right,.calendar .vc-slide-fade-leave-to.direction-right{transform:translate(calc(-1 * var(--vc-slide-translate)))}.calendar .vc-slide-up-enter-from,.calendar .vc-slide-down-leave-to,.calendar .vc-slide-fade-enter-from.direction-top,.calendar .vc-slide-fade-leave-to.direction-top{transform:translateY(var(--vc-slide-translate))}.calendar .vc-slide-down-enter-from,.calendar .vc-slide-up-leave-to,.calendar .vc-slide-fade-enter-from.direction-bottom,.calendar .vc-slide-fade-leave-to.direction-bottom{transform:translateY(calc(-1 * var(--vc-slide-translate)))}.vc-time-picker{display:flex;flex-direction:column;align-items:center;padding:.5rem}.vc-time-picker.vc-invalid{pointer-events:none;opacity:.5}.vc-time-picker.vc-attached{margin-top:.5rem;border-top-width:1px;border-style:solid;border-color:hsl(var(--secondary))}.vc-time-picker>*+*{margin-top:.25rem}.vc-time-header{margin-top:.25rem;display:flex;align-items:center;padding-left:.25rem;padding-right:.25rem;font-size:.875rem;font-weight:600;text-transform:uppercase;line-height:1.5rem}.vc-time-select-group{display:inline-flex;align-items:center;border-radius:calc(var(--radius) - 2px);border-width:1px;border-style:solid;border-color:hsl(var(--secondary));background-color:hsl(var(--background));padding-left:.25rem;padding-right:.25rem;color:hsl(var(--foreground))}.vc-time-select-group .vc-base-icon{margin-right:.25rem;stroke:hsl(var(--primary) / 1);--tw-text-opacity: 1;color:hsl(var(--primary) / var(--tw-text-opacity))}.vc-time-select-group select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:hsl(var(--background));padding:.25rem;text-align:center;color:hsl(var(--foreground));outline:2px solid transparent;outline-offset:2px}.vc-time-weekday{letter-spacing:.025em;color:hsl(var(--muted-foreground))}.vc-time-month{margin-left:.5rem;--tw-text-opacity: 1;color:hsl(var(--primary) / var(--tw-text-opacity))}.vc-time-day{margin-left:.25rem;--tw-text-opacity: 1;color:hsl(var(--primary) / var(--tw-text-opacity))}.vc-time-year{margin-left:.5rem;color:hsl(var(--muted-foreground))}.vc-time-colon{margin-bottom:.125rem}.vc-time-decimal{margin-left:.125rem}