@msviderok/base-ui-solid 1.0.0-beta.1

package/cjs/preview-card/trigger/PreviewCardTrigger.d.ts

@@ -0,0 +1,17 @@
+import type { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * A link that opens the preview card.
+ * Renders an `<a>` element.
+ *
+ * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
+ */
+export declare function PreviewCardTrigger(componentProps: PreviewCardTrigger.Props): import("solid-js").JSX.Element;
+export declare namespace PreviewCardTrigger {
+  interface State {
+    /**
+     * Whether the preview card is currently open.
+     */
+    open: boolean;
+  }
+  interface Props extends BaseUIComponentProps<'a', State> {}
+}

package/cjs/preview-card/trigger/PreviewCardTrigger.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviewCardTrigger = PreviewCardTrigger;
+var _solidHelpers = require("../../solid-helpers");
+var _popupStateMapping = require("../../utils/popupStateMapping");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _PreviewCardContext = require("../root/PreviewCardContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * A link that opens the preview card.
+ * Renders an `<a>` element.
+ *
+ * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
+ */
+function PreviewCardTrigger(componentProps) {
+  const [,, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, []);
+  const {
+    open,
+    triggerProps,
+    setTriggerElement
+  } = (0, _PreviewCardContext.usePreviewCardRootContext)();
+  const state = {
+    get open() {
+      return open();
+    }
+  };
+  const element = (0, _useRenderElement.useRenderElement)('a', componentProps, {
+    state,
+    ref: setTriggerElement,
+    props: [triggerProps, elementProps],
+    customStyleHookMapping: _popupStateMapping.triggerOpenStateMapping
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: element()
+  });
+}

package/cjs/preview-card/trigger/PreviewCardTriggerDataAttributes.d.ts

@@ -0,0 +1,6 @@
+export declare enum PreviewCardTriggerDataAttributes {
+  /**
+   * Present when the corresponding preview card is open.
+   */
+  popupOpen = "data-popup-open",
+}

package/cjs/preview-card/trigger/PreviewCardTriggerDataAttributes.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviewCardTriggerDataAttributes = void 0;
+var _popupStateMapping = require("../../utils/popupStateMapping");
+let PreviewCardTriggerDataAttributes = exports.PreviewCardTriggerDataAttributes = function (PreviewCardTriggerDataAttributes) {
+  /**
+   * Present when the corresponding preview card is open.
+   */
+  PreviewCardTriggerDataAttributes[PreviewCardTriggerDataAttributes["popupOpen"] = _popupStateMapping.CommonTriggerDataAttributes.popupOpen] = "popupOpen";
+  return PreviewCardTriggerDataAttributes;
+}({});

package/cjs/preview-card/utils/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const OPEN_DELAY = 600;
+export declare const CLOSE_DELAY = 300;

package/cjs/preview-card/utils/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OPEN_DELAY = exports.CLOSE_DELAY = void 0;
+const OPEN_DELAY = exports.OPEN_DELAY = 600;
+const CLOSE_DELAY = exports.CLOSE_DELAY = 300;

package/cjs/progress/index.d.ts

@@ -0,0 +1 @@
+export * as Progress from "./index.parts.js";

package/cjs/progress/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Progress = void 0;
+var _Progress = _interopRequireWildcard(require("./index.parts"));
+exports.Progress = _Progress;

package/cjs/progress/index.parts.d.ts

@@ -0,0 +1,6 @@
+export { ProgressRoot as Root } from "./root/ProgressRoot.js";
+export { ProgressTrack as Track } from "./track/ProgressTrack.js";
+export { ProgressIndicator as Indicator } from "./indicator/ProgressIndicator.js";
+export { ProgressValue as Value } from "./value/ProgressValue.js";
+export { ProgressLabel as Label } from "./label/ProgressLabel.js";
+export type { ProgressStatus as Status } from "./root/ProgressRoot.js";

package/cjs/progress/index.parts.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Indicator", {
+  enumerable: true,
+  get: function () {
+    return _ProgressIndicator.ProgressIndicator;
+  }
+});
+Object.defineProperty(exports, "Label", {
+  enumerable: true,
+  get: function () {
+    return _ProgressLabel.ProgressLabel;
+  }
+});
+Object.defineProperty(exports, "Root", {
+  enumerable: true,
+  get: function () {
+    return _ProgressRoot.ProgressRoot;
+  }
+});
+Object.defineProperty(exports, "Track", {
+  enumerable: true,
+  get: function () {
+    return _ProgressTrack.ProgressTrack;
+  }
+});
+Object.defineProperty(exports, "Value", {
+  enumerable: true,
+  get: function () {
+    return _ProgressValue.ProgressValue;
+  }
+});
+var _ProgressRoot = require("./root/ProgressRoot");
+var _ProgressTrack = require("./track/ProgressTrack");
+var _ProgressIndicator = require("./indicator/ProgressIndicator");
+var _ProgressValue = require("./value/ProgressValue");
+var _ProgressLabel = require("./label/ProgressLabel");

