gvf3n4ygn-test/__generated/registry-schemes/styles/css/range-calendar.json

CLI for SIGMA-UI components.

{
  "name": "range-calendar",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "RangeCalendar.vue",
      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue';\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.';\n\nconst props = defineProps<RangeCalendarRootProps>();\nconst emits = defineEmits<RangeCalendarRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    class=\"sigma-ui-range-calendar\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"sigma-ui-range-calendar__grid-container\">\n      <RangeCalendarGrid\n        v-for=\"month in grid\"\n        :key=\"month.value.toString()\"\n      >\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\"\n              :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow\n            v-for=\"(weekDates, index) in month.rows\"\n            :key=\"`weekDate-${index}`\"\n            class=\"sigma-ui-range-calendar__week-row\"\n          >\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n\n<style>\n.sigma-ui-range-calendar {\n  padding: 0.75rem;\n}\n\n.sigma-ui-range-calendar__grid-container {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  margin-top: 1rem;\n}\n\n.sigma-ui-range-calendar__week-row {\n  margin-top: 0.5rem;\n  width: 100%;\n}\n\n@media (min-width: 640px) {\n  .sigma-ui-range-calendar__grid-container {\n    flex-direction: row;\n    gap: 1rem;\n  }\n}\n</style>\n"
    },
    {
      "name": "RangeCalendarCell.vue",
      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue';\n\nconst props = defineProps<RangeCalendarCellProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarCell\n    class=\"sigma-ui-range-calendar-cell\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n\n<style>\n.sigma-ui-range-calendar-cell {\n  position: relative;\n  height: 2.25rem;\n  width: 2.25rem;\n  padding: 0;\n  text-align: center;\n  font-size: 0.875rem;\n}\n\n.sigma-ui-range-calendar-cell:focus-within {\n  position: relative;\n  z-index: 20;\n}\n\n.sigma-ui-range-calendar-cell:has([data-selected]) {\n  background-color: hsl(var(--accent));\n}\n\n.sigma-ui-range-calendar-cell:first-child:has([data-selected]) {\n  border-top-left-radius: var(--radius-md);\n  border-bottom-left-radius: var(--radius-md);\n}\n\n.sigma-ui-range-calendar-cell:last-child:has([data-selected]) {\n  border-top-right-radius: var(--radius-md);\n  border-bottom-right-radius: var(--radius-md);\n}\n\n.sigma-ui-range-calendar-cell:has([data-selected][data-outside-month]) {\n  background-color: hsl(var(--accent) / 0.5);\n}\n\n.sigma-ui-range-calendar-cell:has([data-selected][data-selection-end]) {\n  border-top-right-radius: var(--radius-md);\n  border-bottom-right-radius: var(--radius-md);\n}\n\n.sigma-ui-range-calendar-cell:has([data-selected][data-selection-start]) {\n  border-top-left-radius: var(--radius-md);\n  border-bottom-left-radius: var(--radius-md);\n}\n</style>\n"
    },
    {
      "name": "RangeCalendarCellTrigger.vue",
      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'radix-vue';\nimport { buttonVariants } from '@ui/registry/css/ui/button';\n\nconst props = defineProps<RangeCalendarCellTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    class=\"sigma-ui-range-calendar-cell-trigger\"\n    :class=\"[buttonVariants({ variant: 'ghost' })]\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n\n<style>\n.sigma-ui-range-calendar-cell-trigger {\n  height: 2.25rem;\n  width: 2.25rem;\n  padding: 0;\n  font-weight: normal;\n  background-color: transparent;\n  border-radius: var(--radius-sm);\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-selected] {\n  opacity: 1;\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-today]:not([data-selected]) {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-selection-start],\n.sigma-ui-range-calendar-cell-trigger[data-selection-end] {\n  background-color: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-selection-start]:hover,\n.sigma-ui-range-calendar-cell-trigger[data-selection-start]:focus,\n.sigma-ui-range-calendar-cell-trigger[data-selection-end]:hover,\n.sigma-ui-range-calendar-cell-trigger[data-selection-end]:focus {\n  background-color: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-outside-month] {\n  pointer-events: none;\n  color: hsl(var(--muted-foreground));\n  opacity: 0.5;\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-outside-month][data-selected] {\n  background-color: hsl(var(--accent) / 0.5);\n  color: hsl(var(--muted-foreground));\n  opacity: 0.3;\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-disabled] {\n  color: hsl(var(--muted-foreground));\n  opacity: 0.5;\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-unavailable] {\n  color: hsl(var(--destructive-foreground));\n  text-decoration: line-through;\n}\n</style>\n"
    },
    {
      "name": "RangeCalendarGrid.vue",
      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'radix-vue';\n\nconst props = defineProps<RangeCalendarGridProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarGrid\n    class=\"sigma-ui-range-calendar-grid\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n\n<style>\n.sigma-ui-range-calendar-grid {\n  width: 100%;\n  border-collapse: collapse;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n</style>\n"
    },
    {
      "name": "RangeCalendarGridBody.vue",
      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'radix-vue';\n\nconst props = defineProps<RangeCalendarGridBodyProps>();\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n"
    },
    {
      "name": "RangeCalendarGridHead.vue",
      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'radix-vue';\n\nconst props = defineProps<RangeCalendarGridHeadProps>();\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n"
    },
    {
      "name": "RangeCalendarGridRow.vue",
      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'radix-vue';\n\nconst props = defineProps<RangeCalendarGridRowProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarGridRow\n    class=\"sigma-ui-range-calendar-grid-row\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n\n<style>\n.sigma-ui-range-calendar-grid-row {\n  display: flex;\n  margin-top: 0.5rem;\n  width: 100%;\n}\n</style>\n"
    },
    {
      "name": "RangeCalendarHeadCell.vue",
      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'radix-vue';\n\nconst props = defineProps<RangeCalendarHeadCellProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarHeadCell\n    class=\"sigma-ui-range-calendar-head-cell\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n\n<style>\n.sigma-ui-range-calendar-head-cell {\n  width: 2rem;\n  border-radius: var(--radius-md);\n  font-size: 0.8rem;\n  font-weight: normal;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
    },
    {
      "name": "RangeCalendarHeader.vue",
      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'radix-vue';\n\nconst props = defineProps<RangeCalendarHeaderProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarHeader\n    class=\"sigma-ui-range-calendar-header\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeader>\n</template>\n\n<style>\n.sigma-ui-range-calendar-header {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 0.25rem;\n}\n</style>\n"
    },
    {
      "name": "RangeCalendarHeading.vue",
      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'radix-vue';\n\nconst props = defineProps<RangeCalendarHeadingProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    class=\"sigma-ui-range-calendar-heading\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value=\"headingValue\">\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n\n<style>\n.sigma-ui-range-calendar-heading {\n  font-size: 0.875rem;\n  font-weight: 500;\n}\n</style>\n"
    },
    {
      "name": "RangeCalendarNextButton.vue",
      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'radix-vue';\nimport { ChevronRightIcon } from 'lucide-vue-next';\nimport { buttonVariants } from '@ui/registry/css/ui/button';\n\nconst props = defineProps<RangeCalendarNextProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarNext\n    class=\"sigma-ui-range-calendar-next\"\n    :class=\"[buttonVariants({ variant: 'outline' })]\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"sigma-ui-range-calendar-next__icon\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n\n<style>\n.sigma-ui-range-calendar-next {\n  height: 1.75rem;\n  width: 1.75rem;\n  background-color: transparent;\n  padding: 0;\n  opacity: 0.5;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.sigma-ui-range-calendar-next:hover {\n  opacity: 1;\n}\n\n.sigma-ui-range-calendar-next__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
    },
    {
      "name": "RangeCalendarPrevButton.vue",
      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'radix-vue';\nimport { ChevronLeftIcon } from 'lucide-vue-next';\nimport { buttonVariants } from '@ui/registry/css/ui/button';\n\nconst props = defineProps<RangeCalendarPrevProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarPrev\n    class=\"sigma-ui-range-calendar-prev\"\n    :class=\"[buttonVariants({ variant: 'outline' })]\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"sigma-ui-range-calendar-prev__icon\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n\n<style>\n.sigma-ui-range-calendar-prev {\n  height: 1.75rem;\n  width: 1.75rem;\n  background-color: transparent;\n  padding: 0;\n  opacity: 0.5;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.sigma-ui-range-calendar-prev:hover {\n  opacity: 1;\n}\n\n.sigma-ui-range-calendar-prev__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
    },
    {
      "name": "index.ts",
      "content": "export { default as RangeCalendar } from './RangeCalendar.vue';\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue';\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue';\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue';\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue';\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue';\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue';\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue';\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue';\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue';\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue';\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue';\n"
    }
  ],
  "type": "components:ui"
}