frutjam 0.14.0-beta.0 → 1.0.0

package/src/components/button.css

@@ -1,334 +0,0 @@
-@import "../theme/jams/base.css";
-@import "../theme/animation/wiggle.css";
-
-@utility btn-size {
-  @layer components {
-    padding-inline: var(--btn-inline);
-    padding-block: var(--btn-block);
-    font-size: var(--btn-text-size);
-  }
-}
-
-@utility btn-xs {
-  --btn-inline: 0.875rem;
-  --btn-block: 0.375rem;
-  --btn-text-size: 0.75rem;
-  @apply btn-size;
-}
-
-@utility btn-sm {
-  --btn-inline: 1rem;
-  --btn-block: 0.5rem;
-  --btn-text-size: 0.875rem;
-  @apply btn-size;
-}
-
-@utility btn-md {
-  --btn-inline: 1.125rem;
-  --btn-block: 0.625rem;
-  --btn-text-size: 1rem;
-  @apply btn-size;
-}
-
-@utility btn-lg {
-  --btn-inline: 1.25rem;
-  --btn-block: 0.75rem;
-  --btn-text-size: 1rem;
-  @apply btn-size;
-}
-
-@utility btn-xl {
-  --btn-inline: 1.375rem;
-  --btn-block: 0.875rem;
-  --btn-text-size: 1rem;
-  @apply btn-size;
-}
-
-@utility btn-2xl {
-  --btn-inline: 1.5rem;
-  --btn-block: 1rem;
-  --btn-text-size: 1.125rem;
-  @apply btn-size;
-}
-
-@utility btn-square {
-  padding-inline: var(--btn-block);
-  padding-block: var(--btn-block);
-}
-
-@utility btn-circle {
-  @apply btn-md rounded-full;
-  padding-inline: var(--btn-block);
-  padding-block: var(--btn-block);
-}
-
-@utility btn-wide {
-  @apply w-full max-w-xs;
-}
-
-@utility btn-block {
-  @apply w-full block;
-}
-
-@utility btn-link-active {
-  background: transparent;
-  color: light-dark(var(--btn-800), var(--btn-500));
-  text-decoration: underline;
-  text-underline-offset: 4px;
-  cursor: pointer;
-}
-
-@utility btn-ghost-active {
-  /* for default btn */
-  &:is(.btn) {
-    background-color: light-dark(var(--btn-200), var(--btn-900));
-    color: light-dark(var(--btn-950), var(--btn-100));
-  }
-
-  /* for all btn exclude default btn */
-  &:not(.btn) {
-    background-color: light-dark(var(--btn-700), var(--btn-900));
-    color: light-dark(var(--btn-50), var(--btn-100));
-  }
-}
-
-@utility btn-active {
-  &:is(.btn-link) {
-    @apply btn-link-active;
-  }
-  &:is(.btn-ghost) {
-    @apply btn-ghost-active;
-  }
-  &:not(.btn-link, .btn-ghost) {
-    outline-style: none;
-
-    /* for default btn */
-    &:is(.btn) {
-      background-color: light-dark(var(--btn-300), var(--btn-900));
-      color: light-dark(var(--btn-950), var(--btn-100));
-    }
-
-    /* for all btn exclude default btn */
-    &:not(.btn) {
-      background-color: light-dark(var(--btn-800), var(--btn-800));
-      color: light-dark(var(--btn-50), var(--btn-100));
-    }
-  }
-}
-
-@utility btn-dashed {
-  &:not(.btn-active) {
-    background: transparent;
-    outline: 1px dashed light-dark(var(--btn-500), var(--btn-700));
-    color: light-dark(var(--btn-700), var(--btn-500));
-  }
-}
-
-@utility btn-outline {
-  &:not(.btn-active) {
-    background: transparent;
-    outline: 1px solid light-dark(var(--btn-500), var(--btn-800));
-    color: light-dark(var(--btn-800), var(--btn-200));
-  }
-}
-
-@utility btn-soft {
-  &:not(.btn-active) {
-    background-color: light-dark(
-      var(--btn-100),
-      color-mix(in oklab, var(--btn-900) 10%, transparent)
-    );
-    color: light-dark(var(--btn-800), var(--btn-400));
-  }
-}
-
-@utility btn-ghost {
-  &:not(.btn-active) {
-    background: transparent;
-    color: light-dark(var(--btn-600), var(--btn-300));
-  }
-}
-
-@utility btn-link {
-  &:not(.btn-active) {
-    background: transparent;
-    color: light-dark(var(--btn-700), var(--btn-400));
-  }
-}
-
-@utility btn-core {
-  @apply btn-md text-shadow-xs/5 gap-1.5 leading-normal;
-  transition:
-    translate 0.2s ease-out,
-    visibility 0.2s allow-discrete,
-    background-color 0.2s ease-out,
-    opacity 0.1s ease-out;
-  position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  align-self: flex-start;
-  flex-wrap: nowrap;
-  vertical-align: middle;
-  font-weight: 500;
-  text-align: center;
-  border-radius: var(--radius-btn);
-  overflow: hidden;
-  cursor: pointer;
-  box-sizing: border-box;
-
-  /* for default btn */
-  &:is(.btn) {
-    background-color: light-dark(var(--btn-200), var(--btn-800));
-    color: light-dark(var(--btn-900), var(--btn-50));
-  }
-
-  /* for all btn exclude default btn */
-  &:not(.btn) {
-    background-color: light-dark(var(--btn-700), var(--btn-700));
-    color: var(--btn-50);
-  }
-
-  &:is(:disabled, [disabled], .btn-disabled) {
-    @apply opacity-20 cursor-not-allowed pointer-events-none;
-  }
-
-  &:is(input[type="checkbox"], input[type="radio"]) {
-    @apply appearance-none;
-
-    &::after {
-      content: attr(aria-label);
-    }
-
-    &:checked {
-      @apply isolate;
-    }
-  }
-
-  @media (hover: hover) {
-    &:is(:hover) {
-      @apply btn-active;
-    }
-  }
-}
-
-@utility btn {
-  --btn-50: var(--default-50);
-  --btn-100: var(--default-100);
-  --btn-200: var(--default-200);
-  --btn-300: var(--default-300);
-  --btn-400: var(--default-400);
-  --btn-500: var(--default-500);
-  --btn-600: var(--default-600);
-  --btn-700: var(--default-700);
-  --btn-800: var(--default-800);
-  --btn-900: var(--default-900);
-  --btn-950: var(--default-950);
-  @apply btn-core;
-}
-
-@utility btn-primary {
-  --btn-50: var(--primary-50);
-  --btn-100: var(--primary-100);
-  --btn-200: var(--primary-200);
-  --btn-300: var(--primary-300);
-  --btn-400: var(--primary-400);
-  --btn-500: var(--primary-500);
-  --btn-600: var(--primary-600);
-  --btn-700: var(--primary-700);
-  --btn-800: var(--primary-800);
-  --btn-900: var(--primary-900);
-  --btn-950: var(--primary-950);
-  @apply btn-core;
-}
-
-@utility btn-secondary {
-  --btn-50: var(--secondary-50);
-  --btn-100: var(--secondary-100);
-  --btn-200: var(--secondary-200);
-  --btn-300: var(--secondary-300);
-  --btn-400: var(--secondary-400);
-  --btn-500: var(--secondary-500);
-  --btn-600: var(--secondary-600);
-  --btn-700: var(--secondary-700);
-  --btn-800: var(--secondary-800);
-  --btn-900: var(--secondary-900);
-  --btn-950: var(--secondary-950);
-  @apply btn-core;
-}
-
-@utility btn-accent {
-  --btn-50: var(--accent-50);
-  --btn-100: var(--accent-100);
-  --btn-200: var(--accent-200);
-  --btn-300: var(--accent-300);
-  --btn-400: var(--accent-400);
-  --btn-500: var(--accent-500);
-  --btn-600: var(--accent-600);
-  --btn-700: var(--accent-700);
-  --btn-800: var(--accent-800);
-  --btn-900: var(--accent-900);
-  --btn-950: var(--accent-950);
-  @apply btn-core;
-}
-
-@utility btn-info {
-  --btn-50: var(--info-50);
-  --btn-100: var(--info-100);
-  --btn-200: var(--info-200);
-  --btn-300: var(--info-300);
-  --btn-400: var(--info-400);
-  --btn-500: var(--info-500);
-  --btn-600: var(--info-600);
-  --btn-700: var(--info-700);
-  --btn-800: var(--info-800);
-  --btn-900: var(--info-900);
-  --btn-950: var(--info-950);
-  @apply btn-core;
-}
-
-@utility btn-success {
-  --btn-50: var(--success-50);
-  --btn-100: var(--success-100);
-  --btn-200: var(--success-200);
-  --btn-300: var(--success-300);
-  --btn-400: var(--success-400);
-  --btn-500: var(--success-500);
-  --btn-600: var(--success-600);
-  --btn-700: var(--success-700);
-  --btn-800: var(--success-800);
-  --btn-900: var(--success-900);
-  --btn-950: var(--success-950);
-  @apply btn-core;
-}
-
-@utility btn-warning {
-  --btn-50: var(--warning-50);
-  --btn-100: var(--warning-100);
-  --btn-200: var(--warning-200);
-  --btn-300: var(--warning-300);
-  --btn-400: var(--warning-400);
-  --btn-500: var(--warning-500);
-  --btn-600: var(--warning-600);
-  --btn-700: var(--warning-700);
-  --btn-800: var(--warning-800);
-  --btn-900: var(--warning-900);
-  --btn-950: var(--warning-950);
-  @apply btn-core;
-}
-
-@utility btn-error {
-  --btn-50: var(--error-50);
-  --btn-100: var(--error-100);
-  --btn-200: var(--error-200);
-  --btn-300: var(--error-300);
-  --btn-400: var(--error-400);
-  --btn-500: var(--error-500);
-  --btn-600: var(--error-600);
-  --btn-700: var(--error-700);
-  --btn-800: var(--error-800);
-  --btn-900: var(--error-900);
-  --btn-950: var(--error-950);
-  @apply btn-core;
-}

