@pairbo/ui-kit 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pairbo/ui-kit",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "",
   "type": "module",
   "readme": "./README-NPM.md",

package/README.md

@@ -1,186 +0,0 @@
-## **🚀 V1 To-Do List**
-
-### **🔧 Pending Setup**
-
-- [ ] **11ty setup is incomplete.**
-- [ ] **Mock API needed** for:
-  - Fetching and submitting cards
-  - Processing handwritten images
-
----
-
-## **🎨 Global Theme ([src/themes](src/themes))**
-
-- [ ] Define global theme styles
-  - Identify `--sl-` global CSS variables in component styles, and replace with `--pbo-`
-  - Declare variables in [`default.css`](src/themes/default.css)
-
----
-
-## **📌 Components Overview**
-
-### **🗂️ Drawer ([src/components/drawer](src/components/drawer))**
-
-- [x] Implement **window-like title bar** with:
-  - **Left:** Back icon (if not on Card Selection page)
-  - **Center:** Current page name (**Card Selection** / **Card Editing**)
-  - **Right:** Close icon to dismiss drawer
-- [x] Make styles more flexible:
-  - Support top/bottom/left/right drawers
-  - Allow setting drawer size (`30%`, `50%`, `60%`, `100%`)
-  - Add opening animations
-- [ ] _(Optional)_ Customizable themes (background, colors, etc.)
-
----
-
-### **✍️ Editor ([src/components/editor](src/components/editor))**
-
-#### 🖥️ **Desktop Layout**
-
-- [x] Implement responsive grid layout for desktop
-- Grid rows: `1`
-- Grid cols: `12`
-- Image Slider:
-  - `sm`: col start `2`, end `7`
-  - `2xl`: col start `3`, end `7`
-- Message Editor:
-  - `sm`: col start `7`, end `12`
-  - `2xl`: col start `7`, end `11`
-
-#### 📱 **Mobile Layout**
-
-- [x] Implement responsive flex layout for mobile
-- `display: flex`
-- `flex-direction: column`
-- `gap: 1rem`
-
----
-
-## **📝 Form Elements**
-
-### **📄 Type Form ([src/components/type-form](src/components/type-form))**
-
-- [x] Add gap between form elements
-- [ ] Implement submit logic:
-  - If message is empty → CTA button turns **red** and shows `Skip` link
-  - **❓ Where to implement validation logic?** (At type form level or button level?)
-- [x] **Editor ↔️ Image Slider Communication**
-  - Auto-focus image slider when user types in textarea
-  - Improve communication logic between image slider and type form
-
----
-
-### **🔠 Font Selector**
-
-- [ ] **Extract** `font-selector` as a separate reusable component
-- [ ] Optimize font variable passing
-- [ ] Display font preview in dropdown
-- [ ] Enable global font imports
-- [ ] Improve font variable handling in `<pbo-selector>`
-
----
-
-### **📝 Textarea ([src/components/textarea](src/components/textarea))**
-
-- [x] Show **current/max characters** indicator
-- [ ] _(Optional)_ Show **current/max lines** indicator
-
----
-
-## **🎛️ Form Controls**
-
-### **️ Radio Button, Group, and Button Enhancements**
-
-#### **✅ Submit Button ([src/components/button](src/components/button))**
-
-- [ ] **Submit Button Logic**
-  - Add validation to check form inputs
-  - Support `pre-submit` & `post-submit` callbacks:
-    - `pre-submit`: E.g. validate stock before adding a card
-    - `post-submit`: E.g. update cart after adding a card
-
-#### **🎛️ Button Group ([src/components/button-group](src/components/button-group))**
-
-- [x] Define group styles
-- [ ] Implement submit validation & error handling
-
-#### **🔘 Radio Button ([src/components/radio-button](src/components/radio-button))**
-
-- [x] Enhance styling and logic based on button component
-
-#### **📻 Radio Group ([src/components/radio-group](src/components/radio-group))**
-
-- [x] Define group styles
-- [ ] Implement validation & error handling
-
----
-
-## **📂 Category & Category Image Components**
-
-### **📦 Category ([src/components/category](src/components/category))**
-
-- [x] Fix **image aspect ratio** (currently responsive)
-- [x] Ensure **responsive slider**:
-  - **Desktop:** Show **4** cards
-  - **Mobile:** Show **2** cards
-  - Hide arrows if fewer than needed cards
-- [x] Add **hover animations**
-- [x] Improve **category title styling**
-
-## Roadmap
-
-### Preprepare
-
-- [x] **Live Documentation for Development and Future Reference**  
-       _Status_: The basic structure has been initialized using **11ty**. However, the bundling process for `src/components` is not fully configured. Additionally, rendering inline `` `html` `` within Markdown to actual HTML in **11ty** is not yet fully functional.
-
----
-
-### Phase 1: Core Card Editor
-
-- [x] **Font Dropdown Selector**
-- [x] **Editor Dropdown Selector**
-- [x] **Text Alignment Button Group**
-- [x] **Text Color Block**
-- [x] **Live Preview (Zoomed View)**
-- [x] **Typing Live Preview**
-- [ ] **Handwritten Live Preview**
-- [x] **Image Slider**
-- [ ] **CTA Button**
-- [ ] **Handwritten Description Section**
-
----
-
-### Phase 2: Core Card Selection
-
-- [x] **Image Slider for Card Covers**  
-       _(4 columns on desktop, 2 columns on mobile)_
-- [x] **Category Selection**
-- [x] **Image Components (Optional)**
-
----
-
-### Phase 3: Integration Components
-
-- [x] **Card Selection - Main Content**
-- [x] **Card Editor (Typing) - Right Content Group**
-- [ ] **Card Editor (Handwritten) - Right Content Group**
-- [ ] **Card Editor (Handwritten) - Content Section**
-- [x] **Card Editor (Typing) - Content Section**
-
----
-
-### Phase 4: Modal/Pop-up
-
-- [ ] **Checkboxes**
-- [x] **Basic Modal Implementation**
-- [x] **Sectioned Form in Modal**
-- [ ] **Modal Submission API**
-
----
-
-### Phase 5: Abstract Internal Logic
-
-- **TBD** _(Detailed planning will be decided later.)_
-
-This phase will focus on abstracting internal logic, such as retrieving card data and synchronizing editing information across different components.