@jasmine-ui/vue 0.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 HSOUMI Technology
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,77 @@
+# Jasmine UI
+
+An accessible Vue 3 component library built on [Reka UI](https://reka-ui.com) headless primitives. Styled with [Tailwind CSS](https://tailwindcss.com). Customizable through design tokens. Type-safe from end to end.
+
+[Documentation](https://jasmineui.com) | [GitHub](https://github.com/hsoumi-technology/jasmine-ui)
+
+## Installation
+
+```bash
+bun add @jasmine-ui/vue
+```
+
+```bash
+npm install @jasmine-ui/vue
+```
+
+## Setup
+
+Import the stylesheet in your app entry:
+
+```typescript
+import '@jasmine-ui/vue/style.css';
+```
+
+Then use components:
+
+```vue
+<script setup>
+import { Button, Input, Table } from '@jasmine-ui/vue';
+</script>
+
+<template>
+  <Button color="primary">Click me</Button>
+</template>
+```
+
+## Components
+
+29 production-ready components across 5 categories:
+
+| Category | Components |
+|----------|-----------|
+| **General** | Button, Spinner, Divider, Text |
+| **Data Entry** | Input, Textarea, Checkbox, Radio Group, Switch, Select, Combobox |
+| **Data Display** | Accordion, Avatar, Badge, Chip, List, Code Block, Kbd, Tabs, Pagination, Table |
+| **Feedback** | Alert, Toast |
+| **Overlay** | Dropdown, Modal, Drawer, Popover, Tooltip |
+
+## Features
+
+- **Accessible** — Built on Reka UI with full ARIA support and keyboard navigation
+- **Dark mode** — First-class dark mode via CSS custom properties
+- **Design tokens** — Fully customizable through `--j-*` CSS variables, no build step required
+- **TypeScript** — Complete type safety with exported types for every component
+- **Standard Schema** — Form validation via Standard Schema v1 (Zod, Valibot, ArkType)
+- **Tailwind CSS** — Styled with Tailwind CSS v4 + Tailwind Variants
+
+## Requirements
+
+- Vue 3.5+ or Vue 4.0+
+- Tailwind CSS 4
+
+## Development
+
+```bash
+bun install          # Install dependencies
+bun run docs:dev     # Documentation site
+bun run storybook:dev # Storybook
+bun run test:unit    # Unit tests
+bun run biome:check  # Lint & format
+bun run type:check   # Type check
+bun run build        # Build library
+```
+
+## License
+
+[MIT](./LICENSE)

package/dist/components/accordion/accordion.composable.d.ts

@@ -0,0 +1,85 @@
+import { ExtractPropTypes } from 'vue';
+import { accordionProps } from './accordion.props';
+type AccordionProps = ExtractPropTypes<typeof accordionProps>;
+/**
+ * Composable that handles Accordion component logic.
+ * Generates TV classes from variant props.
+ */
+export declare const useAccordion: (props: AccordionProps) => {
+    classes: import('vue').ComputedRef<{
+        base: (slotProps?: ({
+            variant?: "default" | "bordered" | "splitted" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        item: (slotProps?: ({
+            variant?: "default" | "bordered" | "splitted" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        header: (slotProps?: ({
+            variant?: "default" | "bordered" | "splitted" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        trigger: (slotProps?: ({
+            variant?: "default" | "bordered" | "splitted" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        chevron: (slotProps?: ({
+            variant?: "default" | "bordered" | "splitted" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        content: (slotProps?: ({
+            variant?: "default" | "bordered" | "splitted" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+    } & {
+        base: (slotProps?: ({
+            variant?: "default" | "bordered" | "splitted" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        item: (slotProps?: ({
+            variant?: "default" | "bordered" | "splitted" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        header: (slotProps?: ({
+            variant?: "default" | "bordered" | "splitted" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        trigger: (slotProps?: ({
+            variant?: "default" | "bordered" | "splitted" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        chevron: (slotProps?: ({
+            variant?: "default" | "bordered" | "splitted" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        content: (slotProps?: ({
+            variant?: "default" | "bordered" | "splitted" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+    } & {}>;
+};
+export {};

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,112 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Partial<Record<string, (_: {}) => any>>;
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    items: {
+        type: import('vue').PropType<import('../..').AccordionItem[]>;
+        default: () => never[];
+    };
+    modelValue: {
+        type: import('vue').PropType<string | string[] | undefined>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: import('vue').PropType<string | string[] | undefined>;
+        default: undefined;
+    };
+    type: {
+        type: import('vue').PropType<"single" | "multiple">;
+        default: "single";
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    variant: {
+        type: import('vue').PropType<import('../..').AccordionVariant>;
+        default: "default";
+    };
+    color: {
+        default: "default";
+        type: import('vue').PropType<import('../..').Color>;
+    };
+    size: {
+        type: import('vue').PropType<import('../..').Size>;
+        default: "md";
+    };
+    radius: {
+        type: import('vue').PropType<import('../..').Radius>;
+        default: "md";
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[]) => any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    items: {
+        type: import('vue').PropType<import('../..').AccordionItem[]>;
+        default: () => never[];
+    };
+    modelValue: {
+        type: import('vue').PropType<string | string[] | undefined>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: import('vue').PropType<string | string[] | undefined>;
+        default: undefined;
+    };
+    type: {
+        type: import('vue').PropType<"single" | "multiple">;
+        default: "single";
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    variant: {
+        type: import('vue').PropType<import('../..').AccordionVariant>;
+        default: "default";
+    };
+    color: {
+        default: "default";
+        type: import('vue').PropType<import('../..').Color>;
+    };
+    size: {
+        type: import('vue').PropType<import('../..').Size>;
+        default: "md";
+    };
+    radius: {
+        type: import('vue').PropType<import('../..').Radius>;
+        default: "md";
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+}>, {
+    variant: import('../..').AccordionVariant;
+    color: import('../..').Color;
+    size: import('../..').Size;
+    radius: import('../..').Radius;
+    items: import('../..').AccordionItem[];
+    modelValue: string | string[] | undefined;
+    defaultValue: string | string[] | undefined;
+    type: "single" | "multiple";
+    collapsible: boolean;
+    isDisabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+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/components/accordion/accordion.props.d.ts

@@ -0,0 +1,44 @@
+import { PropType } from 'vue';
+import { AccordionItem } from '../../types/common';
+export declare const accordionProps: {
+    items: {
+        type: PropType<AccordionItem[]>;
+        default: () => never[];
+    };
+    modelValue: {
+        type: PropType<string | string[] | undefined>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<string | string[] | undefined>;
+        default: undefined;
+    };
+    type: {
+        type: PropType<"single" | "multiple">;
+        default: "single";
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    variant: {
+        type: PropType<import('../../types/common').AccordionVariant>;
+        default: "default";
+    };
+    color: {
+        default: "default";
+        type: PropType<import('../../types/common').Color>;
+    };
+    size: {
+        type: PropType<import('../../types/common').Size>;
+        default: "md";
+    };
+    radius: {
+        type: PropType<import('../../types/common').Radius>;
+        default: "md";
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};

package/dist/components/accordion/accordion.style.d.ts

@@ -0,0 +1,202 @@
+export declare const accordionVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+        splitted: {
+            base: string;
+        };
+    };
+    color: {
+        default: {
+            base: string;
+        };
+        primary: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        sm: {
+            trigger: string;
+            content: string;
+        };
+        md: {
+            trigger: string;
+            content: string;
+        };
+        lg: {
+            trigger: string;
+            content: string;
+        };
+    };
+    radius: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    header: string;
+    trigger: string;
+    chevron: string;
+    content: string;
+}, undefined, {
+    variant: {
+        default: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+        splitted: {
+            base: string;
+        };
+    };
+    color: {
+        default: {
+            base: string;
+        };
+        primary: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        sm: {
+            trigger: string;
+            content: string;
+        };
+        md: {
+            trigger: string;
+            content: string;
+        };
+        lg: {
+            trigger: string;
+            content: string;
+        };
+    };
+    radius: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    header: string;
+    trigger: string;
+    chevron: string;
+    content: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+        splitted: {
+            base: string;
+        };
+    };
+    color: {
+        default: {
+            base: string;
+        };
+        primary: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        sm: {
+            trigger: string;
+            content: string;
+        };
+        md: {
+            trigger: string;
+            content: string;
+        };
+        lg: {
+            trigger: string;
+            content: string;
+        };
+    };
+    radius: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    header: string;
+    trigger: string;
+    chevron: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/accordion/index.d.ts

@@ -0,0 +1 @@
+export { default as Accordion } from './accordion';

package/dist/components/alert/alert.composable.d.ts

@@ -0,0 +1,87 @@
+import { ExtractPropTypes } from 'vue';
+import { alertProps } from './alert.props';
+type AlertProps = ExtractPropTypes<typeof alertProps>;
+type AlertEmitFn = (event: 'close') => void;
+type SemanticIconName = 'info' | 'warning' | 'danger' | 'success';
+/**
+ * Composable that handles Alert component logic.
+ * Returns computed class bindings, semantic icon name, and close handler.
+ */
+export declare const useAlert: (props: AlertProps, emit: AlertEmitFn) => {
+    classes: import('vue').ComputedRef<{
+        base: (slotProps?: ({
+            variant?: "solid" | "outline" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        icon: (slotProps?: ({
+            variant?: "solid" | "outline" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        content: (slotProps?: ({
+            variant?: "solid" | "outline" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        title: (slotProps?: ({
+            variant?: "solid" | "outline" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        description: (slotProps?: ({
+            variant?: "solid" | "outline" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        action: (slotProps?: ({
+            variant?: "solid" | "outline" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        close: (slotProps?: ({
+            variant?: "solid" | "outline" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+    } & {
+        base: (slotProps?: ({
+            variant?: "solid" | "outline" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        icon: (slotProps?: ({
+            variant?: "solid" | "outline" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        content: (slotProps?: ({
+            variant?: "solid" | "outline" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        title: (slotProps?: ({
+            variant?: "solid" | "outline" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        description: (slotProps?: ({
+            variant?: "solid" | "outline" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        action: (slotProps?: ({
+            variant?: "solid" | "outline" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+        close: (slotProps?: ({
+            variant?: "solid" | "outline" | undefined;
+            color?: "default" | "primary" | "danger" | "success" | "warning" | undefined;
+            radius?: "md" | "sm" | "lg" | "none" | "full" | undefined;
+        } & import('tailwind-variants').ClassProp<import('tailwind-merge').ClassNameValue>) | undefined) => string;
+    } & {}>;
+    semanticIcon: import('vue').ComputedRef<SemanticIconName>;
+    handleClose: () => void;
+};
+export {};