veloce-vue 0.9.0

package/README.md

@@ -0,0 +1,114 @@
+# Vue-Components
+
+A modern Vue.js UI component library built with Vue, Typescript, Storybook and Tailwind CSS.
+
+## Installation
+
+Install the library from NPM:
+
+```bash
+pnpm add @sherazjutt/vue-components
+```
+
+## Setup
+
+### 1. Import the CSS
+
+Import the library's styles in your main application file:
+
+```javascript
+import "@sherazjutt/vue-components/style.css";
+```
+
+### 2. Import Components
+
+Import the components you need in your Vue components:
+
+```javascript
+import { Button } from "@sherazjutt/vue-components";
+```
+
+## Usage Example
+
+```vue
+<template>
+  <div>
+    <!-- Primary Button -->
+    <Button label="Primary Button" />
+  </div>
+</template>
+
+<script setup>
+import { Button } from "@sherazjutt/vue-components";
+</script>
+```
+
+## Main Application Setup
+
+In your main application file (e.g., `main.ts`):
+
+```javascript
+import "@sherazjutt/vue-components/styles.css";
+import "./style.css";
+
+import { createApp } from "vue";
+import App from "./App.vue";
+
+const app = createApp(App);
+app.mount("#app");
+```
+
+## Requirements
+
+- Vue 3.5 or higher
+- Tailwind CSS v4 (for styling)
+
+## Development
+
+This library is built using:
+
+- Vue 3
+- Tailwind CSS v4
+- Vite
+- Storybook for component documentation
+- TypeScript
+
+## Production
+
+Run `pnpm build` to build the package.
+Run `pnpm run build-storybook` to build storybook only.
+
+To test the storybook locally, you can run `pnpm run preview-storybook`. This will start the storybook production build.
+
+### Consuming application UI configuration
+
+Create `ui.config.ts` and add the following code:
+
+```javascript
+import { config } from "@sherazjutt/vue-components";
+
+const themeConfig = {
+  colors: {
+    primary: "#F5276C",
+    secondary: "#F54927",
+    accent: "#F5B027",
+  },
+};
+
+export default config(themeConfig);
+```
+
+Import and use it in `main.ts`:
+
+```javascript
+import UIConfig from "./ui.config";
+
+// after creating your Vue app instance:
+app.use(UIConfig);
+```
+
+Use the UI colors in your components/styles:
+
+```html
+<div :style="{ backgroundColor: 'var(--ui-color-primary)' }">...</div>
+```

package/components/Accordion/Index.vue.d.ts

