twntyx-css 1.0.0

package/styles/pagination.css

@@ -0,0 +1,147 @@
+/*----------------------------*/
+/* PAGINATION */
+/*----------------------------*/
+
+@utility pagination {
+  @apply flex gap-0;
+
+  /* Info text */
+  .pagination-info {
+    @apply text-sm text-text-tertiary;
+
+    strong {
+      @apply font-medium text-text-default;
+    }
+  }
+
+  a,
+  button {
+    &:not([disabled]) {
+      @apply cursor-pointer;
+    }
+  }
+
+  /* Navigation list */
+  .pagination-nav {
+    @apply flex items-center -space-x-px list-none text-text-tertiary;
+
+    > * {
+      @apply p-0.5;
+      &:first-child {
+        @apply rounded-s-2xl;
+        > .pagination-item {
+          &,
+          &::before {
+            @apply rounded-s-2xl!;
+          }
+        }
+      }
+
+      &:last-child {
+        @apply rounded-e-2xl;
+        > .pagination-item {
+          &,
+          &::before {
+            @apply rounded-e-2xl!;
+          }
+        }
+      }
+    }
+  }
+
+  /* Page items */
+  .pagination-item {
+    @apply
+    flex
+    justify-center
+    items-center
+    px-3
+    h-8
+    text-sm
+    select-none
+    rounded-[4px]
+    border-line-default
+    include-interactive
+    no-underline;
+
+    &::before {
+      @apply rounded-[3px]!;
+    }
+
+    &.is-active {
+      @apply z-20 surface-brand;
+    }
+
+    &.is-disabled {
+      @apply opacity-50 cursor-not-allowed outline-transparent;
+      &::before {
+        @apply hidden;
+      }
+    }
+
+    svg {
+      @apply size-4;
+    }
+  }
+
+  /* Size variants */
+  &.pagination-sm {
+    .pagination-item {
+      @apply px-2 h-6 text-xs;
+
+      svg {
+        @apply size-3;
+      }
+    }
+  }
+
+  &.pagination-lg {
+    .pagination-item {
+      @apply px-4 h-10 text-base;
+
+      svg {
+        @apply size-5;
+      }
+    }
+  }
+
+  /* Compact variant */
+  &.pagination-compact {
+    @apply gap-0;
+    .pagination-nav {
+      @apply -space-x-px!;
+
+      .pagination-item {
+        @apply border;
+      }
+
+      > * {
+        @apply p-0;
+        &:first-child {
+          .pagination-item {
+            @apply rounded-e-none;
+            &::before {
+              @apply rounded-e-none!;
+            }
+          }
+        }
+        &:last-child {
+          .pagination-item {
+            @apply rounded-s-none;
+            &::before {
+              @apply rounded-s-none!;
+            }
+          }
+        }
+        &:not(:first-child):not(:last-child) {
+          .pagination-item {
+            @apply rounded-none border-l-0;
+            &::before {
+              @apply rounded-none!;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/styles/panel.css

@@ -0,0 +1,113 @@
+/*----------------------------*/
+/* PANEL */
+/*----------------------------*/
+
+@utility panel-container {
+  --header-height: 137px;
+  @apply
+  relative
+  flex
+  w-full
+  flex-1
+  overflow-clip
+  ;
+
+  > .panel-chat,
+  > .panel-sidebar > .panel-sidebar-content {
+    @apply
+    h-[calc(100dvh-var(--header-height)-1rem)]
+    ;
+  }
+
+  > .panel-chat {
+    @apply
+    relative
+    z-0
+    mx-auto
+    flex
+    w-full
+    md:w-[36rem]
+    flex-none
+    shrink-0
+    flex-col
+    ;
+
+    > .chat-feed {
+      @apply
+      flex-1
+      flex
+      flex-col
+      gap-3
+      px-4
+      mx-auto
+      w-full
+      pt-1
+      ;
+    }
+
+    .chat-footer {
+      @apply
+      sticky
+      bottom-0
+      ;
+    }
+
+    /* .chat-footer {
+      @apply
+      sticky
+      bottom-0
+      mx-auto
+      w-full
+      pt-6
+      z-[5]
+      ;
+    } */
+  }
+
+  > .panel-sidebar {
+    @apply
+    relative
+    z-10
+    transition-[width]
+    duration-500
+    ease-out-quint
+    ;
+
+    &[open],
+    > .panel-sidebar-content {
+      @apply
+      w-full
+      ;
+    }
+    &[open] {
+      @apply ml-8;
+      > .panel-sidebar-content {
+        @apply
+        pointer-events-auto
+        ;
+      }
+    }
+    &:not([open]) {
+      @apply w-0;
+
+      > .panel-sidebar-content {
+        @apply
+        opacity-0
+        pointer-events-none
+        translate-x-1/2
+        ;
+      }
+    }
+
+    > .panel-sidebar-content {
+      @apply
+      flex
+      flex-col
+      transition-[translate,scale,opacity]
+      duration-500
+      ease-out-quint
+      card
+      ;
+    }
+  }
+}

package/styles/popover.css

@@ -0,0 +1,303 @@
+/*----------------------------*/
+/* POPOVER */
+/*----------------------------*/
+
+.popover-demo {
+  @apply flex flex-wrap gap-3 items-center justify-center p-4 min-h-56 rounded-2xl border border-dashed border-line-default;
+}
+
+.popover-layout-grid {
+  @apply grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3;
+}
+
+.popover-example-card {
+  @apply flex flex-col gap-3 items-start p-4 min-h-36 rounded-2xl border bg-background-surface border-line-default;
+}
+
+.popover-label {
+  @apply text-xs font-medium uppercase tracking-wide text-text-secondary;
+}
+
+.popover-trigger {
+  @apply inline-flex items-center justify-center gap-1 px-3 h-8 min-h-8 min-w-8 text-sm font-semibold leading-none rounded-full border cursor-pointer select-none include-interactive include-border-secondary text-text-default bg-background-surface whitespace-nowrap;
+}
+
+.popover-close {
+  @apply button button-secondary;
+}
+
+.popover[popover] {
+  --popover-translate-x: 0px;
+  --popover-translate-y: 0.75rem;
+  --popover-base-offset-x: 0px;
+  --popover-base-offset-y: 0px;
+  --popover-backdrop-color: rgb(0 0 0 / 0.35);
+  --popover-backdrop-blur: 2px;
+
+  @apply m-auto p-0 rounded-2xl border bg-background-surface border-line-default shadow-dark-xl text-text-default;
+  width: min(26rem, calc(100dvw - 2rem));
+  max-height: min(34rem, calc(100dvh - 2rem));
+  overflow: auto;
+
+  opacity: 0;
+  transform: translate3d(
+    calc(var(--popover-base-offset-x) + var(--popover-translate-x)),
+    calc(var(--popover-base-offset-y) + var(--popover-translate-y)),
+    0
+  );
+  transition-property: transform, opacity, display, overlay;
+  transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+  transition-behavior: allow-discrete;
+}
+
+.popover[popover]:popover-open {
+  opacity: 1;
+  transform: translate3d(
+    var(--popover-base-offset-x),
+    var(--popover-base-offset-y),
+    0
+  );
+
+  @starting-style {
+    opacity: 0;
+    transform: translate3d(
+      calc(var(--popover-base-offset-x) + var(--popover-translate-x)),
+      calc(var(--popover-base-offset-y) + var(--popover-translate-y)),
+      0
+    );
+  }
+}
+
+.popover[popover]::backdrop {
+  background: rgb(0 0 0 / 0);
+  backdrop-filter: blur(0);
+  transition-property: background-color, backdrop-filter, display, overlay;
+  transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+  transition-behavior: allow-discrete;
+}
+
+.popover[popover]:popover-open::backdrop {
+  background: var(--popover-backdrop-color);
+  backdrop-filter: blur(var(--popover-backdrop-blur));
+
+  @starting-style {
+    background: rgb(0 0 0 / 0);
+    backdrop-filter: blur(0);
+  }
+}
+
+.popover-overlay[popover] {
+  --popover-backdrop-color: rgb(0 0 0 / 0.35);
+  --popover-backdrop-blur: 2px;
+}
+
+.popover-no-overlay[popover] {
+  --popover-backdrop-color: rgb(0 0 0 / 0);
+  --popover-backdrop-blur: 0px;
+}
+
+.popover-fixed[popover] {
+  position: fixed;
+}
+
+.popover-absolute[popover] {
+  position: absolute;
+  --popover-backdrop-color: rgb(0 0 0 / 0);
+  --popover-backdrop-blur: 0px;
+}
+
+/* In browsers supporting Anchor Positioning, absolute mode anchors to trigger. */
+@supports (top: anchor(top)) {
+  .popover-absolute[popover] {
+    margin: 0;
+  }
+
+  .popover-absolute.popover-top-left[popover] {
+    --popover-base-offset-x: -100%;
+    --popover-base-offset-y: -100%;
+    top: anchor(top);
+    left: anchor(left);
+    right: auto;
+    bottom: auto;
+  }
+
+  .popover-absolute.popover-top-right[popover] {
+    --popover-base-offset-x: 0px;
+    --popover-base-offset-y: -100%;
+    top: anchor(top);
+    left: anchor(right);
+    right: auto;
+    bottom: auto;
+  }
+
+  .popover-absolute.popover-bottom-left[popover] {
+    --popover-base-offset-x: -100%;
+    --popover-base-offset-y: 0px;
+    top: anchor(bottom);
+    left: anchor(left);
+    right: auto;
+    bottom: auto;
+  }
+
+  .popover-absolute.popover-bottom-right[popover] {
+    --popover-base-offset-x: 0px;
+    --popover-base-offset-y: 0px;
+    top: anchor(bottom);
+    left: anchor(right);
+    right: auto;
+    bottom: auto;
+  }
+
+  .popover-absolute.popover-top[popover] {
+    --popover-base-offset-x: -50%;
+    --popover-base-offset-y: -100%;
+    top: anchor(top);
+    left: anchor(center);
+    right: auto;
+    bottom: auto;
+  }
+
+  .popover-absolute.popover-bottom[popover] {
+    --popover-base-offset-x: -50%;
+    --popover-base-offset-y: 0px;
+    top: anchor(bottom);
+    left: anchor(center);
+    right: auto;
+    bottom: auto;
+  }
+
+  .popover-absolute.popover-left[popover] {
+    --popover-base-offset-x: -100%;
+    --popover-base-offset-y: -50%;
+    top: anchor(center);
+    left: anchor(left);
+    right: auto;
+    bottom: auto;
+  }
+
+  .popover-absolute.popover-right[popover] {
+    --popover-base-offset-x: 0px;
+    --popover-base-offset-y: -50%;
+    top: anchor(center);
+    left: anchor(right);
+    right: auto;
+    bottom: auto;
+  }
+
+  .popover-absolute.popover-right-full[popover] {
+    --popover-base-offset-x: 0px;
+    --popover-base-offset-y: 0px;
+    top: 0;
+    left: auto;
+    right: 0;
+    bottom: 0;
+    height: 100dvh;
+    max-height: 100dvh;
+  }
+}
+
+.popover-top[popover] {
+  --popover-translate-x: 0px;
+  --popover-translate-y: -1rem;
+  --popover-base-offset-x: -50%;
+  --popover-base-offset-y: 0px;
+
+  @apply top-4 bottom-auto left-1/2 right-auto m-0;
+  width: min(28rem, calc(100dvw - 2rem));
+  max-height: min(20rem, calc(100dvh - 2rem));
+}
+
+.popover-bottom[popover] {
+  --popover-translate-x: 0px;
+  --popover-translate-y: 1rem;
+  --popover-base-offset-x: -50%;
+  --popover-base-offset-y: 0px;
+
+  @apply bottom-4 top-auto left-1/2 right-auto m-0;
+  width: min(28rem, calc(100dvw - 2rem));
+  max-height: min(20rem, calc(100dvh - 2rem));
+}
+
+.popover-left[popover] {
+  --popover-translate-x: -1rem;
+  --popover-translate-y: 0px;
+  --popover-base-offset-x: 0px;
+  --popover-base-offset-y: -50%;
+
+  @apply top-1/2 bottom-auto left-4 right-auto m-0;
+  width: min(22rem, calc(100dvw - 2rem));
+  max-height: min(24rem, calc(100dvh - 2rem));
+}
+
+.popover-right[popover] {
+  --popover-translate-x: 1rem;
+  --popover-translate-y: 0px;
+  --popover-base-offset-x: 0px;
+  --popover-base-offset-y: -50%;
+
+  @apply top-1/2 bottom-auto right-4 left-auto m-0;
+  width: min(22rem, calc(100dvw - 2rem));
+  max-height: min(24rem, calc(100dvh - 2rem));
+}
+
+.popover-top-left[popover] {
+  --popover-translate-x: -1rem;
+  --popover-translate-y: -1rem;
+
+  @apply top-4 left-4 right-auto bottom-auto m-0;
+  width: min(22rem, calc(100dvw - 2rem));
+  max-height: min(20rem, calc(100dvh - 2rem));
+}
+
+.popover-top-right[popover] {
+  --popover-translate-x: 1rem;
+  --popover-translate-y: -1rem;
+
+  @apply top-4 right-4 left-auto bottom-auto m-0;
+  width: min(22rem, calc(100dvw - 2rem));
+  max-height: min(20rem, calc(100dvh - 2rem));
+}
+
+.popover-bottom-left[popover] {
+  --popover-translate-x: -1rem;
+  --popover-translate-y: 1rem;
+
+  @apply bottom-4 left-4 right-auto top-auto m-0;
+  width: min(22rem, calc(100dvw - 2rem));
+  max-height: min(20rem, calc(100dvh - 2rem));
+}
+
+.popover-bottom-right[popover] {
+  --popover-translate-x: 1rem;
+  --popover-translate-y: 1rem;
+
+  @apply bottom-4 right-4 left-auto top-auto m-0;
+  width: min(22rem, calc(100dvw - 2rem));
+  max-height: min(20rem, calc(100dvh - 2rem));
+}
+
+.popover-right-full[popover] {
+  --popover-translate-x: 1.25rem;
+  --popover-translate-y: 0px;
+  --popover-base-offset-x: 0px;
+  --popover-base-offset-y: 0px;
+
+  @apply inset-y-0 right-0 left-auto m-0 rounded-none rounded-l-3xl;
+  width: min(24rem, calc(100dvw - 3rem));
+  height: 100dvh;
+  max-height: 100dvh;
+}
+
+.popover-header {
+  @apply flex items-center justify-between gap-3 px-4 py-3 border-b border-line-default;
+}
+
+.popover-body {
+  @apply p-4 text-sm leading-relaxed text-text-tertiary;
+}
+
+.popover-footer {
+  @apply flex items-center justify-end gap-2 px-4 py-3 border-t border-line-default;
+}

package/styles/prism.css

@@ -0,0 +1,60 @@
+/* Add to your global CSS or create a new file */
+code[class*="language-"],
+pre[class*="language-"] {
+  @apply text-text-default;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  @apply text-text-tertiary;
+}
+
+.token.punctuation {
+  @apply text-text-secondary;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  @apply text-text-error;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  @apply text-text-success;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  @apply text-text-default;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  @apply text-text-brand;
+}
+
+.token.function,
+.token.class-name {
+  @apply text-text-attention;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  @apply text-text-warning;
+}