@oneclick.dev/cms-kit 0.0.2 → 0.0.3

package/components/ui/segmented-control/SegmentedControl.vue

@@ -1,121 +0,0 @@
-<script setup lang="ts">
-import { provide, toRef, ref, onMounted, nextTick, watch, computed } from 'vue';
-import { cn } from '../../../lib/utils'
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    required: true,
-  },
-  ariaLabel: {
-    type: String,
-    default: '',
-  },
-  class: {
-    type: String,
-    default: '',
-  },
-  direction: {
-    type: String,
-    default: 'horizontal'
-  },
-  allowEmpty: {
-    type: Boolean,
-    default: false
-  }
-});
-
-const userClass = computed(() => {
-  return cn(props.class);
-});
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string | number];
-}>();
-
-// Track the active button position for animation
-const activeIndicator = ref<HTMLElement | null>(null);
-const containerRef = ref<HTMLElement | null>(null);
-const activeButtonIndex = ref(0);
-
-// Provide the current value and the update method to child components
-provide('segmentedControlValue', toRef(props, 'modelValue'));
-provide('segmentedControlRegister', registerButton);
-provide('segmentedControlContainer', containerRef);
-
-// Function to update the model value
-const updateValue = (value: string | number) => {
-  if (props.allowEmpty && value === props.modelValue) {
-    emit('update:modelValue', '');
-    return;
-  }
-  emit('update:modelValue', value);
-};
-
-provide('updateSegmentedControl', updateValue);
-
-// Keep track of button values and indices
-const buttonValues: Array<string | number> = [];
-const buttonRefs: Array<HTMLElement> = [];
-
-function registerButton(element: HTMLElement, value: string | number, index: number) {
-  buttonValues[index] = value;
-  buttonRefs[index] = element;
-
-  // Update active index if this button's value matches the modelValue
-  if (value === props.modelValue) {
-    activeButtonIndex.value = index;
-    updateIndicatorPosition(index);
-  }
-}
-
-// Update the indicator position
-function updateIndicatorPosition(index: number) {
-  nextTick(() => {
-    if (!activeIndicator.value || !buttonRefs[index]) return;
-    
-    const button = buttonRefs[index];
-    const indicator = activeIndicator.value;
-    
-    indicator.style.width = `${button.offsetWidth}px`;
-    indicator.style.transform = `translateX(${button.offsetLeft}px) translateY(${button.offsetTop}px)`;
-  });
-}
-
-// Watch for model value changes to update the indicator position
-watch(() => props.modelValue, (newValue) => {
-  const index = buttonValues.findIndex(value => value === newValue);
-  if (index !== -1) {
-    activeButtonIndex.value = index;
-    updateIndicatorPosition(index);
-  }
-}, { immediate: true });
-
-onMounted(() => {
-  // Initial position after mount
-  nextTick(() => {
-    updateIndicatorPosition(activeButtonIndex.value);
-  });
-});
-</script>
-
-<template>
-  <div
-    ref="containerRef"
-    role="tablist"
-    :aria-label="ariaLabel"
-    class="flex relative rounded-md p-1 bg-muted"
-    :class="`${cn(direction === 'vertical' ? 'flex-col' : 'flex-row', userClass)}`"
-  >
-    <!-- Animated background indicator -->
-    <div
-      ref="activeIndicator"
-      class="absolute left-0 bg-background rounded-md shadow-xs transition-all duration-200 ease-in-out"
-      :class="{ 'top-0': direction === 'horizontal', '-top-0.5': direction === 'vertical', 'opacity-0': modelValue === '' }"
-      :style="{ height: direction === 'vertical' ? '32px' : `calc(100% - 0.5rem)` }"
-    ></div>
-    
-    <!-- Slot for buttons -->
-    <slot />
-  </div>
-</template>

package/components/ui/segmented-control/SegmentedControlButton.vue

@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import { computed, inject, type Ref, ref, onMounted } from 'vue';
-
-const props = defineProps<{
-  value: string | number;
-  disabled?: boolean;
-  class?: string;
-}>();
-
-// Inject the current value and update method from parent SegmentedControl
-const currentValue = inject<Ref<string | number>>('segmentedControlValue');
-const updateValue = inject<(val: string | number) => void>('updateSegmentedControl', () => {});
-const registerButton = inject<(element: HTMLElement, value: string | number, index: number) => void>('segmentedControlRegister', () => {});
-
-// Element ref for this button
-const buttonRef = ref<HTMLElement | null>(null);
-
-// Computed property to determine if this button is active
-const isActive = computed(() => currentValue?.value === props.value);
-
-// Handle click - update the model value in the parent
-const handleClick = () => {
-  if (!props.disabled) {
-    updateValue(props.value);
-  }
-};
-
-// Register this button with the parent control when mounted
-onMounted(() => {
-  if (!buttonRef.value) return;
-  
-  // Get all siblings to determine the index
-  const parent = buttonRef.value.parentElement;
-  if (!parent) return;
-  
-  const buttons = Array.from(parent.querySelectorAll('[role="tab"]'));
-  const index = buttons.indexOf(buttonRef.value);
-  
-  if (index !== -1) {
-    registerButton(buttonRef.value, props.value, index);
-  }
-});
-</script>
-
-<template>
-  <button
-    ref="buttonRef"
-    type="button"
-    role="tab"
-    :aria-selected="isActive"
-    :disabled="disabled"
-    :class="[
-      'relative flex-1 px-3 py-1.5 h-8 text-sm font-medium transition-all duration-200 focus:outline-none z-10 focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:opacity-50 disabled:pointer-events-none',
-      props.class,
-      isActive 
-        ? 'text-foreground dark:text-foreground' 
-        : 'text-muted-foreground hover:text-foreground dark:hover:text-foreground',
-      disabled ? 'cursor-not-allowed' : 'cursor-pointer'
-    ]"
-    @click="handleClick"
-  >
-    <slot />
-  </button>
-</template>

