@colorffy/ui 1.0.0

package/dist/types/navbar.d.ts

@@ -0,0 +1,184 @@
+export type NavbarClassName = string | string[] | Record<string, boolean>;
+/**
+ * Interface props for the Navbar component.
+ */
+export interface INavbarProps {
+    /**
+     * Enable sticky positioning with .nav-sticky wrapper.
+     * @default false
+     */
+    sticky?: boolean;
+    /**
+     * Use fluid container (.container-fluid vs .container).
+     * @default true
+     */
+    fluid?: boolean;
+    /**
+     * Optional custom CSS classes to apply to the navbar.
+     */
+    customClass?: NavbarClassName | null;
+}
+/**
+ * Interface props for the NavbarBrand component.
+ */
+export interface INavbarBrandProps {
+    /**
+     * Brand text to display.
+     */
+    text?: string;
+    /**
+     * Link target (for NuxtLink/router-link).
+     */
+    to?: string | object;
+    /**
+     * Standard href for <a> tag.
+     */
+    href?: string;
+    /**
+     * Brand logo image URL.
+     */
+    logo?: string | null;
+    /**
+     * Initials to show in avatar (if no logo).
+     */
+    initials?: string | null;
+    /**
+     * Optional custom CSS classes.
+     */
+    customClass?: NavbarClassName | null;
+}
+/**
+ * Interface props for the NavbarTitle component.
+ */
+export interface INavbarTitleProps {
+    /**
+     * Page title text to display.
+     */
+    title?: string;
+    /**
+     * Optional custom CSS classes.
+     */
+    customClass?: NavbarClassName | null;
+}
+/**
+ * Interface props for the NavbarToggle component.
+ */
+export interface INavbarToggleProps {
+    /**
+     * Whether sidebar is collapsed.
+     * Controls icon display and tooltip text.
+     * @default false
+     */
+    collapsed?: boolean;
+    /**
+     * Tooltip text when sidebar is expanded.
+     * @default 'Collapse sidebar'
+     */
+    collapseText?: string;
+    /**
+     * Tooltip text when sidebar is collapsed.
+     * @default 'Expand sidebar'
+     */
+    expandText?: string;
+    /**
+     * Optional custom CSS classes.
+     */
+    customClass?: NavbarClassName | null;
+}
+/**
+ * Interface props for the NavbarAvatar component.
+ */
+export interface INavbarAvatarProps {
+    /**
+     * Avatar image source URL.
+     */
+    src?: string | null;
+    /**
+     * Image alt text.
+     */
+    alt?: string;
+    /**
+     * Avatar size variant.
+     * - sm: Small avatar for mobile
+     * - navbar: Standard navbar avatar for desktop
+     * @default 'navbar'
+     */
+    size?: 'sm' | 'navbar';
+    /**
+     * Optional custom CSS classes.
+     */
+    customClass?: NavbarClassName | null;
+}
+/**
+ * Interface props for the NavbarMobileMenu component.
+ */
+export interface INavbarMobileMenuProps {
+    /**
+     * Optional custom CSS classes.
+     */
+    customClass?: NavbarClassName | null;
+}
+/**
+ * Interface props for the NavbarCollapse component.
+ */
+export interface INavbarCollapseProps {
+    /**
+     * Optional custom CSS classes.
+     */
+    customClass?: NavbarClassName | null;
+}
+/**
+ * Interface props for the NavbarNav component.
+ */
+export interface INavbarNavProps {
+    /**
+     * Navigation position.
+     * - start: Align left (.nav-start)
+     * - end: Align right (.nav-end)
+     * @default 'start'
+     */
+    position?: 'start' | 'end';
+    /**
+     * Optional custom CSS classes.
+     */
+    customClass?: NavbarClassName | null;
+}
+/**
+ * Interface props for the NavbarItem component.
+ */
+export interface INavbarItemProps {
+    /**
+     * Optional custom CSS classes.
+     */
+    customClass?: NavbarClassName | null;
+}
+/**
+ * Interface props for the NavbarLink component.
+ */
+export interface INavbarLinkProps {
+    /**
+     * Link text content.
+     */
+    text?: string;
+    /**
+     * Link target (for router-link or NuxtLink).
+     */
+    to?: string | object;
+    /**
+     * Standard href for <a> tag.
+     */
+    href?: string;
+    /**
+     * Mark link as active.
+     */
+    active?: boolean;
+    /**
+     * Disable the link.
+     */
+    disabled?: boolean;
+    /**
+     * Optional custom CSS classes.
+     */
+    customClass?: NavbarClassName | null;
+}
+//# sourceMappingURL=navbar.d.ts.map

package/dist/types/navbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../src/types/navbar.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAEzE;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAEnB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAA;IAEtB;;OAEG;IACH,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAE1B;;OAEG;IACH,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;CACrC"}

package/dist/types/sidebar.d.ts

