@openlearning/widget-framework 1.0.2 → 1.2.0

package/README.md

@@ -0,0 +1,230 @@
+# Widget Framework
+
+A comprehensive framework for building OpenLearning widgets with reusable UI components, parent-window messaging, and configuration management.
+
+## Features
+
+- **Reusable UI Components**: Pre-built, accessible components following the OpenLearning design system
+- **Parent Messaging**: Secure two-way communication between widgets and parent applications
+- **Configuration Management**: Type-safe widget configuration and setup
+- **TypeScript Support**: Full TypeScript support with comprehensive type definitions
+- **Consistent Styling**: CSS-based theming with customizable color variables
+
+## Installation
+
+```bash
+npm install @openlearning/widget-framework
+```
+
+## Quick Start
+
+### 1. Create Your Widget Component
+
+```typescript
+import React from "react";
+import { Button } from "@openlearning/widget-framework";
+import "@openlearning/widget-framework/styles/button.css";
+
+export function MyWidget() {
+  return (
+    <div>
+      <h1>My First Widget</h1>
+      <Button theme="cta">Get Started</Button>
+    </div>
+  );
+}
+```
+
+### 2. Set Up the Learner View
+
+```typescript
+import { createLearnerEntry } from "@openlearning/widget-framework";
+import MyWidget from "./MyWidget";
+
+createLearnerEntry(MyWidget);
+```
+
+### 3. Set Up the Setup View
+
+```typescript
+import { createSetupEntry } from "@openlearning/widget-framework";
+import MyWidgetSetup from "./MyWidgetSetup";
+
+createSetupEntry(MyWidgetSetup);
+```
+
+## Core Features
+
+### UI Components
+
+See [COMPONENTS.md](./COMPONENTS.md) for full component documentation.
+
+### Parent Messaging
+
+Communicate securely with the parent application:
+
+```typescript
+import { useParentMessaging } from "@openlearning/widget-framework";
+
+function MyComponent() {
+  const { send, subscribe } = useParentMessaging();
+
+  const handleAction = () => {
+    send({
+      type: "action",
+      payload: { /* your data */ }
+    });
+  };
+
+  subscribe((message) => {
+    console.log("Parent message:", message);
+  });
+
+  return <button onClick={handleAction}>Send Message</button>;
+}
+```
+
+### Configuration Management
+
+Access and manage widget configuration:
+
+```typescript
+import { useWidgetConfig } from "@openlearning/widget-framework";
+
+function MyComponent() {
+  const config = useWidgetConfig();
+  
+  return <div>Theme: {config.theme}</div>;
+}
+```
+
+### Development Tools
+
+Use `DevApp` for development and testing:
+
+```typescript
+import { DevApp } from "@openlearning/widget-framework";
+
+export default function App() {
+  return (
+    <DevApp 
+      LearnerView={MyLearnerWidget}
+      SetupView={MySetupWidget}
+    />
+  );
+}
+```
+
+## Project Setup
+
+Define your widget project configuration:
+
+```typescript
+import { defineWidgetProject } from "@openlearning/widget-framework";
+
+export const widgetConfig = defineWidgetProject({
+  id: "my-widget", 
+  name: "My Widget",
+  version: "1.0.0",
+  /* ... more config ... */
+});
+```
+
+## Integration Guide
+
+See [INTEGRATION_GUIDE.md](./INTEGRATION_GUIDE.md) for practical examples and common patterns.
+
+## API Reference
+
+### `createLearnerEntry(Component)`
+Renders a component as the learner view of your widget.
+
+### `createSetupEntry(Component)`
+Renders a component as the setup/configuration view of your widget.
+
+### `useParentMessaging()`
+Hook for parent-window communication. Returns `{ send, subscribe }`.
+
+### `useWidgetConfig()`
+Hook to access widget configuration.
+
+### `DevApp(props)`
+Development wrapper component for testing widget views.
+
+### `defineWidgetProject(config)`
+Defines widget project configuration.
+
+### UI Components
+
+#### Button
+
+```typescript
+import { Button } from "@openlearning/widget-framework";
+import "@openlearning/widget-framework/styles/button.css";
+
+<Button 
+  variant="filled"
+  theme="primary"
+  size="medium"
+  icon={<MyIcon />}
+  iconPosition="left"
+  isLoading={false}
+  fullWidth={false}
+  onClick={handleClick}
+>
+  Click Me
+</Button>
+```
+
+## CSS Customization
+
+Override styling by setting CSS variables:
+
+```css
+:root {
+  --btn-primary-bg: #4a90e2;
+  --btn-primary-bg-hover: #357abd;
+  --btn-cta-bg: #10b981;
+  /* ... more variables ... */
+}
+```
+
+See [button.css](./src/styles/button.css) for all available variables.
+
+## TypeScript Support
+
+Full TypeScript support with type definitions:
+
+```typescript
+import { 
+  Button,
+  type ButtonProps,
+  type LearnerViewProps,
+  type WidgetConfigBase 
+} from "@openlearning/widget-framework";
+```
+
+## Browser Support
+
+- Chrome/Edge (latest 2 versions)
+- Firefox (latest 2 versions)
+- Safari (latest 2 versions)
+- iOS Safari 12+
+- Android 5+
+
+## Contributing
+
+Contributions are welcome! Please follow these guidelines:
+
+1. Create a feature branch
+2. Make your changes
+3. Write tests for new functionality
+4. Submit a pull request
+
+## License
+
+MIT
+
+## Support
+
+For issues, questions, or feature requests, please contact the OpenLearning team.

