@brumaombra/ui-vintage 0.7.8 → 0.7.9

package/src/components/ui/field/FieldSet.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <fieldset data-slot="field-set" :class="cn(
-    'flex flex-col gap-6',
-    'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
-    props.class,
-  )">
-    <slot />
-  </fieldset>
-</template>
+    <fieldset data-slot="field-set" :class="cn(
+        'flex flex-col gap-6',
+        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+        props.class
+    )
+        ">
+        <slot />
+    </fieldset>
+</template>

package/src/components/ui/field/FieldTitle.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div data-slot="field-label" :class="cn(
-    'flex w-fit items-center gap-2 text-sm leading-snug font-semibold group-data-[disabled=true]/field:opacity-50',
-    props.class,
-  )">
-    <slot />
-  </div>
-</template>
+    <div data-slot="field-label" :class="cn(
+        'flex w-fit items-center gap-2 text-sm leading-snug font-semibold group-data-[disabled=true]/field:opacity-50',
+        props.class
+    )
+        ">
+        <slot />
+    </div>
+</template>

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

@@ -1,41 +1,41 @@
-import type { ClassProp } from "class-variance-authority/types"
-import { cva } from "class-variance-authority"
+import type { ClassProp } from 'class-variance-authority/types';
+import { cva } from 'class-variance-authority';
 
 export type FieldVariants = {
-  orientation?: "vertical" | "horizontal" | "responsive" | null | undefined
-}
+    orientation?: 'vertical' | 'horizontal' | 'responsive' | null | undefined;
+};
 
 export const fieldVariants: (props?: FieldVariants & ClassProp) => string = cva(
-  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
-  {
-    variants: {
-      orientation: {
-        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
-        horizontal: [
-          "flex-row items-center",
-          "[&>[data-slot=field-label]]:flex-auto",
-          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        ],
-        responsive: [
-          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
-          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        ],
-      },
-    },
-    defaultVariants: {
-      orientation: "vertical",
-    },
-  },
-)
+    'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
+    {
+        variants: {
+            orientation: {
+                vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
+                horizontal: [
+                    'flex-row items-center',
+                    '[&>[data-slot=field-label]]:flex-auto',
+                    'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
+                ],
+                responsive: [
+                    'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+                    '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+                    '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
+                ]
+            }
+        },
+        defaultVariants: {
+            orientation: 'vertical'
+        }
+    }
+);
 
-export { default as Field } from "./Field.vue"
-export { default as FieldContent } from "./FieldContent.vue"
-export { default as FieldDescription } from "./FieldDescription.vue"
-export { default as FieldError } from "./FieldError.vue"
-export { default as FieldGroup } from "./FieldGroup.vue"
-export { default as FieldLabel } from "./FieldLabel.vue"
-export { default as FieldLegend } from "./FieldLegend.vue"
-export { default as FieldSeparator } from "./FieldSeparator.vue"
-export { default as FieldSet } from "./FieldSet.vue"
-export { default as FieldTitle } from "./FieldTitle.vue"
+export { default as Field } from './Field.vue';
+export { default as FieldContent } from './FieldContent.vue';
+export { default as FieldDescription } from './FieldDescription.vue';
+export { default as FieldError } from './FieldError.vue';
+export { default as FieldGroup } from './FieldGroup.vue';
+export { default as FieldLabel } from './FieldLabel.vue';
+export { default as FieldLegend } from './FieldLegend.vue';
+export { default as FieldSeparator } from './FieldSeparator.vue';
+export { default as FieldSet } from './FieldSet.vue';
+export { default as FieldTitle } from './FieldTitle.vue';

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

@@ -1,29 +1,32 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { useVModel } from "@vueuse/core"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { useVModel } from '@vueuse/core';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  defaultValue?: string | number
-  modelValue?: string | number
-  class?: HTMLAttributes["class"]
-}>()
+    defaultValue?: string | number;
+    modelValue?: string | number;
+    class?: HTMLAttributes['class'];
+}>();
 
