@hina-ui/vue 1.7.3 → 1.7.4

package/dist/shared/styles/motion.css

@@ -0,0 +1,724 @@
+@keyframes hn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes hn-skeleton {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes hn-skeleton-rtl {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@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-navigation-viewport {
+  box-sizing: content-box;
+  visibility: hidden;
+  transition:
+    width var(--hn-duration-base) var(--hn-ease-move),
+    height var(--hn-duration-base) var(--hn-ease-move),
+    left var(--hn-duration-base) var(--hn-ease-move),
+    top var(--hn-duration-base) var(--hn-ease-move);
+
+  &[data-hn-ready] {
+    @apply hn-anim-pop;
+
+    visibility: visible;
+  }
+}
+
+@keyframes hn-navigation-in {
+  from {
+    opacity: 0;
+    transform: translate(var(--hn-navigation-x, 0), var(--hn-navigation-y, 0));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes hn-navigation-out {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: translate(var(--hn-navigation-x, 0), var(--hn-navigation-y, 0));
+  }
+}
+
+@utility hn-anim-navigation-content {
+  --hn-navigation-x: var(--hn-navigation-travel, 0px);
+
+  &[data-orientation='vertical'] {
+    --hn-navigation-x: 0px;
+    --hn-navigation-y: var(--hn-navigation-travel, 0px);
+  }
+
+  &[data-orientation='vertical']:dir(rtl) {
+    --hn-navigation-y: calc(var(--hn-navigation-travel, 0px) * -1);
+  }
+
+  &[data-motion='from-start'],
+  &[data-motion='to-start'] {
+    --hn-navigation-travel: calc(var(--hn-travel-md) * -1);
+  }
+  &[data-motion='from-end'],
+  &[data-motion='to-end'] {
+    --hn-navigation-travel: var(--hn-travel-md);
+  }
+  &[data-motion^='from-'] {
+    animation: hn-navigation-in var(--hn-duration-base) var(--hn-ease-enter);
+  }
+  &[data-motion^='to-'] {
+    animation: hn-navigation-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(--hn-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(--hn-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;
+    }
+  }
+}
+
+@utility hn-sidebar {
+  transition:
+    width var(--hn-duration-base) var(--hn-ease-move),
+    border-color var(--hn-duration-base) var(--hn-ease-move),
+    visibility 0s;
+
+  &[data-state='hidden'] {
+    visibility: hidden;
+    transition:
+      width var(--hn-duration-base) var(--hn-ease-move),
+      border-color var(--hn-duration-base) var(--hn-ease-move),
+      visibility 0s var(--hn-duration-base);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+@utility hn-sidebar-label {
+  opacity: 1;
+  visibility: visible;
+  transition:
+    opacity var(--hn-duration-fast) var(--hn-ease-enter) var(--hn-duration-fast),
+    visibility 0s var(--hn-duration-fast);
+
+  &[data-collapsed] {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition:
+      opacity calc(var(--hn-duration-fast) / 2) var(--hn-ease-exit),
+      visibility 0s calc(var(--hn-duration-fast) / 2);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}