@bailaya/react 1.0.6 → 1.0.8

package/README.md

@@ -7,7 +7,7 @@
 `@bailaya/react` builds on top of **@bailaya/core** to provide:
 
 - A **`BailayaProvider`** + **`useBailayaClient`** context  
-- React Query–powered **hooks** for fetching all core data  
+- React **hooks** for fetching all core data (with `loading`, `error`, `data`, and `refetch`)  
 - **Components** with sensible Tailwind defaults (and full styling slots)  
 - Full TypeScript support, including localized text & date formatting  
 
@@ -16,7 +16,7 @@ Whether you need a quick `<StudioProfileCard />` or fine-grained hooks like `use
 ## Features
 
 - **Context + client** (`BailayaProvider` + `useBailayaClient`)  
-- **Hooks**  
+- **Hooks** (all return `{ data, error, loading, refetch }`)  
   - `useStudioProfile(overrideId?)`  
   - `useUserProfile(userId)`  
   - `useInstructors(overrideId?)`  
@@ -37,40 +37,34 @@ Whether you need a quick `<StudioProfileCard />` or fine-grained hooks like `use
 ## Installation
 
 ```bash
-npm install @bailaya/react @tanstack/react-query
+npm install @bailaya/react
 ````
 
 or with Yarn:
 
 ```bash
-yarn add @bailaya/react @tanstack/react-query
+yarn add @bailaya/react
 ```
 
 > **Peer Dependencies**
 >
 > * `"react": ">=17"`
 > * `"react-dom": ">=17"`
-> * `"@tanstack/react-query": ">=5"`
 
 ## Quick Start
 
-First, wrap your app with both **React Query** and **BailayaProvider**:
+First, wrap your app with **BailayaProvider**:
 
 ```tsx
 // App.tsx
 import React from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BailayaProvider } from "@bailaya/react";
 
-const queryClient = new QueryClient();
-
 export default function App() {
   return (
-    <QueryClientProvider client={queryClient}>
-      <BailayaProvider config={{ studioId: "YOUR_STUDIO_ID" }}>
-        {/* ...your app */}
-      </BailayaProvider>
-    </QueryClientProvider>
+    <BailayaProvider config={{ studioId: "YOUR_STUDIO_ID" }}>
+      {/* ...your app */}
+    </BailayaProvider>
   );
 }
 ```
@@ -84,17 +78,20 @@ import React from "react";
 import { useInstructors } from "@bailaya/react";
 
 export function TeamSection() {
-  const { data: instructors, isLoading, error } = useInstructors();
+  const { data: instructors, loading, error, refetch } = useInstructors();
 
-  if (isLoading) return <p>Loading...</p>;
+  if (loading) return <p>Loading...</p>;
   if (error) return <p>Error: {error.message}</p>;
 
   return (
-    <ul>
-      {instructors.map((i) => (
-        <li key={i.id}>{i.name} {i.lastname}</li>
-      ))}
-    </ul>
+    <>
+      <button onClick={refetch}>Refresh</button>
+      <ul>
+        {instructors?.map((i) => (
+          <li key={i.id}>{i.name} {i.lastname}</li>
+        ))}
+      </ul>
+    </>
   );
 }
 ```
@@ -132,15 +129,24 @@ Provides `useBailayaClient()` context.
 
 ### Hooks
 
-| Hook                                             | Description                                                          |
-|--------------------------------------------------| -------------------------------------------------------------------- |
-| `useStudioProfile(overrideId?)`                  | Fetch & parse a studio’s profile.                                    |
-| `useUserProfile(userId)`                         | Fetch & parse a user’s profile / bio.                                |
-| `useInstructors(overrideId?)`                    | Fetch & parse list of active instructors (owner, admin, instructor). |
-| `useClasses(from?, overrideId?)`                 | Fetch & parse next 7 days of classes (all types).                    |
-| `useClassesByType(typeName, from?, overrideId?)` | Fetch & parse next 7 days of classes filtered by `typeName`.         |
+All hooks return:
+
+```ts
+{
+  data: T | null;
+  error: Error | null;
+  loading: boolean;
+  refetch: () => Promise<void>;
+}
+```
 
