@quartzds/core-react 1.0.0-beta.12 → 1.0.0-beta.121

package/lib/ssr/webpack.cjs

@@ -0,0 +1,53 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ssr/webpack.ts
+var webpack_exports = {};
+__export(webpack_exports, {
+  default: () => QuartzSSRWebpackPlugin
+});
+module.exports = __toCommonJS(webpack_exports);
+var import_webpack = require("@stencil/ssr/webpack");
+
+// src/ssr/shared.ts
+var shared_default = {
+  from: "@quartzds/core-react",
+  module: import("@quartzds/core-react"),
+  hydrateModule: import("@quartzds/core/hydrate")
+};
+
+// src/ssr/webpack.ts
+var QuartzSSRWebpackPlugin = class extends import_webpack.StencilSSRWebpackPlugin {
+  constructor(pluginOptions) {
+    super({
+      ...shared_default,
+      ...pluginOptions
+    });
+  }
+};

package/lib/ssr/webpack.d.cts

@@ -0,0 +1,7 @@
+import { StencilSSRWebpackPlugin } from '@stencil/ssr/webpack';
+
+declare class QuartzSSRWebpackPlugin extends StencilSSRWebpackPlugin {
+    constructor(pluginOptions: ConstructorParameters<typeof StencilSSRWebpackPlugin>[0]);
+}
+
+export { QuartzSSRWebpackPlugin as default };

package/lib/ssr/webpack.d.ts

@@ -0,0 +1,7 @@
+import { StencilSSRWebpackPlugin } from '@stencil/ssr/webpack';
+
+declare class QuartzSSRWebpackPlugin extends StencilSSRWebpackPlugin {
+    constructor(pluginOptions: ConstructorParameters<typeof StencilSSRWebpackPlugin>[0]);
+}
+
+export { QuartzSSRWebpackPlugin as default };

package/lib/ssr/webpack.js

@@ -0,0 +1,22 @@
+// src/ssr/webpack.ts
+import { StencilSSRWebpackPlugin } from "@stencil/ssr/webpack";
+
+// src/ssr/shared.ts
+var shared_default = {
+  from: "@quartzds/core-react",
+  module: import("@quartzds/core-react"),
+  hydrateModule: import("@quartzds/core/hydrate")
+};
+
+// src/ssr/webpack.ts
+var QuartzSSRWebpackPlugin = class extends StencilSSRWebpackPlugin {
+  constructor(pluginOptions) {
+    super({
+      ...shared_default,
+      ...pluginOptions
+    });
+  }
+};
+export {
+  QuartzSSRWebpackPlugin as default
+};

package/package.json

