@geniusdynamics/ns8-ui-lib 1.0.3 → 1.0.5

package/src/components/ui/tabs/Tabs.vue

@@ -17,7 +17,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-slot="slotProps"
     data-slot="tabs"
     v-bind="forwarded"
-    :class="cn('flex flex-col gap-2', props.class)"
+    :class="cn('tw:flex tw:flex-col tw:gap-2', props.class)"
   >
     <slot v-bind="slotProps" />
   </TabsRoot>

package/src/components/ui/tabs/TabsContent.vue

@@ -13,7 +13,7 @@ const delegatedProps = reactiveOmit(props, "class")
 <template>
   <TabsContent
     data-slot="tabs-content"
-    :class="cn('flex-1 outline-none', props.class)"
+    :class="cn('tw:flex-1 tw:outline-none', props.class)"
     v-bind="delegatedProps"
   >
     <slot />

package/src/components/ui/tabs/TabsList.vue

@@ -15,7 +15,7 @@ const delegatedProps = reactiveOmit(props, "class")
     data-slot="tabs-list"
     v-bind="delegatedProps"
     :class="cn(
-      'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+      'tw:bg-muted tw:text-muted-foreground tw:inline-flex tw:h-9 tw:w-fit tw:items-center tw:justify-center tw:rounded-lg tw:p-[3px]',
       props.class,
     )"
   >

package/src/components/ui/tabs/TabsTrigger.vue

@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <TabsTrigger
     data-slot="tabs-trigger"
     :class="cn(
-      'data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      'tw:data-[state=active]:bg-background tw:dark:data-[state=active]:text-foreground tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:outline-ring tw:dark:data-[state=active]:border-input tw:dark:data-[state=active]:bg-input/30 tw:text-foreground tw:dark:text-muted-foreground tw:inline-flex tw:h-[calc(100%-1px)] tw:flex-1 tw:items-center tw:justify-center tw:gap-1.5 tw:rounded-md tw:border tw:border-transparent tw:px-2 tw:py-1 tw:text-sm tw:font-medium tw:whitespace-nowrap tw:transition-[color,box-shadow] tw:focus-visible:ring-[3px] tw:focus-visible:outline-1 tw:disabled:pointer-events-none tw:disabled:opacity-50 tw:data-[state=active]:shadow-sm tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
     v-bind="forwardedProps"