package/cjs/progress/indicator/ProgressIndicator.d.ts

@@ -0,0 +1,13 @@
+import { type JSX } from 'solid-js';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { ProgressRoot } from "../root/ProgressRoot.js";
+/**
+ * Visualizes the completion status of the task.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
+ */
+export declare function ProgressIndicator(componentProps: ProgressIndicator.Props): JSX.Element;
+export declare namespace ProgressIndicator {
+  interface Props extends BaseUIComponentProps<'div', ProgressRoot.State> {}
+}

package/cjs/progress/indicator/ProgressIndicator.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressIndicator = ProgressIndicator;
+var _solidHelpers = require("../../solid-helpers");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _valueToPercent = require("../../utils/valueToPercent");
+var _ProgressRootContext = require("../root/ProgressRootContext");
+var _styleHooks = require("../root/styleHooks");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Visualizes the completion status of the task.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
+ */
+function ProgressIndicator(componentProps) {
+  const [,, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, []);
+  const {
+    max,
+    min,
+    value,
+    state
+  } = (0, _ProgressRootContext.useProgressRootContext)();
+  const percentageValue = () => Number.isFinite(value()) && value() !== null ? (0, _valueToPercent.valueToPercent)(value(), min(), max()) : null;
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state,
+    props: [{
+      get style() {
+        if (percentageValue() == null) {
+          return {};
+        }
+        return {
+          'inset-inline-start': 0,
+          height: 'inherit',
+          width: `${percentageValue()}%`
+        };
+      }
+    }, elementProps],
+    customStyleHookMapping: _styleHooks.progressStyleHookMapping
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: element()
+  });
+}

package/cjs/progress/indicator/ProgressIndicatorDataAttributes.d.ts

@@ -0,0 +1,14 @@
+export declare enum ProgressIndicatorDataAttributes {
+  /**
+   * Present when the progress has completed.
+   */
+  complete = "data-complete",
+  /**
+   * Present when the progress is in interminate state.
+   */
+  indeterminate = "data-indeterminate",
+  /**
+   * Present while the progress is progressing.
+   */
+  progressing = "data-progressing",
+}

package/cjs/progress/indicator/ProgressIndicatorDataAttributes.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressIndicatorDataAttributes = void 0;
+let ProgressIndicatorDataAttributes = exports.ProgressIndicatorDataAttributes = /*#__PURE__*/function (ProgressIndicatorDataAttributes) {
+  /**
+   * Present when the progress has completed.
+   */
+  ProgressIndicatorDataAttributes["complete"] = "data-complete";
+  /**
+   * Present when the progress is in interminate state.
+   */
+  ProgressIndicatorDataAttributes["indeterminate"] = "data-indeterminate";
+  /**
+   * Present while the progress is progressing.
+   */
+  ProgressIndicatorDataAttributes["progressing"] = "data-progressing";
+  return ProgressIndicatorDataAttributes;
+}({});

package/cjs/progress/label/ProgressLabel.d.ts