package/src/components/card.css

@@ -1,54 +0,0 @@
-@utility card-outline {
-    border: 1px solid light-dark(
-      var(--core-200),
-      var(--core-900)
-    );
-}
-
-@utility card-dashed {
-    border: 1px dashed light-dark(
-      var(--core-200),
-      var(--core-900)
-    );
-}
-
-/* card size */
-
-@utility card {
-    @apply relative flex flex-col;
-    border-radius: var(--radius-card);
-    overflow:hidden;
-    background: light-dark(
-        var(--core-50),
-        var(--core-900)
-    );
-
-    :where(figure:first-child) {
-        overflow: hidden;
-        border-start-start-radius: inherit;
-        border-start-end-radius: inherit;
-        border-end-start-radius: unset;
-        border-end-end-radius: unset;
-    }
-    
-    :where(figure:last-child) {
-        overflow: hidden;
-        border-start-start-radius: unset;
-        border-start-end-radius: unset;
-        border-end-start-radius: inherit;
-        border-end-end-radius: inherit;
-    }
-}
-
-@utility card-body {
-    @apply flex flex-auto flex-col gap-2;
-    padding: 1.5rem;
-
-    :where(p){
-        @apply text-base grow;
-    }
-}
-
-@utility card-title {
-    @apply flex items-center gap-2 font-semibold text-lg;
-}

