frutjam 1.4.0-beta.0 → 2.0.0-beta.0

package/src/components/drawer.css

@@ -1,158 +0,0 @@
-@import "../theme/jams/base.css";
-@utility drawer {
-  pointer-events: none;
-  visibility: hidden;
-  position: fixed;
-  inset: 0rem;
-  margin: 0rem;
-  padding: 0rem;
-  display: grid;
-  width: 100%;
-  height: 100%;
-  max-width: none;
-  max-height: none;
-  place-items: start;
-  background-color: light-dark(
-        var(--core-0),
-        var(--core-1000)
-  );
-  color: inherit;
-  z-index: 999;
-  overflow: hidden;
-  overscroll-behavior: contain;
-
-  &:not(drawer:not([open]):not(.drawer-open)),
-  &::backdrop {
-    @starting-style {
-      visibility: hidden;
-    }
-    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{
-    @starting-style {
-      visibility: hidden;
-    }
-    pointer-events: auto;
-    visibility: visible;
-
-    .drawer-body {
-      translate: 0 0;
-      scale: 1;
-      opacity: 1;
-    }
-  }
-}
-
-@utility drawer-backdrop {
-  display: grid;
-  grid-column-start: 1;
-  grid-row-start: 1;
-  align-self: stretch;
-  justify-self: stretch;
-  color: transparent;
-  z-index: -1;
-
-  button {
-    cursor: pointer;
-  }
-}
-
-@utility drawer-body {
-  border-radius: 0;
-  translate: -100% 0;
-  scale: 1;
-  grid-column-start: 1;
-  grid-row-start: 1;
-  height: 100vh;
-  max-height: none;
-  width: calc(11/12 * 100%);
-  max-width: none;
-  padding: 0.25rem;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-
-  @media (forced-colors: active) {
-    outline-style: solid;
-    outline-width: 1px;
-  }
-
-  --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 {
-  place-items: start;
-
-  :where(.drawer-body) {
-    height: auto;
-    width: 100%;
-    max-width: none;
-    border-radius: 0;
-    max-height: calc(100vh - 5em);
-    translate: 0 -100%;
-    scale: 1;
-  }
-}
-
-@utility drawer-bottom {
-  place-items: end;
-
-  :where(.drawer-body) {
-    height: auto;
-    width: 100%;
-    max-width: none;
-    border-radius: 0;
-    max-height: calc(100vh - 5em);
-    translate: 0 100%;
-    scale: 1;
-  }
-}
-
-@utility drawer-start {
-  place-items: start;
-
-  :where(.drawer-body) {
-    height: 100vh;
-    width: auto;
-    max-height: none;
-    max-width: none;
-    border-radius: 0;
-    translate: -100% 0;
-    scale: 1;
-  }
-}
-
-@utility drawer-end {
-  place-items: end;
-
-  :where(.drawer-body) {
-    height: 100vh;
-    max-height: none;
-    max-width: none;
-    width: auto;
-    border-radius: 0;
-    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-color: #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-color: light-dark(
-    var(--core-0),
-    var(--core-1000)
-  );
-  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,26 +0,0 @@
-@import "../theme/jams/base.css";
-@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 container;
-
-    display: flex;
-    gap: 0.75rem;
-    padding-block: 0.5rem;
-    justify-content: space-between;
-    align-items:center;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-@utility header-sticky {
-    position: sticky;
-}

package/src/components/input.css

@@ -1,340 +0,0 @@
-@import "../theme/jams/base.css";
-
-@utility input-size {
-  padding-inline: var(--input-inline);
-  padding-block: var(--input-block);
-  font-size: var(--input-text-size);
-}
-
-@utility input-xs {
-  --input-inline: 0.475rem;
-  --input-block: 0.375rem;
-  --input-text-size: 0.75rem;
-  @apply input-size;
-}
-
-@utility input-sm {
-  --input-inline: 0.6rem;
-  --input-block: 0.5rem;
-  --input-text-size: 0.875rem;
-  @apply input-size;
-}
-
-@utility input-md {
-  --input-inline: 0.75rem;
-  --input-block: 0.625rem;
-  --input-text-size: 1rem;
-  @apply input-size;
-}
-
-@utility input-lg {
-  --input-inline:0.9rem;
-  --input-block: 0.75rem;
-  --input-text-size: 1rem;
-  @apply input-size;
-}
-
-@utility input-xl {
-  --input-inline: 1rem;
-  --input-block: 0.875rem;
-  --input-text-size: 1rem;
-  @apply input-size;
-}
-
-@utility input-2xl {
-  --input-inline: 1.25rem;
-  --input-block: 1rem;
-  --input-text-size: 1.025rem;
-  @apply input-size;
-}
-
-@utility input-dashed {
-  &:not(.input-active) {
-    outline-width: 1px;
-    outline-style: dashed;
-  }
-}
-
-
-@utility input-outline {
-  &:not(.input-active) {
-    outline-width: 1px;
-    outline-style: solid;
-  }
-}
-
-@utility input-soft {
-  &:not(.input-active) {
-    background-color: light-dark(
-      var(--input-100),
-      color-mix(in oklab,var(--input-900)10%,transparent)
-    );
-    color: light-dark(
-      var(--input-800),
-      var(--input-400)
-    );
-  }
-}
-
-@utility input-ghost {
-  &:not(.input-active) {
-    outline-color: transparent;
-  }
-}
-
-@utility input {
-  @apply input-md;
-
-  display: inline-flex;
-  align-self: flex-start;
-  flex-shrink: 0;
-  align-items: center;
-  appearance: none;
-  border-radius: var(--radius-input);
-  gap: 0.5rem;
-  vertical-align: middle;
-  white-space: nowrap;
-  position: relative;
-  font-weight: 500;
-  padding-inline: 0.625rem;
-  transition: border-color 300ms, outline-color 300ms;
-
-  &::placeholder {
-    font-size: var(--input-text-size);
-    color: light-dark(
-      var(--core-300),
-      var(--core-700)
-    );
-  }
-
-  &::file-selector-button{
-    font-size: var(--input-text-size);
-    margin-right: 1rem;
-    display: inline-flex;
-    transition: border-color 300ms, background-color 300ms, display 300ms;
-    align-items: center;
-    border-radius: calc(var(--radius-input)/2);
-    background-color: light-dark(
-      var(--input-100),
-      var(--input-800)
-    );
-    border: 1px solid light-dark(
-      var(--input-200),
-      var(--input-900)
-    );
-    font-weight: semibold;
-    color: light-dark(
-      var(--input-800),
-      var(--input-400)
-    );
-    padding-block: calc(var(--input-block)/6);
-    padding-inline: calc(var(--input-inline)/2);
-    
-    @media (hover: hover) {
-      &:hover{
-        color: light-dark(
-          var(--input-900),
-          var(--input-300)
-        );
-        background-color: light-dark(
-          var(--input-200),
-          var(--input-700)
-        );
-      }
-    }
-  }
-
-  &:not(
-    .input-primary,
-    .input-secondary,
-    .input-accent,
-    .input-info,
-    .input-success,
-    .input-warning,
-    .input-error
-  ){
-    outline: 1px solid light-dark(
-      var(--input-400),
-      var(--input-700)
-    );
-    border: 0.5px solid light-dark(
-      var(--input-50),
-      var(--input-900)
-    );
-  }
-
-  &:is(
-    .input-primary,
-    .input-secondary,
-    .input-accent,
-    .input-info,
-    .input-success,
-    .input-warning,
-    .input-error
-  ){
-    outline: 1px solid var(--input-700);
-    border: 0.5px solid light-dark(
-      var(--input-50),
-      var(--input-900)
-    );
-  }
-
-  &:is(:disabled, [disabled], .input-disabled) {
-    cursor: not-allowed;
-    color:var(--input-50);
-    background-color: light-dark(
-      var(--input-100),
-      var(--input-900)
-    );
-
-    &::placeholder {
-      color: var(--input-200);
-    }
-  }
-
-  &:focus, &:focus-within {
-    isolation: isolate;
-    &:is(
-      .input-primary,
-      .input-secondary,
-      .input-accent,
-      .input-info,
-      .input-success,
-      .input-warning,
-      .input-error
-    ){
-      outline-color: var(--input-800);
-      border-color: light-dark(
-        var(--input-200),
-        var(--input-950)
-      );
-    }
-
-    &:not(
-      .input-primary,
-      .input-secondary,
-      .input-accent,
-      .input-info,
-      .input-success,
-      .input-warning,
-      .input-error
-    ){
-      outline-color: var(--input-800);
-      border-color: light-dark(
-        var(--input-200),
-        var(--input-600)
-      );
-    }
-  }
-
-  --input-50: var(--default-50);
-  --input-100: var(--default-100);
-  --input-200: var(--default-200);
-  --input-300: var(--default-300);
-  --input-400: var(--default-400);
-  --input-500: var(--default-500);
-  --input-600: var(--default-600);
-  --input-700: var(--default-700);
-  --input-800: var(--default-800);
-  --input-900: var(--default-900);
-  --input-950: var(--default-950);
-}
-
-
-@utility input-primary {
-  --input-50: var(--primary-50);
-  --input-100: var(--primary-100);
-  --input-200: var(--primary-200);
-  --input-300: var(--primary-300);
-  --input-400: var(--primary-400);
-  --input-500: var(--primary-500);
-  --input-600: var(--primary-600);
-  --input-700: var(--primary-700);
-  --input-800: var(--primary-800);
-  --input-900: var(--primary-900);
-  --input-950: var(--primary-950);
-}
-
-@utility input-secondary {
-  --input-50: var(--secondary-50);
-  --input-100: var(--secondary-100);
-  --input-200: var(--secondary-200);
-  --input-300: var(--secondary-300);
-  --input-400: var(--secondary-400);
-  --input-500: var(--secondary-500);
-  --input-600: var(--secondary-600);
-  --input-700: var(--secondary-700);
-  --input-800: var(--secondary-800);
-  --input-900: var(--secondary-900);
-  --input-950: var(--secondary-950);
-}
-
-@utility input-accent {
-  --input-50: var(--accent-50);
-  --input-100: var(--accent-100);
-  --input-200: var(--accent-200);
-  --input-300: var(--accent-300);
-  --input-400: var(--accent-400);
-  --input-500: var(--accent-500);
-  --input-600: var(--accent-600);
-  --input-700: var(--accent-700);
-  --input-800: var(--accent-800);
-  --input-900: var(--accent-900);
-  --input-950: var(--accent-950);
-}
-
-@utility input-info {
-  --input-50: var(--info-50);
-  --input-100: var(--info-100);
-  --input-200: var(--info-200);
-  --input-300: var(--info-300);
-  --input-400: var(--info-400);
-  --input-500: var(--info-500);
-  --input-600: var(--info-600);
-  --input-700: var(--info-700);
-  --input-800: var(--info-800);
-  --input-900: var(--info-900);
-  --input-950: var(--info-950);
-}
-
-@utility input-success {
-  --input-50: var(--success-50);
-  --input-100: var(--success-100);
-  --input-200: var(--success-200);
-  --input-300: var(--success-300);
-  --input-400: var(--success-400);
-  --input-500: var(--success-500);
-  --input-600: var(--success-600);
-  --input-700: var(--success-700);
-  --input-800: var(--success-800);
-  --input-900: var(--success-900);
-  --input-950: var(--success-950);
-}
-
-@utility input-warning {
-  --input-50: var(--warning-50);
-  --input-100: var(--warning-100);
-  --input-200: var(--warning-200);
-  --input-300: var(--warning-300);
-  --input-400: var(--warning-400);
-  --input-500: var(--warning-500);
-  --input-600: var(--warning-600);
-  --input-700: var(--warning-700);
-  --input-800: var(--warning-800);
-  --input-900: var(--warning-900);
-  --input-950: var(--warning-950);
-}
-
-@utility input-error {
-  --input-50: var(--error-50);
-  --input-100: var(--error-100);
-  --input-200: var(--error-200);
-  --input-300: var(--error-300);
-  --input-400: var(--error-400);
-  --input-500: var(--error-500);
-  --input-600: var(--error-600);
-  --input-700: var(--error-700);
-  --input-800: var(--error-800);
-  --input-900: var(--error-900);
-  --input-950: var(--error-950);
-}