@cupra/ui-kit 1.1.0-canary.3 → 1.1.0-canary.5

package/dist-react/components/ds-media-control/ds-media-control.js

@@ -0,0 +1,107 @@
+import { UiKitElement as u } from "../base/UiKitElement.js";
+import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as g } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as f } from "./styles/common.styles.js";
+var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (e, s, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? v(s, r) : s, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (t = (o ? n(s, r, t) : n(t)) || t);
+  return o && t && y(s, r, t), t;
+};
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.state = "pause", this.size = "medium", this.progress = 0, this.handleToggle = (e) => {
+      e.stopPropagation();
+      const s = this.state === "play" ? "pause" : "play";
+      this.state = s;
+      const r = s === "play" ? "ds-media-control:play" : "ds-media-control:pause";
+      this.dispatchEvent(new CustomEvent(r, { bubbles: !0, composed: !0 }));
+    }, this.onKeyDown = (e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleToggle(e));
+    };
+  }
+  get normalizedProgress() {
+    const e = Number(this.progress ?? 0);
+    return Number.isNaN(e) ? 0 : Math.min(100, Math.max(0, e));
+  }
+  get classes() {
+    return {
+      container: !0,
+      [this.size]: !!this.size,
+      [this.state]: !!this.state
+    };
+  }
+  get iconSize() {
+    switch (this.size) {
+      case "large":
+        return 24;
+      case "small":
+        return 16;
+      default:
+        return 20;
+    }
+  }
+  get iconName() {
+    return this.state === "play" ? "pause" : "play";
+  }
+  get iconTemplate() {
+    return this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": this.iconName,
+      size: this.iconSize
+    });
+  }
+  get progressTemplate() {
+    const e = this.size === "large" ? 46 : this.size === "small" ? 30 : 38, r = e / 2 - 2 / 2, o = r - 1, t = 2 * Math.PI * r, a = this.normalizedProgress / 100, n = t.toFixed(3), m = (t * (1 - a)).toFixed(3), h = `${-e / 2} ${-e / 2} ${e} ${e}`;
+    return p`
+            <svg part="progress" class="progress" viewBox="${h}" aria-hidden="true" focusable="false">
+                <circle
+                    class="indicator"
+                    cx="0"
+                    cy="0"
+                    r="${o}"
+                    fill="none"
+                    stroke-dasharray="${n}"
+                    stroke-dashoffset="${m}"
+                    vector-effect="non-scaling-stroke"
+                ></circle>
+            </svg>
+        `;
+  }
+  render() {
+    const e = this.state === "play" ? "pause" : "play";
+    return p`
+            <div
+                part="container"
+                class=${g(this.classes)}
+                role="button"
+                tabindex="0"
+                aria-label=${`${e} media ${this.size}`}
+                @click=${this.handleToggle}
+                @keydown=${this.onKeyDown}
+            >
+                ${this.progressTemplate}
+                ${this.iconTemplate}
+            </div>
+        `;
+  }
+};
+i.styles = [f];
+c([
+  l({ type: String, reflect: !0 })
+], i.prototype, "state", 2);
+c([
+  l({ type: String, reflect: !0 })
+], i.prototype, "size", 2);
+c([
+  l({ type: Number, reflect: !0 })
+], i.prototype, "progress", 2);
+i = c([
+  d("ds-media-control")
+], i);
+export {
+  i as DsMediaControl
+};

package/dist-react/components/ds-media-control/ds-media-control.test.d.ts

@@ -0,0 +1,8 @@
+import type { DsMediaControl } from './ds-media-control';
+import './ds-media-control.ts';
+import '../ds-theme-provider/ds-theme-provider.ts';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-media-control': DsMediaControl;
+    }
+}

package/dist-react/components/ds-media-control/ds-media-control.types.d.ts

@@ -0,0 +1,8 @@
+import { CommonAttrs } from '../../types/types.ts';
+export type state = 'play' | 'pause';
+export type size = 'large' | 'medium' | 'small';
+export type DsMediaControlAttrs = {
+    state?: state;
+    size?: size;
+    progress?: number;
+} & CommonAttrs;

package/dist-react/components/ds-media-control/styles/common.styles.d.ts