-Each returns a **`UseQueryResult<..., Error>`**.
+| Hook                                             | Description                                                  |
+| ------------------------------------------------ | ------------------------------------------------------------ |
+| `useStudioProfile(overrideId?)`                  | Fetch a studio’s profile.                                    |
+| `useUserProfile(userId)`                         | Fetch a user’s profile / bio.                                |
+| `useInstructors(overrideId?)`                    | Fetch list of active instructors (owner, admin, instructor). |
+| `useClasses(from?, overrideId?)`                 | Fetch next 7 days of classes (all types).                    |
+| `useClassesByType(typeName, from?, overrideId?)` | Fetch next 7 days of classes filtered by `typeName`.         |
 
 ### Components
 
@@ -152,7 +158,7 @@ All components share:
 * **`renderItem`** for full JSX override
 
 | Component                 | Props                                                                                                                             |
-|---------------------------|-----------------------------------------------------------------------------------------------------------------------------------|
+| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
 | `<StudioProfileCard />`   | `overrideId?`, `locale?`, `labels?`, `className?`, `nameClassName?`, `descriptionClassName?`, `labelClassName?`, `renderProfile?` |
 | `<UserProfileCard />`     | `userId`, `locale?`, `labels?`, `className?`, `nameClassName?`, `bioClassName?`, `renderProfile?`                                 |
 | `<InstructorList />`      | `overrideId?`, `renderItem?`, plus styling slots: `className?`, `itemClassName?`, `imageWrapperClassName?`, etc.                  |

package/dist/components/ClassSchedule.d.ts

@@ -0,0 +1,40 @@
+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?: string;
+    /** Custom labels (e.g. for "Instructor:" text) */
+    labels?: {
+        /** Label text for the instructor line; defaults to "Instructor:" */
+        instructor?: string;
+    };
+    /** Root container wrapper */
+    className?: string;
+    /** Each class "card" wrapper */
+    itemClassName?: string;
+    /** Class name element */
+    nameClassName?: string;
+    /** Details (date/time) element */
+    detailsClassName?: string;
+    /** Instructor line element */
+    instructorClassName?: string;
+    /**
+     * 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.
+ */
+export declare const ClassSchedule: React.FC<ClassScheduleProps>;
+//# sourceMappingURL=ClassSchedule.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/ClassSchedule.js

@@ -0,0 +1,65 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClassSchedule = void 0;
+const react_1 = __importDefault(require("react"));
+const useClasses_1 = require("../hooks/useClasses");
+const LoadingIcon_1 = require("./ui/LoadingIcon");
+/**
+ * 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.
+ */
+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, }) => {
+    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));
+    }
+    if (error) {
+        return react_1.default.createElement("div", { className: className }, 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);
+        if (renderItem) {
+            return react_1.default.createElement("li", { key: cls.id }, renderItem(cls));
+        }
+        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}` : ''))))));
+    })));
+};
+exports.ClassSchedule = ClassSchedule;

package/dist/components/ClassScheduleByType.d.ts

@@ -0,0 +1,42 @@
+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;
+    /** 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?: string;
+    /** Custom labels (e.g. for "Instructor:" text) */
+    labels?: {
+        /** Label text for the instructor line; defaults to "Instructor:" */
+        instructor?: string;
+    };
+    /** Root container wrapper */
+    className?: string;
+    /** Each class "card" wrapper */
+    itemClassName?: string;
+    /** Class name element */
+    nameClassName?: string;
+    /** Details (date/time) element */
+    detailsClassName?: string;
+    /** Instructor line element */
+    instructorClassName?: string;
+    /**
+     * Completely override the default render for each item
+     */
+    renderItem?: (cls: StudioClass) => React.ReactNode;
+}
+/**
+ * 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.
+ */
+export declare const ClassScheduleByType: React.FC<ClassScheduleByTypeProps>;
+//# sourceMappingURL=ClassScheduleByType.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/ClassScheduleByType.js

@@ -0,0 +1,68 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClassScheduleByType = void 0;
+const react_1 = __importDefault(require("react"));
+const useClassesByType_1 = require("../hooks/useClassesByType");
+/**
+ * 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.
+ */
+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, }) => {
+    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...");
+    }
+    if (error) {
+        return react_1.default.createElement("div", { className: className },
+            "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;
+        const weekday = weekdayFmt.format(dateObj);
+        const dateStr = dateFmt.format(dateObj);
+        if (renderItem) {
+            return react_1.default.createElement("li", { key: cls.id }, renderItem(cls));
+        }
+        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}` : ''))))));
+    })));
+};
+exports.ClassScheduleByType = ClassScheduleByType;

