@forthtilliath/forth-ui 0.2.4 → 0.3.0

package/dist/components/toggle-switch/variants.js

@@ -0,0 +1,30 @@
+import { cva } from "class-variance-authority";
+export const toggleSwitchTrackVariants = cva([
+    "relative shrink-0 rounded-full bg-foreground/20 transition-colors",
+    "group-data-[state=checked]/toggle-switch:bg-primary",
+    "group-focus-visible/toggle-switch:ring-2 group-focus-visible/toggle-switch:ring-primary",
+    "group-focus-visible/toggle-switch:ring-offset-2 group-focus-visible/toggle-switch:ring-offset-background",
+], {
+    variants: {
+        size: {
+            sm: "h-5 w-8",
+            default: "h-5 w-9",
+            lg: "h-6 w-10",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+});
+export const toggleSwitchThumbVariants = cva("absolute size-4 rounded-full bg-white shadow transition-transform", {
+    variants: {
+        size: {
+            sm: "top-0.5 left-0.5 group-data-[state=checked]/toggle-switch:translate-x-3",
+            default: "top-0.5 left-0.5 group-data-[state=checked]/toggle-switch:translate-x-4",
+            lg: "top-1 left-1 group-data-[state=checked]/toggle-switch:translate-x-4",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+});

package/dist/globals.css

@@ -73,6 +73,7 @@
     --radius-md: calc(var(--radius) - 2px);
     --radius-lg: var(--radius);
     --radius-xl: calc(var(--radius) + 4px);
+    --radius-3xl: 1.5rem;
     --shadow-2xs: var(--shadow-2xs);
     --shadow-xs: var(--shadow-xs);
     --shadow-sm: var(--shadow-sm);
@@ -323,9 +324,15 @@
   .top-0 {
     top: 0px;
   }
+  .top-0\.5 {
+    top: calc(var(--spacing) * 0.5);
+  }
   .top-0\.25 {
     top: calc(var(--spacing) * 0.25);
   }
+  .top-1 {
+    top: var(--spacing);
+  }
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
@@ -338,6 +345,9 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
+  .top-full {
+    top: 100%;
+  }
   .-right-1 {
     right: calc(var(--spacing) * -1);
   }
@@ -365,9 +375,21 @@
   .-left-1 {
     left: calc(var(--spacing) * -1);
   }
+  .left-0 {
+    left: 0px;
+  }
+  .left-0\.5 {
+    left: calc(var(--spacing) * 0.5);
+  }
   .left-0\.25 {
     left: calc(var(--spacing) * 0.25);
   }
+  .left-1 {
+    left: var(--spacing);
+  }
+  .z-20 {
+    z-index: 20;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -557,6 +579,10 @@
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
   }
+  .size-11 {
+    width: calc(var(--spacing) * 11);
+    height: calc(var(--spacing) * 11);
+  }
   .size-14 {
     width: calc(var(--spacing) * 14);
     height: calc(var(--spacing) * 14);
@@ -636,12 +662,24 @@
   .w-1 {
     width: var(--spacing);
   }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
+  .w-9 {
+    width: calc(var(--spacing) * 9);
+  }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
   .w-28 {
     width: calc(var(--spacing) * 28);
   }
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
@@ -687,6 +725,18 @@
   .origin-top {
     transform-origin: top;
   }
+  .-translate-x-3 {
+    --tw-translate-x: calc(var(--spacing) * -3);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-3 {
+    --tw-translate-x: calc(var(--spacing) * 3);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-3 {
+    --tw-translate-y: calc(var(--spacing) * 3);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .scale-y-0 {
     --tw-scale-y: 0%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
@@ -695,6 +745,9 @@
     --tw-scale-y: 100%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
+  .rotate-180 {
+    rotate: 180deg;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -728,6 +781,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .touch-none {
+    touch-action: none;
+  }
   .\[appearance\:textfield\] {
     appearance: textfield;
   }
@@ -788,6 +844,9 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .place-items-center {
+    place-items: center;
+  }
   .items-center {
     align-items: center;
   }
@@ -895,6 +954,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-3xl {
+    border-radius: var(--radius-3xl);
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -1101,6 +1163,18 @@
       background-color: color-mix(in oklab, var(--color-emerald-500) 25%, transparent);
     }
   }
+  .bg-foreground\/10 {
+    background-color: var(--color-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-foreground) 10%, transparent);
+    }
+  }
+  .bg-foreground\/20 {
+    background-color: var(--color-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-foreground) 20%, transparent);
+    }
+  }
   .bg-fuchsia-500 {
     background-color: var(--color-fuchsia-500);
   }
@@ -1167,6 +1241,12 @@
       background-color: color-mix(in oklab, var(--color-muted) 40%, transparent);
     }
   }
+  .bg-muted\/50 {
+    background-color: var(--color-muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+    }
+  }
   .bg-orange-500 {
     background-color: var(--color-orange-500);
   }
@@ -1188,12 +1268,24 @@
   .bg-primary {
     background-color: var(--color-primary);
   }
+  .bg-primary\/5 {
+    background-color: var(--color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
+    }
+  }
   .bg-primary\/10 {
     background-color: var(--color-primary);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
     }
   }
+  .bg-primary\/15 {
+    background-color: var(--color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
+    }
+  }
   .bg-primary\/20 {
     background-color: var(--color-primary);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1242,6 +1334,12 @@
   .bg-sky-500 {
     background-color: var(--color-sky-500);
   }
+  .bg-sky-500\/15 {
+    background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-sky-500) 15%, transparent);
+    }
+  }
   .bg-sky-500\/25 {
     background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 25%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1287,6 +1385,9 @@
       background-color: color-mix(in oklab, var(--color-violet-500) 25%, transparent);
     }
   }
