sigma-ui 1.0.13 → 1.0.15

package/__generated/registry-schemes/style-system/css/chart-bar.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "BarChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts';\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue';\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport type { BaseChartProps } from '.';\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@ui/registry/css/ui/chart';\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component;\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped';\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number;\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n});\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number];\n}>();\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst index = computed(() => props.index as KeyOfT);\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length));\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})));\n\nconst isMounted = useMounted();\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i);\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar);\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar);\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-bar-chart\"\n    :class=\"$attrs.class\"\n  >\n    <ChartLegend\n      v-if=\"showLegend\"\n      v-model:items=\"legendItems\"\n      @legend-item-click=\"handleLegendItemClick\"\n    />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair\n        v-if=\"showTooltip\"\n        :colors=\"colors\"\n        :items=\"legendItems\"\n        :custom-tooltip=\"customTooltip\"\n        :index=\"index\"\n      />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n\n<style>\n.sigma-ui-bar-chart {\n  width: 100%;\n  height: 400px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts';\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue';\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport type { BaseChartProps } from '.';\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@ui/registry/css/ui/chart';\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component;\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped';\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number;\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n});\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number];\n}>();\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst index = computed(() => props.index as KeyOfT);\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length));\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})));\n\nconst isMounted = useMounted();\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i);\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar);\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar);\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-bar-chart\"\n    :class=\"$attrs.class\"\n  >\n    <ChartLegend\n      v-if=\"showLegend\"\n      v-model:items=\"legendItems\"\n      @legend-item-click=\"handleLegendItemClick\"\n    />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair\n        v-if=\"showTooltip\"\n        :colors=\"colors\"\n        :items=\"legendItems\"\n        :custom-tooltip=\"customTooltip\"\n        :index=\"index\"\n      />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n\n<style>\n.sigma-ui-bar-chart {\n  display: flex;\n  width: 100%;\n  height: 400px;\n  flex-direction: column;\n  align-items: flex-end;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/css/chart-donut.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "DonutChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { VisDonut, VisSingleContainer } from '@unovis/vue';\nimport { Donut } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport type { BaseChartProps } from '.';\nimport { ChartSingleTooltip, defaultColors } from '@ui/registry/css/ui/chart';\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT;\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie';\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined;\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string;\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component;\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n});\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst category = computed(() => props.category as KeyOfT);\nconst index = computed(() => props.index as KeyOfT);\n\nconst isMounted = useMounted();\nconst activeSegmentKey = ref<string>();\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length));\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})));\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category];\n}, 0));\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-donut-chart\"\n    :class=\"$attrs.class\"\n  >\n    <VisSingleContainer\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n    >\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n\n<style>\n.sigma-ui-donut-chart {\n  width: 100%;\n  height: 12rem;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { VisDonut, VisSingleContainer } from '@unovis/vue';\nimport { Donut } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport type { BaseChartProps } from '.';\nimport { ChartSingleTooltip, defaultColors } from '@ui/registry/css/ui/chart';\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT;\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie';\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined;\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string;\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component;\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n});\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst category = computed(() => props.category as KeyOfT);\nconst index = computed(() => props.index as KeyOfT);\n\nconst isMounted = useMounted();\nconst activeSegmentKey = ref<string>();\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length));\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})));\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category];\n}, 0));\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-donut-chart\"\n    :class=\"$attrs.class\"\n  >\n    <VisSingleContainer\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n    >\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n\n<style>\n.sigma-ui-donut-chart {\n  display: flex;\n  width: 100%;\n  height: 12rem;\n  flex-direction: column;\n  align-items: flex-end;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/css/chart-line.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "LineChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts';\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue';\nimport { Axis, Line } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport type { BaseChartProps } from '.';\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@ui/registry/css/ui/chart';\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component;\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType;\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n});\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number];\n}>();\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst index = computed(() => props.index as KeyOfT);\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length));\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})));\n\nconst isMounted = useMounted();\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i);\n}\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-line-chart\"\n    :class=\"$attrs.class\"\n  >\n    <ChartLegend\n      v-if=\"showLegend\"\n      v-model:items=\"legendItems\"\n      @legend-item-click=\"handleLegendItemClick\"\n    />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair\n        v-if=\"showTooltip\"\n        :colors=\"colors\"\n        :items=\"legendItems\"\n        :index=\"index\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <template\n        v-for=\"(category, i) in categories\"\n        :key=\"category\"\n      >\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n\n<style>\n.sigma-ui-line-chart {\n  width: 100%;\n  height: 400px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts';\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue';\nimport { Axis, Line } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport type { BaseChartProps } from '.';\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@ui/registry/css/ui/chart';\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component;\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType;\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n});\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number];\n}>();\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst index = computed(() => props.index as KeyOfT);\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length));\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})));\n\nconst isMounted = useMounted();\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i);\n}\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-line-chart\"\n    :class=\"$attrs.class\"\n  >\n    <ChartLegend\n      v-if=\"showLegend\"\n      v-model:items=\"legendItems\"\n      @legend-item-click=\"handleLegendItemClick\"\n    />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair\n        v-if=\"showTooltip\"\n        :colors=\"colors\"\n        :items=\"legendItems\"\n        :index=\"index\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <template\n        v-for=\"(category, i) in categories\"\n        :key=\"category\"\n      >\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n\n<style>\n.sigma-ui-line-chart {\n  display: flex;\n  width: 100%;\n  height: 400px;\n  flex-direction: column;\n  align-items: flex-end;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/css/chart.json

