@flux-ui/components 3.0.0-next.0

package/src/css/mixin/breakpoints.scss

@@ -0,0 +1,112 @@
+@use 'sass:list';
+@use 'sass:map';
+
+$-breakpoints: (
+    xs: 0,
+    sm: 640px,
+    md: 768px,
+    lg: 1024px,
+    xl: 1280px
+);
+
+@function -next($breakpoint) {
+    $names: map.keys($-breakpoints);
+    $n: list.index($names, $breakpoint);
+
+    @if not $n {
+        @error 'Breakpoint "#{$breakpoint}" not found in "#{$names}".';
+    }
+
+    @return if($n < list.length($names), list.nth($names, $n + 1), null);
+}
+
+@function -maxWidth($breakpoint) {
+    $next: -next($breakpoint);
+
+    @return if($next, -minWidth($next) - .02, null);
+}
+
+@function -minWidth($breakpoint) {
+    $min: map.get($-breakpoints, $breakpoint);
+
+    @return if($min != 0, $min, null);
+}
+
+@mixin breakpoint-between($lower, $upper) {
+    $max: -maxWidth($upper);
+    $min: -minWidth($lower);
+
+    @if $max != null and $min != null {
+        @media (max-width: #{$max}) and (min-width: #{$min}) {
+            @content;
+        }
+    } @else if $max == null {
+        @include breakpoint-up($lower);
+    } @else if $min == null {
+        @include breakpoint-down($upper);
+    }
+}
+
+@mixin breakpoint-down($breakpoint) {
+    $max: -maxWidth($breakpoint);
+
+    @if $max {
+        @media (max-width: #{$max}) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin breakpoint-only($breakpoint) {
+    @include breakpoint-between($breakpoint, $breakpoint);
+}
+
+@mixin breakpoint-up($breakpoint) {
+    $min: -minWidth($breakpoint);
+
+    @if $min {
+        @media (min-width: #{$min}) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin container-breakpoint-down($container, $breakpoint) {
+    $max: -maxWidth($breakpoint);
+
+    @if $max {
+        @container #{$container} (max-width: #{$max}) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin container-breakpoint-up($container, $breakpoint) {
+    $min: -minWidth($breakpoint);
+
+    @if $min {
+        @container #{$container} (min-width: #{$min}) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin breakpoint-max-widths {
+    @each $-breakpoint, $-max-width in $-breakpoints {
+        @if $-breakpoint != xs {
+            @include breakpoint-up($-breakpoint) {
+                & {
+                    max-width: #{$-max-width};
+                }
+            }
+        }
+    }
+}

package/src/css/mixin/focus-ring.scss

@@ -0,0 +1,56 @@
+@mixin focus-outline {
+    outline: 2px solid rgb(var(--primary-7) / 0);
+    outline-offset: 0;
+}
+
+@mixin focus-outline-visible($offset: 0) {
+    outline-color: rgb(var(--primary-7));
+    outline-offset: $offset;
+}
+
+@mixin focus-ring($offset: 0, $within: false) {
+    @include focus-outline;
+
+    @if $within == true {
+        &:focus-visible,
+        &:focus-within {
+            @include focus-outline-visible($offset);
+        }
+    } @else {
+        &:focus-visible {
+            @include focus-outline-visible($offset);
+        }
+    }
+}
+
+@mixin focus-ring-pseudo($selector, $offset: 0, $within: false) {
+    &::#{$selector} {
+        @include focus-outline;
+    }
+
+    @if $within == true {
+        &:focus-visible::#{$selector},
+        &:focus-within::#{$selector} {
+            @include focus-outline-visible($offset);
+        }
+    } @else {
+        &:focus-visible::#{$selector} {
+            @include focus-outline-visible($offset);
+        }
+    }
+}
+
+@mixin focus-ring-remove {
+    outline: 0 !important;
+}
+
+@mixin focus-ring-transition($offset: 0, $within: false) {
+    transition: 180ms var(--swift-out);
+    transition-property: focus-ring-transition-properties();
+
+    @include focus-ring($offset, $within);
+}
+
+@function focus-ring-transition-properties() {
+    @return outline-color, outline-offset;
+}

package/src/css/mixin/hover.scss

@@ -0,0 +1,7 @@
+@mixin hover {
+    @media (hover: hover) {
+        &:hover {
+            @content;
+        }
+    }
+}

package/src/css/mixin/index.scss

@@ -0,0 +1,3 @@
+@forward 'breakpoints';
+@forward 'focus-ring';
+@forward 'hover';

package/src/css/reset.scss

@@ -0,0 +1,169 @@
+@layer flux-reset {
+    // More intuitive box-sizing model.
+    *, *::before, *::after {
+        box-sizing: border-box;
+    }
+
+    // Remove default margin.
+    * {
+        margin: 0;
+    }
+
+    // Keyword animations.
+    //html {
+    //    interpolate-size: allow-keywords;
+    //}
+
+    body {
+        // Accessible line-height.
+        line-height: 1.5;
+
+        // Improved text rendering.
+        -webkit-font-smoothing: antialiased;
+
+        // Remove tap highlight color on iOS and macOS.
+        -webkit-tap-highlight-color: rgb(0 0 0 / 0);
+
+        // Default tab size.
+        -moz-tab-size: 4;
+        tab-size: 4;
+    }
+
+    // Improved media defaults.
+    img, picture, video, canvas, svg {
+        display: block;
+        max-width: 100%;
+    }
+
+    /* 7. Inherit fonts for form controls */
+    input, button, textarea, select {
+        font: inherit;
+    }
+
+    /* 8. Avoid text overflows */
+    p, h1, h2, h3, h4, h5, h6 {
+        overflow-wrap: break-word;
+    }
+
+    // Improved line wrapping for paragraphs.
+    p {
+        text-wrap: pretty;
+    }
+
+    // Improved line wrapping for headings.
+    h1, h2, h3, h4, h5, h6 {
+        text-wrap: balance;
+    }
+
+    // Remove automatic text transforms from buttons and selects.
+    button, select {
+        text-transform: none;
+    }
+
+    // Create a new root stacking context.
+    #app {
+        isolation: isolate;
+    }
+}
+
+//@layer flux-reset {
+//    *,
+//    *::before,
+//    *::after {
+//        box-sizing: border-box;
+//    }
+//
+//    html {
+//        line-height: 1.6;
+//        -webkit-text-size-adjust: 100%;
+//        -webkit-tap-highlight-color: rgb(0 0 0 / 0);
+//        -moz-tab-size: 4;
+//        tab-size: 4;
+//    }
+//
+//    body {
+//        margin: 0;
+//        padding: 0;
+//        line-height: inherit;
+//    }
+//
+//    blockquote,
+//    dl,
+//    dd,
+//    h1,
+//    h2,
+//    h3,
+//    h4,
+//    h5,
+//    h6,
+//    hr,
+//    figure,
+//    p,
+//    pre {
+//        margin: 0;
+//    }
+//
+//    h1,
+//    h2,
+//    h3,
+//    h4,
+//    h5,
+//    h6 {
+//        font-size: inherit;
+//        font-weight: inherit;
+//    }
+//
+//    ul,
+//    ol {
+//        margin: 0;
+//    }
+//
+//    code,
+//    kbd,
+//    samp,
+//    pre {
+//        font-family: monospace;
+//        font-size: 1em;
+//    }
+//
+//    small {
+//        font-size: 80%;
+//    }
+//
+//    sub,
+//    sup {
+//        position: relative;
+//        font-size: 75%;
+//        line-height: 0;
+//        vertical-align: baseline;
+//    }
+//
+//    sub {
+//        bottom: -0.25em;
+//    }
+//
+//    sup {
+//        top: -0.5em;
+//    }
+//
+//    button,
+//    select {
+//        text-transform: none;
+//    }
+//
+//    button,
+//    input,
+//    textarea {
+//        font: inherit;
+//    }
+//
+//    a {
+//        color: inherit;
+//        text-decoration: none;
+//    }
+//
+//    b,
+//    strong {
+//        font-weight: bolder;
+//    }
+//}

package/src/css/typography.scss

@@ -0,0 +1,87 @@
+@layer flux-base {
+    h1, h2, h3, h4, h5, h6 {
+        font-weight: 700;
+        line-height: 1.6;
+        text-wrap: balance;
+    }
+
+    h1 {
+        color: var(--foreground-prominent);
+        font-size: 30px;
+    }
+
+    h2 {
+        color: var(--foreground-prominent);
+        font-size: 21px;
+    }
+
+    h3 {
+        color: var(--foreground);
+        font-size: 18px;
+    }
+
+    h4 {
+        font-size: 16px;
+    }
+
+    h5 {
+        font-size: 15px;
+    }
+
+    h6 {
+        font-size: 14px;
+    }
+
+    a:not([class]), a[class=""] {
+        color: rgb(var(--primary-7));
+        text-decoration: underline;
+        text-decoration-thickness: 1px;
+        text-underline-offset: 4px;
+
+        &:hover {
+            text-decoration: none;
+        }
+    }
+
+    p {
+        line-height: 1.8;
+    }
+
+    blockquote {
+        position: relative;
+        margin: 0 0 0 30px;
+        padding: 15px 21px;
+        background: rgb(var(--gray-2));
+        border-radius: var(--radius);
+
+        &::before {
+            position: absolute;
+            top: 5px;
+            left: -27px;
+            content: '”';
+            color: rgb(var(--primary-7));
+            font-size: 39px;
+            font-weight: 700;
+        }
+    }
+
+    img:not([class]) {
+        height: unset;
+        max-width: 100%;
+        border-radius: calc(var(--radius) / 2);
+        outline: 1px solid rgb(0 0 0 / .025);
+        outline-offset: -1px;
+    }
+
+    :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, img, [data-typography-aware]) + :where(h1, h2, h3) {
+        margin-top: 33px;
+    }
+
+    :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, img, [data-typography-aware]) + :where(h4, h5, h6, p, ul, ol, li, blockquote, img) {
+        margin-top: 12px;
+    }
+
+    :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, img, [data-typography-aware]) + :where([data-typography-aware]) {
+        margin-top: 21px;
+    }
+}

