morya-ui 0.4.2 → 0.4.4

package/dist/components/Button/types.d.ts

@@ -16,11 +16,7 @@ export type ButtonLoading = boolean | {
     delay?: number;
     icon?: IconName | Component;
 };
-export interface ButtonPassThrough {
-    root?: PassThroughPart;
-    icon?: PassThroughPart;
-    content?: PassThroughPart;
-}
+export type ButtonPassThrough = Partial<Record<'root' | 'icon' | 'content', PassThroughPart>>;
 export interface ButtonProps {
     /** Sugar for a preset `[color, variant]` pair. Overridden when both `color` and `variant` are set. */
     type?: ButtonType;

package/dist/components/Button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.ts"],"names":[],"mappings":"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"}

package/dist/components/Carousel/styles.css

@@ -1,302 +1,302 @@
-/* —— Media: Carousel —— */
-.m-carousel {
-    --m-carousel-dot-size: 0.5rem;
-    --m-carousel-dot-line-width: 1rem;
-    --m-carousel-dot-line-width-active: 1.75rem;
-    --m-carousel-dot-line-thickness: 0.25rem;
-    --m-carousel-duration: 300ms;
-    --m-carousel-gap: 0px;
-    --m-carousel-arrow-inset: var(--m-space-3);
-    --m-carousel-dots-inset: var(--m-space-3);
-    box-sizing: border-box;
-    display: block;
-    height: 100%;
-    max-width: 100%;
-    min-width: 0;
-    outline: none;
-    overflow: hidden;
-    position: relative;
-    touch-action: pan-y;
-    width: 100%;
-}
-
-.m-carousel--vertical {
-    touch-action: pan-x;
-}
-
-.m-carousel__viewport {
-    height: 100%;
-    overflow: hidden;
-    width: 100%;
-}
-
-.m-carousel__slides {
-    display: flex;
-    gap: var(--m-carousel-gap);
-    height: 100%;
-    transition: transform var(--m-carousel-duration) var(--m-motion-ease);
-    will-change: transform;
-}
-
-.m-carousel__slides--instant {
-    transition: none;
-}
-
-.m-carousel--vertical .m-carousel__slides {
-    flex-direction: column;
-}
-
-.m-carousel__slide {
-    box-sizing: border-box;
-    flex-shrink: 0;
-    height: 100%;
-    min-width: 0;
-    outline: none;
-    overflow: hidden;
-    position: relative;
-    width: 100%;
-}
-
-.m-carousel__slide-content {
-    height: 100%;
-    width: 100%;
-}
-
-.m-carousel__slide-content > img {
-    display: block;
-    height: 100%;
-    object-fit: cover;
-    width: 100%;
-}
-
-/* fade */
-.m-carousel--fade .m-carousel__slides {
-    display: block;
-    height: 100%;
-    position: relative;
-    transform: none !important;
-    width: 100%;
-}
-
-.m-carousel--fade .m-carousel__slide {
-    inset: 0;
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-    transition: opacity var(--m-carousel-duration) var(--m-motion-ease);
-    width: 100%;
-}
-
-.m-carousel--fade .m-carousel__slide--current {
-    height: 100%;
-    opacity: 1;
-    pointer-events: auto;
-    position: relative;
-    width: 100%;
-}
-
-/* card */
-.m-carousel--card .m-carousel__slides {
-    height: 100%;
-    perspective: 1000px;
-    position: relative;
-    transform: none !important;
-    width: 100%;
-}
-
-.m-carousel--card .m-carousel__slide {
-    left: 50%;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    transform: translateX(-50%) translateZ(-400px);
-    transition:
-        opacity var(--m-carousel-duration) var(--m-motion-ease),
-        transform var(--m-carousel-duration) var(--m-motion-ease);
-    width: 60%;
-}
-
-.m-carousel--card .m-carousel__slide--current {
-    opacity: 1;
-    transform: translateX(-50%) translateZ(0);
-    z-index: 2;
-}
-
-.m-carousel--card .m-carousel__slide--prev {
-    opacity: 0.45;
-    transform: translateX(-100%) translateZ(-200px);
-    z-index: 1;
-}
-
-.m-carousel--card .m-carousel__slide--next {
-    opacity: 0.45;
-    transform: translateX(0%) translateZ(-200px);
-    z-index: 1;
-}
-
-.m-carousel--card.m-carousel--vertical .m-carousel__slide {
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%) translateZ(-400px);
-    width: 100%;
-}
-
-.m-carousel--card.m-carousel--vertical .m-carousel__slide--current {
-    transform: translateY(-50%) translateZ(0);
-}
-
-.m-carousel--card.m-carousel--vertical .m-carousel__slide--prev {
-    transform: translateY(-100%) translateZ(-200px);
-}
-
-.m-carousel--card.m-carousel--vertical .m-carousel__slide--next {
-    transform: translateY(0%) translateZ(-200px);
-}
-
-/* arrows */
-.m-carousel__arrows {
-    display: contents;
-}
-
-.m-carousel__arrow {
-    backdrop-filter: blur(6px);
-    box-shadow: var(--m-shadow-sm);
-    position: absolute;
-    z-index: 3;
-}
-
-.m-carousel--horizontal .m-carousel__arrow--prev {
-    left: var(--m-carousel-arrow-inset);
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.m-carousel--horizontal .m-carousel__arrow--next {
-    right: var(--m-carousel-arrow-inset);
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.m-carousel--vertical .m-carousel__arrow {
-    left: 50%;
-}
-
-.m-carousel--vertical .m-carousel__arrow--prev {
-    top: var(--m-carousel-arrow-inset);
-    transform: translateX(-50%) rotate(90deg);
-}
-
-.m-carousel--vertical .m-carousel__arrow--next {
-    bottom: var(--m-carousel-arrow-inset);
-    top: auto;
-    transform: translateX(-50%) rotate(90deg);
-}
-
-/* dots */
-.m-carousel__dots {
-    display: flex;
-    flex-wrap: nowrap;
-    gap: var(--m-space-1);
-    position: absolute;
-    z-index: 3;
-}
-
-.m-carousel--dots-bottom .m-carousel__dots {
-    bottom: var(--m-carousel-dots-inset);
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-.m-carousel--dots-top .m-carousel__dots {
-    left: 50%;
-    top: var(--m-carousel-dots-inset);
-    transform: translateX(-50%);
-}
-
-.m-carousel--dots-left .m-carousel__dots {
-    flex-direction: column;
-    left: var(--m-carousel-dots-inset);
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.m-carousel--dots-right .m-carousel__dots {
-    flex-direction: column;
-    right: var(--m-carousel-dots-inset);
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.m-carousel__dot {
-    background: color-mix(in srgb, var(--m-color-text-muted) 45%, transparent);
-    border: 0;
-    cursor: pointer;
-    padding: 0;
-    position: relative;
-    transition:
-        background-color var(--m-motion-fast) var(--m-motion-ease),
-        width var(--m-motion-fast) var(--m-motion-ease),
-        height var(--m-motion-fast) var(--m-motion-ease),
-        box-shadow var(--m-motion-fast) var(--m-motion-ease);
-}
-
-.m-carousel__dot::after {
-    content: '';
-    inset: -0.4rem;
-    position: absolute;
-}
-
-.m-carousel__dots--dot .m-carousel__dot {
-    border-radius: var(--m-radius-full);
-    height: var(--m-carousel-dot-size);
-    width: var(--m-carousel-dot-size);
-}
-
-.m-carousel__dots--line .m-carousel__dot {
-    background: color-mix(in srgb, var(--m-color-text-muted) 40%, transparent);
-    border-radius: var(--m-radius-full);
-    height: var(--m-carousel-dot-line-thickness);
-    width: var(--m-carousel-dot-line-width);
-}
-
-.m-carousel--dots-left .m-carousel__dots--line .m-carousel__dot,
-.m-carousel--dots-right .m-carousel__dots--line .m-carousel__dot {
-    height: var(--m-carousel-dot-line-width);
-    width: var(--m-carousel-dot-line-thickness);
-}
-
-.m-carousel__dot:hover {
-    background: color-mix(in srgb, var(--m-color-text-muted) 75%, transparent);
-}
-
-.m-carousel__dot:focus-visible {
-    box-shadow: var(--m-focus-shadow);
-    outline: none;
-}
-
-.m-carousel__dot--active,
-.m-carousel__dot--active:hover {
-    background: var(--m-color-primary);
-}
-
-.m-carousel__dots--line .m-carousel__dot--active {
-    width: var(--m-carousel-dot-line-width-active);
-}
-
-.m-carousel--dots-left .m-carousel__dots--line .m-carousel__dot--active,
-.m-carousel--dots-right .m-carousel__dots--line .m-carousel__dot--active {
-    height: var(--m-carousel-dot-line-width-active);
-    width: var(--m-carousel-dot-line-thickness);
-}
-
-.m-carousel--dragging {
-    cursor: grabbing;
-    user-select: none;
-}
-
-[data-m-motion='reduced'] .m-carousel__slides,
-[data-m-motion='none'] .m-carousel__slides,
-[data-m-motion='reduced'] .m-carousel__slide,
-[data-m-motion='none'] .m-carousel__slide {
-    transition: none;
-}
+/* —— Media: Carousel —— */
+.m-carousel {
+    --m-carousel-dot-size: 0.5rem;
+    --m-carousel-dot-line-width: 1rem;
+    --m-carousel-dot-line-width-active: 1.75rem;
+    --m-carousel-dot-line-thickness: 0.25rem;
+    --m-carousel-duration: 300ms;
+    --m-carousel-gap: 0px;
+    --m-carousel-arrow-inset: var(--m-space-3);
+    --m-carousel-dots-inset: var(--m-space-3);
+    box-sizing: border-box;
+    display: block;
+    height: 100%;
+    max-width: 100%;
+    min-width: 0;
+    outline: none;
+    overflow: hidden;
+    position: relative;
+    touch-action: pan-y;
+    width: 100%;
+}
+
+.m-carousel--vertical {
+    touch-action: pan-x;
+}
+
+.m-carousel__viewport {
+    height: 100%;
+    overflow: hidden;
+    width: 100%;
+}
+
+.m-carousel__slides {
+    display: flex;
+    gap: var(--m-carousel-gap);
+    height: 100%;
+    transition: transform var(--m-carousel-duration) var(--m-motion-ease);
+    will-change: transform;
+}
+
+.m-carousel__slides--instant {
+    transition: none;
+}
+
+.m-carousel--vertical .m-carousel__slides {
+    flex-direction: column;
+}
+
+.m-carousel__slide {
+    box-sizing: border-box;
+    flex-shrink: 0;
+    height: 100%;
+    min-width: 0;
+    outline: none;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+}
+
+.m-carousel__slide-content {
+    height: 100%;
+    width: 100%;
+}
+
+.m-carousel__slide-content > img {
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+}
+
+/* fade */
+.m-carousel--fade .m-carousel__slides {
+    display: block;
+    height: 100%;
+    position: relative;
+    transform: none !important;
+    width: 100%;
+}
+
+.m-carousel--fade .m-carousel__slide {
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    transition: opacity var(--m-carousel-duration) var(--m-motion-ease);
+    width: 100%;
+}
+
+.m-carousel--fade .m-carousel__slide--current {
+    height: 100%;
+    opacity: 1;
+    pointer-events: auto;
+    position: relative;
+    width: 100%;
+}
+
+/* card */
+.m-carousel--card .m-carousel__slides {
+    height: 100%;
+    perspective: 1000px;
+    position: relative;
+    transform: none !important;
+    width: 100%;
+}
+
+.m-carousel--card .m-carousel__slide {
+    left: 50%;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    transform: translateX(-50%) translateZ(-400px);
+    transition:
+        opacity var(--m-carousel-duration) var(--m-motion-ease),
+        transform var(--m-carousel-duration) var(--m-motion-ease);
+    width: 60%;
+}
+
+.m-carousel--card .m-carousel__slide--current {
+    opacity: 1;
+    transform: translateX(-50%) translateZ(0);
+    z-index: 2;
+}
+
+.m-carousel--card .m-carousel__slide--prev {
+    opacity: 0.45;
+    transform: translateX(-100%) translateZ(-200px);
+    z-index: 1;
+}
+
+.m-carousel--card .m-carousel__slide--next {
+    opacity: 0.45;
+    transform: translateX(0%) translateZ(-200px);
+    z-index: 1;
+}
+
+.m-carousel--card.m-carousel--vertical .m-carousel__slide {
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%) translateZ(-400px);
+    width: 100%;
+}
+
+.m-carousel--card.m-carousel--vertical .m-carousel__slide--current {
+    transform: translateY(-50%) translateZ(0);
+}
+
+.m-carousel--card.m-carousel--vertical .m-carousel__slide--prev {
+    transform: translateY(-100%) translateZ(-200px);
+}
+
+.m-carousel--card.m-carousel--vertical .m-carousel__slide--next {
+    transform: translateY(0%) translateZ(-200px);
+}
+
+/* arrows */
+.m-carousel__arrows {
+    display: contents;
+}
+
+.m-carousel__arrow {
+    backdrop-filter: blur(6px);
+    box-shadow: var(--m-shadow-sm);
+    position: absolute;
+    z-index: 3;
+}
+
+.m-carousel--horizontal .m-carousel__arrow--prev {
+    left: var(--m-carousel-arrow-inset);
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.m-carousel--horizontal .m-carousel__arrow--next {
+    right: var(--m-carousel-arrow-inset);
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.m-carousel--vertical .m-carousel__arrow {
+    left: 50%;
+}
+
+.m-carousel--vertical .m-carousel__arrow--prev {
+    top: var(--m-carousel-arrow-inset);
+    transform: translateX(-50%) rotate(90deg);
+}
+
+.m-carousel--vertical .m-carousel__arrow--next {
+    bottom: var(--m-carousel-arrow-inset);
+    top: auto;
+    transform: translateX(-50%) rotate(90deg);
+}
+
+/* dots */
+.m-carousel__dots {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--m-space-1);
+    position: absolute;
+    z-index: 3;
+}
+
+.m-carousel--dots-bottom .m-carousel__dots {
+    bottom: var(--m-carousel-dots-inset);
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.m-carousel--dots-top .m-carousel__dots {
+    left: 50%;
+    top: var(--m-carousel-dots-inset);
+    transform: translateX(-50%);
+}
+
+.m-carousel--dots-left .m-carousel__dots {
+    flex-direction: column;
+    left: var(--m-carousel-dots-inset);
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.m-carousel--dots-right .m-carousel__dots {
+    flex-direction: column;
+    right: var(--m-carousel-dots-inset);
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.m-carousel__dot {
+    background: color-mix(in srgb, var(--m-color-text-muted) 45%, transparent);
+    border: 0;
+    cursor: pointer;
+    padding: 0;
+    position: relative;
+    transition:
+        background-color var(--m-motion-fast) var(--m-motion-ease),
+        width var(--m-motion-fast) var(--m-motion-ease),
+        height var(--m-motion-fast) var(--m-motion-ease),
+        box-shadow var(--m-motion-fast) var(--m-motion-ease);
+}
+
+.m-carousel__dot::after {
+    content: '';
+    inset: -0.4rem;
+    position: absolute;
+}
+
+.m-carousel__dots--dot .m-carousel__dot {
+    border-radius: var(--m-radius-full);
+    height: var(--m-carousel-dot-size);
+    width: var(--m-carousel-dot-size);
+}
+
+.m-carousel__dots--line .m-carousel__dot {
+    background: color-mix(in srgb, var(--m-color-text-muted) 40%, transparent);
+    border-radius: var(--m-radius-full);
+    height: var(--m-carousel-dot-line-thickness);
+    width: var(--m-carousel-dot-line-width);
+}
+
+.m-carousel--dots-left .m-carousel__dots--line .m-carousel__dot,
+.m-carousel--dots-right .m-carousel__dots--line .m-carousel__dot {
+    height: var(--m-carousel-dot-line-width);
+    width: var(--m-carousel-dot-line-thickness);
+}
+
+.m-carousel__dot:hover {
+    background: color-mix(in srgb, var(--m-color-text-muted) 75%, transparent);
+}
+
+.m-carousel__dot:focus-visible {
+    box-shadow: var(--m-focus-shadow);
+    outline: none;
+}
+
+.m-carousel__dot--active,
+.m-carousel__dot--active:hover {
+    background: var(--m-color-primary);
+}
+
+.m-carousel__dots--line .m-carousel__dot--active {
+    width: var(--m-carousel-dot-line-width-active);
+}
+
+.m-carousel--dots-left .m-carousel__dots--line .m-carousel__dot--active,
+.m-carousel--dots-right .m-carousel__dots--line .m-carousel__dot--active {
+    height: var(--m-carousel-dot-line-width-active);
+    width: var(--m-carousel-dot-line-thickness);
+}
+
+.m-carousel--dragging {
+    cursor: grabbing;
+    user-select: none;
+}
+
+[data-m-motion='reduced'] .m-carousel__slides,
+[data-m-motion='none'] .m-carousel__slides,
+[data-m-motion='reduced'] .m-carousel__slide,
+[data-m-motion='none'] .m-carousel__slide {
+    transition: none;
+}