@luzmo/lucero 0.0.1 → 0.0.3

package/package.json

@@ -1,98 +1,191 @@
 {
   "name": "@luzmo/lucero",
-  "version": "0.0.1",
-  "author": "Luzmo",
-  "description": "Lucero - The design system for Luzmo",
+  "version": "0.0.3",
   "homepage": "https://luzmo.com",
+  "description": "Lucero - The design system for Luzmo",
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "publishConfig": {
-    "access": "restricted",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "scripts": {
-    "clean": "rimraf dist",
-    "prebuild": "npm run clean",
-    "build": "vite build --config vite.config.component.ts --mode=production && npm run cem",
-    "build:dev": "vite build --config vite.config.component.ts --mode=development --watch",
-    "dev": "npm run build:dev",
-    "cem": "custom-elements-manifest analyze",
-    "prepublishOnly": "npm run build",
-    "lint": "eslint 'src/**/*.{js,ts}'",
-    "lint:fix": "eslint 'src/**/*.{js,ts}' --fix",
-    "release": "npm version patch",
-    "publish": "npm run release && npm run build && (cd dist && npm publish); exit_code=$?; cd ..; exit $exit_code",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "test": "web-test-runner src/**/tests/**/*.test.ts --node-resolve --playwright --browsers chromium firefox webkit",
-    "test:watch": "web-test-runner src/**/tests/**/*.test.ts --node-resolve --playwright --browsers chromium firefox webkit --watch"
+  "files": [
+    "dist"
+  ],
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    },
+    "./accordion": {
+      "import": "./lib/accordion/index.js",
+      "require": "./lib/accordion/index.cjs"
+    },
+    "./action-bar": {
+      "import": "./lib/action-bar/index.js",
+      "require": "./lib/action-bar/index.cjs"
+    },
+    "./action-button": {
+      "import": "./lib/action-button/index.js",
+      "require": "./lib/action-button/index.cjs"
+    },
+    "./action-group": {
+      "import": "./lib/action-group/index.js",
+      "require": "./lib/action-group/index.cjs"
+    },
+    "./action-menu": {
+      "import": "./lib/action-menu/index.js",
+      "require": "./lib/action-menu/index.cjs"
+    },
+    "./avatar": {
+      "import": "./lib/avatar/index.js",
+      "require": "./lib/avatar/index.cjs"
+    },
+    "./button": {
+      "import": "./lib/button/index.js",
+      "require": "./lib/button/index.cjs"
+    },
+    "./button-group": {
+      "import": "./lib/button-group/index.js",
+      "require": "./lib/button-group/index.cjs"
+    },
+    "./checkbox": {
+      "import": "./lib/checkbox/index.js",
+      "require": "./lib/checkbox/index.cjs"
+    },
+    "./color-picker": {
+      "import": "./lib/color-picker/index.js",
+      "require": "./lib/color-picker/index.cjs"
+    },
+    "./divider": {
+      "import": "./lib/divider/index.js",
+      "require": "./lib/divider/index.cjs"
+    },
+    "./field-group": {
+      "import": "./lib/field-group/index.js",
+      "require": "./lib/field-group/index.cjs"
+    },
+    "./field-label": {
+      "import": "./lib/field-label/index.js",
+      "require": "./lib/field-label/index.cjs"
+    },
+    "./icon": {
+      "import": "./lib/icon/index.js",
+      "require": "./lib/icon/index.cjs"
+    },
+    "./infield-button": {
+      "import": "./lib/infield-button/index.js",
+      "require": "./lib/infield-button/index.cjs"
+    },
+    "./label": {
+      "import": "./lib/label/index.js",
+      "require": "./lib/label/index.cjs"
+    },
+    "./legend-position": {
+      "import": "./lib/legend-position/index.js",
+      "require": "./lib/legend-position/index.cjs"
+    },
+    "./menu": {
+      "import": "./lib/menu/index.js",
+      "require": "./lib/menu/index.cjs"
+    },
+    "./multi-language-field": {
+      "import": "./lib/multi-language-field/index.js",
+      "require": "./lib/multi-language-field/index.cjs"
+    },
+    "./number-field": {
+      "import": "./lib/number-field/index.js",
+      "require": "./lib/number-field/index.cjs"
+    },
+    "./overlay": {
+      "import": "./lib/overlay/index.js",
+      "require": "./lib/overlay/index.cjs"
+    },
+    "./picker": {
+      "import": "./lib/picker/index.js",
+      "require": "./lib/picker/index.cjs"
+    },
+    "./popover": {
+      "import": "./lib/popover/index.js",
+      "require": "./lib/popover/index.cjs"
+    },
+    "./progress-circle": {
+      "import": "./lib/progress-circle/index.js",
+      "require": "./lib/progress-circle/index.cjs"
+    },
+    "./radio": {
+      "import": "./lib/radio/index.js",
+      "require": "./lib/radio/index.cjs"
+    },
+    "./search": {
+      "import": "./lib/search/index.js",
+      "require": "./lib/search/index.cjs"
+    },
+    "./slider": {
+      "import": "./lib/slider/index.js",
+      "require": "./lib/slider/index.cjs"
+    },
+    "./swatch": {
+      "import": "./lib/swatch/index.js",
+      "require": "./lib/swatch/index.cjs"
+    },
+    "./switch": {
+      "import": "./lib/switch/index.js",
+      "require": "./lib/switch/index.cjs"
+    },
+    "./tags": {
+      "import": "./lib/tags/index.js",
+      "require": "./lib/tags/index.cjs"
+    },
+    "./text-field": {
+      "import": "./lib/text-field/index.js",
+      "require": "./lib/text-field/index.cjs"
+    },
+    "./toast": {
+      "import": "./lib/toast/index.js",
+      "require": "./lib/toast/index.cjs"
+    },
+    "./tooltip": {
+      "import": "./lib/tooltip/index.js",
+      "require": "./lib/tooltip/index.cjs"
+    },
+    "./unit-input": {
+      "import": "./lib/unit-input/index.js",
+      "require": "./lib/unit-input/index.cjs"
+    },
+    "./color-area": {
+      "import": "./lib/color-area/index.js",
+      "require": "./lib/color-area/index.cjs"
+    },
+    "./color-field": {
+      "import": "./lib/color-field/index.js",
+      "require": "./lib/color-field/index.cjs"
+    },
+    "./color-handle": {
+      "import": "./lib/color-handle/index.js",
+      "require": "./lib/color-handle/index.cjs"
+    },
+    "./color-loupe": {
+      "import": "./lib/color-loupe/index.js",
+      "require": "./lib/color-loupe/index.cjs"
+    },
+    "./color-menu": {
+      "import": "./lib/color-menu/index.js",
+      "require": "./lib/color-menu/index.cjs"
+    },
+    "./color-slider": {
+      "import": "./lib/color-slider/index.js",
+      "require": "./lib/color-slider/index.cjs"
+    }
   },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.4",
-    "@ctrl/tinycolor": "^4.1.0",
-    "@custom-elements-manifest/analyzer": "^0.10.4",
-    "@floating-ui/dom": "^1.6.12",
-    "@internationalized/number": "^3.6.0",
-    "@lit-labs/observers": "^2.0.4",
-    "@open-wc/testing": "^4.0.0",
-    "@playwright/test": "^1.49.1",
-    "@remcovaes/web-test-runner-vite-plugin": "^1.2.2",
-    "@storybook/addon-a11y": "^8.5.7",
-    "@storybook/addon-essentials": "^8.5.7",
-    "@storybook/addon-themes": "^8.5.7",
-    "@storybook/blocks": "^8.5.7",
-    "@storybook/builder-vite": "^8.5.7",
-    "@storybook/test": "^8.5.7",
-    "@storybook/theming": "^8.5.7",
-    "@storybook/web-components": "^8.5.7",
-    "@storybook/web-components-vite": "^8.5.7",
-    "@types/chai": "^5.0.1",
-    "@types/mocha": "^10.0.10",
-    "@types/node": "^22.13.4",
-    "@types/sinon": "^17.0.3",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
-    "@web/test-runner": "^0.19.0",
-    "@web/test-runner-playwright": "^0.11.0",
-    "@web/test-runner-visual-regression": "^0.10.0",
-    "eslint": "^9.18.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.7.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsdoc": "^50.6.1",
-    "eslint-plugin-lit": "^1.15.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-storybook": "^0.11.1",
-    "eslint-plugin-unicorn": "^56.0.1",
-    "eslint-plugin-wc": "^2.2.0",
-    "fast-glob": "^3.3.2",
-    "fs-extra": "^11.2.0",
-    "magic-string": "^0.30.17",
-    "nouislider": "^15.8.1",
-    "prettier": "^3.4.2",
-    "rimraf": "^6.0.1",
-    "sass": "^1.69.5",
-    "sinon": "^19.0.2",
-    "storybook": "^8.5.7",
-    "tslib": "^2.8.1",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.17.0",
-    "vite": "^6.0.6",
-    "vite-plugin-banner": "^0.8.0",
-    "vite-plugin-cem": "^0.8.1",
-    "vite-plugin-dts": "^4.4.0",
-    "vite-tsconfig-paths": "^5.1.4"
-  },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
-  },
-  "customElements": "dist/custom-elements.json",
-  "peerDependencies": {
-    "lit": "^3.2.1",
-    "@luzmo/icons": "^0.0.2"
+  "keywords": [
+    "Luzmo",
+    "design system",
+    "components",
+    "web components",
+    "lucero",
+    "analytics"
+  ],
+  "author": "Luzmo",
+  "publishConfig": {
+    "access": "restricted"
   }
-}
+}

