oraculo-ui 0.1.0

package/dist/index.css

@@ -0,0 +1,216 @@
+/* src/atoms/OraculoButton/OraculoButton.css */
+.orc-btn {
+  --nl-green: #9EE86E;
+  --nl-hover-hex: #D9F6C6;
+  --nl-hover-alpha: .22;
+  --nl-press: #254B0C;
+  --nl-disabled-border: #4a5542;
+  --nl-disabled-fg: #4a5542;
+  --stroke-w: 1.5px;
+  --h: 32px;
+  --pad-x: 12px;
+  --pad-y: 8px;
+  --radius: 12px;
+  box-sizing: border-box;
+  height: var(--h);
+  font-family: var(--clmc-font);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  text-decoration: none;
+  border-radius: var(--radius);
+  outline: none;
+  position: relative;
+  padding: var(--pad-y) var(--pad-x);
+  border: 0;
+}
+.orc-btn__label {
+  color: currentColor;
+  font-size: 14px;
+}
+.orc-btn__icon {
+  color: currentColor;
+  display: inline-flex;
+  line-height: 0;
+  font-size: 18px;
+}
+.orc-btn--primary {
+  background: var(--nl-green);
+  color: #1C1C1C;
+  box-shadow: inset 0 0 0 var(--stroke-w) transparent;
+}
+.orc-btn--primary:hover {
+  background: var(--nl-hover-hex);
+  color: #1C1C1C;
+}
+.orc-btn--primary:active {
+  background: var(--nl-press);
+  color: #FFFFFF;
+  transform: translateY(1px);
+}
+.orc-btn--primary:disabled,
+.orc-btn--primary[aria-disabled=true] {
+  background: transparent;
+  color: var(--nl-disabled-fg);
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-disabled-border);
+  cursor: not-allowed;
+  transform: none;
+  opacity: 1;
+}
+.orc-btn--secondary {
+  background: transparent;
+  color: var(--nl-green);
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-green);
+}
+.orc-btn--secondary:hover {
+  background: rgba(229, 244, 219, var(--nl-hover-alpha)) !important;
+  color: var(--nl-hover-hex);
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-hover-hex);
+}
+.orc-btn--secondary:active {
+  transform: translateY(1px);
+  color: var(--nl-press);
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-press);
+  background: rgba(37, 75, 12, 0.10);
+}
+.orc-btn--secondary:focus-visible {
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-green), 0 0 0 3px rgba(197, 228, 177, .45);
+}
+.orc-btn--secondary:disabled,
+.orc-btn--secondary[aria-disabled=true] {
+  background: transparent;
+  color: var(--nl-disabled-fg);
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-disabled-border);
+  cursor: not-allowed;
+}
+.orc-btn--tertiary {
+  background: transparent;
+  color: var(--nl-green);
+  box-shadow: none;
+}
+.orc-btn--tertiary:hover {
+  color: var(--nl-hover-hex);
+}
+.orc-btn--tertiary:active {
+  color: var(--nl-press);
+  background: rgba(37, 75, 12, 0.08);
+  transform: translateY(1px);
+}
+.orc-btn--tertiary:focus-visible {
+  box-shadow: 0 0 0 3px rgba(197, 228, 177, .45);
+}
+.orc-btn--tertiary:disabled,
+.orc-btn--tertiary[aria-disabled=true] {
+  color: var(--nl-disabled-fg);
+  background: transparent;
+  box-shadow: none;
+  cursor: not-allowed;
+}
+.orc-btn--sm {
+  --h: 32px;
+  --pad-y: 8px;
+  --pad-x: 12px;
+  --radius: 12px;
+}
+.orc-btn--md {
+  --h: 40px;
+  --pad-y: 10px;
+  --pad-x: 16px;
+  --radius: 12px;
+}
+.orc-btn--lg {
+  --h: 48px;
+  --pad-y: 12px;
+  --pad-x: 20px;
+  --radius: 16px;
+}
+.orc-btn--sm .orc-btn__label,
+.orc-btn--md .orc-btn__label,
+.orc-btn--lg .orc-btn__label {
+  font-size: 14px !important;
+}
+.orc-btn--iconOnly {
+  width: 40px;
+  min-width: 40px;
+  padding: 0;
+}
+.orc-btn--sm.orc-btn--iconOnly {
+  width: 32px;
+  min-width: 32px;
+}
+.orc-btn--md.orc-btn--iconOnly {
+  width: 40px;
+  min-width: 40px;
+}
+.orc-btn--lg.orc-btn--iconOnly {
+  width: 48px;
+  min-width: 48px;
+}
+.orc-btn--full {
+  width: 100%;
+}
+.orc-btn--fullHeight {
+  height: 100%;
+}
+
+/* src/atoms/OraculoSectionTitle/OraculoSectionTitle.css */
+.orc-section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.orc-section-title__icon {
+  width: 40px;
+  height: 40px;
+  object-fit: none;
+}
+.orc-section-title__title {
+  margin: 0;
+  font-weight: 700;
+  letter-spacing: 0;
+  color: #ffffff;
+}
+.orc-section-title--xs .orc-section-title__title {
+  font-size: 14px;
+  line-height: 18px;
+}
+.orc-section-title--sm .orc-section-title__title {
+  font-size: 18px;
+  line-height: 24px;
+}
+.orc-section-title--md .orc-section-title__title {
+  font-size: 32px;
+  line-height: 48px;
+}
+.orc-section-title--lg .orc-section-title__title {
+  font-size: 22px;
+  line-height: 30px;
+}
+.orc-section-title--xs .orc-section-title__icon {
+  width: 24px;
+  height: 24px;
+}
+@media (max-width: 768px) {
+  .orc-section-title__icon {
+    width: 24px;
+    height: 24px;
+  }
+  .orc-section-title--xs .orc-section-title__title {
+    font-size: 14px;
+    line-height: 18px;
+  }
+  .orc-section-title--sm .orc-section-title__title {
+    font-size: 16px;
+    line-height: 22px;
+  }
+  .orc-section-title--md .orc-section-title__title {
+    font-size: 18px;
+    line-height: 24px;
+  }
+  .orc-section-title--lg .orc-section-title__title {
+    font-size: 20px;
+    line-height: 26px;
+  }
+}

