@bailaya/react 1.0.25 → 1.0.26

package/dist/components/ClassSchedule.d.ts

@@ -1,12 +1,14 @@
-import React from 'react';
-import type { StudioClass } from '@bailaya/core';
+import React from "react";
+import type { StudioClass } from "@bailaya/core";
 export interface ClassScheduleProps {
     /** Optional start date for the 7-day window; defaults to today */
     from?: Date;
     /** Optional studio ID to override the default configured ID */
     overrideId?: string;
-    /** Locale code for date formatting (e.g. "en", "es"); falls back to browser default */
+    /** Locale code for date/price formatting (e.g. "en", "es"); falls back to browser default */
     locale?: string;
+    /** Currency code for price formatting (e.g., "USD", "MXN"). If omitted, shows decimal. */
+    currency?: string;
     /** Custom labels (e.g. for "Instructor:" text) */
     labels?: {
         /** Label text for the instructor line; defaults to "Instructor:" */
@@ -16,25 +18,50 @@ export interface ClassScheduleProps {
     className?: string;
     /** Each class "card" wrapper */
     itemClassName?: string;
+    /** Wrapper for the inner row (left/right) */
+    rowClassName?: string;
+    /** Left column (title/meta/instructor) */
+    leftClassName?: string;
     /** Class name element */
     nameClassName?: string;
+    /** Level element "(Beginner)" */
+    levelClassName?: string;
     /** Details (date/time) element */
     detailsClassName?: string;
     /** Instructor line element */
     instructorClassName?: string;
+    /** Right column container (price + button) */
+    rightClassName?: string;
+    /** Price element */
+    priceClassName?: string;
+    /** Button element */
+    buttonClassName?: string;
+    /** Text for the Book CTA (i18n). Default: "Book This Class" */
+    bookNowText?: string;
+    /** Base URL for booking links. Default: "https://www.bailaya.com/book/" */
+    bookBaseUrl?: string;
+    /** Hide the Book button entirely. Default: false */
+    hideBookButton?: boolean;
+    /** Custom price formatter (overrides `currency`) */
+    formatPrice?: (price: number, cls: StudioClass) => string;
     /**
-     * Completely override the default renderItem
+     * Optional link renderer.
+     * If not provided, a plain <a> will be rendered.
      */
+    renderLink?: (opts: {
+        href: string;
+        className?: string;
+        children: React.ReactNode;
+    }) => React.ReactNode;
+    /** Completely override the default renderItem */
     renderItem?: (cls: StudioClass) => React.ReactNode;
 }
 /**
  * Displays an upcoming-class schedule for a studio:
- * • name + level
- * • weekday, MM-DD, time
- * • optional instructor
- *
- * Uses sensible Tailwind defaults, but you can override
- * every slot via props or replace the layout entirely.
+ * - name + level
+ * - weekday, date, time
+ * - optional instructor
+ * - RIGHT: price + "Book This Class" CTA
  */
 export declare const ClassSchedule: React.FC<ClassScheduleProps>;
 //# sourceMappingURL=ClassSchedule.d.ts.map

package/dist/components/ClassSchedule.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClassSchedule.d.ts","sourceRoot":"","sources":["../../src/components/ClassSchedule.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGjD,MAAM,WAAW,kBAAkB;IACjC,kEAAkE;IAClE,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uFAAuF;IACvF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kDAAkD;IAClD,MAAM,CAAC,EAAE;QACP,oEAAoE;QACpE,UAAU,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,yBAAyB;IACzB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,8BAA8B;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,KAAK,CAAC,SAAS,CAAA;CACnD;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4DtD,CAAA"}
+{"version":3,"file":"ClassSchedule.d.ts","sourceRoot":"","sources":["../../src/components/ClassSchedule.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AA4BjD,MAAM,WAAW,kBAAkB;IAC/B,kEAAkE;IAClE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6FAA6F;IAC7F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,kDAAkD;IAClD,MAAM,CAAC,EAAE;QACL,oEAAoE;QACpE,UAAU,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IAEF,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8BAA8B;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,oDAAoD;IACpD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,WAAW,KAAK,MAAM,CAAC;IAE1D;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;KAC7B,KAAK,KAAK,CAAC,SAAS,CAAC;IAEtB,iDAAiD;IACjD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,KAAK,CAAC,SAAS,CAAC;CACtD;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6GtD,CAAC"}

package/dist/components/ClassSchedule.js

@@ -8,58 +8,94 @@ exports.ClassSchedule = void 0;
 const react_1 = __importDefault(require("react"));
 const useClasses_1 = require("../hooks/useClasses");
 const LoadingIcon_1 = require("./ui/LoadingIcon");
+/** Default price formatter (uses currency if provided; falls back to decimal). */
+function defaultFormatPrice(price, locale, currency) {
+    if (Number.isFinite(price)) {
+        if (currency) {
+            try {
+                return new Intl.NumberFormat(locale !== null && locale !== void 0 ? locale : "en", {
+                    style: "currency",
+                    currency,
+                }).format(price);
+            }
+            catch (_a) {
+                /* ignore invalid currency and fall through */
+            }
+        }
+        return new Intl.NumberFormat(locale !== null && locale !== void 0 ? locale : "en", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(price);
+    }
+    return "";
+}
 /**
  * Displays an upcoming-class schedule for a studio:
- * • name + level
- * • weekday, MM-DD, time
- * • optional instructor
- *
- * Uses sensible Tailwind defaults, but you can override
- * every slot via props or replace the layout entirely.
+ * - name + level
+ * - weekday, date, time
+ * - optional instructor
+ * - RIGHT: price + "Book This Class" CTA
  */
-const ClassSchedule = ({ from, overrideId, locale, labels = {}, className = 'mt-6 md:mt-12 space-y-4', itemClassName = 'p-4 bg-white rounded-lg shadow', nameClassName = 'font-semibold text-lg', detailsClassName = 'text-sm text-gray-600', instructorClassName = 'text-sm text-gray-800 mt-1', renderItem, }) => {
+const ClassSchedule = ({ from, overrideId, locale, currency, labels = {}, className = "by-scheduleList", itemClassName = "by-scheduleItem", rowClassName = "by-scheduleRow", leftClassName = "by-scheduleLeft", nameClassName = "by-scheduleName", levelClassName = "by-scheduleLevel", detailsClassName = "by-scheduleMeta", instructorClassName = "by-scheduleInstructor", rightClassName = "by-scheduleRight", priceClassName = "by-schedulePrice", buttonClassName = "by-btn by-btnBook", bookNowText = "Book This Class", bookBaseUrl = "https://www.bailaya.com/book/", hideBookButton = false, formatPrice, renderLink, renderItem, }) => {
     var _a;
-    const { data: classes, loading: isLoading, error } = (0, useClasses_1.useClasses)(from, overrideId);
-    const weekdayFmt = new Intl.DateTimeFormat(locale !== null && locale !== void 0 ? locale : 'en', { weekday: 'long' });
-    const dateFmt = new Intl.DateTimeFormat(locale !== null && locale !== void 0 ? locale : 'en', { month: 'short', day: 'numeric' });
-    const instructorLabel = (_a = labels === null || labels === void 0 ? void 0 : labels.instructor) !== null && _a !== void 0 ? _a : 'Instructor:';
-    if (isLoading) {
-        return react_1.default.createElement("div", { className: className },
-            react_1.default.createElement(LoadingIcon_1.LoadingIcon, null));
+    const { data: classes, loading, error } = (0, useClasses_1.useClasses)(from, overrideId);
+    const weekdayFmt = new Intl.DateTimeFormat(locale !== null && locale !== void 0 ? locale : "en", { weekday: "long" });
+    const dateFmt = new Intl.DateTimeFormat(locale !== null && locale !== void 0 ? locale : "en", {
+        month: "short",
+        day: "numeric",
+    });
+    const instructorLabel = (_a = labels === null || labels === void 0 ? void 0 : labels.instructor) !== null && _a !== void 0 ? _a : "Instructor:";
+    if (loading) {
+        return (react_1.default.createElement("ul", { className: className },
+            react_1.default.createElement("li", null,
+                react_1.default.createElement(LoadingIcon_1.LoadingIcon, null))));
     }
     if (error) {
-        return react_1.default.createElement("div", { className: className }, error.message);
+        return (react_1.default.createElement("ul", { className: className },
+            react_1.default.createElement("li", null, error.message)));
     }
     return (react_1.default.createElement("ul", { className: className }, classes === null || classes === void 0 ? void 0 : classes.map((cls) => {
-        const dateObj = cls.date;
-        const dayName = weekdayFmt.format(dateObj);
-        const shortDate = dateFmt.format(dateObj);
+        const dayName = weekdayFmt.format(cls.date);
+        const shortDate = dateFmt.format(cls.date);
         if (renderItem) {
             return react_1.default.createElement("li", { key: cls.id }, renderItem(cls));
         }
+        const priceText = formatPrice
+            ? formatPrice(cls.price, cls)
+            : defaultFormatPrice(cls.price, locale, currency);
+        const href = `${bookBaseUrl}${cls.id}`;
         return (react_1.default.createElement("li", { key: cls.id, className: itemClassName },
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("div", { className: nameClassName },
-                    cls.name,
-                    ' ',
-                    react_1.default.createElement("span", { className: "text-sm text-gray-500" },
-                        "(",
-                        cls.level,
-                        ")")),
-                react_1.default.createElement("div", { className: detailsClassName },
-                    dayName,
-                    ", ",
-                    shortDate,
-                    " \u2014 ",
-                    cls.startTime,
-                    "\u2013",
-                    cls.endTime),
-                cls.instructor && (react_1.default.createElement("div", { className: instructorClassName },
-                    instructorLabel,
-                    ' ',
-                    react_1.default.createElement("strong", null,
-                        cls.instructor.name,
-                        cls.instructor.lastname ? ` ${cls.instructor.lastname}` : ''))))));
+            react_1.default.createElement("div", { className: rowClassName },
+                react_1.default.createElement("div", { className: leftClassName },
+                    react_1.default.createElement("div", { className: nameClassName },
+                        cls.name,
+                        " ",
+                        react_1.default.createElement("span", { className: levelClassName },
+                            "(",
+                            cls.level,
+                            ")")),
+                    react_1.default.createElement("div", { className: detailsClassName },
+                        dayName,
+                        ", ",
+                        shortDate,
+                        " \u2014 ",
+                        cls.startTime,
+                        "\u2013",
+                        cls.endTime),
+                    cls.instructor && (react_1.default.createElement("div", { className: instructorClassName },
+                        instructorLabel,
+                        " ",
+                        react_1.default.createElement("strong", null,
+                            cls.instructor.name,
+                            cls.instructor.lastname ? ` ${cls.instructor.lastname}` : "")))),
+                react_1.default.createElement("div", { className: rightClassName },
+                    Number.isFinite(cls.price) && (react_1.default.createElement("div", { className: priceClassName }, priceText)),
+                    !hideBookButton &&
+                        (renderLink ? (renderLink({
+                            href,
+                            className: buttonClassName,
+                            children: bookNowText,
+                        })) : (react_1.default.createElement("a", { href: href, className: buttonClassName }, bookNowText)))))));
     })));
 };
 exports.ClassSchedule = ClassSchedule;

package/dist/components/ClassScheduleByType.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { StudioClass } from '@bailaya/core';
+import React from "react";
+import type { StudioClass } from "@bailaya/core";
 export interface ClassScheduleByTypeProps {
     /** The dance type to filter classes by (e.g., "salsa") */
     typeName: string;
@@ -7,9 +7,11 @@ export interface ClassScheduleByTypeProps {
     from?: Date;
     /** Optional studio ID to override the default configured ID */
     overrideId?: string;
-    /** Locale code for date formatting (e.g. "en", "es"); falls back to browser default */
+    /** Locale code for date/price formatting (e.g. "en", "es"); falls back to browser default */
     locale?: string;
-    /** Custom labels (e.g. for "Instructor:" text) */
+    /** Currency code for price formatting (e.g., "USD", "MXN"). If omitted, shows decimal. */
+    currency?: string;
+    /** Custom labels */
     labels?: {
         /** Label text for the instructor line; defaults to "Instructor:" */
         instructor?: string;
@@ -18,12 +20,41 @@ export interface ClassScheduleByTypeProps {
     className?: string;
     /** Each class "card" wrapper */
     itemClassName?: string;
+    /** Wrapper for the inner row (left/right) */
+    rowClassName?: string;
+    /** Left column (title/meta/instructor) */
+    leftClassName?: string;
     /** Class name element */
     nameClassName?: string;
+    /** Level element (the small, muted "(Beginner)" part) */
+    levelClassName?: string;
     /** Details (date/time) element */
     detailsClassName?: string;
     /** Instructor line element */
     instructorClassName?: string;
+    /** Right column container (price + button) */
+    rightClassName?: string;
+    /** Price element */
+    priceClassName?: string;
+    /** Button element */
+    buttonClassName?: string;
+    /** Text for the Book CTA (i18n). Default: "Book This Class" */
+    bookNowText?: string;
+    /** Base URL for booking links. Default: "https://www.bailaya.com/book/" */
+    bookBaseUrl?: string;
+    /** Hide the Book button entirely. Default: false */
+    hideBookButton?: boolean;
+    /** Custom price formatter (overrides `currency`) */
+    formatPrice?: (price: number, cls: StudioClass) => string;
+    /**
+     * Optional link renderer.
+     * If not provided, a plain <a> will be rendered.
+     */
+    renderLink?: (opts: {
+        href: string;
+        className?: string;
+        children: React.ReactNode;
+    }) => React.ReactNode;
     /**
      * Completely override the default render for each item
      */
@@ -31,12 +62,10 @@ export interface ClassScheduleByTypeProps {
 }
 /**
  * Displays a schedule of upcoming classes of a specific dance type:
- * • name + level
- * • weekday, MM-DD, time
- * • optional instructor
- *
- * Uses sensible Tailwind defaults but you can override
- * every slot via props or bypass with renderItem.
+ * - name + level
+ * - weekday, date, time
+ * - optional instructor
+ * - RIGHT: price + "Book This Class" CTA
  */
 export declare const ClassScheduleByType: React.FC<ClassScheduleByTypeProps>;
 //# sourceMappingURL=ClassScheduleByType.d.ts.map

package/dist/components/ClassScheduleByType.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClassScheduleByType.d.ts","sourceRoot":"","sources":["../../src/components/ClassScheduleByType.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,MAAM,WAAW,wBAAwB;IACvC,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAA;IAEhB,kEAAkE;IAClE,IAAI,CAAC,EAAE,IAAI,CAAA;IAEX,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,uFAAuF;IACvF,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,kDAAkD;IAClD,MAAM,CAAC,EAAE;QACP,oEAAoE;QACpE,UAAU,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;IAED,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,yBAAyB;IACzB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,8BAA8B;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAE5B;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,KAAK,CAAC,SAAS,CAAA;CACnD;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAkElE,CAAA"}
+{"version":3,"file":"ClassScheduleByType.d.ts","sourceRoot":"","sources":["../../src/components/ClassScheduleByType.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AA2BjD,MAAM,WAAW,wBAAwB;IACrC,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;IAEjB,kEAAkE;IAClE,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,6FAA6F;IAC7F,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,oBAAoB;IACpB,MAAM,CAAC,EAAE;QACL,oEAAoE;QACpE,UAAU,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IAEF,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yDAAyD;IACzD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8BAA8B;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,oDAAoD;IACpD,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,oDAAoD;IACpD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,WAAW,KAAK,MAAM,CAAC;IAE1D;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;KAC7B,KAAK,KAAK,CAAC,SAAS,CAAC;IAEtB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,KAAK,CAAC,SAAS,CAAC;CACtD;AAED;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAgHlE,CAAC"}

package/dist/components/ClassScheduleByType.js

@@ -7,31 +7,57 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ClassScheduleByType = void 0;
 const react_1 = __importDefault(require("react"));
 const useClassesByType_1 = require("../hooks/useClassesByType");
+/** Format price with optional currency or custom formatter */
+function defaultFormatPrice(price, locale, currency) {
+    if (Number.isFinite(price)) {
+        if (currency) {
+            try {
+                return new Intl.NumberFormat(locale !== null && locale !== void 0 ? locale : "en", {
+                    style: "currency",
+                    currency,
+                }).format(price);
+            }
+            catch (_a) {
+                // Fallback to decimal if currency code is invalid
+            }
+        }
+        return new Intl.NumberFormat(locale !== null && locale !== void 0 ? locale : "en", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(price);
+    }
+    return "";
+}
 /**
  * Displays a schedule of upcoming classes of a specific dance type:
- * • name + level
- * • weekday, MM-DD, time
- * • optional instructor
- *
- * Uses sensible Tailwind defaults but you can override
- * every slot via props or bypass with renderItem.
+ * - name + level
+ * - weekday, date, time
+ * - optional instructor
+ * - RIGHT: price + "Book This Class" CTA
  */
-const ClassScheduleByType = ({ typeName, from, overrideId, locale, labels = {}, className = 'mt-6 md:mt-12 space-y-4', itemClassName = 'p-4 bg-white rounded-lg shadow', nameClassName = 'font-semibold text-lg', detailsClassName = 'text-sm text-gray-600', instructorClassName = 'text-sm text-gray-800 mt-1', renderItem, }) => {
+const ClassScheduleByType = ({ typeName, from, overrideId, locale, currency, labels = {}, className = "by-scheduleList", itemClassName = "by-scheduleItem", rowClassName = "by-scheduleRow", leftClassName = "by-scheduleLeft", nameClassName = "by-scheduleName", levelClassName = "by-scheduleLevel", detailsClassName = "by-scheduleMeta", instructorClassName = "by-scheduleInstructor", rightClassName = "by-scheduleRight", priceClassName = "by-schedulePrice", buttonClassName = "by-btn by-btnBook", bookNowText = "Book This Class", bookBaseUrl = "https://www.bailaya.com/book/", hideBookButton = false, formatPrice, renderLink, renderItem, }) => {
     var _a;
-    const { data: classes, loading: isLoading, error } = (0, useClassesByType_1.useClassesByType)(typeName, from, overrideId);
-    const weekdayFmt = new Intl.DateTimeFormat(locale !== null && locale !== void 0 ? locale : 'en', { weekday: 'long' });
-    const dateFmt = new Intl.DateTimeFormat(locale !== null && locale !== void 0 ? locale : 'en', { month: 'short', day: 'numeric' });
-    const instructorLabel = (_a = labels === null || labels === void 0 ? void 0 : labels.instructor) !== null && _a !== void 0 ? _a : 'Instructor:';
-    if (isLoading) {
-        return react_1.default.createElement("div", { className: className },
-            "Loading ",
-            typeName,
-            " classes...");
+    const { data: classes, loading, error } = (0, useClassesByType_1.useClassesByType)(typeName, from, overrideId);
+    const weekdayFmt = new Intl.DateTimeFormat(locale !== null && locale !== void 0 ? locale : "en", {
+        weekday: "long",
+    });
+    const dateFmt = new Intl.DateTimeFormat(locale !== null && locale !== void 0 ? locale : "en", {
+        month: "short",
+        day: "numeric",
+    });
+    const instructorLabel = (_a = labels === null || labels === void 0 ? void 0 : labels.instructor) !== null && _a !== void 0 ? _a : "Instructor:";
+    if (loading) {
+        return react_1.default.createElement("ul", { className: className },
+            react_1.default.createElement("li", null,
+                "Loading ",
+                typeName,
+                " classes..."));
     }
     if (error) {
-        return react_1.default.createElement("div", { className: className },
-            "Error: ",
-            error.message);
+        return react_1.default.createElement("ul", { className: className },
+            react_1.default.createElement("li", null,
+                "Error: ",
+                error.message));
     }
     return (react_1.default.createElement("ul", { className: className }, classes === null || classes === void 0 ? void 0 : classes.map((cls) => {
         const dateObj = cls.date;
@@ -40,29 +66,44 @@ const ClassScheduleByType = ({ typeName, from, overrideId, locale, labels = {},
         if (renderItem) {
             return react_1.default.createElement("li", { key: cls.id }, renderItem(cls));
         }
+        const priceText = formatPrice
+            ? formatPrice(cls.price, cls)
+            : defaultFormatPrice(cls.price, locale, currency);
+        const href = `${bookBaseUrl}${cls.id}`;
         return (react_1.default.createElement("li", { key: cls.id, className: itemClassName },
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("div", { className: nameClassName },
-                    cls.name,
-                    ' ',
-                    react_1.default.createElement("span", { className: "text-sm text-gray-500" },
-                        "(",
-                        cls.level,
-                        ")")),
-                react_1.default.createElement("div", { className: detailsClassName },
-                    weekday,
-                    ", ",
-                    dateStr,
-                    " \u2014 ",
-                    cls.startTime,
-                    "\u2013",
-                    cls.endTime),
-                cls.instructor && (react_1.default.createElement("div", { className: instructorClassName },
-                    instructorLabel,
-                    ' ',
-                    react_1.default.createElement("strong", null,
-                        cls.instructor.name,
-                        cls.instructor.lastname ? ` ${cls.instructor.lastname}` : ''))))));
+            react_1.default.createElement("div", { className: rowClassName },
+                react_1.default.createElement("div", { className: leftClassName },
+                    react_1.default.createElement("div", { className: nameClassName },
+                        cls.name,
+                        " ",
+                        react_1.default.createElement("span", { className: levelClassName },
+                            "(",
+                            cls.level,
+                            ")")),
+                    react_1.default.createElement("div", { className: detailsClassName },
+                        weekday,
+                        ", ",
+                        dateStr,
+                        " \u2014 ",
+                        cls.startTime,
+                        "\u2013",
+                        cls.endTime),
+                    cls.instructor && (react_1.default.createElement("div", { className: instructorClassName },
+                        instructorLabel,
+                        " ",
+                        react_1.default.createElement("strong", null,
+                            cls.instructor.name,
+                            cls.instructor.lastname
+                                ? ` ${cls.instructor.lastname}`
+                                : "")))),
+                react_1.default.createElement("div", { className: rightClassName },
+                    Number.isFinite(cls.price) && (react_1.default.createElement("div", { className: priceClassName }, priceText)),
+                    !hideBookButton &&
+                        (renderLink ? (renderLink({
+                            href,
+                            className: buttonClassName,
+                            children: bookNowText,
+                        })) : (react_1.default.createElement("a", { href: href, className: buttonClassName }, bookNowText)))))));
     })));
 };
 exports.ClassScheduleByType = ClassScheduleByType;

package/dist/styles.css

@@ -217,3 +217,99 @@
         font-size: 1.25rem;
     }
 }
+
+/* Container */
+:where(.by-scheduleList) {
+    margin-top: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    row-gap: 1rem;
+}
+@media (min-width: 768px) {
+    :where(.by-scheduleList) {
+        margin-top: 3rem;
+    }
+}
+
+/* Item card */
+:where(.by-scheduleItem) {
+    padding: 1rem;
+    background: #fff;
+    border-radius: var(--by-radius-lg);
+    box-shadow: var(--by-shadow);
+    border: 1px solid var(--by-border);
+}
+
+/* Inner row: column on mobile; split left/right on md+ */
+:where(.by-scheduleRow) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+@media (min-width: 768px) {
+    :where(.by-scheduleRow) {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+    }
+}
+
+/* Left column (title + meta + instructor) */
+:where(.by-scheduleLeft) {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+/* Title: name + level */
+:where(.by-scheduleName) {
+    font-weight: 600;
+    font-size: 1.125rem;
+    color: var(--by-color-heading);
+    line-height: 1.2;
+}
+:where(.by-scheduleLevel) {
+    margin-left: 0.25rem;
+    font-size: 0.875rem;
+    opacity: 0.7;
+}
+
+/* Meta line: weekday, date, time */
+:where(.by-scheduleMeta) {
+    color: var(--by-color-text);
+    font-size: 0.875rem;
+}
+
+/* Instructor line */
+:where(.by-scheduleInstructor) {
+    color: var(--by-color-text);
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+}
+
+/* Right column: price + button */
+:where(.by-scheduleRight) {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+/* Price style */
+:where(.by-schedulePrice) {
+    font-weight: 700;
+    color: var(--by-color-heading);
+    font-size: 1rem;
+}
+@media (min-width: 768px) {
+    :where(.by-schedulePrice) {
+        font-size: 1.125rem;
+    }
+}
+
+/* Button: reuse .by-btn base; adjust spacing for this layout */
+:where(.by-btnBook) {
+    margin-top: 0; /* override .by-btn's margin if inherited elsewhere */
+}
+:where(.by-scheduleRight .by-btn) {
+    margin-top: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bailaya/react",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "A React component library for the BailaYa public API",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",