@oneclick.dev/cms-kit 0.0.1

package/components/ui/range-calendar/RangeCalendarHeader.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
+    <slot />
+  </RangeCalendarHeader>
+</template>

package/components/ui/range-calendar/RangeCalendarHeading.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
+
+defineSlots<{
+  default: (props: { headingValue: string }) => any
+}>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeading
+    v-slot="{ headingValue }"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </RangeCalendarHeading>
+</template>

package/components/ui/range-calendar/RangeCalendarNextButton.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronRight } from 'lucide-vue-next'
+import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'
+import { cn } from '../../../lib/utils'
+import { buttonVariants } from '../button'
+
+const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarNext
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="size-4" />
+    </slot>
+  </RangeCalendarNext>
+</template>

package/components/ui/range-calendar/RangeCalendarPrevButton.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronLeft } from 'lucide-vue-next'
+import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'
+import { cn } from '../../../lib/utils'
+import { buttonVariants } from '../button'
+
+const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarPrev
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="size-4" />
+    </slot>
+  </RangeCalendarPrev>
+</template>

package/components/ui/range-calendar/index.ts

@@ -0,0 +1,12 @@
+export { default as RangeCalendar } from './RangeCalendar.vue'
+export { default as RangeCalendarCell } from './RangeCalendarCell.vue'
+export { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'
+export { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'
+export { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'
+export { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'
+export { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'
+export { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'
+export { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'
+export { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'
+export { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'
+export { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'

package/components/ui/resizable/ResizableHandle.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { GripVertical } from 'lucide-vue-next'
+import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'withHandle')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterResizeHandle
+    data-slot="resizable-handle"
+    v-bind="forwarded"
+    :class="cn('bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)"
+  >
+    <template v-if="props.withHandle">
+      <div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+        <GripVertical class="size-2.5" />
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>

package/components/ui/resizable/ResizablePanel.vue

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

package/components/ui/resizable/ResizablePanelGroup.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterGroup
+    data-slot="resizable-panel-group"
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full data-[orientation=vertical]:flex-col', props.class)"
+  >
+    <slot />
+  </SplitterGroup>
+</template>

package/components/ui/resizable/index.ts

@@ -0,0 +1,3 @@
+export { default as ResizableHandle } from './ResizableHandle.vue'
+export { default as ResizablePanel } from './ResizablePanel.vue'
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'

package/components/ui/ripple-button/RippleButton.vue

@@ -0,0 +1,97 @@
+<template>
+  <button
+    ref="rippleButtonRef"
+    :class="
+      cn(
+        'relative overflow-hidden inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2',
+        $props.class,
+      )
+    "
+    :style="{ '--duration': $props.duration + 'ms' }"
+    @click="handleClick"
+  >
+    <div class="relative z-10 flex items-center gap-2">
+      <slot />
+    </div>
+    <span class="pointer-events-none absolute inset-0">
+      <span
+        v-for="ripple in buttonRipples"
+        :key="ripple.key"
+        class="ripple-animation absolute rounded-full bg-background opacity-30"
+        :style="{
+          width: ripple.size + 'px',
+          height: ripple.size + 'px',
+          top: ripple.y + 'px',
+          left: ripple.x + 'px',
+          backgroundColor: $props.rippleColor,
+          transform: 'scale(0)',
+          animationDuration: $props.duration + 'ms',
+        }"
+      />
+    </span>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { cn } from "~/lib/utils";
+
+interface RippleButtonProps {
+  class?: HTMLAttributes["class"];
+  rippleColor?: string;
+  duration?: number;
+}
+
+const props = withDefaults(defineProps<RippleButtonProps>(), {
+  rippleColor: "#484848",
+  duration: 600,
+});
+
+const emit = defineEmits<{
+  (e: "click", event: MouseEvent): void;
+}>();
+
+const rippleButtonRef = ref<HTMLButtonElement | null>(null);
+const buttonRipples = ref<Array<{ x: number; y: number; size: number; key: number }>>([]);
+
+function handleClick(event: MouseEvent) {
+  createRipple(event);
+  emit("click", event);
+}
+
+function createRipple(event: MouseEvent) {
+  const button = rippleButtonRef.value;
+  if (!button) return;
+  const rect = button.getBoundingClientRect();
+  const size = Math.max(rect.width, rect.height);
+  const x = event.clientX - rect.left - size / 2;
+  const y = event.clientY - rect.top - size / 2;
+  const newRipple = { x, y, size, key: Date.now() };
+  buttonRipples.value.push(newRipple);
+}
+
+watchEffect(() => {
+  if (buttonRipples.value.length > 0) {
+    const lastRipple = buttonRipples.value[buttonRipples.value.length - 1];
+    setTimeout(() => {
+      buttonRipples.value = buttonRipples.value.filter((ripple) => ripple.key !== lastRipple.key);
+    }, props.duration);
+  }
+});
+</script>
+
+<style scoped>
+@keyframes rippling {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+.ripple-animation {
+  animation: rippling var(--duration) ease-out;
+}
+</style>

package/components/ui/ripple-button/index.ts

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

package/components/ui/sandbox/Sandbox.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Variable {
+  name: string
+  type: string
+  value: any
+}
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  },
+  variables: {
+    type: Array as () => Variable[],
+    default: () => []
+  },
+  placeholder: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const code = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+</script>
+
+<template>
+  <CodeEditor v-model="code" :variables="variables" language="" :placeholder="placeholder" />
+</template>

package/components/ui/sandbox/index.ts

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

package/components/ui/scroll-area/ScrollArea.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  type ScrollAreaRootProps,
+  ScrollAreaViewport,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import ScrollBar from './ScrollBar.vue'
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaRoot
+    data-slot="scroll-area"
+    v-bind="delegatedProps"
+    :class="cn('relative', props.class)"
+  >
+    <ScrollAreaViewport
+      data-slot="scroll-area-viewport"
+      class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+    >
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>

package/components/ui/scroll-area/ScrollBar.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
+  orientation: 'vertical',
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    data-slot="scroll-area-scrollbar"
+    v-bind="delegatedProps"
+    :class="
+      cn('flex touch-none p-px transition-colors select-none',
+         orientation === 'vertical'
+           && 'h-full w-2.5 border-l border-l-transparent',
+         orientation === 'horizontal'
+           && 'h-2.5 flex-col border-t border-t-transparent',
+         props.class)"
+  >
+    <ScrollAreaThumb
+      data-slot="scroll-area-thumb"
+      class="bg-border relative flex-1 rounded-full"
+    />
+  </ScrollAreaScrollbar>
+</template>

package/components/ui/scroll-area/index.ts

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

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

@@ -0,0 +1,121 @@
+<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

@@ -0,0 +1,64 @@
+<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

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

package/components/ui/select/Select.vue

@@ -0,0 +1,18 @@
+<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>