@@ -0,0 +1,31 @@
+declare var __VLS_7: string, __VLS_8: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    items: {
+        type: () => {
+            title: string;
+            content: string;
+            slot?: string;
+        }[];
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: () => {
+            title: string;
+            content: string;
+            slot?: string;
+        }[];
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/Accordion/stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import Accordion from "./Index.vue";
+declare const meta: Meta<typeof Accordion>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SingleItem: Story;
+export declare const ManyItems: Story;
+export declare const WithSlots: Story;
+export declare const Empty: Story;

package/components/Button/Index.vue.d.ts

@@ -0,0 +1,82 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly label: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly variant: {
+        readonly type: import("vue").PropType<"outlined" | "text" | "ghost" | "solid">;
+        readonly default: "solid";
+        readonly options: readonly ["outlined", "text", "ghost", "solid"];
+    };
+    readonly icon: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly iconClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly iconPosition: {
+        readonly type: import("vue").PropType<"left" | "right">;
+        readonly default: "right";
+        readonly options: readonly ["left", "right"];
+    };
+    readonly rounded: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly label: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly variant: {
+        readonly type: import("vue").PropType<"outlined" | "text" | "ghost" | "solid">;
+        readonly default: "solid";
+        readonly options: readonly ["outlined", "text", "ghost", "solid"];
+    };
+    readonly icon: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly iconClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly iconPosition: {
+        readonly type: import("vue").PropType<"left" | "right">;
+        readonly default: "right";
+        readonly options: readonly ["left", "right"];
+    };
+    readonly rounded: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    readonly label: string;
+    readonly loading: boolean;
+    readonly disabled: boolean;
+    readonly variant: "outlined" | "text" | "ghost" | "solid";
+    readonly icon: string;
+    readonly iconClass: string;
+    readonly iconPosition: "left" | "right";
+    readonly rounded: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/components/Button/props.d.ts

@@ -0,0 +1,37 @@
+import type { PropType } from "vue";
+export declare const props: {
+    readonly label: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly variant: {
+        readonly type: PropType<"outlined" | "text" | "ghost" | "solid">;
+        readonly default: "solid";
+        readonly options: readonly ["outlined", "text", "ghost", "solid"];
+    };
+    readonly icon: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly iconClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly iconPosition: {
+        readonly type: PropType<"left" | "right">;
+        readonly default: "right";
+        readonly options: readonly ["left", "right"];
+    };
+    readonly rounded: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+};

package/components/Button/stories.d.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import Button from "./Index.vue";
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithIconLeft: Story;
+export declare const WithIconRight: Story;
+export declare const Loading: Story;
+export declare const Disabled: Story;
+export declare const Solid: Story;
+export declare const Outlined: Story;
+export declare const Text: Story;
+export declare const Ghost: Story;
+export declare const Rounded: Story;
+export declare const OnlyIcon: Story;
+export declare const CustomIconClass: {
+    args: {
+        label: string;
+        icon: string;
+        iconClass: string;
+    };
+};

package/components/icon/index.d.ts

@@ -0,0 +1,9 @@
+export declare const icons: {
+    readonly check: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    readonly close: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    readonly loading: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    readonly "chevron-down": import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    readonly alert: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
+export type IconNames = keyof typeof icons;
+export declare const IconsList: IconNames[];

package/components/icon/index.vue.d.ts

@@ -0,0 +1,10 @@
+import { type IconNames } from "./index.ts";
+type __VLS_Props = {
+    icon: IconNames | (string & {});
+    fallbackIcon?: IconNames | (string & {});
+    class?: string;
+    size?: number | string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/composables/useRandomId.d.ts

@@ -0,0 +1 @@
+export declare function useRandomId(length: number): string;

package/exports.d.ts

@@ -0,0 +1,3 @@
+export { default as Button } from "./components/Button/Index.vue";
+export { default as Accordion } from "./components/Accordion/Index.vue";
+export { config } from "./utils/config";

package/icons/alert.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/icons/check.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/icons/chevron-down.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/icons/close.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/icons/loading.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),i={label:{type:String,default:""},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},variant:{type:String,default:"solid",options:["outlined","text","ghost","solid"]},icon:{type:String,default:""},iconClass:{type:String,default:""},iconPosition:{type:String,default:"right",options:["left","right"]},rounded:{type:Boolean,default:!1}},c=["disabled"],d=e.defineComponent({__name:"Index",props:i,setup(o){const t=o,r=e.computed(()=>{switch(t.variant){case"outlined":return"!border-primary text-primary bg-transparent hover:bg-primary disabled:hover:bg-transparent disabled:hover:text-primary hover:text-white";case"text":return"bg-transparent text-primary hover:bg-gray-200 disabled:hover:bg-transparent disabled:hover:text-primary";case"ghost":return"text-primary bg-gray-100 hover:bg-gray-200 disabled:hover:bg-transparent disabled:hover:text-primary";default:return"bg-primary text-white hover:bg-primary/75 disabled:hover:bg-primary disabled:hover:text-white"}});return(s,l)=>{const n=e.resolveComponent("Icon");return e.openBlock(),e.createElementBlock("button",{type:"button",disabled:t.disabled||t.loading,class:e.normalizeClass([r.value,{"rounded-full":t.rounded},"flex cursor-pointer items-center justify-center gap-2 rounded border border-transparent px-3 py-2 transition duration-200 disabled:cursor-not-allowed disabled:opacity-75 "])},[e.createElementVNode("div",{class:e.normalizeClass([{"justify-center":!t.icon},"flex w-full items-center justify-between gap-2"])},[t.label?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass({"order-2":t.iconPosition==="left"})},e.toDisplayString(t.label),3)):e.createCommentVNode("",!0),t.icon&&!t.loading?(e.openBlock(),e.createBlock(n,{key:1,icon:t.icon,class:e.normalizeClass(t.iconClass)},null,8,["icon","class"])):e.createCommentVNode("",!0)],2),t.loading?(e.openBlock(),e.createBlock(n,{key:0,icon:"loading"})):e.createCommentVNode("",!0)],10,c)}}}),p={class:"w-full divide-y divide-gray-200 rounded border border-slate-200 bg-white"},u=["onClick"],m={class:"title text-gray-600"},y={key:0,class:"p-3 text-gray-500"},g={key:1,class:"px-3 py-6 text-center text-gray-500"},b=e.defineComponent({__name:"Index",props:{items:{type:Array,required:!0}},setup(o){const t=e.ref(null);return(r,s)=>{const l=e.resolveComponent("Icon");return e.openBlock(),e.createElementBlock("div",p,[o.items.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(o.items,(n,a)=>(e.openBlock(),e.createElementBlock("div",{key:a},[e.createElementVNode("div",{class:e.normalizeClass([{"bg-primary/5":t.value===a},"hover:bg-primary/5 relative flex cursor-pointer justify-between gap-4 p-3 font-medium duration-100"]),onClick:h=>t.value=t.value===a?null:a},[e.createElementVNode("span",m,e.toDisplayString(n.title),1),e.createVNode(l,{icon:"chevron-down",class:e.normalizeClass([{"rotate-180":t.value===a},"icon text-[1.4rem] text-gray-400 duration-200"])},null,8,["class"])],10,u),t.value===a?(e.openBlock(),e.createElementBlock("div",y,[n.slot?e.renderSlot(r.$slots,n.slot,{key:0}):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(n.content),1)],64))])):e.createCommentVNode("",!0)]))),128)):(e.openBlock(),e.createElementBlock("div",g,"No items to show"))])}}}),v=o=>({install(){if(!o||!o.colors){console.warn("No config provided for the theme settings");return}f(o.colors)}}),f=o=>{const t=document.documentElement;for(const r in o)o[r]&&t.style.setProperty(`--ui-color-${r}`,o[r])};exports.Accordion=b;exports.Button=d;exports.config=v;
+//# sourceMappingURL=index.cjs.map

