@zekidev/ui 2.0.0

package/dist/sections/tabs/index.d.ts

@@ -0,0 +1,7 @@
+import type { TabsSection } from "../../types";
+import { TabsStandard } from "./variants/tabs-standard";
+import { TabsVertical } from "./variants/tabs-vertical";
+import { TabsUnderline } from "./variants/tabs-underline";
+import { TabsPills } from "./variants/tabs-pills";
+export declare function TabsSection(props: TabsSection): import("react/jsx-runtime").JSX.Element;
+export { TabsStandard, TabsVertical, TabsUnderline, TabsPills };

package/dist/sections/tabs/variants/tabs-pills.d.ts

@@ -0,0 +1,2 @@
+import type { TabsSection } from "../../../types";
+export declare function TabsPills({ title, subtitle, content, badge, items, background }: TabsSection): import("react/jsx-runtime").JSX.Element | null;

package/dist/sections/tabs/variants/tabs-standard.d.ts

@@ -0,0 +1,2 @@
+import type { TabsSection } from "../../../types";
+export declare function TabsStandard({ title, subtitle, content, badge, items, background }: TabsSection): import("react/jsx-runtime").JSX.Element | null;

package/dist/sections/tabs/variants/tabs-underline.d.ts

@@ -0,0 +1,2 @@
+import type { TabsSection } from "../../../types";
+export declare function TabsUnderline({ title, subtitle, content, badge, items, background }: TabsSection): import("react/jsx-runtime").JSX.Element | null;

package/dist/sections/tabs/variants/tabs-vertical.d.ts

@@ -0,0 +1,2 @@
+import type { TabsSection } from "../../../types";
+export declare function TabsVertical({ title, subtitle, content, badge, items, background }: TabsSection): import("react/jsx-runtime").JSX.Element | null;

package/dist/sections/team/index.d.ts

@@ -0,0 +1,6 @@
+import type { TeamSection } from "../../types";
+import { TeamGrid } from "./variants/team-grid";
+import { TeamCards } from "./variants/team-cards";
+import { TeamMinimal } from "./variants/team-minimal";
+export declare function Team(props: TeamSection): import("react/jsx-runtime").JSX.Element;
+export { TeamGrid, TeamCards, TeamMinimal };

package/dist/sections/team/variants/team-cards.d.ts

@@ -0,0 +1,2 @@
+import type { TeamSection } from "../../../types";
+export declare function TeamCards({ title, subtitle, content, badge, items, background, }: TeamSection): import("react/jsx-runtime").JSX.Element;

package/dist/sections/team/variants/team-grid.d.ts

@@ -0,0 +1,2 @@
+import type { TeamSection } from "../../../types";
+export declare function TeamGrid({ title, subtitle, content, badge, items, columns, background, }: TeamSection): import("react/jsx-runtime").JSX.Element;

package/dist/sections/team/variants/team-minimal.d.ts

@@ -0,0 +1,2 @@
+import type { TeamSection } from "../../../types";
+export declare function TeamMinimal({ title, subtitle, content, badge, items, background, }: TeamSection): import("react/jsx-runtime").JSX.Element;

package/dist/sections/testimonials/index.d.ts

@@ -0,0 +1,6 @@
+import type { TestimonialsSection } from "../../types";
+import { TestimonialsGrid } from "./variants/testimonials-grid";
+import { TestimonialsCarousel } from "./variants/testimonials-carousel";
+import { TestimonialsFeatured } from "./variants/testimonials-featured";
+export declare function Testimonials(props: TestimonialsSection): import("react/jsx-runtime").JSX.Element;
+export { TestimonialsGrid, TestimonialsCarousel, TestimonialsFeatured };

package/dist/sections/testimonials/variants/testimonials-carousel.d.ts

@@ -0,0 +1,2 @@
+import type { TestimonialsSection } from "../../../types";
+export declare function TestimonialsCarousel({ title, subtitle, content, badge, items, background, }: TestimonialsSection): import("react/jsx-runtime").JSX.Element;

package/dist/sections/testimonials/variants/testimonials-featured.d.ts

@@ -0,0 +1,2 @@
+import type { TestimonialsSection } from "../../../types";
+export declare function TestimonialsFeatured({ title, subtitle, content, badge, items, background, }: TestimonialsSection): import("react/jsx-runtime").JSX.Element;