@@ -0,0 +1,12 @@
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { ProgressRoot } from "../root/ProgressRoot.js";
+/**
+ * An accessible label for the progress bar.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
+ */
+export declare function ProgressLabel(componentProps: ProgressLabel.Props): import("solid-js").JSX.Element;
+export declare namespace ProgressLabel {
+  interface Props extends BaseUIComponentProps<'span', ProgressRoot.State> {}
+}

package/cjs/progress/label/ProgressLabel.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressLabel = ProgressLabel;
+var _solidJs = require("solid-js");
+var _solidHelpers = require("../../solid-helpers");
+var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _ProgressRootContext = require("../root/ProgressRootContext");
+var _styleHooks = require("../root/styleHooks");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * An accessible label for the progress bar.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
+ */
+function ProgressLabel(componentProps) {
+  const [, local, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, ['id']);
+  const id = (0, _useBaseUiId.useBaseUiId)(() => local.id);
+  let ref;
+  const {
+    setCodependentRefs,
+    state
+  } = (0, _ProgressRootContext.useProgressRootContext)();
+  (0, _solidJs.onMount)(() => {
+    setCodependentRefs('label', {
+      explicitId: id,
+      ref: () => ref,
+      id: () => local.id
+    });
+  });
+  const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
+    state,
+    ref: el => {
+      ref = el;
+    },
+    props: [{
+      get id() {
+        return id();
+      }
+    }, elementProps],
+    customStyleHookMapping: _styleHooks.progressStyleHookMapping
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: element()
+  });
+}

package/cjs/progress/label/ProgressLabelDataAttributes.d.ts

@@ -0,0 +1,14 @@
+export declare enum ProgressLabelDataAttributes {
+  /**
+   * Present when the progress has completed.
+   */
+  complete = "data-complete",
+  /**
+   * Present when the progress is in interminate state.
+   */
+  indeterminate = "data-indeterminate",
+  /**
+   * Present while the progress is progressing.
+   */
+  progressing = "data-progressing",
+}

package/cjs/progress/label/ProgressLabelDataAttributes.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressLabelDataAttributes = void 0;
+let ProgressLabelDataAttributes = exports.ProgressLabelDataAttributes = /*#__PURE__*/function (ProgressLabelDataAttributes) {
+  /**
+   * Present when the progress has completed.
+   */
+  ProgressLabelDataAttributes["complete"] = "data-complete";
+  /**
+   * Present when the progress is in interminate state.
+   */
+  ProgressLabelDataAttributes["indeterminate"] = "data-indeterminate";
+  /**
+   * Present while the progress is progressing.
+   */
+  ProgressLabelDataAttributes["progressing"] = "data-progressing";
+  return ProgressLabelDataAttributes;
+}({});

package/cjs/progress/root/ProgressRoot.d.ts