@@ -0,0 +1 @@
+export declare const commonStyles: import("lit").CSSResult;

package/dist-react/components/ds-media-control/styles/common.styles.js

@@ -0,0 +1,54 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as r } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const s = r`
+    :host {
+        display: contents;
+    }
+
+    [part='container'] {
+        position: relative;
+        display: inline-grid;
+        place-items: center;
+        border-radius: var(--ds-border-radius-full, 100000px);
+        background: var(--ds-color-surface-contrast, rgba(9, 9, 11, 0.3));
+        user-select: none;
+        cursor: pointer;
+        outline: none;
+    }
+
+    .container.small {
+        width: 32px;
+        height: 32px;
+    }
+    .container.medium {
+        width: 40px;
+        height: 40px;
+    }
+    .container.large {
+        width: 48px;
+        height: 48px;
+    }
+
+    .progress {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+    }
+
+    .progress .indicator {
+        stroke: var(--ds-icon-color);
+        stroke-width: 1.5px;
+        transform: rotate(-90deg);
+    }
+
+    [part='container']:focus-visible {
+        box-shadow: 0 0 0 2px var(--ds-color-focus-ring, rgba(255, 255, 255, 0.6));
+    }
+`;
+export {
+  s as commonStyles
+};

package/dist-react/components/ds-theme-provider/ds-theme-provider.js

@@ -54,7 +54,7 @@ let m = class extends v {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, o) => {
-      const s = "/1.1.0-canary.3", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.1.0-canary.5", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");

package/dist-react/components/index.d.ts

@@ -1,6 +1,10 @@
 import './ds-accordion/ds-accordion.ts';
 import './ds-avatar/ds-avatar.ts';
 import './ds-badge/ds-badge.ts';
+import './ds-basic-card/ds-basic-card.ts';
+import './ds-basic-card-image/ds-basic-card-image.ts';
+import './ds-basic-card-header/ds-basic-card-header.ts';
+import './ds-basic-card-section/ds-basic-card-section.ts';
 import './ds-bullets/ds-bullets.ts';
 import './ds-button/ds-button.ts';
 import './ds-carousel-indicator/ds-carousel-indicator.ts';
@@ -59,3 +63,4 @@ import './ds-toast-message/ds-toast-message.ts';
 import './ds-toggle-button/ds-toggle-button.ts';
 import './ds-toggle-switch/ds-toggle-switch.ts';
 import './ds-tooltip/ds-tooltip.ts';
+import './ds-media-control/ds-media-control.ts';

package/dist-react/index.js

@@ -1,6 +1,10 @@
 import "./components/ds-accordion/ds-accordion.js";
 import "./components/ds-avatar/ds-avatar.js";
 import "./components/ds-badge/ds-badge.js";
+import "./components/ds-basic-card/ds-basic-card.js";
+import "./components/ds-basic-card-image/ds-basic-card-image.js";
+import "./components/ds-basic-card-header/ds-basic-card-header.js";
+import "./components/ds-basic-card-section/ds-basic-card-section.js";
 import "./components/ds-bullets/ds-bullets.js";
 import "./components/ds-button/ds-button.js";
 import "./components/ds-carousel-indicator/ds-carousel-indicator.js";
@@ -59,7 +63,8 @@ import "./components/ds-toast-message/ds-toast-message.js";
 import "./components/ds-toggle-button/ds-toggle-button.js";
 import "./components/ds-toggle-switch/ds-toggle-switch.js";
 import "./components/ds-tooltip/ds-tooltip.js";
-import { iconNames as fo } from "./components/ds-icon/iconNames.js";
+import "./components/ds-media-control/ds-media-control.js";
+import { iconNames as bo } from "./components/ds-icon/iconNames.js";
 export {
-  fo as iconNames
+  bo as iconNames
 };

package/dist-react/utils/IconsManager.js

@@ -25,7 +25,7 @@ class f {
     }) : Promise.resolve('<svg class="ds-icon"></svg>'), l.subscribe("theme", this.handleChangeTheme);
   }
 }