package/src/components/checkbox.css

@@ -1,265 +0,0 @@
-@import '../theme/jams/base.css';
-
-@utility checkbox-xs {
-  @layer components {
-    @apply p-0.75 size-3;
-  }
-}
-
-@utility checkbox-sm {
-  @layer components {
-    @apply p-1 size-4;
-  }
-}
-
-@utility checkbox-md {
-  @layer components {
-    @apply p-1.25 size-5;
-  }
-}
-
-@utility checkbox-lg {
-  @layer components {
-    @apply p-1.5 size-6;
-  }
-}
-
-@utility checkbox-xl {
-  @layer components {
-    @apply p-1.75 size-7;
-  }
-}
-
-@utility checkbox-2xl {
-  @layer components {
-    @apply p-2 size-8;
-  }
-}
-
-@utility checkbox-circle {
-  @layer components {
-    @apply rounded-full aspect-square;
-  }
-}
-
-@utility checkbox-square {
-  @layer components {
-    @apply rounded-[var(--radius-checkbox)] aspect-square;
-  }
-}
-
-@utility checkbox-core {
-  @layer components {
-    @apply relative shrink-0 cursor-pointer appearance-none align-middle shadow ring duration-350 checkbox-md;
-
-    --tw-ring-color: light-dark(
-      var(--checkbox-300),
-      color-mix(in oklab,var(--checkbox-100)16%,transparent)
-    );
-
-    background-color: light-dark(
-      var(--checkbox-100),
-      color-mix(in oklab,var(--checkbox-600)15%,transparent)
-    );
-
-    color: light-dark(
-      var(--checkbox-700),
-      var(--checkbox-200)
-    );
-
-    border-radius: var(--radius-checkbox);
-
-    &::before {
-      @apply block size-full rotate-45 bg-current opacity-0 content-none transition-all;
-      clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0, 70% 0, 70% 100%);
-      font-size: 1rem;
-      line-height: 0.75;
-    }
-  
-    &:focus-visible {
-      outline: 2px solid var(--checkbox-700, currentColor);
-      outline-offset: 2px;
-    }
-  
-    &:checked,
-    &[aria-checked="true"] {
-        @apply shadow-2xl;
-        background-color: light-dark(
-          var(--checkbox-200),
-          var(--checkbox-600)
-        );  
-        &::before {
-          clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0, 70% 0, 70% 100%);
-          @apply opacity-100 content-['✔︎'];
-          @media (forced-colors: active) {
-              @apply rotate-0 bg-transparent content-['✔︎'] [clip-path:none];
-          }
-        }
-    }
-  
-    &:indeterminate {
-      &:before {
-        @apply rotate-0 opacity-100;
-        translate: 0 -35%;
-        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
-      }
-    }
-    
-    &:disabled {
-      @apply cursor-not-allowed opacity-20;
-    }
-  }
-}
-
-@utility checkbox {
-  @layer components {
-    @apply checkbox-core;
-  }
-  @layer theme {
-    --checkbox-50: var(--default-50);
-    --checkbox-100: var(--default-100);
-    --checkbox-200: var(--default-200);
-    --checkbox-300: var(--default-300);
-    --checkbox-400: var(--default-400);
-    --checkbox-500: var(--default-500);
-    --checkbox-600: var(--default-600);
-    --checkbox-700: var(--default-700);
-    --checkbox-800: var(--default-800);
-    --checkbox-900: var(--default-900);
-    --checkbox-950: var(--default-950);
-  }
-}
-  
-@utility checkbox-primary {
-  @layer components {
-    @apply checkbox-core;
-  }
-  @layer theme {
-    --checkbox-50: var(--primary-50);
-    --checkbox-100: var(--primary-100);
-    --checkbox-200: var(--primary-200);
-    --checkbox-300: var(--primary-300);
-    --checkbox-400: var(--primary-400);
-    --checkbox-500: var(--primary-500);
-    --checkbox-600: var(--primary-600);
-    --checkbox-700: var(--primary-700);
-    --checkbox-800: var(--primary-800);
-    --checkbox-900: var(--primary-900);
-    --checkbox-950: var(--primary-950);
-  }
-}
-  
-@utility checkbox-secondary {
-  @layer components {
-    @apply checkbox-core;
-  }
-  @layer theme {
-    --checkbox-50: var(--secondary-50);
-    --checkbox-100: var(--secondary-100);
-    --checkbox-200: var(--secondary-200);
-    --checkbox-300: var(--secondary-300);
-    --checkbox-400: var(--secondary-400);
-    --checkbox-500: var(--secondary-500);
-    --checkbox-600: var(--secondary-600);
-    --checkbox-700: var(--secondary-700);
-    --checkbox-800: var(--secondary-800);
-    --checkbox-900: var(--secondary-900);
-    --checkbox-950: var(--secondary-950);
-  }
-}
-  
-@utility checkbox-accent {
-  @layer components {
-    @apply checkbox-core;
-  }
-  @layer theme {
-    --checkbox-50: var(--accent-50);
-    --checkbox-100: var(--accent-100);
-    --checkbox-200: var(--accent-200);
-    --checkbox-300: var(--accent-300);
-    --checkbox-400: var(--accent-400);
-    --checkbox-500: var(--accent-500);
-    --checkbox-600: var(--accent-600);
-    --checkbox-700: var(--accent-700);
-    --checkbox-800: var(--accent-800);
-    --checkbox-900: var(--accent-900);
-    --checkbox-950: var(--accent-950);
-  }
-}
-  
-  
-@utility checkbox-info {
-  @layer components {
-    @apply checkbox-core;
-  }
-  @layer theme {
-    --checkbox-50: var(--info-50);
-    --checkbox-100: var(--info-100);
-    --checkbox-200: var(--info-200);
-    --checkbox-300: var(--info-300);
-    --checkbox-400: var(--info-400);
-    --checkbox-500: var(--info-500);
-    --checkbox-600: var(--info-600);
-    --checkbox-700: var(--info-700);
-    --checkbox-800: var(--info-800);
-    --checkbox-900: var(--info-900);
-    --checkbox-950: var(--info-950);
-  }
-}
-  
-@utility checkbox-success {
-  @layer components {
-    @apply checkbox-core;
-  }
-  @layer theme {
-    --checkbox-50: var(--success-50);
-    --checkbox-100: var(--success-100);
-    --checkbox-200: var(--success-200);
-    --checkbox-300: var(--success-300);
-    --checkbox-400: var(--success-400);
-    --checkbox-500: var(--success-500);
-    --checkbox-600: var(--success-600);
-    --checkbox-700: var(--success-700);
-    --checkbox-800: var(--success-800);
-    --checkbox-900: var(--success-900);
-    --checkbox-950: var(--success-950);
-  }
-}
-  
-@utility checkbox-warning {
-  @layer components {
-    @apply checkbox-core;
-  }
-  @layer theme {
-    --checkbox-50: var(--warning-50);
-    --checkbox-100: var(--warning-100);
-    --checkbox-200: var(--warning-200);
-    --checkbox-300: var(--warning-300);
-    --checkbox-400: var(--warning-400);
-    --checkbox-500: var(--warning-500);
-    --checkbox-600: var(--warning-600);
-    --checkbox-700: var(--warning-700);
-    --checkbox-800: var(--warning-800);
-    --checkbox-900: var(--warning-900);
-    --checkbox-950: var(--warning-950);
-  }
-}
-  
-@utility checkbox-error {
-  @layer components {
-    @apply checkbox-core;
-  }
-  @layer theme {
-    --checkbox-50: var(--error-50);
-    --checkbox-100: var(--error-100);
-    --checkbox-200: var(--error-200);
-    --checkbox-300: var(--error-300);
-    --checkbox-400: var(--error-400);
-    --checkbox-500: var(--error-500);
-    --checkbox-600: var(--error-600);
-    --checkbox-700: var(--error-700);
-    --checkbox-800: var(--error-800);
-    --checkbox-900: var(--error-900);
-    --checkbox-950: var(--error-950);
-  }
-}

package/src/components/container.css

@@ -1,52 +0,0 @@
-@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;
-}