package/dist/sections/testimonials/variants/testimonials-grid.d.ts

@@ -0,0 +1,2 @@
+import type { TestimonialsSection } from "../../../types";
+export declare function TestimonialsGrid({ title, subtitle, content, badge, items, background, }: TestimonialsSection): import("react/jsx-runtime").JSX.Element;

package/dist/sections/video/index.d.ts

@@ -0,0 +1,6 @@
+import type { VideoSection as VideoSectionType } from "../../types";
+import { VideoFull } from "./variants/video-full";
+import { VideoContained } from "./variants/video-contained";
+import { VideoWithText } from "./variants/video-with-text";
+export declare function VideoSection(props: VideoSectionType): import("react/jsx-runtime").JSX.Element;
+export { VideoFull, VideoContained, VideoWithText };

package/dist/sections/video/variants/video-contained.d.ts

@@ -0,0 +1,2 @@
+import type { VideoSection } from "../../../types";
+export declare function VideoContained({ title, subtitle, content, badge, videoUrl, poster, autoplay, loop, muted, background }: VideoSection): import("react/jsx-runtime").JSX.Element;

package/dist/sections/video/variants/video-full.d.ts

@@ -0,0 +1,2 @@
+import type { VideoSection } from "../../../types";
+export declare function VideoFull({ title, subtitle, content, badge, videoUrl, poster, autoplay, loop, muted, background }: VideoSection): import("react/jsx-runtime").JSX.Element;

package/dist/sections/video/variants/video-with-text.d.ts

@@ -0,0 +1,2 @@
+import type { VideoSection } from "../../../types";
+export declare function VideoWithText({ title, subtitle, content, badge, videoUrl, poster, autoplay, loop, muted, background }: VideoSection): import("react/jsx-runtime").JSX.Element;

package/dist/sections/video/video-player.d.ts