-const c = Symbol.for("@cupra/ui-kit/icons-manager/1.1.0-canary.3"), h = globalThis;
+const c = Symbol.for("@cupra/ui-kit/icons-manager/1.1.0-canary.5"), h = globalThis;
 let n = h[c];
 n || (n = new f(), Object.defineProperty(h, c, {
   value: n,

package/dist-react/utils/PubSub.js

@@ -18,7 +18,7 @@ class e {
     });
   }
 }
-const u = Symbol.for("@cupra/ui-kit/pubsub/1.1.0-canary.3"), t = globalThis;
+const u = Symbol.for("@cupra/ui-kit/pubsub/1.1.0-canary.5"), t = globalThis;
 let b = t[u];
 b || (b = new e(), Object.defineProperty(t, u, {
   value: b,

package/dist-react/utils/StylesRegistry/StylesRegistry.js

@@ -5,7 +5,7 @@ class s {
       theme: t
     }) => {
       if (!t || !e) return;
-      const c = `https://ds-assets.cupra.com/1.1.0-canary.3/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
+      const c = `https://ds-assets.cupra.com/1.1.0-canary.5/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
       if (r) return r;
       const i = this.fetchStyle({ url: c }).then((n) => (n || this.stylePromises.delete(c), n));
       return this.stylePromises.set(c, i), this.stylePromises.get(c);

package/dist-react/utils/componentFactory.d.ts

@@ -1,4 +1,5 @@
 import type { DsButtonAttrs } from '../components/ds-button/ds-button.types.ts';
+import { DsDividerAttrs } from '../components/ds-divider/ds-divider.types';
 import type { DsIconButtonAttrs } from '../components/ds-icon-button/ds-icon-button.types.ts';
 import type { DsIconAttrs } from '../components/ds-icon/ds-icon.types.ts';
 import type { DsLoaderSpinnerAttrs } from '../components/ds-loader-spinner/ds-loader-spinner.types.ts';
@@ -7,6 +8,7 @@ type GetAttributes<T> = (props?: T) => any;
 export type ComponentFactory = {
     createIcon: GetAttributes<DsIconAttrs>;
     createButton: GetAttributes<DsButtonAttrs>;
+    createDivider: GetAttributes<DsDividerAttrs>;
     createIconButton: GetAttributes<DsIconButtonAttrs>;
     createLoaderSpinner: GetAttributes<DsLoaderSpinnerAttrs>;
     createToastMessage: GetAttributes<DsToastMessageAttrs>;

package/dist-react/utils/componentFactory.js

@@ -43,6 +43,15 @@ const m = {
                 ${t.children}
             </ds-button-react>
         `),
+  createDivider: (t = {}) => (i("ds-divider-react", () => import("../components/ds-divider/ds-divider.js")), a`
+            <ds-divider-react
+                class=${t == null ? void 0 : t.class}
+                variant=${(t == null ? void 0 : t.variant) ?? "primary"}
+                orientation=${(t == null ? void 0 : t.orientation) ?? "horizontal"}
+                data-testid=${t == null ? void 0 : t["data-testid"]}
+            >
+            </ds-divider-react>
+        `),
   createIconButton: (t = {}) => (i("ds-icon-button-react", () => import("../components/ds-icon-button/ds-icon-button.js")), a`
             <ds-icon-button-react
                 class=${t == null ? void 0 : t.class}
@@ -79,9 +88,9 @@ const m = {
             ></ds-toast-message-react>
         `)
 };
-function i(t, n) {
+function i(t, d) {
   try {
-    typeof window < "u" && typeof customElements < "u" && !customElements.get(t) && n();
+    typeof window < "u" && typeof customElements < "u" && !customElements.get(t) && d();
   } catch {
   }
 }

package/dist-react/utils/cssWithTokens.js

@@ -3,7 +3,7 @@ import "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
 function x(t, ...r) {
-  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-3"), i = n(e);
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-5"), i = n(e);
   return o`${i}`;
 }
 export {

package/dist-react/utils/htmlWithTokens.js

@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 function x(t, ...r) {
-  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-3"), e = i(o);
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-5"), e = i(o);
   return n`${e}`;
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-kit",
-  "version": "1.1.0-canary.3",
+  "version": "1.1.0-canary.5",
   "description": "Web components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",