package/dist/index.d.mts

@@ -0,0 +1,81 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode } from 'react';
+
+interface OraculoButtonProps {
+    children?: React.ReactNode;
+    onClick?: () => void;
+    href?: string;
+    target?: React.HTMLAttributeAnchorTarget;
+    rel?: string;
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+    variant?: "primary" | "secondary" | "tertiary";
+    size?: "sm" | "md" | "lg";
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    className?: string;
+    ariaLabel?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    iconOnly?: boolean;
+}
+declare function OraculoButton({ children, onClick, href, target, rel, type, disabled, variant, size, fullWidth, fullHeight, className, ariaLabel, leftIcon, rightIcon, iconOnly, }: OraculoButtonProps): react_jsx_runtime.JSX.Element;
+
+interface OraculoSectionTitleProps {
+    title: string;
+    iconUrl?: string;
+    size?: "xs" | "sm" | "md" | "lg";
+    className?: string;
+}
+declare function OraculoSectionTitle({ title, iconUrl, size, className, }: OraculoSectionTitleProps): react_jsx_runtime.JSX.Element;
+
+interface OraculoCarouselOptions {
+    type?: string;
+    perPage?: number;
+    gap?: string;
+    pagination?: boolean;
+    arrows?: boolean;
+    padding?: {
+        left?: string;
+        right?: string;
+    };
+    breakpoints?: Record<string | number, OraculoCarouselOptions>;
+    [key: string]: any;
+}
+interface OraculoCarouselRef {
+    next: () => void;
+    prev: () => void;
+    go: (index: number | string) => void;
+}
+interface OraculoCarouselProps<T = any> {
+    items: T[];
+    renderItem: (item: T, index: number) => ReactNode;
+    perPage?: number;
+    gap?: string;
+    breakpoints?: {};
+    options?: OraculoCarouselOptions;
+    className?: string;
+    onMove?: (info: {
+        index: number;
+        isStart: boolean;
+        isEnd: boolean;
+        total: number;
+    }) => void;
+}
+declare const OraculoCarousel: React.ForwardRefExoticComponent<OraculoCarouselProps<any> & React.RefAttributes<OraculoCarouselRef>>;
+
+interface OraculoDestacadoItem {
+    id?: string | number;
+    src: string;
+    alt: string;
+}
+interface OraculoSeccionDestacadosProps {
+    items: OraculoDestacadoItem[];
+    title?: string;
+    iconUrl?: string;
+    onViewMore?: () => void;
+    className?: string;
+}
+declare function OraculoSeccionDestacados({ items, title, iconUrl, onViewMore, className, }: OraculoSeccionDestacadosProps): react_jsx_runtime.JSX.Element;
+
+export { OraculoButton, type OraculoButtonProps, OraculoCarousel, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, type OraculoDestacadoItem, OraculoSeccionDestacados, type OraculoSeccionDestacadosProps, OraculoSectionTitle, type OraculoSectionTitleProps };

