@ruya.sa/ui 3.71.3

package/dist/elements/Popup/PopupButtonList/index.scss

@@ -0,0 +1,69 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .popup-button-list {
+    --list-button-padding: calc(var(--base) * 0.5);
+    --popup-button-list-gap: 3px;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    [dir='rtl'] &__text-align--left {
+      text-align: right;
+    }
+    &__text-align--left {
+      text-align: left;
+    }
+
+    &__text-align--center {
+      text-align: center;
+    }
+    [dir='rtl'] &__text-align--right {
+      text-align: left;
+    }
+    &__text-align--right {
+      text-align: right;
+    }
+
+    &__button {
+      @extend %btn-reset;
+      padding-left: var(--list-button-padding);
+      padding-right: var(--list-button-padding);
+      padding-top: calc(2px + var(--popup-button-list-gap) / 2);
+      padding-bottom: calc(2px + var(--popup-button-list-gap) / 2);
+      cursor: pointer;
+      text-align: inherit;
+      line-height: var(--base);
+      text-decoration: none;
+      border-radius: 3px;
+      width: 100%;
+      button {
+        @extend %btn-reset;
+
+        &:focus-visible {
+          outline: none;
+        }
+      }
+
+      &:hover,
+      &:focus-visible,
+      &:focus-within {
+        outline: none;
+        background-color: var(--popup-button-highlight);
+      }
+    }
+
+    &__button--selected {
+      background-color: var(--theme-elevation-150);
+    }
+
+    &__disabled {
+      cursor: not-allowed;
+      --popup-button-highlight: transparent;
+      background-color: var(--popup-button-highlight);
+      color: var(--theme-elevation-350);
+      &:hover {
+        --popup-button-highlight: var(--theme-elevation-50);
+      }
+    }
+  }
+}

package/dist/elements/Popup/PopupDivider/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.scss';
+export declare const PopupListDivider: React.FC;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Popup/PopupDivider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupDivider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAEpC,CAAA"}