package/components/ui/segmented-control/index.ts

@@ -1,2 +0,0 @@
-export { default as SegmentedControl } from './SegmentedControl.vue'
-export { default as SegmentedControlButton } from './SegmentedControlButton.vue'

package/components/ui/select/Select.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
-import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
-
-const props = defineProps<SelectRootProps>()
-const emits = defineEmits<SelectRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <SelectRoot
-    data-slot="select"
-    v-bind="forwarded"
-  >
-    <slot />
-  </SelectRoot>
-</template>

package/components/ui/select/SelectContent.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import {
-  SelectContent,
-  type SelectContentEmits,
-  type SelectContentProps,
-  SelectPortal,
-  SelectViewport,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-import { SelectScrollDownButton, SelectScrollUpButton } from '.'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(
-  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
-  {
-    position: 'popper',
-  },
-)
-const emits = defineEmits<SelectContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SelectPortal>
-    <SelectContent
-      data-slot="select-content"
-      v-bind="{ ...forwarded, ...$attrs }"
-      :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 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border border-popover-border shadow-md',
-        position === 'popper'
-          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        props.class,
-      )
-      "
-    >
-      <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')">
-        <slot />
-      </SelectViewport>
-      <SelectScrollDownButton />
-    </SelectContent>
-  </SelectPortal>
-</template>

package/components/ui/select/SelectGroup.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { SelectGroup, type SelectGroupProps } from 'reka-ui'
-
-const props = defineProps<SelectGroupProps>()
-</script>
-
-<template>
-  <SelectGroup
-    data-slot="select-group"
-    v-bind="props"
-  >
-    <slot />
-  </SelectGroup>
-</template>

package/components/ui/select/SelectItem.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { Check } from 'lucide-vue-next'
-import {
-  SelectItem,
-  SelectItemIndicator,
-  type SelectItemProps,
-  SelectItemText,
-  useForwardProps,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <SelectItem
-    data-slot="select-item"
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        `focus:bg-accent text-accent-foreground/60 focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2`,
-        props.class,
-      )
-    "
-  >
-    <span class="absolute right-2 flex size-3.5 items-center justify-center">
-      <SelectItemIndicator>
-        <Check class="size-4" />
-      </SelectItemIndicator>
-    </span>
-
-    <SelectItemText>
-      <slot />
-    </SelectItemText>
-  </SelectItem>
-</template>

package/components/ui/select/SelectItemText.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { SelectItemText, type SelectItemTextProps } from 'reka-ui'
-
-const props = defineProps<SelectItemTextProps>()
-</script>
-
-<template>
-  <SelectItemText
-    data-slot="select-item-text"
-    v-bind="props"
-  >
-    <slot />
-  </SelectItemText>
-</template>

package/components/ui/select/SelectLabel.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { SelectLabel, type SelectLabelProps } from 'reka-ui'
-
-const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
-</script>
-
-<template>
-  <SelectLabel
-    data-slot="select-label"
-    :class="cn('px-2 py-1.5 text-sm font-medium', props.class)"
-  >
-    <slot />
-  </SelectLabel>
-</template>

package/components/ui/select/SelectScrollDownButton.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { ChevronDown } from 'lucide-vue-next'
-import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <SelectScrollDownButton
-    data-slot="select-scroll-down-button"
-    v-bind="forwardedProps"
-    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
-  >
-    <slot>
-      <ChevronDown class="size-4" />
-    </slot>
-  </SelectScrollDownButton>
-</template>

package/components/ui/select/SelectScrollUpButton.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { ChevronUp } from 'lucide-vue-next'
-import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <SelectScrollUpButton
-    data-slot="select-scroll-up-button"
-    v-bind="forwardedProps"
-    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
-  >
-    <slot>
-      <ChevronUp class="size-4" />
-    </slot>
-  </SelectScrollUpButton>
-</template>

package/components/ui/select/SelectSeparator.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <SelectSeparator
-    data-slot="select-separator"
-    v-bind="delegatedProps"
-    :class="cn('bg-popover-border pointer-events-none -mx-1 my-1 h-px', props.class)"
-  />
-</template>