package/src/css/variables.scss

@@ -0,0 +1,214 @@
+@use 'sass:color';
+
+@function -rgb($hex) {
+    @return color.channel($hex, 'red', $space: rgb) color.channel($hex, 'green', $space: rgb) color.channel($hex, 'blue', $space: rgb);
+}
+
+@mixin animation {
+    --acceleration-curve: cubic-bezier(0.4, 0, 1, 1);
+    --deceleration-curve: cubic-bezier(0, 0, 0.2, 1);
+    --standard-curve: cubic-bezier(0.4, 0, 0.2, 1);
+    --swift-out: cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+@mixin color-light {
+    --primary-0: #{-rgb(#ffffff)};
+    --primary-1: #{-rgb(#f5f8ff)};
+    --primary-2: #{-rgb(#eff4ff)};
+    --primary-3: #{-rgb(#d1e0ff)};
+    --primary-4: #{-rgb(#b2ccff)};
+    --primary-5: #{-rgb(#84adff)};
+    --primary-6: #{-rgb(#528bff)};
+    --primary-7: #{-rgb(#2970ff)};
+    --primary-8: #{-rgb(#155eef)};
+    --primary-9: #{-rgb(#004eeb)};
+    --primary-10: #{-rgb(#0040c1)};
+    --primary-11: #{-rgb(#00359e)};
+
+    --danger-0: #{-rgb(#ffffff)};
+    --danger-1: #{-rgb(#fff1f2)};
+    --danger-2: #{-rgb(#ffe4e6)};
+    --danger-3: #{-rgb(#ffccd3)};
+    --danger-4: #{-rgb(#ffa1ad)};
+    --danger-5: #{-rgb(#ff637e)};
+    --danger-6: #{-rgb(#ff2056)};
+    --danger-7: #{-rgb(#ec003f)};
+    --danger-8: #{-rgb(#c70036)};
+    --danger-9: #{-rgb(#a50036)};
+    --danger-10: #{-rgb(#8b0836)};
+    --danger-11: #{-rgb(#4d0218)};
+
+    --info-0: #{-rgb(#ffffff)};
+    --info-1: #{-rgb(#eff6ff)};
+    --info-2: #{-rgb(#dbeafe)};
+    --info-3: #{-rgb(#bedbff)};
+    --info-4: #{-rgb(#8ec5ff)};
+    --info-5: #{-rgb(#51a2ff)};
+    --info-6: #{-rgb(#2b7fff)};
+    --info-7: #{-rgb(#155dfc)};
+    --info-8: #{-rgb(#1447e6)};
+    --info-9: #{-rgb(#193cb8)};
+    --info-10: #{-rgb(#1c398e)};
+    --info-11: #{-rgb(#162456)};
+
+    --success-0: #{-rgb(#ffffff)};
+    --success-1: #{-rgb(#f0fdf4)};
+    --success-2: #{-rgb(#dcfce7)};
+    --success-3: #{-rgb(#b9f8cf)};
+    --success-4: #{-rgb(#7bf1a8)};
+    --success-5: #{-rgb(#05df72)};
+    --success-6: #{-rgb(#00c950)};
+    --success-7: #{-rgb(#00a63e)};
+    --success-8: #{-rgb(#008236)};
+    --success-9: #{-rgb(#016630)};
+    --success-10: #{-rgb(#0d542b)};
+    --success-11: #{-rgb(#032e15)};
+
+    --warning-0: #{-rgb(#ffffff)};
+    --warning-1: #{-rgb(#fffbeb)};
+    --warning-2: #{-rgb(#fef3c6)};
+    --warning-3: #{-rgb(#fee685)};
+    --warning-4: #{-rgb(#ffd230)};
+    --warning-5: #{-rgb(#ffb900)};
+    --warning-6: #{-rgb(#fe9a00)};
+    --warning-7: #{-rgb(#e17100)};
+    --warning-8: #{-rgb(#bb4d00)};
+    --warning-9: #{-rgb(#973c00)};
+    --warning-10: #{-rgb(#7b3306)};
+    --warning-11: #{-rgb(#461901)};
+
+    --gray-0: #{-rgb(#ffffff)};
+    --gray-1: #{-rgb(#f8fafc)};
+    --gray-2: #{-rgb(#f1f5f9)};
+    --gray-3: #{-rgb(#e2e8f0)};
+    --gray-4: #{-rgb(#cad5e2)};
+    --gray-5: #{-rgb(#90a1b9)};
+    --gray-6: #{-rgb(#62748e)};
+    --gray-7: #{-rgb(#45556c)};
+    --gray-8: #{-rgb(#314158)};
+    --gray-9: #{-rgb(#1d293d)};
+    --gray-10: #{-rgb(#0f172b)};
+    --gray-11: #{-rgb(#020618)};
+}
+
+@mixin color-dark {
+    //--primary-0: #{-rgb(#182035)};
+    //--primary-1: #{-rgb(#1f2a45)};
+    //--primary-2: #{-rgb(#243254)};
+    //--primary-3: #{-rgb(#2b3c63)};
+    //--primary-4: #{-rgb(#314471)};
+    //--primary-5: #{-rgb(#385080)};
+    //--primary-6: #{-rgb(#3e5a8e)};
+    //--primary-7: #{-rgb(#44669e)};
+    //--primary-8: #{-rgb(#5077b0)};
+    //--primary-9: #{-rgb(#5a84bf)};
+    //--primary-10: #{-rgb(#6594d1)};
+    //--primary-11: #{-rgb(#709fe3)};
+
+    --danger-0: #{-rgb(#272325)};
+    --danger-1: #{-rgb(#331e23)};
+    --danger-2: #{-rgb(#3e1f28)};
+    --danger-3: #{-rgb(#4c222e)};
+    --danger-4: #{-rgb(#5b2635)};
+    --danger-5: #{-rgb(#6a2b3e)};
+    --danger-6: #{-rgb(#7a3047)};
+    --danger-7: #{-rgb(#8b3552)};
+    --danger-8: #{-rgb(#9e3a5f)};
+    --danger-9: #{-rgb(#a53d6e)};
+    --danger-10: #{-rgb(#b63e7c)};
+    --danger-11: #{-rgb(#c8408c)};
+
+    --info-0: #{-rgb(#23262c)};
+    --info-1: #{-rgb(#1f2832)};
+    --info-2: #{-rgb(#243141)};
+    --info-3: #{-rgb(#2a3d52)};
+    --info-4: #{-rgb(#2f4a66)};
+    --info-5: #{-rgb(#34567b)};
+    --info-6: #{-rgb(#3b638f)};
+    --info-7: #{-rgb(#436fa3)};
+    --info-8: #{-rgb(#4b7bb7)};
+    --info-9: #{-rgb(#5588cb)};
+    --info-10: #{-rgb(#6094df)};
+    --info-11: #{-rgb(#6aa3f3)};
+
+    --success-0: #{-rgb(#1d2620)};
+    --success-1: #{-rgb(#222d26)};
+    --success-2: #{-rgb(#26342c)};
+    --success-3: #{-rgb(#2c4435)};
+    --success-4: #{-rgb(#33543e)};
+    --success-5: #{-rgb(#3a6547)};
+    --success-6: #{-rgb(#417651)};
+    --success-7: #{-rgb(#4b875d)};
+    --success-8: #{-rgb(#589967)};
+    --success-9: #{-rgb(#6eac74)};
+    --success-10: #{-rgb(#86ba86)};
+    --success-11: #{-rgb(#9bc89b)};
+
+    --warning-0: #{-rgb(#2b261a)};
+    --warning-1: #{-rgb(#332b1b)};
+    --warning-2: #{-rgb(#3d321e)};
+    --warning-3: #{-rgb(#4a3c21)};
+    --warning-4: #{-rgb(#554825)};
+    --warning-5: #{-rgb(#63552a)};
+    --warning-6: #{-rgb(#74602f)};
+    --warning-7: #{-rgb(#8a6c34)};
+    --warning-8: #{-rgb(#a37b3a)};
+    --warning-9: #{-rgb(#c19041)};
+    --warning-10: #{-rgb(#d5a048)};
+    --warning-11: #{-rgb(#eab14f)};
+
+    --gray-0: #{-rgb(#14161a)};
+    --gray-1: #{-rgb(#1b1d21)};
+    --gray-2: #{-rgb(#22252b)};
+    --gray-3: #{-rgb(#2a2d33)};
+    --gray-4: #{-rgb(#333b3d)};
+    --gray-5: #{-rgb(#3d464a)};
+    --gray-6: #{-rgb(#475055)};
+    --gray-7: #{-rgb(#515d60)};
+    --gray-8: #{-rgb(#5c696b)};
+    --gray-9: #{-rgb(#677577)};
+    --gray-10: #{-rgb(#738180)};
+    --gray-11: #{-rgb(#7f8c8c)};
+}
+
+@mixin default-light {
+    --font-monospace: jetbrains-mono, monospace;
+    --font-sans: inter-variable, sans-serif;
+    --font-serif: serif;
+    --font-size: 15px;
+    --radius: 9px;
+
+    --background: rgb(var(--gray-2));
+
+    --foreground: rgb(var(--gray-8));
+    --foreground-prominent: rgb(var(--gray-10));
+    --foreground-secondary: rgb(var(--gray-5));
+}
+
+@mixin default-dark {
+    --background: rgb(var(--gray-2));
+
+    --foreground: #cbd5e1;
+    --foreground-prominent: #ffffff;
+    --foreground-secondary: #64748b;
+}
+
+@mixin shadow-light {
+    --shadow-px: 0 1px 1px rgb(29 41 61 / .025);
+    --shadow-xs: 0 1px 2px 0 rgb(29 41 61 / .025);
+    --shadow-sm: 0 1px 3px rgb(29 41 61 / .05), 0 1px 2px -1px rgb(29 41 61 / .05);
+    --shadow-md: 0 4px 6px -1px rgb(29 41 61 / .05), 0 2px 4px -2px rgb(29 41 61 / .05);
+    --shadow-lg: 0 10px 15px -3px rgb(29 41 61 / .05), 0 4px 6px -4px rgb(29 41 61 / .05);
+    --shadow-xl: 0 20px 25px -5px rgb(29 41 61 / .05), 0 8px 10px -6px rgb(29 41 61 / .05);
+    --shadow-2xl: 0 25px 50px -12px rgb(29 41 61 / .125);
+}
+
+@mixin shadow-dark {
+    --shadow-px: 0 1px 1px rgb(0 0 0 / .05);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
+    --shadow-sm: 0 1px 3px rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);
+}

