@uicraft/core 1.0.0 → 1.1.1

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@uicraft/core",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "uicraft — beautifully designed UI components built with semantic CSS utility classes",
-  "main": "uicraft.css",
+  "main": "uicraft.js",
   "style": "uicraft.css",
   "files": [
     "uicraft.css",
     "uicraft.min.css",
+    "uicraft.js",
+    "uicraft.min.js",
     "theme-manifest.json",
-    "themes/"
+    "themes/",
+    "generated/"
   ],
   "keywords": [
     "ui",

package/themes/default.json

@@ -9,6 +9,13 @@
     "2xl": "20px",
     "3xl": "24px"
   },
+  "borderWidth": {
+    "none": "0px",
+    "thin": "0.5px",
+    "default": "1px",
+    "medium": "1.5px",
+    "thick": "2px"
+  },
   "spacing": {
     "0": "0",
     "0.5": "0.125rem",
@@ -80,10 +87,12 @@
     "neutralsEmphasis": "0 5% 92%",
     "borderDefault": "0 5% 92%",
     "borderStrong": "245 10% 78%",
+    "accentsBrand": "213 87% 49%",
     "accentsGreen": "162 86% 40%",
     "accentsBlue": "219 88% 54%",
     "accentsRed": "4 83% 55%",
     "accentsOrange": "30 100% 55%",
+    "tintBrand": "213 40% 93%",
     "tintRed": "0 100% 95%",
     "tintGreen": "152 39% 89%",
     "tintBlue": "217 100% 92%",
@@ -102,10 +111,12 @@
       "neutralsEmphasis": "228 4% 25%",
       "borderDefault": "240 4% 15%",
       "borderStrong": "228 4% 25%",
+      "accentsBrand": "213 87% 56%",
       "accentsGreen": "162 86% 40%",
       "accentsBlue": "219 88% 54%",
       "accentsRed": "4 83% 55%",
       "accentsOrange": "30 100% 55%",
+      "tintBrand": "213 50% 17%",
       "tintRed": "356 89% 17%",
       "tintGreen": "150 60% 3%",
       "tintBlue": "216 82% 17%",

package/themes/editorial.json

@@ -9,6 +9,13 @@
     "2xl": "18px",
     "3xl": "22px"
   },
+  "borderWidth": {
+    "none": "0px",
+    "thin": "0.5px",
+    "default": "1px",
+    "medium": "1.5px",
+    "thick": "2px"
+  },
   "spacing": {
     "0": "0",
     "0.5": "0.125rem",
@@ -80,10 +87,12 @@
     "neutralsEmphasis": "34 18% 88%",
     "borderDefault": "34 16% 86%",
     "borderStrong": "31 14% 72%",
+    "accentsBrand": "213 87% 49%",
     "accentsGreen": "155 58% 34%",
     "accentsBlue": "211 74% 45%",
     "accentsRed": "3 68% 52%",
     "accentsOrange": "28 80% 49%",
+    "tintBrand": "213 40% 93%",
     "tintRed": "0 100% 96%",
     "tintGreen": "153 40% 90%",
     "tintBlue": "212 100% 94%",
@@ -102,10 +111,12 @@
       "neutralsEmphasis": "23 10% 20%",
       "borderDefault": "23 10% 19%",
       "borderStrong": "25 10% 29%",
+      "accentsBrand": "213 87% 56%",
       "accentsGreen": "155 58% 43%",
       "accentsBlue": "211 74% 56%",
       "accentsRed": "3 72% 60%",
       "accentsOrange": "30 84% 57%",
+      "tintBrand": "213 50% 17%",
       "tintRed": "356 60% 16%",
       "tintGreen": "153 46% 11%",
       "tintBlue": "211 53% 16%",

package/themes/rounded-sans.json

@@ -9,6 +9,13 @@
     "2xl": "24px",
     "3xl": "28px"
   },