package/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/components/Button/props.ts","../../src/components/Button/Index.vue","../../src/components/Accordion/Index.vue","../../src/utils/config.ts"],"sourcesContent":["import type { PropType } from \"vue\";\n\nexport const props = {\n  label: { type: String, default: \"\" },\n  loading: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  variant: {\n    type: String as PropType<\"outlined\" | \"text\" | \"ghost\" | \"solid\">,\n    default: \"solid\",\n    options: [\"outlined\", \"text\", \"ghost\", \"solid\"],\n  },\n  icon: { type: String, default: \"\" },\n  iconClass: { type: String, default: \"\" },\n  iconPosition: {\n    type: String as PropType<\"left\" | \"right\">,\n    default: \"right\",\n    options: [\"left\", \"right\"],\n  },\n  rounded: { type: Boolean, default: false },\n} as const;\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { props as buttonProps } from \"./props\";\n\nconst props = defineProps(buttonProps);\n\nconst classes = computed(() => {\n  switch (props.variant) {\n    case \"outlined\":\n      return \"!border-primary text-primary bg-transparent hover:bg-primary disabled:hover:bg-transparent disabled:hover:text-primary hover:text-white\";\n    case \"text\":\n      return \"bg-transparent text-primary hover:bg-gray-200 disabled:hover:bg-transparent disabled:hover:text-primary\";\n    case \"ghost\":\n      return \"text-primary bg-gray-100 hover:bg-gray-200 disabled:hover:bg-transparent disabled:hover:text-primary\";\n    default:\n      return \"bg-primary text-white hover:bg-primary/75 disabled:hover:bg-primary disabled:hover:text-white\"; // solid\n  }\n});\n</script>\n\n<template>\n  <!-- prettier-ignore -->\n  <button \n    type=\"button\" \n    :disabled=\"props.disabled || props.loading\" \n    :class=\"[\n      classes, { 'rounded-full': props.rounded }, \n      'flex cursor-pointer items-center justify-center gap-2 rounded border border-transparent px-3 py-2 transition duration-200 disabled:cursor-not-allowed disabled:opacity-75 '\n    ]\"\n  >\n    <div :class=\"{ 'justify-center': !props.icon }\" class=\"flex w-full items-center justify-between gap-2\">\n      <span v-if=\"props.label\" :class=\"{ 'order-2': props.iconPosition === 'left' }\"> {{ props.label }} </span>\n      <Icon v-if=\"props.icon && !props.loading\" :icon=\"props.icon\" :class=\"props.iconClass\" />\n    </div>\n\n    <Icon v-if=\"props.loading\" icon=\"loading\" />\n  </button>\n</template>\n","<script setup lang=\"ts\">\nimport { ref } from \"vue\";\n\n// Props definition\n// `items` is an array of objects where each object represents an accordion item.\n// Each item has a `title` (string), `content` (string), and an optional `slot` (string) for custom slot rendering.\ndefineProps({\n  items: { type: Array as () => { title: string; content: string; slot?: string }[], required: true },\n});\n\n// This ref holds the index of the currently active (opened) accordion item.\n// If `null`, no accordion item is open.\nconst activeIndex = ref<Number | null>(null);\n</script>\n\n<template>\n  <!-- Accordion Container -->\n  <div class=\"w-full divide-y divide-gray-200 rounded border border-slate-200 bg-white\">\n    <!-- Iterate through items array -->\n    <div v-for=\"(item, index) in items\" :key=\"index\" v-if=\"items.length\">\n      <!-- Accordion Header -->\n      <!-- Clicking toggles activeIndex between `index` and `null` (for collapse) -->\n      <div :class=\"{ 'bg-primary/5': activeIndex === index }\" class=\"hover:bg-primary/5 relative flex cursor-pointer justify-between gap-4 p-3 font-medium duration-100\" @click=\"activeIndex = activeIndex === index ? null : index\">\n        <!-- Accordion Title -->\n        <span class=\"title text-gray-600\">{{ item.title }}</span>\n        <!-- Chevron Icon -->\n        <Icon icon=\"chevron-down\" :class=\"{ 'rotate-180': activeIndex === index }\" class=\"icon text-[1.4rem] text-gray-400 duration-200\" />\n      </div>\n\n      <!-- Accordion Body -->\n      <div v-if=\"activeIndex === index\" class=\"p-3 text-gray-500\">\n        <!-- If slot name is provided, render slot content -->\n        <template v-if=\"item.slot\">\n          <slot :name=\"item.slot\" />\n        </template>\n        <!-- Otherwise, render static content -->\n        <template v-else>\n          {{ item.content }}\n        </template>\n      </div>\n    </div>\n\n    <!-- Fallback message if no items provided -->\n    <div class=\"px-3 py-6 text-center text-gray-500\" v-else>No items to show</div>\n  </div>\n</template>\n","import type { Colors, config as Config } from \"@/types/config\";\n\n// create theme settings\nexport const config = (config: Config) => {\n  return {\n    install() {\n      if (!config || !config.colors) {\n        console.warn(\"No config provided for the theme settings\");\n        return;\n      }\n\n      // apply colors\n      applyCSSVars(config.colors);\n    },\n  };\n};\n\n// apply the colors to the root element\nconst applyCSSVars = (colors: Colors) => {\n  const root = document.documentElement;\n\n  // apply the colors to the root element\n  for (const color in colors) {\n    if (colors[color as keyof Colors]) {\n      root.style.setProperty(`--ui-color-${color}`, colors[color as keyof Colors]);\n    }\n  }\n};\n"],"names":["props","__props","classes","computed","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_createBlock","_component_Icon","activeIndex","ref","_openBlock","_hoisted_1","_Fragment","_renderList","item","index","_hoisted_3","_createVNode","_hoisted_4","_renderSlot","_ctx","_createTextVNode","_hoisted_5","config","applyCSSVars","colors","root","color"],"mappings":"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"}

