@openlearning/widget-framework 1.0.1 → 1.1.0

package/dist/styles/switch.css

@@ -0,0 +1,74 @@
+.switch-container {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.switch-label {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.switch-label--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.switch-input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+.switch-track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 43, 62, 0.3);
+  border-radius: 12px;
+  transition: background-color 0.2s ease;
+}
+
+.switch-thumb {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.switch-input:checked + .switch-track {
+  background-color: #00cc88;
+}
+
+.switch-input:checked + .switch-track .switch-thumb {
+  transform: translateX(20px);
+}
+
+.switch-input:focus-visible + .switch-track {
+  outline: 2px solid rgba(0, 43, 62, 0.5);
+  outline-offset: 2px;
+}
+
+.switch-text {
+  font-size: 14px;
+  line-height: 1.6;
+  color: rgba(0, 43, 62, 1);
+  font-family: 'Open Sans', sans-serif;
+  min-width: 30px;
+}
+
+.switch-text--disabled {
+  opacity: 0.5;
+}

package/dist/styles/tabs.css

@@ -0,0 +1,49 @@
+.tabs-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.tabs-header {
+  display: flex;
+  gap: 4px;
+  border-bottom: 2px solid rgba(0, 43, 62, 0.1);
+}
+
+.tabs-tab {
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  font-family: 'Open Sans', sans-serif;
+  color: rgba(0, 43, 62, 0.7);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.tabs-tab:hover:not(.tabs-tab--disabled) {
+  color: rgba(0, 43, 62, 1);
+  background-color: rgba(0, 43, 62, 0.05);
+}
+
+.tabs-tab--active {
+  color: rgba(0, 43, 62, 1);
+  border-bottom-color: rgba(0, 43, 62, 1);
+}
+
+.tabs-tab--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.tabs-tab:focus-visible {
+  outline: 2px solid rgba(0, 43, 62, 0.5);
+  outline-offset: -2px;
+}
+
+.tabs-content {
+  padding: 20px 0;
+}

package/dist/styles/textfield.css

@@ -0,0 +1,72 @@
+.textfield-container {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.textfield-label {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.5;
+  color: rgba(0, 43, 62, 1);
+  font-family: 'Open Sans', sans-serif;
+}
+
+.textfield-required {
+  color: #d32f2f;
+}
+
+.textfield-input {
+  width: 100%;
+  padding: 10px 12px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: rgba(0, 43, 62, 1);
+  background-color: white;
+  border:1px solid rgba(0, 43, 62, 0.3);
+  border-radius: 4px;
+  font-family: 'Open Sans', sans-serif;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.textfield-input:hover:not(:disabled) {
+  border-color: rgba(0, 43, 62, 0.5);
+}
+
+.textfield-input:focus {
+  outline: none;
+  border-color: rgba(0, 43, 62, 1);
+  box-shadow: 0 0 0 3px rgba(0, 43, 62, 0.1);
+}
+
+.textfield-input--error {
+  border-color: #d32f2f;
+}
+
+.textfield-input--error:focus {
+  border-color: #d32f2f;
+  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
+}
+
+.textfield-input--disabled {
+  background-color: rgba(0, 43, 62, 0.05);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.textfield-textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.textfield-description {
+  font-size: 12px;
+  line-height: 1.5;
+  color: rgba(0, 43, 62, 0.7);
+}
+
+.textfield-error {
+  font-size: 12px;
+  line-height: 1.5;
+  color: #d32f2f;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openlearning/widget-framework",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Framework for building OpenLearning widgets with parent-window messaging and configuration management",
   "type": "module",
   "license": "MIT",
@@ -12,11 +12,24 @@
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
-    }
+    },
+    "./dist/styles/button.css": "./dist/styles/button.css",
+    "./dist/styles/spinner.css": "./dist/styles/spinner.css",
+    "./dist/styles/checkbox.css": "./dist/styles/checkbox.css",
+    "./dist/styles/checkboxgroup.css": "./dist/styles/checkboxgroup.css",
+    "./dist/styles/radiogroup.css": "./dist/styles/radiogroup.css",
+    "./dist/styles/switch.css": "./dist/styles/switch.css",
+    "./dist/styles/textfield.css": "./dist/styles/textfield.css",
+    "./dist/styles/statustag.css": "./dist/styles/statustag.css",
+    "./dist/styles/tabs.css": "./dist/styles/tabs.css"
   },
   "files": [
     "dist"
   ],
+  "scripts": {
+    "build": "tsc && cp -r src/styles dist/",
+    "dev": "tsc --watch"
+  },
   "dependencies": {
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
@@ -24,9 +37,5 @@
   "devDependencies": {
     "@types/react": "^19.2.5",
     "typescript": "~5.9.3"
-  },
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch"
   }
-}
+}