package/.storybook/dark-theme.ts

@@ -1,18 +0,0 @@
-import { create } from '@storybook/theming';
-
-export default create({
-  base: 'dark',
-  brandTitle: 'Luzmo Analytics Components Kit',
-  brandUrl: 'https://luzmo.com',
-  brandImage: './../src/assets/logo-dark.svg',
-  brandTarget: '_blank',
-  colorPrimary: '#7b90ff',
-  colorSecondary: '#7b90ff',
-  appBorderRadius: 8,
-  inputBorderRadius: 8,
-  // UI
-  appBg: '#262626',
-  appContentBg: '#262626',
-  appPreviewBg: '#262626',
-  appBorderColor: 'rgba(255, 255, 255, .2)'
-});

package/.storybook/light-theme.ts

@@ -1,34 +0,0 @@
-import { create } from '@storybook/theming';
-
-export default create({
-  base: 'light',
-  brandTitle: 'Luzmo Analytics Components Kit',
-  brandUrl: 'https://luzmo.com',
-  brandImage: './../src/assets/logo-light.svg',
-  brandTarget: '_blank',
-  colorPrimary: '#4434FF',
-  colorSecondary: '#4434FF',
-
-  // UI
-  appBg: '#ffffff',
-  appContentBg: '#ffffff',
-  appPreviewBg: '#ffffff',
-  appBorderColor: 'rgba(0,0,0, .1)',
-  appBorderRadius: 8,
-
-  // Text colors
-  textColor: '#5a5a5a',
-  textInverseColor: '#ffffff',
-
-  // Toolbar default and active colors
-  barTextColor: '#5a5a5a',
-  barSelectedColor: '#333',
-  barHoverColor: '#333',
-  barBg: '#ffffff',
-
-  // Form colors
-  inputBg: '#ffffff',
-  inputBorder: 'rgba(0,0,0, .1)',
-  inputTextColor: '#10162F',
-  inputBorderRadius: 8
-});