package/dist/index.d.ts

@@ -0,0 +1,81 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode } from 'react';
+
+interface OraculoButtonProps {
+    children?: React.ReactNode;
+    onClick?: () => void;
+    href?: string;
+    target?: React.HTMLAttributeAnchorTarget;
+    rel?: string;
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+    variant?: "primary" | "secondary" | "tertiary";
+    size?: "sm" | "md" | "lg";
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    className?: string;
+    ariaLabel?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    iconOnly?: boolean;
+}
+declare function OraculoButton({ children, onClick, href, target, rel, type, disabled, variant, size, fullWidth, fullHeight, className, ariaLabel, leftIcon, rightIcon, iconOnly, }: OraculoButtonProps): react_jsx_runtime.JSX.Element;
+
+interface OraculoSectionTitleProps {
+    title: string;
+    iconUrl?: string;
+    size?: "xs" | "sm" | "md" | "lg";
+    className?: string;
+}
+declare function OraculoSectionTitle({ title, iconUrl, size, className, }: OraculoSectionTitleProps): react_jsx_runtime.JSX.Element;
+
+interface OraculoCarouselOptions {
+    type?: string;
+    perPage?: number;
+    gap?: string;
+    pagination?: boolean;
+    arrows?: boolean;
+    padding?: {
+        left?: string;
+        right?: string;
+    };
+    breakpoints?: Record<string | number, OraculoCarouselOptions>;
+    [key: string]: any;
+}
+interface OraculoCarouselRef {
+    next: () => void;
+    prev: () => void;
+    go: (index: number | string) => void;
+}
+interface OraculoCarouselProps<T = any> {
+    items: T[];
+    renderItem: (item: T, index: number) => ReactNode;
+    perPage?: number;
+    gap?: string;
+    breakpoints?: {};
+    options?: OraculoCarouselOptions;
+    className?: string;
+    onMove?: (info: {
+        index: number;
+        isStart: boolean;
+        isEnd: boolean;
+        total: number;
+    }) => void;
+}
+declare const OraculoCarousel: React.ForwardRefExoticComponent<OraculoCarouselProps<any> & React.RefAttributes<OraculoCarouselRef>>;
+
+interface OraculoDestacadoItem {
+    id?: string | number;
+    src: string;
+    alt: string;
+}
+interface OraculoSeccionDestacadosProps {
+    items: OraculoDestacadoItem[];
+    title?: string;
+    iconUrl?: string;
+    onViewMore?: () => void;
+    className?: string;
+}
+declare function OraculoSeccionDestacados({ items, title, iconUrl, onViewMore, className, }: OraculoSeccionDestacadosProps): react_jsx_runtime.JSX.Element;
+
+export { OraculoButton, type OraculoButtonProps, OraculoCarousel, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, type OraculoDestacadoItem, OraculoSeccionDestacados, type OraculoSeccionDestacadosProps, OraculoSectionTitle, type OraculoSectionTitleProps };

package/dist/index.js