@@ -0,0 +1,47 @@
+import { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * Groups all parts of the progress bar and provides the task completion status to screen readers.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
+ */
+export declare function ProgressRoot(componentProps: ProgressRoot.Props): import("solid-js").JSX.Element;
+export type ProgressStatus = 'indeterminate' | 'progressing' | 'complete';
+export declare namespace ProgressRoot {
+  type State = {
+    status: ProgressStatus;
+  };
+  interface Props extends BaseUIComponentProps<'div', State> {
+    /**
+     * Options to format the value.
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar.
+     * @param {string} formattedValue The component's formatted value.
+     * @param {number | null} value The component's numerical value.
+     * @returns {string}
+     */
+    getAriaValueText?: (formattedValue: string | null, value: number | null) => string;
+    /**
+     * The locale used by `Intl.NumberFormat` when formatting the value.
+     * Defaults to the user's runtime locale.
+     */
+    locale?: Intl.LocalesArgument;
+    /**
+     * The maximum value.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The minimum value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The current value. The component is indeterminate when value is `null`.
+     * @default null
+     */
+    value: number | null;
+  }
+}

package/cjs/progress/root/ProgressRoot.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressRoot = ProgressRoot;
+var _solidJs = require("solid-js");
+var _store = require("solid-js/store");
+var _solidHelpers = require("../../solid-helpers");
+var _formatNumber = require("../../utils/formatNumber");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _ProgressRootContext = require("./ProgressRootContext");
+var _styleHooks = require("./styleHooks");
+var _jsxRuntime = require("react/jsx-runtime");
+function formatValue(value, locale, format) {
+  if (value == null) {
+    return '';
+  }
+  if (!format) {
+    return (0, _formatNumber.formatNumber)(value / 100, locale, {
+      style: 'percent'
+    });
+  }
+  return (0, _formatNumber.formatNumber)(value, locale, format);
+}
+function getDefaultAriaValueText(formattedValue, value) {
+  if (value == null) {
+    return 'indeterminate progress';
+  }
+  return formattedValue || `${value}%`;
+}
+
+/**
+ * Groups all parts of the progress bar and provides the task completion status to screen readers.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
+ */
+function ProgressRoot(componentProps) {
+  const [, local, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, ['format', 'getAriaValueText', 'locale', 'max', 'min', 'value']);
+  const max = () => local.max ?? 100;
+  const min = () => local.min ?? 0;
+  const [labelId, setLabelId] = (0, _solidJs.createSignal)();
+  const [codependentRefs, setCodependentRefs] = (0, _store.createStore)({});
+  let formatOptionsRef = local.format;
+  (0, _solidJs.createEffect)(() => {
+    formatOptionsRef = local.format;
+  });
+  const status = (0, _solidJs.createMemo)(() => {
+    if (Number.isFinite(local.value)) {
+      return local.value === max() ? 'complete' : 'progressing';
+    }
+    return 'indeterminate';
+  });
+  const formattedValue = () => formatValue(local.value, local.locale, formatOptionsRef);
+  const state = {
+    get status() {
+      return status();
+    }
+  };
+  const contextValue = {
+    formattedValue,
+    max,
+    min,
+    state,
+    status,
+    value: () => local.value,
+    codependentRefs,
+    setCodependentRefs
+  };
+  (0, _solidJs.createEffect)((0, _solidJs.on)(() => codependentRefs.label, label => {
+    if (label) {
+      setLabelId(label.id() ?? label.explicitId());
+    }
+    (0, _solidJs.onCleanup)(() => {
+      setLabelId(undefined);
+    });
+  }));
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state,
+    customStyleHookMapping: _styleHooks.progressStyleHookMapping,
+    props: [{
+      role: 'progressbar',
+      get 'aria-labelledby'() {
+        return labelId();
+      },
+      get 'aria-valuemax'() {
+        return max();
+      },
+      get 'aria-valuemin'() {
+        return min();
+      },
+      get 'aria-valuenow'() {
+        return local.value ?? undefined;
+      },
+      get 'aria-valuetext'() {
+        return local.getAriaValueText ? local.getAriaValueText(formattedValue(), local.value) : componentProps['aria-valuetext'] ?? getDefaultAriaValueText(formattedValue(), local.value);
+      }
+    }, elementProps]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressRootContext.ProgressRootContext.Provider, {
+    value: contextValue,
+    children: element()
+  });
+}

package/cjs/progress/root/ProgressRootContext.d.ts

@@ -0,0 +1,31 @@
+import { type Accessor } from 'solid-js';
+import type { SetStoreFunction, Store } from 'solid-js/store';
+import type { CodependentRefs } from "../../solid-helpers.js";
+import type { ProgressRoot, ProgressStatus } from "./ProgressRoot.js";
+export type ProgressRootContext = {
+  /**
+   * Formatted value of the component.
+   */
+  formattedValue: Accessor<string>;
+  /**
+   * The maximum value.
+   */
+  max: Accessor<number>;
+  /**
+   * The minimum value.
+   */
+  min: Accessor<number>;
+  /**
+   * Value of the component.
+   */
+  value: Accessor<number | null>;
+  state: ProgressRoot.State;
+  status: Accessor<ProgressStatus>;
+  codependentRefs: Store<CodependentRefs<['label']>>;
+  setCodependentRefs: SetStoreFunction<CodependentRefs<['label']>>;
+};
+/**
+ * @internal
+ */
+export declare const ProgressRootContext: import("solid-js").Context<ProgressRootContext | undefined>;
+export declare function useProgressRootContext(): ProgressRootContext;

