@esportsplus/ui 0.8.3 → 0.9.0

package/.editorconfig

@@ -1,9 +1,9 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 4
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-end_of_line = lf
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf

package/.gitattributes

@@ -1,2 +1,2 @@
-# Auto detect text files and perform LF normalization
-* text=auto
+# Auto detect text files and perform LF normalization
+* text=auto

package/.github/dependabot.yml

@@ -0,0 +1,23 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+registries:
+  npm-npmjs:
+    token: ${{secrets.NPM_TOKEN}}
+    type: npm-registry
+    url: https://registry.npmjs.org
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    groups:
+      production-dependencies:
+        dependency-type: "production"
+      development-dependencies:
+        dependency-type: "development"
+    registries:
+      - npm-npmjs
+    schedule:
+      interval: "daily"

package/.github/workflows/bump.yml

@@ -0,0 +1,7 @@
+name: bump
+on:
+  push:
+    branches: '**' # only trigger on branches, not on tags
+jobs:
+  bump:
+    uses: esportsplus/workflows/.github/workflows/bump.yml@main

package/.github/workflows/publish.yml

@@ -0,0 +1,14 @@
+name: publish to npm
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+  workflow_run:
+    workflows: [bump]
+    types:
+      - completed
+jobs:
+  publish:
+    secrets:
+        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_PUBLISHING }}
+    uses: esportsplus/workflows/.github/workflows/publish.yml@main

package/package.json

@@ -4,35 +4,22 @@
     "@esportsplus/action": "^0.0.56",
     "@esportsplus/reactivity": "^0.4.3",
     "@esportsplus/template": "^0.9.9",
-    "@esportsplus/typescript": "^0.9.1"
+    "@esportsplus/utilities": "^0.13.0",
+    "modern-normalize": "^3.0.1"
   },
   "devDependencies": {
-    "@esportsplus/webpack": "^0.5.8",
-    "css-loader": "^7.1.2",
-    "esbuild": "^0.25.6",
-    "esbuild-loader": "^4.3.0",
-    "modern-normalize": "^3.0.1",
-    "postcss-loader": "^8.1.1",
-    "sass-loader": "^16.0.5",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.8.3",
-    "webpack": "^5.100.1"
+    "@esportsplus/typescript": "^0.9.1"
   },
   "exports": {
-    "./components/*": "./src/components/*",
-    ".": "./src/index.ts"
+    "./css-utilities": "./src/css-utilities/index.ts",
+    "./fonts": "./src/fonts/index.ts",
+    "./lib": "./src/lib/index.scss",
+    "./tokens": "./src/tokens/index.scss",
+    ".": "./src/components/index.ts"
   },
-  "main": "build/index.js",
   "name": "@esportsplus/ui",
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "types": "build/index.d.ts",
-  "version": "0.8.3",
-  "scripts": {
-    "build": "pnpm build:ts && pnpm build:assets",
-    "build:ts": "tsc && tsc-alias",
-    "build:assets": "webpack build --env=production=true",
-    "-": "-"
-  }
+  "version": "0.9.0"
 }

package/src/components/accordion/index.ts

