@geenius/feedback 0.1.0

package/packages/solidjs-css/src/pages/FeedbackAdminPage.tsx

@@ -0,0 +1,78 @@
+import { Component } from 'solid-js';
+import '../styles.css';
+
+const FeedbackAdminPage: Component = () => {
+  return (
+    <div style={{ padding: '1.5rem' }}>
+      <div class="feedback__breadcrumb">
+        <span class="feedback__breadcrumb-item">Feedback</span>
+        <span class="feedback__breadcrumb-sep">/</span>
+        <span class="feedback__breadcrumb-item--active">Admin</span>
+      </div>
+
+      <div class="feedback__stats-grid">
+        <div class="feedback__stat-card">
+          <div class="feedback__stat-icon">📊</div>
+          <div class="feedback__stat-value">7.8</div>
+          <div class="feedback__stat-label">NPS Score</div>
+        </div>
+        <div class="feedback__stat-card">
+          <div class="feedback__stat-icon">⭐</div>
+          <div class="feedback__stat-value">4.2</div>
+          <div class="feedback__stat-label">Avg Rating</div>
+        </div>
+        <div class="feedback__stat-card">
+          <div class="feedback__stat-icon">⏱️</div>
+          <div class="feedback__stat-value">2.1h</div>
+          <div class="feedback__stat-label">Avg Response</div>
+        </div>
+      </div>
+
+      <div class="feedback__filter-panel">
+        <div class="feedback__filter-section">
+          <div class="feedback__filter-section-title">Status</div>
+          <div class="feedback__filter-options">
+            <label class="feedback__filter-option">
+              <input type="checkbox" checked />
+              <span class="feedback__filter-option-label">Open</span>
+            </label>
+            <label class="feedback__filter-option">
+              <input type="checkbox" checked />
+              <span class="feedback__filter-option-label">Under Review</span>
+            </label>
+            <label class="feedback__filter-option">
+              <input type="checkbox" checked />
+              <span class="feedback__filter-option-label">Planned</span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div style={{ 'margin-top': '2rem' }}>
+        <table class="feedback__admin-table">
+          <thead>
+            <tr>
+              <th>Item</th>
+              <th>Status</th>
+              <th>Votes</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Add Dark Mode</td>
+              <td>In Progress</td>
+              <td>42</td>
+            </tr>
+            <tr>
+              <td>Login Timeout Issue</td>
+              <td>Open</td>
+              <td>12</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default FeedbackAdminPage;

package/packages/solidjs-css/src/pages/FeedbackPage.tsx

@@ -0,0 +1,65 @@
+import { Component } from 'solid-js';
+import '../styles.css';
+
+const FeedbackPage: Component = () => {
+  const feedbackItems = [
+    { id: 1, title: 'Add Dark Mode', type: 'feature', status: 'in-progress', votes: 42 },
+    { id: 2, title: 'Bug: Login timeout issue', type: 'bug', status: 'open', votes: 12 },
+    { id: 3, title: 'Improve API documentation', type: 'suggestion', status: 'planned', votes: 28 },
+  ];
+
+  return (
+    <div style={{ padding: '1.5rem' }}>
+      <div class="feedback__breadcrumb">
+        <span class="feedback__breadcrumb-item">Feedback</span>
+        <span class="feedback__breadcrumb-sep">/</span>
+        <span class="feedback__breadcrumb-item--active">View All</span>
+      </div>
+
+      <div class="feedback__stats-grid">
+        <div class="feedback__stat-card">
+          <div class="feedback__stat-icon">💬</div>
+          <div class="feedback__stat-value">145</div>
+          <div class="feedback__stat-label">Total Feedback</div>
+        </div>
+        <div class="feedback__stat-card">
+          <div class="feedback__stat-icon">👍</div>
+          <div class="feedback__stat-value">89</div>
+          <div class="feedback__stat-label">In Progress</div>
+        </div>
+        <div class="feedback__stat-card">
+          <div class="feedback__stat-icon">✅</div>
+          <div class="feedback__stat-value">34</div>
+          <div class="feedback__stat-label">Implemented</div>
+        </div>
+      </div>
+
+      <div class="feedback__filter-tabs" style={{ 'margin-bottom': '1.5rem' }}>
+        <button class="feedback__filter-tab feedback__filter-tab--active">All</button>
+        <button class="feedback__filter-tab feedback__filter-tab--inactive">Features</button>
+        <button class="feedback__filter-tab feedback__filter-tab--inactive">Bugs</button>
+        <button class="feedback__filter-tab feedback__filter-tab--inactive">Suggestions</button>
+      </div>
+
+      <div style={{ display: 'flex', 'flex-direction': 'column', gap: '0.75rem' }}>
+        {feedbackItems.map(item => (
+          <div class={`feedback__card feedback__card--${item.type}`}>
+            <div class="feedback__vote-btn feedback__vote-btn--inactive">
+              <span class="feedback__vote-btn-arrow">▲</span>
+              <span>{item.votes}</span>
+            </div>
+            <div class="feedback__card-info">
+              <div class="feedback__card-badges">
+                <span class={`feedback__type-badge feedback__type-badge--${item.type}`}>{item.type}</span>
+                <span class={`feedback__status-badge feedback__status-badge--${item.status}`}>{item.status}</span>
+              </div>
+              <div class="feedback__card-title">{item.title}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FeedbackPage;

package/packages/solidjs-css/src/primitives/index.ts

@@ -0,0 +1 @@
+export * from '@geenius-feedback/solidjs';

package/packages/solidjs-css/src/styles.css

@@ -0,0 +1,281 @@
+/* ─── Feedback Design Tokens (OKLCH) ──────────────────── */
+:root {
+  --feedback-bg: oklch(0.12 0.01 250);
+  --feedback-surface: oklch(0.16 0.01 250);
+  --feedback-border: oklch(0.22 0.01 250);
+  --feedback-text: oklch(0.95 0.01 250);
+  --feedback-text-muted: oklch(0.58 0.02 250);
+  --feedback-accent: oklch(0.65 0.20 265);
+  --feedback-open: oklch(0.65 0.20 245);
+  --feedback-review: oklch(0.72 0.18 60);
+  --feedback-planned: oklch(0.70 0.22 280);
+  --feedback-progress: oklch(0.65 0.20 265);
+  --feedback-done: oklch(0.72 0.18 155);
+  --feedback-declined: oklch(0.50 0.10 250);
+  --feedback-bug: oklch(0.60 0.25 25);
+  --feedback-feature: oklch(0.70 0.22 280);
+  --feedback-suggestion: oklch(0.72 0.18 60);
+  --feedback-general: oklch(0.65 0.20 245);
+  --feedback-radius: 0.75rem;
+}
+
+/* ─── Feedback Card ──────────────────────────────────── */
+.feedback__card {
+  display: flex;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--feedback-border);
+  border-radius: var(--feedback-radius);
+  background: oklch(1 0 0 / 0.02);
+  transition: all 0.2s;
+  cursor: pointer;
+}
+.feedback__card:hover { border-color: oklch(0.65 0.20 265 / 0.2); background: oklch(1 0 0 / 0.04); }
+.feedback__card-info { flex: 1; min-width: 0; }
+.feedback__card-badges { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
+.feedback__card-title { font-size: 0.875rem; font-weight: 600; color: oklch(1 0 0 / 0.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 0.125rem; }
+.feedback__card-desc { font-size: 0.6875rem; color: oklch(1 0 0 / 0.4); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.feedback__card-meta { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; font-size: 0.625rem; color: oklch(1 0 0 / 0.25); }
+.feedback__card--bug { border-left: 3px solid var(--feedback-bug); }
+.feedback__card--feature { border-left: 3px solid var(--feedback-feature); }
+.feedback__card--suggestion { border-left: 3px solid var(--feedback-suggestion); }
+.feedback__card--general { border-left: 3px solid var(--feedback-general); }
+
+/* ─── Vote Button ────────────────────────────────────── */
+.feedback__vote-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: calc(var(--feedback-radius) * 0.8);
+  border: none;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-variant-numeric: tabular-nums;
+}
+.feedback__vote-btn--inactive { background: oklch(1 0 0 / 0.05); color: oklch(1 0 0 / 0.3); }
+.feedback__vote-btn--inactive:hover { background: oklch(1 0 0 / 0.1); color: oklch(1 0 0 / 0.5); }
+.feedback__vote-btn--active { background: oklch(0.65 0.20 265 / 0.15); color: oklch(0.65 0.20 265); }
+.feedback__vote-btn-arrow { font-size: 0.875rem; }
+
+/* ─── Status Badge ───────────────────────────────────── */
+.feedback__status-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 500; }
+.feedback__status-badge--open { background: oklch(0.65 0.20 245 / 0.15); color: oklch(0.65 0.20 245); }
+.feedback__status-badge--under-review { background: oklch(0.72 0.18 60 / 0.15); color: oklch(0.72 0.18 60); }
+.feedback__status-badge--planned { background: oklch(0.70 0.22 280 / 0.15); color: oklch(0.70 0.22 280); }
+.feedback__status-badge--in-progress { background: oklch(0.65 0.20 265 / 0.15); color: oklch(0.65 0.20 265); }
+.feedback__status-badge--done { background: oklch(0.72 0.18 155 / 0.15); color: oklch(0.72 0.18 155); }
+.feedback__status-badge--declined { background: oklch(0.50 0.10 250 / 0.15); color: oklch(0.50 0.10 250); }
+
+/* ─── Priority Badge ─────────────────────────────────── */
+.feedback__priority-badge { padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 500; }
+.feedback__priority-badge--low { background: oklch(0.58 0.10 250 / 0.15); color: oklch(0.58 0.10 250); }
+.feedback__priority-badge--medium { background: oklch(0.72 0.18 60 / 0.15); color: oklch(0.72 0.18 60); }
+.feedback__priority-badge--high { background: oklch(0.68 0.22 35 / 0.15); color: oklch(0.68 0.22 35); }
+.feedback__priority-badge--critical { background: oklch(0.60 0.25 25 / 0.15); color: oklch(0.60 0.25 25); }
+
+/* ─── Type Badge ─────────────────────────────────────── */
+.feedback__type-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 500; }
+.feedback__type-badge--bug { background: oklch(0.60 0.25 25 / 0.15); color: oklch(0.60 0.25 25); }
+.feedback__type-badge--feature { background: oklch(0.70 0.22 280 / 0.15); color: oklch(0.70 0.22 280); }
+.feedback__type-badge--suggestion { background: oklch(0.72 0.18 60 / 0.15); color: oklch(0.72 0.18 60); }
+.feedback__type-badge--general { background: oklch(0.65 0.20 245 / 0.15); color: oklch(0.65 0.20 245); }
+
+/* ─── Widget ─────────────────────────────────────────── */
+.feedback__widget-trigger {
+  position: fixed; top: 50%; right: 0; transform: translateY(-50%);
+  z-index: 40; padding: 0.5rem 1rem; border-radius: var(--feedback-radius) 0 0 var(--feedback-radius);
+  background: var(--feedback-accent); color: white; border: none; cursor: pointer;
+  writing-mode: vertical-rl; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.05em;
+  box-shadow: -2px 0 12px oklch(0.65 0.20 265 / 0.3);
+}
+.feedback__widget-trigger:hover { background: oklch(0.70 0.22 265); }
+.feedback__widget-overlay { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
+.feedback__widget-backdrop { position: absolute; inset: 0; background: oklch(0 0 0 / 0.5); backdrop-filter: blur(4px); }
+.feedback__widget-panel { position: relative; width: 100%; max-width: 28rem; background: oklch(0.06 0.01 250); border-left: 1px solid var(--feedback-border); padding: 1.5rem; overflow-y: auto; }
+.feedback__widget-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
+.feedback__widget-title { font-size: 1.125rem; font-weight: 700; color: var(--feedback-text); }
+
+/* ─── Form ───────────────────────────────────────────── */
+.feedback__form { display: flex; flex-direction: column; gap: 1rem; }
+.feedback__form-input { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.03); font-size: 0.875rem; color: var(--feedback-text); outline: none; }
+.feedback__form-input::placeholder { color: oklch(1 0 0 / 0.3); }
+.feedback__form-input:focus { border-color: oklch(0.65 0.20 265 / 0.4); }
+.feedback__form-textarea { resize: none; min-height: 6rem; }
+.feedback__form-error { font-size: 0.6875rem; color: oklch(0.60 0.25 25); }
+.feedback__form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
+
+/* ─── Type Selector ──────────────────────────────────── */
+.feedback__type-selector { display: flex; gap: 0.375rem; }
+.feedback__type-tab { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; border-radius: calc(var(--feedback-radius) * 0.8); border: none; font-size: 0.6875rem; font-weight: 500; cursor: pointer; transition: all 0.15s; }
+.feedback__type-tab--inactive { background: oklch(1 0 0 / 0.05); color: oklch(1 0 0 / 0.5); }
+.feedback__type-tab--inactive:hover { background: oklch(1 0 0 / 0.1); }
+
+/* ─── NPS ────────────────────────────────────────────── */
+.feedback__nps { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50; width: 24rem; border: 1px solid oklch(1 0 0 / 0.1); border-radius: calc(var(--feedback-radius) * 1.5); background: oklch(0.08 0.01 250); padding: 1.5rem; box-shadow: 0 8px 32px oklch(0 0 0 / 0.5); }
+.feedback__nps-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
+.feedback__nps-title { font-size: 0.875rem; font-weight: 600; color: oklch(1 0 0 / 0.9); }
+.feedback__nps-subtitle { font-size: 0.6875rem; color: oklch(1 0 0 / 0.4); margin-bottom: 1rem; }
+.feedback__nps-scores { display: flex; gap: 0.25rem; }
+.feedback__nps-score-btn { flex: 1; padding: 0.625rem 0; border: none; border-radius: calc(var(--feedback-radius) * 0.8); background: oklch(1 0 0 / 0.05); color: oklch(1 0 0 / 0.5); font-size: 0.6875rem; font-weight: 700; cursor: pointer; transition: all 0.15s; }
+.feedback__nps-score-btn:hover { background: oklch(1 0 0 / 0.1); }
+.feedback__nps-labels { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.625rem; color: oklch(1 0 0 / 0.2); }
+.feedback__nps-results { padding: 1.25rem; border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.02); }
+.feedback__nps-results-score { font-size: 1.875rem; font-weight: 900; font-variant-numeric: tabular-nums; }
+.feedback__nps-bar { display: flex; height: 1.25rem; overflow: hidden; border-radius: 9999px; margin: 1rem 0; }
+.feedback__nps-bar-detractors { background: oklch(0.60 0.25 25 / 0.7); }
+.feedback__nps-bar-passives { background: oklch(0.72 0.18 60 / 0.7); }
+.feedback__nps-bar-promoters { background: oklch(0.72 0.18 155 / 0.7); }
+.feedback__nps-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; text-align: center; font-size: 0.6875rem; }
+
+/* ─── Board ──────────────────────────────────────────── */
+.feedback__board { display: flex; flex-direction: column; gap: 0.625rem; }
+
+/* ─── Admin Table ────────────────────────────────────── */
+.feedback__admin-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
+.feedback__admin-table th { padding: 0.75rem 1rem; text-align: left; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: oklch(1 0 0 / 0.4); border-bottom: 1px solid oklch(1 0 0 / 0.08); }
+.feedback__admin-table td { padding: 0.75rem 1rem; border-bottom: 1px solid oklch(1 0 0 / 0.05); }
+.feedback__admin-table tr:hover { background: oklch(1 0 0 / 0.02); }
+.feedback__admin-select { padding: 0.25rem 0.5rem; border: 1px solid var(--feedback-border); border-radius: calc(var(--feedback-radius) * 0.6); background: oklch(1 0 0 / 0.05); font-size: 0.6875rem; color: var(--feedback-text); outline: none; }
+
+/* ─── Stats Grid ─────────────────────────────────────── */
+.feedback__stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
+.feedback__stat-card { padding: 1rem; border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.02); }
+.feedback__stat-icon { font-size: 1.125rem; }
+.feedback__stat-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: oklch(1 0 0 / 0.9); }
+.feedback__stat-label { font-size: 0.6875rem; color: oklch(1 0 0 / 0.4); }
+
+/* ─── Search ─────────────────────────────────────────── */
+.feedback__search { width: 100%; max-width: 16rem; padding: 0.625rem 1rem; border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.03); font-size: 0.875rem; color: var(--feedback-text); outline: none; }
+.feedback__search::placeholder { color: oklch(1 0 0 / 0.3); }
+.feedback__search:focus { border-color: oklch(0.65 0.20 265 / 0.4); }
+
+/* ─── Filter Tabs ────────────────────────────────────── */
+.feedback__filter-tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; }
+.feedback__filter-tab { padding: 0.375rem 0.75rem; border: none; border-radius: calc(var(--feedback-radius) * 0.8); font-size: 0.6875rem; font-weight: 500; cursor: pointer; }
+.feedback__filter-tab--active { background: var(--feedback-accent); color: white; }
+.feedback__filter-tab--inactive { background: oklch(1 0 0 / 0.05); color: oklch(1 0 0 / 0.5); }
+.feedback__filter-tab--inactive:hover { background: oklch(1 0 0 / 0.1); }
+
+/* ─── Btn ────────────────────────────────────────────── */
+.feedback__btn { padding: 0.5rem 1rem; border-radius: calc(var(--feedback-radius) * 0.8); font-size: 0.6875rem; font-weight: 500; cursor: pointer; border: none; transition: all 0.15s; }
+.feedback__btn--primary { background: var(--feedback-accent); color: white; }
+.feedback__btn--primary:hover { background: oklch(0.70 0.22 265); }
+.feedback__btn--outline { border: 1px solid var(--feedback-border); background: transparent; color: oklch(1 0 0 / 0.6); }
+.feedback__btn--danger { background: oklch(0.60 0.25 25 / 0.2); color: oklch(0.60 0.25 25); }
+
+/* ─── Skeleton ───────────────────────────────────────── */
+.feedback__skeleton { background: oklch(1 0 0 / 0.05); border-radius: var(--feedback-radius); animation: feedback-pulse 1.5s ease-in-out infinite; }
+@keyframes feedback-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+
+/* ─── Empty ──────────────────────────────────────────── */
+.feedback__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 1rem; text-align: center; }
+.feedback__empty-icon { font-size: 3rem; opacity: 0.2; margin-bottom: 0.75rem; }
+.feedback__empty-text { font-size: 0.875rem; color: oklch(1 0 0 / 0.4); }
+
+/* ─── Success ────────────────────────────────────────── */
+.feedback__success { display: flex; flex-direction: column; align-items: center; padding: 2rem; text-align: center; }
+.feedback__success-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
+.feedback__success-text { font-size: 1rem; font-weight: 600; color: oklch(1 0 0 / 0.9); margin-bottom: 0.25rem; }
+.feedback__success-sub { font-size: 0.875rem; color: oklch(1 0 0 / 0.5); }
+
+/* ─── Tag ────────────────────────────────────────────── */
+.feedback__tag { padding: 0.125rem 0.375rem; border-radius: 0.25rem; background: oklch(1 0 0 / 0.05); font-size: 0.625rem; color: oklch(1 0 0 / 0.3); }
+
+/* ─── Close Button ───────────────────────────────────── */
+.feedback__close-btn { padding: 0.375rem; border: none; background: transparent; color: oklch(1 0 0 / 0.3); cursor: pointer; border-radius: calc(var(--feedback-radius) * 0.6); }
+.feedback__close-btn:hover { color: oklch(1 0 0 / 0.5); background: oklch(1 0 0 / 0.05); }
+
+/* ─── Comment Thread ─────────────────────────────────── */
+.feedback__comment-thread { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.01); }
+.feedback__comment { display: flex; gap: 0.75rem; }
+.feedback__comment-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: oklch(0.65 0.20 265 / 0.2); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; flex-shrink: 0; }
+.feedback__comment-body { flex: 1; }
+.feedback__comment-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
+.feedback__comment-author { font-size: 0.75rem; font-weight: 600; color: oklch(1 0 0 / 0.8); }
+.feedback__comment-time { font-size: 0.625rem; color: oklch(1 0 0 / 0.3); }
+.feedback__comment-text { font-size: 0.6875rem; color: oklch(1 0 0 / 0.7); line-height: 1.4; }
+.feedback__comment-reply-btn { margin-top: 0.5rem; padding: 0.25rem 0.5rem; font-size: 0.625rem; border: none; background: transparent; color: oklch(0.65 0.20 265); cursor: pointer; transition: all 0.1s; }
+.feedback__comment-reply-btn:hover { color: oklch(0.70 0.22 265); }
+
+/* ─── Rating Component ───────────────────────────────── */
+.feedback__rating { display: flex; gap: 0.25rem; }
+.feedback__rating-star { font-size: 1.5rem; cursor: pointer; opacity: 0.3; transition: all 0.15s; }
+.feedback__rating-star--filled { opacity: 1; color: oklch(0.72 0.18 60); }
+.feedback__rating-star:hover { opacity: 1; transform: scale(1.1); }
+
+/* ─── Sentiment Indicator ────────────────────────────── */
+.feedback__sentiment-card { padding: 1rem; border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.02); text-align: center; }
+.feedback__sentiment-icon { font-size: 2rem; margin-bottom: 0.5rem; }
+.feedback__sentiment-label { font-size: 0.875rem; font-weight: 600; color: oklch(1 0 0 / 0.8); margin-bottom: 0.25rem; }
+.feedback__sentiment-count { font-size: 0.6875rem; color: oklch(1 0 0 / 0.4); }
+
+/* ─── Response Panel ─────────────────────────────────── */
+.feedback__response-panel { border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.02); padding: 1rem; }
+.feedback__response-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
+.feedback__response-title { font-size: 0.875rem; font-weight: 600; color: oklch(1 0 0 / 0.8); }
+.feedback__response-time { font-size: 0.625rem; color: oklch(1 0 0 / 0.3); }
+.feedback__response-body { font-size: 0.6875rem; color: oklch(1 0 0 / 0.7); line-height: 1.5; }
+.feedback__response-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
+.feedback__response-btn { padding: 0.25rem 0.5rem; font-size: 0.625rem; border: none; background: oklch(1 0 0 / 0.05); color: oklch(1 0 0 / 0.5); cursor: pointer; border-radius: calc(var(--feedback-radius) * 0.6); transition: all 0.1s; }
+.feedback__response-btn:hover { background: oklch(1 0 0 / 0.1); color: oklch(1 0 0 / 0.6); }
+
+/* ─── Analytics Chart ────────────────────────────────── */
+.feedback__analytics { border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.02); padding: 1rem; }
+.feedback__analytics-title { font-size: 0.875rem; font-weight: 600; color: oklch(1 0 0 / 0.8); margin-bottom: 1rem; }
+.feedback__analytics-chart { display: flex; align-items: flex-end; gap: 0.5rem; height: 10rem; }
+.feedback__analytics-bar { flex: 1; border-radius: 0.25rem 0.25rem 0 0; background: linear-gradient(to top, oklch(0.65 0.20 265), oklch(0.65 0.20 265 / 0.4)); transition: all 0.2s; position: relative; }
+.feedback__analytics-bar:hover { background: linear-gradient(to top, oklch(0.70 0.22 265), oklch(0.70 0.22 265)); }
+.feedback__analytics-label { position: absolute; bottom: -1.5rem; left: 50%; transform: translateX(-50%); font-size: 0.625rem; color: oklch(1 0 0 / 0.4); white-space: nowrap; }
+
+/* ─── Filter Control Panel ───────────────────────────── */
+.feedback__filter-panel { border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.02); padding: 1rem; }
+.feedback__filter-section { margin-bottom: 1rem; }
+.feedback__filter-section:last-child { margin-bottom: 0; }
+.feedback__filter-section-title { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: oklch(1 0 0 / 0.4); margin-bottom: 0.5rem; letter-spacing: 0.05em; }
+.feedback__filter-options { display: flex; flex-direction: column; gap: 0.25rem; }
+.feedback__filter-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.6875rem; }
+.feedback__filter-option input { cursor: pointer; }
+.feedback__filter-option-label { color: oklch(1 0 0 / 0.7); cursor: pointer; }
+
+/* ─── Tag Selector ───────────────────────────────────── */
+.feedback__tag-selector { padding: 1rem; border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.02); }
+.feedback__tag-selector-label { display: block; font-size: 0.6875rem; font-weight: 500; color: oklch(1 0 0 / 0.6); margin-bottom: 0.5rem; text-transform: uppercase; }
+.feedback__tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.feedback__tag-item { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.75rem; border-radius: 9999px; background: oklch(0.65 0.20 265 / 0.15); color: oklch(0.65 0.20 265); font-size: 0.6875rem; font-weight: 500; }
+.feedback__tag-remove { margin-left: 0.25rem; cursor: pointer; font-weight: 700; opacity: 0.6; transition: opacity 0.1s; }
+.feedback__tag-remove:hover { opacity: 1; }
+
+/* ─── Feedback Form Actions ──────────────────────────── */
+.feedback__form-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid var(--feedback-border); }
+.feedback__form-counter { font-size: 0.625rem; color: oklch(1 0 0 / 0.3); }
+.feedback__form-actions-group { display: flex; gap: 0.5rem; }
+
+/* ─── Feedback Status Indicator ──────────────────────── */
+.feedback__status-indicator { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 500; }
+.feedback__status-indicator--new { background: oklch(0.65 0.20 245 / 0.15); color: oklch(0.65 0.20 245); }
+.feedback__status-indicator--in-review { background: oklch(0.72 0.18 60 / 0.15); color: oklch(0.72 0.18 60); }
+.feedback__status-indicator--implemented { background: oklch(0.72 0.18 155 / 0.15); color: oklch(0.72 0.18 155); }
+
+/* ─── Detailed Stats Row ─────────────────────────────── */
+.feedback__detailed-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; }
+.feedback__detailed-stat-item { padding: 0.75rem; border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.01); text-align: center; }
+.feedback__detailed-stat-icon { font-size: 1.25rem; margin-bottom: 0.25rem; }
+.feedback__detailed-stat-value { font-size: 1rem; font-weight: 700; color: oklch(1 0 0 / 0.9); }
+.feedback__detailed-stat-label { font-size: 0.625rem; color: oklch(1 0 0 / 0.4); margin-top: 0.25rem; }
+
+/* ─── Breadcrumb Navigation ──────────────────────────── */
+.feedback__breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; margin-bottom: 1rem; }
+.feedback__breadcrumb-item { color: oklch(1 0 0 / 0.5); }
+.feedback__breadcrumb-item--active { color: oklch(1 0 0 / 0.8); font-weight: 500; }
+.feedback__breadcrumb-sep { color: oklch(1 0 0 / 0.2); margin: 0 0.25rem; }
+
+/* ─── Pagination Controls ────────────────────────────── */
+.feedback__pagination { display: flex; align-items: center; gap: 0.5rem; justify-content: center; padding: 1rem; }
+.feedback__pagination-btn { padding: 0.375rem 0.75rem; border: 1px solid var(--feedback-border); border-radius: calc(var(--feedback-radius) * 0.6); background: oklch(1 0 0 / 0.05); color: oklch(1 0 0 / 0.6); font-size: 0.6875rem; cursor: pointer; transition: all 0.1s; }
+.feedback__pagination-btn:hover:not(:disabled) { background: oklch(1 0 0 / 0.1); color: oklch(1 0 0 / 0.8); }
+.feedback__pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.feedback__pagination-info { font-size: 0.6875rem; color: oklch(1 0 0 / 0.5); }

package/packages/solidjs-css/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": [
+    "src"
+  ]
+}

package/packages/solidjs-css/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['src/index.tsx'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  clean: true,
+  sourcemap: true,
+  external: ['solid-js'],
+})

package/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'packages/*'

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}