frutjam 1.0.0-beta.0 → 1.0.0

package/src/components/input.css

@@ -1,283 +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) {
-    @apply outline-dashed;
-  }
-}
-
-
-@utility input-outline {
-  &:not(.input-active) {
-    @apply outline outline-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) {
-    @apply outline-transparent;
-  }
-}
-
-@utility input {
-  @apply input-md transition duration-300 px-2.5 font-medium relative inline-flex self-start
-  shrink-0 appearance-none items-center gap-2 align-middle whitespace-nowrap;
-
-  border-radius: var(--radius-input);
-
-  &::placeholder {
-    @apply text-sm;
-    color: light-dark(
-      var(--core-300),
-      var(--core-800)
-    );
-  }
-
-  &::file-selector-button{
-    @apply mr-4 inline-flex items-center transition duration-300 text-sm;
-    border-radius: calc(var(--radius-input)/2);
-    background: 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: 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-300),
-      var(--input-800)
-    );
-  }
-
-  &:is(
-    .input-primary,
-    .input-secondary,
-    .input-accent,
-    .input-info,
-    .input-success,
-    .input-warning,
-    .input-error
-  ){
-    outline: 1px solid light-dark(
-      var(--input-700),
-      var(--input-800)
-    );
-  }
-
-  &:is(:disabled, [disabled], .input-disabled) {
-    @apply cursor-not-allowed placeholder:text-[var(--input-200)];
-    color:var(--input-50);
-    background-color: light-dark(
-      var(--input-100),
-      var(--input-900)
-    );
-  }
-
-  &:focus, &:focus-within {
-    @apply outline-[var(--input-800)] ring-2 ring-[var(--input-200)] isolate;
-  }
-
-  --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);
-}

package/src/components/modal.css

