react-matchings 0.0.1 → 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Fares Galal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1 +1,658 @@
+# react-matchings
 
+A React component for interactive question-answer matching. Create engaging quiz and assessment interfaces where users can drag and drop connections between questions and answers.
+
+## Features
+
+- 🎯 **Drag and Drop Interface** - Intuitive drag-and-drop matching experience
+- 🎨 **Highly Customizable** - Customize colors, styling, and behavior through props
+- ♿ **Accessible** - Built with accessibility in mind
+- 🎭 **Dynamic Styling** - Apply conditional styles based on component state
+- 📱 **Responsive** - Works across different screen sizes
+- 🎪 **Interactive Feedback** - Visual feedback during dragging and matching
+
+## Installation
+
+```bash
+npm install react-matchings
+```
+
+```bash
+yarn add react-matchings
+```
+
+```bash
+pnpm add react-matchings
+```
+
+## Basic Usage
+
+First, import the component and its CSS:
+
+```tsx
+import { Matching } from "react-matchings";
+import "react-matchings/dist/index.css";
+
+function App() {
+  const questions = [
+    { id: 1, text: "What is React?" },
+    { id: 2, text: "What is TypeScript?" },
+    { id: 3, text: "What is JavaScript?" },
+  ];
+
+  const answers = [
+    { id: 1, text: "A JavaScript library for building UIs" },
+    { id: 2, text: "A typed superset of JavaScript" },
+    { id: 3, text: "A programming language" },
+  ];
+
+  const handleMatchChange = (matches) => {
+    console.log("Current matches:", matches);
+    // matches format: [{ questionId: 1, answerId: 1 }, ...]
+  };
+
+  return (
+    <Matching
+      questions={questions}
+      answers={answers}
+      onChange={handleMatchChange}
+    />
+  );
+}
+```
+
+## Props
+
+### Required Props
+
+#### `questions`
+
+Array of question objects to display on the left side.
+
+**Type:** `{ id: number; text: string }[]`
+
+**Example:**
+
+```tsx
+const questions = [
+  { id: 1, text: "Capital of France?" },
+  { id: 2, text: "Capital of Japan?" },
+  { id: 3, text: "Capital of Australia?" },
+];
+```
+
+---
+
+#### `answers`
+
+Array of answer objects to display on the right side.
+
+**Type:** `{ id: number; text: string }[]`
+
+**Example:**
+
+```tsx
+const answers = [
+  { id: 1, text: "Paris" },
+  { id: 2, text: "Tokyo" },
+  { id: 3, text: "Canberra" },
+];
+```
+
+**Note:** The number of questions and answers don't need to match. Users can connect any question to any answer.
+
+---
+
+#### `onChange`
+
+Callback function that is called whenever the matches change.
+
+**Type:** `(matches: { questionId: number | string; answerId: number | string }[]) => void`
+
+**Example:**
+
+```tsx
+const handleChange = (matches) => {
+  // matches is an array of connections
+  // Example: [{ questionId: 1, answerId: 2 }, { questionId: 2, answerId: 1 }]
+  console.log("Matches updated:", matches);
+  // Save to state, send to API, etc.
+};
+
+<Matching onChange={handleChange} ... />
+```
+
+---
+
+### Optional Props
+
+#### `className`
+
+Additional CSS classes to apply to the container element.
+
+**Type:** `string`
+
+**Default:** `undefined`
+
+**Example:**
+
+```tsx
+<Matching
+  className="my-8 p-6 border border-gray-300 rounded-lg"
+  questions={questions}
+  answers={answers}
+  onChange={handleChange}
+/>
+```
+
+---
+
+#### `questionClassName`
+
+Custom CSS classes for question buttons. Can be a string or a function that receives state.
+
+**Type:** `string | ((state: { isMatched: boolean; isDragging: boolean }) => string)`
+
+**Default:** `undefined`
+
+**Example (string):**
+
+```tsx
+<Matching
+  questionClassName="bg-blue-500 hover:bg-blue-600 text-white font-bold"
+  questions={questions}
+  answers={answers}
+  onChange={handleChange}
+/>
+```
+
+**Example (function with state):**
+
+```tsx
+<Matching
+  questionClassName={({ isMatched, isDragging }) => {
+    if (isDragging) return "bg-yellow-500 text-black";
+    if (isMatched) return "bg-green-500 text-white";
+    return "bg-gray-200 text-gray-800";
+  }}
+  questions={questions}
+  answers={answers}
+  onChange={handleChange}
+/>
+```
+
+**State properties:**
+
+- `isMatched`: `boolean` - Whether the question is currently matched to an answer
+- `isDragging`: `boolean` - Whether the question is currently being dragged
+
+---
+
+#### `answerClassName`
+
+Custom CSS classes for answer buttons. Can be a string or a function that receives state.
+
+**Type:** `string | ((state: { isMatched: boolean; isHovering: boolean }) => string)`
+
+**Default:** `undefined`
+
+**Example (string):**
+
+```tsx
+<Matching
+  answerClassName="bg-purple-500 hover:bg-purple-600 text-white"
+  questions={questions}
+  answers={answers}
+  onChange={handleChange}
+/>
+```
+
+**Example (function with state):**
+
+```tsx
+<Matching
+  answerClassName={({ isMatched, isHovering }) => {
+    if (isHovering && !isMatched)
+      return "bg-yellow-300 border-2 border-yellow-500";
+    if (isMatched) return "bg-green-400 text-white font-semibold";
+    return "bg-gray-100 text-gray-700";
+  }}
+  questions={questions}
+  answers={answers}
+  onChange={handleChange}
+/>
+```
+
+**State properties:**
+
+- `isMatched`: `boolean` - Whether the answer is currently matched to a question
+- `isHovering`: `boolean` - Whether a question is being dragged over this answer
+
+---
+
+#### `lineClassName`
+
+Custom CSS classes for the SVG container that draws the connecting lines.
+
+**Type:** `string`
+
+**Default:** `undefined`
+
+**Example:**
+
+```tsx
+<Matching
+  lineClassName="opacity-90"
+  questions={questions}
+  answers={answers}
+  onChange={handleChange}
+/>
+```
+
+---
+
+#### `lineColor`
+
+Color of the connecting lines.
+
+**Type:** `string`
+
+**Default:** `"black"`
+
+**Example:**
+
+```tsx
+<Matching
+  lineColor="#3b82f6"  // blue
+  questions={questions}
+  answers={answers}
+  onChange={handleChange}
+/>
+
+// Or use CSS color names
+<Matching
+  lineColor="rgb(59, 130, 246)"
+  questions={questions}
+  answers={answers}
+  onChange={handleChange}
+/>
+```
+
+---
+
+#### `circleColor`
+
+Color of the circles at the ends of the connecting lines.
+
+**Type:** `string`
+
+**Default:** `"white"`
+
+**Example:**
+
+```tsx
+<Matching
+  circleColor="#f3f4f6" // light gray
+  questions={questions}
+  answers={answers}
+  onChange={handleChange}
+/>
+```
+
+---
+
+#### `circleRadius`
+
+Radius of the circles at the ends of the connecting lines, in pixels.
+
+**Type:** `number`
+
+**Default:** `8`
+
+**Example:**
+
+```tsx
+<Matching
+  circleRadius={12}
+  questions={questions}
+  answers={answers}
+  onChange={handleChange}
+/>
+```
+
+---
+
+#### `offset`
+
+Offset distance from the edges where lines connect, in pixels. Controls how far from the edge the connection points are.
+
+**Type:** `number`
+
+**Default:** `10`
+
+**Example:**
+
+```tsx
+<Matching
+  offset={15}
+  questions={questions}
+  answers={answers}
+  onChange={handleChange}
+/>
+```
+
+---
+
+#### `disabled`
+
+Whether the component is disabled. When disabled, users cannot create or remove matches.
+
+**Type:** `boolean`
+
+**Default:** `false`
+
+**Example:**
+
+```tsx
+const [isDisabled, setIsDisabled] = useState(false);
+
+<Matching
+  disabled={isDisabled}
+  questions={questions}
+  answers={answers}
+  onChange={handleChange}
+/>
+
+<button onClick={() => setIsDisabled(!isDisabled)}>
+  {isDisabled ? "Enable" : "Disable"} Matching
+</button>
+```
+
+---
+
+## Complete Examples
+
+### Example 1: Basic Quiz Component
+
+```tsx
+import { useState } from "react";
+import { Matching } from "react-matchings";
+import "react-matchings/dist/index.css";
+
+function QuizApp() {
+  const questions = [
+    { id: 1, text: "What is the capital of France?" },
+    { id: 2, text: "What is the capital of Japan?" },
+    { id: 3, text: "What is the capital of Australia?" },
+  ];
+
+  const answers = [
+    { id: 1, text: "Paris" },
+    { id: 2, text: "Tokyo" },
+    { id: 3, text: "Canberra" },
+  ];
+
+  const [matches, setMatches] = useState([]);
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmit = () => {
+    setSubmitted(true);
+    // Check answers, calculate score, etc.
+    console.log("Submitted matches:", matches);
+  };
+
+  return (
+    <div className="p-8 max-w-4xl mx-auto">
+      <h1 className="text-2xl font-bold mb-6">Geography Quiz</h1>
+
+      <Matching
+        questions={questions}
+        answers={answers}
+        onChange={setMatches}
+        disabled={submitted}
+      />
+
+      <button
+        onClick={handleSubmit}
+        disabled={submitted || matches.length === 0}
+        className="mt-6 px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400"
+      >
+        Submit Answers
+      </button>
+    </div>
+  );
+}
+```
+
+### Example 2: Custom Styled Component
+
+```tsx
+import { Matching } from "react-matchings";
+import "react-matchings/dist/index.css";
+
+function StyledMatching() {
+  const questions = [
+    { id: 1, text: "Question 1" },
+    { id: 2, text: "Question 2" },
+  ];
+
+  const answers = [
+    { id: 1, text: "Answer 1" },
+    { id: 2, text: "Answer 2" },
+  ];
+
+  return (
+    <Matching
+      questions={questions}
+      answers={answers}
+      onChange={(matches) => console.log(matches)}
+      className="p-8 bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl shadow-lg"
+      questionClassName={({ isMatched, isDragging }) => {
+        let base = "p-4 rounded-lg font-semibold transition-all duration-200 ";
+        if (isDragging)
+          base += "bg-yellow-400 text-yellow-900 shadow-lg scale-105";
+        else if (isMatched) base += "bg-green-500 text-white";
+        else base += "bg-blue-500 text-white hover:bg-blue-600";
+        return base;
+      }}
+      answerClassName={({ isMatched, isHovering }) => {
+        let base = "p-4 rounded-lg font-semibold transition-all duration-200 ";
+        if (isHovering && !isMatched)
+          base += "bg-yellow-300 text-yellow-900 border-2 border-yellow-500";
+        else if (isMatched) base += "bg-green-500 text-white";
+        else base += "bg-purple-500 text-white hover:bg-purple-600";
+        return base;
+      }}
+      lineColor="#8b5cf6"
+      circleColor="#e9d5ff"
+      circleRadius={10}
+      offset={12}
+    />
+  );
+}
+```
+
+### Example 3: With Initial Matches
+
+```tsx
+import { useState, useEffect } from "react";
+import { Matching } from "react-matchings";
+import "react-matchings/dist/index.css";
+
+function MatchingWithInitialState() {
+  const questions = [
+    { id: 1, text: "React" },
+    { id: 2, text: "Vue" },
+    { id: 3, text: "Angular" },
+  ];
+
+  const answers = [
+    { id: 1, text: "Facebook" },
+    { id: 2, text: "Evan You" },
+    { id: 3, text: "Google" },
+  ];
+
+  const [matches, setMatches] = useState([]);
+
+  // Load initial matches (e.g., from localStorage or API)
+  useEffect(() => {
+    const savedMatches = localStorage.getItem("matches");
+    if (savedMatches) {
+      setMatches(JSON.parse(savedMatches));
+    }
+  }, []);
+
+  // Save matches when they change
+  const handleMatchChange = (newMatches) => {
+    setMatches(newMatches);
+    localStorage.setItem("matches", JSON.stringify(newMatches));
+  };
+
+  return (
+    <Matching
+      questions={questions}
+      answers={answers}
+      onChange={handleMatchChange}
+    />
+  );
+}
+```
+
+### Example 4: Assessment with Validation
+
+```tsx
+import { useState, useMemo } from "react";
+import { Matching } from "react-matchings";
+import "react-matchings/dist/index.css";
+
+function AssessmentComponent() {
+  const questions = [
+    { id: 1, text: "Primary color" },
+    { id: 2, text: "Secondary color" },
+    { id: 3, text: "Tertiary color" },
+  ];
+
+  const answers = [
+    { id: 1, text: "Red, Blue, Yellow" },
+    { id: 2, text: "Orange, Green, Purple" },
+    { id: 3, text: "Red-Orange, Yellow-Green, Blue-Purple" },
+  ];
+
+  // Correct answers
+  const correctMatches = [
+    { questionId: 1, answerId: 1 },
+    { questionId: 2, answerId: 2 },
+    { questionId: 3, answerId: 3 },
+  ];
+
+  const [matches, setMatches] = useState([]);
+  const [showResults, setShowResults] = useState(false);
+
+  const score = useMemo(() => {
+    if (!showResults) return null;
+    const correct = matches.filter((match) =>
+      correctMatches.some(
+        (cm) =>
+          cm.questionId === match.questionId && cm.answerId === match.answerId
+      )
+    ).length;
+    return { correct, total: questions.length };
+  }, [matches, showResults]);
+
+  return (
+    <div className="p-8">
+      <Matching
+        questions={questions}
+        answers={answers}
+        onChange={setMatches}
+        disabled={showResults}
+      />
+
+      {showResults && score && (
+        <div className="mt-6 p-4 bg-gray-100 rounded">
+          <p className="text-lg font-semibold">
+            Score: {score.correct} / {score.total}
+          </p>
+        </div>
+      )}
+
+      <button
+        onClick={() => setShowResults(true)}
+        disabled={showResults || matches.length < questions.length}
+        className="mt-4 px-6 py-2 bg-blue-500 text-white rounded"
+      >
+        Check Answers
+      </button>
+    </div>
+  );
+}
+```
+
+## How It Works
+
+1. **Drag to Connect**: Click and hold on a question, then drag to an answer and release to create a connection.
+
+2. **Remove Connection**: Click on a matched question to remove its connection.
+
+3. **Visual Feedback**:
+
+   - Dragging shows a dashed line following your cursor
+   - Matched items are visually distinguished
+   - Hovering over answers while dragging highlights them
+
+4. **State Management**: The `onChange` callback receives an array of all current matches whenever they change.
+
+## Styling
+
+The component uses Tailwind CSS for styling. Make sure to import the CSS file:
+
+```tsx
+import "react-matchings/dist/index.css";
+```
+
+You can override default styles using the className props, or customize the colors using the color props.
+
+## TypeScript Support
+
+This package includes TypeScript definitions. The component is fully typed:
+
+```tsx
+import { Matching } from "react-matchings";
+
+// Types are automatically inferred
+const handleChange = (
+  matches: { questionId: number | string; answerId: number | string }[]
+) => {
+  // matches is properly typed
+};
+```
+
+## Accessibility
+
+The component includes accessibility features:
+
+- Proper ARIA attributes (`aria-pressed`)
+- Keyboard-friendly interactions
+- Focus management
+- Semantic HTML structure
+
+## Browser Support
+
+Works in all modern browsers that support:
+
+- React 18+
+- CSS Grid
+- SVG
+- Drag and Drop API
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Author
+
+Fares Galal