@@ -20,7 +20,7 @@
     },
     {
       "name": "ChartTooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@ui/registry/css/ui/card';\n\ndefineProps<{\n  title?: string;\n  data: {\n    name: string;\n    color: string;\n    value: any;\n  }[];\n}>();\n</script>\n\n<template>\n  <Card class=\"sigma-ui-chart-tooltip\">\n    <CardHeader\n      v-if=\"title\"\n      class=\"sigma-ui-chart-tooltip__header\"\n    >\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"sigma-ui-chart-tooltip__content\">\n      <div\n        v-for=\"(item, key) in data\"\n        :key=\"key\"\n        class=\"sigma-ui-chart-tooltip__item\"\n      >\n        <div class=\"sigma-ui-chart-tooltip__item-label\">\n          <span class=\"sigma-ui-chart-tooltip__item-dot\">\n            <svg\n              width=\"100%\"\n              height=\"100%\"\n              viewBox=\"0 0 30 30\"\n            >\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"sigma-ui-chart-tooltip__item-value\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n\n<style>\n.sigma-ui-chart-tooltip {\n  font-size: 0.875rem;\n}\n\n.sigma-ui-chart-tooltip__header {\n  padding: 0.75rem;\n  border-bottom: 1px solid hsl(var(--border));\n}\n\n.sigma-ui-chart-tooltip__content {\n  padding: 0.75rem;\n  min-width: 180px;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.sigma-ui-chart-tooltip__item {\n  display: flex;\n  justify-content: space-between;\n}\n\n.sigma-ui-chart-tooltip__item-label {\n  display: flex;\n  align-items: center;\n}\n\n.sigma-ui-chart-tooltip__item-dot {\n  width: 0.625rem;\n  height: 0.625rem;\n  margin-right: 0.5rem;\n}\n\n.sigma-ui-chart-tooltip__item-value {\n  font-weight: 600;\n  margin-left: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@ui/registry/css/ui/card';\n\ndefineProps<{\n  title?: string;\n  data: {\n    name: string;\n    color: string;\n    value: any;\n  }[];\n}>();\n</script>\n\n<template>\n  <Card class=\"sigma-ui-chart-tooltip\">\n    <CardHeader\n      v-if=\"title\"\n      class=\"sigma-ui-chart-tooltip__header\"\n    >\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"sigma-ui-chart-tooltip__content\">\n      <div\n        v-for=\"(item, key) in data\"\n        :key=\"key\"\n        class=\"sigma-ui-chart-tooltip__item\"\n      >\n        <div class=\"sigma-ui-chart-tooltip__item-label\">\n          <span class=\"sigma-ui-chart-tooltip__item-dot\">\n            <svg\n              width=\"100%\"\n              height=\"100%\"\n              viewBox=\"0 0 30 30\"\n            >\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"sigma-ui-chart-tooltip__item-value\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n\n<style>\n.sigma-ui-chart-tooltip {\n  font-size: 0.875rem;\n}\n\n.sigma-ui-chart-tooltip__header {\n  padding: 0.75rem;\n  border-bottom: 1px solid hsl(var(--border));\n}\n\n.sigma-ui-chart-tooltip__content {\n  display: flex;\n  min-width: 180px;\n  flex-direction: column;\n  padding: 0.75rem;\n  gap: 0.25rem;\n}\n\n.sigma-ui-chart-tooltip__item {\n  display: flex;\n  justify-content: space-between;\n}\n\n.sigma-ui-chart-tooltip__item-label {\n  display: flex;\n  align-items: center;\n}\n\n.sigma-ui-chart-tooltip__item-dot {\n  width: 0.625rem;\n  height: 0.625rem;\n  margin-right: 0.5rem;\n}\n\n.sigma-ui-chart-tooltip__item-value {\n  margin-left: 1rem;\n  font-weight: 600;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/css/checkbox.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Checkbox.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';\nimport { CheckIcon } from 'lucide-vue-next';\n\ninterface Props extends CheckboxRootProps {\n  label?: string;\n  description?: string;\n  id?: string;\n}\n\nconst props = defineProps<Props>();\nconst emits = defineEmits<CheckboxRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-checkbox-wrapper\"\n    :class=\"[{ 'sigma-ui-checkbox-wrapper--flex-start': props.description }]\"\n  >\n    <CheckboxRoot\n      v-bind=\"forwarded\"\n      :id=\"(props.label && props.id) || forwarded.id\"\n      class=\"sigma-ui-checkbox\"\n    >\n      <transition name=\"fade-slide-top\">\n        <CheckboxIndicator class=\"sigma-ui-checkbox__indicator\">\n          <slot>\n            <CheckIcon class=\"sigma-ui-checkbox__icon\" />\n          </slot>\n        </CheckboxIndicator>\n      </transition>\n    </CheckboxRoot>\n    <div\n      v-if=\"props.label\"\n      class=\"sigma-ui-checkbox__content\"\n    >\n      <label\n        v-if=\"props.label\"\n        class=\"sigma-ui-checkbox__label\"\n        :for=\"props.id\"\n      >{{ props.label }}\n      </label>\n      <p\n        v-if=\"props.description\"\n        class=\"sigma-ui-checkbox__description\"\n      >\n        {{ props.description }}\n      </p>\n    </div>\n  </div>\n</template>\n\n<style>\n.sigma-ui-checkbox-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.sigma-ui-checkbox-wrapper--flex-start {\n  align-items: flex-start;\n}\n\n.sigma-ui-checkbox {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n  border-radius: var(--radius-xs);\n  border: 1px solid hsl(var(--primary));\n  background-color: hsl(var(--background));\n  overflow: hidden;\n}\n\n.sigma-ui-checkbox:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 2px hsl(var(--background)),\n    0 0 0 4px hsl(var(--ring));\n}\n\n.sigma-ui-checkbox:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.sigma-ui-checkbox[data-state=\"checked\"] {\n  background-color: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n\n.sigma-ui-checkbox__indicator {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  color: currentColor;\n}\n\n.sigma-ui-checkbox__content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  line-height: 1;\n}\n\n.sigma-ui-checkbox__label {\n  font-size: 0.875rem;\n  font-weight: 500;\n  line-height: 1;\n  user-select: none;\n}\n\n.sigma-ui-checkbox:disabled + .sigma-ui-checkbox__content .sigma-ui-checkbox__label,\n.sigma-ui-checkbox:disabled + .sigma-ui-checkbox__content .sigma-ui-checkbox__description {\n  opacity: 0.7;\n}\n\n.sigma-ui-checkbox__description {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  color: hsl(var(--muted-foreground));\n  user-select: none;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';\nimport { CheckIcon } from 'lucide-vue-next';\n\ninterface Props extends CheckboxRootProps {\n  label?: string;\n  description?: string;\n  id?: string;\n}\n\nconst props = defineProps<Props>();\nconst emits = defineEmits<CheckboxRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-checkbox-wrapper\"\n    :class=\"[{ 'sigma-ui-checkbox-wrapper--flex-start': props.description }]\"\n  >\n    <CheckboxRoot\n      v-bind=\"forwarded\"\n      :id=\"(props.label && props.id) || forwarded.id\"\n      class=\"sigma-ui-checkbox\"\n    >\n      <transition name=\"fade-slide-top\">\n        <CheckboxIndicator class=\"sigma-ui-checkbox__indicator\">\n          <slot>\n            <CheckIcon class=\"sigma-ui-checkbox__icon\" />\n          </slot>\n        </CheckboxIndicator>\n      </transition>\n    </CheckboxRoot>\n    <div\n      v-if=\"props.label\"\n      class=\"sigma-ui-checkbox__content\"\n    >\n      <label\n        v-if=\"props.label\"\n        class=\"sigma-ui-checkbox__label\"\n        :for=\"props.id\"\n      >{{ props.label }}\n      </label>\n      <p\n        v-if=\"props.description\"\n        class=\"sigma-ui-checkbox__description\"\n      >\n        {{ props.description }}\n      </p>\n    </div>\n  </div>\n</template>\n\n<style>\n.sigma-ui-checkbox-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.sigma-ui-checkbox-wrapper--flex-start {\n  align-items: flex-start;\n}\n\n.sigma-ui-checkbox {\n  overflow: hidden;\n  width: 1rem;\n  height: 1rem;\n  flex-shrink: 0;\n  border: 1px solid hsl(var(--primary));\n  border-radius: var(--radius-xs);\n  background-color: hsl(var(--background));\n}\n\n.sigma-ui-checkbox:focus-visible {\n  box-shadow:\n    0 0 0 2px hsl(var(--background)),\n    0 0 0 4px hsl(var(--ring));\n  outline: none;\n}\n\n.sigma-ui-checkbox:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.sigma-ui-checkbox[data-state=\"checked\"] {\n  background-color: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n\n.sigma-ui-checkbox__indicator {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n  color: currentcolor;\n}\n\n.sigma-ui-checkbox__content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  line-height: 1;\n}\n\n.sigma-ui-checkbox__label {\n  font-size: 0.875rem;\n  font-weight: 500;\n  line-height: 1;\n  user-select: none;\n}\n\n.sigma-ui-checkbox:disabled + .sigma-ui-checkbox__content .sigma-ui-checkbox__label,\n.sigma-ui-checkbox:disabled + .sigma-ui-checkbox__content .sigma-ui-checkbox__description {\n  opacity: 0.7;\n}\n\n.sigma-ui-checkbox__description {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  user-select: none;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/css/combobox.json

@@ -15,27 +15,27 @@
     },
     {
       "name": "ComboboxEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui';\nimport { ComboboxEmpty } from 'reka-ui';\n\nconst props = defineProps<ComboboxEmptyProps>();\n</script>\n\n<template>\n  <ComboboxEmpty\n    v-bind=\"{ ...props, ...$attrs }\"\n    :class=\"['sigma-ui-combobox-empty', $attrs.class]\"\n  >\n    <slot />\n  </ComboboxEmpty>\n</template>\n\n<style>\n.sigma-ui-combobox-empty {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n  text-align: center;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui';\nimport { ComboboxEmpty } from 'reka-ui';\n\nconst props = defineProps<ComboboxEmptyProps>();\n</script>\n\n<template>\n  <ComboboxEmpty\n    v-bind=\"{ ...props, ...$attrs }\"\n    :class=\"['sigma-ui-combobox-empty', $attrs.class]\"\n  >\n    <slot />\n  </ComboboxEmpty>\n</template>\n\n<style>\n.sigma-ui-combobox-empty {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  text-align: center;\n}\n</style>\n"
     },
     {
       "name": "ComboboxGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui';\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui';\n\nconst props = defineProps<ComboboxGroupProps & {\n  heading?: string;\n}>();\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"{ ...props, ...$attrs }\"\n    :class=\"['sigma-ui-combobox-group', $attrs.class]\"\n  >\n    <ComboboxLabel\n      v-if=\"heading\"\n      class=\"sigma-ui-combobox-group__heading\"\n    >\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n\n<style>\n.sigma-ui-combobox-group {\n  overflow: hidden;\n  padding: 0.25rem;\n  color: hsl(var(--foreground));\n}\n\n.sigma-ui-combobox-group [cmdk-group-heading] {\n  padding: 0.375rem 0.5rem;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  font-weight: 500;\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-combobox-group__heading {\n  padding: 0.375rem 0.5rem;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  font-weight: 500;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui';\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui';\n\nconst props = defineProps<ComboboxGroupProps & {\n  heading?: string;\n}>();\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"{ ...props, ...$attrs }\"\n    :class=\"['sigma-ui-combobox-group', $attrs.class]\"\n  >\n    <ComboboxLabel\n      v-if=\"heading\"\n      class=\"sigma-ui-combobox-group__heading\"\n    >\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n\n<style>\n.sigma-ui-combobox-group {\n  overflow: hidden;\n  padding: 0.25rem;\n  color: hsl(var(--foreground));\n}\n\n.sigma-ui-combobox-group [cmdk-group-heading] {\n  padding: 0.375rem 0.5rem;\n  color: hsl(var(--muted-foreground));\n  font-size: 0.75rem;\n  font-weight: 500;\n  line-height: 1rem;\n}\n\n.sigma-ui-combobox-group__heading {\n  padding: 0.375rem 0.5rem;\n  color: hsl(var(--muted-foreground));\n  font-size: 0.75rem;\n  font-weight: 500;\n  line-height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "ComboboxInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { reactiveOmit } from '@vueuse/core';\nimport { ComboboxInput, type ComboboxInputEmits, type ComboboxInputProps, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class'];\n}>();\n\nconst emits = defineEmits<ComboboxInputEmits>();\n\nconst delegatedProps = reactiveOmit(props, 'class');\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits);\n</script>\n\n<template>\n  <ComboboxInput\n    v-bind=\"forwarded\"\n    :class=\"['sigma-ui-combobox-input', props.class]\"\n  >\n    <slot />\n  </ComboboxInput>\n</template>\n\n<style>\n.sigma-ui-combobox-input {\n  display: flex;\n  height: 2.25rem;\n  width: 100%;\n  border-radius: 0.375rem;\n  border: 1px solid hsl(var(--input));\n  background-color: transparent;\n  padding: 0.25rem 0.75rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.sigma-ui-combobox-input:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));\n}\n\n.sigma-ui-combobox-input:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.sigma-ui-combobox-input::file-selector-button {\n  border: 0;\n  background-color: transparent;\n  font-size: 0.875rem;\n  font-weight: 500;\n}\n\n.sigma-ui-combobox-input::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { reactiveOmit } from '@vueuse/core';\nimport { ComboboxInput, type ComboboxInputEmits, type ComboboxInputProps, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class'];\n}>();\n\nconst emits = defineEmits<ComboboxInputEmits>();\n\nconst delegatedProps = reactiveOmit(props, 'class');\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits);\n</script>\n\n<template>\n  <ComboboxInput\n    v-bind=\"forwarded\"\n    :class=\"['sigma-ui-combobox-input', props.class]\"\n  >\n    <slot />\n  </ComboboxInput>\n</template>\n\n<style>\n.sigma-ui-combobox-input {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: 0.25rem 0.75rem;\n  border: 1px solid hsl(var(--input));\n  border-radius: 0.375rem;\n  background-color: transparent;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  transition-duration: 150ms;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-combobox-input:focus-visible {\n  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));\n  outline: none;\n}\n\n.sigma-ui-combobox-input:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.sigma-ui-combobox-input::file-selector-button {\n  border: 0;\n  background-color: transparent;\n  font-size: 0.875rem;\n  font-weight: 500;\n}\n\n.sigma-ui-combobox-input::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
     },
     {
       "name": "ComboboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui';\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<ComboboxItemProps>();\nconst emits = defineEmits<ComboboxItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"{ ...forwarded, ...$attrs }\"\n    :class=\"['sigma-ui-combobox-item', $attrs.class]\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n\n<style>\n.sigma-ui-combobox-item {\n  position: relative;\n  display: flex;\n  cursor: default;\n  gap: 0.5rem;\n  user-select: none;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: 0.125rem;\n  padding: 0.375rem 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n}\n\n.sigma-ui-combobox-item[data-highlighted] {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-combobox-item[data-disabled] {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.sigma-ui-combobox-item svg {\n  width: 1rem;\n  height: 1rem;\n  flex-shrink: 0;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui';\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<ComboboxItemProps>();\nconst emits = defineEmits<ComboboxItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"{ ...forwarded, ...$attrs }\"\n    :class=\"['sigma-ui-combobox-item', $attrs.class]\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n\n<style>\n.sigma-ui-combobox-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.375rem 0.5rem;\n  border-radius: 0.125rem;\n  cursor: default;\n  font-size: 0.875rem;\n  gap: 0.5rem;\n  line-height: 1.25rem;\n  outline: none;\n  user-select: none;\n}\n\n.sigma-ui-combobox-item[data-highlighted] {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-combobox-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-combobox-item svg {\n  width: 1rem;\n  height: 1rem;\n  flex-shrink: 0;\n}\n</style>\n"
     },
     {
       "name": "ComboboxList.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui';\nimport { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from 'reka-ui';\n\nconst props = withDefaults(defineProps<ComboboxContentProps>(), {\n  position: 'popper',\n  align: 'center',\n  sideOffset: 4,\n});\nconst emits = defineEmits<ComboboxContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ComboboxPortal>\n    <ComboboxContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"['sigma-ui-combobox-list', $attrs.class]\"\n    >\n      <ComboboxViewport>\n        <slot />\n      </ComboboxViewport>\n    </ComboboxContent>\n  </ComboboxPortal>\n</template>\n\n<style>\n.sigma-ui-combobox-list {\n  position: relative;\n  z-index: 50;\n  width: 200px;\n  border-radius: var(--radius-md);\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--popover));\n  color: hsl(var(--popover-foreground));\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  transform-origin: var(--reka-popover-content-transform-origin);\n}\n\n.sigma-ui-combobox-list[data-state=\"open\"][data-side=\"bottom\"] {\n  animation: slideFromTop 150ms ease-out;\n}\n\n.sigma-ui-combobox-list[data-state=\"closed\"][data-side=\"bottom\"] {\n  animation: slideToTop 150ms ease-in;\n}\n\n.sigma-ui-combobox-list[data-state=\"open\"][data-side=\"top\"] {\n  animation: slideFromBottom 150ms ease-out;\n}\n\n.sigma-ui-combobox-list[data-state=\"closed\"][data-side=\"top\"] {\n  animation: slideToBottom 150ms ease-in;\n}\n\n.sigma-ui-combobox-list[data-state=\"open\"][data-side=\"left\"] {\n  animation: slideFromRight 150ms ease-out;\n}\n\n.sigma-ui-combobox-list[data-state=\"closed\"][data-side=\"left\"] {\n  animation: slideToRight 150ms ease-in;\n}\n\n.sigma-ui-combobox-list[data-state=\"open\"][data-side=\"right\"] {\n  animation: slideFromLeft 150ms ease-out;\n}\n\n.sigma-ui-combobox-list[data-state=\"closed\"][data-side=\"right\"] {\n  animation: slideToLeft 150ms ease-in;\n}\n\n@keyframes slideFromTop {\n  from {\n    transform: translateY(-1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n  to {\n    transform: translateY(0) scaleY(1);\n    filter: blur(0px);\n  }\n}\n\n@keyframes slideToTop {\n  from {\n    transform: translateY(0) scaleY(1);\n    filter: blur(0px);\n  }\n  to {\n    transform: translateY(-1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n}\n\n@keyframes slideFromBottom {\n  from {\n    transform: translateY(1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n  to {\n    transform: translateY(0) scaleY(1);\n    filter: blur(0px);\n  }\n}\n\n@keyframes slideToBottom {\n  from {\n    transform: translateY(0) scaleY(1);\n    filter: blur(0px);\n  }\n  to {\n    transform: translateY(1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n}\n\n@keyframes slideFromLeft {\n  from {\n    transform: translateX(-1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n  to {\n    transform: translateX(0) scaleY(1);\n    filter: blur(0px);\n  }\n}\n\n@keyframes slideToLeft {\n  from {\n    transform: translateX(0) scaleY(1);\n    filter: blur(0px);\n  }\n  to {\n    transform: translateX(-1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n}\n\n@keyframes slideFromRight {\n  from {\n    transform: translateX(1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n  to {\n    transform: translateX(0) scaleY(1);\n    filter: blur(0px);\n  }\n}\n\n@keyframes slideToRight {\n  from {\n    transform: translateX(0) scaleY(1);\n    filter: blur(0px);\n  }\n  to {\n    transform: translateX(1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui';\nimport { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from 'reka-ui';\n\nconst props = withDefaults(defineProps<ComboboxContentProps>(), {\n  position: 'popper',\n  align: 'center',\n  sideOffset: 4,\n});\nconst emits = defineEmits<ComboboxContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ComboboxPortal>\n    <ComboboxContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"['sigma-ui-combobox-list', $attrs.class]\"\n    >\n      <ComboboxViewport>\n        <slot />\n      </ComboboxViewport>\n    </ComboboxContent>\n  </ComboboxPortal>\n</template>\n\n<style>\n.sigma-ui-combobox-list {\n  position: relative;\n  z-index: 50;\n  width: 200px;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  background-color: hsl(var(--popover));\n  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);\n  color: hsl(var(--popover-foreground));\n  transform-origin: var(--reka-popover-content-transform-origin);\n}\n\n.sigma-ui-combobox-list[data-state=\"open\"][data-side=\"bottom\"] {\n  animation: slide-from-top 150ms ease-out;\n}\n\n.sigma-ui-combobox-list[data-state=\"closed\"][data-side=\"bottom\"] {\n  animation: slide-to-top 150ms ease-in;\n}\n\n.sigma-ui-combobox-list[data-state=\"open\"][data-side=\"top\"] {\n  animation: slide-from-bottom 150ms ease-out;\n}\n\n.sigma-ui-combobox-list[data-state=\"closed\"][data-side=\"top\"] {\n  animation: slide-to-bottom 150ms ease-in;\n}\n\n.sigma-ui-combobox-list[data-state=\"open\"][data-side=\"left\"] {\n  animation: slide-from-right 150ms ease-out;\n}\n\n.sigma-ui-combobox-list[data-state=\"closed\"][data-side=\"left\"] {\n  animation: slide-to-right 150ms ease-in;\n}\n\n.sigma-ui-combobox-list[data-state=\"open\"][data-side=\"right\"] {\n  animation: slide-from-left 150ms ease-out;\n}\n\n.sigma-ui-combobox-list[data-state=\"closed\"][data-side=\"right\"] {\n  animation: slide-to-left 150ms ease-in;\n}\n\n@keyframes slide-from-top {\n  from {\n    filter: blur(4px);\n    transform: translateY(-1rem) scaleY(0.98);\n  }\n\n  to {\n    filter: blur(0);\n    transform: translateY(0) scaleY(1);\n  }\n}\n\n@keyframes slide-to-top {\n  from {\n    filter: blur(0);\n    transform: translateY(0) scaleY(1);\n  }\n\n  to {\n    filter: blur(4px);\n    transform: translateY(-1rem) scaleY(0.98);\n  }\n}\n\n@keyframes slide-from-bottom {\n  from {\n    filter: blur(4px);\n    transform: translateY(1rem) scaleY(0.98);\n  }\n\n  to {\n    filter: blur(0);\n    transform: translateY(0) scaleY(1);\n  }\n}\n\n@keyframes slide-to-bottom {\n  from {\n    filter: blur(0);\n    transform: translateY(0) scaleY(1);\n  }\n\n  to {\n    filter: blur(4px);\n    transform: translateY(1rem) scaleY(0.98);\n  }\n}\n\n@keyframes slide-from-left {\n  from {\n    filter: blur(4px);\n    transform: translateX(-1rem) scaleY(0.98);\n  }\n\n  to {\n    filter: blur(0);\n    transform: translateX(0) scaleY(1);\n  }\n}\n\n@keyframes slide-to-left {\n  from {\n    filter: blur(0);\n    transform: translateX(0) scaleY(1);\n  }\n\n  to {\n    filter: blur(4px);\n    transform: translateX(-1rem) scaleY(0.98);\n  }\n}\n\n@keyframes slide-from-right {\n  from {\n    filter: blur(4px);\n    transform: translateX(1rem) scaleY(0.98);\n  }\n\n  to {\n    filter: blur(0);\n    transform: translateX(0) scaleY(1);\n  }\n}\n\n@keyframes slide-to-right {\n  from {\n    filter: blur(0);\n    transform: translateX(0) scaleY(1);\n  }\n\n  to {\n    filter: blur(4px);\n    transform: translateX(1rem) scaleY(0.98);\n  }\n}\n</style>\n"
     },
     {
       "name": "ComboboxSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui';\nimport { ComboboxSeparator } from 'reka-ui';\n\nconst props = defineProps<ComboboxSeparatorProps>();\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"{ ...props, ...$attrs }\"\n    :class=\"['sigma-ui-combobox-separator', $attrs.class]\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n\n<style>\n.sigma-ui-combobox-separator {\n  margin-left: -0.25rem;\n  margin-right: -0.25rem;\n  height: 1px;\n  background-color: hsl(var(--border));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui';\nimport { ComboboxSeparator } from 'reka-ui';\n\nconst props = defineProps<ComboboxSeparatorProps>();\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"{ ...props, ...$attrs }\"\n    :class=\"['sigma-ui-combobox-separator', $attrs.class]\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n\n<style>\n.sigma-ui-combobox-separator {\n  height: 1px;\n  margin-right: -0.25rem;\n  margin-left: -0.25rem;\n  background-color: hsl(var(--border));\n}\n</style>\n"
     },
     {
       "name": "ComboboxTrigger.vue",

package/__generated/registry-schemes/style-system/css/command.json

@@ -5,39 +5,39 @@
   "files": [
     {
       "name": "Command.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui';\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui';\n\nconst props = withDefaults(defineProps<ComboboxRootProps>(), {\n  open: true,\n  modelValue: '',\n});\n\nconst emits = defineEmits<ComboboxRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-command\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n\n<style>\n.sigma-ui-command {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: var(--radius-md);\n  background-color: hsl(var(--popover));\n  color: hsl(var(--popover-foreground));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui';\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui';\n\nconst props = withDefaults(defineProps<ComboboxRootProps>(), {\n  open: true,\n  modelValue: '',\n});\n\nconst emits = defineEmits<ComboboxRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-command\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n\n<style>\n.sigma-ui-command {\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  border-radius: var(--radius-md);\n  background-color: hsl(var(--popover));\n  color: hsl(var(--popover-foreground));\n}\n</style>\n"
     },
     {
       "name": "CommandDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useForwardPropsEmits } from 'reka-ui';\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui';\nimport Command from './Command.vue';\nimport { Dialog, DialogContent } from '@ui/registry/css/ui/dialog';\n\nconst props = defineProps<DialogRootProps>();\nconst emits = defineEmits<DialogRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"sigma-ui-command-dialog\">\n      <Command class=\"sigma-ui-command-dialog__command\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n\n<style>\n.sigma-ui-command-dialog {\n  overflow: hidden;\n  padding: 0;\n  box-shadow: var(--shadow-lg);\n}\n\n.sigma-ui-command-dialog__command [cmdk-group-heading] {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  font-weight: 500;\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-command-dialog__command [cmdk-group]:not([hidden]) ~ [cmdk-group] {\n  padding-top: 0;\n}\n\n.sigma-ui-command-dialog__command [cmdk-group] {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.sigma-ui-command-dialog__command [cmdk-input-wrapper] svg {\n  height: 1.25rem;\n  width: 1.25rem;\n}\n\n.sigma-ui-command-dialog__command [cmdk-input] {\n  height: 3rem;\n}\n\n.sigma-ui-command-dialog__command [cmdk-item] {\n  padding: 0.75rem 0.5rem;\n}\n\n.sigma-ui-command-dialog__command [cmdk-item] svg {\n  height: 1.25rem;\n  width: 1.25rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { useForwardPropsEmits } from 'reka-ui';\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui';\nimport Command from './Command.vue';\nimport { Dialog, DialogContent } from '@ui/registry/css/ui/dialog';\n\nconst props = defineProps<DialogRootProps>();\nconst emits = defineEmits<DialogRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"sigma-ui-command-dialog\">\n      <Command class=\"sigma-ui-command-dialog__command\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n\n<style>\n.sigma-ui-command-dialog {\n  overflow: hidden;\n  padding: 0;\n  box-shadow: var(--shadow-lg);\n}\n\n.sigma-ui-command-dialog__command [cmdk-group-heading] {\n  padding-right: 0.5rem;\n  padding-left: 0.5rem;\n  color: hsl(var(--muted-foreground));\n  font-weight: 500;\n}\n\n.sigma-ui-command-dialog__command [cmdk-group]:not([hidden]) ~ [cmdk-group] {\n  padding-top: 0;\n}\n\n.sigma-ui-command-dialog__command [cmdk-group] {\n  padding-right: 0.5rem;\n  padding-left: 0.5rem;\n}\n\n.sigma-ui-command-dialog__command [cmdk-input-wrapper] svg {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.sigma-ui-command-dialog__command [cmdk-input] {\n  height: 3rem;\n}\n\n.sigma-ui-command-dialog__command [cmdk-item] {\n  padding: 0.75rem 0.5rem;\n}\n\n.sigma-ui-command-dialog__command [cmdk-item] svg {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n</style>\n"
     },
     {
       "name": "CommandEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui';\nimport { ComboboxEmpty } from 'reka-ui';\n\nconst props = defineProps<ComboboxEmptyProps>();\n</script>\n\n<template>\n  <ComboboxEmpty\n    v-bind=\"props\"\n    class=\"sigma-ui-command-empty\"\n  >\n    <slot />\n  </ComboboxEmpty>\n</template>\n\n<style>\n.sigma-ui-command-empty {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n  text-align: center;\n  font-size: var(--text-sm);\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui';\nimport { ComboboxEmpty } from 'reka-ui';\n\nconst props = defineProps<ComboboxEmptyProps>();\n</script>\n\n<template>\n  <ComboboxEmpty\n    v-bind=\"props\"\n    class=\"sigma-ui-command-empty\"\n  >\n    <slot />\n  </ComboboxEmpty>\n</template>\n\n<style>\n.sigma-ui-command-empty {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n  font-size: var(--text-sm);\n  text-align: center;\n}\n</style>\n"
     },
     {
       "name": "CommandGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui';\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui';\n\nconst props = defineProps<ComboboxGroupProps & {\n  heading?: string;\n}>();\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"props\"\n    class=\"sigma-ui-command-group text-xs\"\n  >\n    <ComboboxLabel\n      v-if=\"heading\"\n      class=\"sigma-ui-command-group__heading\"\n    >\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n\n<style>\n.sigma-ui-command-group {\n  overflow: hidden;\n  padding: 0.25rem;\n  color: hsl(var(--foreground));\n}\n\n.sigma-ui-command-group [cmdk-group-heading] {\n  padding: 0.375rem 0.5rem;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  font-weight: 500;\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-command-group__heading {\n  padding: 0.375rem 0.5rem;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  font-weight: 500;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui';\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui';\n\nconst props = defineProps<ComboboxGroupProps & {\n  heading?: string;\n}>();\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"props\"\n    class=\"sigma-ui-command-group text-xs\"\n  >\n    <ComboboxLabel\n      v-if=\"heading\"\n      class=\"sigma-ui-command-group__heading\"\n    >\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n\n<style>\n.sigma-ui-command-group {\n  overflow: hidden;\n  padding: 0.25rem;\n  color: hsl(var(--foreground));\n}\n\n.sigma-ui-command-group [cmdk-group-heading] {\n  padding: 0.375rem 0.5rem;\n  color: hsl(var(--muted-foreground));\n  font-size: 0.75rem;\n  font-weight: 500;\n  line-height: 1rem;\n}\n\n.sigma-ui-command-group__heading {\n  padding: 0.375rem 0.5rem;\n  color: hsl(var(--muted-foreground));\n  font-size: 0.75rem;\n  font-weight: 500;\n  line-height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "CommandInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SearchIcon } from 'lucide-vue-next';\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = defineProps<ComboboxInputProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-command-input\"\n    cmdk-input-wrapper\n  >\n    <SearchIcon class=\"sigma-ui-command-input__icon\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      class=\"sigma-ui-command-input__field\"\n    />\n  </div>\n</template>\n\n<style>\n.sigma-ui-command-input {\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid hsl(var(--border));\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.sigma-ui-command-input__icon {\n  margin-right: 0.5rem;\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n  opacity: 0.5;\n}\n\n.sigma-ui-command-input__field {\n  display: flex;\n  height: 2.75rem;\n  width: 100%;\n  border-radius: var(--radius-md);\n  background-color: transparent;\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n}\n\n.sigma-ui-command-input__field::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-command-input__field:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SearchIcon } from 'lucide-vue-next';\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = defineProps<ComboboxInputProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-command-input\"\n    cmdk-input-wrapper\n  >\n    <SearchIcon class=\"sigma-ui-command-input__icon\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      class=\"sigma-ui-command-input__field\"\n    />\n  </div>\n</template>\n\n<style>\n.sigma-ui-command-input {\n  display: flex;\n  align-items: center;\n  padding-right: 0.75rem;\n  padding-left: 0.75rem;\n  border-bottom: 1px solid hsl(var(--border));\n}\n\n.sigma-ui-command-input__icon {\n  width: 1rem;\n  height: 1rem;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n  opacity: 0.5;\n}\n\n.sigma-ui-command-input__field {\n  display: flex;\n  width: 100%;\n  height: 2.75rem;\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n  border-radius: var(--radius-md);\n  background-color: transparent;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n}\n\n.sigma-ui-command-input__field::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-command-input__field:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n</style>\n"
     },
     {
       "name": "CommandItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui';\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<ComboboxItemProps>();\nconst emits = defineEmits<ComboboxItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-command-item\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n\n<style>\n.sigma-ui-command-item {\n  position: relative;\n  display: flex;\n  cursor: default;\n  user-select: none;\n  align-items: center;\n  border-radius: var(--radius-sm);\n  padding: 0.375rem 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n}\n\n.sigma-ui-command-item[data-highlighted] {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-command-item[data-disabled] {\n  pointer-events: none;\n  opacity: 0.5;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui';\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<ComboboxItemProps>();\nconst emits = defineEmits<ComboboxItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-command-item\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n\n<style>\n.sigma-ui-command-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  user-select: none;\n}\n\n.sigma-ui-command-item[data-highlighted] {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-command-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n</style>\n"
     },
     {
       "name": "CommandList.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ListboxContentProps } from 'reka-ui';\nimport { ListboxContent, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<ListboxContentProps>();\n\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <ListboxContent\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-command-list\"\n  >\n    <div\n      role=\"presentation\"\n      class=\"sigma-ui-command-list__content\"\n    >\n      <slot />\n    </div>\n  </ListboxContent>\n</template>\n\n<style>\n.sigma-ui-command-list {\n  max-height: 300px;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.sigma-ui-command-list__content {\n  position: relative;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ListboxContentProps } from 'reka-ui';\nimport { ListboxContent, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<ListboxContentProps>();\n\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <ListboxContent\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-command-list\"\n  >\n    <div\n      role=\"presentation\"\n      class=\"sigma-ui-command-list__content\"\n    >\n      <slot />\n    </div>\n  </ListboxContent>\n</template>\n\n<style>\n.sigma-ui-command-list {\n  overflow: hidden auto;\n  max-height: 300px;\n}\n\n.sigma-ui-command-list__content {\n  position: relative;\n}\n</style>\n"
     },
     {
       "name": "CommandSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui';\nimport { ComboboxSeparator } from 'reka-ui';\n\nconst props = defineProps<ComboboxSeparatorProps>();\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"props\"\n    class=\"sigma-ui-command-separator\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n\n<style>\n.sigma-ui-command-separator {\n  margin-left: -0.25rem;\n  margin-right: -0.25rem;\n  height: 1px;\n  background-color: hsl(var(--border));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui';\nimport { ComboboxSeparator } from 'reka-ui';\n\nconst props = defineProps<ComboboxSeparatorProps>();\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"props\"\n    class=\"sigma-ui-command-separator\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n\n<style>\n.sigma-ui-command-separator {\n  height: 1px;\n  margin-right: -0.25rem;\n  margin-left: -0.25rem;\n  background-color: hsl(var(--border));\n}\n</style>\n"
     },
     {
       "name": "CommandShortcut.vue",
-      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <span\n    class=\"sigma-ui-command-shortcut\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </span>\n</template>\n\n<style>\n.sigma-ui-command-shortcut {\n  margin-left: auto;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  letter-spacing: 0.1em;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <span\n    class=\"sigma-ui-command-shortcut\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </span>\n</template>\n\n<style>\n.sigma-ui-command-shortcut {\n  margin-left: auto;\n  color: hsl(var(--muted-foreground));\n  font-size: 0.75rem;\n  letter-spacing: 0.1em;\n  line-height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/css/context-menu.json

@@ -9,11 +9,11 @@
     },
     {
       "name": "ContextMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { CheckIcon } from 'lucide-vue-next';\n\nconst props = defineProps<ContextMenuCheckboxItemProps>();\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-context-menu-checkbox-item\"\n  >\n    <span class=\"sigma-ui-context-menu-checkbox-item__indicator\">\n      <ContextMenuItemIndicator>\n        <CheckIcon class=\"sigma-ui-context-menu-checkbox-item__icon\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n\n<style>\n.sigma-ui-context-menu-checkbox-item {\n  position: relative;\n  display: flex;\n  cursor: default;\n  user-select: none;\n  align-items: center;\n  border-radius: var(--radius-sm);\n  padding: 0.375rem 0.5rem 0.375rem 2rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n}\n\n.sigma-ui-context-menu-checkbox-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-context-menu-checkbox-item[data-disabled] {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.sigma-ui-context-menu-checkbox-item__indicator {\n  position: absolute;\n  left: 0.5rem;\n  display: flex;\n  height: 0.875rem;\n  width: 0.875rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-context-menu-checkbox-item__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { CheckIcon } from 'lucide-vue-next';\n\nconst props = defineProps<ContextMenuCheckboxItemProps>();\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-context-menu-checkbox-item\"\n  >\n    <span class=\"sigma-ui-context-menu-checkbox-item__indicator\">\n      <ContextMenuItemIndicator>\n        <CheckIcon class=\"sigma-ui-context-menu-checkbox-item__icon\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n\n<style>\n.sigma-ui-context-menu-checkbox-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem 0.375rem 2rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  user-select: none;\n}\n\n.sigma-ui-context-menu-checkbox-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-context-menu-checkbox-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-context-menu-checkbox-item__indicator {\n  position: absolute;\n  left: 0.5rem;\n  display: flex;\n  width: 0.875rem;\n  height: 0.875rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-context-menu-checkbox-item__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "ContextMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n\n} from 'reka-ui';\n\nconst props = defineProps<ContextMenuContentProps>();\nconst emits = defineEmits<ContextMenuContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      class=\"sigma-ui-context-menu-content\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n\n<style>\n.sigma-ui-context-menu-content {\n  z-index: 50;\n  min-width: 8rem;\n  overflow: hidden;\n  border-radius: var(--radius-md);\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--popover));\n  padding: 0.25rem;\n  color: hsl(var(--popover-foreground));\n  box-shadow: var(--shadow-md);\n  transform-origin: var(--reka-context-menu-content-transform-origin);\n  animation: fadeOut 100ms ease-in forwards;\n}\n\n.sigma-ui-context-menu-content[data-state=\"open\"] {\n  animation: fadeIn 200ms ease-out;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n\n} from 'reka-ui';\n\nconst props = defineProps<ContextMenuContentProps>();\nconst emits = defineEmits<ContextMenuContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      class=\"sigma-ui-context-menu-content\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n\n<style>\n.sigma-ui-context-menu-content {\n  z-index: 50;\n  overflow: hidden;\n  min-width: 8rem;\n  padding: 0.25rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  animation: fadeOut 100ms ease-in forwards;\n  background-color: hsl(var(--popover));\n  box-shadow: var(--shadow-md);\n  color: hsl(var(--popover-foreground));\n  transform-origin: var(--reka-context-menu-content-transform-origin);\n}\n\n.sigma-ui-context-menu-content[data-state=\"open\"] {\n  animation: fade-in 200ms ease-out;\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n</style>\n"
     },
     {
       "name": "ContextMenuGroup.vue",
@@ -21,11 +21,11 @@
     },
     {
       "name": "ContextMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<ContextMenuItemProps & { inset?: boolean }>();\nconst emits = defineEmits<ContextMenuItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-context-menu-item\"\n    :class=\"[{ 'sigma-ui-context-menu-item--inset': inset }]\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n\n<style>\n.sigma-ui-context-menu-item {\n  position: relative;\n  display: flex;\n  cursor: default;\n  user-select: none;\n  align-items: center;\n  border-radius: var(--radius-sm);\n  padding: 0.375rem 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n}\n\n.sigma-ui-context-menu-item--inset {\n  padding-left: 2rem;\n}\n\n.sigma-ui-context-menu-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-context-menu-item[data-disabled] {\n  pointer-events: none;\n  opacity: 0.5;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<ContextMenuItemProps & { inset?: boolean }>();\nconst emits = defineEmits<ContextMenuItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-context-menu-item\"\n    :class=\"[{ 'sigma-ui-context-menu-item--inset': inset }]\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n\n<style>\n.sigma-ui-context-menu-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  user-select: none;\n}\n\n.sigma-ui-context-menu-item--inset {\n  padding-left: 2rem;\n}\n\n.sigma-ui-context-menu-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-context-menu-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n</style>\n"
     },
     {
       "name": "ContextMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui';\n\nconst props = defineProps<ContextMenuLabelProps & { inset?: boolean }>();\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"props\"\n    class=\"sigma-ui-context-menu-label\"\n    :class=\"[{ 'sigma-ui-context-menu-label--inset': inset }]\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n\n<style>\n.sigma-ui-context-menu-label {\n  padding: 0.375rem 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  font-weight: 600;\n  color: hsl(var(--foreground));\n}\n\n.sigma-ui-context-menu-label--inset {\n  padding-left: 2rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui';\n\nconst props = defineProps<ContextMenuLabelProps & { inset?: boolean }>();\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"props\"\n    class=\"sigma-ui-context-menu-label\"\n    :class=\"[{ 'sigma-ui-context-menu-label--inset': inset }]\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n\n<style>\n.sigma-ui-context-menu-label {\n  padding: 0.375rem 0.5rem;\n  color: hsl(var(--foreground));\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.25rem;\n}\n\n.sigma-ui-context-menu-label--inset {\n  padding-left: 2rem;\n}\n</style>\n"
     },
     {
       "name": "ContextMenuPortal.vue",
@@ -37,15 +37,15 @@
     },
     {
       "name": "ContextMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { CircleIcon } from 'lucide-vue-next';\n\nconst props = defineProps<ContextMenuRadioItemProps>();\nconst emits = defineEmits<ContextMenuRadioItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-context-menu-radio-item\"\n  >\n    <span class=\"sigma-ui-context-menu-radio-item__indicator\">\n      <ContextMenuItemIndicator>\n        <CircleIcon class=\"sigma-ui-context-menu-radio-item__icon\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n\n<style>\n.sigma-ui-context-menu-radio-item {\n  position: relative;\n  display: flex;\n  cursor: default;\n  user-select: none;\n  align-items: center;\n  border-radius: var(--radius-sm);\n  padding: 0.375rem 0.5rem 0.375rem 2rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n}\n\n.sigma-ui-context-menu-radio-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-context-menu-radio-item[data-disabled] {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.sigma-ui-context-menu-radio-item__indicator {\n  position: absolute;\n  left: 0.5rem;\n  display: flex;\n  height: 0.875rem;\n  width: 0.875rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-context-menu-radio-item__icon {\n  height: 0.5rem;\n  width: 0.5rem;\n  fill: currentColor;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { CircleIcon } from 'lucide-vue-next';\n\nconst props = defineProps<ContextMenuRadioItemProps>();\nconst emits = defineEmits<ContextMenuRadioItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-context-menu-radio-item\"\n  >\n    <span class=\"sigma-ui-context-menu-radio-item__indicator\">\n      <ContextMenuItemIndicator>\n        <CircleIcon class=\"sigma-ui-context-menu-radio-item__icon\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n\n<style>\n.sigma-ui-context-menu-radio-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem 0.375rem 2rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  user-select: none;\n}\n\n.sigma-ui-context-menu-radio-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-context-menu-radio-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-context-menu-radio-item__indicator {\n  position: absolute;\n  left: 0.5rem;\n  display: flex;\n  width: 0.875rem;\n  height: 0.875rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-context-menu-radio-item__icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  fill: currentcolor;\n}\n</style>\n"
     },
     {
       "name": "ContextMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui';\n\nconst props = defineProps<ContextMenuSeparatorProps>();\n</script>\n\n<template>\n  <ContextMenuSeparator\n    v-bind=\"props\"\n    class=\"sigma-ui-context-menu-separator\"\n  />\n</template>\n\n<style>\n.sigma-ui-context-menu-separator {\n  margin: 0.25rem -0.25rem;\n  height: 1px;\n  background-color: hsl(var(--border));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui';\n\nconst props = defineProps<ContextMenuSeparatorProps>();\n</script>\n\n<template>\n  <ContextMenuSeparator\n    v-bind=\"props\"\n    class=\"sigma-ui-context-menu-separator\"\n  />\n</template>\n\n<style>\n.sigma-ui-context-menu-separator {\n  height: 1px;\n  margin: 0.25rem -0.25rem;\n  background-color: hsl(var(--border));\n}\n</style>\n"
     },
     {
       "name": "ContextMenuShortcut.vue",
-      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <span\n    class=\"sigma-ui-context-menu-shortcut\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </span>\n</template>\n\n<style>\n.sigma-ui-context-menu-shortcut {\n  margin-left: auto;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  letter-spacing: 0.1em;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <span\n    class=\"sigma-ui-context-menu-shortcut\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </span>\n</template>\n\n<style>\n.sigma-ui-context-menu-shortcut {\n  margin-left: auto;\n  color: hsl(var(--muted-foreground));\n  font-size: 0.75rem;\n  letter-spacing: 0.1em;\n  line-height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "ContextMenuSub.vue",
@@ -53,11 +53,11 @@
     },
     {
       "name": "ContextMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSubContent,\n  type ContextMenuSubContentEmits,\n  type ContextMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<ContextMenuSubContentProps>();\nconst emits = defineEmits<ContextMenuSubContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-context-menu-sub-content\"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n\n<style>\n.sigma-ui-context-menu-sub-content {\n  z-index: 50;\n  min-width: 8rem;\n  overflow: hidden;\n  border-radius: var(--radius-md);\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--popover));\n  padding: 0.25rem;\n  color: hsl(var(--popover-foreground));\n  box-shadow: var(--shadow-md);\n  transform-origin: var(--reka-context-menu-content-transform-origin);\n  animation: fadeOut 100ms ease-in forwards;\n}\n\n.sigma-ui-context-menu-sub-content[data-state=\"open\"] {\n  animation: fadeIn 200ms ease-out;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSubContent,\n  type ContextMenuSubContentEmits,\n  type ContextMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<ContextMenuSubContentProps>();\nconst emits = defineEmits<ContextMenuSubContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-context-menu-sub-content\"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n\n<style>\n.sigma-ui-context-menu-sub-content {\n  z-index: 50;\n  overflow: hidden;\n  min-width: 8rem;\n  padding: 0.25rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  animation: fadeOut 100ms ease-in forwards;\n  background-color: hsl(var(--popover));\n  box-shadow: var(--shadow-md);\n  color: hsl(var(--popover-foreground));\n  transform-origin: var(--reka-context-menu-content-transform-origin);\n}\n\n.sigma-ui-context-menu-sub-content[data-state=\"open\"] {\n  animation: fade-in 200ms ease-out;\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n</style>\n"
     },
     {
       "name": "ContextMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui';\nimport { ChevronRightIcon } from 'lucide-vue-next';\n\nconst props = defineProps<ContextMenuSubTriggerProps & { inset?: boolean }>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-context-menu-sub-trigger\"\n    :class=\"[{ 'sigma-ui-context-menu-sub-trigger--inset': inset }]\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"sigma-ui-context-menu-sub-trigger__icon\" />\n  </ContextMenuSubTrigger>\n</template>\n\n<style>\n.sigma-ui-context-menu-sub-trigger {\n  display: flex;\n  cursor: default;\n  user-select: none;\n  align-items: center;\n  border-radius: var(--radius-sm);\n  padding: 0.375rem 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n}\n\n.sigma-ui-context-menu-sub-trigger:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-context-menu-sub-trigger[data-state=\"open\"] {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-context-menu-sub-trigger--inset {\n  padding-left: 2rem;\n}\n\n.sigma-ui-context-menu-sub-trigger__icon {\n  margin-left: auto;\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui';\nimport { ChevronRightIcon } from 'lucide-vue-next';\n\nconst props = defineProps<ContextMenuSubTriggerProps & { inset?: boolean }>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-context-menu-sub-trigger\"\n    :class=\"[{ 'sigma-ui-context-menu-sub-trigger--inset': inset }]\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"sigma-ui-context-menu-sub-trigger__icon\" />\n  </ContextMenuSubTrigger>\n</template>\n\n<style>\n.sigma-ui-context-menu-sub-trigger {\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  user-select: none;\n}\n\n.sigma-ui-context-menu-sub-trigger:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-context-menu-sub-trigger[data-state=\"open\"] {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-context-menu-sub-trigger--inset {\n  padding-left: 2rem;\n}\n\n.sigma-ui-context-menu-sub-trigger__icon {\n  width: 1rem;\n  height: 1rem;\n  margin-left: auto;\n}\n</style>\n"
     },
     {
       "name": "ContextMenuTrigger.vue",

package/__generated/registry-schemes/style-system/css/dialog.json

@@ -13,27 +13,27 @@
     },
     {
       "name": "DialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { XIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DialogContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay class=\"sigma-ui-dialog-overlay\" />\n    <DialogContent\n      v-bind=\"forwarded\"\n      class=\"sigma-ui-dialog-content\"\n      :class=\"[$attrs.class]\"\n    >\n      <slot />\n\n      <DialogClose class=\"sigma-ui-dialog-close\">\n        <XIcon class=\"sigma-ui-dialog-close__icon\" />\n        <span class=\"sigma-ui-dialog-close__label\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n\n<style>\n.sigma-ui-dialog-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  background-color: rgb(0 0 0 / 0.8);\n  animation: fade-in 0.2s ease-out;\n}\n\n.sigma-ui-dialog-overlay[data-state=\"open\"] {\n  animation: fade-in 0.2s ease-out;\n}\n\n.sigma-ui-dialog-overlay[data-state=\"closed\"] {\n  animation: fade-out 0.2s ease-in;\n}\n\n.sigma-ui-dialog-content {\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  z-index: 50;\n  display: grid;\n  width: 100%;\n  max-width: 32rem;\n  transform: translate(-50%, -50%);\n  gap: 1rem;\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--background));\n  padding: 1.5rem;\n  box-shadow: var(--shadow-lg);\n  transition-duration: 200ms;\n}\n\n.sigma-ui-dialog-content[data-state=\"open\"] {\n  animation: dialog-show 0.2s ease-out;\n}\n\n.sigma-ui-dialog-content[data-state=\"closed\"] {\n  animation: dialog-hide 0.2s ease-in;\n}\n\n.sigma-ui-dialog-close {\n  position: absolute;\n  right: 1rem;\n  top: 1rem;\n  border-radius: var(--radius-sm);\n  opacity: 0.7;\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.sigma-ui-dialog-close:hover {\n  opacity: 1;\n}\n\n.sigma-ui-dialog-close:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));\n}\n\n.sigma-ui-dialog-close[data-state=\"open\"] {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-dialog-close:disabled {\n  pointer-events: none;\n}\n\n.sigma-ui-dialog-close__icon {\n  width: 1rem;\n  height: 1rem;\n}\n\n.sigma-ui-dialog-close__label {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes dialog-show {\n  from {\n    opacity: 0;\n    transform: translate(-50%, -48%) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n@keyframes dialog-hide {\n  from {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: translate(-50%, -48%) scale(0.95);\n  }\n}\n\n@media (min-width: 640px) {\n  .sigma-ui-dialog-content {\n    border-radius: var(--radius-lg);\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { XIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DialogContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay class=\"sigma-ui-dialog-overlay\" />\n    <DialogContent\n      v-bind=\"forwarded\"\n      class=\"sigma-ui-dialog-content\"\n      :class=\"[$attrs.class]\"\n    >\n      <slot />\n\n      <DialogClose class=\"sigma-ui-dialog-close\">\n        <XIcon class=\"sigma-ui-dialog-close__icon\" />\n        <span class=\"sigma-ui-dialog-close__label\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n\n<style>\n.sigma-ui-dialog-overlay {\n  position: fixed;\n  z-index: 50;\n  animation: fade-in 0.2s ease-out;\n  background-color: rgb(0 0 0 / 80%);\n  inset: 0;\n}\n\n.sigma-ui-dialog-overlay[data-state=\"open\"] {\n  animation: fade-in 0.2s ease-out;\n}\n\n.sigma-ui-dialog-overlay[data-state=\"closed\"] {\n  animation: fade-out 0.2s ease-in;\n}\n\n.sigma-ui-dialog-content {\n  position: fixed;\n  z-index: 50;\n  top: 50%;\n  left: 50%;\n  display: grid;\n  width: 100%;\n  max-width: 32rem;\n  padding: 1.5rem;\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--background));\n  box-shadow: var(--shadow-lg);\n  gap: 1rem;\n  transform: translate(-50%, -50%);\n  transition-duration: 200ms;\n}\n\n.sigma-ui-dialog-content[data-state=\"open\"] {\n  animation: dialog-show 0.2s ease-out;\n}\n\n.sigma-ui-dialog-content[data-state=\"closed\"] {\n  animation: dialog-hide 0.2s ease-in;\n}\n\n.sigma-ui-dialog-close {\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n  border-radius: var(--radius-sm);\n  opacity: 0.7;\n  transition-duration: 150ms;\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-dialog-close:hover {\n  opacity: 1;\n}\n\n.sigma-ui-dialog-close:focus {\n  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));\n  outline: none;\n}\n\n.sigma-ui-dialog-close[data-state=\"open\"] {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-dialog-close:disabled {\n  pointer-events: none;\n}\n\n.sigma-ui-dialog-close__icon {\n  width: 1rem;\n  height: 1rem;\n}\n\n.sigma-ui-dialog-close__label {\n  position: absolute;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border-width: 0;\n  margin: -1px;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes dialog-show {\n  from {\n    opacity: 0;\n    transform: translate(-50%, -48%) scale(0.95);\n  }\n\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n@keyframes dialog-hide {\n  from {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: translate(-50%, -48%) scale(0.95);\n  }\n}\n\n@media (width >= 640px) {\n  .sigma-ui-dialog-content {\n    border-radius: var(--radius-lg);\n  }\n}\n</style>\n"
     },
     {
       "name": "DialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<DialogDescriptionProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-dialog-description\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n\n<style>\n.sigma-ui-dialog-description {\n  font-size: 0.875rem;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<DialogDescriptionProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-dialog-description\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n\n<style>\n.sigma-ui-dialog-description {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.875rem;\n}\n</style>\n"
     },
     {
       "name": "DialogFooter.vue",
-      "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-dialog-footer\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-dialog-footer {\n  display: flex;\n  flex-direction: column-reverse;\n}\n\n@media (min-width: 640px) {\n  .sigma-ui-dialog-footer {\n    flex-direction: row;\n    justify-content: flex-end;\n    gap: 0.5rem;\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-dialog-footer\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-dialog-footer {\n  display: flex;\n  flex-direction: column-reverse;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-dialog-footer {\n    flex-direction: row;\n    justify-content: flex-end;\n    gap: 0.5rem;\n  }\n}\n</style>\n"
     },
     {
       "name": "DialogHeader.vue",
-      "content": "<script setup lang=\"ts\">\n\n;\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-dialog-header\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-dialog-header {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  text-align: center;\n}\n\n@media (min-width: 640px) {\n  .sigma-ui-dialog-header {\n    text-align: left;\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\n\n;\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-dialog-header\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-dialog-header {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  text-align: center;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-dialog-header {\n    text-align: left;\n  }\n}\n</style>\n"
     },
     {
       "name": "DialogScrollContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { XIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DialogContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"sigma-ui-dialog-scroll-overlay\"\n    >\n      <DialogContent\n        class=\"sigma-ui-dialog-scroll-content\"\n        :class=\"[$attrs.class]\"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose class=\"sigma-ui-dialog-scroll-close\">\n          <XIcon class=\"sigma-ui-dialog-scroll-close__icon\" />\n          <span class=\"sigma-ui-dialog-scroll-close__label\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n\n<style>\n.sigma-ui-dialog-scroll-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  display: grid;\n  place-items: center;\n  overflow-y: auto;\n  background-color: rgb(0 0 0 / 0.8);\n  animation: fade-in 0.2s ease-out;\n}\n\n.sigma-ui-dialog-scroll-overlay[data-state=\"open\"] {\n  animation: fade-in 0.2s ease-out;\n}\n\n.sigma-ui-dialog-scroll-overlay[data-state=\"closed\"] {\n  animation: fade-out 0.2s ease-in;\n}\n\n.sigma-ui-dialog-scroll-content {\n  position: relative;\n  z-index: 50;\n  display: grid;\n  width: 100%;\n  max-width: 32rem;\n  margin: 2rem 0;\n  gap: 1rem;\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--background));\n  padding: 1.5rem;\n  box-shadow: var(--shadow-lg);\n  transition-duration: 200ms;\n}\n\n.sigma-ui-dialog-scroll-close {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  padding: 0.125rem;\n  border-radius: var(--radius-md);\n  transition-property: background-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.sigma-ui-dialog-scroll-close:hover {\n  background-color: hsl(var(--secondary));\n}\n\n.sigma-ui-dialog-scroll-close__icon {\n  width: 1rem;\n  height: 1rem;\n}\n\n.sigma-ui-dialog-scroll-close__label {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n@media (min-width: 640px) {\n  .sigma-ui-dialog-scroll-content {\n    border-radius: var(--radius-lg);\n  }\n}\n\n@media (min-width: 768px) {\n  .sigma-ui-dialog-scroll-content {\n    width: 100%;\n  }\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { XIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DialogContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"sigma-ui-dialog-scroll-overlay\"\n    >\n      <DialogContent\n        class=\"sigma-ui-dialog-scroll-content\"\n        :class=\"[$attrs.class]\"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose class=\"sigma-ui-dialog-scroll-close\">\n          <XIcon class=\"sigma-ui-dialog-scroll-close__icon\" />\n          <span class=\"sigma-ui-dialog-scroll-close__label\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n\n<style>\n.sigma-ui-dialog-scroll-overlay {\n  position: fixed;\n  z-index: 50;\n  display: grid;\n  animation: fade-in 0.2s ease-out;\n  background-color: rgb(0 0 0 / 80%);\n  inset: 0;\n  overflow-y: auto;\n  place-items: center;\n}\n\n.sigma-ui-dialog-scroll-overlay[data-state=\"open\"] {\n  animation: fade-in 0.2s ease-out;\n}\n\n.sigma-ui-dialog-scroll-overlay[data-state=\"closed\"] {\n  animation: fade-out 0.2s ease-in;\n}\n\n.sigma-ui-dialog-scroll-content {\n  position: relative;\n  z-index: 50;\n  display: grid;\n  width: 100%;\n  max-width: 32rem;\n  padding: 1.5rem;\n  border: 1px solid hsl(var(--border));\n  margin: 2rem 0;\n  background-color: hsl(var(--background));\n  box-shadow: var(--shadow-lg);\n  gap: 1rem;\n  transition-duration: 200ms;\n}\n\n.sigma-ui-dialog-scroll-close {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  padding: 0.125rem;\n  border-radius: var(--radius-md);\n  transition-duration: 150ms;\n  transition-property: background-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-dialog-scroll-close:hover {\n  background-color: hsl(var(--secondary));\n}\n\n.sigma-ui-dialog-scroll-close__icon {\n  width: 1rem;\n  height: 1rem;\n}\n\n.sigma-ui-dialog-scroll-close__label {\n  position: absolute;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border-width: 0;\n  margin: -1px;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-dialog-scroll-content {\n    border-radius: var(--radius-lg);\n  }\n}\n\n@media (width >= 768px) {\n  .sigma-ui-dialog-scroll-content {\n    width: 100%;\n  }\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n</style>\n"
     },
     {
       "name": "DialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<DialogTitleProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-dialog-title\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n\n<style>\n.sigma-ui-dialog-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  line-height: 1;\n  letter-spacing: -0.025em;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<DialogTitleProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-dialog-title\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n\n<style>\n.sigma-ui-dialog-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  letter-spacing: -0.025em;\n  line-height: 1;\n}\n</style>\n"
     },
     {
       "name": "DialogTrigger.vue",

package/__generated/registry-schemes/style-system/css/drawer.json

@@ -11,27 +11,27 @@
     },
     {
       "name": "DrawerContent.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { DrawerContent, DrawerPortal } from 'vaul-vue';\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui';\nimport { useForwardPropsEmits } from 'reka-ui';\nimport DrawerOverlay from './DrawerOverlay.vue';\n\nconst props = defineProps<DialogContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\"\n      class=\"sigma-ui-drawer-content\"\n      :class=\"[$attrs.class]\"\n    >\n      <div class=\"sigma-ui-drawer-content__handle\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n\n<style>\n.sigma-ui-drawer-content {\n  position: fixed;\n  inset-inline: 0;\n  bottom: 0;\n  z-index: 50;\n  margin-top: 6rem;\n  display: flex;\n  height: auto;\n  flex-direction: column;\n  border-top-left-radius: 10px;\n  border-top-right-radius: 10px;\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--background));\n}\n\n.sigma-ui-drawer-content__handle {\n  margin-inline: auto;\n  margin-top: 1rem;\n  height: 0.5rem;\n  width: 100px;\n  border-radius: var(--radius-full);\n  background-color: hsl(var(--muted));\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { DrawerContent, DrawerPortal } from 'vaul-vue';\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui';\nimport { useForwardPropsEmits } from 'reka-ui';\nimport DrawerOverlay from './DrawerOverlay.vue';\n\nconst props = defineProps<DialogContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\"\n      class=\"sigma-ui-drawer-content\"\n      :class=\"[$attrs.class]\"\n    >\n      <div class=\"sigma-ui-drawer-content__handle\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n\n<style>\n.sigma-ui-drawer-content {\n  position: fixed;\n  z-index: 50;\n  bottom: 0;\n  display: flex;\n  height: auto;\n  flex-direction: column;\n  border: 1px solid hsl(var(--border));\n  margin-top: 6rem;\n  background-color: hsl(var(--background));\n  border-top-left-radius: 10px;\n  border-top-right-radius: 10px;\n  inset-inline: 0;\n}\n\n.sigma-ui-drawer-content__handle {\n  width: 100px;\n  height: 0.5rem;\n  border-radius: var(--radius-full);\n  margin-top: 1rem;\n  background-color: hsl(var(--muted));\n  margin-inline: auto;\n}\n</style>\n"
     },
     {
       "name": "DrawerDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue';\nimport { DrawerDescription } from 'vaul-vue';\n\nconst props = defineProps<DrawerDescriptionProps>();\n</script>\n\n<template>\n  <DrawerDescription\n    v-bind=\"props\"\n    class=\"sigma-ui-drawer-description\"\n  >\n    <slot />\n  </DrawerDescription>\n</template>\n\n<style>\n.sigma-ui-drawer-description {\n  font-size: 0.875rem;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue';\nimport { DrawerDescription } from 'vaul-vue';\n\nconst props = defineProps<DrawerDescriptionProps>();\n</script>\n\n<template>\n  <DrawerDescription\n    v-bind=\"props\"\n    class=\"sigma-ui-drawer-description\"\n  >\n    <slot />\n  </DrawerDescription>\n</template>\n\n<style>\n.sigma-ui-drawer-description {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.875rem;\n}\n</style>\n"
     },
     {
       "name": "DrawerFooter.vue",
-      "content": "<script lang=\"ts\" setup>\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-drawer-footer\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-drawer-footer {\n  margin-top: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 1rem;\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-drawer-footer\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-drawer-footer {\n  display: flex;\n  flex-direction: column;\n  padding: 1rem;\n  margin-top: auto;\n  gap: 0.5rem;\n}\n</style>\n"
     },
     {
       "name": "DrawerHeader.vue",
-      "content": "<script lang=\"ts\" setup>\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-drawer-header\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-drawer-header {\n  display: grid;\n  gap: 0.375rem;\n  padding: 1rem;\n  text-align: center;\n}\n\n@media (min-width: 640px) {\n  .sigma-ui-drawer-header {\n    text-align: left;\n  }\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-drawer-header\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-drawer-header {\n  display: grid;\n  padding: 1rem;\n  gap: 0.375rem;\n  text-align: center;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-drawer-header {\n    text-align: left;\n  }\n}\n</style>\n"
     },
     {
       "name": "DrawerOverlay.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { DrawerOverlay } from 'vaul-vue';\nimport type { DialogOverlayProps } from 'reka-ui';\n\nconst props = defineProps<DialogOverlayProps>();\n</script>\n\n<template>\n  <DrawerOverlay\n    v-bind=\"props\"\n    class=\"sigma-ui-drawer-overlay\"\n  />\n</template>\n\n<style>\n.sigma-ui-drawer-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  background-color: rgb(0 0 0 / 0.8);\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { DrawerOverlay } from 'vaul-vue';\nimport type { DialogOverlayProps } from 'reka-ui';\n\nconst props = defineProps<DialogOverlayProps>();\n</script>\n\n<template>\n  <DrawerOverlay\n    v-bind=\"props\"\n    class=\"sigma-ui-drawer-overlay\"\n  />\n</template>\n\n<style>\n.sigma-ui-drawer-overlay {\n  position: fixed;\n  z-index: 50;\n  background-color: rgb(0 0 0 / 80%);\n  inset: 0;\n}\n</style>\n"
     },
     {
       "name": "DrawerTitle.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue';\nimport { DrawerTitle } from 'vaul-vue';\n\nconst props = defineProps<DrawerTitleProps>();\n</script>\n\n<template>\n  <DrawerTitle\n    v-bind=\"props\"\n    class=\"sigma-ui-drawer-title\"\n  >\n    <slot />\n  </DrawerTitle>\n</template>\n\n<style>\n.sigma-ui-drawer-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  line-height: 1;\n  letter-spacing: -0.025em;\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue';\nimport { DrawerTitle } from 'vaul-vue';\n\nconst props = defineProps<DrawerTitleProps>();\n</script>\n\n<template>\n  <DrawerTitle\n    v-bind=\"props\"\n    class=\"sigma-ui-drawer-title\"\n  >\n    <slot />\n  </DrawerTitle>\n</template>\n\n<style>\n.sigma-ui-drawer-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  letter-spacing: -0.025em;\n  line-height: 1;\n}\n</style>\n"
     },
     {
       "name": "index.ts",