package/dist/components/Button.d.ts

@@ -0,0 +1,41 @@
+import React, { ReactNode } from "react";
+import "../styles/button.css";
+export type ButtonVariant = "round-filled" | "round-tonal" | "round-quiet" | "round-inline" | "primary" | "secondary";
+export type ButtonSize = "small" | "medium" | "large";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual variant of the button */
+    variant?: ButtonVariant;
+    /** Size of the button */
+    size?: ButtonSize;
+    /** Icon to display */
+    icon?: ReactNode;
+    /** Icon position */
+    iconPosition?: "left" | "right";
+    /** Whether button is loading */
+    isLoading?: boolean;
+    /** Custom loading indicator component */
+    loadingIndicator?: ReactNode;
+    /** Whether button takes full width */
+    fullWidth?: boolean;
+    /** Custom className to merge with button classes */
+    className?: string;
+    /** Button content/children */
+    children?: ReactNode;
+}
+/**
+ * Reusable Button component following OpenLearning design system
+ *
+ * @example
+ * // Basic usage
+ * <Button>Click me</Button>
+ *
+ * @example
+ * // With variant
+ * <Button variant="filled">Submit</Button>
+ *
+ * @example
+ * // With icon
+ * <Button icon={<IconComponent />} iconPosition="left">Action</Button>
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,sBAAsB,CAAC;AAG9B,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,cAAc,GAAG,SAAS,GAAG,WAAW,CAAC;AACtH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,mCAAmC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEhC,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAE7B,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,uFAqElB,CAAC"}

package/dist/components/Button.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import "../styles/button.css";
+import { Spinner } from "./Spinner";
+/**
+ * Reusable Button component following OpenLearning design system
+ *
+ * @example
+ * // Basic usage
+ * <Button>Click me</Button>
+ *
+ * @example
+ * // With variant
+ * <Button variant="filled">Submit</Button>
+ *
+ * @example
+ * // With icon
+ * <Button icon={<IconComponent />} iconPosition="left">Action</Button>
+ */
+export const Button = React.forwardRef(({ variant = "primary", size = "medium", icon, iconPosition = "left", isLoading = false, loadingIndicator, fullWidth = false, className = "", children, disabled, ...rest }, ref) => {
+    const isDisabled = disabled;
+    // Build class names
+    const classes = [
+        "btn",
+        `btn--${variant}`,
+        size !== "medium" && `btn--${size}`,
+        isLoading && "btn--loading",
+        fullWidth && "btn--full-width",
+        !children && icon && "btn--icon-only",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    // Build content
+    let content = children;
+    if (isLoading) {
+        content = (_jsxs(_Fragment, { children: [loadingIndicator || _jsx(Spinner, {}), children && _jsx("span", { children: children })] }));
+    }
+    else if (icon) {
+        const iconElement = _jsx("span", { className: "btn__icon", children: icon });
+        content =
+            iconPosition === "right" ? (_jsxs(_Fragment, { children: [children, iconElement] })) : (_jsxs(_Fragment, { children: [iconElement, children] }));
+    }
+    return (_jsx("button", { ref: ref, className: classes, disabled: isDisabled, ...rest, children: content }));
+});
+Button.displayName = "Button";
+//# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAmCpC;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CACpC,CACE,EACE,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,IAAI,EACJ,YAAY,GAAG,MAAM,EACrB,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,UAAU,GAAG,QAAQ,CAAC;IAE5B,oBAAoB;IACpB,MAAM,OAAO,GAAG;QACd,KAAK;QACL,QAAQ,OAAO,EAAE;QACjB,IAAI,KAAK,QAAQ,IAAI,QAAQ,IAAI,EAAE;QACnC,SAAS,IAAI,cAAc;QAC3B,SAAS,IAAI,iBAAiB;QAC9B,CAAC,QAAQ,IAAI,IAAI,IAAI,gBAAgB;QACrC,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,gBAAgB;IAChB,IAAI,OAAO,GAAc,QAAQ,CAAC;IAElC,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,GAAG,CACR,8BACG,gBAAgB,IAAI,KAAC,OAAO,KAAG,EAC/B,QAAQ,IAAI,yBAAO,QAAQ,GAAQ,IACnC,CACJ,CAAC;IACJ,CAAC;SAAM,IAAI,IAAI,EAAE,CAAC;QAChB,MAAM,WAAW,GAAG,eAAM,SAAS,EAAC,WAAW,YAAE,IAAI,GAAQ,CAAC;QAC9D,OAAO;YACL,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,CACzB,8BACG,QAAQ,EACR,WAAW,IACX,CACJ,CAAC,CAAC,CAAC,CACF,8BACG,WAAW,EACX,QAAQ,IACR,CACJ,CAAC;IACN,CAAC;IAED,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,UAAU,KAChB,IAAI,YAEP,OAAO,GACD,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import "../styles/checkbox.css";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    /** Checkbox label */
+    label?: React.ReactNode;
+    /** Error message to display */
+    error?: string | null;
+    /** Helper text that appears below the checkbox */
+    description?: React.ReactNode;
+    /** Whether the checkbox is required */
+    required?: boolean;
+    /** Called when checked state changes */
+    onChange?: (checked: boolean) => void;
+}
+/**
+ * Checkbox component matching OpenLearning UI design
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,wBAAwB,CAAC;AAEhC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAClG,qBAAqB;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,kDAAkD;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,wFAkDpB,CAAC"}

package/dist/components/Checkbox.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import "../styles/checkbox.css";
+/**
+ * Checkbox component matching OpenLearning UI design
+ */
+export const Checkbox = React.forwardRef(({ label, error, description, required, className = "", onChange, disabled, ...rest }, ref) => {
+    const handleChange = (event) => {
+        if (onChange) {
+            onChange(event.target.checked);
+        }
+    };
+    return (_jsxs("div", { className: `checkbox-container ${className}`, children: [_jsxs("label", { className: `checkbox-label ${disabled ? 'checkbox-label--disabled' : ''}`, children: [_jsx("input", { ref: ref, type: "checkbox", className: "checkbox-input", disabled: disabled, onChange: handleChange, ...rest }), _jsx("span", { className: "checkbox-box", children: _jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: disabled ? "rgba(0, 0, 0, 0.25)" : "rgba(0, 0, 0, 0.9)", strokeWidth: "3", children: _jsx("polyline", { points: "16 5 8 14 4 10" }) }) }), label && (_jsxs("span", { className: "checkbox-text", children: [label, required && _jsx("span", { className: "checkbox-required", children: " *" })] }))] }), description && !error && (_jsx("div", { className: "checkbox-description", children: description })), error && _jsx("div", { className: "checkbox-error", children: error })] }));
+});
+Checkbox.displayName = "Checkbox";
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,wBAAwB,CAAC;AAehC;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CACE,EACE,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,YAAY,GAAG,CAAC,KAA0C,EAAE,EAAE;QAClE,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,sBAAsB,SAAS,EAAE,aAC/C,iBAAO,SAAS,EAAE,kBAAkB,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,EAAE,aAC9E,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,gBAAgB,EAC1B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,KAClB,IAAI,GACR,EACF,eAAM,SAAS,EAAC,cAAc,YAC5B,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,oBAAoB,EAAE,WAAW,EAAC,GAAG,YACnH,mBAAU,MAAM,EAAC,gBAAgB,GAAG,GAChC,GACD,EACN,KAAK,IAAI,CACR,gBAAM,SAAS,EAAC,eAAe,aAC5B,KAAK,EACL,QAAQ,IAAI,eAAM,SAAS,EAAC,mBAAmB,mBAAU,IACrD,CACR,IACK,EACP,WAAW,IAAI,CAAC,KAAK,IAAI,CACxB,cAAK,SAAS,EAAC,sBAAsB,YAAE,WAAW,GAAO,CAC1D,EACA,KAAK,IAAI,cAAK,SAAS,EAAC,gBAAgB,YAAE,KAAK,GAAO,IACnD,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/components/CheckboxGroup.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import "../styles/checkboxgroup.css";
+export interface CheckboxGroupOption {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface CheckboxGroupProps {
+    /** List of checkbox options */
+    options: CheckboxGroupOption[];
+    /** Currently selected values */
+    values?: string[];
+    /** Called when selection changes */
+    onChange?: (values: string[]) => void;
+    /** Group label */
+    label?: React.ReactNode;
+    /** Error message */
+    error?: string | null;
+    /** Helper text */
+    description?: React.ReactNode;
+    /** Whether the group is required */
+    required?: boolean;
+    /** Whether all options are disabled */
+    disabled?: boolean;
+    /** Layout direction for options */
+    layout?: 'horizontal' | 'vertical';
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * CheckboxGroup component for multiple selections
+ */
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+//# sourceMappingURL=CheckboxGroup.d.ts.map

package/dist/components/CheckboxGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,6BAA6B,CAAC;AAErC,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,+BAA+B;IAC/B,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,kBAAkB;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,kBAAkB;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+CtD,CAAC"}

package/dist/components/CheckboxGroup.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from "./Checkbox";
+import "../styles/checkboxgroup.css";
+/**
+ * CheckboxGroup component for multiple selections
+ */
+export const CheckboxGroup = ({ options, values = [], onChange, label, error, description, required, disabled = false, layout = 'horizontal', className = "", }) => {
+    const handleChange = (optionValue, checked) => {
+        if (!disabled && onChange) {
+            const newValues = checked
+                ? [...values, optionValue]
+                : values.filter((v) => v !== optionValue);
+            onChange(newValues);
+        }
+    };
+    return (_jsxs("div", { className: `checkboxgroup-container ${className}`, children: [label && (_jsxs("div", { className: "checkboxgroup-label", children: [label, required && _jsx("span", { className: "checkboxgroup-required", children: " *" })] })), _jsx("div", { className: `checkboxgroup-options checkboxgroup-options--${layout}`, children: options.map((option, index) => (_jsx(Checkbox, { label: option.label, checked: values.includes(option.value), disabled: disabled || option.disabled, onChange: (checked) => handleChange(option.value, checked), className: index > 0 ? 'checkbox--spaced' : '' }, option.value))) }), description && !error && (_jsx("div", { className: "checkboxgroup-description", children: description })), error && _jsx("div", { className: "checkboxgroup-error", children: error })] }));
+};
+//# sourceMappingURL=CheckboxGroup.js.map

package/dist/components/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,6BAA6B,CAAC;AA+BrC;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,OAAO,EACP,MAAM,GAAG,EAAE,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,YAAY,EACrB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,CAAC,WAAmB,EAAE,OAAgB,EAAE,EAAE;QAC7D,IAAI,CAAC,QAAQ,IAAI,QAAQ,EAAE,CAAC;YAC1B,MAAM,SAAS,GAAG,OAAO;gBACvB,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,WAAW,CAAC;gBAC1B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC;YAC5C,QAAQ,CAAC,SAAS,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,2BAA2B,SAAS,EAAE,aACnD,KAAK,IAAI,CACR,eAAK,SAAS,EAAC,qBAAqB,aACjC,KAAK,EACL,QAAQ,IAAI,eAAM,SAAS,EAAC,wBAAwB,mBAAU,IAC3D,CACP,EACD,cAAK,SAAS,EAAE,gDAAgD,MAAM,EAAE,YACrE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,KAAC,QAAQ,IAEP,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACtC,QAAQ,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,EACrC,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,EAC1D,SAAS,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,IALzC,MAAM,CAAC,KAAK,CAMjB,CACH,CAAC,GACE,EACL,WAAW,IAAI,CAAC,KAAK,IAAI,CACxB,cAAK,SAAS,EAAC,2BAA2B,YAAE,WAAW,GAAO,CAC/D,EACA,KAAK,IAAI,cAAK,SAAS,EAAC,qBAAqB,YAAE,KAAK,GAAO,IACxD,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/Menu.d.ts

@@ -0,0 +1,45 @@
+import React, { ReactNode } from "react";
+export interface MenuItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    checked?: boolean;
+    divider?: boolean;
+}
+export interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Menu trigger button content/label */
+    trigger: ReactNode;
+    /** Menu items to display */
+    items: MenuItem[];
+    /** Called when a menu item is clicked */
+    onItemClick?: (itemId: string) => void;
+    /** Trigger button icon */
+    triggerIcon?: ReactNode;
+    /** Custom trigger button class name */
+    triggerClassName?: string;
+    /** Disable the menu trigger */
+    triggerDisabled?: boolean;
+}
+/**
+ * Menu component for displaying dropdown menus
+ *
+ * @example
+ * // Basic usage
+ * const items = [
+ *   { id: 'edit', label: 'Edit' },
+ *   { id: 'delete', label: 'Delete' },
+ * ];
+ * <Menu trigger="Actions" items={items} onItemClick={(id) => handleAction(id)} />
+ *
+ * @example
+ * // With icons and divider
+ * const items = [
+ *   { id: 'edit', label: 'Edit', icon: <EditIcon /> },
+ *   { divider: true },
+ *   { id: 'delete', label: 'Delete', icon: <TrashIcon /> },
+ * ];
+ * <Menu trigger={<MoreIcon />} items={items} />
+ */
+export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Menu.d.ts.map