+// Emits
 const emits = defineEmits<{
-  (e: "update:modelValue", payload: string | number): void
-}>()
+    (e: 'update:modelValue', payload: string | number): void;
+}>();
 
-const modelValue = useVModel(props, "modelValue", emits, {
-  passive: true,
-  defaultValue: props.defaultValue,
-})
+const modelValue = useVModel(props, 'modelValue', emits, {
+    passive: true,
+    defaultValue: props.defaultValue
+});
 </script>
 
 <template>
-  <input v-model="modelValue" data-slot="input" :class="cn(
-    'file:text-foreground selection:bg-primary selection:text-primary-foreground h-[52px] w-full min-w-0 rounded border border-(--border-light) bg-(--button-secondary-light) px-4 py-3 text-xs font-semibold text-(--text-primary-light) outline-none transition-all duration-300 ease-in-out placeholder:text-(--text-secondary-light) placeholder:opacity-60 file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:text-(--text-primary-dark) dark:placeholder:text-(--text-secondary-dark) sm:text-sm',
-    'focus-visible:border-(--border-hover-light) focus-visible:ring-0 dark:focus-visible:border-(--border-hover-dark)',
-    'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-    props.class,
-  )">
-</template>
+    <input v-model="modelValue" data-slot="input" :class="cn(
+        'file:text-foreground selection:bg-primary selection:text-primary-foreground h-13 w-full min-w-0 rounded border border-(--border-light) bg-(--button-secondary-light) px-4 py-3 text-xs font-semibold text-(--text-primary-light) outline-none transition-all duration-300 ease-in-out placeholder:text-(--text-secondary-light) placeholder:opacity-60 file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:text-(--text-primary-dark) dark:placeholder:text-(--text-secondary-dark) sm:text-sm',
+        'focus-visible:border-(--border-hover-light) focus-visible:ring-0 dark:focus-visible:border-(--border-hover-dark)',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        props.class
+    )
+        " />
+</template>

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

@@ -1 +1 @@
-export { default as Input } from "./Input.vue"
+export { default as Input } from './Input.vue';

package/src/components/ui/label/Label.vue

@@ -1,21 +1,22 @@
 <script setup lang="ts">
-import type { LabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Label } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { LabelProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Label } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <Label data-slot="label" v-bind="delegatedProps" :class="cn(
-    'flex items-center gap-2 text-sm leading-none font-semibold select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-    props.class,
-  )
-    ">
-    <slot />
-  </Label>
-</template>
+    <Label data-slot="label" v-bind="delegatedProps" :class="cn(
+        'flex items-center gap-2 text-sm leading-none font-semibold select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        props.class
+    )
+        ">
+        <slot />
+    </Label>
+</template>

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

@@ -1 +1 @@
-export { default as Label } from "./Label.vue"
+export { default as Label } from './Label.vue';

package/src/components/ui/native-select/NativeSelect.vue

@@ -1,52 +1,42 @@
 <script setup lang="ts">
-import type { AcceptableValue } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit, useVModel } from "@vueuse/core"
-import { ArrowDown01Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { cn } from "../../../lib/utils"
+import type { AcceptableValue } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit, useVModel } from '@vueuse/core';
+import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { cn } from '../../../lib/utils';
 
 defineOptions({
-  inheritAttrs: false,
-})
+    inheritAttrs: false
+});
 
-const props = defineProps<{ modelValue?: AcceptableValue | AcceptableValue[], class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<{ modelValue?: AcceptableValue | AcceptableValue[]; class?: HTMLAttributes['class'] }>();
 
+// Emits
 const emit = defineEmits<{
-  "update:modelValue": AcceptableValue
-}>()
+    'update:modelValue': AcceptableValue;
+}>();
 