@@ -1,68 +0,0 @@
-@import "../theme/jams/base.css";
-@import "../theme/placement.css";
-@import "../theme/animation/slide.css";
-
-@utility modal{
-  @apply pointer-events-none invisible fixed inset-0 m-0 grid h-full max-h-none w-full max-w-none items-center justify-items-center bg-transparent p-3 text-inherit z-999 overflow-hidden overscroll-contain;
-  &:not(modal:not([open]):not(.modal-open)),
-  &::backdrop {
-    @apply opacity-100 starting:invisible starting:opacity-0;
-    background: light-dark(#00000026, #000000ba);
-  }
-  &[open], &.modal-open {
-    @apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
-    .modal-body {
-      translate: 0 0;
-      scale: 1;
-      opacity: 1;
-    }
-  }
-}
-
-@utility modal-backdrop {
-  @apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1 bg-transparent;
-  button {
-    @apply cursor-pointer;
-  }
-}
-
-@utility modal-body {
-  @apply rounded-[var(--radius-modal)] shadow-sm forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 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)
-  );
-  background: light-dark(
-    var(--core-50),
-    var(--core-950)
-  );
-  color: light-dark(
-    var(--core-800),
-    var(--core-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;
-}
-
-
-
-/* placements */
-@utility modal-x-* {
-  @apply [justify-items:--value(--x-*)];
-}
-
-@utility modal-y-* {
-  @apply [align-items:--value(--y-*)];
-}
-
-/* animation */
-
-@utility modal-slide-* {
-  :where(.modal-body) {
-    @apply [translate:--value(--slide-*)];
-    scale: 1;
-  }
-}

package/src/components/nav.css

@@ -1,35 +0,0 @@
-/* use for breadcrums and menu */
-@import "../theme/placement.css";
-
-@utility nav-x-* {
-  justify-self: --value(--x-*);
-  & > :where(.nav-list) {
-    display: flex;
-    justify-content:--value(--x-*);
-    align-items: center;
-    flex-direction: row;
-    @apply gap-x-2;
-  }
-}
-
-@utility nav {
-  @apply nav-x-start;
-}
-
-@utility nav-y-* {
-  @apply gap-y-3;
-  display:flex;
-  flex-direction: column;
-  justify-self:--value(--y-*);
-  width: 100%;
-  & > :where(.nav-list) {
-      @apply gap-y-1;
-      display: flex;
-      align-items: start;
-      flex-direction: column;
-      width: 100%;
-      & > :where(li) {
-        width: 100%;
-      }
-  }
-}

package/src/components/popover.css

@@ -1,99 +0,0 @@
-@import "../theme/jams/base.css";
-@utility popover {
-  @layer components {
-    @apply pointer-events-none invisible fixed inset-0 m-0 grid h-full max-h-none w-full max-w-none items-center justify-items-center bg-transparent p-0 text-inherit z-999 overflow-hidden overscroll-contain;
-
-    &:not(popover:not([popover]:popover-open)),
-    &::backdrop {
-      @apply opacity-100 starting:invisible starting:opacity-0 bg-default-600;
-    }
-
-    &[popover]:popover-open {
-      @apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
-
-      .popover-body {
-        translate: 0 0;
-        scale: 1;
-        opacity: 1;
-      }
-    }
-  }
-}
-
-@utility popover-backdrop {
-  @layer components {
-    @apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1;
-    button {
-      @apply cursor-pointer;
-    }
-  }
-}
-
-@utility popover-body {
-  @layer components {
-    @apply bg-core-50 text-core-950 rounded-3xl border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
-  }
-}
-
-@utility popover-top {
-  @layer components {
-    @apply place-items-start;
-
-    :where(.popover-body) {
-      @apply h-auto w-full max-w-none rounded-none;
-      max-height: calc(100vh - 5em);
-      translate: 0 -100%;
-      scale: 1;
-    }
-  }
-}
-
-@utility popover-middle {
-  @layer components {
-    @apply place-items-center;
-
-    :where(.popover-body) {
-      @apply h-auto w-11/12 max-w-[32rem];
-      max-height: calc(100vh - 5em);
-      translate: 0 2%;
-      scale: 98%;
-    }
-  }
-}
-
-@utility popover-bottom {
-  @layer components {
-    @apply place-items-end;
-
-    :where(.popover-body) {
-      @apply h-auto w-full max-w-none rounded-none;
-      max-height: calc(100vh - 5em);
-      translate: 0 100%;
-      scale: 1;
-    }
-  }
-}
-
-@utility popover-start {
-  @layer components {
-    @apply place-items-start;
-
-    :where(.popover-body) {
-      @apply h-screen max-h-none w-auto max-w-none rounded-none;
-      translate: -100% 0;
-      scale: 1;
-    }
-  }
-}
-
-@utility popover-end {
-  @layer components {
-    @apply place-items-end;
-
-    :where(.popover-body) {
-      @apply h-screen max-h-none w-auto max-w-none rounded-none;
-      translate: 100% 0;
-      scale: 1;
-    }
-  }
-}

package/src/components/sidebar.css

@@ -1,9 +0,0 @@
-@utility sidebar {
-    @apply p-6 border-x border-core-200 dark:border-core-900 max-h-dvh sticky overflow-y-auto gap-y-8;
-    background-color: light-dark(
-        var(--core-0),
-        var(--core-1000)
-    );
-    display: flex;
-    flex-direction: column;
-}

package/src/components/typography.css

@@ -1,6 +0,0 @@
-@import '../theme/typography.css';
-@utility style {
-    h1 {
-        @apply text-4xl font-bold
-    }
-}

package/src/main.css

@@ -1,20 +0,0 @@
-@import "./components/header.css";
-@import "./components/sidebar.css";
-@import "./components/container.css";
-@import "./components/button.css";
-@import "./components/input.css";
-@import "./components/modal.css";
-@import "./components/drawer.css";
-@import "./components/checkbox.css";
-@import "./components/accordion.css";
-/* @import "./components/popover.css"; */
-@import "./components/dropdown.css";
-@import "./components/divider.css";
-@import "./components/nav.css";
-@import "./components/card.css";
-@import "./components/breadcrumb.css";
-
-/* utilities */
-@import "./utilities/headings.css";
-@import "./utilities/para.css";
-@import "./utilities/surface.css";

package/src/main.js

@@ -1 +0,0 @@
-import "./main.css"

package/src/theme/animation/slide.css

@@ -1,6 +0,0 @@
-@theme {
-    --slide-up: 0 100%;
-    --slide-down: 0 -100%;
-    --slide-left: 100% 0;
-    --slide-right: -100% 0;
-}

package/src/theme/animation/wiggle.css

@@ -1,14 +0,0 @@
-@theme {
-    --animate-wiggle: wiggle 1s linear infinite;
-    @keyframes wiggle {
-      0% {
-        transform: rotate(345deg) translateY(-100%);
-      }
-      50% {
-        transform: rotate(325deg) translateY(100%);
-      }
-      100% {
-        transform: rotate(345deg) translateY(200%);
-      }
-    }
-}

package/src/theme/jams/base.css

@@ -1,123 +0,0 @@
-@import "../../base/preflight.css" layer(theme);
-@import "./snowberry.css";
-@import "./darkberry.css";
-
-@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);
-}
-
-@theme inline {
-    --color-core-0: var(--core-0);
-    --color-core-50: var(--core-50);
-    --color-core-100: var(--core-100);
-    --color-core-200: var(--core-200);
-    --color-core-300: var(--core-300);
-    --color-core-400: var(--core-400);
-    --color-core-500: var(--core-500);
-    --color-core-600: var(--core-600);
-    --color-core-700: var(--core-700);
-    --color-core-800: var(--core-800);
-    --color-core-900: var(--core-900);
-    --color-core-950: var(--core-950);
-    --color-core-1000: var(--core-1000);
-
-    --color-default-50: var(--default-50);
-    --color-default-100: var(--default-100);
-    --color-default-200: var(--default-200);
-    --color-default-300: var(--default-300);
-    --color-default-400: var(--default-400);
-    --color-default-500: var(--default-500);
-    --color-default-600: var(--default-600);
-    --color-default-700: var(--default-700);
-    --color-default-800: var(--default-800);
-    --color-default-900: var(--default-900);
-    --color-default-950: var(--default-950);
-
-
-    --color-primary-50: var(--primary-50);
-    --color-primary-100: var(--primary-100);
-    --color-primary-200: var(--primary-200);
-    --color-primary-300: var(--primary-300);
-    --color-primary-400: var(--primary-400);
-    --color-primary-500: var(--primary-500);
-    --color-primary-600: var(--primary-600);
-    --color-primary-700: var(--primary-700);
-    --color-primary-800: var(--primary-800);
-    --color-primary-900: var(--primary-900);
-    --color-primary-950: var(--primary-950);
-
-    --color-secondary-50: var(--secondary-50);
-    --color-secondary-100: var(--secondary-100);
-    --color-secondary-200: var(--secondary-200);
-    --color-secondary-300: var(--secondary-300);
-    --color-secondary-400: var(--secondary-400);
-    --color-secondary-500: var(--secondary-500);
-    --color-secondary-600: var(--secondary-600);
-    --color-secondary-700: var(--secondary-700);
-    --color-secondary-800: var(--secondary-800);
-    --color-secondary-900: var(--secondary-900);
-    --color-secondary-950: var(--secondary-950);
-
-    --color-accent-50: var(--accent-50);
-    --color-accent-100: var(--accent-100);
-    --color-accent-200: var(--accent-200);
-    --color-accent-300: var(--accent-300);
-    --color-accent-400: var(--accent-400);
-    --color-accent-500: var(--accent-500);
-    --color-accent-600: var(--accent-600);
-    --color-accent-700: var(--accent-700);
-    --color-accent-800: var(--accent-800);
-    --color-accent-900: var(--accent-900);
-    --color-accent-950: var(--accent-950);
-
-    --color-info-50: var(--info-50);
-    --color-info-100: var(--info-100);
-    --color-info-200: var(--info-200);
-    --color-info-300: var(--info-300);
-    --color-info-400: var(--info-400);
-    --color-info-500: var(--info-500);
-    --color-info-600: var(--info-600);
-    --color-info-700: var(--info-700);
-    --color-info-800: var(--info-800);
-    --color-info-900: var(--info-900);
-    --color-info-950: var(--info-950);
-
-    --color-success-50: var(--success-50);
-    --color-success-100: var(--success-100);
-    --color-success-200: var(--success-200);
-    --color-success-300: var(--success-300);
-    --color-success-400: var(--success-400);
-    --color-success-500: var(--success-500);
-    --color-success-600: var(--success-600);
-    --color-success-700: var(--success-700);
-    --color-success-800: var(--success-800);
-    --color-success-900: var(--success-900);
-    --color-success-950: var(--success-950);
-
-    --color-warning-50: var(--warning-50);
-    --color-warning-100: var(--warning-100);
-    --color-warning-200: var(--warning-200);
-    --color-warning-300: var(--warning-300);
-    --color-warning-400: var(--warning-400);
-    --color-warning-500: var(--warning-500);
-    --color-warning-600: var(--warning-600);
-    --color-warning-700: var(--warning-700);
-    --color-warning-800: var(--warning-800);
-    --color-warning-900: var(--warning-900);
-    --color-warning-950: var(--warning-950);
-
-    --color-error-50: var(--error-50);
-    --color-error-100: var(--error-100);
-    --color-error-200: var(--error-200);
-    --color-error-300: var(--error-300);
-    --color-error-400: var(--error-400);
-    --color-error-500: var(--error-500);
-    --color-error-600: var(--error-600);
-    --color-error-700: var(--error-700);
-    --color-error-800: var(--error-800);
-    --color-error-900: var(--error-900);
-    --color-error-950: var(--error-950);
-}