package/dist/components/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAEtE,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,wCAAwC;IACxC,OAAO,EAAE,SAAS,CAAC;IAEnB,4BAA4B;IAC5B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAElB,yCAAyC;IACzC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,0BAA0B;IAC1B,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,+BAA+B;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,kFA2HhB,CAAC"}

package/dist/components/Menu.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from "react";
+/**
+ * Menu component for displaying dropdown menus
+ *
+ * @example
+ * // Basic usage
+ * const items = [
+ *   { id: 'edit', label: 'Edit' },
+ *   { id: 'delete', label: 'Delete' },
+ * ];
+ * <Menu trigger="Actions" items={items} onItemClick={(id) => handleAction(id)} />
+ *
+ * @example
+ * // With icons and divider
+ * const items = [
+ *   { id: 'edit', label: 'Edit', icon: <EditIcon /> },
+ *   { divider: true },
+ *   { id: 'delete', label: 'Delete', icon: <TrashIcon /> },
+ * ];
+ * <Menu trigger={<MoreIcon />} items={items} />
+ */
+export const Menu = React.forwardRef(({ trigger, items, onItemClick, triggerIcon, triggerClassName = "", triggerDisabled = false, className = "", ...rest }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const menuRef = useRef(null);
+    const triggerRef = useRef(null);
+    // Close menu when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current &&
+                !menuRef.current.contains(event.target) &&
+                !triggerRef.current?.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+            return () => {
+                document.removeEventListener("mousedown", handleClickOutside);
+            };
+        }
+    }, [isOpen]);
+    const handleItemClick = (itemId) => {
+        onItemClick?.(itemId);
+        setIsOpen(false);
+    };
+    const hasCheckedItems = items.some((item) => item.checked);
+    return (_jsxs("div", { ref: ref, className: `menu ${className}`.trim(), ...rest, children: [_jsxs("button", { ref: triggerRef, className: `menu__trigger ${isOpen ? "menu__trigger--open" : ""} ${triggerClassName}`.trim(), onClick: () => setIsOpen(!isOpen), disabled: triggerDisabled, "aria-haspopup": "true", "aria-expanded": isOpen, children: [triggerIcon && _jsx("span", { className: "menu__trigger-icon", children: triggerIcon }), trigger, !triggerIcon && (_jsx("svg", { className: "menu__trigger-arrow", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("polyline", { points: "6 9 12 15 18 9" }) }))] }), _jsx("div", { className: `menu__content ${isOpen ? "menu__content--open" : ""}`, role: "menu", children: items.map((item, index) => {
+                    if (item.divider) {
+                        return (_jsx("div", { className: "menu__divider", role: "separator" }, `divider-${index}`));
+                    }
+                    return (_jsxs("button", { className: `menu__item ${item.checked ? "menu__item--checked" : ""}`.trim(), onClick: () => handleItemClick(item.id), disabled: item.disabled, role: "menuitem", "aria-disabled": item.disabled, children: [item.icon && (_jsx("span", { className: "menu__item-icon", children: item.icon })), _jsx("span", { children: item.label }), hasCheckedItems && item.checked && (_jsx("span", { className: "menu__item-checkmark", role: "presentation", children: "\u2713" }))] }, item.id));
+                }) })] }));
+});
+Menu.displayName = "Menu";
+//# sourceMappingURL=Menu.js.map