-const modelValue = useVModel(props, "modelValue", emit, {
-  passive: true,
-  defaultValue: "",
-})
+const modelValue = useVModel(props, 'modelValue', emit, {
+    passive: true,
+    defaultValue: ''
+});
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <div
-    class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
-    data-slot="native-select-wrapper"
-  >
-    <select
-      v-bind="{ ...$attrs, ...delegatedProps }"
-      v-model="modelValue"
-      data-slot="native-select"
-      :class="cn(
-        'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-        props.class,
-      )"
-    >
-      <slot />
-    </select>
-    <HugeiconsIcon
-      :icon="ArrowDown01Icon"
-      class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
-      aria-hidden="true"
-      data-slot="native-select-icon"
-    />
-  </div>
-</template>
+    <div class="group/native-select relative w-fit has-[select:disabled]:opacity-50" data-slot="native-select-wrapper">
+        <select v-bind="{ ...$attrs, ...delegatedProps }" v-model="modelValue" data-slot="native-select" :class="cn(
+            'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+            'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+            'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+            props.class
+        )
+            ">
+            <slot />
+        </select>
+        <HugeiconsIcon :icon="ArrowDown01Icon" class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none" aria-hidden="true" data-slot="native-select-icon" />
+    </div>
+</template>

package/src/components/ui/native-select/NativeSelectOptGroup.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
-  <optgroup data-slot="native-select-optgroup" :class="cn('bg-popover text-popover-foreground', props.class)">
-    <slot />
-  </optgroup>
-</template>
+    <optgroup data-slot="native-select-optgroup" :class="cn('bg-popover text-popover-foreground', props.class)">
+        <slot />
+    </optgroup>
+</template>

package/src/components/ui/native-select/NativeSelectOption.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
-  <option data-slot="native-select-option" :class="cn('bg-popover text-popover-foreground', props.class)">
-    <slot />
-  </option>
-</template>
+    <option data-slot="native-select-option" :class="cn('bg-popover text-popover-foreground', props.class)">
+        <slot />
+    </option>
+</template>

package/src/components/ui/native-select/index.ts

@@ -1,3 +1,3 @@
-export { default as NativeSelect } from "./NativeSelect.vue"
-export { default as NativeSelectOptGroup } from "./NativeSelectOptGroup.vue"
-export { default as NativeSelectOption } from "./NativeSelectOption.vue"
+export { default as NativeSelect } from './NativeSelect.vue';
+export { default as NativeSelectOptGroup } from './NativeSelectOptGroup.vue';
+export { default as NativeSelectOption } from './NativeSelectOption.vue';

package/src/components/ui/popover/Popover.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
-import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui';
 
-const props = defineProps<PopoverRootProps>()
-const emits = defineEmits<PopoverRootEmits>()
+// Props
+const props = defineProps<PopoverRootProps>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+// Emits
+const emits = defineEmits<PopoverRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <PopoverRoot v-slot="slotProps" data-slot="popover" v-bind="forwarded">
-    <slot v-bind="slotProps" />
-  </PopoverRoot>
-</template>
+    <PopoverRoot v-slot="slotProps" data-slot="popover" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </PopoverRoot>
+</template>

package/src/components/ui/popover/PopoverAnchor.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { PopoverAnchorProps } from "reka-ui"
-import { PopoverAnchor } from "reka-ui"
+import type { PopoverAnchorProps } from 'reka-ui';
+import { PopoverAnchor } from 'reka-ui';
 
-const props = defineProps<PopoverAnchorProps>()
+// Props
+const props = defineProps<PopoverAnchorProps>();
 </script>
 
 <template>
-  <PopoverAnchor data-slot="popover-anchor" v-bind="props">
-    <slot />
-  </PopoverAnchor>
-</template>
+    <PopoverAnchor data-slot="popover-anchor" v-bind="props">
+        <slot />
+    </PopoverAnchor>
+</template>

package/src/components/ui/popover/PopoverContent.vue

@@ -1,40 +1,36 @@
 <script setup lang="ts">
-import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  PopoverContent,
-  PopoverPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
 defineOptions({
-  inheritAttrs: false,
-})
+    inheritAttrs: false
+});
 