package/index.js

@@ -0,0 +1,120 @@
+import { defineComponent as g, computed as h, resolveComponent as b, createElementBlock as o, openBlock as r, normalizeClass as i, createElementVNode as d, createBlock as p, createCommentVNode as l, toDisplayString as c, ref as v, Fragment as y, renderList as f, createVNode as _, renderSlot as x, createTextVNode as k } from "vue";
+const w = {
+  label: { type: String, default: "" },
+  loading: { type: Boolean, default: !1 },
+  disabled: { type: Boolean, default: !1 },
+  variant: {
+    type: String,
+    default: "solid",
+    options: ["outlined", "text", "ghost", "solid"]
+  },
+  icon: { type: String, default: "" },
+  iconClass: { type: String, default: "" },
+  iconPosition: {
+    type: String,
+    default: "right",
+    options: ["left", "right"]
+  },
+  rounded: { type: Boolean, default: !1 }
+}, C = ["disabled"], P = /* @__PURE__ */ g({
+  __name: "Index",
+  props: w,
+  setup(t) {
+    const e = t, n = h(() => {
+      switch (e.variant) {
+        case "outlined":
+          return "!border-primary text-primary bg-transparent hover:bg-primary disabled:hover:bg-transparent disabled:hover:text-primary hover:text-white";
+        case "text":
+          return "bg-transparent text-primary hover:bg-gray-200 disabled:hover:bg-transparent disabled:hover:text-primary";
+        case "ghost":
+          return "text-primary bg-gray-100 hover:bg-gray-200 disabled:hover:bg-transparent disabled:hover:text-primary";
+        default:
+          return "bg-primary text-white hover:bg-primary/75 disabled:hover:bg-primary disabled:hover:text-white";
+      }
+    });
+    return (m, u) => {
+      const a = b("Icon");
+      return r(), o("button", {
+        type: "button",
+        disabled: e.disabled || e.loading,
+        class: i([
+          n.value,
+          { "rounded-full": e.rounded },
+          "flex cursor-pointer items-center justify-center gap-2 rounded border border-transparent px-3 py-2 transition duration-200 disabled:cursor-not-allowed disabled:opacity-75 "
+        ])
+      }, [
+        d("div", {
+          class: i([{ "justify-center": !e.icon }, "flex w-full items-center justify-between gap-2"])
+        }, [
+          e.label ? (r(), o("span", {
+            key: 0,
+            class: i({ "order-2": e.iconPosition === "left" })
+          }, c(e.label), 3)) : l("", !0),
+          e.icon && !e.loading ? (r(), p(a, {
+            key: 1,
+            icon: e.icon,
+            class: i(e.iconClass)
+          }, null, 8, ["icon", "class"])) : l("", !0)
+        ], 2),
+        e.loading ? (r(), p(a, {
+          key: 0,
+          icon: "loading"
+        })) : l("", !0)
+      ], 10, C);
+    };
+  }
+}), S = { class: "w-full divide-y divide-gray-200 rounded border border-slate-200 bg-white" }, B = ["onClick"], I = { class: "title text-gray-600" }, N = {
+  key: 0,
+  class: "p-3 text-gray-500"
+}, V = {
+  key: 1,
+  class: "px-3 py-6 text-center text-gray-500"
+}, A = /* @__PURE__ */ g({
+  __name: "Index",
+  props: {
+    items: { type: Array, required: !0 }
+  },
+  setup(t) {
+    const e = v(null);
+    return (n, m) => {
+      const u = b("Icon");
+      return r(), o("div", S, [
+        t.items.length ? (r(!0), o(y, { key: 0 }, f(t.items, (a, s) => (r(), o("div", { key: s }, [
+          d("div", {
+            class: i([{ "bg-primary/5": e.value === s }, "hover:bg-primary/5 relative flex cursor-pointer justify-between gap-4 p-3 font-medium duration-100"]),
+            onClick: (j) => e.value = e.value === s ? null : s
+          }, [
+            d("span", I, c(a.title), 1),
+            _(u, {
+              icon: "chevron-down",
+              class: i([{ "rotate-180": e.value === s }, "icon text-[1.4rem] text-gray-400 duration-200"])
+            }, null, 8, ["class"])
+          ], 10, B),
+          e.value === s ? (r(), o("div", N, [
+            a.slot ? x(n.$slots, a.slot, { key: 0 }) : (r(), o(y, { key: 1 }, [
+              k(c(a.content), 1)
+            ], 64))
+          ])) : l("", !0)
+        ]))), 128)) : (r(), o("div", V, "No items to show"))
+      ]);
+    };
+  }
+}), q = (t) => ({
+  install() {
+    if (!t || !t.colors) {
+      console.warn("No config provided for the theme settings");
+      return;
+    }
+    $(t.colors);
+  }
+}), $ = (t) => {
+  const e = document.documentElement;
+  for (const n in t)
+    t[n] && e.style.setProperty(`--ui-color-${n}`, t[n]);
+};
+export {
+  A as Accordion,
+  P as Button,
+  q as config
+};
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/components/Button/props.ts","../../src/components/Button/Index.vue","../../src/components/Accordion/Index.vue","../../src/utils/config.ts"],"sourcesContent":["import type { PropType } from \"vue\";\n\nexport const props = {\n  label: { type: String, default: \"\" },\n  loading: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  variant: {\n    type: String as PropType<\"outlined\" | \"text\" | \"ghost\" | \"solid\">,\n    default: \"solid\",\n    options: [\"outlined\", \"text\", \"ghost\", \"solid\"],\n  },\n  icon: { type: String, default: \"\" },\n  iconClass: { type: String, default: \"\" },\n  iconPosition: {\n    type: String as PropType<\"left\" | \"right\">,\n    default: \"right\",\n    options: [\"left\", \"right\"],\n  },\n  rounded: { type: Boolean, default: false },\n} as const;\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { props as buttonProps } from \"./props\";\n\nconst props = defineProps(buttonProps);\n\nconst classes = computed(() => {\n  switch (props.variant) {\n    case \"outlined\":\n      return \"!border-primary text-primary bg-transparent hover:bg-primary disabled:hover:bg-transparent disabled:hover:text-primary hover:text-white\";\n    case \"text\":\n      return \"bg-transparent text-primary hover:bg-gray-200 disabled:hover:bg-transparent disabled:hover:text-primary\";\n    case \"ghost\":\n      return \"text-primary bg-gray-100 hover:bg-gray-200 disabled:hover:bg-transparent disabled:hover:text-primary\";\n    default:\n      return \"bg-primary text-white hover:bg-primary/75 disabled:hover:bg-primary disabled:hover:text-white\"; // solid\n  }\n});\n</script>\n\n<template>\n  <!-- prettier-ignore -->\n  <button \n    type=\"button\" \n    :disabled=\"props.disabled || props.loading\" \n    :class=\"[\n      classes, { 'rounded-full': props.rounded }, \n      'flex cursor-pointer items-center justify-center gap-2 rounded border border-transparent px-3 py-2 transition duration-200 disabled:cursor-not-allowed disabled:opacity-75 '\n    ]\"\n  >\n    <div :class=\"{ 'justify-center': !props.icon }\" class=\"flex w-full items-center justify-between gap-2\">\n      <span v-if=\"props.label\" :class=\"{ 'order-2': props.iconPosition === 'left' }\"> {{ props.label }} </span>\n      <Icon v-if=\"props.icon && !props.loading\" :icon=\"props.icon\" :class=\"props.iconClass\" />\n    </div>\n\n    <Icon v-if=\"props.loading\" icon=\"loading\" />\n  </button>\n</template>\n","<script setup lang=\"ts\">\nimport { ref } from \"vue\";\n\n// Props definition\n// `items` is an array of objects where each object represents an accordion item.\n// Each item has a `title` (string), `content` (string), and an optional `slot` (string) for custom slot rendering.\ndefineProps({\n  items: { type: Array as () => { title: string; content: string; slot?: string }[], required: true },\n});\n\n// This ref holds the index of the currently active (opened) accordion item.\n// If `null`, no accordion item is open.\nconst activeIndex = ref<Number | null>(null);\n</script>\n\n<template>\n  <!-- Accordion Container -->\n  <div class=\"w-full divide-y divide-gray-200 rounded border border-slate-200 bg-white\">\n    <!-- Iterate through items array -->\n    <div v-for=\"(item, index) in items\" :key=\"index\" v-if=\"items.length\">\n      <!-- Accordion Header -->\n      <!-- Clicking toggles activeIndex between `index` and `null` (for collapse) -->\n      <div :class=\"{ 'bg-primary/5': activeIndex === index }\" class=\"hover:bg-primary/5 relative flex cursor-pointer justify-between gap-4 p-3 font-medium duration-100\" @click=\"activeIndex = activeIndex === index ? null : index\">\n        <!-- Accordion Title -->\n        <span class=\"title text-gray-600\">{{ item.title }}</span>\n        <!-- Chevron Icon -->\n        <Icon icon=\"chevron-down\" :class=\"{ 'rotate-180': activeIndex === index }\" class=\"icon text-[1.4rem] text-gray-400 duration-200\" />\n      </div>\n\n      <!-- Accordion Body -->\n      <div v-if=\"activeIndex === index\" class=\"p-3 text-gray-500\">\n        <!-- If slot name is provided, render slot content -->\n        <template v-if=\"item.slot\">\n          <slot :name=\"item.slot\" />\n        </template>\n        <!-- Otherwise, render static content -->\n        <template v-else>\n          {{ item.content }}\n        </template>\n      </div>\n    </div>\n\n    <!-- Fallback message if no items provided -->\n    <div class=\"px-3 py-6 text-center text-gray-500\" v-else>No items to show</div>\n  </div>\n</template>\n","import type { Colors, config as Config } from \"@/types/config\";\n\n// create theme settings\nexport const config = (config: Config) => {\n  return {\n    install() {\n      if (!config || !config.colors) {\n        console.warn(\"No config provided for the theme settings\");\n        return;\n      }\n\n      // apply colors\n      applyCSSVars(config.colors);\n    },\n  };\n};\n\n// apply the colors to the root element\nconst applyCSSVars = (colors: Colors) => {\n  const root = document.documentElement;\n\n  // apply the colors to the root element\n  for (const color in colors) {\n    if (colors[color as keyof Colors]) {\n      root.style.setProperty(`--ui-color-${color}`, colors[color as keyof Colors]);\n    }\n  }\n};\n"],"names":["props","__props","classes","computed","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_createBlock","_component_Icon","activeIndex","ref","_openBlock","_hoisted_1","_Fragment","_renderList","item","index","_hoisted_3","_createVNode","_hoisted_4","_renderSlot","_ctx","_createTextVNode","_hoisted_5","config","applyCSSVars","colors","root","color"],"mappings":"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"}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "veloce-vue",
+  "version": "0.9.0",
+  "private": false,
+  "type": "module",
+  "description": "A Vue 3 library built with Vite + TypeScript + Tailwind CSS.",
+  "license": "MIT",
+  "author": "Sheraz <sherazarshad419@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SherazJutt/veloce-vue.git"
+  },
+  "bugs": {
+    "url": "https://github.com/SherazJutt/veloce-vue/issues"
+  },
+  "homepage": "https://github.com/SherazJutt/veloce-vue#readme",
+  "main": "./index.cjs",
+  "module": "./index.js",
+  "types": "./exports.d.ts",
+  "style": "./ui-library.css",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs",
+      "types": "./exports.d.ts",
+      "default": "./index.js"
+    },
+    "./styles.css": "./ui-library.css"
+  },
+  "files": [
+    "**/*"
+  ],
+  "sideEffects": [
+    "./styles.css"
+  ],
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "keywords": [
+    "vue3",
+    "tailwindcss",
+    "component library",
+    "vue",
+    "vuejs",
+    "vue.js",
+    "typescript",
+    "veloce-vue",
+    "ui",
+    "tailwind",
+    "framework",
+    "ui-framework"
+  ]
+}