+  "borderWidth": {
+    "none": "0px",
+    "thin": "0.5px",
+    "default": "1px",
+    "medium": "1.5px",
+    "thick": "2px"
+  },
   "spacing": {
     "0": "0",
     "0.5": "0.125rem",
@@ -80,10 +87,12 @@
     "neutralsEmphasis": "220 16% 90%",
     "borderDefault": "220 14% 90%",
     "borderStrong": "221 15% 78%",
+    "accentsBrand": "213 87% 49%",
     "accentsGreen": "160 84% 38%",
     "accentsBlue": "221 84% 55%",
     "accentsRed": "0 78% 56%",
     "accentsOrange": "28 96% 56%",
+    "tintBrand": "213 40% 93%",
     "tintRed": "0 100% 96%",
     "tintGreen": "154 48% 91%",
     "tintBlue": "214 100% 95%",
@@ -102,10 +111,12 @@
       "neutralsEmphasis": "224 16% 22%",
       "borderDefault": "224 15% 20%",
       "borderStrong": "224 13% 30%",
+      "accentsBrand": "213 87% 56%",
       "accentsGreen": "160 84% 45%",
       "accentsBlue": "221 84% 62%",
       "accentsRed": "0 84% 63%",
       "accentsOrange": "32 98% 62%",
+      "tintBrand": "213 50% 17%",
       "tintRed": "355 76% 16%",
       "tintGreen": "157 58% 11%",
       "tintBlue": "219 63% 17%",

package/uicraft.css

@@ -64,10 +64,12 @@
   --neutrals-emphasis: 0 5% 92%;
   --border-default: 0 5% 92%;
   --border-strong: 245 10% 78%;
+  --accents-brand: 213 87% 49%;
   --accents-green: 162 86% 40%;
   --accents-blue: 219 88% 54%;
   --accents-red: 4 83% 55%;
   --accents-orange: 30 100% 55%;
+  --tint-brand: 213 40% 93%;
   --tint-red: 0 100% 95%;
   --tint-green: 152 39% 89%;
   --tint-blue: 217 100% 92%;
@@ -137,10 +139,12 @@ html[data-theme=editorial] {
   --neutrals-emphasis: 34 18% 88%;
   --border-default: 34 16% 86%;
   --border-strong: 31 14% 72%;
+  --accents-brand: 213 87% 49%;
   --accents-green: 155 58% 34%;
   --accents-blue: 211 74% 45%;
   --accents-red: 3 68% 52%;
   --accents-orange: 28 80% 49%;
+  --tint-brand: 213 40% 93%;
   --tint-red: 0 100% 96%;
   --tint-green: 153 40% 90%;
   --tint-blue: 212 100% 94%;
@@ -210,10 +214,12 @@ html[data-theme=rounded-sans] {
   --neutrals-emphasis: 220 16% 90%;
   --border-default: 220 14% 90%;
   --border-strong: 221 15% 78%;
+  --accents-brand: 213 87% 49%;
   --accents-green: 160 84% 38%;
   --accents-blue: 221 84% 55%;
   --accents-red: 0 78% 56%;
   --accents-orange: 28 96% 56%;
+  --tint-brand: 213 40% 93%;
   --tint-red: 0 100% 96%;
   --tint-green: 154 48% 91%;
   --tint-blue: 214 100% 95%;
@@ -232,10 +238,12 @@ html.dark:not([data-theme]), html.dark[data-theme=default] {
   --neutrals-emphasis: 228 4% 25%;
   --border-default: 240 4% 15%;
   --border-strong: 228 4% 25%;
+  --accents-brand: 213 87% 56%;
   --accents-green: 162 86% 40%;
   --accents-blue: 219 88% 54%;
   --accents-red: 4 83% 55%;
   --accents-orange: 30 100% 55%;
+  --tint-brand: 213 50% 17%;
   --tint-red: 356 89% 17%;
   --tint-green: 150 60% 3%;
   --tint-blue: 216 82% 17%;
@@ -254,10 +262,12 @@ html.dark[data-theme=editorial] {
   --neutrals-emphasis: 23 10% 20%;
   --border-default: 23 10% 19%;
   --border-strong: 25 10% 29%;
+  --accents-brand: 213 87% 56%;
   --accents-green: 155 58% 43%;
   --accents-blue: 211 74% 56%;
   --accents-red: 3 72% 60%;
   --accents-orange: 30 84% 57%;
+  --tint-brand: 213 50% 17%;
   --tint-red: 356 60% 16%;
   --tint-green: 153 46% 11%;
   --tint-blue: 211 53% 16%;
@@ -276,10 +286,12 @@ html.dark[data-theme=rounded-sans] {
   --neutrals-emphasis: 224 16% 22%;
   --border-default: 224 15% 20%;
   --border-strong: 224 13% 30%;
+  --accents-brand: 213 87% 56%;
   --accents-green: 160 84% 45%;
   --accents-blue: 221 84% 62%;
   --accents-red: 0 84% 63%;
   --accents-orange: 32 98% 62%;
+  --tint-brand: 213 50% 17%;
   --tint-red: 355 76% 16%;
   --tint-green: 157 58% 11%;
   --tint-blue: 219 63% 17%;
@@ -1054,6 +1066,7 @@ body {
   height: calc(100vh - 3rem);
   display: none;
   flex-direction: column;
+  overflow: hidden;
 }
 @media (min-width: 768px) {
   .uc-sidebar {
@@ -1077,6 +1090,7 @@ body {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
+  overscroll-behavior: contain;
   padding: 0 var(--spacing-2) var(--spacing-3);
 }
 
@@ -1084,6 +1098,7 @@ body {
   flex-shrink: 0;
   padding: var(--spacing-3) var(--spacing-4);
   border-top: 0.5px solid hsl(var(--border-default));
+  overflow: hidden;
 }
 
 .uc-sidebar-link {
@@ -1167,7 +1182,7 @@ body {
 }
 .uc-toc-link.uc-active {
   color: hsl(var(--fg-primary));
-  border-left-color: hsl(var(--accents-blue));
+  border-left-color: hsl(var(--accents-brand));
   font-weight: 500;
 }
 
@@ -1189,7 +1204,7 @@ body {
 }
 .uc-btn:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px hsl(var(--neutrals-background)), 0 0 0 4px hsl(var(--accents-blue));
+  box-shadow: 0 0 0 3px hsl(var(--accents-brand)/0.25);
 }
 .uc-btn:disabled, .uc-btn.uc-disabled {
   opacity: 0.5;
@@ -1198,11 +1213,11 @@ body {
 }
 
 .uc-btn-primary {
-  background: hsl(var(--accents-blue));
+  background: hsl(var(--accents-brand));
   color: hsl(var(--constant-white));
 }
 .uc-btn-primary:hover {
-  background: hsl(var(--accents-blue)/0.9);
+  background: hsl(var(--accents-brand)/0.9);
 }
 
 .uc-btn-secondary {
@@ -1240,7 +1255,7 @@ body {
 
 .uc-btn-link {
   background: transparent;
-  color: hsl(var(--accents-blue));
+  color: hsl(var(--accents-brand));
   text-underline-offset: 4px;
 }
 .uc-btn-link:hover {
@@ -1259,7 +1274,7 @@ body {
 .uc-btn-sm {
   height: 2.25rem;
   padding: 0.375rem 0.75rem;
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
 }
 
 .uc-btn-lg {
@@ -1301,18 +1316,32 @@ body {
 }
 .uc-input:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px hsl(var(--neutrals-background)), 0 0 0 4px hsl(var(--accents-blue));
+  border-color: hsl(var(--accents-brand));
+  box-shadow: 0 0 0 3px hsl(var(--accents-brand)/0.15);
 }
 .uc-input:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
+.uc-input.uc-pl-9 {
+  padding-left: 2.25rem;
+}
+
+.uc-input.uc-pl-10 {
+  padding-left: 2.5rem;
+}
+
+.uc-input.uc-pr-9 {
+  padding-right: 2.25rem;
+}
+
 .uc-input-error {
   border-color: hsl(var(--accents-red));
 }
 .uc-input-error:focus-visible {
-  box-shadow: 0 0 0 2px hsl(var(--neutrals-background)), 0 0 0 4px hsl(var(--accents-red));
+  border-color: hsl(var(--accents-red));
+  box-shadow: 0 0 0 3px hsl(var(--accents-red)/0.15);
 }
 
 .uc-textarea {
@@ -1333,7 +1362,8 @@ body {
 }
 .uc-textarea:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px hsl(var(--neutrals-background)), 0 0 0 4px hsl(var(--accents-blue));
+  border-color: hsl(var(--accents-brand));
+  box-shadow: 0 0 0 3px hsl(var(--accents-brand)/0.15);
 }
 .uc-textarea:disabled {
   opacity: 0.5;
@@ -1344,7 +1374,8 @@ body {
   border-color: hsl(var(--accents-red));
 }
 .uc-textarea-error:focus-visible {
-  box-shadow: 0 0 0 2px hsl(var(--neutrals-background)), 0 0 0 4px hsl(var(--accents-red));
+  border-color: hsl(var(--accents-red));
+  box-shadow: 0 0 0 3px hsl(var(--accents-red)/0.15);
 }
 
 .uc-label {
@@ -1387,7 +1418,7 @@ body {
 }
 
 .uc-badge-primary {
-  background: hsl(var(--accents-blue));
+  background: hsl(var(--accents-brand));
   color: hsl(var(--constant-white));
 }
 
@@ -1416,6 +1447,22 @@ body {
   color: hsl(var(--constant-white));
 }
 
+.uc-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  border: 1px solid hsl(var(--border-default));
+  background: hsl(var(--neutrals-muted));
+  padding: 0.125rem 0.375rem;
+  font-size: 0.75rem;
+  font-family: ui-monospace, monospace;
+  font-weight: 500;
+  line-height: 1.4;
+  color: hsl(var(--fg-secondary));
+  white-space: nowrap;
+}
+
 .uc-alert {
   display: flex;
   gap: 0.75rem;
@@ -1470,15 +1517,54 @@ body {
 }
 
 .uc-separator-h {
-  height: 0.5px;
+  height: 1px;
   width: 100%;
 }
 
 .uc-separator-v {
-  width: 0.5px;
+  width: 1px;
   height: 100%;
 }
 
+.uc-btn-group {
+  display: inline-flex;
+  border: 1px solid hsl(var(--border-strong));
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.uc-btn-group > button + button,
+.uc-btn-group > a + a,
+.uc-btn-group > button + a,
+.uc-btn-group > a + button {
+  border-left: 1px solid hsl(var(--border-strong));
+}
+
+.uc-btn-group-inverted {
+  display: inline-flex;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.uc-btn-group-inverted > button + button,
+.uc-btn-group-inverted > a + a,
+.uc-btn-group-inverted > button + a,
+.uc-btn-group-inverted > a + button {
+  border-left: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.uc-btn-group-vertical {
+  display: inline-flex;
+  flex-direction: column;
+  border: 1px solid hsl(var(--border-strong));
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.uc-btn-group-vertical > button + button,
+.uc-btn-group-vertical > a + a,
+.uc-btn-group-vertical > button + a,
+.uc-btn-group-vertical > a + button {
+  border-top: 1px solid hsl(var(--border-strong));
+}
+
 .uc-component-card {
   border: 0.5px solid hsl(var(--border-default));
   border-radius: var(--radius-2xl);
@@ -1488,7 +1574,7 @@ body {
   flex-direction: column;
 }
 .uc-component-card:hover {
-  border-color: hsl(var(--accents-blue));
+  border-color: hsl(var(--accents-brand));
 }
 .uc-component-card > .uc-px-4.uc-py-3 h3 {
   font-size: 0.8125rem;
@@ -1540,7 +1626,7 @@ body {
   flex-shrink: 0;
 }
 .uc-switch-mini.uc-active {
-  background: hsl(var(--accents-blue));
+  background: hsl(var(--accents-brand));
 }
 .uc-switch-mini .thumb {
   position: absolute;
@@ -1561,19 +1647,19 @@ body {
   width: 14px;
   height: 14px;
   border-radius: var(--radius-sm);
-  border: 1.5px solid hsl(var(--accents-blue));
+  border: 1.5px solid hsl(var(--accents-brand));
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  background: hsl(var(--accents-blue));
+  background: hsl(var(--accents-brand));
 }
 
 .uc-radio-mini {
   width: 14px;
   height: 14px;
   border-radius: 50%;
-  border: 1.5px solid hsl(var(--accents-blue));
+  border: 1.5px solid hsl(var(--accents-brand));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1583,7 +1669,7 @@ body {
   width: 7px;
   height: 7px;
   border-radius: 50%;
-  background: hsl(var(--accents-blue));
+  background: hsl(var(--accents-brand));
 }
 
 .uc-example-block {
@@ -1659,7 +1745,8 @@ body {
 
 .uc-example-panel[data-panel=preview] {
   position: relative;
-  padding: 1.5rem;
+  padding: 2rem 1.5rem;
+  min-height: 8rem;
   background: transparent;
   overflow: visible;
 }
@@ -1830,7 +1917,7 @@ body {
 }
 .uc-tabs-trigger-underline.uc-active {
   color: hsl(var(--fg-primary));
-  border-bottom-color: hsl(var(--accents-blue));
+  border-bottom-color: hsl(var(--accents-brand));
 }
 
 .uc-toast {
@@ -1858,7 +1945,7 @@ body {
 }
 
 .uc-dialog {
-  background: hsl(var(--neutrals-background));
+  background: hsl(var(--neutrals-surface));
   border: 1px solid hsl(var(--border-default));
   border-radius: var(--radius-2xl);
   max-width: 480px;
@@ -1900,7 +1987,7 @@ body {
 .uc-progress-bar {
   height: 100%;
   border-radius: 9999px;
-  background: hsl(var(--accents-blue));
+  background: hsl(var(--accents-brand));
   transition: width 0.3s ease;
 }