frutjam 1.0.0-beta.0 → 1.0.0

package/src/components/divider.css

@@ -1,220 +0,0 @@
-@utility divider-x {
-    &:not(:empty) {
-        @apply gap-x-2;
-    }
-    &::before, &::after {
-        @apply w-full h-[0.5px];
-    }
-}
-
-@utility divider-x-solid {
-    @apply divider-x;
-    &::before, &::after {
-        background: light-dark(
-            var(--divider-700),
-            var(--divider-900)
-        );
-    }
-    @media print {
-        &::before,
-        &::after {
-            border-top: 0.5px solid var(--divider-700);
-        }
-    }
-}
-
-@utility divider-x-dashed {
-    @apply divider-x;
-    &::before, &::after {
-        background: repeating-linear-gradient(
-            to right,
-            var(--divider-700) 0,
-            var(--divider-700) 5px,
-            transparent 5px,
-            transparent 10px
-        );
-    }
-    @media print {
-        &::before,
-        &::after {
-            border-top: 0.5px dashed var(--divider-700);
-        }
-    }
-}
-/* Container with two sections and a vertical divider in between.
-
-✅ This will work correctly when:
-    - You set a fixed height on `.container` (e.g. height: 200px), OR
-    - You set `height: 100%` on `.container` **AND**
-    all parent elements (including html and body) also have `height: 100%`
-
-⚠️ If you use `height: 100%` but the parent elements do not have defined height,
-    the vertical divider will collapse because 100% of "auto" is meaningless in CSS.
-
-💡 Best practice:
-    Use fixed height for predictable layouts.
-    Use 100% height only if you're sure the full layout chain supports it. */
-
-
-@utility divider-y {
-    @apply flex-col;
-    &:not(:empty) {
-        @apply gap-y-2;
-    }
-    &::before, &::after {
-        @apply w-[0.5px] flex-1;
-    }
-}
-
-@utility divider-y-solid {
-    @apply divider-y;
-    &::before, &::after {
-        background: light-dark(
-            var(--divider-700),
-            var(--divider-800)
-        );
-    }
-    @media print {
-        &::before,
-        &::after {
-            border-left: 0.5px solid var(--divider-700);
-        }
-    }
-}
-
-@utility divider-y-dashed {
-    @apply divider-y;
-    &::before, &::after {
-        background: repeating-linear-gradient(
-            to bottom,
-            var(--divider-700) 0,
-            var(--divider-700) 5px,
-            transparent 5px,
-            transparent 10px
-        );
-    }
-    @media print {
-        &::before,
-        &::after {
-            border-left: 0.5px dashed var(--divider-700);
-        }
-    }
-}
-
-@utility divider {
-    @apply divider-x-solid flex items-center justify-center h-full;
-
-    &::before, &::after {
-        @apply content-[''];
-    }
-
-    --divider-50: var(--default-50);
-    --divider-100: var(--default-100);
-    --divider-200: var(--default-200);
-    --divider-300: var(--default-300);
-    --divider-400: var(--default-400);
-    --divider-500: var(--default-500);
-    --divider-600: var(--default-600);
-    --divider-700: light-dark(var(--default-200),var(--default-600));
-    --divider-800: var(--default-800);
-    --divider-900: var(--default-900);
-    --divider-950: var(--default-950);
-}
-  
-  @utility divider-primary {
-    --divider-50: var(--primary-50);
-    --divider-100: var(--primary-100);
-    --divider-200: var(--primary-200);
-    --divider-300: var(--primary-300);
-    --divider-400: var(--primary-400);
-    --divider-500: var(--primary-500);
-    --divider-600: var(--primary-600);
-    --divider-700: var(--primary-700);
-    --divider-800: var(--primary-800);
-    --divider-900: var(--primary-900);
-    --divider-950: var(--primary-950);
-  }
-  
-  @utility divider-secondary {
-    --divider-50: var(--secondary-50);
-    --divider-100: var(--secondary-100);
-    --divider-200: var(--secondary-200);
-    --divider-300: var(--secondary-300);
-    --divider-400: var(--secondary-400);
-    --divider-500: var(--secondary-500);
-    --divider-600: var(--secondary-600);
-    --divider-700: var(--secondary-700);
-    --divider-800: var(--secondary-800);
-    --divider-900: var(--secondary-900);
-    --divider-950: var(--secondary-950);
-  }
-  
-  @utility divider-accent {
-    --divider-50: var(--accent-50);
-    --divider-100: var(--accent-100);
-    --divider-200: var(--accent-200);
-    --divider-300: var(--accent-300);
-    --divider-400: var(--accent-400);
-    --divider-500: var(--accent-500);
-    --divider-600: var(--accent-600);
-    --divider-700: var(--accent-700);
-    --divider-800: var(--accent-800);
-    --divider-900: var(--accent-900);
-    --divider-950: var(--accent-950);
-  }
-  
-  @utility divider-info {
-    --divider-50: var(--info-50);
-    --divider-100: var(--info-100);
-    --divider-200: var(--info-200);
-    --divider-300: var(--info-300);
-    --divider-400: var(--info-400);
-    --divider-500: var(--info-500);
-    --divider-600: var(--info-600);
-    --divider-700: var(--info-700);
-    --divider-800: var(--info-800);
-    --divider-900: var(--info-900);
-    --divider-950: var(--info-950);
-  }
-  
-  @utility divider-success {
-    --divider-50: var(--success-50);
-    --divider-100: var(--success-100);
-    --divider-200: var(--success-200);
-    --divider-300: var(--success-300);
-    --divider-400: var(--success-400);
-    --divider-500: var(--success-500);
-    --divider-600: var(--success-600);
-    --divider-700: var(--success-700);
-    --divider-800: var(--success-800);
-    --divider-900: var(--success-900);
-    --divider-950: var(--success-950);
-  }
-  
-  @utility divider-warning {
-    --divider-50: var(--warning-50);
-    --divider-100: var(--warning-100);
-    --divider-200: var(--warning-200);
-    --divider-300: var(--warning-300);
-    --divider-400: var(--warning-400);
-    --divider-500: var(--warning-500);
-    --divider-600: var(--warning-600);
-    --divider-700: var(--warning-700);
-    --divider-800: var(--warning-800);
-    --divider-900: var(--warning-900);
-    --divider-950: var(--warning-950);
-  }
-  
-  @utility divider-error {
-    --divider-50: var(--error-50);
-    --divider-100: var(--error-100);
-    --divider-200: var(--error-200);
-    --divider-300: var(--error-300);
-    --divider-400: var(--error-400);
-    --divider-500: var(--error-500);
-    --divider-600: var(--error-600);
-    --divider-700: var(--error-700);
-    --divider-800: var(--error-800);
-    --divider-900: var(--error-900);
-    --divider-950: var(--error-950);
-  }