package/dist/components/InstructorList.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { Instructor } from '@bailaya/core';
+export interface InstructorListProps {
+    /** Optional studio ID to override the default configured ID */
+    overrideId?: string;
+    /** Root container wrapper */
+    className?: string;
+    /** Each instructor "card" wrapper */
+    itemClassName?: string;
+    /** Wrapper around the image */
+    imageWrapperClassName?: string;
+    /** The `<img>` element itself */
+    imageClassName?: string;
+    /** Container for the name + bio */
+    bodyClassName?: string;
+    /** Instructor name heading */
+    nameClassName?: string;
+    /** Instructor bio paragraph */
+    bioClassName?: string;
+    /**
+     * Optional custom render function for each instructor.
+     * If provided, will be used instead of the default layout.
+     */
+    renderItem?: (instr: Instructor) => React.ReactNode;
+}
+/**
+ * Component to display a list of instructors for a studio.
+ *
+ * Fetches instructors via `useInstructors` and renders a list of
+ * "cards." You can override any part of the styling via props
+ * or completely replace the layout with `renderItem`.
+ */
+export declare const InstructorList: React.FC<InstructorListProps>;
+//# sourceMappingURL=InstructorList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InstructorList.d.ts","sourceRoot":"","sources":["../../src/components/InstructorList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,MAAM,WAAW,mBAAmB;IAClC,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qCAAqC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,+BAA+B;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAC;CACrD;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqDxD,CAAC"}

package/dist/components/InstructorList.js