@@ -0,0 +1,146 @@
+export type SidebarClassName = string | string[] | Record<string, boolean>;
+/**
+ * Interface props for the Sidebar (NavigationDrawer) component.
+ */
+export interface ISidebarProps {
+    /**
+     * Applies bordered variant (removes shadow, adds right border).
+     */
+    bordered?: boolean;
+    /**
+     * Rail mode - collapses sidebar to show only icons.
+     * Applies .drawer-closed class for compact view.
+     */
+    rail?: boolean;
+    /**
+     * Custom width of the sidebar.
+     * Sets --theme-nav-drawer-width CSS variable.
+     * When null/undefined, uses the default CSS variable value.
+     * @default null
+     */
+    width?: string | null;
+    /**
+     * Optional custom CSS classes to apply to the sidebar container.
+     */
+    customClass?: SidebarClassName | null;
+}
+/**
+ * Interface props for the SidebarLink component.
+ */
+export interface ISidebarLinkProps {
+    /**
+     * Optional ID for the link element.
+     */
+    id?: string;
+    /**
+     * Link text content.
+     */
+    text?: string;
+    /**
+     * Tooltip text shown on hover.
+     */
+    tooltipText?: string;
+    /**
+     * Link href (standard <a> tag).
+     */
+    href?: string;
+    /**
+     * Link target (for router-link or NuxtLink).
+     * Can be string or route object.
+     */
+    to?: string | object;
+    /**
+     * Material icon code for the link icon.
+     * Optional - link can be text-only without an icon.
+     */
+    icon?: string | null;
+    /**
+     * Tooltip placement position.
+     * @default 'right'
+     */
+    tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+    /**
+     * Marks link as active (applies .active class).
+     * Useful when not using router auto-detection.
+     */
+    active?: boolean;
+    /**
+     * Disables the link.
+     */
+    disabled?: boolean;
+    /**
+     * Marks as child/nested link (applies .drawer-item-child class with indentation).
+     */
+    child?: boolean;
+    /**
+     * Optional custom CSS classes to apply to the link.
+     */
+    customClass?: SidebarClassName | null;
+    /**
+     * ARIA labelledby attribute for accessibility.
+     */
+    ariaLabelledby?: string;
+}
+/**
+ * Interface props for the SidebarDropdown component.
+ * A dropdown component for sidebar header/footer with title, subtitle, and menu.
+ */
+export interface ISidebarDropdownProps {
+    /**
+     * Main title text displayed in the dropdown trigger.
+     */
+    title?: string;
+    /**
+     * Optional subtitle text displayed below the title.
+     */
+    subtitle?: string | null;
+    /**
+     * Enable interactive dropdown menu.
+     * When false, displays static content without dropdown.
+     * @default true
+     */
+    interactive?: boolean;
+    /**
+     * Dropdown menu placement position.
+     * Only applies when interactive is true.
+     * @default 'bottom'
+     */
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+    /**
+     * Optional custom CSS classes to apply to the dropdown content.
+     */
+    customClass?: string | null;
+}
+/**
+ * Interface props for the SidebarGroup component.
+ * Groups sidebar links together with an optional label.
+ */
+export interface ISidebarGroupProps {
+    /**
+     * Optional group label/text displayed above the grouped links.
+     */
+    text?: string;
+    /**
+     * Optional Material icon code for the group header.
+     * Only displayed when collapsible is true.
+     * @default null
+     */
+    icon?: string | null;
+    /**
+     * Enable collapsible behavior with expand/collapse functionality.
+     * When true, the group label becomes a clickable trigger with an arrow icon.
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Default open state for collapsible groups.
+     * Only applies when collapsible is true.
+     * @default true
+     */
+    defaultOpen?: boolean;
+    /**
+     * Optional custom CSS classes to apply to the group container.
+     */
+    customClass?: SidebarClassName | null;
+}
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/types/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/types/sidebar.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAE1E;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAErB;;OAEG;IACH,WAAW,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;CACtC;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,YAAY,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,CAAA;IAE1K;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAErC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAExB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,YAAY,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,CAAA;IAEnK;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;OAEG;IACH,WAAW,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;CACtC"}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@colorffy/ui",
+  "version": "1.0.0",
+  "description": "A modern Vue 3 component library built with TypeScript and Colorffy CSS",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./nuxt": {
+      "types": "./dist/nuxt.d.ts",
+      "import": "./dist/nuxt.js",
+      "require": "./dist/nuxt.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "prepublishOnly": "pnpm run build",
+    "fix:imports": "node scripts/fix-imports.js",
+    "publish": "npm publish --access public",
+    "version:patch": "npm version patch",
+    "version:minor": "npm version minor",
+    "version:major": "npm version major",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "@vueuse/components": "14.0.0",
+    "floating-vue": "^5.2.0",
+    "nuxt": "^4.2.0",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@colorffy/css": "workspace:*",
+    "@nuxt/kit": "^4.2.1",
+    "@nuxt/schema": "^4.2.1",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/vue3": "^8.6.14",
+    "@storybook/vue3-vite": "^8.6.14",
+    "@types/node": "^24.10.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vueuse/core": "^14.0.0",
+    "nuxt": "^4.2.0",
+    "storybook": "^8.6.14",
+    "typescript": "^5.4.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.0",
+    "vue-router": "^4.6.3",
+    "vue-tsc": "^2.0.0"
+  },
+  "keywords": [
+    "vue",
+    "components",
+    "ui",
+    "typescript"
+  ],
+  "author": "Giancarlos Garza",
+  "license": "ISC"
+}