package/pages/Home/Index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/pages/Home/stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
+export default _default;
+export declare const Home: {};

package/types/config.d.ts

@@ -0,0 +1,9 @@
+interface Colors {
+    primary: string;
+    secondary: string;
+    accent: string;
+}
+interface config {
+    colors: Colors;
+}
+export type { Colors, config };

package/utils/config.d.ts

@@ -0,0 +1,4 @@
+import type { config as Config } from "@/types/config";
+export declare const config: (config: Config) => {
+    install(): void;
+};

package/utils/storyControls.d.ts

@@ -0,0 +1,4 @@
+export declare function generateStoryControls(props: Record<string, any>): {
+    args: Record<string, any>;
+    argTypes: Record<string, any>;
+};

package/veloce-vue.css

@@ -0,0 +1 @@
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-400:oklch(70.4% .191 22.216);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-700:oklch(37.2% .044 257.287);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-800:oklch(27.8% .033 256.848);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--font-weight-medium:500;--font-weight-semibold:600;--radius-sm:.25rem;--radius-md:.375rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary:var(--ui-color-primary)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing)*0)}.-top-2\.5{top:calc(var(--spacing)*-2.5)}.-top-9{top:calc(var(--spacing)*-9)}.top-0{top:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-\[9px\]{top:9px}.top-full{top:100%}.-right-full{right:-100%}.right-0{right:calc(var(--spacing)*0)}.right-full{right:100%}.-bottom-1{bottom:calc(var(--spacing)*-1)}.-bottom-full{bottom:-100%}.bottom-0{bottom:calc(var(--spacing)*0)}.bottom-full{bottom:100%}.-left-full{left:-100%}.left-0{left:calc(var(--spacing)*0)}.left-1\/2{left:50%}.left-3{left:calc(var(--spacing)*3)}.left-full{left:100%}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[49\]{z-index:49}.order-2{order:2}.m-0{margin:calc(var(--spacing)*0)}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.-ml-1{margin-left:calc(var(--spacing)*-1)}.-ml-2{margin-left:calc(var(--spacing)*-2)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-auto{margin-left:auto}.flex{display:flex}.size-5{width:calc(var(--spacing)*5);height:calc(var(--spacing)*5)}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.size-full{width:100%;height:100%}.h-2{height:calc(var(--spacing)*2)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-\[1px\]{height:1px}.h-\[42px\]{height:42px}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[90dvh\]{max-height:90dvh}.max-h-\[calc\(100dvh-100px\)\]{max-height:calc(100dvh - 100px)}.w-2{width:calc(var(--spacing)*2)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-10{width:calc(var(--spacing)*10)}.w-\[1px\]{width:1px}.w-\[200px\]{width:200px}.w-fit{width:fit-content}.w-full{width:100%}.w-max{width:max-content}.w-screen{width:100vw}.max-w-\[360px\]{max-width:360px}.max-w-\[600px\]{max-width:600px}.min-w-full{min-width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.rotate-45{rotate:45deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\!border-primary{border-color:var(--color-primary)!important}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-primary{border-color:var(--color-primary)}.border-slate-200{border-color:var(--color-slate-200)}.border-transparent{border-color:#0000}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab,red,red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-primary,.bg-primary\/5{background-color:var(--color-primary)}@supports (color:color-mix(in lab,red,red)){.bg-primary\/5{background-color:color-mix(in oklab,var(--color-primary)5%,transparent)}}.bg-primary\/10{background-color:var(--color-primary)}@supports (color:color-mix(in lab,red,red)){.bg-primary\/10{background-color:color-mix(in oklab,var(--color-primary)10%,transparent)}}.bg-red-400{background-color:var(--color-red-400)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.\!p-1{padding:calc(var(--spacing)*1)!important}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.\!px-3{padding-inline:calc(var(--spacing)*3)!important}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-\[2px\]{padding-inline:2px}.\!py-1{padding-block:calc(var(--spacing)*1)!important}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.pt-1{padding-top:calc(var(--spacing)*1)}.pt-3{padding-top:calc(var(--spacing)*3)}.pl-5{padding-left:calc(var(--spacing)*5)}.text-center{text-align:center}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[1\.4rem\]{font-size:1.4rem}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-black{color:var(--color-black)}.text-gray-200{color:var(--color-gray-200)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-primary{color:var(--color-primary)}.text-slate-500{color:var(--color-slate-500)}.text-white{color:var(--color-white)}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-slate-500\/10{--tw-shadow-color:#62748e1a}@supports (color:color-mix(in lab,red,red)){.shadow-slate-500\/10{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-slate-500)10%,transparent)var(--tw-shadow-alpha),transparent)}}.shadow-slate-700\/10{--tw-shadow-color:#3141581a}@supports (color:color-mix(in lab,red,red)){.shadow-slate-700\/10{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-slate-700)10%,transparent)var(--tw-shadow-alpha),transparent)}}.outline-primary{outline-color:var(--color-primary)}.backdrop-blur-\[2px\]{--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.select-none{-webkit-user-select:none;user-select:none}.peer-placeholder-shown\:text-gray-400:is(:where(.peer):placeholder-shown~*){color:var(--color-gray-400)}.peer-focus\:-top-2\.5:is(:where(.peer):focus~*){top:calc(var(--spacing)*-2.5)}.peer-focus\:text-sm:is(:where(.peer):focus~*){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.peer-focus\:text-black:is(:where(.peer):focus~*){color:var(--color-black)}@media (hover:hover){.hover\:border-primary\/60:hover{border-color:var(--color-primary)}@supports (color:color-mix(in lab,red,red)){.hover\:border-primary\/60:hover{border-color:color-mix(in oklab,var(--color-primary)60%,transparent)}}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-primary:hover,.hover\:bg-primary\/5:hover{background-color:var(--color-primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/5:hover{background-color:color-mix(in oklab,var(--color-primary)5%,transparent)}}.hover\:bg-primary\/75:hover{background-color:var(--color-primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/75:hover{background-color:color-mix(in oklab,var(--color-primary)75%,transparent)}}.hover\:text-white:hover{color:var(--color-white)}}.focus\:border-primary:focus{border-color:var(--color-primary)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-75:disabled{opacity:.75}@media (hover:hover){.disabled\:hover\:bg-primary:disabled:hover{background-color:var(--color-primary)}.disabled\:hover\:bg-transparent:disabled:hover{background-color:#0000}.disabled\:hover\:text-primary:disabled:hover{color:var(--color-primary)}.disabled\:hover\:text-white:disabled:hover{color:var(--color-white)}}@media (min-width:576px){.sm\:max-h-\[75vh\]{max-height:75vh}.sm\:max-h-\[95dvh\]{max-height:95dvh}.sm\:w-\[90\%\]{width:90%}}}:root{--ui-color-primary:#523ae4;--ui-color-secondary:#0f0d0d;--ui-color-accent:#f59e0b}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background-color:var(--color-gray-200)}::-webkit-scrollbar-thumb{background-color:var(--color-primary)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-gray-600)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}