package/src/data/di.ts

@@ -0,0 +1,42 @@
+import type { FluxFilterState, FluxFilterValue } from '@flux-ui/types';
+import type { ComponentInternalInstance, InjectionKey, Ref } from 'vue';
+
+export const FluxDisabledInjectionKey: InjectionKey<Ref<boolean>> = Symbol();
+export const FluxExpandableGroupInjectionKey: InjectionKey<FluxExpandableGroupInjection> = Symbol();
+export const FluxFlyoutInjectionKey: InjectionKey<FluxFlyoutInjection> = Symbol();
+export const FluxFilterInjectionKey: InjectionKey<FluxFilterInjection> = Symbol();
+export const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection> = Symbol();
+export const FluxTableInjectionKey: InjectionKey<FluxTableInjection> = Symbol();
+
+export type FluxExpandableGroupInjection = {
+    closeAll(): void;
+    register(uid: number, expandable: ComponentInternalInstance): void;
+    unregister(uid: number): void;
+};
+
+export type FluxFilterInjection = {
+    readonly state: Ref<FluxFilterState>;
+
+    back(): void;
+    reset(name: string | number): void;
+    getValue(name: string | number): FluxFilterValue | undefined;
+    hasValue(name: string | number): boolean;
+    setValue(name: string | number, value?: FluxFilterValue): void;
+};
+
+export type FluxFlyoutInjection = {
+    readonly isClosing: Ref<boolean>;
+    readonly isOpen: Ref<boolean>;
+    readonly isOpening: Ref<boolean>;
+};
+
+export type FluxFormFieldInjection = {
+    readonly id?: string;
+};
+
+export type FluxTableInjection = {
+    readonly isBordered: boolean;
+    readonly isHoverable: boolean;
+    readonly isSeparated: boolean;
+    readonly isStriped: boolean;
+};

package/src/data/filter.ts

@@ -0,0 +1,9 @@
+import type { FluxFilterOptionHeader, FluxFilterOptionItem } from '@flux-ui/types';
+
+export function isFluxFilterOptionHeader(obj: object): obj is FluxFilterOptionHeader {
+    return 'title' in obj;
+}
+
+export function isFluxFilterOptionItem(obj: object): obj is FluxFilterOptionItem {
+    return 'label' in obj && 'value' in obj;
+}