@smitch/breeze 0.1.0

package/.npmignore

@@ -0,0 +1,14 @@
+# Exclude stories and tests from lib directory
+**/stories/
+**/stories/**
+lib/**/stories/
+lib/**/stories/**
+
+# Optional: Exclude specific file patterns globally
+lib/**/*.stories.*
+
+# General rule: ignore any story files in source tree
+src/**/*.stories.*
+# Also ignore story folders under src
+src/**/stories/
+src/**/stories/**

package/README.md

@@ -0,0 +1,485 @@
+# Fluid UI
+
+A Next.js/React UI component library.
+
+- [Fluid UI](#fluid-ui)
+  - [Overview](#overview)
+  - [Features](#features)
+  - [Getting Started](#getting-started)
+    - [1. Install Next.js and React](#1-install-nextjs-and-react)
+    - [2. Configure Tailwind 3](#2-configure-tailwind-3)
+      - [2. Configure `tailwind.config.js`](#2-configure-tailwindconfigjs)
+  - [Installation](#installation)
+  - [Compatibility](#compatibility)
+    - [Supported stacks \& compatibility matrix](#supported-stacks--compatibility-matrix)
+    - [Node / environment](#node--environment)
+    - [Troubleshooting](#troubleshooting)
+  - [Peer dependencies](#peer-dependencies)
+  - [Basic Usage](#basic-usage)
+  - [Charts Usage](#charts-usage)
+    - [Chart Usage Example](#chart-usage-example)
+  - [Map Usage](#map-usage)
+    - [Map Usage Examples](#map-usage-examples)
+      - [Static Map](#static-map)
+      - [Map with marker](#map-with-marker)
+  - [Components](#components)
+    - [Buttons](#buttons)
+    - [Inputs](#inputs)
+    - [Forms](#forms)
+    - [Menus](#menus)
+    - [Feedback](#feedback)
+    - [Media](#media)
+    - [Typography](#typography)
+    - [Data Visualization](#data-visualization)
+    - [Time](#time)
+    - [Maps](#maps)
+    - [Social Media](#social-media)
+  - [Author](#author)
+
+## Overview
+
+Fluid UI is a comprehensive library of reusable UI components for Next.js/React applications. This
+library is designed to streamline the development process and ensure consistency across projects.
+
+## Features
+
+- Reusable UI components
+- Charts
+- Maps
+- Built with React 19, Next.js 15 and TailwindCSS 3
+
+## Getting Started
+
+To use Fluid UI in your Next.js/React project, follow these steps:
+
+### 1. Install Next.js and React
+
+If you haven't set up your Next.js project yet, start by initializing it:
+
+```bash
+npx create-next-app@latest
+```
+
+When prompted:
+
+- **Use TypeScript?**: Select **Yes** to enable TypeScript in your project.
+- **Use TailwindCSS?**: Select **Yes** to install and configure TailwindCSS automatically.
+
+Next.js will then generate the necessary configuration for both **TypeScript** and **TailwindCSS**,
+including `tsconfig.json`, `tailwind.config.js`, and PostCSS setup.
+
+### 2. Configure Tailwind 3
+
+To ensure that **Fluid UI** works correctly, you need to configure **TailwindCSS**. Follow the steps
+below:
+
+Note: All current Fluid releases utilize TailwindCSS v3.
+
+#### 2. Configure `tailwind.config.js`
+
+Update your `tailwind.config.js` file to match the configuration below:
+
+```js
+import type { Config } from "tailwindcss";
+/* Import colors if using Tailwind's color palette */
+import colors from "tailwindcss/colors";
+
+const config: Config = {
+  /* The selector strategy replaced the class strategy in Tailwind CSS v3.4.1.*/
+  darkMode: "selector",
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    /* IMPORTANT: Add this line: */
+    "./node_modules/@smitch/fluid/**/*.js",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        /* Modify color values as desired to suit your theme */
+        primary: {
+          DEFAULT: colors.indigo[600],
+          light: colors.indigo[300],
+          dark: colors.indigo[900],
+        },
+        secondary: {
+          DEFAULT: colors.gray[600],
+          light: colors.gray[300],
+          dark: colors.gray[900],
+        },
+        accent: {
+          DEFAULT: colors.orange[500],
+          light: colors.orange[300],
+          dark: colors.orange[700],
+        },
+        neutral: colors.gray[400],
+        dark: colors.gray[900],
+        light: colors.gray[100],
+        info: {
+          DEFAULT: colors.sky[400],
+          light: colors.sky[200],
+          dark: colors.sky[600],
+        },
+        success: {
+          DEFAULT: colors.green[600],
+          light: colors.green[400],
+          dark: colors.green[800],
+        },
+        warning: {
+          DEFAULT: colors.amber[500],
+          light: colors.amber[300],
+          dark: colors.amber[700],
+        },
+        error: {
+          DEFAULT: colors.red[600],
+          light: colors.red[400],
+          dark: colors.red[800],
+        },
+        danger: {
+          DEFAULT: colors.red[600],
+          light: colors.red[400],
+          dark: colors.red[800],
+        },
+        current: "currentColor",
+        transparent: "transparent",
+      },
+    },
+  },
+  plugins: [
+    require("@tailwindcss/forms")({
+      strategy: "class",
+    }),
+    require("@tailwindcss/typography"),
+  ],
+};
+export default config;
+```
+
+## Installation
+
+```bash
+npm install @smitch/fluid
+```
+
+## Compatibility
+
+### Supported stacks & compatibility matrix
+
+Use the table below to pick the Fluid major line that matches your app's React / Next.js and
+Tailwind versions. This helps avoid peer dependency conflicts.
+
+- Fluid v4.x (current):
+
+  - React: 19.x
+  - Next.js: 15.x
+  - Tailwind: 3.x
+  - Install: `npm install @smitch/fluid`
+
+- Fluid v3.x:
+  - React: 18.x
+  - Next.js: 14.x (and other releases built on React 18)
+  - Tailwind: 3.x
+  - Install: `npm install @smitch/fluid@^3`
+
+### Node / environment
+
+- Recommended Node: use an LTS release (Node 18/20+ recommended depending on your Next version).
+
+### Troubleshooting
+
+- If a feature (charts, maps) fails because a peer package is missing, install the optional peers
+  indicated in the Peer dependencies section (e.g., `chart.js`, `react-chartjs-2`, `leaflet`).
+
+## Peer dependencies
+
+Fluid is a component library and expects the host app to provide framework/runtime dependencies.
+Below are the packages you should have installed in your project when using `@smitch/fluid`.
+
+Required (framework)
+
+```bash
+npm install react react-dom next
+```
+
+Optional (feature-specific — install only if you use the feature)
+
+Charts (optional)
+
+If you use the chart components, install the Chart.js runtime and the React wrapper:
+
+```bash
+npm install chart.js react-chartjs-2
+```
+
+Maps (optional — Leaflet)
+
+If you use the map components, install Leaflet and React Leaflet:
+
+```bash
+npm install leaflet react-leaflet
+```
+
+TypeScript notes:
+
+- For some setups you may want `@types/leaflet` (install if your build complains about Leaflet
+  types):
+
+```bash
+npm install -D @types/leaflet
+```
+
+## Basic Usage
+
+Now, you can import and use any Fluid UI [component](#components) in your Next.js project:
+
+```jsx
+import { Button } from "@smitch/fluid";
+
+const App = () => <Button>Click me</Button>;
+
+export default App;
+```
+
+## Charts Usage
+
+Charts available include:
+
+- BarChart
+- BubbleChart
+- LineChart
+- PieChart
+- DoughnutChart
+- ScatterChart
+- RadarChart
+- PolarAreaChart
+- MixedChart
+
+Charts require Chart.js and the React wrapper:
+
+```bash
+npm install chart.js react-chartjs-2
+```
+
+### Chart Usage Example
+
+```jsx
+import { BarChart } from "@smitch/fluid/charts";
+
+const App = () => {
+  return (
+    <BarChart
+        data={{
+            datasets: [
+                {
+                    label: 'Min Temperature (°C)',
+                    data: [12, 15, 10, 8, 14],
+                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
+                    borderWidth: 0,
+                },
+                {
+                    label: 'Max Temperature (°C)',
+                    data: [22, 25, 20, 18, 24],
+                    backgroundColor: 'rgba(255, 99, 132, 0.6)',
+                    borderWidth: 0,
+                },
+                ...
+            ],
+            labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
+        }}
+      title = 'Weekly Temperature Ranges',
+      legendposition = 'bottom',
+    />
+  )
+};
+
+export default App;
+```
+
+## Map Usage
+
+Map options include:
+
+- MapMarker
+- MapCircle
+- MapPolygon
+- MapLine
+- MapRectangle
+
+Install Leaflet and React Leaflet (and leaflet.fullscreen if fullscreen control required):
+
+```bash
+npm install leaflet react-leaflet leaflet.fullscreen
+```
+
+```bash
+npm install -D @types/leaflet @types/leaflet.fullscreen
+```
+
+### Map Usage Examples
+
+#### Static Map
+
+```jsx
+import { Map } from "@smitch/fluid/map";
+
+const App = () => {
+  return (
+    <Map
+      center={[51.505, -0.09]}
+      style={{
+        height: "400px",
+        width: "100%",
+      }}
+      tileIndex={0}
+      zoom={16}
+    />
+  );
+};
+
+export default App;
+```
+
+#### Map with marker
+
+```jsx
+import { Map, MapMarker } from "@smitch/fluid/map";
+
+const App = () => {
+  return (
+    <Map
+      attributionControl
+      center={[51.505, -0.09]}
+      fullscreenControl
+      fullscreenControlPosition="topleft"
+      style={{
+        height: "400px",
+        width: "100%",
+      }}
+      tilesControl
+      zoom={13}
+      zoomControl
+    >
+      <MapMarker popupContent="Marker 1" position={[51.505, -0.09]} />
+      <MapMarker position={[51.51, -0.1]} />
+    </Map>
+  );
+};
+
+export default App;
+```
+
+## Components
+
+### Buttons
+
+- <a href='https://fluid-ui.vercel.app/?path=/docs/buttons-button--docs'>Button</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/buttons-button-close-button--docs'>Close
+  Button</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/buttons-button-group--docs'>Button Group</a>
+
+### Inputs
+
+- <a href='https://fluid-ui.vercel.app/?path=/docs/inputs-autocomplete--docs'>
+  	Autocomplete
+  </a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/inputs-checkbox--docs'>Checkbox</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/inputs-counter--docs'>Counter</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/inputs-file-upload--docs'>File Upload</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/inputs-input--docs'>Input</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/inputs-password-input--docs'>Password Input</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/inputs-radiog-roup--docs'>Radio Group</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/inputs-range-input--docs'>Range Input</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/inputs-search-input--docs'>Search Input</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/inputs-select--docs'>Select</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/inputs-switch--docs'>Switch</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/inputs-textarea--docs'>Textarea</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/inputs-text-input--docs'>Text Input</a>
+
+### Forms
+
+- <a href='https://fluid-ui.vercel.app/?path=/docs/forms-fieldset--docs'>Fieldset</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/forms-form--docs'>Form</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/forms-label--docs'>Label</a>
+
+### Menus
+
+- <a href='https://fluid-ui.vercel.app/?path=/docs/menus-accordion--docs'>Accordion</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/menus-breadcrumbs--docs'>Breadcrumbs</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/menus-carousel--docs'>Carousel</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/menus-drawer--docs'>Drawer</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/menus-dropdown--docs'>Dropdown</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/menus-navbar--docs'>NavBar</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/menus-pagination--docs'>Pagination</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/menus-sidebar--docs'>Sidebar</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/menus-tabs--docs'>Tabs</a>
+
+### Feedback
+
+- <a href='https://fluid-ui.vercel.app/?path=/docs/feedback-alert--docs'>Alert</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/feedback-badge--docs'>Badge</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/feedback-dialog--docs'>Dialog</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/feedback-loading--docs'>Loading</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/feedback-progress--docs'>Progress</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/feedback-ratings--docs'>Ratings</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/feedback-ticker--docs'>Ticker</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/feedback-toast--docs'>Toast</a>
+
+### Media
+
+- <a href='https://fluid-ui.vercel.app/?path=/docs/media-card--docs'>Card</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/media-figure--docs'>Figure</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/media-gallery--docs'>Gallery</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/media-hero--docs'>Hero</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/media-icon--docs'>Icon</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/media-modal--docs'>Modal</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/media-placeholder--docs'>PlaceHolder</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/media-twitter-embed--docs'>Twitter Embed</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/media-twitter-embed--docs'>Twitter Timeline</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/media-video--docs'>Video</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/media-video-player--docs'>Video Player</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/media-youtube-embed--docs'>YouTube Embed</a>
+
+### Typography
+
+- <a href='https://fluid-ui.vercel.app/?path=/docs/typography-blockquote--docs'>Blockquote</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/typography-codeblock--docs'>Codeblock</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/typography-heading--docs'>Heading</a>
+
+### Data Visualization
+
+- <a href='https://fluid-ui.vercel.app/?path=/docs/data-visualization-data-table--docs'>Data
+  Table</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/data-visualization-pictogram--docs'>Pictogram</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/data-visualization-line-chart--docs'>Line
+  Chart</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/data-visualization-bar-chart--docs'>Bar Chart</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/data-visualization-mixed-chart--docs'>Mixed
+  Chart</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/data-visualization-pie-chart--docs'>Pie Chart</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/data-visualization-doughnut-chart--docs'>Doughnut
+  Chart</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/data-visualization-radar-chart--docs'>Radar
+  Chart</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/data-visualization-polar-area-chart--docs'>PolarArea
+  Chart</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/data-visualization-scatter-chart--docs'>Scatter
+  Chart</a>
+- <a href='https://fluid-ui.vercel.app/?path=/docs/data-visualization-stat-bar--docs'>Stat Bar</a>
+
+### Time
+
+- <a href='https://fluid-ui.vercel.app/?path=/docs/time-clock--docs'>Clock</a>
+
+### Maps
+
+- <a href='https://fluid-ui.vercel.app/?path=/docs/maps-map--docs'>Map</a>
+
+### Social Media
+
+- <a href='https://fluid-ui.vercel.app/?path=/docs/social-socialshare--docs'>Social Media Share</a>
+
+## Author
+
+Fluid UI is developed and maintained by
+[Stephen Mitchell](https://www.linkedin.com/in/stephen-m-52a3a4192).

package/index.d.ts

@@ -0,0 +1 @@
+export * from './lib'

package/index.js

@@ -0,0 +1 @@
+export * from './lib'

package/lib/@hooks/useWindowWidth.js

@@ -0,0 +1,17 @@
+'use client';
+import { useEffect, useState } from 'react';
+var useWindowWidth = function () {
+    var _a = useState(window.innerWidth), windowWidth = _a[0], setWindowWidth = _a[1];
+    useEffect(function () {
+        var handleResize = function () {
+            setWindowWidth(window.innerWidth);
+        };
+        window.addEventListener('resize', handleResize);
+        return function () {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    return windowWidth;
+};
+export default useWindowWidth;
+//# sourceMappingURL=useWindowWidth.js.map

package/lib/@hooks/useWindowWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWindowWidth.js","sourceRoot":"","sources":["../../../src/ui/@hooks/useWindowWidth.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,IAAM,cAAc,GAAG;IAChB,IAAA,KAAgC,QAAQ,CAAS,MAAM,CAAC,UAAU,CAAC,EAAlE,WAAW,QAAA,EAAE,cAAc,QAAuC,CAAA;IAEzE,SAAS,CAAC;QACT,IAAM,YAAY,GAAG;YACpB,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;QAClC,CAAC,CAAA;QAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QAE/C,OAAO;YACN,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QACnD,CAAC,CAAA;IACF,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,WAAW,CAAA;AACnB,CAAC,CAAA;AAED,eAAe,cAAc,CAAA","sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\n\nconst useWindowWidth = () => {\n\tconst [windowWidth, setWindowWidth] = useState<number>(window.innerWidth)\n\n\tuseEffect(() => {\n\t\tconst handleResize = () => {\n\t\t\tsetWindowWidth(window.innerWidth)\n\t\t}\n\n\t\twindow.addEventListener('resize', handleResize)\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener('resize', handleResize)\n\t\t}\n\t}, [])\n\n\treturn windowWidth\n}\n\nexport default useWindowWidth\n"]}

package/lib/@utils/merge.js

@@ -0,0 +1,35 @@
+export function merge() {
+    var objects = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        objects[_i] = arguments[_i];
+    }
+    var validObjects = objects.filter(function (obj) { return obj != null && typeof obj === "object"; });
+    if (validObjects.length === 0)
+        return {};
+    if (validObjects.length === 1)
+        return validObjects[0];
+    var result = {};
+    for (var _a = 0, validObjects_1 = validObjects; _a < validObjects_1.length; _a++) {
+        var obj = validObjects_1[_a];
+        var keys = Object.keys(obj);
+        for (var _b = 0, keys_1 = keys; _b < keys_1.length; _b++) {
+            var key = keys_1[_b];
+            var currentValue = result[key];
+            var newValue = obj[key];
+            var isObject = function (v) { return v !== null && typeof v === "object" && !Array.isArray(v); };
+            if (isObject(currentValue) && isObject(newValue)) {
+                result[key] = merge(currentValue, newValue);
+            }
+            else {
+                if (Array.isArray(newValue)) {
+                    result[key] = newValue.slice();
+                }
+                else {
+                    result[key] = newValue;
+                }
+            }
+        }
+    }
+    return result;
+}
+//# sourceMappingURL=merge.js.map

package/lib/@utils/merge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge.js","sourceRoot":"","sources":["../../../src/ui/@utils/merge.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,KAAK;IACnB,iBAA6D;SAA7D,UAA6D,EAA7D,qBAA6D,EAA7D,IAA6D;QAA7D,4BAA6D;;IAE7D,IAAM,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,UAAC,GAAG,IAAK,OAAA,GAAG,IAAI,IAAI,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAtC,CAAsC,CAElF,CAAC;IACF,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,EAA6B,CAAC;IACpE,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC;IAEtD,IAAM,MAAM,GAA4B,EAAE,CAAC;IAE3C,KAAkB,UAAY,EAAZ,6BAAY,EAAZ,0BAAY,EAAZ,IAAY,EAAE,CAAC;QAA5B,IAAM,GAAG,qBAAA;QACZ,IAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC9B,KAAkB,UAAI,EAAJ,aAAI,EAAJ,kBAAI,EAAJ,IAAI,EAAE,CAAC;YAApB,IAAM,GAAG,aAAA;YACZ,IAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAY,CAAC;YAC5C,IAAM,QAAQ,GAAI,GAA+B,CAAC,GAAG,CAAY,CAAC;YAElE,IAAM,QAAQ,GAAG,UAAC,CAAU,IAAK,OAAA,CAAC,KAAK,IAAI,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAxD,CAAwD,CAAC;YAE1F,IAAI,QAAQ,CAAC,YAAY,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAEjD,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CACjB,YAAuC,EACvC,QAAmC,CACpC,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAE5B,MAAM,CAAC,GAAG,CAAC,GAAI,QAAsB,CAAC,KAAK,EAAE,CAAC;gBAChD,CAAC;qBAAM,CAAC;oBACN,MAAM,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC;gBACzB,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["export function merge(\n  ...objects: Array<Record<string, unknown> | null | undefined>\n): Record<string, unknown> {\n  const validObjects = objects.filter((obj) => obj != null && typeof obj === \"object\") as Array<\n    Record<string, unknown>\n  >;\n  if (validObjects.length === 0) return {} as Record<string, unknown>;\n  if (validObjects.length === 1) return validObjects[0];\n\n  const result: Record<string, unknown> = {};\n\n  for (const obj of validObjects) {\n    const keys = Object.keys(obj);\n    for (const key of keys) {\n      const currentValue = result[key] as unknown;\n      const newValue = (obj as Record<string, unknown>)[key] as unknown;\n\n      const isObject = (v: unknown) => v !== null && typeof v === \"object\" && !Array.isArray(v);\n\n      if (isObject(currentValue) && isObject(newValue)) {\n        // both are plain objects -> deep merge\n        result[key] = merge(\n          currentValue as Record<string, unknown>,\n          newValue as Record<string, unknown>\n        );\n      } else {\n        if (Array.isArray(newValue)) {\n          // Create a shallow copy of the array to avoid mutating the source\n          result[key] = (newValue as unknown[]).slice();\n        } else {\n          result[key] = newValue;\n        }\n      }\n    }\n  }\n\n  return result;\n}\n"]}

package/lib/accordion/Accordion.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { twMerge } from "tailwind-merge";
+import { AccordionHead, AccordionCard } from "./atoms";
+var sizes = {
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg",
+};
+var layouts = {
+    default: "mb-0 border border-t-0 first:border-t",
+    flush: "border border-x-0 border-t-0 last:border-b-0",
+    spaced: "mb-2 border",
+};
+var Accordion = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? "" : _b, style = _a.style, _c = _a.size, size = _c === void 0 ? "md" : _c, data = _a.data, opened = _a.opened, _d = _a.layout, layout = _d === void 0 ? "default" : _d, _e = _a.icon, icon = _e === void 0 ? "symbol" : _e, _f = _a.iconPosition, iconPosition = _f === void 0 ? "right" : _f, iconColor = _a.iconColor, children = _a.children;
+    var _g = useState(""), open = _g[0], setOpen = _g[1];
+    useEffect(function () {
+        if (opened)
+            setOpen(opened);
+    }, [opened]);
+    var sizeClasses = useMemo(function () { return sizes[size]; }, [size]);
+    var layoutClasses = useMemo(function () { return layouts[layout]; }, [layout]);
+    return (_jsx("div", { className: twMerge("accordion group ".concat(sizeClasses), className), style: style, "data-testid": "accordion", children: data ? (data.map(function (item) { return (_jsxs("div", { className: "accordion-wrapper ".concat(layoutClasses, " bg-light text-dark dark:bg-dark dark:text-light border-slate-300 dark:border-slate-500"), children: [_jsx(AccordionHead, { id: item.id, name: item.name, title: item.title, icon: icon, iconPosition: iconPosition, iconColor: iconColor, layout: layout, open: open, setopen: setOpen }), _jsx(AccordionCard, { title: item.title || item.name, src: item.src, description: item.description, link: item.link })] }, item.id)); })) : (_jsx("div", { className: "accordion-children", children: children })) }));
+};
+export default Accordion;
+//# sourceMappingURL=Accordion.js.map

package/lib/accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/ui/accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIvD,IAAM,KAAK,GAAG;IACZ,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,WAAW;IACf,EAAE,EAAE,SAAS;CACd,CAAC;AAEF,IAAM,OAAO,GAAG;IACd,OAAO,EAAE,uCAAuC;IAChD,KAAK,EAAE,8CAA8C;IACrD,MAAM,EAAE,aAAa;CACtB,CAAC;AAEF,IAAM,SAAS,GAAG,UAAC,EAWF;QAVf,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,KAAK,WAAA,EACL,YAAW,EAAX,IAAI,mBAAG,IAAI,KAAA,EACX,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,cAAkB,EAAlB,MAAM,mBAAG,SAAS,KAAA,EAClB,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,oBAAsB,EAAtB,YAAY,mBAAG,OAAO,KAAA,EACtB,SAAS,eAAA,EACT,QAAQ,cAAA;IAEF,IAAA,KAAkB,QAAQ,CAAS,EAAE,CAAC,EAArC,IAAI,QAAA,EAAE,OAAO,QAAwB,CAAC;IAE7C,SAAS,CAAC;QACR,IAAI,MAAM;YAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,IAAM,WAAW,GAAG,OAAO,CAAC,cAAM,OAAA,KAAK,CAAC,IAAI,CAAC,EAAX,CAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IACvD,IAAM,aAAa,GAAG,OAAO,CAAC,cAAM,OAAA,OAAO,CAAC,MAAM,CAAC,EAAf,CAAe,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE/D,OAAO,CACL,cACE,SAAS,EAAE,OAAO,CAAC,0BAAmB,WAAW,CAAE,EAAE,SAAS,CAAC,EAC/D,KAAK,EAAE,KAAK,iBACA,WAAW,YAEtB,IAAI,CAAC,CAAC,CAAC,CACN,IAAI,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,CACjB,eACE,SAAS,EAAE,4BAAqB,aAAa,4FAAyF,aAGtI,KAAC,aAAa,IACZ,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAChB,EAEF,KAAC,aAAa,IACZ,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,EAC9B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,KAnBG,IAAI,CAAC,EAAE,CAoBR,CACP,EAxBkB,CAwBlB,CAAC,CACH,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,oBAAoB,YAAE,QAAQ,GAAO,CACrD,GACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["\"use client\";\n\nimport React, { useState, useEffect, useMemo } from \"react\";\n\nimport { twMerge } from \"tailwind-merge\";\n\nimport { AccordionHead, AccordionCard } from \"./atoms\";\n\nimport { AccordionProps } from \"./types\";\n\nconst sizes = {\n  sm: \"text-sm\",\n  md: \"text-base\",\n  lg: \"text-lg\",\n};\n\nconst layouts = {\n  default: \"mb-0 border border-t-0 first:border-t\",\n  flush: \"border border-x-0 border-t-0 last:border-b-0\",\n  spaced: \"mb-2 border\",\n};\n\nconst Accordion = ({\n  className = \"\",\n  style,\n  size = \"md\",\n  data,\n  opened,\n  layout = \"default\",\n  icon = \"symbol\",\n  iconPosition = \"right\",\n  iconColor,\n  children,\n}: AccordionProps) => {\n  const [open, setOpen] = useState<string>(\"\");\n\n  useEffect(() => {\n    if (opened) setOpen(opened);\n  }, [opened]);\n\n  const sizeClasses = useMemo(() => sizes[size], [size]);\n  const layoutClasses = useMemo(() => layouts[layout], [layout]);\n\n  return (\n    <div\n      className={twMerge(`accordion group ${sizeClasses}`, className)}\n      style={style}\n      data-testid=\"accordion\"\n    >\n      {data ? (\n        data.map((item) => (\n          <div\n            className={`accordion-wrapper ${layoutClasses} bg-light text-dark dark:bg-dark dark:text-light border-slate-300 dark:border-slate-500`}\n            key={item.id}\n          >\n            <AccordionHead\n              id={item.id}\n              name={item.name}\n              title={item.title}\n              icon={icon}\n              iconPosition={iconPosition}\n              iconColor={iconColor}\n              layout={layout}\n              open={open}\n              setopen={setOpen}\n            />\n\n            <AccordionCard\n              title={item.title || item.name}\n              src={item.src}\n              description={item.description}\n              link={item.link}\n            />\n          </div>\n        ))\n      ) : (\n        <div className=\"accordion-children\">{children}</div>\n      )}\n    </div>\n  );\n};\n\nexport default Accordion;\n"]}

package/lib/accordion/atoms/AccordionCard.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AccordionSection } from "../atoms";
+import { Card, CardBody, CardImage, CardFooter } from "../..";
+var AccordionCard = function (_a) {
+    var src = _a.src, title = _a.title, description = _a.description, link = _a.link;
+    return (_jsx(AccordionSection, { children: _jsxs(Card, { layout: "row", className: "accordion-card p-2", outline: false, children: [src && _jsx(CardImage, { title: title, src: src, aspect: "landscape" }), _jsxs(CardBody, { children: [_jsx("p", { className: "line-clamp-2 max-w-prose", children: description }), _jsx(CardFooter, { link: link, linkLabel: title })] })] }) }));
+};
+export default AccordionCard;
+//# sourceMappingURL=AccordionCard.js.map

package/lib/accordion/atoms/AccordionCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionCard.js","sourceRoot":"","sources":["../../../../src/ui/accordion/atoms/AccordionCard.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE9D,IAAM,aAAa,GAAG,UAAC,EAAqD;QAAnD,GAAG,SAAA,EAAE,KAAK,WAAA,EAAE,WAAW,iBAAA,EAAE,IAAI,UAAA;IACpD,OAAO,CACL,KAAC,gBAAgB,cACf,MAAC,IAAI,IAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,oBAAoB,EAAC,OAAO,EAAE,KAAK,aAC7D,GAAG,IAAI,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAC,WAAW,GAAG,EAChE,MAAC,QAAQ,eACP,YAAG,SAAS,EAAC,0BAA0B,YAAE,WAAW,GAAK,EACzD,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,GAAI,IACnC,IACN,GACU,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import React from \"react\";\n\nimport { AccordionCardProps } from \"../types\";\n\nimport { AccordionSection } from \"../atoms\";\n\nimport { Card, CardBody, CardImage, CardFooter } from \"../..\";\n\nconst AccordionCard = ({ src, title, description, link }: AccordionCardProps) => {\n  return (\n    <AccordionSection>\n      <Card layout=\"row\" className=\"accordion-card p-2\" outline={false}>\n        {src && <CardImage title={title} src={src} aspect=\"landscape\" />}\n        <CardBody>\n          <p className=\"line-clamp-2 max-w-prose\">{description}</p>\n          <CardFooter link={link} linkLabel={title} />\n        </CardBody>\n      </Card>\n    </AccordionSection>\n  );\n};\n\nexport default AccordionCard;\n"]}

package/lib/accordion/atoms/AccordionHead.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Button } from "../..";
+import { FaPlus, FaMinus, FaChevronLeft, FaChevronRight, FaChevronDown } from "react-icons/fa";
+var iconStyles = "aspect-square text-current w-6 group-[.text-sm]:w-4 group-[.text-lg]:w-8";
+var iconPositionStyles = {
+    left: "justify-end flex-row-reverse",
+    right: "justify-between",
+};
+var layoutStyles = {
+    default: "p-2",
+    spaced: "p-2",
+    flush: "py-2 px-0",
+};
+var AccordionHead = function (_a) {
+    var icon = _a.icon, _b = _a.iconPosition, iconPosition = _b === void 0 ? "right" : _b, _c = _a.iconColor, iconColor = _c === void 0 ? "current" : _c, _d = _a.layout, layout = _d === void 0 ? "default" : _d, id = _a.id, open = _a.open, setopen = _a.setopen, title = _a.title, name = _a.name;
+    var iconPositionClasses = useMemo(function () { return iconPositionStyles[iconPosition]; }, [iconPosition]);
+    var layoutnClasses = useMemo(function () { return layoutStyles[layout]; }, [layout]);
+    return (_jsxs("h3", { className: "accordion-head ".concat(iconPositionClasses, " ").concat(layoutnClasses, " gap-1 peer font-semibold opacity-90 m-0 flex cursor-pointer items-center  text-xl group-[.text-sm]:text-lg group-[.text-lg]:text-2xl p-2 capitalize ").concat(open === id ? "open" : ""), onClick: function () { return setopen("".concat(open === id ? "" : id)); }, children: [title || name, _jsx(Button, { className: "accordion-btn shadow-none !p-0", layout: "circle", onClick: function () { return setopen("".concat(open === id ? "" : id)); }, btnBackground: "transparent", btnColor: iconColor, children: _jsxs(_Fragment, { children: [open === id ? (icon === "symbol" ? (_jsx(FaMinus, { className: iconStyles })) : (_jsx(FaChevronDown, { className: iconStyles }))) : icon === "symbol" ? (_jsx(FaPlus, { className: iconStyles })) : iconPosition === "left" ? (_jsx(FaChevronRight, { className: iconStyles })) : (_jsx(FaChevronLeft, { className: iconStyles })), _jsx("span", { className: "sr-only", children: "Toggle section" })] }) })] }));
+};
+export default AccordionHead;
+//# sourceMappingURL=AccordionHead.js.map

package/lib/accordion/atoms/AccordionHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionHead.js","sourceRoot":"","sources":["../../../../src/ui/accordion/atoms/AccordionHead.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/F,IAAM,UAAU,GAAG,0EAA0E,CAAC;AAE9F,IAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,8BAA8B;IACpC,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,IAAM,YAAY,GAAG;IACnB,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,KAAK;IACb,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,IAAM,aAAa,GAAG,UAAC,EAUF;QATnB,IAAI,UAAA,EACJ,oBAAsB,EAAtB,YAAY,mBAAG,OAAO,KAAA,EACtB,iBAAqB,EAArB,SAAS,mBAAG,SAAS,KAAA,EACrB,cAAkB,EAAlB,MAAM,mBAAG,SAAS,KAAA,EAClB,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,KAAK,WAAA,EACL,IAAI,UAAA;IAEJ,IAAM,mBAAmB,GAAG,OAAO,CAAC,cAAM,OAAA,kBAAkB,CAAC,YAAY,CAAC,EAAhC,CAAgC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAC5F,IAAM,cAAc,GAAG,OAAO,CAAC,cAAM,OAAA,YAAY,CAAC,MAAM,CAAC,EAApB,CAAoB,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACrE,OAAO,CACL,cACE,SAAS,EAAE,yBAAkB,mBAAmB,cAAI,cAAc,kKAChE,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CACzB,EACF,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,UAAG,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAE,CAAC,EAAnC,CAAmC,aAEjD,KAAK,IAAI,IAAI,EAEd,KAAC,MAAM,IACL,SAAS,EAAC,gCAAgC,EAC1C,MAAM,EAAC,QAAQ,EACf,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,UAAG,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAE,CAAC,EAAnC,CAAmC,EAClD,aAAa,EAAC,aAAa,EAC3B,QAAQ,EAAE,SAAS,YAEnB,8BACG,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,CACb,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAClB,KAAC,OAAO,IAAC,SAAS,EAAE,UAAU,GAAI,CACnC,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,IAAC,SAAS,EAAE,UAAU,GAAI,CACzC,CACF,CAAC,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACtB,KAAC,MAAM,IAAC,SAAS,EAAE,UAAU,GAAI,CAClC,CAAC,CAAC,CAAC,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,CAC5B,KAAC,cAAc,IAAC,SAAS,EAAE,UAAU,GAAI,CAC1C,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,IAAC,SAAS,EAAE,UAAU,GAAI,CACzC,EAED,eAAM,SAAS,EAAC,SAAS,+BAAsB,IAC9C,GACI,IACN,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["\"use client\";\n\nimport React, { useMemo } from \"react\";\n\nimport { AccordionHeadProps } from \"../types\";\n\nimport { Button } from \"../..\";\n\nimport { FaPlus, FaMinus, FaChevronLeft, FaChevronRight, FaChevronDown } from \"react-icons/fa\";\n\nconst iconStyles = \"aspect-square text-current w-6 group-[.text-sm]:w-4 group-[.text-lg]:w-8\";\n\nconst iconPositionStyles = {\n  left: \"justify-end flex-row-reverse\",\n  right: \"justify-between\",\n};\n\nconst layoutStyles = {\n  default: \"p-2\",\n  spaced: \"p-2\",\n  flush: \"py-2 px-0\",\n};\n\nconst AccordionHead = ({\n  icon,\n  iconPosition = \"right\",\n  iconColor = \"current\",\n  layout = \"default\",\n  id,\n  open,\n  setopen,\n  title,\n  name,\n}: AccordionHeadProps) => {\n  const iconPositionClasses = useMemo(() => iconPositionStyles[iconPosition], [iconPosition]);\n  const layoutnClasses = useMemo(() => layoutStyles[layout], [layout]);\n  return (\n    <h3\n      className={`accordion-head ${iconPositionClasses} ${layoutnClasses} gap-1 peer font-semibold opacity-90 m-0 flex cursor-pointer items-center  text-xl group-[.text-sm]:text-lg group-[.text-lg]:text-2xl p-2 capitalize ${\n        open === id ? \"open\" : \"\"\n      }`}\n      onClick={() => setopen(`${open === id ? \"\" : id}`)}\n    >\n      {title || name}\n\n      <Button\n        className=\"accordion-btn shadow-none !p-0\"\n        layout=\"circle\"\n        onClick={() => setopen(`${open === id ? \"\" : id}`)}\n        btnBackground=\"transparent\"\n        btnColor={iconColor}\n      >\n        <>\n          {open === id ? (\n            icon === \"symbol\" ? (\n              <FaMinus className={iconStyles} />\n            ) : (\n              <FaChevronDown className={iconStyles} />\n            )\n          ) : icon === \"symbol\" ? (\n            <FaPlus className={iconStyles} />\n          ) : iconPosition === \"left\" ? (\n            <FaChevronRight className={iconStyles} />\n          ) : (\n            <FaChevronLeft className={iconStyles} />\n          )}\n\n          <span className=\"sr-only\">Toggle section</span>\n        </>\n      </Button>\n    </h3>\n  );\n};\n\nexport default AccordionHead;\n"]}