package/.storybook/main.ts

@@ -1,34 +0,0 @@
-import type { StorybookConfig } from '@storybook/web-components-vite';
-import { mergeConfig } from 'vite';
-import tsconfigPaths from 'vite-tsconfig-paths';
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-a11y',
-    '@storybook/addon-themes',
-    '@storybook/addon-essentials'
-  ],
-  core: {
-    builder: {
-      name: '@storybook/builder-vite',
-      options: {
-        viteConfigPath: './vite.config.storybook.js'
-      }
-    }
-  },
-  framework: {
-    name: '@storybook/web-components-vite',
-    options: {}
-  },
-  viteFinal: async (config) => {
-    return mergeConfig(config, {
-      plugins: [tsconfigPaths()],
-      build: {
-        // overwrite && changed to a different path than dist so that the dist folder is watched when rebuilding the components to the dist folder
-        outDir: 'randomDirName'
-      }
-    });
-  }
-};
-export default config;

package/.storybook/manager.ts

@@ -1,11 +0,0 @@
-import { addons } from '@storybook/manager-api';
-import darkTheme from './dark-theme';
-import lightTheme from './light-theme';
-
-addons.setConfig({
-  themes: {
-    light: lightTheme,
-    dark: darkTheme
-  },
-  theme: lightTheme
-});

package/.storybook/preview-head.html

@@ -1,7 +0,0 @@
-<link rel="stylesheet" href="src/styles/global-variables.css" />
-<link rel="stylesheet" href="src/styles/global-variables-dark-theme.css" />
-<style>
-  body {
-    background-color: var(--luzmo-background-color);
-  }
-</style>

package/.storybook/preview.ts

@@ -1,42 +0,0 @@
-import { withThemeByClassName } from '@storybook/addon-themes';
-import type { Preview } from '@storybook/web-components';
-import { setCustomElementsManifest } from '@storybook/web-components';
-import customElements from '../dist/custom-elements.json';
-import darkTheme from './dark-theme';
-import lightTheme from './light-theme';
-
-setCustomElementsManifest(customElements);
-
-const themes = {
-  light: lightTheme,
-  dark: darkTheme
-};
-
-const preview: Preview = {
-  parameters: {
-    backgrounds: {
-      disable: true,
-      values: [
-        { name: 'light', value: lightTheme.appBg },
-        { name: 'dark', value: darkTheme.appBg }
-      ]
-    },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/
-      }
-    }
-  },
-  decorators: [
-    withThemeByClassName({
-      themes: {
-        light: 'light',
-        dark: 'dark'
-      },
-      defaultTheme: 'light'
-    })
-  ]
-};
-
-export default preview;

package/README.md

@@ -1,18 +0,0 @@
-Luzmo Design system - Lucero
-
-## Installation
-
-```bash
-npm install @luzmo/lucero
-```
-
-```ts
-import '@luzmo/lucero/button';
-```
-
-```html
-<luzmo-button>Click me</luzmo-button>
-```
-
-This repository is in alpha state. Do not use the web components in production.
-Expect breaking changes.