-const props = withDefaults(
-  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
-  {
-    align: "center",
-    sideOffset: 4,
-  },
-)
-const emits = defineEmits<PopoverContentEmits>()
+// Props
+const props = withDefaults(defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(), {
+    align: 'center',
+    sideOffset: 4
+});
 
-const delegatedProps = reactiveOmit(props, "class")
+// Emits
+const emits = defineEmits<PopoverContentEmits>();
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <PopoverPortal>
-    <PopoverContent data-slot="popover-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded border border-border p-4 transition-colors duration-300 ease-in-out origin-(--reka-popover-content-transform-origin) outline-hidden',
-      props.class,
-    )
-      ">
-      <slot />
-    </PopoverContent>
-  </PopoverPortal>
-</template>
+    <PopoverPortal>
+        <PopoverContent data-slot="popover-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
+            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded border border-border p-4 transition-colors duration-300 ease-in-out origin-(--reka-popover-content-transform-origin) outline-hidden',
+            props.class
+        )
+            ">
+            <slot />
+        </PopoverContent>
+    </PopoverPortal>
+</template>

package/src/components/ui/popover/PopoverTrigger.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { PopoverTriggerProps } from "reka-ui"
-import { PopoverTrigger } from "reka-ui"
+import type { PopoverTriggerProps } from 'reka-ui';
+import { PopoverTrigger } from 'reka-ui';
 
-const props = defineProps<PopoverTriggerProps>()
+// Props
+const props = defineProps<PopoverTriggerProps>();
 </script>
 
 <template>
-  <PopoverTrigger data-slot="popover-trigger" v-bind="props">
-    <slot />
-  </PopoverTrigger>
-</template>
+    <PopoverTrigger data-slot="popover-trigger" v-bind="props">
+        <slot />
+    </PopoverTrigger>
+</template>

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

@@ -1,4 +1,4 @@
-export { default as Popover } from "./Popover.vue"
-export { default as PopoverAnchor } from "./PopoverAnchor.vue"
-export { default as PopoverContent } from "./PopoverContent.vue"
-export { default as PopoverTrigger } from "./PopoverTrigger.vue"
+export { default as Popover } from './Popover.vue';
+export { default as PopoverAnchor } from './PopoverAnchor.vue';
+export { default as PopoverContent } from './PopoverContent.vue';
+export { default as PopoverTrigger } from './PopoverTrigger.vue';

package/src/components/ui/progress/Progress.vue

@@ -1,38 +1,24 @@
 <script setup lang="ts">
-import type { ProgressRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ProgressIndicator,
-  ProgressRoot,
-} from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { ProgressRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ProgressIndicator, ProgressRoot } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = withDefaults(
-  defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
-  {
-    modelValue: 0,
-  },
-)
+// Props
+const props = withDefaults(defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(), {
+    modelValue: 0
+});
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <ProgressRoot
-    data-slot="progress"
-    v-bind="delegatedProps"
-    :class="
-      cn(
-        'bg-[var(--bg-selected-light)] dark:bg-[var(--bg-selected-dark)] relative h-2 w-full overflow-hidden',
-        props.class,
-      )
-    "
-  >
-    <ProgressIndicator
-      data-slot="progress-indicator"
-      class="bg-primary h-full w-full flex-1 transition-all"
-      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
-    />
-  </ProgressRoot>
-</template>
+    <ProgressRoot data-slot="progress" v-bind="delegatedProps" :class="cn(
+        'bg-(--bg-selected-light) dark:bg-(--bg-selected-dark) relative h-2 w-full overflow-hidden',
+        props.class
+    )
+        ">
+        <ProgressIndicator data-slot="progress-indicator" class="bg-primary h-full w-full flex-1 transition-all" :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`" />
+    </ProgressRoot>
+</template>

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

@@ -1 +1 @@
-export { default as Progress } from "./Progress.vue"
+export { default as Progress } from './Progress.vue';