@mathwiz/ui-components 0.1.0

package/dist/services/radarAbilityService.d.ts

@@ -0,0 +1,12 @@
+import type { RadarAbilityData } from '../types/radarAbility';
+export declare const mockRadarAbilityData: RadarAbilityData;
+export declare class RadarAbilityService {
+    private static readonly API_BASE_URL;
+    static fetchRadarAbilityData(): Promise<RadarAbilityData>;
+    static submitFeedback(feedback: {
+        abilityName: string;
+        rating: number;
+        comment: string;
+    }): Promise<void>;
+}
+//# sourceMappingURL=radarAbilityService.d.ts.map

package/dist/services/radarAbilityService.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radarAbilityService.d.ts","sourceRoot":"","sources":["../../src/services/radarAbilityService.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG9D,eAAO,MAAM,oBAAoB,EAAE,gBA2DlC,CAAC;AAEF,qBAAa,mBAAmB;IAC9B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAwB;WAE/C,qBAAqB,IAAI,OAAO,CAAC,gBAAgB,CAAC;WAuBlD,cAAc,CAAC,QAAQ,EAAE;QACpC,WAAW,EAAE,MAAM,CAAC;QACpB,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,OAAO,CAAC,IAAI,CAAC;CASlB"}

package/dist/setupTests.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=setupTests.d.ts.map

package/dist/setupTests.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setupTests.d.ts","sourceRoot":"","sources":["../src/setupTests.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC"}

package/dist/store/courseStore.d.ts

@@ -0,0 +1,3 @@
+import type { AppState } from '../types';
+export declare const useCourseStore: import("zustand").UseBoundStore<import("zustand").StoreApi<AppState>>;
+//# sourceMappingURL=courseStore.d.ts.map

package/dist/store/courseStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"courseStore.d.ts","sourceRoot":"","sources":["../../src/store/courseStore.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGzC,eAAO,MAAM,cAAc,uEAqDxB,CAAC"}

package/dist/store/radarAbilityStore.d.ts

@@ -0,0 +1,13 @@
+import type { RadarAbilityData } from '../types/radarAbility';
+interface RadarAbilityState {
+    data: RadarAbilityData | null;
+    loading: boolean;
+    error: string | null;
+    fetchData: () => Promise<void>;
+    setData: (data: RadarAbilityData) => void;
+    setError: (error: string) => void;
+    reset: () => void;
+}
+export declare const useRadarAbilityStore: import("zustand").UseBoundStore<import("zustand").StoreApi<RadarAbilityState>>;
+export {};
+//# sourceMappingURL=radarAbilityStore.d.ts.map

package/dist/store/radarAbilityStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radarAbilityStore.d.ts","sourceRoot":"","sources":["../../src/store/radarAbilityStore.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG9D,UAAU,iBAAiB;IACzB,IAAI,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,OAAO,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,oBAAoB,gFA+B9B,CAAC"}

package/dist/stories/Button.d.ts