package/src/components/ui/tags-input/TagsInput.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { TagsInputRootEmits, TagsInputRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TagsInputRoot
+    v-slot="slotProps" v-bind="forwarded" :class="cn(
+      'tw:flex tw:flex-wrap tw:gap-2 tw:items-center tw:rounded-md tw:border tw:border-input tw:bg-background tw:px-2 tw:py-1 tw:text-sm tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none',
+      'tw:focus-within:border-ring tw:focus-within:ring-ring/50 tw:focus-within:ring-[3px]',
+      'tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive',
+      props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </TagsInputRoot>
+</template>

package/src/components/ui/tags-input/TagsInputInput.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { TagsInputInputProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputInput, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputInput v-bind="forwardedProps" :class="cn('tw:text-sm tw:min-h-5 tw:focus:outline-none tw:flex-1 tw:bg-transparent tw:px-1', props.class)" />
+</template>

package/src/components/ui/tags-input/TagsInputItem.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { TagsInputItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputItem, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItem v-bind="forwardedProps" :class="cn('tw:flex tw:h-5 tw:items-center tw:rounded-md tw:bg-secondary tw:data-[state=active]:ring-ring tw:data-[state=active]:ring-2 tw:data-[state=active]:ring-offset-2 tw:ring-offset-background', props.class)">
+    <slot />
+  </TagsInputItem>
+</template>

package/src/components/ui/tags-input/TagsInputItemDelete.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { TagsInputItemDeleteProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import { TagsInputItemDelete, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('tw:flex tw:rounded tw:bg-transparent tw:mr-1', props.class)">
+    <slot>
+      <X class=""tw:w-4 tw:h-4"" />
+    </slot>
+  </TagsInputItemDelete>
+</template>

package/src/components/ui/tags-input/TagsInputItemText.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { TagsInputItemTextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputItemText, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemText v-bind="forwardedProps" :class="cn('tw:py-0.5 tw:px-2 tw:text-sm tw:rounded tw:bg-transparent', props.class)">
+    <slot />
+  </TagsInputItemText>
+</template>

package/src/components/ui/textarea/Textarea.vue

@@ -23,6 +23,6 @@ const modelValue = useVModel(props, "modelValue", emits, {
   <textarea
     v-model="modelValue"
     data-slot="textarea"
-    :class="cn('border-input placeholder: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 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)"
+    :class="cn('tw:border-input tw:placeholder:text-muted-foreground tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive tw:dark:bg-input/30 tw:flex tw:field-sizing-content tw:min-h-16 tw:w-full tw:rounded-md tw:border tw:bg-transparent tw:px-3 tw:py-2 tw:text-base tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none tw:focus-visible:ring-[3px] tw:disabled:cursor-not-allowed tw:disabled:opacity-50 tw:md:text-sm', props.class)"
   />
 </template>

package/src/components/ui/toggle/Toggle.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ToggleEmits, ToggleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ToggleVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { Toggle, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "."
+
+const props = withDefaults(defineProps<ToggleProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ToggleVariants["variant"]
+  size?: ToggleVariants["size"]
+}>(), {
+  variant: "default",
+  size: "default",
+  disabled: false,
+})
+
+const emits = defineEmits<ToggleEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <Toggle
+    v-slot="slotProps"
+    data-slot="toggle"
+    v-bind="forwarded"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </Toggle>
+</template>

package/src/components/ui/toggle-group/ToggleGroup.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { VariantProps } from "class-variance-authority"
+import type { ToggleGroupRootEmits, ToggleGroupRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { toggleVariants } from '@/components/ui/toggle'
+import { reactiveOmit } from "@vueuse/core"
+import { ToggleGroupRoot, useForwardPropsEmits } from "reka-ui"
+import { provide } from "vue"
+import { cn } from "@/lib/utils"
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = withDefaults(defineProps<ToggleGroupRootProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ToggleGroupVariants["variant"]
+  size?: ToggleGroupVariants["size"]
+  spacing?: number
+}>(), {
+  spacing: 0,
+})
+
+const emits = defineEmits<ToggleGroupRootEmits>()
+
+provide("toggleGroup", {
+  variant: props.variant,
+  size: props.size,
+  spacing: props.spacing,
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToggleGroupRoot
+    v-slot="slotProps"
+    data-slot="toggle-group"
+    :data-size="size"
+    :data-variant="variant"
+    :data-spacing="spacing"
+    :style="{
+      '--gap': spacing,
+    }"
+    v-bind="forwarded"
+    :class="cn('tw:group/toggle-group tw:flex tw:w-fit tw:items-center tw:gap-[--spacing(var(--gap))] tw:rounded-md tw:data-[spacing=default]:data-[variant=outline]:shadow-xs', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </ToggleGroupRoot>
+</template>

package/src/components/ui/toggle-group/ToggleGroupItem.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { VariantProps } from "class-variance-authority"
+import type { ToggleGroupItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ToggleGroupItem, useForwardProps } from "reka-ui"
+import { inject } from "vue"
+import { cn } from "@/lib/utils"
+import { toggleVariants } from '@/components/ui/toggle'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants> & {
+  spacing?: number
+}
+
+const props = defineProps<ToggleGroupItemProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ToggleGroupVariants["variant"]
+  size?: ToggleGroupVariants["size"]
+}>()
+
+const context = inject<ToggleGroupVariants>("toggleGroup")
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-slot="slotProps"
+    data-slot="toggle-group-item"
+    :data-variant="context?.variant || variant"
+    :data-size="context?.size || size"
+    :data-spacing="context?.spacing"
+    v-bind="forwardedProps"
+    :class="cn(
+      toggleVariants({
+        variant: context?.variant || variant,
+        size: context?.size || size,
+      }),
+      'tw:w-auto tw:min-w-0 tw:shrink-0 tw:px-3 tw:focus:z-10 tw:focus-visible:z-10',
+      'tw:data-[spacing=0]:rounded-none tw:data-[spacing=0]:shadow-none tw:data-[spacing=0]:first:rounded-l-md tw:data-[spacing=0]:last:rounded-r-md tw:data-[spacing=0]:data-[variant=outline]:border-l-0 tw:data-[spacing=0]:data-[variant=outline]:first:border-l',
+      props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </ToggleGroupItem>
+</template>

package/src/components/ui/tooltip/TooltipContent.vue

@@ -24,11 +24,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <TooltipContent
       data-slot="tooltip-content"
       v-bind="{ ...forwarded, ...$attrs }"
-      :class="cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
+      :class="cn('tw:bg-foreground tw:text-background tw:animate-in tw:fade-in-0 tw:zoom-in-95 tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=closed]:zoom-out-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:w-fit tw:rounded-md tw:px-3 tw:py-1.5 tw:text-xs tw:text-balance', props.class)"
     >
       <slot />
 
-      <TooltipArrow class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      <TooltipArrow class=""tw:bg-foreground tw:fill-foreground tw:z-50 tw:size-2.5 tw:translate-y-[calc(-50%_-_2px)] tw:rotate-45 tw:rounded-[2px]"" />
     </TooltipContent>
   </TooltipPortal>
 </template>

package/dist/src/components/NS/lottie-animation/NSLottieAnimation.vue.d.ts

@@ -1,75 +0,0 @@
-interface Props {
-    path?: string;
-    animationData?: any;
-    width?: number | string;
-    height?: number | string;
-    loop?: boolean;
-    autoplay?: boolean;
-    speed?: number;
-    playOnHover?: boolean;
-    stopOnHoverOut?: boolean;
-    direction?: number;
-    renderer?: 'svg' | 'canvas' | 'html';
-    className?: string;
-    containerClassName?: string;
-    lazy?: boolean;
-    placeholder?: string;
-    responsive?: boolean;
-    preserveAspectRatio?: string;
-    title?: string;
-    ariaLabel?: string;
-    role?: string;
-}
-declare const _default: import('vue').DefineComponent<Props, {
-    play: () => void;
-    pause: () => void;
-    stop: () => void;
-    goToAndStop: (frame?: number) => void;
-    setDirection: (direction: number) => void;
-    setSpeed: (speed: number) => void;
-    isLoaded: import('vue').Ref<boolean, boolean>;
-    isPlaying: import('vue').Ref<boolean, boolean>;
-    isLoading: import('vue').Ref<boolean, boolean>;
-    isError: import('vue').Ref<boolean, boolean>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    stop: () => any;
-    error: (error: Error) => any;
-    load: () => any;
-    ready: () => any;
-    play: () => any;
-    pause: () => any;
-    complete: () => any;
-    loopComplete: () => any;
-    enterFrame: (event: any) => any;
-    mouseOver: () => any;
-    mouseOut: () => any;
-}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    onStop?: (() => any) | undefined;
-    onError?: ((error: Error) => any) | undefined;
-    onLoad?: (() => any) | undefined;
-    onReady?: (() => any) | undefined;
-    onPlay?: (() => any) | undefined;
-    onPause?: (() => any) | undefined;
-    onComplete?: (() => any) | undefined;
-    onLoopComplete?: (() => any) | undefined;
-    onEnterFrame?: ((event: any) => any) | undefined;
-    onMouseOver?: (() => any) | undefined;
-    onMouseOut?: (() => any) | undefined;
-}>, {
-    height: number | string;
-    width: number | string;
-    role: string;
-    direction: number;
-    preserveAspectRatio: string;
-    speed: number;
-    loop: boolean;
-    autoplay: boolean;
-    playOnHover: boolean;
-    stopOnHoverOut: boolean;
-    renderer: "svg" | "canvas" | "html";
-    lazy: boolean;
-    responsive: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    lottieRef: any;
-}, HTMLDivElement>;
-export default _default;

package/dist/src/components/ui/checkbox/NsCheckbox.vue.d.ts

@@ -1,49 +0,0 @@
-import { CheckboxVariants, LabelVariants } from '.';
-interface Props {
-    modelValue?: boolean;
-    checked?: boolean;
-    defaultChecked?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    name?: string;
-    value?: string;
-    id?: string;
-    label?: string;
-    hideLabel?: boolean;
-    description?: string;
-    errorMessage?: string;
-    variant?: CheckboxVariants['variant'];
-    size?: CheckboxVariants['size'];
-    labelVariant?: LabelVariants['variant'];
-    class?: string;
-    labelClass?: string;
-    indeterminate?: boolean;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        label?(_: {}): any;
-        extra?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:checked": (value: boolean) => any;
-    "update:modelValue": (value: boolean) => any;
-}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:checked"?: ((value: boolean) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {
-    variant: "default" | "destructive" | "outline" | null;
-    size: "default" | "sm" | "lg" | null;
-    labelVariant: "default" | "destructive" | "muted" | null;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/src/components/ui/toggle/NsToggle.vue.d.ts

@@ -1,54 +0,0 @@
-import { ToggleVariants, LabelVariants } from '.';
-interface Props {
-    modelValue?: boolean;
-    checked?: boolean;
-    defaultChecked?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    name?: string;
-    value?: string;
-    id?: string;
-    label?: string;
-    hideLabel?: boolean;
-    description?: string;
-    leftText?: string;
-    rightText?: string;
-    variant?: ToggleVariants['variant'];
-    size?: ToggleVariants['size'];
-    labelVariant?: LabelVariants['variant'];
-    class?: string;
-    labelClass?: string;
-    containerClass?: string;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        label?(_: {}): any;
-        'left-text'?(_: {}): any;
-        'right-text'?(_: {}): any;
-        extra?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:checked": (value: boolean) => any;
-    "update:modelValue": (value: boolean) => any;
-}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:checked"?: ((value: boolean) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {
-    leftText: string;
-    rightText: string;
-    variant: "default" | "destructive" | "warning" | "success" | null;
-    size: "default" | "sm" | "lg" | null;
-    labelVariant: "default" | "destructive" | "warning" | "success" | "muted" | null;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};