@@ -1,41 +1,47 @@
 {
   "name": "@quartzds/core-react",
-  "version": "1.0.0-beta.12",
+  "version": "1.0.0-beta.121",
   "description": "React wrapper for @quartzds/core",
   "homepage": "https://github.com/quartzds/core-foundations/tree/main/packages/react",
   "bugs": {
     "url": "https://github.com/quartzds/core-foundations/issues"
   },
   "repository": "https://github.com/quartzds/core-foundations",
-  "license": "LGPL-2.1-only",
+  "license": "Apache-2.0",
+  "type": "module",
   "exports": {
     ".": {
-      "types": "./lib/index.d.ts",
-      "import": "./lib/index.js"
+      "require": "./lib/index.cjs",
+      "default": "./lib/index.js"
     },
+    "./ssr/*": {
+      "require": "./lib/ssr/*.cjs",
+      "default": "./lib/ssr/*.js"
+    },
+    "./styles/*": "./styles/*",
+    "./CHANGELOG.md": "./CHANGELOG.md",
     "./package.json": "./package.json"
   },
-  "main": "./lib/index.js",
-  "types": "./lib/index.d.ts",
+  "main": "./lib/index.cjs",
   "files": [
-    "lib/**"
+    "lib/**",
+    "styles/**",
+    "CHANGELOG.md"
   ],
-  "scripts": {
-    "clean": "rimraf lib/"
-  },
   "dependencies": {
-    "@quartzds/core": "1.0.0-beta.13"
-  },
-  "devDependencies": {
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
-    "rimraf": "5.0.1"
+    "@quartzds/core": "1.0.0-beta.122",
+    "@stencil/core": "^4.37.0",
+    "@stencil/react-output-target": "^1.2.0",
+    "@stencil/ssr": "^0.1.1"
   },
   "peerDependencies": {
     "@types/react": ">=17.0.0",
     "@types/react-dom": ">=17.0.0",
+    "next": "^13.0.0 || ^14.0.0 || ^15.0.0",
     "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "react-dom": ">=17.0.0",
+    "vite": "^6.0.0",
+    "webpack": "^5.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -43,6 +49,15 @@
     },
     "@types/react-dom": {
       "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": true
     }
   },
   "engines": {

package/styles/core.css

@@ -0,0 +1,509 @@
+/**
+* SPDX-FileCopyrightText: © 2024 Schneider Electric
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+
+[dir='rtl'] {
+  --qds-direction-factor: -1;
+}
+
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  figure {
+  display: flex;
+  flex-direction: column;
+  gap: var(--qds-figure-gap);
+}
+
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  figcaption {
+  color: var(--qds-theme-figure-caption);
+  font: var(--qds-figure-caption);
+}
+
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(li, p, pre) {
+  color: var(--qds-theme-text-standard);
+}
+
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(li, p) {
+  font: var(--qds-text-standard);
+}
+
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(li, p)
+  strong {
+  font: var(--qds-text-emphasized);
+}
+
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  pre {
+  font: var(--qds-code-standard);
+}
+
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  pre
+  strong {
+  font: var(--qds-code-emphasized);
+}
+
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(menu, ol, ul) {
+  padding-inline-start: var(--qds-list-item-standard-padding-indent-step);
+}
+
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(li, p, span).qds-subdued {
+  color: var(--qds-theme-text-subdued);
+  font: var(--qds-text-subdued);
+}
+
+:is(
+    .qds-accessory-section,
+    .qds-accessory,
+    .qds-controls-jumbo,
+    .qds-controls-large,
+    .qds-controls-small,
+    .qds-controls,
+    .qds-main-section,
+    .qds-main-subsection,
+    .qds-main,
+    .qds-navigation-section,
+    .qds-navigation-subsection,
+    .qds-navigation,
+    .qds-panel-section,
+    .qds-panel-subsection,
+    .qds-panel,
+    .qds-popup-section,
+    .qds-popup-subsection,
+    .qds-popup
+  )
+  :is(blockquote, figure, input, menu, ol, p, pre, ul) {
+  margin: 0;
+}
+
+.qds-accessory-section,
+.qds-accessory,
+.qds-controls-jumbo,
+.qds-controls-large,
+.qds-controls-small,
+.qds-controls,
+.qds-main-section,
+.qds-main-subsection,
+.qds-main,
+.qds-navigation-section,
+.qds-navigation-subsection,
+.qds-navigation,
+.qds-panel-section,
+.qds-panel-subsection,
+.qds-panel,
+.qds-popup-section,
+.qds-popup-subsection,
+.qds-popup {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+}
+
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(
+    .qds-accessory,
+    .qds-main-subsection,
+    .qds-main,
+    .qds-navigation-subsection,
+    .qds-navigation,
+    .qds-panel-subsection,
+    .qds-panel,
+    .qds-popup-subsection,
+    .qds-popup
+  ).qds-subdued {
+  background-color: transparent;
+}
+
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(.qds-panel, .qds-navigation, .qds-popup, .qds-accessory).qds-subdued {
+  box-shadow: none;
+}
+
+.qds-main {
+  background-color: var(--qds-theme-main-background);
+  padding-block: var(--qds-main-padding-vertical);
+  padding-inline: var(--qds-main-padding-horizontal);
+}
+
+.qds-main,
+.qds-main .qds-unrelated {
+  gap: var(--qds-main-gap-children-unrelated);
+}
+
+.qds-main.qds-related,
+.qds-main .qds-related {
+  gap: var(--qds-main-gap-children-related);
+}
+
+.qds-main-section {
+  padding-block-start: var(--qds-main-section-padding-top);
+}
+
+.qds-main-section,
+.qds-main-section .qds-unrelated {
+  gap: var(--qds-main-section-gap-children-unrelated);
+}
+
+.qds-main-section.qds-related,
+.qds-main-section .qds-related {
+  gap: var(--qds-main-section-gap-children-related);
+}
+
+.qds-main-subsection {
+  background-color: var(--qds-theme-main-subsection-standard-background);
+  border-radius: var(--qds-main-subsection-border-radius);
+  padding: var(--qds-main-subsection-padding-top)
+    var(--qds-main-subsection-padding-end)
+    var(--qds-main-subsection-padding-bottom)
+    var(--qds-main-subsection-padding-start);
+}
+
+.qds-main-subsection,
+.qds-main-subsection .qds-unrelated {
+  gap: var(--qds-main-subsection-gap-children-unrelated);
+}
+
+.qds-main-subsection.qds-emphasized {
+  box-shadow: var(--qds-theme-main-subsection-emphasized);
+}
+
+.qds-main-subsection.qds-related,
+.qds-main-subsection .qds-related {
+  gap: var(--qds-main-subsection-gap-children-related);
+}
+
+.qds-navigation {
+  background-color: var(--qds-theme-navigation-background);
+  border-radius: var(--qds-navigation-border-radius);
+  box-shadow: var(--qds-theme-navigation-elevation);
+  padding: var(--qds-navigation-padding);
+}
+
+.qds-navigation,
+.qds-navigation .qds-unrelated {
+  gap: var(--qds-navigation-gap-children-unrelated);
+}
+
+.qds-navigation.qds-related,
+.qds-navigation .qds-related {
+  gap: var(--qds-navigation-gap-children-related);
+}
+
+.qds-navigation-section {
+  padding: var(--qds-navigation-section-padding);
+}
+
+.qds-navigation-section,
+.qds-navigation-section .qds-unrelated {
+  gap: var(--qds-navigation-section-gap-children-unrelated);
+}
+
+.qds-navigation-section.qds-related,
+.qds-navigation-section .qds-related {
+  gap: var(--qds-navigation-section-gap-children-related);
+}
+
+.qds-navigation-subsection {
+  background-color: var(--qds-theme-navigation-subsection-standard-background);
+  border-radius: var(--qds-navigation-subsection-border-radius);
+  padding: var(--qds-navigation-subsection-padding);
+}
+
+.qds-navigation-subsection,
+.qds-navigation-subsection .qds-unrelated {
+  gap: var(--qds-navigation-subsection-gap-children-unrelated);
+}
+
+.qds-navigation-subsection.qds-emphasized {
+  box-shadow: var(--qds-theme-navigation-subsection-emphasized);
+}
+
+.qds-navigation-subsection.qds-related,
+.qds-navigation-subsection .qds-related {
+  gap: var(--qds-navigation-subsection-gap-children-related);
+}
+
+.qds-panel {
+  background-color: var(--qds-theme-panel-background);
+  border-radius: var(--qds-panel-border-radius);
+  box-shadow: var(--qds-theme-panel-elevation);
+  padding: var(--qds-panel-padding);
+}
+
+.qds-panel,
+.qds-panel .qds-unrelated {
+  gap: var(--qds-panel-gap-children-unrelated);
+}
+
+.qds-panel.qds-related,
+.qds-panel .qds-related {
+  gap: var(--qds-panel-gap-children-related);
+}
+
+.qds-panel-section {
+  padding-block-start: var(--qds-panel-section-padding-top);
+}
+
+.qds-panel-section,
+.qds-panel-section .qds-unrelated {
+  gap: var(--qds-panel-section-gap-children-unrelated);
+}
+
+.qds-panel-section.qds-related,
+.qds-panel-section .qds-related {
+  gap: var(--qds-panel-section-gap-children-related);
+}
+
+.qds-panel-subsection {
+  background-color: var(--qds-theme-panel-subsection-standard-background);
+  border-radius: var(--qds-panel-subsection-border-radius);
+  padding: var(--qds-panel-subsection-padding);
+}
+
+.qds-panel-subsection,
+.qds-panel-subsection .qds-unrelated {
+  gap: var(--qds-panel-subsection-gap-children-unrelated);
+}
+
+.qds-panel-subsection.qds-emphasized {
+  box-shadow: var(--qds-theme-panel-subsection-emphasized);
+}
+
+.qds-panel-subsection.qds-related,
+.qds-panel-subsection .qds-related {
+  gap: var(--qds-panel-subsection-gap-children-related);
+}
+
+.qds-popup {
+  background-color: var(--qds-theme-popup-background);
+  border-radius: var(--qds-popup-border-radius);
+  box-shadow: var(--qds-popup-elevation);
+  padding: var(--qds-popup-subsection-padding-top)
+    var(--qds-popup-subsection-padding-end)
+    var(--qds-popup-subsection-padding-bottom)
+    var(--qds-popup-subsection-padding-start);
+}
+
+.qds-popup,
+.qds-popup .qds-unrelated {
+  gap: var(--qds-popup-gap-children-unrelated);
+}
+
+.qds-popup.qds-related,
+.qds-popup .qds-related {
+  gap: var(--qds-popup-gap-children-related);
+}
+
+.qds-popup-section,
+.qds-popup-section .qds-unrelated {
+  gap: var(--qds-popup-section-gap-children-unrelated);
+}
+
+.qds-popup-section.qds-related,
+.qds-popup-section .qds-related {
+  gap: var(--qds-popup-section-gap-children-related);
+}
+
+.qds-popup-subsection {
+  background-color: var(--qds-theme-popup-subsection-standard-background);
+  border-radius: var(--qds-popup-subsection-border-radius);
+  padding: var(--qds-popup-subsection-padding);
+}
+
+.qds-popup-subsection,
+.qds-popup-subsection .qds-unrelated {
+  gap: var(--qds-popup-subsection-gap-children-unrelated);
+}
+
+.qds-popup-subsection.qds-emphasized {
+  box-shadow: var(--qds-theme-popup-subsection-emphasized);
+}
+
+.qds-popup-subsection.qds-related,
+.qds-popup-subsection .qds-related {
+  gap: var(--qds-popup-subsection-gap-children-related);
+}
+
+.qds-accessory {
+  background-color: var(--qds-theme-accessory-background);
+  border-radius: var(--qds-accessory-border-radius);
+  box-shadow: var(--qds-accessory-elevation);
+  padding: var(--qds-accessory-padding-top) var(--qds-accessory-padding-end)
+    var(--qds-accessory-padding-bottom) var(--qds-accessory-padding-start);
+}
+
+.qds-accessory,
+.qds-accessory .qds-unrelated {
+  gap: var(--qds-accessory-gap-children-unrelated);
+}
+
+.qds-accessory.qds-related,
+.qds-accessory .qds-related {
+  gap: var(--qds-accessory-gap-children-related);
+}
+
+.qds-accessory-section {
+  border-radius: var(--qds-accessory-section-border-radius);
+}
+
+.qds-accessory-section,
+.qds-accessory-section .qds-unrelated {
+  gap: var(--qds-accessory-section-gap-children-unrelated);
+}
+
+.qds-accessory-section.qds-related,
+.qds-accessory-section .qds-related {
+  gap: var(--qds-accessory-section-gap-children-related);
+}
+
+.qds-controls-small,
+.qds-controls-small .qds-unrelated {
+  gap: var(--qds-control-small-gap-siblings-unrelated);
+}
+
+.qds-controls-small.qds-related,
+.qds-controls-small .qds-related {
+  gap: var(--qds-control-small-gap-siblings-related);
+}
+
+.qds-controls,
+.qds-controls .qds-unrelated {
+  gap: var(--qds-control-standard-gap-siblings-unrelated);
+}
+
+.qds-controls.qds-related,
+.qds-controls .qds-related {
+  gap: var(--qds-control-standard-gap-siblings-related);
+}
+
+.qds-controls-large,
+.qds-controls-large .qds-unrelated {
+  gap: var(--qds-control-large-gap-siblings-unrelated);
+}
+
+.qds-controls-large.qds-related,
+.qds-controls-large .qds-related {
+  gap: var(--qds-control-large-gap-siblings-related);
+}
+
+.qds-controls-jumbo,
+.qds-controls-jumbo .qds-unrelated {
+  gap: var(--qds-control-jumbo-gap-siblings-unrelated);
+}
+
+.qds-controls-jumbo.qds-related,
+.qds-controls-jumbo .qds-related {
+  gap: var(--qds-control-jumbo-gap-siblings-related);
+}
+
+.qds-interactive {
+  cursor: pointer;
+  user-select: none;
+}
+
+:is(
+    .qds-main-subsection,
+    .qds-navigation-subsection,
+    .qds-panel-subsection,
+    .qds-popup-subsection
+  ).qds-interactive:hover {
+  background-color: var(--qds-theme-interactive-background-hover);
+  text-decoration: none;
+}
+
+:is(
+    .qds-main-subsection,
+    .qds-navigation-subsection,
+    .qds-panel-subsection,
+    .qds-popup-subsection
+  ).qds-interactive:active {
+  background-color: var(--qds-theme-interactive-background-selected);
+  text-decoration: none;
+}
+
+.qds-control-group-inline {
+  display: flex;
+}
+
+.qds-control-group-inline > :first-child:not(:only-child) {
+  --qds-form-input-border-radius-top-right: 0px;
+  --qds-form-input-border-radius-bottom-right: 0px;
+  --qds-form-input-border-width-inline-end: 0px;
+}
+
+.qds-control-group-inline > :not(:first-child, :last-child) {
+  --qds-form-input-border-radius-top-left: 0px;
+  --qds-form-input-border-radius-top-right: 0px;
+  --qds-form-input-border-radius-bottom-right: 0px;
+  --qds-form-input-border-radius-bottom-left: 0px;
+  --qds-form-input-border-width-inline-end: 0px;
+}
+
+.qds-control-group-inline > :last-child:not(:only-child) {
+  --qds-form-input-border-radius-top-left: 0px;
+  --qds-form-input-border-radius-bottom-left: 0px;
+}
+
+.qds-control-group-block {
+  display: flex;
+  flex-direction: column;
+}
+
+.qds-control-group-block > :first-child:not(:only-child) {
+  --qds-form-input-border-radius-bottom-left: 0px;
+  --qds-form-input-border-radius-bottom-right: 0px;
+  --qds-form-input-border-width-block-end: 0px;
+}
+
+.qds-control-group-block > :not(:first-child, :last-child) {
+  --qds-form-input-border-radius-top-left: 0px;
+  --qds-form-input-border-radius-top-right: 0px;
+  --qds-form-input-border-radius-bottom-right: 0px;
+  --qds-form-input-border-radius-bottom-left: 0px;
+  --qds-form-input-border-width-block-end: 0px;
+}
+
+.qds-control-group-block > :last-child:not(:only-child) {
+  --qds-form-input-border-radius-top-left: 0px;
+  --qds-form-input-border-radius-top-right: 0px;
+}