+  .bg-white {
+    background-color: var(--color-white);
+  }
   .bg-yellow-500 {
     background-color: var(--color-yellow-500);
   }
@@ -1296,6 +1397,24 @@
       background-color: color-mix(in oklab, var(--color-yellow-500) 25%, transparent);
     }
   }
+  .bg-linear-135 {
+    --tw-gradient-position: 135deg;
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      --tw-gradient-position: 135deg in oklab;
+    }
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .from-primary {
+    --tw-gradient-from: var(--color-primary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-primary\/40 {
+    --tw-gradient-to: var(--color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-to: color-mix(in oklab, var(--color-primary) 40%, transparent);
+    }
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .fill-amber-400 {
     fill: var(--color-amber-400);
   }
@@ -1311,6 +1430,9 @@
   .p-1 {
     padding: var(--spacing);
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
@@ -1486,6 +1608,30 @@
   .text-foreground {
     color: var(--color-foreground);
   }
+  .text-foreground\/30 {
+    color: var(--color-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-foreground) 30%, transparent);
+    }
+  }
+  .text-foreground\/40 {
+    color: var(--color-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-foreground) 40%, transparent);
+    }
+  }
+  .text-foreground\/50 {
+    color: var(--color-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-foreground) 50%, transparent);
+    }
+  }
+  .text-foreground\/60 {
+    color: var(--color-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-foreground) 60%, transparent);
+    }
+  }
   .text-fuchsia-500 {
     color: var(--color-fuchsia-500);
   }
@@ -1543,6 +1689,9 @@
   .text-sky-500 {
     color: var(--color-sky-500);
   }
+  .text-sky-600 {
+    color: var(--color-sky-600);
+  }
   .text-sky-700 {
     color: var(--color-sky-700);
   }
@@ -1586,6 +1735,9 @@
   .opacity-50 {
     opacity: 50%;
   }
+  .opacity-60 {
+    opacity: 60%;
+  }
   .opacity-70 {
     opacity: 70%;
   }
@@ -1595,6 +1747,14 @@
   .opacity-100 {
     opacity: 100%;
   }