@@ -1,35 +1,36 @@
-import { reactive } from '@esportsplus/reactivity';
-
-
-type Accordion = HTMLElement & { [key: symbol]: { active: boolean | number } };
-
-
-let key = Symbol();
-
-
-export default () => {
-    let state = reactive({
-            active: 0 as boolean | number
-        });
-
-    return {
-        attributes: {
-            class: () => {
-                return state.active && '--active';
-            },
-            onrender: (element: Accordion) => {
-                element[key] = state;
-            },
-            style: (element: Accordion) => {
-                let parent = element.closest('accordion') as Accordion | null;
-
-                if (parent && key in parent) {
-                    parent[key].active = (+parent[key].active) + 1;
-                }
-
-                return state.active && `--max-height: ${element.scrollHeight}`;
-            }
-        },
-        state: state as ReturnType<typeof reactive<{ active: boolean }>>
-    };
+import { reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+type Accordion = HTMLElement & { [key: symbol]: { active: boolean | number } };
+
+
+let key = Symbol();
+
+
+export default () => {
+    let state = reactive({
+            active: 0 as boolean | number
+        });
+
+    return {
+        attributes: {
+            class: () => {
+                return state.active && '--active';
+            },
+            onrender: (element: Accordion) => {
+                element[key] = state;
+            },
+            style: (element: Accordion) => {
+                let parent = element.closest('accordion') as Accordion | null;
+
+                if (parent && key in parent) {
+                    parent[key].active = (+parent[key].active) + 1;
+                }
+
+                return state.active && `--max-height: ${element.scrollHeight}`;
+            }
+        },
+        state: state as ReturnType<typeof reactive<{ active: boolean }>>
+    };
 }

package/src/components/accordion/scss/index.scss

@@ -1,16 +1,17 @@
-@use '/tokens';
-
-.accordion {
-    max-height: var(--max-height);
-    opacity: 0;
-    pointer-events: none;
-    transition:
-        max-height var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out;
-
-
-    @include tokens.state(active) {
-        opacity: 1;
-        pointer-events: auto;
-    }
-}
+@use '/tokens';
+@use './variables.scss';
+
+.accordion {
+    max-height: var(--max-height);
+    opacity: 0;
+    pointer-events: none;
+    transition:
+        max-height var(--transition-duration) ease-in-out,
+        opacity var(--transition-duration) ease-in-out;
+
+
+    @include tokens.state(active) {
+        opacity: 1;
+        pointer-events: auto;
+    }
+}

package/src/components/accordion/scss/variables.scss

@@ -1,9 +1,9 @@
-@use '/tokens';
-
-.accordion {
-    --max-height: 0;
-
-    @include tokens.state(inactive) {
-        --max-height: 0;
-    }
-}
+@use '/tokens';
+
+.accordion {
+    --max-height: 0;
+
+    @include tokens.state(inactive) {
+        --max-height: 0;
+    }
+}

package/src/components/anchor/index.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/src/components/anchor/scss/index.scss

@@ -1,41 +1,42 @@
-@use '/tokens';
-
-.anchor {
-    max-height: calc(var(--max-height, 100%) - (var(--margin-vertical) * 2));
-    max-width: calc(var(--max-width, 100%) - (var(--margin-horizontal) * 2));
-    position: absolute;
-    transition:
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
-    z-index: 9;
-
-
-    @include tokens.state(inactive) {
-        opacity: 0;
-
-        &, * {
-            pointer-events: none;
-        }
-    }
-
-
-    &--ne,
-    &--nw {
-        top: var(--margin-vertical);
-    }
-
-    &--se,
-    &--sw {
-        bottom: var(--margin-vertical);
-    }
-
-    &--ne,
-    &--se {
-        right: var(--margin-horizontal);
-    }
-
-    &--nw,
-    &--sw {
-        left: var(--margin-horizontal);
-    }
-}
+@use '/tokens';
+@use './variables.scss';
+
+.anchor {
+    max-height: calc(var(--max-height, 100%) - (var(--margin-vertical) * 2));
+    max-width: calc(var(--max-width, 100%) - (var(--margin-horizontal) * 2));
+    position: absolute;
+    transition:
+        opacity var(--transition-duration) ease-in-out,
+        transform var(--transition-duration) ease-in-out;
+    z-index: 9;
+
+
+    @include tokens.state(inactive) {
+        opacity: 0;
+
+        &, * {
+            pointer-events: none;
+        }
+    }
+
+
+    &--ne,
+    &--nw {
+        top: var(--margin-vertical);
+    }
+
+    &--se,
+    &--sw {
+        bottom: var(--margin-vertical);
+    }
+
+    &--ne,
+    &--se {
+        right: var(--margin-horizontal);
+    }
+
+    &--nw,
+    &--sw {
+        left: var(--margin-horizontal);
+    }
+}

package/src/components/anchor/scss/variables.scss

@@ -1,4 +1,4 @@
-.anchor {
-    --margin-horizontal: var(--size-400);
-    --margin-vertical: var(--size-400);
-}
+.anchor {
+    --margin-horizontal: var(--size-400);
+    --margin-vertical: var(--size-400);
+}

package/src/components/banner/index.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/src/components/banner/scss/index.scss

@@ -1,40 +1,41 @@
-@use '/lib';
-
-.banner {
-    @include lib.position(absolute, full);
-    background-position: center;
-    background-size: cover;
-    z-index: -1;
-
-
-    &--backdrop {
-        background-position: bottom;
-        height: 80svh;
-    }
-
-    &--blur {
-        filter: blur(var(--blur));
-        left: -2svh;
-        right: -2svh;
-        top: -2svh;
-
-        &.banner--backdrop {
-            height: 90svh;
-        }
-    }
-
-    &--fixed {
-        position: fixed;
-    }
-
-    &--gradient {
-        &::before {
-            @include lib.position(absolute, full);
-            background:
-                radial-gradient(circle at top, transparent 64%, var(--to) 88%),
-                linear-gradient(to bottom, var(--from) 0%, var(--to) 100%);
-            content: '';
-            z-index: 0;
-        }
-    }
-}
+@use '/lib';
+@use './variables.scss';
+
+.banner {
+    @include lib.position(absolute, full);
+    background-position: center;
+    background-size: cover;
+    z-index: -1;
+
+
+    &--backdrop {
+        background-position: bottom;
+        height: 80svh;
+    }
+
+    &--blur {
+        filter: blur(var(--blur));
+        left: -2svh;
+        right: -2svh;
+        top: -2svh;
+
+        &.banner--backdrop {
+            height: 90svh;
+        }
+    }
+
+    &--fixed {
+        position: fixed;
+    }
+
+    &--gradient {
+        &::before {
+            @include lib.position(absolute, full);
+            background:
+                radial-gradient(circle at top, transparent 64%, var(--to) 88%),
+                linear-gradient(to bottom, var(--from) 0%, var(--to) 100%);
+            content: '';
+            z-index: 0;
+        }
+    }
+}

package/src/components/banner/scss/variables.scss

@@ -1,10 +1,10 @@
-.banner {
-    &--blur {
-        --blur: 24px;
-    }
-
-    &--gradient {
-        --from: rgba(3,0,19, 0.32);
-        --to: var(--color-black-500);
-    }
+.banner {
+    &--blur {
+        --blur: 24px;
+    }
+
+    &--gradient {
+        --from: rgba(3,0,19, 0.32);
+        --to: var(--color-black-500);
+    }
 }

package/src/components/border/index.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/src/components/border/scss/index.scss

@@ -0,0 +1,12 @@
+@use './variables.scss';
+
+.border {
+    border-top: var(--border-width) var(--border-style) var(--border-color);
+    position: relative;
+    width: 100%;
+
+
+    & + & {
+        display: none;
+    }
+}

package/src/components/border/scss/variables.scss

@@ -0,0 +1,6 @@
+.border {
+    --border-color: var(--border-color-default);
+    --border-color-default: var(--color-border-400);
+    --border-style: solid;
+    --border-width: var(--border-width-400);
+}

package/src/components/bubble/index.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/src/components/bubble/scss/index.scss

@@ -0,0 +1,32 @@
+@use './variables';
+
+.bubble {
+    background: var(--background);
+    border-radius: var(--border-radius);
+    height: var(--height);
+    width: var(--width);
+
+
+    &--bottom,
+    &--top {
+        &-left,
+        &-right {
+            position: absolute;
+        }
+
+        @each $direction in 'left' 'right' {
+            &-#{$direction} {
+                #{$direction}: var(--position-horizontal);
+            }
+        }
+    }
+
+    @each $direction in 'bottom' 'top' {
+        &--#{$direction} {
+            &-left,
+            &-right {
+                #{$direction}: var(--position-vertical);
+            }
+        }
+    }
+}

package/src/components/bubble/scss/variables.scss

@@ -0,0 +1,19 @@
+.bubble {
+    --background: var(--background-default);
+    --background-default: var(--color-border-400);
+    --border-radius: var(--border-radius-circle);
+    --height: var(--size);
+    --margin-horizontal: var(--size-100);
+    --size: 6px;
+    --width: var(--size);
+
+
+    &--bottom,
+    &--top {
+        &-left,
+        &-right {
+            --position-horizontal: calc(var(--size) / -2);
+            --position-vertical: calc(var(--size) / -2);
+        }
+    }
+}

package/src/components/button/index.ts

@@ -0,0 +1 @@
+import './scss/index.scss';