@@ -0,0 +1,357 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  OraculoButton: () => OraculoButton,
+  OraculoCarousel: () => OraculoCarousel_default,
+  OraculoSeccionDestacados: () => OraculoSeccionDestacados,
+  OraculoSectionTitle: () => OraculoSectionTitle
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/atoms/OraculoButton/OraculoButton.tsx
+var import_material = require("@mui/material");
+var import_jsx_runtime = require("react/jsx-runtime");
+function OraculoButton({
+  children,
+  onClick,
+  href,
+  target,
+  rel,
+  type = "button",
+  disabled = false,
+  variant = "primary",
+  size,
+  fullWidth = false,
+  fullHeight = false,
+  className = "",
+  ariaLabel,
+  leftIcon,
+  rightIcon,
+  iconOnly
+}) {
+  const hasText = !!children && children !== true;
+  const hasLeft = !!leftIcon;
+  const hasRight = !!rightIcon;
+  const onlyOneIcon = (hasLeft ? 1 : 0) + (hasRight ? 1 : 0) === 1;
+  const isIconOnly = iconOnly != null ? iconOnly : onlyOneIcon && !hasText;
+  const cls = [
+    "orc-btn",
+    variant === "secondary" ? "orc-btn--secondary" : variant === "tertiary" ? "orc-btn--tertiary" : "orc-btn--primary",
+    size ? `orc-btn--${size}` : "",
+    fullWidth ? "orc-btn--full" : "",
+    fullHeight ? "orc-btn--fullHeight" : "",
+    isIconOnly ? "orc-btn--iconOnly" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    leftIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "orc-btn__icon", children: leftIcon }),
+    !isIconOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "orc-btn__label", children }),
+    rightIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "orc-btn__icon", children: rightIcon })
+  ] });
+  const ariaDisabled = disabled ? true : void 0;
+  if (href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_material.Link,
+      {
+        href,
+        target,
+        rel,
+        "aria-label": ariaLabel,
+        "aria-disabled": ariaDisabled,
+        tabIndex: ariaDisabled ? -1 : void 0,
+        className: cls,
+        onClick: ariaDisabled ? (e) => e.preventDefault() : onClick,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type,
+      onClick,
+      disabled: !!ariaDisabled,
+      "aria-label": ariaLabel,
+      className: cls,
+      children: content
+    }
+  );
+}
+
+// src/atoms/OraculoSectionTitle/OraculoSectionTitle.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function OraculoSectionTitle({
+  title,
+  iconUrl,
+  size = "md",
+  className = ""
+}) {
+  const sizeClass = size ? `orc-section-title--${size}` : "";
+  const wrapperClass = [
+    "orc-section-title",
+    sizeClass,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: wrapperClass, children: [
+    iconUrl && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "img",
+      {
+        src: iconUrl,
+        alt: "",
+        className: "orc-section-title__icon"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "orc-section-title__title", children: title })
+  ] });
+}
+
+// src/molecules/OraculoCarousel/OraculoCarousel.tsx
+var import_react = require("react");
+var import_react_splide = require("@splidejs/react-splide");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Splide = import_react_splide.Splide;
+var SplideSlide = import_react_splide.SplideSlide;
+var OraculoCarousel = (0, import_react.forwardRef)(
+  ({
+    items = [],
+    renderItem,
+    perPage = 4,
+    gap = "12px",
+    breakpoints = {
+      1024: { perPage: 3, gap: "10px" },
+      768: { perPage: 1.3, gap: "10px", padding: { right: "16px" } }
+    },
+    options = {},
+    className = "",
+    onMove
+  }, ref) => {
+    const splideRef = (0, import_react.useRef)(null);
+    (0, import_react.useImperativeHandle)(ref, () => ({
+      next: () => {
+        var _a;
+        return (_a = splideRef.current) == null ? void 0 : _a.go(">");
+      },
+      prev: () => {
+        var _a;
+        return (_a = splideRef.current) == null ? void 0 : _a.go("<");
+      },
+      go: (index) => {
+        var _a;
+        return (_a = splideRef.current) == null ? void 0 : _a.go(index);
+      }
+    }));
+    const handleMove = (0, import_react.useCallback)(
+      (splide) => {
+        const index = splide.index;
+        const total = splide.length;
+        const perPage2 = splide.options.perPage || 1;
+        const isStart = index === 0;
+        const isEnd = index >= total - perPage2;
+        onMove == null ? void 0 : onMove({ index, isStart, isEnd, total });
+      },
+      [onMove]
+    );
+    const handleMounted = (0, import_react.useCallback)(
+      (splide) => {
+        handleMove(splide);
+      },
+      [handleMove]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Splide,
+      {
+        ref: splideRef,
+        options: {
+          type: "slide",
+          trimSpace: false,
+          perPage,
+          gap,
+          drag: true,
+          pagination: false,
+          rewind: false,
+          arrows: false,
+          focus: 0,
+          autoWidth: true,
+          breakpoints,
+          ...options
+        },
+        onMove: handleMove,
+        onMounted: handleMounted,
+        children: items.map((item, index) => {
+          var _a;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SplideSlide, { children: renderItem(item, index) }, (_a = item.id) != null ? _a : index);
+        })
+      }
+    ) });
+  }
+);
+var OraculoCarousel_default = OraculoCarousel;
+
+// src/organisms/OraculoSeccionDestacados/OraculoSeccionDestacados.tsx
+var import_react2 = require("react");
+
+// ../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js
+var import_utils = require("@mui/material/utils");
+
+// ../node_modules/@mui/icons-material/esm/ChevronLeftRounded.js
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ChevronLeftRounded_default = (0, import_utils.createSvgIcon)(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", {
+  d: "M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0s.39-1.02 0-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41"
+}), "ChevronLeftRounded");
+
+// ../node_modules/@mui/icons-material/esm/ChevronRightRounded.js
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ChevronRightRounded_default = (0, import_utils.createSvgIcon)(/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", {
+  d: "M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41s1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01"
+}), "ChevronRightRounded");
+
+// src/organisms/OraculoSeccionDestacados/OraculoSeccionDestacados.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function OraculoSeccionDestacados({
+  items,
+  title = "Destacados",
+  iconUrl,
+  onViewMore,
+  className = ""
+}) {
+  const carouselRef = (0, import_react2.useRef)(null);
+  const [navState, setNavState] = (0, import_react2.useState)({ isStart: true, isEnd: false });
+  const handlePrev = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.prev();
+  };
+  const handleNext = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.next();
+  };
+  const handleViewMore = () => {
+    onViewMore == null ? void 0 : onViewMore();
+  };
+  const sectionClassName = className || void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: sectionClassName, style: { width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "header",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr auto auto",
+          alignItems: "center",
+          columnGap: 12,
+          rowGap: 8,
+          marginBottom: 16
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            OraculoSectionTitle,
+            {
+              title,
+              iconUrl,
+              size: "md"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: 8
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Anterior",
+                    variant: "secondary",
+                    iconOnly: true,
+                    leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronLeftRounded_default, {}),
+                    onClick: handlePrev,
+                    disabled: navState.isStart
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Siguiente",
+                    variant: "secondary",
+                    iconOnly: true,
+                    rightIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronRightRounded_default, {}),
+                    onClick: handleNext,
+                    disabled: navState.isEnd
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      OraculoCarousel_default,
+      {
+        ref: carouselRef,
+        items,
+        perPage: 3.395,
+        gap: "16px",
+        options: { autoWidth: false },
+        breakpoints: {
+          768: { perPage: 1.15, focus: "start" },
+          1024: { perPage: 2.5, focus: "start" }
+        },
+        renderItem: (item) => {
+          var _a;
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "div",
+            {
+              style: {
+                textAlign: "center",
+                marginTop: 16
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "img",
+                {
+                  src: item.src,
+                  alt: item.alt,
+                  style: {
+                    width: "100%",
+                    height: "auto",
+                    borderRadius: 8,
+                    display: "block"
+                  }
+                }
+              )
+            },
+            (_a = item.id) != null ? _a : item.src
+          );
+        },
+        onMove: ({ isStart, isEnd }) => setNavState({ isStart, isEnd })
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OraculoButton,
+  OraculoCarousel,
+  OraculoSeccionDestacados,
+  OraculoSectionTitle
+});