+  .shadow {
+    --tw-shadow: var(--shadow);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-xl {
+    --tw-shadow: var(--shadow-xl);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-xs {
     --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1700,6 +1860,34 @@
       animation-play-state: paused;
     }
   }
+  .group-focus-visible\/toggle-switch\:ring-2:is(:where(.group\/toggle-switch):focus-visible *) {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .group-focus-visible\/toggle-switch\:ring-primary:is(:where(.group\/toggle-switch):focus-visible *) {
+    --tw-ring-color: var(--color-primary);
+  }
+  .group-focus-visible\/toggle-switch\:ring-offset-2:is(:where(.group\/toggle-switch):focus-visible *) {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+  .group-focus-visible\/toggle-switch\:ring-offset-background:is(:where(.group\/toggle-switch):focus-visible *) {
+    --tw-ring-offset-color: var(--color-background);
+  }
+  .group-data-\[state\=checked\]\/toggle-switch\:translate-x-3:is(:where(.group\/toggle-switch)[data-state="checked"] *) {
+    --tw-translate-x: calc(var(--spacing) * 3);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .group-data-\[state\=checked\]\/toggle-switch\:translate-x-4:is(:where(.group\/toggle-switch)[data-state="checked"] *) {
+    --tw-translate-x: calc(var(--spacing) * 4);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .group-data-\[state\=checked\]\/toggle-switch\:bg-primary:is(:where(.group\/toggle-switch)[data-state="checked"] *) {
+    background-color: var(--color-primary);
+  }
+  .group-data-\[state\=checked\]\/toggle-switch\:text-foreground:is(:where(.group\/toggle-switch)[data-state="checked"] *) {
+    color: var(--color-foreground);
+  }
   .placeholder\:text-muted-foreground::placeholder {
     color: var(--color-muted-foreground);
   }
@@ -1746,6 +1934,9 @@
     .hover\:z-10:hover {
       z-index: 10;
     }
+    .hover\:border-primary:hover {
+      border-color: var(--color-primary);
+    }
     .hover\:bg-accent:hover {
       background-color: var(--color-accent);
     }
@@ -1760,6 +1951,9 @@
     .hover\:bg-background:hover {
       background-color: var(--color-background);
     }
+    .hover\:bg-muted:hover {
+      background-color: var(--color-muted);
+    }
     .hover\:text-accent-foreground:hover {
       color: var(--color-accent-foreground);
     }
@@ -1774,6 +1968,14 @@
     .hover\:text-foreground:hover {
       color: var(--color-foreground);
     }
+    .hover\:text-foreground\/60:hover {
+      color: var(--color-foreground);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:text-foreground\/60:hover {
+        color: color-mix(in oklab, var(--color-foreground) 60%, transparent);
+      }
+    }
     .hover\:text-primary:hover {
       color: var(--color-primary);
     }
@@ -1812,6 +2014,10 @@
       --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
     }
   }
+  .focus-visible\:outline-none:focus-visible {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
   .active\:cursor-grabbing:active {
     cursor: grabbing;
   }
@@ -1939,6 +2145,9 @@
     .sm\:hidden {
       display: none;
     }
+    .sm\:inline {
+      display: inline;
+    }
     .sm\:w-1\/3 {
       width: calc(1 / 3 * 100%);
     }
@@ -1962,6 +2171,18 @@
     .md\:hidden {
       display: none;
     }
+    .md\:-translate-x-5 {
+      --tw-translate-x: calc(var(--spacing) * -5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+    .md\:translate-x-5 {
+      --tw-translate-x: calc(var(--spacing) * 5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+    .md\:translate-y-5 {
+      --tw-translate-y: calc(var(--spacing) * 5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
   }
   @media (width >= 64rem) {
     .lg\:hidden {
@@ -2642,6 +2863,21 @@
     transform: translateY(-100%);
   }
 }
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-scale-x {
   syntax: "*";
   inherits: false;
@@ -2697,6 +2933,48 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-leading {
   syntax: "*";
   inherits: false;
@@ -2844,21 +3122,6 @@
   initial-value: "";
   inherits: false;
 }
-@property --tw-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -2930,6 +3193,9 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
@@ -2942,6 +3208,15 @@
       --tw-space-x-reverse: 0;
       --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-ordinal: initial;
@@ -2976,9 +3251,6 @@
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
       --tw-animation-delay: 0s;
       --tw-animation-direction: normal;
       --tw-animation-duration: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forthtilliath/forth-ui",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -14,6 +14,9 @@
   "homepage": "https://github.com/Forthtilliath/forthtilliath-packages/tree/main/packages/react/forth-ui#readme",
   "bugs": "https://github.com/Forthtilliath/forthtilliath-packages/issues",
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-accordion": "^1.2.20",
     "@radix-ui/react-radio-group": "^1.4.7",
     "@radix-ui/react-slot": "^1.3.3",
@@ -24,10 +27,11 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "shiki": "^4.4.3",
-    "@forthtilliath/shadcn-ui": "0.2.0",
-    "@forthtilliath/react-kit": "0.3.0"
+    "@forthtilliath/react-kit": "0.4.0",
+    "@forthtilliath/shadcn-ui": "0.2.0"
   },
   "devDependencies": {
+    "@size-limit/file": "^11.2.0",
     "@tailwindcss/postcss": "4.1.12",
     "@turbo/gen": "^2.10.9",
     "@types/node": "^26.2.0",
@@ -36,11 +40,12 @@
     "@types/react-dom": "^19.2.4",
     "concurrently": "^10.0.4",
     "eslint": "10.7.0",
+    "size-limit": "^11.2.0",
     "tailwindcss": "4.1.12",
     "typescript": "^5.9.3",
     "@forthtilliath/ts-types": "0.2.0",
-    "@forthtilliath/typescript-config": "0.0.0",
-    "@forthtilliath/eslint-config": "0.4.2"
+    "@forthtilliath/typescript-config": "0.1.1",
+    "@forthtilliath/eslint-config": "0.7.0"
   },
   "files": [
     "dist"
@@ -49,6 +54,18 @@
     "./components/*": "./dist/components/*/index.js",
     "./styles/globals.css": "./dist/globals.css"
   },
+  "size-limit": [
+    {
+      "name": "components (all, brotli)",
+      "path": "dist/**/*.js",
+      "limit": "70 KB"
+    },
+    {
+      "name": "globals.css (brotli)",
+      "path": "dist/globals.css",
+      "limit": "20 KB"
+    }
+  ],
   "scripts": {
     "lint": "eslint . --max-warnings 0",
     "check-types": "tsc --noEmit",
@@ -58,6 +75,7 @@
     "dev:tw": "pnpm run build:tw --watch",
     "build": "pnpm run clean && pnpm run build:ts && pnpm run build:tw",
     "build:ts": "tsc",
-    "build:tw": "npx @tailwindcss/cli -i ./src/styles/globals.css -o ./dist/globals.css"
+    "build:tw": "npx @tailwindcss/cli -i ./src/styles/globals.css -o ./dist/globals.css",
+    "size": "size-limit"
   }
 }