frutjam 0.8.1-beta.3 → 0.8.1-beta.5

package/README.md

@@ -0,0 +1,69 @@
+[![Total Downloads](https://img.shields.io/npm/dt/frutjam.svg)](https://www.npmjs.com/package/frutjam)
+[![Latest Release](https://img.shields.io/npm/v/frutjam.svg)](https://github.com/nezanuha/frutjam/releases)
+[![License](https://img.shields.io/npm/l/frutjam.svg)](https://github.com/nezanuha/frutjam/blob/master/LICENSE)
+[![Secured](https://img.shields.io/badge/Security-Passed-green)](https://snyk.io/test/github/nezanuha/frutjam)
+
+---
+
+## ⚡ Frutjam — Tailwind CSS UI Library for Fast Development
+
+**Frutjam** is a lightweight UI library built on top of **Tailwind CSS**, designed to help developers build accessible, SEO-friendly, and W3C-compliant interfaces—fast.
+
+With a wide selection of prebuilt components and themes, Frutjam makes it easy to hit the ground running or fully customize your design system.
+
+---
+
+### ✨ Features
+
+* 🧱 **Prebuilt UI Components** — Plug-and-play components to save time
+* 🎨 **Customizable Themes** — Use built-in themes or create your own
+* ♿ **Accessibility-First** — Follows accessibility best practices
+* 🔍 **SEO-Friendly** — Semantic markup optimized for search engines
+* ✅ **W3C Standards** — Clean, valid HTML structure
+* ⚙️ **Built for Tailwind CSS** — Seamless integration with your Tailwind setup
+
+---
+
+### 🚀 Installation
+
+```bash
+npm install frutjam
+```
+
+---
+
+### 📦 Usage
+
+Import Tailwind CSS and Frutjam into your main stylesheet:
+
+```css
+@import "tailwindcss";
+@import "frutjam";
+```
+
+That’s it — you're ready to build with Frutjam components!
+
+---
+
+### 📚 Documentation
+
+For examples, theming, and full usage guides, visit:
+👉 **[frutjam.com](https://frutjam.com)**
+
+---
+
+## 🤝 Contributing
+
+Contributions are welcome! If you find a bug, have a feature request, or want to help improve the library:
+
+1. Fork the repo
+2. Create a new branch
+3. Submit a pull request
+
+Please check the [contributing guidelines](.github/CONTRIBUTING.md) before starting.
+
+---
+
+## 📄 License
+
+This project is licensed under the [MIT License](LICENSE).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frutjam",
-  "version": "0.8.1-beta.3",
+  "version": "0.8.1-beta.5",
   "description": "A utility-first CSS framework UI Library",
   "main": "./dist/frutjam.css",
   "browser": "dist/frutjam.css",
@@ -37,8 +37,8 @@
     "url": "https://github.com/nezanuha/frutjam/issues"
   },
   "dependencies": {
-    "@tailwindcss/postcss": "^4.1.6",
-    "tailwindcss": "^4.1.6"
+    "@tailwindcss/postcss": "^4.1.7",
+    "tailwindcss": "^4.1.7"
   },
   "devDependencies": {
     "css-loader": "^7.1.2",

package/src/components/accordion.css

@@ -1,33 +1,39 @@
 @import '../theme/jams/base.css';
 @utility accordion {
-    @layer components {
-        @apply grid divide-y divide-info-100 border border-info-100 cursor-pointer rounded-md;
+    @apply divide-y divide-core-200 dark:divide-core-900;
 
-        &>details {
-            @apply text-pretty;
-            
-            &>*:not(summary){
-                @apply px-4 pb-4;
-            }
-            &>summary::marker{
-                @apply content-none;
-            }
-            &>summary{
-                @apply flex gap-4 items-center justify-between p-4 font-medium;
-                &::after {
-                    @apply content-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0icmdiYSg1Myw1Myw1MywxKSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0xOS41IDguMjUtNy41IDcuNS03LjUtNy41Ii8+Cjwvc3ZnPg==')];
-                    @apply inline-block text-inherit;
-                }
+    display: grid;
+    border: 1px solid light-dark(
+        var(--core-200),
+        var(--core-900)
+    );
+    border-radius: var(--radius-accordion);
+    cursor: pointer;
+
+    &>details {
+        @apply text-pretty;
+        
+        &>*:not(summary){
+            @apply px-4 pb-4;
+        }
+        &>summary::marker{
+            @apply content-none;
+        }
+        &>summary{
+            @apply flex gap-4 items-center justify-between p-4 font-medium;
+            &::after {
+                @apply content-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0icmdiYSg1Myw1Myw1MywxKSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0xOS41IDguMjUtNy41IDcuNS03LjUtNy41Ii8+Cjwvc3ZnPg==')];
+                @apply inline-block text-inherit;
             }
         }
+    }
 
-        &>details[open] {
+    &>details[open] {
 
-            &>summary {
-                @apply pb-4;
-                &::after {
-                    @apply rotate-180 origin-center transition-transform duration-300;
-                }
+        &>summary {
+            @apply pb-4;
+            &::after {
+                @apply rotate-180 origin-center transition-transform duration-300;
             }
         }
     }

package/src/components/container.css

@@ -0,0 +1,52 @@
+@utility container {
+  margin-inline: auto;
+  padding-inline: 1rem;
+  @media (width >= 640px) { /* sm */
+    padding-inline: 2rem;
+  }
+  @media (width >= 1024px) { /* lg */
+    padding-inline: 4rem;
+  }
+}
+
+@utility container-xs {
+  max-width: 320px;
+  margin-inline: auto;
+  padding-inline: 1rem;
+}
+@utility container-sm {
+  max-width: 640px;
+  margin-inline: auto;
+  padding-inline: 1rem;
+}
+@utility container-md {
+  max-width: 768px;
+  margin-inline: auto;
+  padding-inline: 1rem;
+}
+
+@utility container-lg {
+  max-width: 1024px;
+  margin-inline: auto;
+  padding-inline: 1rem;
+}
+
+@utility container-xl {
+  max-width: 1280px;
+  margin-inline: auto;
+  padding-inline: 1rem;
+}
+
+@utility container-2xl {
+  max-width: 1536px;
+  margin-inline: auto;
+  padding-inline: 1rem;
+}
+
+@utility container-full {
+  width: 100vw;
+  max-width: 100vw;
+  margin-inline: auto;
+  padding-inline: 1rem;
+  box-sizing: border-box;
+}

package/src/components/drawer.css

@@ -1,93 +1,98 @@
 @import "../theme/jams/base.css";
 @utility drawer {
-  @layer components {
-    @apply pointer-events-none invisible fixed inset-0 m-0 grid h-full max-h-none w-full max-w-none place-items-start bg-transparent p-0 text-inherit z-999 overflow-hidden overscroll-contain;
-
-    &:not(drawer:not([open]):not(.drawer-open)),
-    &::backdrop {
-      @apply starting:invisible;
-      background: light-dark(
-        color-mix(in oklab,var(--color-default-100)30%,var(--color-default-900)20%),
-        color-mix(in oklab,var(--color-default-800)50%,transparent)
-      );
-    }
+  @apply pointer-events-none invisible fixed inset-0 m-0 grid h-full max-h-none w-full max-w-none place-items-start bg-transparent p-0 text-inherit z-999 overflow-hidden overscroll-contain;
+
+  &:not(drawer:not([open]):not(.drawer-open)),
+  &::backdrop {
+    @apply starting:invisible;
+    background: light-dark(
+      color-mix(in oklab,var(--color-default-100)30%,var(--color-default-900)20%),
+      color-mix(in oklab,var(--color-default-800)50%,transparent)
+    );
+  }
 
-    &[open], &.drawer-open{
-      @apply pointer-events-auto visible starting:invisible;
+  &[open], &.drawer-open{
+    @apply pointer-events-auto visible starting:invisible;
 
-      .drawer-body {
-        translate: 0 0;
-        scale: 1;
-        opacity: 1;
-      }
+    .drawer-body {
+      translate: 0 0;
+      scale: 1;
+      opacity: 1;
     }
   }
 }
 
 @utility drawer-backdrop {
-  @layer components {
-    @apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1;
-    button {
-      @apply cursor-pointer;
-    }
+  @apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1;
+  button {
+    @apply cursor-pointer;
   }
 }
 
 @utility drawer-body {
-  @layer components {
-    @apply bg-core-50 text-core-950 rounded-none shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 h-screen max-h-none w-11/12  w-auto max-w-none p-1 transition-all duration-200 overflow-y-auto overscroll-contain;
-    translate: -100% 0;
-    scale: 1;
-  }
+  @apply rounded-none forced-colors:outline col-start-1 row-start-1 h-screen max-h-none w-11/12  w-auto max-w-none p-1 overflow-y-auto overscroll-contain;
+  translate: -100% 0;
+  scale: 1;
+
+  --tw-shadow-color: light-dark(
+    color-mix(in oklab,var(--core-300)50%,transparent),
+    color-mix(in oklab,var(--core-900)60%,transparent)
+  );
+
+  background: light-dark(
+    var(--core-50),
+    var(--core-950)
+  );
+  color: light-dark(
+    var(--default-800),
+    var(--default-50)
+  );
+  border: 1px solid light-dark(
+    var(--core-300),
+    var(--core-900)
+  );
+  transition: translate 0.3s ease-out, visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out;
 }
 
 
 @utility drawer-top {
-  @layer components {
-    @apply place-items-start;
+  @apply place-items-start;
 
-    :where(.drawer-body) {
-      @apply h-auto w-full max-w-none rounded-none;
-      max-height: calc(100vh - 5em);
-      translate: 0 -100%;
-      scale: 1;
-    }
+  :where(.drawer-body) {
+    @apply h-auto w-full max-w-none rounded-none;
+    max-height: calc(100vh - 5em);
+    translate: 0 -100%;
+    scale: 1;
   }
 }
 
 @utility drawer-bottom {
-  @layer components {
-    @apply place-items-end;
+  @apply place-items-end;
 
-    :where(.drawer-body) {
-      @apply h-auto w-full max-w-none rounded-none;
-      max-height: calc(100vh - 5em);
-      translate: 0 100%;
-      scale: 1;
-    }
+  :where(.drawer-body) {
+    @apply h-auto w-full max-w-none rounded-none;
+    max-height: calc(100vh - 5em);
+    translate: 0 100%;
+    scale: 1;
   }
 }
 
 @utility drawer-start {
-  @layer components {
-    @apply place-items-start;
+  @apply place-items-start;
 
-    :where(.drawer-body) {
-      @apply h-screen max-h-none w-auto max-w-none rounded-none;
-      translate: -100% 0;
-      scale: 1;
-    }
+  :where(.drawer-body) {
+    @apply h-screen max-h-none w-auto max-w-none rounded-none;
+    translate: -100% 0;
+    scale: 1;
   }
 }
 
 @utility drawer-end {
-  @layer components {
-    @apply place-items-end;
+  @apply place-items-end;
 
-    :where(.drawer-body) {
-      @apply h-screen max-h-none w-auto max-w-none rounded-none;
-      translate: 100% 0;
-      scale: 1;
-    }
+  :where(.drawer-body) {
+    @apply h-screen max-h-none w-auto max-w-none rounded-none;
+    translate: 100% 0;
+    scale: 1;
   }
 }

package/src/components/dropdown.css

@@ -2,7 +2,6 @@
 @import "../theme/placement.css";
 
 @utility dropdown {
-  @layer components {
     @apply relative inline-block;
     position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
   
@@ -80,13 +79,28 @@
         @apply hidden origin-top opacity-0 scale-95;
       }
     }  
-  }
 }
 
 @utility dropdown-body {
-  @layer components {
-    @apply bg-core-50 text-core-950 rounded-[var(--radius-size)] border border-black/30 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen p-3 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
-  }
+  @apply shadow forced-colors:outline col-start-1 row-start-1 max-h-screen p-3 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
+  
+  --tw-shadow-color: light-dark(
+    color-mix(in oklab,var(--core-300)50%,transparent),
+    color-mix(in oklab,var(--core-900)60%,transparent)
+  );
+  border: 1px solid light-dark(
+      var(--core-200),
+      var(--core-900)
+  );
+  border-radius: var(--radius-dropdown);
+  background: light-dark(
+    var(--core-50),
+    var(--core-950)
+  );
+  color: light-dark(
+    var(--core-800),
+    var(--core-50)
+  );
 }
 
 /* placements */

package/src/components/header.css

@@ -0,0 +1,17 @@
+@utility header {
+    @apply gap-3 py-2;
+    display: flex;
+    justify-content: space-between;
+    align-items:center;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: light-dark(var(--core-50), var(--core-950));
+    color: light-dark(var(--core-900), var(--core-50));
+    border-bottom: 1px solid light-dark(var(--core-200), var(--core-800));
+    top: 0;
+    z-index: 999;
+}
+
+@utility header-sticky {
+    position: sticky;
+}

package/src/components/modal.css

@@ -37,8 +37,8 @@
     var(--core-950)
   );
   color: light-dark(
-    var(--default-800),
-    var(--default-50)
+    var(--core-800),
+    var(--core-50)
   );
   border: 1px solid light-dark(
     var(--core-300),

package/src/components/nav.css

@@ -1,27 +1,23 @@
 @utility nav-* {
-    @layer components {
-        &:is(.nav-list) {
-            @apply flex w-full gap-2;
-        }
-    }
+  width: 100%;
+  &:is(.nav-list) {
+      @apply gap-2;
+      display: flex;
+  }
 }
 
 /* placements */
 
 @utility nav-x-* {
-  @layer components {
-    @apply [justify-self:--value(--x-*)];
-    & > :where(.nav-list) {
-      @apply [justify-content:--value(--x-*)] items-center flex-row gap-x-2;
-    }
+  @apply [justify-self:--value(--x-*)];
+  & > :where(.nav-list) {
+    @apply [justify-content:--value(--x-*)] items-center flex-row gap-x-2;
   }
 }
 
 @utility nav-y-* {
-    @layer components {
-        @apply [justify-self:--value(--y-*)];
-        & > :where(.nav-list) {
-            @apply items-start flex-col gap-y-1;
-        }
-    }
+  @apply [justify-self:--value(--y-*)];
+  & > :where(.nav-list) {
+      @apply items-start flex-col gap-y-1 w-full;
+  }
 }

package/src/components/surface.css

@@ -0,0 +1,29 @@
+@utility surface {
+    background-color: light-dark(var(--core-50), var(--core-950));
+    color: light-dark(var(--core-900), var(--core-50));
+}
+
+@utility surface-1 {
+    background-color: light-dark(var(--core-100), var(--core-900));
+    color: light-dark(var(--core-800), var(--core-100));
+}
+
+@utility surface-2 {
+    background-color: light-dark(var(--core-200), var(--core-800));
+    color: light-dark(var(--core-700), var(--core-200));
+}
+
+@utility surface-3 {
+    background-color: light-dark(var(--core-300), var(--core-700));
+    color: light-dark(var(--core-600), var(--core-300));
+}
+
+@utility surface-4 {
+    background-color: light-dark(var(--core-400), var(--core-600));
+    color: light-dark(var(--core-500), var(--core-400));
+}
+
+@utility surface-5 {
+    background-color: light-dark(var(--core-500), var(--core-500));
+    color: light-dark(var(--core-400), var(--core-500));
+}

package/src/main.css

@@ -1,3 +1,5 @@
+@import "./components/header.css";
+@import "./components/container.css";
 @import "./components/button.css";
 @import "./components/input.css";
 @import "./components/modal.css";

package/src/theme/jams/base.css

@@ -2,8 +2,8 @@
 @import "./snowberry.css";
 @import "./darkberry.css";
 
-@custom-variant light (&:where([data-theme="light"], [data-theme="light"] *, [data-theme="snowberry"], [data-theme="snowberry"] *));
-@custom-variant dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *, [data-theme="darkberry"], [data-theme="darkberry"] *));
+@custom-variant light (&:where([data-theme="light"], [data-theme="light"] *, [data-theme="snowberry"], [data-theme="snowberry"] *),  @media (prefers-color-scheme: light));
+@custom-variant dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *, [data-theme="darkberry"], [data-theme="darkberry"] *),  @media (prefers-color-scheme: dark));
 
 :root {
     color-scheme: var(--color-scheme);

package/src/theme/jams/darkberry.css

@@ -5,6 +5,8 @@
     --radius-input: 0.5rem;
     --radius-checkbox: 0.375rem;
     --radius-modal: 1rem;
+    --radius-accordion: 0.5rem;
+    --radius-dropdown: 0.5rem;
 
     --core-50: oklch(.985 .001 106.423);
     --core-100: oklch(.97 .001 106.424);

package/src/theme/jams/snowberry.css

@@ -11,6 +11,8 @@
     --radius-input: 0.5rem;
     --radius-checkbox: 0.375rem;
     --radius-modal: 1rem;
+    --radius-accordion: 0.5rem;
+    --radius-dropdown: 0.5rem;
 
     --core-50: oklch(.985 .001 106.423);
     --core-100: oklch(.97 .001 106.424);

package/src/utilities/headings.css

@@ -1,12 +1,10 @@
 @utility heading-* {
-    @layer utilities {
-        @apply font-bold text-balance;
-        color:light-dark(
-            var(--core-950)
-            var(--core-50)
-        );
-        font-size: --value(--text-*);
+    @apply font-bold text-balance;
+    color:light-dark(
+        var(--core-950)
+        var(--core-50)
+    );
+    font-size: --value(--text-*);
 
-        /* todo: make it heading-md instead of heading-base */
-    }
+    /* todo: make it heading-md instead of heading-base */
 }