package/dist/index.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-font-weight:initial;--tw-duration:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-black:#000;--color-white:#fff;--spacing:.25rem;--font-weight-medium:500;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.z-10{z-index:10}.z-20{z-index:20}.grid{display:grid}.h-full{height:100%}.w-full{width:100%}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.gap-10{gap:calc(var(--spacing)*10)}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}.rounded{border-radius:.25rem}.border-gray-500{border-color:var(--color-gray-500)}.border-gray-600{border-color:var(--color-gray-600)}.bg-black{background-color:var(--color-black)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-gray-700{background-color:var(--color-gray-700)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-none{background-image:none}.p-4{padding:calc(var(--spacing)*4)}.ps-7{padding-inline-start:calc(var(--spacing)*7)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.text-white{color:var(--color-white)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.select-none{-webkit-user-select:none;user-select:none}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-gray-500:focus{--tw-ring-color:var(--color-gray-500)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-yellow-300:oklch(90.5% .182 98.111);--color-yellow-400:oklch(85.2% .199 91.936);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-900:oklch(42.1% .095 57.708);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-blue-50:oklch(97% .014 254.604);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-purple-50:oklch(97.7% .014 308.299);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-4xl:56rem;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.z-10{z-index:10}.z-20{z-index:20}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.my-8{margin-block:calc(var(--spacing)*8)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.grid{display:grid}.h-full{height:100%}.w-full{width:100%}.max-w-4xl{max-width:var(--container-4xl)}.scale-105{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.gap-10{gap:calc(var(--spacing)*10)}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-500{border-color:var(--color-gray-500)}.border-gray-600{border-color:var(--color-gray-600)}.border-yellow-500{border-color:var(--color-yellow-500)}.bg-black{background-color:var(--color-black)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-gray-700{background-color:var(--color-gray-700)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-green-400{background-color:var(--color-green-400)}.bg-green-500{background-color:var(--color-green-500)}.bg-purple-500{background-color:var(--color-purple-500)}.bg-yellow-300{background-color:var(--color-yellow-300)}.bg-yellow-400{background-color:var(--color-yellow-400)}.bg-yellow-500{background-color:var(--color-yellow-500)}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-none{background-image:none}.from-blue-50{--tw-gradient-from:var(--color-blue-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-purple-50{--tw-gradient-to:var(--color-purple-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-2{padding-block:calc(var(--spacing)*2)}.ps-7{padding-inline-start:calc(var(--spacing)*7)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-black{color:var(--color-black)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-white{color:var(--color-white)}.text-yellow-900{color:var(--color-yellow-900)}.opacity-90{opacity:.9}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-purple-600:hover{background-color:var(--color-purple-600)}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-gray-500:focus{--tw-ring-color:var(--color-gray-500)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:bg-gray-400:disabled{background-color:var(--color-gray-400)}}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-matchings",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A React component for matching questions and answers",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -8,12 +8,13 @@
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts && npm run build:css",
     "build:css": "npx tailwindcss -i ./src/index.css -o ./dist/index.css --minify",
+    "prepublishOnly": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "tsc"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/F-47/react-qa-matching.git"
+    "url": "git+https://github.com/F-47/react-matchings"
   },
   "keywords": [
     "react",