package/cjs/progress/root/ProgressRootContext.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressRootContext = void 0;
+exports.useProgressRootContext = useProgressRootContext;
+var _solidJs = require("solid-js");
+/**
+ * @internal
+ */
+const ProgressRootContext = exports.ProgressRootContext = (0, _solidJs.createContext)(undefined);
+function useProgressRootContext() {
+  const context = (0, _solidJs.useContext)(ProgressRootContext);
+  if (context === undefined) {
+    throw new Error('Base UI: ProgressRootContext is missing. Progress parts must be placed within <Progress.Root>.');
+  }
+  return context;
+}

package/cjs/progress/root/ProgressRootDataAttributes.d.ts

@@ -0,0 +1,14 @@
+export declare enum ProgressRootDataAttributes {
+  /**
+   * Present when the progress has completed.
+   */
+  complete = "data-complete",
+  /**
+   * Present when the progress is in interminate state.
+   */
+  indeterminate = "data-indeterminate",
+  /**
+   * Present while the progress is progressing.
+   */
+  progressing = "data-progressing",
+}

package/cjs/progress/root/ProgressRootDataAttributes.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressRootDataAttributes = void 0;
+let ProgressRootDataAttributes = exports.ProgressRootDataAttributes = /*#__PURE__*/function (ProgressRootDataAttributes) {
+  /**
+   * Present when the progress has completed.
+   */
+  ProgressRootDataAttributes["complete"] = "data-complete";
+  /**
+   * Present when the progress is in interminate state.
+   */
+  ProgressRootDataAttributes["indeterminate"] = "data-indeterminate";
+  /**
+   * Present while the progress is progressing.
+   */
+  ProgressRootDataAttributes["progressing"] = "data-progressing";
+  return ProgressRootDataAttributes;
+}({});

package/cjs/progress/root/styleHooks.d.ts

@@ -0,0 +1,4 @@
+import type { Accessorify } from "../../floating-ui-solid/index.js";
+import type { CustomStyleHookMapping } from "../../utils/getStyleHookProps.js";
+import type { ProgressRoot } from "./ProgressRoot.js";
+export declare const progressStyleHookMapping: CustomStyleHookMapping<Accessorify<ProgressRoot.State, 'maybeAccessor'>>;

package/cjs/progress/root/styleHooks.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.progressStyleHookMapping = void 0;
+var _solidHelpers = require("../../solid-helpers");
+var _ProgressRootDataAttributes = require("./ProgressRootDataAttributes");
+const progressStyleHookMapping = exports.progressStyleHookMapping = {
+  status(value) {
+    if ((0, _solidHelpers.access)(value) === 'progressing') {
+      return {
+        [_ProgressRootDataAttributes.ProgressRootDataAttributes.progressing]: ''
+      };
+    }
+    if ((0, _solidHelpers.access)(value) === 'complete') {
+      return {
+        [_ProgressRootDataAttributes.ProgressRootDataAttributes.complete]: ''
+      };
+    }
+    if ((0, _solidHelpers.access)(value) === 'indeterminate') {
+      return {
+        [_ProgressRootDataAttributes.ProgressRootDataAttributes.indeterminate]: ''
+      };
+    }
+    return null;
+  }
+};

package/cjs/progress/track/ProgressTrack.d.ts

@@ -0,0 +1,12 @@
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { ProgressRoot } from "../root/ProgressRoot.js";
+/**
+ * Contains the progress bar indicator.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
+ */
+export declare function ProgressTrack(componentProps: ProgressTrack.Props): import("solid-js").JSX.Element;
+export declare namespace ProgressTrack {
+  interface Props extends BaseUIComponentProps<'div', ProgressRoot.State> {}
+}