package/dist/components/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"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"}

package/dist/components/RadioGroup.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import "../styles/radiogroup.css";
+export interface RadioOption {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface RadioGroupProps {
+    /** List of radio options */
+    options: RadioOption[];
+    /** Currently selected value */
+    value?: string;
+    /** Called when selection changes */
+    onChange?: (value: string) => void;
+    /** Group label */
+    label?: React.ReactNode;
+    /** Group name (for form) */
+    name?: string;
+    /** Error message */
+    error?: string | null;
+    /** Helper text */
+    description?: React.ReactNode;
+    /** Whether the group is required */
+    required?: boolean;
+    /** Whether all options are disabled */
+    disabled?: boolean;
+    /** Layout direction for options */
+    layout?: 'horizontal' | 'vertical';
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * RadioGroup component matching OpenLearning UI design
+ */
+export declare const RadioGroup: React.FC<RadioGroupProps>;
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/components/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,0BAA0B,CAAC;AAElC,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,4BAA4B;IAC5B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,kBAAkB;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4DhD,CAAC"}

package/dist/components/RadioGroup.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/radiogroup.css";
+/**
+ * RadioGroup component matching OpenLearning UI design
+ */
+export const RadioGroup = ({ options, value, onChange, label, name, error, description, required, disabled = false, layout = 'horizontal', className = "", }) => {
+    const handleChange = (optionValue) => {
+        if (!disabled && onChange) {
+            onChange(optionValue);
+        }
+    };
+    return (_jsxs("div", { className: `radiogroup-container ${className}`, children: [label && (_jsxs("div", { className: "radiogroup-label", children: [label, required && _jsx("span", { className: "radiogroup-required", children: " *" })] })), _jsx("div", { className: `radiogroup-options radiogroup-options--${layout}`, children: options.map((option, index) => {
+                    const isDisabled = disabled || option.disabled;
+                    const isChecked = value === option.value;
+                    return (_jsxs("label", { className: `radiogroup-option ${isDisabled ? 'radiogroup-option--disabled' : ''} ${index > 0 ? 'radiogroup-option--spaced' : ''}`, children: [_jsx("input", { type: "radio", className: "radiogroup-input", name: name, value: option.value, checked: isChecked, disabled: isDisabled, onChange: () => handleChange(option.value) }), _jsx("div", { className: "radiogroup-radio-container", children: _jsx("div", { className: "radiogroup-radio" }) }), _jsx("span", { className: "radiogroup-option-label", children: option.label })] }, option.value));
+                }) }), description && !error && (_jsx("div", { className: "radiogroup-description", children: description })), error && _jsx("div", { className: "radiogroup-error", children: error })] }));
+};
+//# sourceMappingURL=RadioGroup.js.map

package/dist/components/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":";AACA,OAAO,0BAA0B,CAAC;AAiClC;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EACpD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,YAAY,EACrB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,CAAC,WAAmB,EAAE,EAAE;QAC3C,IAAI,CAAC,QAAQ,IAAI,QAAQ,EAAE,CAAC;YAC1B,QAAQ,CAAC,WAAW,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,wBAAwB,SAAS,EAAE,aAChD,KAAK,IAAI,CACR,eAAK,SAAS,EAAC,kBAAkB,aAC9B,KAAK,EACL,QAAQ,IAAI,eAAM,SAAS,EAAC,qBAAqB,mBAAU,IACxD,CACP,EACD,cAAK,SAAS,EAAE,0CAA0C,MAAM,EAAE,YAC/D,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBAC7B,MAAM,UAAU,GAAG,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC;oBAC/C,MAAM,SAAS,GAAG,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC;oBAEzC,OAAO,CACL,iBAEE,SAAS,EAAE,qBAAqB,UAAU,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAAE,aAEjI,gBACE,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,kBAAkB,EAC5B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,GAC1C,EACF,cAAK,SAAS,EAAC,4BAA4B,YACzC,cAAK,SAAS,EAAC,kBAAkB,GAAO,GACpC,EACN,eAAM,SAAS,EAAC,yBAAyB,YAAE,MAAM,CAAC,KAAK,GAAQ,KAf1D,MAAM,CAAC,KAAK,CAgBX,CACT,CAAC;gBACJ,CAAC,CAAC,GACE,EACL,WAAW,IAAI,CAAC,KAAK,IAAI,CACxB,cAAK,SAAS,EAAC,wBAAwB,YAAE,WAAW,GAAO,CAC5D,EACA,KAAK,IAAI,cAAK,SAAS,EAAC,kBAAkB,YAAE,KAAK,GAAO,IACrD,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/Spinner.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "../styles/spinner.css";
+export interface SpinnerProps {
+    /** Optional label to show next to spinner */
+    label?: string;
+    /** Color of the spinner (defaults to currentColor) */
+    color?: string;
+    /** Font size of the spinner icon */
+    fontSize?: number;
+}
+/**
+ * Loading spinner component matching OpenLearning UI design
+ */
+export declare const Spinner: React.FC<SpinnerProps>;
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/components/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,uBAAuB,CAAC;AAE/B,MAAM,WAAW,YAAY;IAC3B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAwB1C,CAAC"}