@bspk/ui 1.1.31 → 1.1.33

package/build.ts

@@ -0,0 +1,126 @@
+/* eslint-disable no-console */
+/**
+ * Build script for BSPK UI
+ *
+ * This script compiles TypeScript files, processes CSS files, and prepares the final distribution package.
+ *
+ * It performs the following tasks:
+ *
+ * 1. Compiles TypeScript files using `tsc` and `tsc-alias`.
+ * 2. Processes SASS files using `npm run sass`.
+ * 3. Copies styles from `@bspk/styles` to a temporary directory.
+ * 4. Creates importable CSS files for each @bspk/styles brand.
+ * 5. Creates importable CSS files for each component.
+ * 6. Fixes scss and css import paths in JavaScript files.
+ * 7. Moves the temporary build directory to the final distribution directory.
+ * 8. Updates the package exports to include component directories.
+ *
+ * $ npx tsx build.ts
+ */
+import child_process from 'child_process';
+import fs_ from 'fs';
+import path from 'path';
+import util from 'util';
+
+import packageData from './package.json';
+
+const BRANDS = packageData.brands;
+
+const exec = util.promisify(child_process.exec);
+const writeFile = util.promisify(fs_.writeFile);
+const readDir = util.promisify(fs_.readdir);
+const readFile = (filePath: string) => util.promisify(fs_.readFile)(filePath, 'utf-8');
+
+const STYLES_SOURCE_DIR = path.dirname(import.meta.resolve('@bspk/styles/package.json').split('file:')[1]);
+
+const distPath = path.resolve('./dist');
+const distStylesPath = path.resolve('./dist/styles');
+
+const RESET = '\x1b[0m';
+const GREEN = '\x1b[32m';
+const BLUE = '\x1b[34m';
+
+async function main() {
+    const startTime = Date.now();
+
+    console.log(`${BLUE}Building BSPK UI...${RESET}`);
+
+    await exec(`rm -rf ${distPath} && mkdir -p ${distStylesPath}`);
+
+    await exec('npm run tsc && npm run sass');
+
+    // copy the styles from @bspk/styles to the temp styles directory
+    await Promise.all(
+        BRANDS.map(async ({ slug }) => {
+            const brandStylesPath = path.resolve(STYLES_SOURCE_DIR, `${slug}.css`);
+            await exec(`cp ${brandStylesPath} ${path.resolve(distStylesPath, `${slug}.css`)}`);
+        }),
+    );
+
+    await fileProcessing();
+
+    await componentExports();
+
+    // copy dist to dist
+
+    const endTime = Date.now();
+
+    console.log(`${GREEN}BSPK UI build completed successfully (${(endTime - startTime) / 1000}s)${RESET}`);
+}
+
+main();
+
+async function fileProcessing() {
+    const allFiles = await readDir(distPath, { encoding: 'utf-8', recursive: true, withFileTypes: true });
+
+    return Promise.all(
+        allFiles.map(async (dirent) => {
+            if (!dirent.isFile()) return;
+
+            const filePath = path.resolve(dirent.parentPath, dirent.name);
+
+            // make importable .css files
+            if (filePath.endsWith('.css')) {
+                await createImportableCss(await readFile(filePath), filePath.replace(/\.css$/, '.css.js'));
+            }
+
+            // fix import paths in .js files
+            if (filePath.endsWith('.js')) {
+                const newFileContent = (await readFile(filePath)).replace(
+                    /import ['"]([^'"]+\/)?([^.]+)\.(s?css)['"];?/g,
+                    (_match, importPath = '', name) => {
+                        const nextImportPath = (importPath || '').replace('@bspk/styles/', '../../styles/');
+                        return `import '${nextImportPath}${name}.css.js';`;
+                    },
+                );
+                await writeFile(filePath, newFileContent, 'utf-8');
+            }
+        }),
+    );
+}
+
+async function componentExports() {
+    const nextExports = { ...packageData['static-exports'] };
+
+    (await readDir(path.resolve('./dist/components'), { withFileTypes: true })).forEach((dirent) => {
+        if (!dirent.isDirectory() || dirent.name.startsWith('.')) return;
+        nextExports[`./${dirent.name}/*`] = `./dist/components/${dirent.name}/*.js`;
+        nextExports[`./${dirent.name}`] = `./dist/components/${dirent.name}/index.js`;
+    });
+
+    (packageData.exports as Record<string, string>) = nextExports as Record<string, string>;
+    return writeFile(path.resolve('./package.json'), `${JSON.stringify(packageData, null, 4)}\n`, 'utf-8');
+}
+
+async function createImportableCss(cssContent: string, destPath: string, id?: string) {
+    return await writeFile(
+        destPath,
+        `/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(\`${cssContent}\`));
+document.head.appendChild(style);
+${id ? `\ndocument.querySelector('#${id}')?.remove(); style.id = '${id}';` : ''}
+`,
+    );
+}