@@ -0,0 +1,39 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InstructorList = void 0;
+const react_1 = __importDefault(require("react"));
+const useInstructors_1 = require("../hooks/useInstructors");
+const LoadingIcon_1 = require("./ui/LoadingIcon");
+/**
+ * Component to display a list of instructors for a studio.
+ *
+ * Fetches instructors via `useInstructors` and renders a list of
+ * "cards." You can override any part of the styling via props
+ * or completely replace the layout with `renderItem`.
+ */
+const InstructorList = ({ overrideId, className = 'mt-6 md:mt-12 space-y-8', itemClassName = 'flex flex-col md:flex-row items-center rounded-lg border border-[#DCDCDC] shadow-lg overflow-hidden', imageWrapperClassName = 'w-full p-4 pb-0 md:pb-4 md:w-1/3 aspect-square', imageClassName = 'w-full h-full rounded-xl object-cover', bodyClassName = 'p-6 flex-1 text-left', nameClassName = 'text-xl md:text-3xl font-geologica font-semibold text-[#2A2343]', bioClassName = 'mt-2 text-xs md:text-xl font-sourcesans font-semibold text-[#464646]', renderItem, }) => {
+    const { data: instructors, loading: isLoading, error } = (0, useInstructors_1.useInstructors)(overrideId);
+    if (isLoading) {
+        return react_1.default.createElement("div", { className: className },
+            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("div", { className: className }, instructors === null || instructors === void 0 ? void 0 : instructors.map((instr) => {
+        var _a;
+        return renderItem ? (renderItem(instr)) : (react_1.default.createElement("div", { key: instr.id, className: itemClassName },
+            instr.image && (react_1.default.createElement("div", { className: imageWrapperClassName },
+                react_1.default.createElement("img", { src: instr.image, alt: `${instr.name} ${(_a = instr.lastname) !== null && _a !== void 0 ? _a : ''}`.trim(), className: imageClassName }))),
+            react_1.default.createElement("div", { className: bodyClassName },
+                react_1.default.createElement("h3", { className: nameClassName },
+                    instr.name,
+                    instr.lastname ? ` ${instr.lastname}` : ''),
+                instr.bio && (react_1.default.createElement("p", { className: bioClassName }, Object.values(instr.bio)[0])))));
+    })));
+};
+exports.InstructorList = InstructorList;

package/dist/components/StudioDescription.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { StudioProfile } from '@bailaya/core';
+export interface StudioDescriptionProps {
+    /** Optional studio ID to override the default configured ID */
+    overrideId?: string;
+    /** Locale code (e.g., "en", "es") for picking the description */
+    locale?: string;
+    /** Wrapper element class (defaults to spacing-neutral container) */
+    className?: string;
+    /** Paragraph class for each line */
+    paragraphClassName?: string;
+    /**
+     * Optional custom render — receives the computed lines and profile.
+     * Return your own JSX to fully control output.
+     */
+    render?: (lines: string[], profile: StudioProfile) => React.ReactNode;
+}
+/**
+ * Displays the studio description, split into paragraphs by line breaks.
+ * - Picks localized description by `locale` (falls back to the first available).
+ * - Converts `<br>`/`<br/>` to line breaks.
+ * - Trims empty lines.
+ * - Safe text rendering (no HTML injection).
+ */
+export declare const StudioDescription: React.FC<StudioDescriptionProps>;
+//# sourceMappingURL=StudioDescription.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StudioDescription.d.ts","sourceRoot":"","sources":["../../src/components/StudioDescription.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGnD,MAAM,WAAW,sBAAsB;IACnC,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,aAAa,KAAK,KAAK,CAAC,SAAS,CAAC;CACzE;AAED;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAsC9D,CAAC"}

package/dist/components/StudioDescription.js

@@ -0,0 +1,51 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioDescription = void 0;
+const react_1 = __importDefault(require("react"));
+const useStudioProfile_1 = require("../hooks/useStudioProfile");
+const LoadingIcon_1 = require("./ui/LoadingIcon");
+/**
+ * Displays the studio description, split into paragraphs by line breaks.
+ * - Picks localized description by `locale` (falls back to the first available).
+ * - Converts `<br>`/`<br/>` to line breaks.
+ * - Trims empty lines.
+ * - Safe text rendering (no HTML injection).
+ */
+const StudioDescription = ({ overrideId, locale, className = '', paragraphClassName = 'text-xs md:text-2xl font-geologica text-[#464646]', render, }) => {
+    const { data: profile, loading: isLoading, error } = (0, useStudioProfile_1.useStudioProfile)(overrideId);
+    if (isLoading)
+        return react_1.default.createElement("div", { className: className },
+            react_1.default.createElement(LoadingIcon_1.LoadingIcon, null));
+    if (error)
+        return react_1.default.createElement("div", { className: className }, error.message);
+    if (!profile)
+        return null;
+    // Pick the best description string for the requested locale
+    const descMap = profile.description || {};
+    const locales = Object.keys(descMap);
+    const desc = (locale && descMap[locale]) ||
+        (locales.length ? descMap[locales[0]] : '') ||
+        '';
+    // Turn <br> into \n, split on newlines, trim, and drop empties
+    const lines = splitDescription(desc);
+    if (render) {
+        return react_1.default.createElement(react_1.default.Fragment, null, render(lines, profile));
+    }
+    // Default rendering: a <p> per line, using the requested classes
+    return (react_1.default.createElement("div", { className: className }, lines.map((line, i) => (react_1.default.createElement("p", { key: i, className: paragraphClassName }, line)))));
+};
+exports.StudioDescription = StudioDescription;
+/** Convert <br> -> newlines, then split, trim, and filter empty lines */
+function splitDescription(text) {
+    if (!text)
+        return [];
+    const normalized = text.replace(/<br\s*\/?>/gi, '\n');
+    return normalized
+        .split(/\r?\n/)
+        .map((l) => l.trim())
+        .filter(Boolean);
+}

package/dist/components/StudioProfileCard.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { StudioProfile } from '@bailaya/core';
+export interface StudioProfileCardProps {
+    /** Optional studio ID to override the default configured ID */
+    overrideId?: string;
+    /** Locale code (e.g., "en", "es") for picking the description */
+    locale?: string;
+    /** Root container wrapper */
+    className?: string;
+    /** Wrapper for the entire "card" */
+    itemClassName?: string;
+    /** Optional image `<img>` wrapper */
+    imageWrapperClassName?: string;
+    /** The `<img>` element itself */
+    imageClassName?: string;
+    /** Container for the body (name, desc, labels) */
+    bodyClassName?: string;
+    /** Heading for the studio name */
+    nameClassName?: string;
+    /** Paragraph for the description */
+    descriptionClassName?: string;
+    /** Paragraph for labels (address, hours) */
+    labelClassName?: string;
+    /**
+     * Completely override the default render
+     */
+    renderProfile?: (profile: StudioProfile) => React.ReactNode;
+    /**
+     * Custom text labels (for localization):
+     * - addressLabel
+     * - businessHoursLabel
+     */
+    labels?: {
+        addressLabel?: string;
+        businessHoursLabel?: string;
+    };
+}
+/**
+ * Displays a "card" summary of a studio:
+ * - logo
+ * - name
+ * - localized description
+ * - address/unit
+ * - business hours
+ */
+export declare const StudioProfileCard: React.FC<StudioProfileCardProps>;
+//# sourceMappingURL=StudioProfileCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StudioProfileCard.d.ts","sourceRoot":"","sources":["../../src/components/StudioProfileCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGnD,MAAM,WAAW,sBAAsB;IACrC,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kDAAkD;IAClD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oCAAoC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5D;;;;OAIG;IACH,MAAM,CAAC,EAAE;QACP,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B,CAAC;CACH;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA4E9D,CAAC"}

package/dist/components/StudioProfileCard.js

@@ -0,0 +1,59 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioProfileCard = void 0;
+const react_1 = __importDefault(require("react"));
+const useStudioProfile_1 = require("../hooks/useStudioProfile");
+const LoadingIcon_1 = require("./ui/LoadingIcon");
+/**
+ * Displays a "card" summary of a studio:
+ * - logo
+ * - name
+ * - localized description
+ * - address/unit
+ * - business hours
+ */
+const StudioProfileCard = ({ overrideId, locale, className = 'mt-6 md:mt-12 space-y-8', itemClassName = 'flex flex-col md:flex-row items-center rounded-lg border border-[#DCDCDC] shadow-lg overflow-hidden', imageWrapperClassName = 'w-full p-4 pb-0 md:pb-4 md:w-1/3 aspect-square', imageClassName = 'w-full h-full rounded-xl object-cover', bodyClassName = 'p-6 flex-1 text-left', nameClassName = 'text-xl md:text-3xl font-geologica font-semibold text-[#2A2343]', descriptionClassName = 'mt-2 text-xs md:text-lg font-sourcesans text-[#464646]', labelClassName = 'mt-1 text-sm text-gray-600', renderProfile, labels = {}, }) => {
+    var _a, _b;
+    const { data: profile, loading: isLoading, error } = (0, useStudioProfile_1.useStudioProfile)(overrideId);
+    if (isLoading) {
+        return react_1.default.createElement("div", { className: className },
+            react_1.default.createElement(LoadingIcon_1.LoadingIcon, null));
+    }
+    if (error) {
+        return react_1.default.createElement("div", { className: className }, error.message);
+    }
+    if (!profile) {
+        return null;
+    }
+    // pick the right description by locale, fallback to first
+    const descMap = profile.description || {};
+    const locales = Object.keys(descMap);
+    const desc = (locale && descMap[locale]) ||
+        descMap[locales[0]] ||
+        '';
+    if (renderProfile) {
+        return react_1.default.createElement(react_1.default.Fragment, null, renderProfile(profile));
+    }
+    const addrLabel = (_a = labels === null || labels === void 0 ? void 0 : labels.addressLabel) !== null && _a !== void 0 ? _a : '';
+    const bizLabel = (_b = labels === null || labels === void 0 ? void 0 : labels.businessHoursLabel) !== null && _b !== void 0 ? _b : (locale === 'es' ? 'Horario Comercial' : 'Business Hours');
+    return (react_1.default.createElement("div", { className: className },
+        react_1.default.createElement("div", { className: itemClassName },
+            profile.logo && (react_1.default.createElement("div", { className: imageWrapperClassName },
+                react_1.default.createElement("img", { src: profile.logo, alt: `${profile.name} logo`, className: imageClassName }))),
+            react_1.default.createElement("div", { className: bodyClassName },
+                react_1.default.createElement("h2", { className: nameClassName }, profile.name),
+                desc && (react_1.default.createElement("p", { className: descriptionClassName }, desc)),
+                profile.address && (react_1.default.createElement("p", { className: labelClassName },
+                    addrLabel && `${addrLabel}: `,
+                    profile.address,
+                    profile.unit ? `, ${profile.unit}` : '')),
+                profile.businessHours && (react_1.default.createElement("p", { className: labelClassName },
+                    bizLabel,
+                    ": ",
+                    profile.businessHours))))));
+};
+exports.StudioProfileCard = StudioProfileCard;