@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.11 → 1.0.12

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.11",
+  "version": "1.0.12",
   "main": "dist/perisai-ui.umd.js",
   "module": "dist/perisai-ui.es.js",
   "scripts": {

package/src/index.ts

@@ -20,6 +20,7 @@ export { default as SelectContent } from './ui/SelectContent.vue';
 export { default as SelectSeparator } from './ui/SelectSeparator.vue';
 export { default as SelectTrigger } from './ui/SelectTrigger.vue';
 export { default as SelectValue } from './ui/SelectValue.vue';
+export { default as SelectItem } from './ui/SelectItem.vue';
 export { default as SheetContent } from './ui/SheetContent.vue';
 export { default as SheetDescription } from './ui/SheetDescription.vue';
 export { default as SheetHeader } from './ui/SheetHeader.vue';

package/src/ui/slider.vue

@@ -26,6 +26,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  customClass: {
+    type: [String, Array, Object],
+    default: '',
+  }
 });
 
 const $attrs = useAttrs();

package/src/ui/switch.vue

@@ -1,33 +1,50 @@
-<template>
-  <Switch>
-    <slot />
-  </Switch>
-</template>
-
-<script setup>
-import { defineProps, defineEmits, useAttrs } from 'vue';
-import { cn } from './utils';
+<script setup lang="ts">
+import { SwitchRoot, SwitchThumb } from 'reka-ui'
+import { defineProps, defineEmits, useAttrs, computed } from 'vue'
+import { cn } from './utils'
 
 const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-const emit = defineEmits(['update:modelValue']);
-const $attrs = useAttrs();
+  modelValue: Boolean,
+  disabled: Boolean,
+  class: String,
+})
+
+const emit = defineEmits(['update:modelValue'])
 
-function toggle() {
-  if (!props.disabled) {
-    emit('update:modelValue', !props.modelValue);
-  }
-}
+const attrs = useAttrs()
+
+const rootAttrs = computed(() => {
+  const { checked, modelValue, disabled, ...rest } = attrs
+  return rest
+})
 </script>
 
-<style scoped>
-/* All styles handled by Tailwind classes */
-</style>
+<template>
+  <SwitchRoot
+    v-bind="rootAttrs"
+    :checked="modelValue"
+    :disabled="disabled"
+    @update:checked="v => emit('update:modelValue', v)"
+    :class="cn(
+      'relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors',
+      'bg-muted data-[state=checked]:bg-primary',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      props.class
+    )"
+  >
+    <SwitchThumb
+      class="
+        pointer-events-none
+        block
+        h-5 w-5
+        rounded-full
+        bg-background
+        shadow-lg
+        transition-transform
+        translate-x-1
+        data-[state=checked]:translate-x-5
+      "
+    />
+  </SwitchRoot>
+</template>