package/dist/base.css

@@ -1 +1,300 @@
-[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}html:has(body[data-bspk]){height:100%;scroll-behavior:smooth}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body[data-bspk]{height:100%;scroll-behavior:smooth;font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}body[data-bspk] input:-internal-autofill-previewed,body[data-bspk] input:-internal-autofill-selected,body[data-bspk] textarea:-internal-autofill-previewed,body[data-bspk] textarea:-internal-autofill-selected,body[data-bspk] select:-internal-autofill-previewed,body[data-bspk] select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}body[data-bspk] a{color:var(--foreground-link-text-default)}body[data-bspk] a:not([disabled]):hover{color:var(--foreground-link-text-default-hovered)}body[data-bspk] a:not([disabled]):active{color:var(--foreground-link-text-default);filter:brightness(80%)}body[data-bspk] a:not([disabled]):visited{color:var(--foreground-link-text-default-visited)}body[data-bspk] a[disabled]{pointer-events:none;cursor:text;color:var(--foreground-link-text-default-disabled)}body[data-bspk] a[data-default]{color:var(--foreground-link-text-default) !important}body[data-bspk] a[data-hover]{color:var(--foreground-link-text-default-hovered) !important}body[data-bspk] a[data-active]{color:var(--foreground-link-text-default) !important;filter:brightness(80%)}body[data-bspk] a[data-visited]{color:var(--foreground-link-text-default-visited) !important}body[data-bspk] a[data-subtle]{text-decoration:none;color:var(--foreground-neutral-on-surface)}body[data-bspk] a[data-subtle]:not([disabled]):hover{text-decoration:underline;color:var(--foreground-link-text-subtle-hovered)}body[data-bspk] a[data-subtle]:not([disabled]):active{text-decoration:underline;color:var(--foreground-link-text-subtle-pressed)}body[data-bspk] a[data-subtle]:not([disabled]):visited{color:var(--foreground-neutral-on-surface)}body[data-bspk] a[data-subtle][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}body[data-bspk] a[data-subtle][data-default]{text-decoration:none;color:var(--foreground-neutral-on-surface)}body[data-bspk] a[data-subtle][data-hover]{text-decoration:underline;color:var(--foreground-link-text-subtle-hovered) !important}body[data-bspk] a[data-subtle][data-active]{text-decoration:underline;color:var(--foreground-link-text-subtle-pressed) !important}body[data-bspk] a[data-subtle][data-visited]{color:var(--foreground-neutral-on-surface) !important}body[data-bspk] a[data-subtle-inverse]{text-decoration:none;color:var(--foreground-neutral-inverse-on-surface)}body[data-bspk] a[data-subtle-inverse]:not([disabled]):hover{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-hovered)}body[data-bspk] a[data-subtle-inverse]:not([disabled]):active{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-pressed)}body[data-bspk] a[data-subtle-inverse]:not([disabled]):visited{color:var(--foreground-neutral-inverse-on-surface)}body[data-bspk] a[data-subtle-inverse][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}body[data-bspk] a[data-subtle-inverse][data-default]{text-decoration:none;color:var(--foreground-neutral-inverse-on-surface)}body[data-bspk] a[data-subtle-inverse][data-hover]{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-hovered) !important}body[data-bspk] a[data-subtle-inverse][data-active]{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-pressed) !important}body[data-bspk] a[data-subtle-inverse][data-visited]{color:var(--foreground-neutral-inverse-on-surface) !important}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}
+/**
+  * Base Styles
+  * This file is not generated or distributed through @bspk/styles.
+  * If not using a StylesProvider (recommended), this file should be imported first in the main stylesheet .
+  * This file will contain only the most basic styles that are applied across all applications.
+  * This file will NOT contain any component-specific styles.
+  * This file will NOT contain any media queries.
+  * This file will NOT contain any classes
+*/
+/**
+ * This file is generated by the build-css script.
+ * Do not edit this file directly.
+ * Instead, edit the script and run it again. */
+[data-color=grey] {
+  --foreground: var(--foreground-neutral-on-surface-variant-01);
+  --background: var(--surface-neutral-t2-lowest);
+}
+
+[data-color=white] {
+  --foreground: var(--foreground-neutral-on-surface-variant-01);
+  --background: var(--surface-neutral-t1-base);
+}
+
+[data-color=primary] {
+  --foreground: var(--foreground-brand-primary-depth);
+  --background: var(--surface-brand-primary-highlight);
+}
+
+[data-color=secondary] {
+  --foreground: var(--foreground-brand-secondary-depth);
+  --background: var(--surface-brand-secondary-highlight);
+}
+
+[data-color=blue] {
+  --foreground: var(--foreground-spectrum-blue);
+  --background: var(--surface-spectrum-blue);
+}
+
+[data-color=green] {
+  --foreground: var(--foreground-spectrum-green);
+  --background: var(--surface-spectrum-green);
+}
+
+[data-color=lime] {
+  --foreground: var(--foreground-spectrum-lime);
+  --background: var(--surface-spectrum-lime);
+}
+
+[data-color=magenta] {
+  --foreground: var(--foreground-spectrum-magenta);
+  --background: var(--surface-spectrum-magenta);
+}
+
+[data-color=orange] {
+  --foreground: var(--foreground-spectrum-orange);
+  --background: var(--surface-spectrum-orange);
+}
+
+[data-color=pink] {
+  --foreground: var(--foreground-spectrum-pink);
+  --background: var(--surface-spectrum-pink);
+}
+
+[data-color=purple] {
+  --foreground: var(--foreground-spectrum-purple);
+  --background: var(--surface-spectrum-purple);
+}
+
+[data-color=red] {
+  --foreground: var(--foreground-spectrum-red);
+  --background: var(--surface-spectrum-red);
+}
+
+[data-color=teal] {
+  --foreground: var(--foreground-spectrum-teal);
+  --background: var(--surface-spectrum-teal);
+}
+
+[data-color=yellow] {
+  --foreground: var(--foreground-spectrum-yellow);
+  --background: var(--surface-spectrum-yellow);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --z-index-tooltip-popover: 1100;
+  --z-index-dialog: 1000;
+  --z-index-dropdown: 1000;
+  --z-index-scrim: 900;
+  --z-index-fab: 800;
+  --z-index-navbar: 700;
+  --z-index-footer: 600;
+  --list-item-height: var(--spacing-sizing-13);
+}
+
+@media (prefers-reduced-motion) {
+  [data-animated] {
+    animation: none !important;
+  }
+}
+html:has(body[data-bspk]) {
+  height: 100%;
+  scrollbar-gutter: stable;
+  overflow: hidden auto;
+  scroll-behavior: smooth;
+}
+
+/* --scrollbar-width: defined inline in UIProvider */
+html:has([data-bspk=scrim]) {
+  overflow: hidden;
+  padding-right: var(--scrollbar-width);
+}
+
+body[data-bspk] {
+  height: 100%;
+  font: var(--body-base);
+  background-color: var(--background-base);
+  color: var(--foreground-neutral-on-surface);
+  min-width: 343px;
+}
+body[data-bspk] a {
+  color: var(--foreground-link-text-default);
+}
+body[data-bspk] a:not([disabled]):hover, body[data-bspk] a:not([disabled])[data-pseudo=hover] {
+  color: var(--foreground-link-text-default-hovered);
+}
+body[data-bspk] a:not([disabled]):active, body[data-bspk] a:not([disabled])[data-pseudo=active] {
+  color: var(--foreground-link-text-default);
+  filter: brightness(80%);
+}
+body[data-bspk] a:not([disabled]):visited, body[data-bspk] a:not([disabled])[data-pseudo=visited] {
+  color: var(--foreground-link-text-default-visited);
+}
+body[data-bspk] a[disabled] {
+  pointer-events: none;
+  cursor: text;
+  color: var(--foreground-link-text-default-disabled);
+}
+body[data-bspk] a[data-subtle] {
+  text-decoration: none;
+  color: var(--foreground-neutral-on-surface);
+}
+body[data-bspk] a[data-subtle]:not([disabled]):hover, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=hover] {
+  text-decoration: underline;
+  color: var(--foreground-link-text-subtle-hovered);
+}
+body[data-bspk] a[data-subtle]:not([disabled]):active, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=active] {
+  text-decoration: underline;
+  color: var(--foreground-link-text-subtle-pressed);
+}
+body[data-bspk] a[data-subtle]:not([disabled]):visited, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=visited] {
+  color: var(--foreground-neutral-on-surface);
+}
+body[data-bspk] a[data-subtle][disabled] {
+  pointer-events: none;
+  color: var(--foreground-link-text-subtle-disabled);
+}
+body[data-bspk] a[data-subtle-inverse] {
+  text-decoration: none;
+  color: var(--foreground-neutral-inverse-on-surface);
+}
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):hover, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=hover] {
+  text-decoration: underline;
+  color: var(--foreground-link-text-subtle-inverse-hovered);
+}
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):active, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=active] {
+  text-decoration: underline;
+  color: var(--foreground-link-text-subtle-inverse-pressed);
+}
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):visited, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=visited] {
+  color: var(--foreground-neutral-on-inverse-surface);
+}
+body[data-bspk] a[data-subtle-inverse][disabled] {
+  pointer-events: none;
+  color: var(--foreground-link-text-subtle-inversed-disabled);
+}
+
+[data-touch-target-parent] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+[data-touch-target] {
+  display: none;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  user-select: none;
+  position: absolute;
+  z-index: 1;
+  height: 100%;
+  width: 100%;
+  top: auto;
+  left: auto;
+}
+
+[data-sr-only] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+[data-touch-target] ~ * {
+  position: relative;
+  z-index: 2;
+}
+
+/* if touchscreen */
+@media (any-pointer: coarse) {
+  [data-touch-target] {
+    display: block;
+  }
+}
+@keyframes skeleton-pulse {
+  0% {
+    opacity: 0.8;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 0.8;
+  }
+}
+[data-bspk=skeleton-text] {
+  /*! 
+  --text-margin: is set via inline style
+  --text-height: is set via inline style
+  */
+  display: flex;
+  flex-direction: column;
+  gap: var(--text-margin);
+  animation: skeleton-pulse 1.5s infinite;
+  width: 100%;
+  height: fit-content;
+}
+[data-bspk=skeleton-text] [data-line] {
+  width: 100%;
+  background: var(--foreground-neutral-skeleton-element);
+  border-radius: var(--radius-small);
+  height: var(--text-height);
+}
+[data-bspk=skeleton-text]:has([data-line]:nth-child(2)) [data-line]:last-child {
+  width: 80%;
+}
+
+[data-bspk=skeleton] {
+  /*! 
+  --height: is set via inline style
+  --width: is set via inline style
+  */
+  animation: skeleton-pulse 1.5s infinite;
+  background: var(--foreground-neutral-skeleton-element);
+}
+[data-bspk=skeleton][data-variant=rectangular], [data-bspk=skeleton][data-variant=photo] {
+  min-width: var(--spacing-sizing-08);
+  min-height: var(--spacing-sizing-08);
+  height: var(--height, var(--width));
+  width: var(--width, var(--height));
+  border-radius: var(--radius-small);
+}
+[data-bspk=skeleton][data-variant=photo] {
+  border-radius: var(--radius-medium);
+}
+[data-bspk=skeleton][data-variant=circular] {
+  border-radius: 100%;
+  width: var(--width);
+  aspect-ratio: 1/1;
+}
+[data-bspk=skeleton][data-variant=profile] {
+  border-radius: 100%;
+  width: var(--spacing-sizing-10);
+  aspect-ratio: 1/1;
+}
+[data-bspk=skeleton][data-variant=thumbnail] {
+  width: var(--spacing-sizing-12);
+  height: var(--spacing-sizing-12);
+  border-radius: var(--radius-small);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */