mosuk-ui 1.0.13 → 1.0.14

package/components/actions/combobox/component/.partials/components/portal/positioner/popup/list/row/component.interface.d.ts

@@ -0,0 +1,2 @@
+import { Combobox } from '@base-ui/react/combobox';
+export type ComboboxPortalPositionerPopupListRowProps = Combobox.Row.Props;

package/components/actions/combobox/component/.partials/components/portal/positioner/popup/list/row/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/actions/combobox/component/.partials/components/portal/positioner/popup/list/row/component.js

@@ -0,0 +1,31 @@
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import styles from '../../../../../../../../../../../components/actions/combobox/component/.partials/styles/component.module.css';
+import { Combobox } from '@base-ui/react/combobox';
+import classNames from 'classnames';
+import React from 'react';
+export function ComboboxPortalPositionerPopupListRow(_a) {
+    var ref = _a.ref, rest = __rest(_a, ["ref"]);
+    return (React.createElement(Combobox.Row, __assign({}, rest, { ref: ref, className: classNames('mosuk-combobox-portal-positioner-popup-list-row', styles.ComboboxPortalPositionerPopupListRow, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/actions/combobox/component/.partials/components/portal/positioner/popup/list/separator/component.d.ts

@@ -0,0 +1,3 @@
+import { ComboboxPortalPositionerPopupListSeparatorProps } from '../../../../../../../../../../../components/actions/combobox/component/.partials/components/portal/positioner/popup/list/separator/component.interface';
+import React from 'react';
+export declare function ComboboxPortalPositionerPopupListSeparator({ ref, ...rest }: ComboboxPortalPositionerPopupListSeparatorProps): React.JSX.Element;

package/components/actions/combobox/component/.partials/components/portal/positioner/popup/list/separator/component.interface.d.ts

@@ -0,0 +1,2 @@
+import { Combobox } from '@base-ui/react/combobox';
+export type ComboboxPortalPositionerPopupListSeparatorProps = Combobox.Separator.Props;

package/components/actions/combobox/component/.partials/components/portal/positioner/popup/list/separator/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/actions/combobox/component/.partials/components/portal/positioner/popup/list/separator/component.js

@@ -0,0 +1,31 @@
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import styles from '../../../../../../../../../../../components/actions/combobox/component/.partials/styles/component.module.css';
+import { Combobox } from '@base-ui/react/combobox';
+import classNames from 'classnames';
+import React from 'react';
+export function ComboboxPortalPositionerPopupListSeparator(_a) {
+    var ref = _a.ref, rest = __rest(_a, ["ref"]);
+    return (React.createElement(Combobox.Separator, __assign({}, rest, { ref: ref, className: classNames('mosuk-combobox-portal-positioner-popup-list-separator', styles.ComboboxPortalPositionerPopupListSeparator, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/actions/combobox/component/.partials/components/portal/positioner/popup/status/component.d.ts

@@ -0,0 +1,3 @@
+import { ComboboxPortalPositionerPopupStatusProps } from '../../../../../../../../../../components/actions/combobox/component/.partials/components/portal/positioner/popup/status/component.interface';
+import React from 'react';
+export declare function ComboboxPortalPositionerPopupStatus({ ...rest }: ComboboxPortalPositionerPopupStatusProps): React.JSX.Element;

package/components/actions/combobox/component/.partials/components/portal/positioner/popup/status/component.interface.d.ts

@@ -0,0 +1,2 @@
+import { Combobox } from '@base-ui/react/combobox';
+export type ComboboxPortalPositionerPopupStatusProps = Combobox.Status.Props;

package/components/actions/combobox/component/.partials/components/portal/positioner/popup/status/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/actions/combobox/component/.partials/components/portal/positioner/popup/status/component.js

@@ -0,0 +1,31 @@
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import styles from '../../../../../../../../../../components/actions/combobox/component/.partials/styles/component.module.css';
+import { Combobox } from '@base-ui/react/combobox';
+import classNames from 'classnames';
+import React from 'react';
+export function ComboboxPortalPositionerPopupStatus(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(Combobox.Status, __assign({}, rest, { className: classNames('mosuk-combobox-portal-positioner-popup-status', styles.ComboboxPortalPositionerPopupStatus, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/actions/combobox/component/.partials/styles/component.module.css

@@ -0,0 +1,13 @@
+@import './fieldset/component.module.css';
+@import './portal/component.module.css';
+
+@layer mosuk-ui {
+    @layer index-11 {
+        .root {
+            display: flex;
+            flex-direction: column;
+            gap: calc(var(--spacing, 0.25rem) * 1.5);
+            width: 100%;
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/fieldset/chips/chip/chip-remove/component.module.css

@@ -0,0 +1,23 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxFieldsetChipsChipChipRemove {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+
+            width: calc(var(--spacing, 0.25rem) * 4);
+            height: calc(var(--spacing, 0.25rem) * 4);
+
+            padding: 0;
+            border: none;
+            border-radius: calc(infinity * 1px);
+            background-color: transparent;
+            color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+            cursor: pointer;
+
+            &:hover {
+                color: var(--color-primary-500, #0074e7);
+            }
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/fieldset/chips/chip/component.module.css

@@ -0,0 +1,24 @@
+@import './chip-remove/component.module.css';
+
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxFieldsetChipsChip {
+            display: inline-flex;
+            align-items: center;
+            gap: calc(var(--spacing, 0.25rem) * 1);
+
+            max-width: 100%;
+            height: calc(var(--spacing, 0.25rem) * 6);
+
+            padding-left: calc(var(--spacing, 0.25rem) * 2);
+            padding-right: calc(var(--spacing, 0.25rem) * 1);
+
+            background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
+            color: var(--color-black, #000);
+            font-size: var(--text-sm, 0.875rem);
+
+            border-radius: calc(infinity * 1px);
+            border: 1px solid var(--color-gray-200, oklch(0.928 0.006 264.531));
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/fieldset/chips/component.module.css

@@ -0,0 +1,14 @@
+@import './chip/component.module.css';
+
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxFieldsetChips {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: calc(var(--spacing, 0.25rem) * 1);
+            flex: 1 1 auto;
+            min-width: 0;
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/fieldset/clear/component.module.css

@@ -0,0 +1,36 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxFieldsetClear {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+
+            width: calc(var(--spacing, 0.25rem) * 6);
+            height: calc(var(--spacing, 0.25rem) * 6);
+
+            padding: 0;
+            border: none;
+            border-radius: calc(infinity * 1px);
+
+            background-color: transparent;
+            color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+
+            outline: none;
+            cursor: pointer;
+
+            transition: all 200ms ease-in-out;
+
+            &:hover {
+                color: var(--color-primary-500, #0074e7);
+                background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
+            }
+
+            &:disabled,
+            &[data-disabled] {
+                opacity: 50%;
+                pointer-events: none;
+            }
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/fieldset/component.module.css

@@ -0,0 +1,14 @@
+@import './input/component.module.css';
+@import './trigger/component.module.css';
+@import './clear/component.module.css';
+@import './icon/component.module.css';
+@import './value/component.module.css';
+@import './chips/component.module.css';
+
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxFieldset {
+            position: relative;
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/fieldset/icon/component.module.css

@@ -0,0 +1,11 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxFieldsetIcon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/fieldset/input/component.module.css

@@ -0,0 +1,5 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxFieldsetInput {}
+    }
+}

package/components/actions/combobox/component/.partials/styles/fieldset/trigger/component.module.css

@@ -0,0 +1,41 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxFieldsetTrigger {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+
+            width: calc(var(--spacing, 0.25rem) * 6);
+            height: calc(var(--spacing, 0.25rem) * 6);
+
+            padding: 0;
+            border: none;
+            border-radius: calc(infinity * 1px);
+
+            background-color: transparent;
+            color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+
+            outline: none;
+            cursor: pointer;
+
+            transition: all 200ms ease-in-out;
+
+            &:hover {
+                color: var(--color-primary-500, #0074e7);
+                background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
+            }
+
+            &[data-open] {
+                color: var(--color-primary-500, #0074e7);
+                rotate: 180deg;
+            }
+
+            &:disabled,
+            &[data-disabled] {
+                opacity: 50%;
+                pointer-events: none;
+            }
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/fieldset/value/component.module.css

@@ -0,0 +1,17 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxFieldsetValue {
+            flex: 1 1 auto;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: var(--text-base, 1rem);
+            color: var(--color-black, #000);
+
+            &[data-placeholder] {
+                color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+            }
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/portal/backdrop/component.module.css

@@ -0,0 +1,10 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxPortalBackdrop {
+            position: fixed;
+            inset: 0;
+            z-index: 99;
+            background-color: transparent;
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/portal/component.module.css

@@ -0,0 +1,8 @@
+@import './backdrop/component.module.css';
+@import './positioner/component.module.css';
+
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxPortal {}
+    }
+}

package/components/actions/combobox/component/.partials/styles/portal/positioner/component.module.css

@@ -0,0 +1,9 @@
+@import './popup/component.module.css';
+
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxPortalPositioner {
+            z-index: 100;
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/portal/positioner/popup/arrow/component.module.css

@@ -0,0 +1,8 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxPortalPositionerPopupArrow {
+            display: flex;
+            color: var(--color-gray-100, oklch(0.967 0.003 264.542));
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/portal/positioner/popup/component.module.css

@@ -0,0 +1,32 @@
+@import './arrow/component.module.css';
+@import './status/component.module.css';
+@import './empty/component.module.css';
+@import './list/component.module.css';
+
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxPortalPositionerPopup {
+            overflow: hidden;
+
+            width: var(--anchor-width, 100%);
+            max-height: min(var(--available-height, 24rem), 24rem);
+
+            padding: calc(var(--spacing, 0.25rem) * 1);
+
+            background-color: var(--color-white);
+
+            border: 1px solid var(--color-gray-100);
+            border-radius: calc(var(--spacing, 0.25rem) * 5);
+            box-shadow: 0 25px 50px -12px rgba(243, 244, 246, var(--tw-shadow-alpha, 0.5));
+
+            transform-origin: var(--transform-origin);
+            transition: transform 200ms ease, opacity 200ms ease;
+
+            &[data-starting-style],
+            &[data-ending-style] {
+                opacity: 0;
+                transform: scale(0.96);
+            }
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/portal/positioner/popup/empty/component.module.css

@@ -0,0 +1,10 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxPortalPositionerPopupEmpty {
+            padding: calc(var(--spacing, 0.25rem) * 3);
+            color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+            font-size: var(--text-sm, 0.875rem);
+            text-align: center;
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/portal/positioner/popup/list/collection/component.module.css

@@ -0,0 +1,7 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxPortalPositionerPopupListCollection {
+            display: contents;
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/portal/positioner/popup/list/component.module.css

@@ -0,0 +1,18 @@
+@import './row/component.module.css';
+@import './item/component.module.css';
+@import './separator/component.module.css';
+@import './group/component.module.css';
+@import './collection/component.module.css';
+
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxPortalPositionerPopupList {
+            overflow-x: hidden;
+            overflow-y: auto;
+
+            max-height: inherit;
+
+            outline: none;
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/portal/positioner/popup/list/group/component.module.css

@@ -0,0 +1,10 @@
+@import './label/component.module.css';
+
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxPortalPositionerPopupListGroup {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/portal/positioner/popup/list/group/label/component.module.css

@@ -0,0 +1,12 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxPortalPositionerPopupListGroupLabel {
+            padding: calc(var(--spacing, 0.25rem) * 2) calc(var(--spacing, 0.25rem) * 3);
+            color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+            font-size: var(--text-xs, 0.75rem);
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/portal/positioner/popup/list/item/component.module.css

@@ -0,0 +1,37 @@
+@import './indicator/component.module.css';
+
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxPortalPositionerPopupListItem {
+            position: relative;
+            overflow: hidden;
+
+            width: 100%;
+
+            padding: calc(var(--spacing, 0.25rem) * 1);
+            border-radius: var(--radius-2xl);
+
+            user-select: none;
+            cursor: pointer;
+
+            transition: all 200ms ease-in-out;
+
+            &:hover {
+                background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
+            }
+
+            &[data-highlighted] {
+                background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
+            }
+
+            &[data-selected] {
+                background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
+            }
+
+            &[data-disabled] {
+                opacity: 50%;
+                pointer-events: none;
+            }
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/portal/positioner/popup/list/item/indicator/component.module.css

@@ -0,0 +1,21 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxPortalPositionerPopupListItemIndicator {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+
+            width: calc(var(--spacing, 0.25rem) * 3.5);
+            height: calc(var(--spacing, 0.25rem) * 3.5);
+            min-width: calc(var(--spacing, 0.25rem) * 3.5);
+            min-height: calc(var(--spacing, 0.25rem) * 3.5);
+
+            color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+
+            &[data-selected] {
+                color: var(--color-primary-500, #0074e7);
+            }
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/portal/positioner/popup/list/row/component.module.css

@@ -0,0 +1,7 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxPortalPositionerPopupListRow {
+            display: contents;
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/portal/positioner/popup/list/separator/component.module.css

@@ -0,0 +1,9 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxPortalPositionerPopupListSeparator {
+            height: 1px;
+            margin: calc(var(--spacing, 0.25rem) * 1) calc(var(--spacing, 0.25rem) * 2);
+            background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
+        }
+    }
+}

package/components/actions/combobox/component/.partials/styles/portal/positioner/popup/status/component.module.css

@@ -0,0 +1,10 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .ComboboxPortalPositionerPopupStatus {
+            padding: calc(var(--spacing, 0.25rem) * 3);
+            color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+            font-size: var(--text-sm, 0.875rem);
+            text-align: center;
+        }
+    }
+}