package/dist/elements/Popup/PopupDivider/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import './index.scss';
+const baseClass = 'popup-divider';
+export const PopupListDivider = () => {
+  return /*#__PURE__*/_jsx("hr", {
+    className: baseClass
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Popup/PopupDivider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","PopupListDivider","_jsx","className"],"sources":["../../../../src/elements/Popup/PopupDivider/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'popup-divider'\n\nexport const PopupListDivider: React.FC = () => {\n  return <hr className={baseClass} />\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,gBAAA,GAA6BA,CAAA;EACxC,oBAAOC,IAAA,CAAC;IAAGC,SAAA,EAAWH;;AACxB","ignoreList":[]}

package/dist/elements/Popup/PopupDivider/index.scss

@@ -0,0 +1,11 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .popup-divider {
+    width: 100%;
+    height: 1px;
+    background-color: var(--theme-elevation-150);
+    border: none;
+    margin: calc(var(--base) * 0.75) 0;
+  }
+}

package/dist/elements/Popup/PopupGroupLabel/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.scss';
+export declare const PopupListGroupLabel: React.FC<{
+    label: string;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Popup/PopupGroupLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupGroupLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IACzC,KAAK,EAAE,MAAM,CAAA;CACd,CAEA,CAAA"}

package/dist/elements/Popup/PopupGroupLabel/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import './index.scss';
+const baseClass = 'popup-list-group-label';
+export const PopupListGroupLabel = ({
+  label
+}) => {
+  return /*#__PURE__*/_jsx("p", {
+    className: baseClass,
+    children: label
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Popup/PopupGroupLabel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","PopupListGroupLabel","label","_jsx","className"],"sources":["../../../../src/elements/Popup/PopupGroupLabel/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'popup-list-group-label'\n\nexport const PopupListGroupLabel: React.FC<{\n  label: string\n}> = ({ label }) => {\n  return <p className={baseClass}>{label}</p>\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,mBAAA,GAERA,CAAC;EAAEC;AAAK,CAAE;EACb,oBAAOC,IAAA,CAAC;IAAEC,SAAA,EAAWJ,SAAA;cAAYE;;AACnC","ignoreList":[]}

package/dist/elements/Popup/PopupGroupLabel/index.scss

@@ -0,0 +1,11 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .popup-list-group-label {
+    color: var(--theme-elevation-500);
+    font-weight: 500;
+    line-height: 1;
+    margin-top: calc(var(--base) * 0.25);
+    margin-bottom: calc(var(--base) * 0.5);
+  }
+}

package/dist/elements/Popup/PopupTrigger/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './index.scss';
+export type PopupTriggerProps = {
+    active: boolean;
+    button: React.ReactNode;
+    buttonType: 'custom' | 'default' | 'none';
+    className?: string;
+    disabled?: boolean;
+    noBackground?: boolean;
+    setActive: (active: boolean, viaKeyboard?: boolean) => void;
+    size?: 'large' | 'medium' | 'small' | 'xsmall';
+};
+export declare const PopupTrigger: React.FC<PopupTriggerProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Popup/PopupTrigger/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,UAAU,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3D,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuDpD,CAAA"}

package/dist/elements/Popup/PopupTrigger/index.js

@@ -0,0 +1,51 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import './index.scss';
+const baseClass = 'popup-button';
+export const PopupTrigger = props => {
+  const {
+    active,
+    button,
+    buttonType,
+    className,
+    disabled,
+    noBackground,
+    setActive,
+    size
+  } = props;
+  const classes = [baseClass, className, `${baseClass}--${buttonType}`, !noBackground && `${baseClass}--background`, size && `${baseClass}--size-${size}`, disabled && `${baseClass}--disabled`].filter(Boolean).join(' ');
+  const handleClick = () => {
+    setActive(!active, false);
+  };
+  const handleKeyDown = e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      setActive(!active, true);
+    }
+  };
+  if (buttonType === 'none') {
+    return null;
+  }
+  if (buttonType === 'custom') {
+    return /*#__PURE__*/_jsx("div", {
+      className: classes,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: 0,
+      children: button
+    });
+  }
+  return /*#__PURE__*/_jsx("button", {
+    className: classes,
+    disabled: disabled,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    tabIndex: 0,
+    type: "button",
+    children: button
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Popup/PopupTrigger/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","PopupTrigger","props","active","button","buttonType","className","disabled","noBackground","setActive","size","classes","filter","Boolean","join","handleClick","handleKeyDown","e","key","preventDefault","_jsx","onClick","onKeyDown","role","tabIndex","type"],"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'popup-button'\n\nexport type PopupTriggerProps = {\n  active: boolean\n  button: React.ReactNode\n  buttonType: 'custom' | 'default' | 'none'\n  className?: string\n  disabled?: boolean\n  noBackground?: boolean\n  setActive: (active: boolean, viaKeyboard?: boolean) => void\n  size?: 'large' | 'medium' | 'small' | 'xsmall'\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const { active, button, buttonType, className, disabled, noBackground, setActive, size } = props\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--${buttonType}`,\n    !noBackground && `${baseClass}--background`,\n    size && `${baseClass}--size-${size}`,\n    disabled && `${baseClass}--disabled`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick = () => {\n    setActive(!active, false)\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      setActive(!active, true)\n    }\n  }\n\n  if (buttonType === 'none') {\n    return null\n  }\n\n  if (buttonType === 'custom') {\n    return (\n      <div\n        className={classes}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        role=\"button\"\n        tabIndex={0}\n      >\n        {button}\n      </div>\n    )\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      tabIndex={0}\n      type=\"button\"\n    >\n      {button}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAalB,OAAO,MAAMC,YAAA,GAA6CC,KAAA;EACxD,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,SAAS;IAAEC;EAAI,CAAE,GAAGR,KAAA;EAE3F,MAAMS,OAAA,GAAU,CACdX,SAAA,EACAM,SAAA,EACA,GAAGN,SAAA,KAAcK,UAAA,EAAY,EAC7B,CAACG,YAAA,IAAgB,GAAGR,SAAA,cAAuB,EAC3CU,IAAA,IAAQ,GAAGV,SAAA,UAAmBU,IAAA,EAAM,EACpCH,QAAA,IAAY,GAAGP,SAAA,YAAqB,CACrC,CACEY,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,WAAA,GAAcA,CAAA;IAClBN,SAAA,CAAU,CAACN,MAAA,EAAQ;EACrB;EAEA,MAAMa,aAAA,GAAiBC,CAAA;IACrB,IAAIA,CAAA,CAAEC,GAAG,KAAK,WAAWD,CAAA,CAAEC,GAAG,KAAK,KAAK;MACtCD,CAAA,CAAEE,cAAc;MAChBV,SAAA,CAAU,CAACN,MAAA,EAAQ;IACrB;EACF;EAEA,IAAIE,UAAA,KAAe,QAAQ;IACzB,OAAO;EACT;EAEA,IAAIA,UAAA,KAAe,UAAU;IAC3B,oBACEe,IAAA,CAAC;MACCd,SAAA,EAAWK,OAAA;MACXU,OAAA,EAASN,WAAA;MACTO,SAAA,EAAWN,aAAA;MACXO,IAAA,EAAK;MACLC,QAAA,EAAU;gBAETpB;;EAGP;EAEA,oBACEgB,IAAA,CAAC;IACCd,SAAA,EAAWK,OAAA;IACXJ,QAAA,EAAUA,QAAA;IACVc,OAAA,EAASN,WAAA;IACTO,SAAA,EAAWN,aAAA;IACXQ,QAAA,EAAU;IACVC,IAAA,EAAK;cAEJrB;;AAGP","ignoreList":[]}

package/dist/elements/Popup/PopupTrigger/index.scss

@@ -0,0 +1,39 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .popup-button {
+    height: 100%;
+    color: currentColor;
+    padding: 0;
+    font-size: inherit;
+    line-height: inherit;
+    font-family: inherit;
+    border: 0;
+    cursor: pointer;
+    display: inline-flex;
+
+    &--background {
+      background: transparent;
+    }
+
+    &--size-xsmall {
+      padding: base(0.1);
+    }
+
+    &--size-small {
+      padding: base(0.2);
+    }
+
+    &--size-medium {
+      padding: base(0.3);
+    }
+
+    &--size-large {
+      padding: base(0.4);
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+    }
+  }
+}

package/dist/elements/Popup/PopupTrigger/types.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/elements/Popup/PopupTrigger/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupTrigger/types.ts"],"names":[],"mappings":""}

package/dist/elements/Popup/PopupTrigger/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/dist/elements/Popup/PopupTrigger/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/elements/Popup/PopupTrigger/types.ts"],"sourcesContent":[null],"mappings":"","ignoreList":[]}

package/dist/elements/Popup/index.d.ts

@@ -0,0 +1,61 @@
+import type { CSSProperties } from 'react';
+export * as PopupList from './PopupButtonList/index.js';
+import React from 'react';
+import './index.scss';
+export type PopupProps = {
+    backgroundColor?: CSSProperties['backgroundColor'];
+    boundingRef?: React.RefObject<HTMLElement>;
+    button?: React.ReactNode;
+    buttonClassName?: string;
+    buttonSize?: 'large' | 'medium' | 'small' | 'xsmall';
+    buttonType?: 'custom' | 'default' | 'none';
+    caret?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    /**
+     * Force control the open state of the popup, regardless of the trigger.
+     */
+    forceOpen?: boolean;
+    /**
+     * Preferred horizontal alignment of the popup, if there is enough space available.
+     *
+     * @default 'left'
+     */
+    horizontalAlign?: 'center' | 'left' | 'right';
+    id?: string;
+    initActive?: boolean;
+    noBackground?: boolean;
+    onToggleClose?: () => void;
+    onToggleOpen?: (active: boolean) => void;
+    render?: (args: {
+        close: () => void;
+    }) => React.ReactNode;
+    showOnHover?: boolean;
+    /**
+     * By default, the scrollbar is hidden. If you want to show it, set this to true.
+     * In both cases, the container is still scrollable.
+     *
+     * @default false
+     */
+    showScrollbar?: boolean;
+    size?: 'fit-content' | 'large' | 'medium' | 'small';
+    /**
+     * Preferred vertical alignment of the popup (position below or above the trigger),
+     * if there is enough space available.
+     *
+     * If the popup is too close to the edge of the viewport, it will flip to the opposite side
+     * regardless of the preferred vertical alignment.
+     *
+     * @default 'bottom'
+     */
+    verticalAlign?: 'bottom' | 'top';
+};
+/**
+ * Component that renders a popup, as well as a button that triggers the popup.
+ *
+ * The popup is rendered in a portal, and is automatically positioned above / below the trigger,
+ * depending on the verticalAlign prop and the space available.
+ */
+export declare const Popup: React.FC<PopupProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Popup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KAAmD,MAAM,OAAO,CAAA;AAIvE,OAAO,cAAc,CAAA;AAuBrB,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;IACpD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnD;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwWtC,CAAA"}