@studious-creative/yumekit 0.1.8 → 0.1.10

package/dist/modules/helpers.d.ts

@@ -1,3 +1,12 @@
+/**
+ * Return a [background, foreground] CSS variable pair for a color scheme.
+ * Background is `--{color}-content--`, foreground is `--{color}-content-inverse`.
+ * @param {string} color — one of base, primary, secondary, success, warning, error, help
+ * @param {string} [fallbackColor="base"] — color to fall back to when `color` is unrecognised.
+ *   Use `null` to pass the raw `color` string through as the background instead.
+ * @returns {[string, string]} — [bg var, fg var]
+ */
+export function getColorVarPair(color: string, fallbackColor?: string): [string, string];
 export function hideEmptySlotContainers(shadowRoot: any, slotsConfig?: {}): void;
 /**
  * Resolve a CSS custom-property value to a concrete color string.

package/dist/modules/helpers.js

@@ -1,3 +1,29 @@
+/**
+ * Return a [background, foreground] CSS variable pair for a color scheme.
+ * Background is `--{color}-content--`, foreground is `--{color}-content-inverse`.
+ * @param {string} color — one of base, primary, secondary, success, warning, error, help
+ * @param {string} [fallbackColor="base"] — color to fall back to when `color` is unrecognised.
+ *   Use `null` to pass the raw `color` string through as the background instead.
+ * @returns {[string, string]} — [bg var, fg var]
+ */
+export function getColorVarPair(color, fallbackColor = "base") {
+    const map = {
+        base: ["var(--base-content--)", "var(--base-content-inverse)"],
+        primary: ["var(--primary-content--)", "var(--primary-content-inverse)"],
+        secondary: [
+            "var(--secondary-content--)",
+            "var(--secondary-content-inverse)",
+        ],
+        success: ["var(--success-content--)", "var(--success-content-inverse)"],
+        warning: ["var(--warning-content--)", "var(--warning-content-inverse)"],
+        error: ["var(--error-content--)", "var(--error-content-inverse)"],
+        help: ["var(--help-content--)", "var(--help-content-inverse)"],
+    };
+    if (map[color]) return map[color];
+    if (fallbackColor === null) return [color, "var(--base-content-inverse)"];
+    return map[fallbackColor] || map.base;
+}
+
 // helpers/slot-utils.js
 export function hideEmptySlotContainers(shadowRoot, slotsConfig = {}) {
     Object.entries(slotsConfig).forEach(([slotName, containerSelector]) => {

package/dist/react.d.ts

@@ -1,134 +1,215 @@
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
 
-type El<T = object> = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> & T;
+type El<T = object> = DetailedHTMLProps<
+    HTMLAttributes<HTMLElement>,
+    HTMLElement
+> &
+    T;
 
-declare module 'react' {
-  namespace JSX {
-    interface IntrinsicElements {
-      'y-appbar': El;
-      'y-avatar': El<{
-        src?: string;
-        alt?: string;
-        size?: string;
-        color?: string;
-      }>;
-      'y-badge': El<{
-        color?: string;
-        size?: string;
-      }>;
-      'y-button': El<{
-        'left-icon'?: string;
-        'right-icon'?: string;
-        color?: string;
-        size?: 'small' | 'medium' | 'large';
-        'style-type'?: 'outlined' | 'filled' | 'flat';
-        type?: string;
-        disabled?: boolean | string;
-        name?: string;
-        value?: string;
-        autofocus?: boolean | string;
-        form?: string;
-        formaction?: string;
-        formenctype?: string;
-        formmethod?: string;
-        formnovalidate?: boolean | string;
-        formtarget?: string;
-      }>;
-      'y-card': El;
-      'y-checkbox': El<{
-        name?: string;
-        value?: string;
-        checked?: boolean | string;
-        disabled?: boolean | string;
-        color?: string;
-        size?: string;
-      }>;
-      'y-dialog': El<{
-        open?: boolean | string;
-        size?: string;
-      }>;
-      'y-drawer': El<{
-        open?: boolean | string;
-        position?: string;
-      }>;
-      'y-input': El<{
-        type?: string;
-        name?: string;
-        value?: string;
-        placeholder?: string;
-        disabled?: boolean | string;
-        required?: boolean | string;
-        color?: string;
-        size?: string;
-        label?: string;
-      }>;
-      'y-menu': El;
-      'y-panel': El<{ open?: boolean | string }>;
-      'y-panelbar': El;
-      'y-progress': El<{
-        value?: string | number;
-        max?: string | number;
-        color?: string;
-        size?: string;
-      }>;
-      'y-radio': El<{
-        name?: string;
-        value?: string;
-        checked?: boolean | string;
-        disabled?: boolean | string;
-        color?: string;
-        size?: string;
-      }>;
-      'y-select': El<{
-        name?: string;
-        value?: string;
-        disabled?: boolean | string;
-        multiple?: boolean | string;
-        color?: string;
-        size?: string;
-        placeholder?: string;
-      }>;
-      'y-slider': El<{
-        name?: string;
-        value?: string | number;
-        min?: string | number;
-        max?: string | number;
-        step?: string | number;
-        disabled?: boolean | string;
-        color?: string;
-        size?: string;
-      }>;
-      'y-switch': El<{
-        name?: string;
-        checked?: boolean | string;
-        disabled?: boolean | string;
-        color?: string;
-        size?: string;
-      }>;
-      'y-table': El;
-      'y-tabs': El;
-      'y-tag': El<{
-        color?: string;
-        size?: string;
-        removable?: boolean | string;
-      }>;
-      'y-theme': El<{
-        theme?: string;
-        color?: string;
-        mode?: string;
-        'theme-path'?: string;
-      }>;
-      'y-toast': El<{
-        open?: boolean | string;
-        color?: string;
-        position?: string;
-        duration?: string | number;
-      }>;
-      'y-tooltip': El<{
-        content?: string;
-        position?: string;
-        color?: string;
-      }>;
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "y-appbar": El<{
+                orientation?: "vertical" | "horizontal";
+                collapsed?: boolean | string;
+                items?: string;
+                size?: "small" | "medium" | "large";
+                "menu-direction"?: "right" | "down" | "";
+                sticky?: "start" | "end";
+            }>;
+            "y-avatar": El<{
+                src?: string;
+                alt?: string;
+                size?: "small" | "medium" | "large";
+                shape?: string;
+            }>;
+            "y-badge": El<{
+                value?: string;
+                position?: "top" | "bottom";
+                alignment?: "right" | "left";
+                color?: string;
+                size?: "small" | "medium" | "large";
+            }>;
+            "y-button": El<{
+                "left-icon"?: string;
+                "right-icon"?: string;
+                color?: string;
+                size?: "small" | "medium" | "large";
+                "style-type"?: "outlined" | "filled" | "flat";
+                type?: string;
+                disabled?: boolean | string;
+                name?: string;
+                value?: string;
+                autofocus?: boolean | string;
+                form?: string;
+                formaction?: string;
+                formenctype?: string;
+                formmethod?: string;
+                formnovalidate?: boolean | string;
+                formtarget?: string;
+                "aria-label"?: string;
+                "aria-pressed"?: string;
+                "aria-hidden"?: string;
+            }>;
+            "y-card": El<{
+                color?: string;
+                raised?: boolean | string;
+            }>;
+            "y-checkbox": El<{
+                name?: string;
+                value?: string;
+                checked?: boolean | string;
+                disabled?: boolean | string;
+                indeterminate?: boolean | string;
+                "label-position"?: "top" | "bottom" | "left" | "right";
+                color?: string;
+                size?: string;
+            }>;
+            "y-dialog": El<{
+                visible?: boolean | string;
+                anchor?: string;
+                closable?: boolean | string;
+            }>;
+            "y-drawer": El<{
+                visible?: boolean | string;
+                anchor?: string;
+                position?: "left" | "right" | "top" | "bottom";
+                resizable?: boolean | string;
+            }>;
+            "y-icon": El<{
+                name?: string;
+                size?: "small" | "medium" | "large";
+                color?: string;
+                label?: string;
+                weight?: "thin" | "regular" | "thick";
+            }>;
+            "y-input": El<{
+                type?: string;
+                name?: string;
+                value?: string;
+                placeholder?: string;
+                disabled?: boolean | string;
+                invalid?: boolean | string;
+                required?: boolean | string;
+                color?: string;
+                size?: "small" | "medium" | "large";
+                label?: string;
+                "label-position"?: string;
+            }>;
+            "y-menu": El<{
+                items?: string;
+                anchor?: string;
+                visible?: boolean | string;
+                direction?: "down" | "up" | "left" | "right";
+                size?: "small" | "medium" | "large";
+            }>;
+            "y-panel": El<{
+                selected?: boolean | string;
+                expanded?: boolean | string;
+                href?: string;
+                history?: string;
+            }>;
+            "y-panelbar": El<{
+                exclusive?: boolean | string;
+            }>;
+            "y-progress": El<{
+                value?: string | number;
+                min?: string | number;
+                max?: string | number;
+                step?: string | number;
+                color?: string;
+                size?: "small" | "medium" | "large";
+                "label-display"?: boolean | string;
+                "label-format"?: "percent" | "value" | "fraction";
+                indeterminate?: boolean | string;
+                disabled?: boolean | string;
+            }>;
+            "y-radio": El<{
+                name?: string;
+                value?: string;
+                options?: string;
+                disabled?: boolean | string;
+                color?: string;
+                size?: string;
+            }>;
+            "y-select": El<{
+                name?: string;
+                value?: string;
+                disabled?: boolean | string;
+                multiple?: boolean | string;
+                color?: string;
+                size?: string;
+                placeholder?: string;
+                options?: string;
+                invalid?: boolean | string;
+                required?: boolean | string;
+                "label-position"?: string;
+                "display-mode"?: string;
+                "close-on-click-outside"?: string;
+            }>;
+            "y-slider": El<{
+                name?: string;
+                value?: string | number;
+                min?: string | number;
+                max?: string | number;
+                step?: string | number;
+                disabled?: boolean | string;
+                color?: string;
+                size?: "small" | "medium" | "large";
+                orientation?: "horizontal" | "vertical";
+            }>;
+            "y-switch": El<{
+                name?: string;
+                value?: string;
+                checked?: boolean | string;
+                disabled?: boolean | string;
+                animate?: string;
+                "toggle-label"?: boolean | string;
+                "label-display"?: string;
+                "label-position"?: "top" | "bottom" | "left" | "right";
+                color?: string;
+                size?: "small" | "medium" | "large";
+            }>;
+            "y-table": El<{
+                columns?: string;
+                data?: string;
+                striped?: boolean | string;
+                size?: "small" | "medium" | "large";
+            }>;
+            "y-tabs": El<{
+                options?: string;
+                size?: "small" | "medium" | "large";
+                position?: "top" | "bottom" | "left" | "right";
+            }>;
+            "y-tag": El<{
+                color?: string;
+                size?: "small" | "medium" | "large";
+                removable?: boolean | string;
+                "style-type"?: "filled" | "outlined" | "flat";
+                shape?: "square" | "round";
+            }>;
+            "y-theme": El<{
+                theme?: string;
+                mode?: "light" | "dark";
+                "theme-path"?: string;
+            }>;
+            "y-toast": El<{
+                position?:
+                    | "top-right"
+                    | "top-left"
+                    | "top-center"
+                    | "bottom-right"
+                    | "bottom-left"
+                    | "bottom-center";
+                duration?: string | number;
+                max?: string | number;
+            }>;
+            "y-tooltip": El<{
+                text?: string;
+                position?: "top" | "bottom" | "left" | "right";
+                color?: string;
+                delay?: string | number;
+            }>;
+        }
     }
-  }
 }

package/dist/styles/variables.css

@@ -433,6 +433,9 @@
     --component-tag-padding-large: var(--spacing-small);
     --component-tag-padding-medium: var(--spacing-x-small);
     --component-tag-padding-small: var(--spacing-2x-small);
+    --component-tag-height-large: 38px;
+    --component-tag-height-medium: 28px;
+    --component-tag-height-small: 22px;
     --component-tag-size-large: var(--sizing-large);
     --component-tag-size-medium: var(--sizing-medium);
     --component-tag-size-small: var(--sizing-small);