package/src/components/drawer.css

@@ -1,98 +0,0 @@
-@import "../theme/jams/base.css";
-@utility drawer {
-  @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;
-
-    .drawer-body {
-      translate: 0 0;
-      scale: 1;
-      opacity: 1;
-    }
-  }
-}
-
-@utility drawer-backdrop {
-  @apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1;
-  button {
-    @apply cursor-pointer;
-  }
-}
-
-@utility drawer-body {
-  @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 {
-  @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;
-  }
-}
-
-@utility drawer-bottom {
-  @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;
-  }
-}
-
-@utility drawer-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;
-  }
-}
-
-@utility drawer-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;
-  }
-}

package/src/components/dropdown.css

@@ -1,122 +0,0 @@
-@import "../theme/jams/base.css";
-@import "../theme/placement.css";
-
-@utility dropdown {
-    @apply relative inline-block;
-    position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
-  
-    & > *:not(summary):focus {
-      @apply outline-hidden;
-    }
-    .dropdown-body {
-      @apply absolute;
-    }
-    &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) {
-      .dropdown-body {
-        @apply hidden origin-top opacity-0 scale-9;
-      }
-    }
-  
-    &[popover],
-    .dropdown-body {
-      @apply starting:[scale:95%] starting:[opacity:0] z-999 w-max transition-discrete duration-200 transition-[opacity,_scale,_display] ease-in-out;
-      /* animation: dropdown 0.2s; */
-    }
-  
-    &.dropdown-open,
-    &:not(.dropdown-hover):focus,
-    &:focus-within {
-      > [tabindex]:first-child {
-        @apply pointer-events-none;
-      }
-      .dropdown-body {
-        @apply opacity-100;
-      }
-    }
-  
-    &.dropdown-hover:hover {
-      .dropdown-body {
-        @apply opacity-100 scale-100;
-      }
-    }
-  
-    &:is(details) {
-      summary {
-        &::-webkit-details-marker {
-          @apply hidden;
-        }
-      }
-    }
-  
-    &.dropdown-open,
-    &:focus,
-    &:focus-within {
-      .dropdown-body {
-        @apply scale-100;
-      }
-    }
-  
-    /* experimental */
-    &:where([popover]) {
-      background: #0000;
-    }
-    &[popover] {
-      @apply fixed text-inherit;
-  
-      @supports not (position-area: bottom) {
-        @apply m-auto;
-  
-        &.dropdown-open:not(:popover-open) {
-          @apply hidden origin-top opacity-0 scale-95;
-        }
-  
-        &::backdrop {
-          background-color: color-mix(in oklab, #000 30%, #0000);
-        }
-      }
-  
-      &:not(.dropdown-open, :popover-open) {
-        @apply hidden origin-top opacity-0 scale-95;
-      }
-    }  
-}
-
-@utility dropdown-body {
-  @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 */
-/* Positioning Classes */
-.dropdown-x-start {
-  left: 0; /* Aligns dropdown to start horizontally */
-}
-
-.dropdown-x-end {
-  right: 0; /* Aligns dropdown to end horizontally */
-}
-
-.dropdown-y-top {
-  bottom: calc(100% + 10px); /* Positions above the button */
-}
-
-.dropdown-y-bottom {
-  top: calc(100% + 10px); /* Positions below the button */
-}

package/src/components/header.css

@@ -1,22 +0,0 @@
-@import "./container.css";
-
-@utility header {
-    background-color: light-dark(var(--core-0), var(--core-1000));
-    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-body {
-    @apply gap-3 py-2 container;
-    display: flex;
-    justify-content: space-between;
-    align-items:center;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-@utility header-sticky {
-    position: sticky;
-}