@@ -0,0 +1,16 @@
+import './button.css';
+export interface ButtonProps {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: 'small' | 'medium' | 'large';
+    /** Button contents */
+    label: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+/** Primary UI component for user interaction */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/stories/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/stories/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAW;IAC1B,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gDAAgD;AAChD,eAAO,MAAM,MAAM,GAAI,qDAMpB,WAAW,4CAYb,CAAC"}

package/dist/stories/Header.d.ts

@@ -0,0 +1,13 @@
+import './header.css';
+type User = {
+    name: string;
+};
+export interface HeaderProps {
+    user?: User;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Header.d.ts.map

package/dist/stories/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/stories/Header.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,IAAI,GAAG;IACV,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,MAAM,GAAI,8CAA8C,WAAW,4CAuC/E,CAAC"}

package/dist/stories/Page.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './page.css';
+export declare const Page: React.FC;
+//# sourceMappingURL=Page.d.ts.map

package/dist/stories/Page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../src/stories/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,YAAY,CAAC;AAMpB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EA+DxB,CAAC"}

package/dist/test/setup.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=setup.d.ts.map

package/dist/test/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":""}

package/dist/types/index.d.ts

@@ -0,0 +1,69 @@
+export interface KnowledgeItem {
+    id: string;
+    title: string;
+    description: string;
+    progress: number;
+    contentUrl: string;
+    status?: 'mastered' | 'proficient' | 'familiar' | 'attempted' | 'not-started';
+}
+export interface Lesson {
+    id: string;
+    title: string;
+    duration: number;
+    knowledgeItems: KnowledgeItem[];
+}
+export interface Unit {
+    id: string;
+    title: string;
+    description: string;
+    estimatedDuration: string;
+    totalLessons: number;
+    moduleCategory: string;
+    lessons: Lesson[];
+}
+export interface CourseData {
+    id: string;
+    title: string;
+    level: number;
+    subject: string;
+    units: Unit[];
+}
+export interface UserData {
+    id: string;
+    name: string;
+    level: number;
+    avatar: string;
+    badges: string[];
+}
+export interface ExploreItem {
+    id: string;
+    label: string;
+    status: string;
+}
+export interface UnitProgress {
+    unitId: string;
+    title: string;
+    progressPercentage: number;
+    status: 'not-started' | 'in-progress' | 'completed';
+    totalLessons: number;
+    completedLessons: number;
+    lastAccessed?: string;
+}
+export interface AppState {
+    currentUnitId: string | null;
+    currentLessonId: string | null;
+    currentKnowledgeId: string | null;
+    sidebarCollapsed: boolean;
+    exploreMenuOpen: boolean;
+    activeLessonIds: string[];
+    setCurrentUnit: (unitId: string) => void;
+    setCurrentLesson: (lessonId: string) => void;
+    setCurrentKnowledge: (knowledgeId: string) => void;
+    toggleSidebar: () => void;
+    toggleExploreMenu: (open?: boolean) => void;
+    toggleLessonActive: (lessonId: string) => void;
+}
+export declare const categoryIcons: Record<string, string>;
+export declare const statusMapping: Record<string, string>;
+export declare const statusColors: Record<string, string>;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,CAAC;CAC/E;AAED,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,aAAa,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAGD,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAGD,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAGD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,EAAE,MAAM,CAAC;IAC3B,MAAM,EAAE,aAAa,GAAG,aAAa,GAAG,WAAW,CAAC;IACpD,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAGD,MAAM,WAAW,QAAQ;IACvB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,EAAE,CAAC;IAG1B,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,mBAAmB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,iBAAiB,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD;AAGD,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAKhD,CAAC;AAGF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAMhD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAM/C,CAAC"}

package/dist/types/radarAbility.d.ts

@@ -0,0 +1,38 @@
+export interface AbilityData {
+    name: string;
+    score: number;
+    maxScore: number;
+    progressBarColor: string;
+    svgPoint?: {
+        x: number;
+        y: number;
+    };
+    recommendation: string;
+    recommendationLink: string;
+}
+export interface RadarAbilityData {
+    overallRating: string;
+    generalRecommendation: string;
+    abilities: AbilityData[];
+}
+export interface RadarChartProps {
+    abilities: AbilityData[];
+    width?: number;
+    height?: number;
+}
+export interface AbilityProgressBarProps {
+    ability: AbilityData;
+}
+export interface PersonalizedAdvicePanelProps {
+    generalRecommendation: string;
+}
+export interface RecommendationCardProps {
+    ability: AbilityData;
+    customLinkTexts?: Record<string, string>;
+}
+export interface AbilityAssessmentDashboardProps {
+    data?: RadarAbilityData;
+    loading?: boolean;
+    error?: string | null;
+}
+//# sourceMappingURL=radarAbility.d.ts.map

package/dist/types/radarAbility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radarAbility.d.ts","sourceRoot":"","sources":["../../src/types/radarAbility.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE;QACT,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,gBAAgB;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,SAAS,EAAE,WAAW,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,WAAW,4BAA4B;IAC3C,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,WAAW,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,+BAA+B;IAC9C,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB"}

package/dist/ui-components.css

@@ -0,0 +1 @@
+.button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;font-weight:500;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;transition:all .2s ease-in-out;line-height:1.5;text-decoration:none;-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;position:relative;overflow:hidden}.button--sm{padding:.375rem .75rem;font-size:.75rem;min-height:1.75rem}.button--md{padding:.5rem 1rem;font-size:.875rem;min-height:2.25rem}.button--lg{padding:.75rem 1.5rem;font-size:1rem;min-height:2.75rem}.button--radius-sm{border-radius:.25rem}.button--radius-md{border-radius:.375rem}.button--radius-lg{border-radius:.5rem}.button--primary{background-color:#3b82f6;color:#fff;border-color:#3b82f6}.button--primary:hover{background-color:#2563eb;border-color:#2563eb}.button--primary:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.button--secondary{background-color:#6b7280;color:#fff;border-color:#6b7280}.button--secondary:hover{background-color:#4b5563;border-color:#4b5563}.button--secondary:focus-visible{outline:2px solid #6b7280;outline-offset:2px}.button--success{background-color:#10b981;color:#fff;border-color:#10b981}.button--success:hover{background-color:#059669;border-color:#059669}.button--success:focus-visible{outline:2px solid #10b981;outline-offset:2px}.button--bordered.button--primary{background-color:transparent;color:#3b82f6;border-color:#3b82f6}.button--bordered.button--primary:hover{background-color:#3b82f6;color:#fff}.button--bordered.button--secondary{background-color:transparent;color:#6b7280;border-color:#6b7280}.button--bordered.button--secondary:hover{background-color:#6b7280;color:#fff}.button--bordered.button--success{background-color:transparent;color:#10b981;border-color:#10b981}.button--bordered.button--success:hover{background-color:#10b981;color:#fff}.button--light.button--primary{background-color:#dbeafe;color:#1e40af;border-color:transparent}.button--light.button--primary:hover{background-color:#bfdbfe}.button--light.button--secondary{background-color:#f3f4f6;color:#374151;border-color:transparent}.button--light.button--secondary:hover{background-color:#e5e7eb}.button--light.button--success{background-color:#d1fae5;color:#065f46;border-color:transparent}.button--light.button--success:hover{background-color:#a7f3d0}.button:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.button:focus{outline:none}.button:focus-visible{box-shadow:0 0 0 3px #3b82f680}.button--loading{pointer-events:none;opacity:.8}@media (max-width: 768px){.button--sm{padding:.25rem .5rem;font-size:.6875rem;min-height:1.5rem}.button--md{padding:.375rem .75rem;font-size:.8125rem;min-height:2rem}.button--lg{padding:.5rem 1rem;font-size:.875rem;min-height:2.25rem}}.content-accordion{--accordion-spacing: 1rem;--accordion-border-radius: 8px;--accordion-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);--accordion-border: 1px solid #e5e7eb;--accordion-transition: all .2s ease-in-out;width:100%;max-width:100%;min-width:0;margin:0;box-sizing:border-box;overflow-wrap:break-word;word-wrap:break-word}.content-accordion--loading{display:flex;justify-content:center;align-items:center;min-height:200px}.content-accordion__loading{color:#6b7280;font-size:.875rem}.content-accordion--empty{display:flex;justify-content:center;align-items:center;min-height:200px;color:#6b7280}.content-accordion__empty{text-align:center}.content-accordion__header{padding:var(--accordion-spacing);background:#f8fafc;border-radius:var(--accordion-border-radius);margin-bottom:var(--accordion-spacing);border:var(--accordion-border)}.content-accordion__unit-title{font-size:1.5rem;font-weight:600;color:#1f2937;margin:0 0 .5rem}.content-accordion__unit-description{color:#6b7280;margin:0 0 .75rem;line-height:1.5}.content-accordion__unit-meta{display:flex;gap:.5rem;align-items:center;color:#9ca3af;font-size:.875rem}.content-accordion__lessons{display:flex;flex-direction:column;gap:.5rem}.content-accordion__lesson-item{border:var(--accordion-border);border-radius:var(--accordion-border-radius);background:#fff;overflow:hidden;transition:var(--accordion-transition)}.content-accordion__lesson-item--expanded{box-shadow:var(--accordion-shadow)}.content-accordion__lesson-header{display:flex;justify-content:space-between;align-items:center;padding:1rem var(--accordion-spacing);cursor:pointer;background:#fff;transition:var(--accordion-transition);-webkit-user-select:none;user-select:none}.content-accordion__lesson-header:hover{background:#f9fafb}.content-accordion__lesson-header:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.content-accordion__lesson-header-content{flex:1}.content-accordion__lesson-title{font-size:1rem;font-weight:500;color:#1f2937;margin:0 0 .25rem}.content-accordion__lesson-duration{font-size:.875rem;color:#6b7280}.content-accordion__lesson-actions{display:flex;align-items:center;gap:.75rem}.content-accordion__lesson-progress{font-size:.875rem;font-weight:500;color:#3b82f6;min-width:3rem;text-align:right}.content-accordion__lesson-icon{width:1.25rem;height:1.25rem;color:#6b7280;transition:var(--accordion-transition)}.content-accordion__knowledge-list{padding:0 var(--accordion-spacing) var(--accordion-spacing);display:flex;flex-direction:column;gap:.75rem;background:#fafafa;border-top:var(--accordion-border)}.content-accordion__knowledge-card{margin:0;box-shadow:none;border:var(--accordion-border)}.content-accordion__knowledge-title{font-size:.875rem;font-weight:500;color:#1f2937;margin:0 0 .5rem}.content-accordion__knowledge-description{font-size:.75rem;color:#6b7280;line-height:1.4;margin:0}.content-accordion__knowledge-actions{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding-top:.75rem;border-top:1px solid #f3f4f6}.content-accordion__progress-container{display:flex;align-items:center;gap:.5rem;flex:1}.content-accordion__progress-bar{flex:1;max-width:120px}.content-accordion__progress-text{font-size:.75rem;color:#6b7280;min-width:2.5rem;text-align:right}.content-accordion__learn-button{white-space:nowrap;min-width:6rem;justify-content:center}@media (max-width: 768px){.content-accordion{--accordion-spacing: .75rem}.content-accordion__header{padding:.75rem}.content-accordion__unit-title{font-size:1.25rem}.content-accordion__lesson-header{padding:.75rem}.content-accordion__knowledge-list{padding:0 .75rem .75rem}.content-accordion__knowledge-actions{flex-direction:column;align-items:stretch;gap:.5rem}.content-accordion__progress-container{justify-content:space-between}}@media (prefers-reduced-motion: reduce){.content-accordion,.content-accordion__lesson-header,.content-accordion__lesson-icon{transition:none}}@media (prefers-contrast: high){.content-accordion__lesson-header,.content-accordion__knowledge-card{border:2px solid currentColor}}.sidebar{display:flex;flex-direction:column;width:280px;height:100vh;background-color:var(--sidebar-bg-color, #ffffff);border-right:1px solid var(--sidebar-border-color, #e0e0e0);transition:width var(--transition-normal, .25s ease-in-out),transform var(--transition-normal, .25s ease-in-out);overflow-y:auto;position:relative}.sidebar--collapsed{width:64px}.sidebar--loading .sidebar__unit-list,.sidebar--loading .sidebar__header{opacity:.3;pointer-events:none}.sidebar__header{display:flex;align-items:center;padding:var(--spacing-lg, 24px) var(--spacing-md, 16px) var(--spacing-md, 16px);border-bottom:1px solid var(--sidebar-border-color, #e0e0e0);margin-bottom:var(--spacing-md, 16px)}.sidebar__toggle-btn{width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:var(--border-radius-sm, 4px);display:flex;align-items:center;justify-content:center;color:var(--sidebar-text-color, #333333);margin-right:var(--spacing-sm, 8px)}.sidebar__toggle-btn:hover{background-color:var(--sidebar-hover-bg, rgba(0, 0, 0, .05))}.sidebar__course-info{flex:1}.sidebar__course-title{font-size:var(--font-size-lg, 16px);font-weight:var(--font-weight-bold, 600);color:var(--sidebar-text-color, #333333);margin:0 0 var(--spacing-xs, 4px) 0}.sidebar__course-level{font-size:var(--font-size-sm, 12px);color:var(--sidebar-text-secondary, #666666)}.sidebar__content{flex:1;padding:0 var(--spacing-md, 16px)}.sidebar__unit-list{list-style:none;padding:0;margin:0}.sidebar__unit-item{margin-bottom:var(--spacing-xs, 4px);border-radius:var(--border-radius-sm, 4px);cursor:pointer;transition:background-color var(--transition-fast, .15s ease-in-out);padding:var(--spacing-sm, 8px) var(--spacing-md, 16px)}.sidebar__unit-item:hover{background-color:var(--sidebar-hover-bg, rgba(0, 0, 0, .03))}.sidebar__unit-item--active{background-color:var(--sidebar-active-bg, #e3f2fd);border-left:3px solid var(--sidebar-active-border, #1865f2);font-weight:var(--font-weight-medium, 500)}.sidebar__unit-item--completed{opacity:.8}.sidebar__unit-item--in-progress{font-weight:var(--font-weight-medium, 500)}.sidebar__unit-item--not-started{opacity:.6}.sidebar__unit-item__content{display:flex;align-items:center;margin-bottom:var(--spacing-xs, 4px)}.sidebar__unit-item__icon{width:20px;height:20px;margin-right:var(--spacing-sm, 8px);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-md, 14px)}.sidebar__unit-item__title{flex:1;font-size:var(--font-size-md, 14px);color:var(--sidebar-text-color, #333333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar__unit-item__progress{display:flex;align-items:center;gap:var(--spacing-sm, 8px);margin-top:var(--spacing-xs, 4px)}.progress-percentage{font-size:var(--font-size-sm, 12px);color:var(--sidebar-text-secondary, #666666);min-width:30px;text-align:right}.sidebar__loading,.sidebar__error,.sidebar__empty{padding:var(--spacing-xl, 32px) var(--spacing-md, 16px);text-align:center;color:var(--sidebar-text-secondary, #666666);font-size:var(--font-size-md, 14px)}.sidebar__error{color:var(--sidebar-error-color, #dc3545)}@media (max-width: 600px){.sidebar{position:fixed;top:0;left:0;height:100vh;z-index:1000;transform:translate(-100%)}.sidebar--expanded{transform:translate(0)}}.sidebar--collapsed .sidebar__course-info,.sidebar--collapsed .sidebar__unit-item__title,.sidebar--collapsed .sidebar__unit-item__progress{display:none}.sidebar--collapsed .sidebar__header{justify-content:center;padding:var(--spacing-md, 16px)}.sidebar--collapsed .sidebar__toggle-btn{margin-right:0}.sidebar--collapsed .sidebar__unit-item{display:flex;justify-content:center;padding:var(--spacing-sm, 8px)}.sidebar--collapsed .sidebar__unit-item__content{margin-bottom:0}.submenu-container{position:relative;display:inline-block}.submenu-trigger{cursor:pointer}.submenu-panel{position:absolute;z-index:1000;background-color:var(--submenu-background-color, #fff);border:var(--submenu-border, 1px solid #ddd);border-radius:var(--submenu-border-radius, 4px);box-shadow:var(--submenu-shadow, 0 4px 12px rgba(0, 0, 0, .1));padding:var(--submenu-padding, 8px 0);min-width:var(--submenu-min-width, 160px);opacity:0;visibility:hidden;transform:translateY(var(--submenu-transform-y, -10px));transition:opacity var(--submenu-transition-duration, .2s) ease-out,transform var(--submenu-transition-duration, .2s) ease-out,visibility var(--submenu-transition-duration, .2s) ease-out;display:flex;flex-direction:column;gap:var(--submenu-item-gap, 4px)}.submenu-panel.is-open{opacity:1;visibility:visible;transform:translateY(0)}.submenu-panel.position-bottom{top:100%;left:0;transform:translateY(var(--submenu-transform-y-bottom, 10px))}.submenu-panel.position-bottom.alignment-end{left:auto;right:0}.submenu-panel.position-top{bottom:100%;left:0;transform:translateY(var(--submenu-transform-y-top, -10px))}.submenu-item{display:flex;align-items:center;padding:var(--submenu-item-padding, 8px 16px);color:var(--submenu-item-color, #333);font-size:var(--submenu-item-font-size, 14px);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color var(--submenu-item-transition-duration, .15s) ease-in-out,color var(--submenu-item-transition-duration, .15s) ease-in-out}.submenu-item:hover,.submenu-item.is-active{background-color:var(--submenu-item-hover-bg-color, #f0f0f0);color:var(--submenu-item-hover-color, #000)}.submenu-item.is-disabled{color:var(--submenu-item-disabled-color, #999);cursor:not-allowed;opacity:.6}.submenu-item-icon{margin-right:var(--submenu-item-icon-margin-right, 8px)}.user-profile-container{display:inline-flex;align-items:center;cursor:pointer;position:relative}.user-profile-trigger{display:flex;align-items:center;gap:var(--spacing-sm, 8px);padding:var(--spacing-xs, 4px) var(--spacing-sm, 8px);border-radius:var(--border-radius-md, 6px);transition:background-color var(--transition-duration-fast, .2s) ease}.user-profile-trigger:hover{background-color:var(--color-background-hover, #f5f5f5)}.user-name{font-weight:var(--font-weight-medium, 500);color:var(--color-text-primary, #333);font-size:var(--font-size-md, 14px);line-height:1.4}.user-profile-container.is-loading .user-profile-trigger{opacity:.7;pointer-events:none}.user-profile-container.has-error .user-profile-trigger{border:1px solid var(--color-error, #dc3545)}.user-profile-loading,.user-profile-error{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--border-radius-md, 6px);font-size:var(--font-size-sm, 12px);line-height:1.4;text-align:center}.user-profile-loading{background-color:var(--color-background-muted, #f8f9fa);color:var(--color-text-muted, #6c757d);min-width:80px}.user-profile-error{background-color:var(--color-error-bg, #f8d7da);color:var(--color-error, #721c24);border:1px solid var(--color-error-border, #f5c6cb);min-width:120px}@media (max-width: 768px){.user-profile-trigger{padding:var(--spacing-xs, 4px);gap:var(--spacing-xs, 4px)}.user-name{font-size:var(--font-size-sm, 12px);display:none}.user-profile-loading,.user-profile-error{font-size:var(--font-size-xs, 10px);padding:var(--spacing-xs, 4px) var(--spacing-sm, 8px)}}@media (min-width: 769px){.user-name{display:inline}}[data-theme=dark] .user-profile-trigger:hover{background-color:var(--color-background-hover-dark, #2d2d2d)}[data-theme=dark] .user-name{color:var(--color-text-primary-dark, #ffffff)}[data-theme=dark] .user-profile-loading{background-color:var(--color-background-muted-dark, #2d2d2d);color:var(--color-text-muted-dark, #a0a0a0)}@media (prefers-contrast: high){.user-profile-trigger:hover{background-color:var(--color-background-hover-high-contrast, #000000);outline:2px solid var(--color-border-high-contrast, #ffffff)}.user-name{font-weight:var(--font-weight-bold, 700)}}@media (prefers-reduced-motion: reduce){.user-profile-trigger,.submenu-panel{transition:none}}.user-profile-trigger:focus-visible{outline:2px solid var(--color-focus-ring, #007bff);outline-offset:2px}.user-profile-container:has(.submenu-item.is-disabled){cursor:not-allowed}.user-profile-container:has(.submenu-item.is-disabled) .user-profile-trigger:hover{background-color:transparent}._dashboardLayout_10wqn_5{display:flex;flex-direction:column;gap:24px;height:100%}._upperSection_10wqn_19{flex:3;display:grid;grid-template-columns:1fr 1fr;gap:24px}._lowerSection_10wqn_33{flex:2;display:flex;flex-direction:column;gap:16px;padding-top:24px;border-top:1px solid #e2e8f0}._radarChartArea_10wqn_51{position:relative;height:320px;display:flex;align-items:center;justify-content:center}@media (max-width: 768px){._upperSection_10wqn_19{grid-template-columns:1fr;gap:16px}._dashboardLayout_10wqn_5{gap:16px}}._animate-fade-in_10wqn_93{animation:_fadeIn_10wqn_1 .6s ease-out}@keyframes _fadeIn_10wqn_1{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.mathwiz-header{composes:site-header from global;position:relative;z-index:1000}.mathwiz-header .header-content{composes:header-content from global;display:flex;align-items:center;justify-content:space-between;width:100%}.mathwiz-header .header-section{composes:header-section from global;flex:1;display:flex;align-items:center}.mathwiz-header .header-section.left{composes:left from global;justify-content:flex-start}.mathwiz-header .header-section.center{composes:center from global;justify-content:center;text-align:center}.mathwiz-header .header-section.right{composes:right from global;justify-content:flex-end}.mathwiz-header .logo{composes:logo from global;font-size:var(--logo-font-size, 1.5rem);font-weight:var(--logo-font-weight, bold);text-decoration:none;transition:opacity .2s ease;color:#fff!important}.mathwiz-header .logo:hover{opacity:.8}.explore-button{composes:explore-button from global;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:6px;font-size:.875rem;font-weight:500;transition:all .2s ease;background:none;border:none;color:#fff!important;cursor:pointer}.explore-button:hover{background-color:var(--explore-trigger-bg-hover, rgba(255, 255, 255, .1));color:var(--explore-trigger-color-hover, #111827)}.explore-icon{font-size:1.25rem}.explore-text{font-weight:500}.explore-menu-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;cursor:pointer;transition:background-color .15s ease,color .15s ease;min-width:200px}.explore-menu-item:hover{background-color:var(--hover-bg, #e9ecef);color:var(--accent-color, #4361ee)}.explore-item-label{font-weight:500;flex:1}.explore-item-status{font-size:.75rem;font-weight:500;padding:.25rem .5rem;border-radius:9999px;margin-left:.5rem}.status-new{background-color:var(--success-color, #10b981);color:#fff}.status-progress{color:var(--accent-color, #4361ee)}.status-进行中{background-color:var(--warning-color, #f59e0b);color:#fff}.status-2{background-color:var(--accent-light, #e6f2ff);color:var(--accent-color, #4361ee)}@media (max-width: 768px){.mathwiz-header .header-content{padding:0 1rem}.explore-text{display:none}.explore-button{padding:.5rem}.mathwiz-header .logo{font-size:1.25rem}}@media (max-width: 480px){.mathwiz-header .header-content{padding:0 .75rem}.explore-button{min-width:auto}}.mathwiz-header:focus-within{outline:2px solid var(--accent-color, #4361ee);outline-offset:2px}.explore-button:focus{outline:2px solid var(--accent-color, #4361ee);outline-offset:2px}@media (prefers-contrast: high){.mathwiz-header{border-bottom:2px solid white}.explore-button{border:1px solid currentColor}}.mathwiz-header .user-name{color:#fff!important}.mathwiz-header .user-profile-trigger:hover{background-color:#ffffff1a!important;opacity:.8}@media (prefers-reduced-motion: reduce){.mathwiz-header .logo,.explore-button,.explore-menu-item{transition:none}}.grade-unit-browser-page{display:grid;grid-template-areas:"header header" "sidebar content";grid-template-rows:auto 1fr;grid-template-columns:300px 1fr;min-height:100vh;background-color:var(--page-background, #f8fafc);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.grade-unit-browser-page--sidebar-collapsed{grid-template-columns:60px 1fr}.header-area{grid-area:header;position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 1px 3px #0000001a;width:100%}.sidebar-area{grid-area:sidebar;background:#fff;border-right:1px solid var(--border-color, #e2e8f0);overflow-y:auto;height:100vh;position:sticky;top:0}.content-area{grid-area:content;padding:24px;overflow-y:auto;overflow-x:hidden;background:#fff;min-height:calc(100vh - 80px);width:100%;min-width:0;max-width:100%;box-sizing:border-box}.content-area h1,.content-area h2,.content-area h3,.content-area h4,.content-area h5,.content-area h6,.content-area p,.content-area div,.content-area span{max-width:100%;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;white-space:normal;box-sizing:border-box}.loading-spinner{display:flex;justify-content:center;align-items:center;height:200px;color:var(--text-secondary, #64748b);font-size:16px}.loading-spinner:before{content:"";width:20px;height:20px;border:2px solid var(--border-color, #e2e8f0);border-top:2px solid var(--primary-color, #3b82f6);border-radius:50%;animation:spin 1s linear infinite;margin-right:12px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{text-align:center;padding:40px 20px;color:var(--error-color, #dc2626);background:var(--error-bg, #fef2f2);border:1px solid var(--error-border, #fecaca);border-radius:8px;margin:20px}.retry-button{display:block;margin:20px auto;padding:10px 20px;background:var(--primary-color, #3b82f6);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;transition:background-color .2s}.retry-button:hover{background:var(--primary-hover, #2563eb)}.empty-state{text-align:center;padding:60px 20px;color:var(--text-secondary, #64748b)}.empty-state h3{margin:0 0 8px;font-size:18px;font-weight:600}.empty-state p{margin:0;font-size:14px}@media (max-width: 768px){.grade-unit-browser-page{grid-template-areas:"header" "content";grid-template-columns:1fr}.sidebar-area{display:none}.content-area{padding:16px;min-height:calc(100vh - 60px)}.grade-unit-browser-page.sidebar-open{grid-template-areas:"header" "sidebar" "content"}.grade-unit-browser-page.sidebar-open .sidebar-area{display:block;height:auto;position:relative;border-right:none;border-bottom:1px solid var(--border-color, #e2e8f0)}}@media (max-width: 480px){.content-area{padding:12px}.error-message{margin:10px;padding:20px 16px}.retry-button{margin:10px auto;padding:8px 16px;font-size:13px}}@media (prefers-color-scheme: dark){.grade-unit-browser-page{background-color:var(--page-background-dark, #0f172a);color:var(--text-primary-dark, #f1f5f9)}.header-area,.sidebar-area,.content-area{background:var(--surface-dark, #1e293b)}.sidebar-area{border-right-color:var(--border-color-dark, #334155)}.error-message{color:var(--error-color-dark, #f87171);background:var(--error-bg-dark, #7f1d1d);border-color:var(--error-border-dark, #b91c1c)}}.grade-unit-browser-page:focus{outline:2px solid var(--focus-ring, #3b82f6);outline-offset:2px}.retry-button:focus{outline:2px solid var(--focus-ring, #3b82f6);outline-offset:2px}@media (prefers-contrast: high){.grade-unit-browser-page{border:1px solid black}.sidebar-area{border-right:2px solid black}.retry-button{border:2px solid black}}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@mathwiz/ui-components",
+  "private": false,
+  "version": "0.1.0",
+  "description": "A collection of reusable UI components for React applications within the mathwiz ecosystem.",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "storybook",
+    "mathwiz"
+  ],
+  "author": "mathwiz Team <huichen1214@hotmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/moleusher/mathwiz-UI#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/moleusher/mathwiz-UI.git"
+  },
+  "bugs": {
+    "url": "https://github.com/moleusher/mathwiz-UI/issues"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && npm run build:types",
+    "build:types": "tsc -p tsconfig.lib.json",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest --coverage"
+  },
+  "dependencies": {
+    "@emotion/is-prop-valid": "^1.4.0",
+    "@heroui/react": "^2.8.2",
+    "@mswjs/data": "^0.16.2",
+    "@playwright/test": "^1.55.0",
+    "axios": "^1.11.0",
+    "framer-motion": "^12.23.16",
+    "lucide-react": "^0.541.0",
+    "msw": "^2.11.1",
+    "msw-storybook-addon": "^2.0.5",
+    "playwright-mcp": "^0.0.12",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
+    "@eslint/js": "^9.33.0",
+    "@storybook/addon-a11y": "^9.1.3",
+    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/addon-onboarding": "^9.1.3",
+    "@storybook/addon-vitest": "^9.1.3",
+    "@storybook/jest": "^0.2.2",
+    "@storybook/react-vite": "^9.1.3",
+    "@storybook/testing-library": "^0.2.1",
+    "@tailwindcss/postcss": "^4.1.12",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^24.3.0",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.0.2",
+    "@vitest/coverage-v8": "^3.2.4",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-storybook": "^9.1.3",
+    "globals": "^16.3.0",
+    "jsdom": "^26.1.0",
+    "postcss": "^8.5.6",
+    "storybook": "^9.1.3",
+    "tailwindcss": "^4.1.12",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2",
+    "vitest": "^3.2.4"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
+  }
+}