@@ -0,0 +1,11 @@
+interface VideoPlayerProps {
+    url: string;
+    poster?: string;
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    className?: string;
+    title?: string;
+}
+export declare function VideoPlayer({ url, poster, autoplay, loop, muted, className, title }: VideoPlayerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/sections/video/video-utils.d.ts

@@ -0,0 +1,6 @@
+export type VideoType = "youtube" | "vimeo" | "native";
+export interface ParsedVideo {
+    type: VideoType;
+    embedUrl: string;
+}
+export declare function parseVideoUrl(url: string): ParsedVideo | null;

package/dist/types/index.d.ts

@@ -0,0 +1,440 @@
+export type ColorPalette = "default" | "rose" | "orange" | "green" | "violet" | "teal" | "yellow" | "red" | "custom";
+export type ThemeMode = "light" | "dark" | "system";
+export interface CustomPalette {
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    accent: string;
+    accentForeground: string;
+    background: string;
+    foreground: string;
+    muted: string;
+    mutedForeground: string;
+    border: string;
+}
+export interface SiteTheme {
+    mode: ThemeMode;
+    palette: ColorPalette;
+    customPalette?: CustomPalette;
+    radius?: number;
+}
+export interface CTAButton {
+    label: string;
+    href: string;
+    variant?: "default" | "outline" | "secondary" | "ghost" | "link" | "success" | "info" | "warning" | "error";
+    size?: "default" | "sm" | "lg" | "xl";
+}
+export interface MediaAsset {
+    url: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+}
+export interface SectionBase {
+    _key?: string;
+    _type: string;
+    /** HTML id attribute — used for anchor scroll links (e.g. href="#contacto") */
+    id?: string;
+    variant?: string;
+    badge?: string;
+    title?: string;
+    subtitle?: string;
+    /** HTML string from TipTap, rendered below subtitle in all sections */
+    content?: string;
+    paddingTop?: "none" | "sm" | "md" | "lg" | "xl";
+    paddingBottom?: "none" | "sm" | "md" | "lg" | "xl";
+    background?: "default" | "muted" | "primary" | "secondary" | "success" | "info" | "warning" | "error";
+}
+export type HeroVariant = "centered" | "split" | "left" | "video" | "minimal" | "background" | "card";
+export interface HeroSection extends SectionBase {
+    _type: "hero";
+    variant: HeroVariant;
+    heading: string;
+    subheading?: string;
+    description?: string;
+    primaryCTA?: CTAButton;
+    secondaryCTA?: CTAButton;
+    image?: MediaAsset;
+    /** Resolved URL — either from a Sanity file asset or a pasted external URL */
+    videoUrl?: string;
+    /** Thumbnail shown while the video loads (video variant only) */
+    videoPoster?: MediaAsset;
+    overlayOpacity?: number;
+}
+export type FAQVariant = "accordion" | "two-column" | "numbered" | "cards";
+export interface FAQItem {
+    question: string;
+    answer: string;
+}
+export interface FAQSection extends SectionBase {
+    _type: "faq";
+    variant: FAQVariant;
+    items: FAQItem[];
+    cta?: CTAButton;
+}
+export type GalleryVariant = "grid" | "carousel" | "mosaic";
+export interface GalleryItem {
+    image: MediaAsset;
+    caption?: string;
+}
+export interface GallerySection extends SectionBase {
+    _type: "gallery";
+    variant: GalleryVariant;
+    items: GalleryItem[];
+    columns?: 2 | 3 | 4;
+}
+export type KPIsVariant = "counters" | "cards" | "bars" | "minimal";
+export interface KPIItem {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: string;
+    prefix?: string;
+    suffix?: string;
+}
+export interface KPIsSection extends SectionBase {
+    _type: "kpis";
+    variant: KPIsVariant;
+    items: KPIItem[];
+}
+export type CardsVariant = "grid" | "horizontal" | "featured" | "pricing";
+export interface CardItem {
+    title: string;
+    description?: string;
+    image?: MediaAsset;
+    icon?: string;
+    badge?: string;
+    cta?: CTAButton;
+    price?: string;
+    priceFrequency?: string;
+    features?: string[];
+    highlighted?: boolean;
+}
+export interface CardsSection extends SectionBase {
+    _type: "cards";
+    variant: CardsVariant;
+    items: CardItem[];
+    columns?: 2 | 3 | 4;
+}
+export type ScrollableVariant = "horizontal" | "timeline" | "marquee" | "parallax";
+export interface ScrollableItem {
+    title: string;
+    description?: string;
+    image?: MediaAsset;
+    icon?: string;
+    date?: string;
+    label?: string;
+}
+export interface ScrollableSection extends SectionBase {
+    _type: "scrollable";
+    variant: ScrollableVariant;
+    items: ScrollableItem[];
+    speed?: "slow" | "normal" | "fast";
+    direction?: "left" | "right";
+}
+export type TabsVariant = "standard" | "vertical" | "underline" | "pills";
+export interface TabItem {
+    label: string;
+    content: string;
+    image?: MediaAsset;
+    icon?: string;
+}
+export interface TabsSection extends SectionBase {
+    _type: "tabs";
+    variant: TabsVariant;
+    items: TabItem[];
+}
+export type TestimonialsVariant = "grid" | "carousel" | "featured";
+export interface TestimonialItem {
+    quote: string;
+    author: string;
+    role?: string;
+    company?: string;
+    avatar?: MediaAsset;
+    rating?: number;
+}
+export interface TestimonialsSection extends SectionBase {
+    _type: "testimonials";
+    variant: TestimonialsVariant;
+    items: TestimonialItem[];
+}
+export type LogosVariant = "grid" | "marquee" | "cloud";
+export interface LogoItem {
+    image: MediaAsset;
+    name: string;
+    href?: string;
+}
+export interface LogosSection extends SectionBase {
+    _type: "logos";
+    variant: LogosVariant;
+    items: LogoItem[];
+}
+export type CTASectionVariant = "centered" | "split" | "banner";
+export interface CTASection extends SectionBase {
+    _type: "cta";
+    variant: CTASectionVariant;
+    heading: string;
+    description?: string;
+    primaryCTA?: CTAButton;
+    secondaryCTA?: CTAButton;
+    image?: MediaAsset;
+}
+export type FeaturesVariant = "grid" | "alternating" | "bento";
+export interface FeatureItem {
+    title: string;
+    description?: string;
+    icon?: string;
+    image?: MediaAsset;
+    badge?: string;
+}
+export interface FeaturesSection extends SectionBase {
+    _type: "features";
+    variant: FeaturesVariant;
+    items: FeatureItem[];
+    columns?: 2 | 3 | 4;
+}
+export type StepsVariant = "numbered" | "horizontal" | "with-image";
+export interface StepItem {
+    title: string;
+    description?: string;
+    image?: MediaAsset;
+    icon?: string;
+}
+export interface StepsSection extends SectionBase {
+    _type: "steps";
+    variant: StepsVariant;
+    items: StepItem[];
+}
+export type TeamVariant = "grid" | "cards" | "minimal";
+export interface TeamMember {
+    name: string;
+    role?: string;
+    bio?: string;
+    avatar?: MediaAsset;
+    twitter?: string;
+    linkedin?: string;
+}
+export interface TeamSection extends SectionBase {
+    _type: "team";
+    variant: TeamVariant;
+    items: TeamMember[];
+    columns?: 2 | 3 | 4;
+}
+export type ContactVariant = "simple" | "split";
+export interface ContactDetails {
+    email?: string;
+    phone?: string;
+    address?: string;
+    hours?: string;
+}
+export interface ContactSection extends SectionBase {
+    _type: "contact";
+    variant: ContactVariant;
+    details: ContactDetails;
+    cta?: CTAButton;
+    image?: MediaAsset;
+}
+export type BannerVariant = "simple" | "dismissible";
+export interface BannerSection extends SectionBase {
+    _type: "banner";
+    variant: BannerVariant;
+    message: string;
+    cta?: CTAButton;
+}
+export type MapVariant = "pins" | "listing" | "split";
+export type MapStyle = "standard" | "light" | "dark" | "voyager" | "topo" | "satellite" | "streets";
+export interface MapLocation {
+    name: string;
+    address?: string;
+    phone?: string;
+    hours?: string;
+    description?: string;
+    lat?: number;
+    lng?: number;
+}
+export interface MapSection extends SectionBase {
+    _type: "maps";
+    variant: MapVariant;
+    mapStyle?: MapStyle;
+    locations: MapLocation[];
+    embedUrl?: string;
+}
+export type IframeVariant = "simple" | "card" | "responsive";
+export interface IframeSection extends SectionBase {
+    _type: "iframe";
+    variant: IframeVariant;
+    src: string;
+    iframeTitle: string;
+    height?: number;
+    aspectRatio?: "video" | "square" | "auto";
+}
+export type ComparisonVariant = "table" | "cards" | "highlights";
+export interface ComparisonColumn {
+    name: string;
+    description?: string;
+    price?: string;
+    priceFrequency?: string;
+    badge?: string;
+    highlighted?: boolean;
+    cta?: CTAButton;
+    /** Cell content per row, indexed to match allFeatures. Empty string = not included (shows —). */
+    cells: string[];
+}
+export interface ComparisonSection extends SectionBase {
+    _type: "comparison";
+    variant: ComparisonVariant;
+    columns: ComparisonColumn[];
+    allFeatures: string[];
+}
+export type DuplexVariant = "image-left" | "image-right" | "stacked";
+export interface DuplexSection extends SectionBase {
+    _type: "duplex";
+    variant: DuplexVariant;
+    heading: string;
+    body?: string;
+    image?: MediaAsset;
+    videoUrl?: string;
+    primaryCTA?: CTAButton;
+    secondaryCTA?: CTAButton;
+    bullets?: string[];
+}
+export type RichtextVariant = "centered" | "wide" | "two-column";
+export interface RichtextSection extends SectionBase {
+    _type: "richtext";
+    variant: RichtextVariant;
+    /** HTML string produced by TipTap editor — this IS the section content, not a subtitle supplement */
+    content: string;
+}
+export type VideoSectionVariant = "full" | "contained" | "with-text";
+export interface VideoSection extends SectionBase {
+    _type: "video";
+    variant: VideoSectionVariant;
+    videoUrl: string;
+    poster?: MediaAsset;
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+}
+export type NewsletterVariant = "centered" | "card" | "inline";
+export interface NewsletterSection extends SectionBase {
+    _type: "newsletter";
+    variant: NewsletterVariant;
+    buttonLabel?: string;
+    placeholder?: string;
+    successMessage?: string;
+}
+export type EventRegistrationVariant = "centered" | "card" | "split";
+export type FormFieldType = "text" | "email" | "tel" | "date" | "number" | "textarea" | "select" | "image";
+export interface FormField {
+    label: string;
+    fieldType: FormFieldType;
+    required?: boolean;
+    placeholder?: string;
+    /** Options for select fields */
+    options?: string[];
+}
+export interface EventRegistrationSection extends SectionBase {
+    _type: "eventRegistration";
+    variant: EventRegistrationVariant;
+    /** Unique identifier used to tag all submissions from this form */
+    formId: string;
+    fields: FormField[];
+    buttonLabel?: string;
+    successMessage?: string;
+    image?: MediaAsset;
+}
+export type DownloadsVariant = "grouped" | "accordion" | "flat";
+export interface DownloadFile {
+    _key: string;
+    label: string;
+    file: {
+        url: string;
+        originalFilename?: string;
+        mimeType?: string;
+        size?: number;
+    };
+}
+export interface DownloadGroup {
+    _key: string;
+    title: string;
+    files: DownloadFile[];
+}
+export interface DownloadsSection extends SectionBase {
+    _type: "downloads";
+    variant: DownloadsVariant;
+    groups: DownloadGroup[];
+}
+export type WidgetType = "spotify" | "youtube";
+export type WidgetPosition = "floating" | "sidebar";
+export interface PageWidget {
+    _key: string;
+    type: WidgetType;
+    url: string;
+    embedUrl: string;
+    position: WidgetPosition;
+    height: number;
+}
+export type PageSection = HeroSection | FAQSection | GallerySection | KPIsSection | CardsSection | ScrollableSection | TabsSection | TestimonialsSection | LogosSection | CTASection | FeaturesSection | StepsSection | TeamSection | ContactSection | BannerSection | MapSection | IframeSection | ComparisonSection | DuplexSection | RichtextSection | VideoSection | EventRegistrationSection | NewsletterSection | DownloadsSection;
+export interface Page {
+    _id: string;
+    _type: "page";
+    title: string;
+    slug: {
+        current: string;
+    };
+    sections: PageSection[];
+    widgets?: PageWidget[];
+    backgroundMusic?: BackgroundMusic;
+    seo?: {
+        title?: string;
+        description?: string;
+        image?: MediaAsset;
+    };
+}
+export type HeaderVariant = "default" | "transparent" | "centered" | "minimal" | "floating" | "dark" | "split";
+export type FooterVariant = "default" | "columns" | "minimal";
+export type LayoutVariant = "default" | "boxed" | "contained" | "side-nav" | "side-nav-right" | "fullscreen";
+export interface BackgroundMusic {
+    /** Audio file URL (Sanity CDN or external) */
+    url: string;
+    loop?: boolean;
+    /** 0–100 */
+    volume?: number;
+    /**
+     * true  → plays automatically after the user's first interaction (click / scroll / key).
+     * false → user must click the play button explicitly.
+     */
+    autoplayOnInteraction?: boolean;
+}
+export interface SiteSettings {
+    _id: string;
+    _type: "siteSettings";
+    siteName: string;
+    logo?: MediaAsset;
+    theme: SiteTheme;
+    headerVariant?: HeaderVariant;
+    footerVariant?: FooterVariant;
+    layoutVariant?: LayoutVariant;
+    navigation?: {
+        links: {
+            label: string;
+            href: string;
+        }[];
+    };
+    footer?: {
+        text?: string;
+        description?: string;
+        links?: {
+            label: string;
+            href: string;
+        }[];
+        columns?: {
+            title: string;
+            links: {
+                label: string;
+                href: string;
+            }[];
+        }[];
+    };
+}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@zekidev/ui",
+  "version": "2.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    },
+    "./styles": "./src/styles/globals.css",
+    "./tailwind-config": "./tailwind.config.ts"
+  },
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/styles",
+    "tailwind.config.ts"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@portabletext/react": "^3.0.0",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "date-fns": "^4.3.0",
+    "embla-carousel-react": "^8.1.0",
+    "framer-motion": "^11.2.0",
+    "leaflet": "^1.9.4",
+    "lucide-react": "^0.378.0",
+    "react-day-picker": "^10.0.1",
+    "react-leaflet": "^4.2.1",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/leaflet": "^1.9.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tailwindcss": "^3.4.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  },
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig.build.json",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --ext ts,tsx"
+  },
+  "module": "./dist/index.js"
+}