package/dist/index.mjs

@@ -0,0 +1,335 @@
+// src/atoms/OraculoButton/OraculoButton.tsx
+import { Link as MuiLink } from "@mui/material";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function OraculoButton({
+  children,
+  onClick,
+  href,
+  target,
+  rel,
+  type = "button",
+  disabled = false,
+  variant = "primary",
+  size,
+  fullWidth = false,
+  fullHeight = false,
+  className = "",
+  ariaLabel,
+  leftIcon,
+  rightIcon,
+  iconOnly
+}) {
+  const hasText = !!children && children !== true;
+  const hasLeft = !!leftIcon;
+  const hasRight = !!rightIcon;
+  const onlyOneIcon = (hasLeft ? 1 : 0) + (hasRight ? 1 : 0) === 1;
+  const isIconOnly = iconOnly != null ? iconOnly : onlyOneIcon && !hasText;
+  const cls = [
+    "orc-btn",
+    variant === "secondary" ? "orc-btn--secondary" : variant === "tertiary" ? "orc-btn--tertiary" : "orc-btn--primary",
+    size ? `orc-btn--${size}` : "",
+    fullWidth ? "orc-btn--full" : "",
+    fullHeight ? "orc-btn--fullHeight" : "",
+    isIconOnly ? "orc-btn--iconOnly" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leftIcon && /* @__PURE__ */ jsx("span", { className: "orc-btn__icon", children: leftIcon }),
+    !isIconOnly && /* @__PURE__ */ jsx("span", { className: "orc-btn__label", children }),
+    rightIcon && /* @__PURE__ */ jsx("span", { className: "orc-btn__icon", children: rightIcon })
+  ] });
+  const ariaDisabled = disabled ? true : void 0;
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      MuiLink,
+      {
+        href,
+        target,
+        rel,
+        "aria-label": ariaLabel,
+        "aria-disabled": ariaDisabled,
+        tabIndex: ariaDisabled ? -1 : void 0,
+        className: cls,
+        onClick: ariaDisabled ? (e) => e.preventDefault() : onClick,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type,
+      onClick,
+      disabled: !!ariaDisabled,
+      "aria-label": ariaLabel,
+      className: cls,
+      children: content
+    }
+  );
+}
+
+// src/atoms/OraculoSectionTitle/OraculoSectionTitle.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function OraculoSectionTitle({
+  title,
+  iconUrl,
+  size = "md",
+  className = ""
+}) {
+  const sizeClass = size ? `orc-section-title--${size}` : "";
+  const wrapperClass = [
+    "orc-section-title",
+    sizeClass,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs2("div", { className: wrapperClass, children: [
+    iconUrl && /* @__PURE__ */ jsx2(
+      "img",
+      {
+        src: iconUrl,
+        alt: "",
+        className: "orc-section-title__icon"
+      }
+    ),
+    /* @__PURE__ */ jsx2("h2", { className: "orc-section-title__title", children: title })
+  ] });
+}
+
+// src/molecules/OraculoCarousel/OraculoCarousel.tsx
+import {
+  useRef,
+  useImperativeHandle,
+  forwardRef,
+  useCallback
+} from "react";
+import {
+  Splide as SplideRaw,
+  SplideSlide as SplideSlideRaw
+} from "@splidejs/react-splide";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Splide = SplideRaw;
+var SplideSlide = SplideSlideRaw;
+var OraculoCarousel = forwardRef(
+  ({
+    items = [],
+    renderItem,
+    perPage = 4,
+    gap = "12px",
+    breakpoints = {
+      1024: { perPage: 3, gap: "10px" },
+      768: { perPage: 1.3, gap: "10px", padding: { right: "16px" } }
+    },
+    options = {},
+    className = "",
+    onMove
+  }, ref) => {
+    const splideRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+      next: () => {
+        var _a;
+        return (_a = splideRef.current) == null ? void 0 : _a.go(">");
+      },
+      prev: () => {
+        var _a;
+        return (_a = splideRef.current) == null ? void 0 : _a.go("<");
+      },
+      go: (index) => {
+        var _a;
+        return (_a = splideRef.current) == null ? void 0 : _a.go(index);
+      }
+    }));
+    const handleMove = useCallback(
+      (splide) => {
+        const index = splide.index;
+        const total = splide.length;
+        const perPage2 = splide.options.perPage || 1;
+        const isStart = index === 0;
+        const isEnd = index >= total - perPage2;
+        onMove == null ? void 0 : onMove({ index, isStart, isEnd, total });
+      },
+      [onMove]
+    );
+    const handleMounted = useCallback(
+      (splide) => {
+        handleMove(splide);
+      },
+      [handleMove]
+    );
+    return /* @__PURE__ */ jsx3("div", { className, style: { width: "100%" }, children: /* @__PURE__ */ jsx3(
+      Splide,
+      {
+        ref: splideRef,
+        options: {
+          type: "slide",
+          trimSpace: false,
+          perPage,
+          gap,
+          drag: true,
+          pagination: false,
+          rewind: false,
+          arrows: false,
+          focus: 0,
+          autoWidth: true,
+          breakpoints,
+          ...options
+        },
+        onMove: handleMove,
+        onMounted: handleMounted,
+        children: items.map((item, index) => {
+          var _a;
+          return /* @__PURE__ */ jsx3(SplideSlide, { children: renderItem(item, index) }, (_a = item.id) != null ? _a : index);
+        })
+      }
+    ) });
+  }
+);
+var OraculoCarousel_default = OraculoCarousel;
+
+// src/organisms/OraculoSeccionDestacados/OraculoSeccionDestacados.tsx
+import { useRef as useRef2, useState } from "react";
+
+// ../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js
+import { createSvgIcon } from "@mui/material/utils";
+
+// ../node_modules/@mui/icons-material/esm/ChevronLeftRounded.js
+import { jsx as _jsx } from "react/jsx-runtime";
+var ChevronLeftRounded_default = createSvgIcon(/* @__PURE__ */ _jsx("path", {
+  d: "M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0s.39-1.02 0-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41"
+}), "ChevronLeftRounded");
+
+// ../node_modules/@mui/icons-material/esm/ChevronRightRounded.js
+import { jsx as _jsx2 } from "react/jsx-runtime";
+var ChevronRightRounded_default = createSvgIcon(/* @__PURE__ */ _jsx2("path", {
+  d: "M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41s1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01"
+}), "ChevronRightRounded");
+
+// src/organisms/OraculoSeccionDestacados/OraculoSeccionDestacados.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function OraculoSeccionDestacados({
+  items,
+  title = "Destacados",
+  iconUrl,
+  onViewMore,
+  className = ""
+}) {
+  const carouselRef = useRef2(null);
+  const [navState, setNavState] = useState({ isStart: true, isEnd: false });
+  const handlePrev = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.prev();
+  };
+  const handleNext = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.next();
+  };
+  const handleViewMore = () => {
+    onViewMore == null ? void 0 : onViewMore();
+  };
+  const sectionClassName = className || void 0;
+  return /* @__PURE__ */ jsxs3("section", { className: sectionClassName, style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxs3(
+      "header",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr auto auto",
+          alignItems: "center",
+          columnGap: 12,
+          rowGap: 8,
+          marginBottom: 16
+        },
+        children: [
+          /* @__PURE__ */ jsx4(
+            OraculoSectionTitle,
+            {
+              title,
+              iconUrl,
+              size: "md"
+            }
+          ),
+          /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: 8
+              },
+              children: [
+                /* @__PURE__ */ jsx4(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Anterior",
+                    variant: "secondary",
+                    iconOnly: true,
+                    leftIcon: /* @__PURE__ */ jsx4(ChevronLeftRounded_default, {}),
+                    onClick: handlePrev,
+                    disabled: navState.isStart
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Siguiente",
+                    variant: "secondary",
+                    iconOnly: true,
+                    rightIcon: /* @__PURE__ */ jsx4(ChevronRightRounded_default, {}),
+                    onClick: handleNext,
+                    disabled: navState.isEnd
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx4(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      OraculoCarousel_default,
+      {
+        ref: carouselRef,
+        items,
+        perPage: 3.395,
+        gap: "16px",
+        options: { autoWidth: false },
+        breakpoints: {
+          768: { perPage: 1.15, focus: "start" },
+          1024: { perPage: 2.5, focus: "start" }
+        },
+        renderItem: (item) => {
+          var _a;
+          return /* @__PURE__ */ jsx4(
+            "div",
+            {
+              style: {
+                textAlign: "center",
+                marginTop: 16
+              },
+              children: /* @__PURE__ */ jsx4(
+                "img",
+                {
+                  src: item.src,
+                  alt: item.alt,
+                  style: {
+                    width: "100%",
+                    height: "auto",
+                    borderRadius: 8,
+                    display: "block"
+                  }
+                }
+              )
+            },
+            (_a = item.id) != null ? _a : item.src
+          );
+        },
+        onMove: ({ isStart, isEnd }) => setNavState({ isStart, isEnd })
+      }
+    )
+  ] });
+}
+export {
+  OraculoButton,
+  OraculoCarousel_default as OraculoCarousel,
+  OraculoSeccionDestacados,
+  OraculoSectionTitle
+};

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "oraculo-ui",
+  "version": "0.1.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "./dist/index.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --dts --format cjs,esm --out-dir dist --target=es2019 --tsconfig ./tsconfig.json"
+  },
+  "peerDependencies": {
+    "@mui/material": ">=5",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@splidejs/react-splide": ">=0.7.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}