package/components/ui/select/SelectTrigger.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { reactiveOmit } from '@vueuse/core'
-import { ChevronDown } from 'lucide-vue-next'
-import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'
-
-const props = withDefaults(
-  defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'], size?: 'sm' | 'default' }>(),
-  { size: 'default' },
-)
-
-const delegatedProps = reactiveOmit(props, 'class', 'size')
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <SelectTrigger
-    data-slot="select-trigger"
-    :data-size="size"
-    v-bind="forwardedProps"
-    :class="cn(
-      `border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-background px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
-  >
-    <slot />
-    <SelectIcon as-child>
-      <ChevronDown class="size-4 opacity-50" />
-    </SelectIcon>
-  </SelectTrigger>
-</template>

package/components/ui/select/SelectValue.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { SelectValue, type SelectValueProps } from 'reka-ui'
-
-const props = defineProps<SelectValueProps>()
-</script>
-
-<template>
-  <SelectValue
-    data-slot="select-value"
-    v-bind="props"
-    class="truncate !block"
-  >
-    <slot />
-  </SelectValue>
-</template>

package/components/ui/select/index.ts

@@ -1,11 +0,0 @@
-export { default as Select } from './Select.vue'
-export { default as SelectContent } from './SelectContent.vue'
-export { default as SelectGroup } from './SelectGroup.vue'
-export { default as SelectItem } from './SelectItem.vue'
-export { default as SelectItemText } from './SelectItemText.vue'
-export { default as SelectLabel } from './SelectLabel.vue'
-export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
-export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
-export { default as SelectSeparator } from './SelectSeparator.vue'
-export { default as SelectTrigger } from './SelectTrigger.vue'
-export { default as SelectValue } from './SelectValue.vue'

package/components/ui/separator/Separator.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { reactiveOmit } from '@vueuse/core'
-import { Separator, type SeparatorProps } from 'reka-ui'
-
-const props = withDefaults(defineProps<
-  SeparatorProps & { class?: HTMLAttributes['class'] }
->(), {
-  orientation: 'horizontal',
-  decorative: true,
-})
-
-const delegatedProps = reactiveOmit(props, 'class')
-</script>
-
-<template>
-  <Separator
-    data-slot="separator-root"
-    v-bind="delegatedProps"
-    :class="
-      cn(
-        `bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px`,
-        props.class,
-      )
-    "
-  />
-</template>

package/components/ui/separator/index.ts

@@ -1 +0,0 @@
-export { default as Separator } from './Separator.vue'

package/components/ui/sheet/Sheet.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
-
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DialogRoot
-    data-slot="sheet"
-    v-bind="forwarded"
-  >
-    <slot />
-  </DialogRoot>
-</template>

package/components/ui/sheet/SheetClose.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'reka-ui'
-
-const props = defineProps<DialogCloseProps>()
-</script>
-
-<template>
-  <DialogClose
-    data-slot="sheet-close"
-    v-bind="props"
-  >
-    <slot />
-  </DialogClose>
-</template>

package/components/ui/sheet/SheetContent.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { X } from 'lucide-vue-next'
-import {
-  DialogClose,
-  DialogContent,
-  type DialogContentEmits,
-  type DialogContentProps,
-  DialogPortal,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import SheetOverlay from './SheetOverlay.vue'
-
-interface SheetContentProps extends DialogContentProps {
-  class?: HTMLAttributes['class'],
-  overlayClass?: HTMLAttributes['class'],
-  side?: 'top' | 'right' | 'bottom' | 'left'
-}
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<SheetContentProps>(), {
-  side: 'right',
-})
-const emits = defineEmits<DialogContentEmits>()
-
-const delegatedProps = reactiveOmit(props, 'class', 'side')
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DialogPortal>
-    <SheetOverlay :class="overlayClass">
-      <DialogContent
-        data-slot="sheet-content"
-        :class="cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out absolute z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-          side === 'right'
-            && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-fit min-h-full w-3/4 border-l sm:max-w-sm',
-          side === 'left'
-            && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-fit min-h-full w-3/4 border-r sm:max-w-sm',
-          side === 'top'
-            && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-          side === 'bottom'
-            && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-          props.class)"
-        v-bind="{ ...forwarded, ...$attrs }"
-      >
-        <slot />
-
-        <DialogClose
-          class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
-        >
-          <X class="size-4" />
-          <span class="sr-only">Close</span>
-        </DialogClose>
-      </DialogContent>
-    </SheetOverlay>
-  </DialogPortal>
-</template>

package/components/ui/sheet/SheetDescription.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { DialogDescription, type DialogDescriptionProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = reactiveOmit(props, 'class')
-</script>
-
-<template>
-  <DialogDescription
-    data-slot="sheet-description"
-    :class="cn('text-muted-foreground text-sm', props.class)"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </DialogDescription>
-</template>

package/components/ui/sheet/SheetFooter.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>
-
-<template>
-  <div
-    data-slot="sheet-footer"
-    :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)
-    "
-  >
-    <slot />
-  </div>
-</template>