@hina-ui/vue 1.0.0

package/src/styles/motion.css

@@ -0,0 +1,606 @@
+@keyframes hn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes hn-skeleton {
+  50% {
+    background-color: var(--hn-bg-inset);
+  }
+}
+
+@keyframes hn-ping {
+  from {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+  75%,
+  to {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+@keyframes hn-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes hn-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes hn-pop-in {
+  from {
+    opacity: 0;
+    transform: translate(var(--hn-pop-x, 0), var(--hn-pop-y, 0)) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes hn-pop-out {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: translate(var(--hn-pop-x, 0), var(--hn-pop-y, 0)) scale(0.96);
+  }
+}
+
+@keyframes hn-modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--hn-travel-md)) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes hn-modal-out {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(var(--hn-travel-sm)) scale(0.99);
+  }
+}
+
+@keyframes hn-sheet-in {
+  from {
+    transform: translate(var(--hn-sheet-x, 0), var(--hn-sheet-y, 0));
+  }
+  to {
+    transform: none;
+  }
+}
+
+@keyframes hn-sheet-out {
+  from {
+    transform: translate(var(--hn-sheet-from-x, 0), var(--hn-sheet-from-y, 0));
+  }
+  to {
+    transform: translate(var(--hn-sheet-x, 0), var(--hn-sheet-y, 0));
+  }
+}
+
+@keyframes hn-collapse-in {
+  from {
+    height: 0;
+    margin-block-end: calc(var(--hn-collapse-gap, 0px) * -1);
+  }
+  to {
+    height: var(--hn-collapse-h, auto);
+    margin-block-end: 0;
+  }
+}
+
+@keyframes hn-collapse-out {
+  from {
+    height: var(--hn-collapse-h, auto);
+    margin-block-end: 0;
+  }
+  to {
+    height: 0;
+    margin-block-end: calc(var(--hn-collapse-gap, 0px) * -1);
+  }
+}
+
+@utility hn-anim-fade {
+  &[data-state='open'],
+  &[data-state='delayed-open'],
+  &[data-state='instant-open'] {
+    animation: hn-fade-in var(--hn-duration-base) var(--hn-ease-enter);
+  }
+  &[data-state='closed'] {
+    animation: hn-fade-out var(--hn-duration-exit) var(--hn-ease-exit);
+  }
+}
+
+@utility hn-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: var(--hn-z-overlay);
+  background-color: var(--hn-bg-scrim);
+  backdrop-filter: blur(var(--hn-blur-scrim));
+
+  @media (prefers-reduced-transparency: reduce) {
+    backdrop-filter: none;
+  }
+
+  &[data-state='open'] {
+    animation: hn-fade-in var(--hn-duration-base) var(--hn-ease-enter);
+  }
+  &[data-state='closed'] {
+    animation: hn-fade-out var(--hn-duration-exit) var(--hn-ease-exit);
+  }
+}
+
+@utility hn-anim-pop {
+  &[data-side='top'] {
+    --hn-pop-y: var(--hn-travel-sm);
+  }
+  &[data-side='bottom'] {
+    --hn-pop-y: calc(var(--hn-travel-sm) * -1);
+  }
+  &[data-side='left'] {
+    --hn-pop-x: var(--hn-travel-sm);
+  }
+  &[data-side='right'] {
+    --hn-pop-x: calc(var(--hn-travel-sm) * -1);
+  }
+  &[data-state='open'],
+  &[data-state='delayed-open'],
+  &[data-state='instant-open'] {
+    animation: hn-pop-in var(--hn-pop-in, var(--hn-duration-base)) var(--hn-ease-enter);
+  }
+  &[data-state='closed'] {
+    animation: hn-pop-out var(--hn-duration-exit) var(--hn-ease-exit);
+  }
+}
+
+@utility hn-anim-modal {
+  &[data-state='open'] {
+    animation: hn-modal-in var(--hn-duration-slow) var(--hn-ease-enter-strong);
+  }
+  &[data-state='closed'] {
+    animation: hn-modal-out var(--hn-duration-exit) var(--hn-ease-exit);
+  }
+}
+
+@keyframes hn-drawer-in-start {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: none;
+  }
+}
+
+@keyframes hn-drawer-out-start {
+  from {
+    transform: none;
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes hn-drawer-in-end {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: none;
+  }
+}
+
+@keyframes hn-drawer-out-end {
+  from {
+    transform: none;
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes hn-toast-in {
+  from {
+    transform: translateY(calc(var(--hn-t-dir, -1) * -100%));
+  }
+}
+
+@keyframes hn-toast-out {
+  to {
+    opacity: 0;
+    transform: translateY(calc(var(--hn-t-dir, -1) * -100%));
+  }
+}
+
+@keyframes hn-swipe-out {
+  from {
+    transform: translateX(var(--reka-toast-swipe-end-x));
+  }
+  to {
+    opacity: 0;
+    transform: translateX(calc(100% + 1rem));
+  }
+}
+
+@utility hn-toast-item {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  pointer-events: auto;
+  translate: 0 calc(var(--hn-t-dir, -1) * var(--hn-t-index, 0) * 0.75rem);
+  scale: calc(1 - var(--hn-t-index, 0) * 0.05);
+  transform-origin: center var(--hn-t-edge, bottom);
+  transition:
+    translate var(--hn-duration-base) var(--hn-ease-move),
+    scale var(--hn-duration-base) var(--hn-ease-move),
+    opacity var(--hn-duration-base) var(--hn-ease-move),
+    height var(--hn-duration-base) var(--hn-ease-move);
+  animation: hn-toast-in var(--hn-duration-base) var(--hn-ease-enter-strong);
+
+  [data-pos^='top'] & {
+    --hn-t-dir: 1;
+    --hn-t-edge: top;
+    top: 0;
+    bottom: auto;
+  }
+
+  [data-pos='auto'] & {
+    @media (min-width: 40rem) {
+      --hn-t-dir: 1;
+      --hn-t-edge: top;
+      top: 0;
+      bottom: auto;
+    }
+  }
+
+  &[data-hn-hidden] {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &[data-hn-behind] {
+    pointer-events: none;
+  }
+
+  [data-expanded] & {
+    translate: 0 calc(var(--hn-t-dir, -1) * var(--hn-t-offset, 0px));
+    scale: 1;
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  [data-expanded] &::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    bottom: 100%;
+    height: 0.75rem;
+  }
+
+  [data-pos^='top'][data-expanded] &::after {
+    bottom: auto;
+    top: 100%;
+  }
+
+  [data-pos='auto'][data-expanded] &::after {
+    @media (min-width: 40rem) {
+      bottom: auto;
+      top: 100%;
+    }
+  }
+
+  &[data-hn-removed] {
+    animation: hn-toast-out var(--hn-duration-exit) var(--hn-ease-exit) forwards;
+    pointer-events: none;
+  }
+
+  &[data-swipe='move'] {
+    transform: translateX(var(--reka-toast-swipe-move-x));
+  }
+  &[data-swipe='cancel'] {
+    transform: none;
+    transition:
+      transform var(--hn-duration-base) var(--hn-ease-move),
+      translate var(--hn-duration-base) var(--hn-ease-move),
+      scale var(--hn-duration-base) var(--hn-ease-move),
+      height var(--hn-duration-base) var(--hn-ease-move);
+  }
+  &[data-swipe='end'] {
+    animation: hn-swipe-out var(--hn-duration-exit) var(--hn-ease-exit) forwards;
+    pointer-events: none;
+  }
+}
+
+@utility hn-toast-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: var(--hn-t-self-h, auto);
+  overflow: clip;
+  overflow-clip-margin: content-box;
+  transition: height var(--hn-duration-base) var(--hn-ease-move);
+
+  [data-pos^='top'] & {
+    justify-content: flex-start;
+  }
+
+  [data-pos='auto'] & {
+    @media (min-width: 40rem) {
+      justify-content: flex-start;
+    }
+  }
+
+  [data-hn-behind] & {
+    height: var(--hn-t-front-h, var(--hn-t-self-h, auto));
+  }
+
+  [data-expanded] [data-hn-behind] & {
+    height: var(--hn-t-self-h, auto);
+  }
+}
+
+@utility hn-toast-body {
+  flex-shrink: 0;
+  transition: opacity var(--hn-duration-fast) var(--hn-ease-enter);
+
+  [data-hn-behind] & {
+    opacity: 0;
+    transition: opacity var(--hn-duration-fast) var(--hn-ease-exit) var(--hn-duration-base);
+  }
+
+  [data-expanded] [data-hn-behind] & {
+    opacity: 1;
+    transition: opacity var(--hn-duration-fast) var(--hn-ease-enter);
+  }
+}
+
+@utility hn-anim-drawer {
+  &[data-hn-side='start'][data-state='open'] {
+    animation: hn-drawer-in-start var(--hn-duration-slow) var(--hn-ease-enter-strong);
+  }
+  &[data-hn-side='start'][data-state='closed'] {
+    animation: hn-drawer-out-start var(--hn-duration-exit) var(--hn-ease-exit);
+  }
+  &[data-hn-side='end'][data-state='open'] {
+    animation: hn-drawer-in-end var(--hn-duration-slow) var(--hn-ease-enter-strong);
+  }
+  &[data-hn-side='end'][data-state='closed'] {
+    animation: hn-drawer-out-end var(--hn-duration-exit) var(--hn-ease-exit);
+  }
+}
+
+@utility hn-anim-sheet-bottom {
+  --hn-sheet-y: 100%;
+  &[data-state='open'] {
+    animation: hn-sheet-in var(--hn-duration-slow) var(--hn-ease-enter-strong);
+  }
+  &[data-state='closed'] {
+    animation: hn-sheet-out var(--hn-duration-exit) var(--hn-ease-exit);
+  }
+}
+
+@utility hn-anim-sheet-top {
+  --hn-sheet-y: -100%;
+  &[data-state='open'] {
+    animation: hn-sheet-in var(--hn-duration-slow) var(--hn-ease-enter-strong);
+  }
+  &[data-state='closed'] {
+    animation: hn-sheet-out var(--hn-duration-exit) var(--hn-ease-exit);
+  }
+}
+
+@utility hn-anim-sheet-left {
+  --hn-sheet-x: -100%;
+  &[data-state='open'] {
+    animation: hn-sheet-in var(--hn-duration-slow) var(--hn-ease-enter-strong);
+  }
+  &[data-state='closed'] {
+    animation: hn-sheet-out var(--hn-duration-exit) var(--hn-ease-exit);
+  }
+}
+
+@utility hn-anim-sheet-right {
+  --hn-sheet-x: 100%;
+  &[data-state='open'] {
+    animation: hn-sheet-in var(--hn-duration-slow) var(--hn-ease-enter-strong);
+  }
+  &[data-state='closed'] {
+    animation: hn-sheet-out var(--hn-duration-exit) var(--hn-ease-exit);
+  }
+}
+
+@utility hn-anim-collapse {
+  overflow: hidden;
+  &[data-state='open'] {
+    animation: hn-collapse-in var(--hn-duration-base) var(--hn-ease-move);
+  }
+  &[data-state='closed'] {
+    animation: hn-collapse-out var(--hn-duration-base) var(--hn-ease-move);
+  }
+}
+
+@utility hn-collapse {
+  display: grid;
+  overflow: hidden;
+  transition:
+    grid-template-rows var(--hn-duration-fast) var(--hn-ease-enter),
+    margin-block-end var(--hn-duration-fast) var(--hn-ease-enter),
+    opacity var(--hn-duration-fast) var(--hn-ease-enter),
+    visibility 0s;
+
+  &.hn-collapse-open,
+  &[data-state='open'] {
+    grid-template-rows: 1fr;
+    margin-block-end: 0;
+    opacity: 1;
+  }
+
+  &.hn-collapse-closed,
+  &[data-state='closed'] {
+    grid-template-rows: 0fr;
+    margin-block-end: calc(var(--hn-collapse-gap, 0px) * -1);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition:
+      opacity var(--hn-duration-exit) var(--hn-ease-exit),
+      grid-template-rows var(--hn-collapse-out, var(--hn-duration-base)) var(--hn-ease-move),
+      margin-block-end var(--hn-collapse-out, var(--hn-duration-base)) var(--hn-ease-move),
+      visibility 0s var(--hn-ease-linear) var(--hn-collapse-out, var(--hn-duration-base));
+  }
+}
+
+@utility hn-collapse-x {
+  display: grid;
+  overflow: hidden;
+  transition:
+    grid-template-columns var(--hn-duration-fast) var(--hn-ease-enter),
+    margin-inline-end var(--hn-duration-fast) var(--hn-ease-enter),
+    opacity var(--hn-duration-fast) var(--hn-ease-enter),
+    visibility 0s;
+
+  &.hn-collapse-open,
+  &[data-state='open'] {
+    grid-template-columns: 1fr;
+    margin-inline-end: 0;
+    opacity: 1;
+  }
+
+  &.hn-collapse-closed,
+  &[data-state='closed'] {
+    grid-template-columns: 0fr;
+    margin-inline-end: calc(var(--hn-collapse-gap, 0px) * -1);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition:
+      opacity var(--hn-duration-exit) var(--hn-ease-exit),
+      grid-template-columns var(--hn-collapse-out, var(--hn-duration-base)) var(--hn-ease-move),
+      margin-inline-end var(--hn-collapse-out, var(--hn-duration-base)) var(--hn-ease-move),
+      visibility 0s var(--hn-ease-linear) var(--hn-collapse-out, var(--hn-duration-base));
+  }
+}
+
+@utility hn-collapse-body {
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  transition: opacity 0s;
+
+  .hn-collapse > & > *,
+  .hn-collapse-x > & > * {
+    overflow: hidden;
+  }
+
+  .hn-collapse-closed > &,
+  .hn-collapse[data-state='closed'] > &,
+  .hn-collapse-x[data-state='closed'] > & {
+    opacity: 0;
+    transition: opacity var(--hn-duration-fast) var(--hn-ease-enter);
+  }
+}
+
+@utility hn-ping {
+  animation: hn-ping var(--hn-pulse-duration) var(--hn-ease-enter) infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    display: none;
+  }
+}
+
+@utility hn-transition {
+  transition-property:
+    color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
+    box-shadow, opacity, transform, rotate, scale, translate;
+  transition-duration: var(--hn-duration-fast);
+  transition-timing-function: var(--hn-ease-move);
+}
+
+@utility hn-transition-base {
+  transition-property:
+    color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
+    box-shadow, opacity, transform, rotate, scale, translate;
+  transition-duration: var(--hn-duration-base);
+  transition-timing-function: var(--hn-ease-move);
+}
+
+@utility hn-transition-press {
+  transition-property:
+    color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
+    box-shadow, opacity, transform, rotate, scale, translate;
+  transition-duration: var(--hn-duration-fast);
+  transition-timing-function: var(--hn-ease-press);
+}
+
+@utility hn-switch-thumb {
+  transition-property: translate, background-color, border-color;
+  transition-duration: var(--hn-duration-base);
+  transition-timing-function: var(--hn-ease-press);
+}
+
+@utility hn-slider-move {
+  transition-property: left, right, top, bottom, inset-inline-start, inset-inline-end, width;
+  transition-duration: var(--hn-duration-fast);
+  transition-timing-function: var(--hn-ease-enter);
+}
+
+@keyframes hn-progress-sweep {
+  from {
+    translate: calc(var(--hn-progress-dir, 1) * -100%) 0;
+  }
+  to {
+    translate: calc(var(--hn-progress-dir, 1) * 250%) 0;
+  }
+}
+
+@utility hn-ring-arc {
+  transition: stroke-dashoffset var(--hn-duration-base) var(--hn-ease-move);
+}
+
+@utility hn-ring-spin {
+  [data-state='indeterminate'] & {
+    animation: hn-spin var(--hn-spin-duration) var(--hn-ease-linear) infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+}
+
+@utility hn-progress-bar {
+  transition: width var(--hn-duration-base) var(--hn-ease-move);
+
+  &[data-state='indeterminate'] {
+    width: 40%;
+    animation: hn-progress-sweep var(--hn-progress-duration) var(--hn-ease-linear) infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+      translate: calc(var(--hn-progress-dir, 1) * 75%) 0;
+    }
+  }
+}

package/src/styles/palette.css

@@ -0,0 +1,36 @@
+@theme static {
+  --color-neutral-0: #ffffff;
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f5f5f5;
+  --color-neutral-150: #ededed;
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-400: #a3a3a3;
+  --color-neutral-500: #737373;
+  --color-neutral-600: #525252;
+  --color-neutral-700: #404040;
+  --color-neutral-800: #262626;
+  --color-neutral-850: #1c1c1c;
+  --color-neutral-900: #171717;
+  --color-neutral-950: #0a0a0a;
+  --color-neutral-1000: #000000;
+
+  --color-brand-50: #eefdfb;
+  --color-brand-100: #d5faf5;
+  --color-brand-200: #a9f3eb;
+  --color-brand-300: #72e8dc;
+  --color-brand-400: #45d4c9;
+  --color-brand-500: #39c5bb;
+  --color-brand-600: #2ba79e;
+  --color-brand-700: #1f827b;
+  --color-brand-800: #1a6862;
+  --color-brand-900: #185450;
+  --color-brand-950: #0a302e;
+
+  --color-expr-blue: #66ccff;
+  --color-expr-purple: #aa66ff;
+  --color-expr-cyan: #00cccc;
+  --color-expr-orange: #ff9966;
+  --color-expr-coral: #ff6666;
+  --color-expr-yellow: #ffcc00;
+}

package/src/styles/scroll.css

@@ -0,0 +1,45 @@
+.hn-scroll-area .os-scrollbar {
+  --os-size: 6px;
+  --os-handle-bg: var(--hn-fg-disabled);
+  --os-handle-bg-hover: var(--hn-fg-subtle);
+  --os-handle-bg-active: var(--hn-fg-muted);
+}
+
+@utility hn-scroll-shadow {
+  position: absolute;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--hn-duration-base) var(--hn-ease-enter);
+
+  &[data-visible] {
+    opacity: 1;
+  }
+
+  &[data-side='x-start'] {
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 16px;
+    background: linear-gradient(to right, var(--hn-scroll-shadow), transparent);
+  }
+
+  &[data-side='x-end'] {
+    inset-block: 0;
+    inset-inline-end: 0;
+    width: 16px;
+    background: linear-gradient(to left, var(--hn-scroll-shadow), transparent);
+  }
+
+  &[data-side='y-start'] {
+    inset-inline: 0;
+    inset-block-start: 0;
+    height: 16px;
+    background: linear-gradient(to bottom, var(--hn-scroll-shadow), transparent);
+  }
+
+  &[data-side='y-end'] {
+    inset-inline: 0;
+    inset-block-end: 0;
+    height: 16px;
+    background: linear-gradient(to top, var(--hn-scroll-shadow), transparent);
+  }
+}