@hubstr/kit 0.1.4 → 0.1.6

package/ui/es/base-ui/ScrollArea/style.mjs

@@ -0,0 +1,315 @@
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/ScrollArea/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	content: css`
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    font-size: ${cssVar.fontSizeSM};
+    line-height: 1.375rem;
+    color: ${cssVar.colorText};
+  `,
+	corner: css`
+    background: ${cssVar.colorFillSecondary};
+  `,
+	root: css`
+    position: relative;
+    box-sizing: border-box;
+  `,
+	scrollbar: css`
+    pointer-events: none;
+
+    margin: 8px;
+    border-radius: ${cssVar.borderRadiusSM};
+
+    opacity: 0;
+    background: transparent;
+
+    transition: opacity 150ms;
+
+    &::before {
+      content: '';
+      position: absolute;
+    }
+
+    &[data-scrolling] {
+      transition-duration: 0ms;
+    }
+
+    &[data-hovering],
+    &[data-scrolling] {
+      pointer-events: auto;
+      opacity: 1;
+    }
+
+    &[data-orientation='vertical'] {
+      width: 4px;
+
+      &::before {
+        inset-inline-start: 50%;
+        transform: translateX(-50%);
+        width: 20px;
+        height: 100%;
+      }
+    }
+
+    &[data-orientation='horizontal'] {
+      height: 4px;
+
+      &::before {
+        inset-block-end: -8px;
+        inset-inline: 0;
+        width: 100%;
+        height: 20px;
+      }
+    }
+  `,
+	thumb: css`
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background: ${cssVar.colorTextQuaternary};
+  `,
+	viewport: css`
+    position: relative;
+    height: 100%;
+    outline: none;
+
+    &:focus-visible {
+      outline: 2px solid ${cssVar.colorPrimary};
+      outline-offset: 2px;
+    }
+  `,
+	viewportFade: css`
+    --scroll-area-overflow-y-start: inherit;
+    --scroll-area-overflow-y-end: inherit;
+    --hubstr-scroll-area-fade-size: 40px;
+    --hubstr-scroll-area-fade-top: min(
+      var(--hubstr-scroll-area-fade-size),
+      var(--scroll-area-overflow-y-start, 0px)
+    );
+    --hubstr-scroll-area-fade-bottom: min(
+      var(--hubstr-scroll-area-fade-size),
+      var(--scroll-area-overflow-y-end, 0px)
+    );
+
+    /* Fade the CONTENT via mask, so it works on background images too. */
+    mask-image: linear-gradient(
+      to bottom,
+      transparent 0,
+      #000 var(--hubstr-scroll-area-fade-top),
+      #000 calc(100% - var(--hubstr-scroll-area-fade-bottom)),
+      transparent 100%
+    );
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+
+    /* Scroll-driven animation: use scroll position to drive the mask. */
+    @supports (animation-timeline: scroll()) {
+      /*
+       * Important: drive fade by *distance to edges* (first/last 40px),
+       * so reaching top/bottom doesn't cause a sudden snap.
+       */
+      @keyframes hubstr-scroll-area-fade-top-in {
+        from {
+          --hubstr-scroll-area-fade-top: 0;
+        }
+
+        to {
+          --hubstr-scroll-area-fade-top: var(--hubstr-scroll-area-fade-size);
+        }
+      }
+
+      @keyframes hubstr-scroll-area-fade-bottom-out {
+        from {
+          --hubstr-scroll-area-fade-bottom: var(--hubstr-scroll-area-fade-size);
+        }
+
+        to {
+          --hubstr-scroll-area-fade-bottom: 0;
+        }
+      }
+
+      animation-name: hubstr-scroll-area-fade-top-in, hubstr-scroll-area-fade-bottom-out;
+      animation-duration: 1ms, 1ms;
+      animation-timing-function: linear, linear;
+      animation-fill-mode: both, both;
+      animation-timeline: scroll(self y), scroll(self y);
+
+      animation-range:
+        0 var(--hubstr-scroll-area-fade-size),
+        calc(100% - var(--hubstr-scroll-area-fade-size)) 100%;
+    }
+  `,
+	viewportFadeHorizontal: css`
+    --scroll-area-overflow-x-start: inherit;
+    --scroll-area-overflow-x-end: inherit;
+    --hubstr-scroll-area-fade-size: 40px;
+    --hubstr-scroll-area-fade-left: min(
+      var(--hubstr-scroll-area-fade-size),
+      var(--scroll-area-overflow-x-start, 0px)
+    );
+    --hubstr-scroll-area-fade-right: min(
+      var(--hubstr-scroll-area-fade-size),
+      var(--scroll-area-overflow-x-end, 0px)
+    );
+
+    /* Fade the CONTENT via mask, so it works on background images too. */
+    mask-image: linear-gradient(
+      to right,
+      transparent 0,
+      #000 var(--hubstr-scroll-area-fade-left),
+      #000 calc(100% - var(--hubstr-scroll-area-fade-right)),
+      transparent 100%
+    );
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+
+    /* Scroll-driven animation: use scroll position to drive the mask. */
+    @supports (animation-timeline: scroll()) {
+      /*
+       * Important: drive fade by *distance to edges* (first/last 40px),
+       * so reaching start/end doesn't cause a sudden snap.
+       */
+      @keyframes hubstr-scroll-area-fade-left-in {
+        from {
+          --hubstr-scroll-area-fade-left: 0;
+        }
+
+        to {
+          --hubstr-scroll-area-fade-left: var(--hubstr-scroll-area-fade-size);
+        }
+      }
+
+      @keyframes hubstr-scroll-area-fade-right-out {
+        from {
+          --hubstr-scroll-area-fade-right: var(--hubstr-scroll-area-fade-size);
+        }
+
+        to {
+          --hubstr-scroll-area-fade-right: 0;
+        }
+      }
+
+      animation-name: hubstr-scroll-area-fade-left-in, hubstr-scroll-area-fade-right-out;
+      animation-duration: 1ms, 1ms;
+      animation-timing-function: linear, linear;
+      animation-fill-mode: both, both;
+      animation-timeline: scroll(self x), scroll(self x);
+
+      animation-range:
+        0 var(--hubstr-scroll-area-fade-size),
+        calc(100% - var(--hubstr-scroll-area-fade-size)) 100%;
+    }
+  `,
+	viewportFadeBoth: css`
+    --scroll-area-overflow-x-start: inherit;
+    --scroll-area-overflow-x-end: inherit;
+    --scroll-area-overflow-y-start: inherit;
+    --scroll-area-overflow-y-end: inherit;
+    --hubstr-scroll-area-fade-size: 40px;
+    --hubstr-scroll-area-fade-top: min(
+      var(--hubstr-scroll-area-fade-size),
+      var(--scroll-area-overflow-y-start, 0px)
+    );
+    --hubstr-scroll-area-fade-bottom: min(
+      var(--hubstr-scroll-area-fade-size),
+      var(--scroll-area-overflow-y-end, 0px)
+    );
+    --hubstr-scroll-area-fade-left: min(
+      var(--hubstr-scroll-area-fade-size),
+      var(--scroll-area-overflow-x-start, 0px)
+    );
+    --hubstr-scroll-area-fade-right: min(
+      var(--hubstr-scroll-area-fade-size),
+      var(--scroll-area-overflow-x-end, 0px)
+    );
+
+    mask-composite: intersect;
+
+    /*
+     * Combine vertical + horizontal fades by intersecting two gradient masks
+     * so the four corners stay transparent only when both axes overflow.
+     */
+    mask-image:
+      linear-gradient(
+        to bottom,
+        transparent 0,
+        #000 var(--hubstr-scroll-area-fade-top),
+        #000 calc(100% - var(--hubstr-scroll-area-fade-bottom)),
+        transparent 100%
+      ),
+      linear-gradient(
+        to right,
+        transparent 0,
+        #000 var(--hubstr-scroll-area-fade-left),
+        #000 calc(100% - var(--hubstr-scroll-area-fade-right)),
+        transparent 100%
+      );
+    mask-repeat: no-repeat, no-repeat;
+    mask-size:
+      100% 100%,
+      100% 100%;
+
+    @supports (animation-timeline: scroll()) {
+      @keyframes hubstr-scroll-area-fade-top-in-both {
+        from {
+          --hubstr-scroll-area-fade-top: 0;
+        }
+
+        to {
+          --hubstr-scroll-area-fade-top: var(--hubstr-scroll-area-fade-size);
+        }
+      }
+
+      @keyframes hubstr-scroll-area-fade-bottom-out-both {
+        from {
+          --hubstr-scroll-area-fade-bottom: var(--hubstr-scroll-area-fade-size);
+        }
+
+        to {
+          --hubstr-scroll-area-fade-bottom: 0;
+        }
+      }
+
+      @keyframes hubstr-scroll-area-fade-left-in-both {
+        from {
+          --hubstr-scroll-area-fade-left: 0;
+        }
+
+        to {
+          --hubstr-scroll-area-fade-left: var(--hubstr-scroll-area-fade-size);
+        }
+      }
+
+      @keyframes hubstr-scroll-area-fade-right-out-both {
+        from {
+          --hubstr-scroll-area-fade-right: var(--hubstr-scroll-area-fade-size);
+        }
+
+        to {
+          --hubstr-scroll-area-fade-right: 0;
+        }
+      }
+
+      animation-name:
+        hubstr-scroll-area-fade-top-in-both, hubstr-scroll-area-fade-bottom-out-both,
+        hubstr-scroll-area-fade-left-in-both, hubstr-scroll-area-fade-right-out-both;
+      animation-duration: 1ms, 1ms, 1ms, 1ms;
+      animation-timing-function: linear, linear, linear, linear;
+      animation-fill-mode: both, both, both, both;
+      animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);
+
+      animation-range:
+        0 var(--hubstr-scroll-area-fade-size),
+        calc(100% - var(--hubstr-scroll-area-fade-size)) 100%,
+        0 var(--hubstr-scroll-area-fade-size),
+        calc(100% - var(--hubstr-scroll-area-fade-size)) 100%;
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/ui/es/base-ui/ScrollArea/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    font-size: ${cssVar.fontSizeSM};\n    line-height: 1.375rem;\n    color: ${cssVar.colorText};\n  `,\n\n  corner: css`\n    background: ${cssVar.colorFillSecondary};\n  `,\n\n  root: css`\n    position: relative;\n    box-sizing: border-box;\n  `,\n\n  scrollbar: css`\n    pointer-events: none;\n\n    margin: 8px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    opacity: 0;\n    background: transparent;\n\n    transition: opacity 150ms;\n\n    &::before {\n      content: '';\n      position: absolute;\n    }\n\n    &[data-scrolling] {\n      transition-duration: 0ms;\n    }\n\n    &[data-hovering],\n    &[data-scrolling] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n\n    &[data-orientation='vertical'] {\n      width: 4px;\n\n      &::before {\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n        width: 20px;\n        height: 100%;\n      }\n    }\n\n    &[data-orientation='horizontal'] {\n      height: 4px;\n\n      &::before {\n        inset-block-end: -8px;\n        inset-inline: 0;\n        width: 100%;\n        height: 20px;\n      }\n    }\n  `,\n\n  thumb: css`\n    width: 100%;\n    height: 100%;\n    border-radius: inherit;\n    background: ${cssVar.colorTextQuaternary};\n  `,\n\n  viewport: css`\n    position: relative;\n    height: 100%;\n    outline: none;\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimary};\n      outline-offset: 2px;\n    }\n  `,\n\n  viewportFade: css`\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --hubstr-scroll-area-fade-size: 40px;\n    --hubstr-scroll-area-fade-top: min(\n      var(--hubstr-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --hubstr-scroll-area-fade-bottom: min(\n      var(--hubstr-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to bottom,\n      transparent 0,\n      #000 var(--hubstr-scroll-area-fade-top),\n      #000 calc(100% - var(--hubstr-scroll-area-fade-bottom)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching top/bottom doesn't cause a sudden snap.\n       */\n      @keyframes hubstr-scroll-area-fade-top-in {\n        from {\n          --hubstr-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --hubstr-scroll-area-fade-top: var(--hubstr-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes hubstr-scroll-area-fade-bottom-out {\n        from {\n          --hubstr-scroll-area-fade-bottom: var(--hubstr-scroll-area-fade-size);\n        }\n\n        to {\n          --hubstr-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      animation-name: hubstr-scroll-area-fade-top-in, hubstr-scroll-area-fade-bottom-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self y), scroll(self y);\n\n      animation-range:\n        0 var(--hubstr-scroll-area-fade-size),\n        calc(100% - var(--hubstr-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeHorizontal: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --hubstr-scroll-area-fade-size: 40px;\n    --hubstr-scroll-area-fade-left: min(\n      var(--hubstr-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --hubstr-scroll-area-fade-right: min(\n      var(--hubstr-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to right,\n      transparent 0,\n      #000 var(--hubstr-scroll-area-fade-left),\n      #000 calc(100% - var(--hubstr-scroll-area-fade-right)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching start/end doesn't cause a sudden snap.\n       */\n      @keyframes hubstr-scroll-area-fade-left-in {\n        from {\n          --hubstr-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --hubstr-scroll-area-fade-left: var(--hubstr-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes hubstr-scroll-area-fade-right-out {\n        from {\n          --hubstr-scroll-area-fade-right: var(--hubstr-scroll-area-fade-size);\n        }\n\n        to {\n          --hubstr-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name: hubstr-scroll-area-fade-left-in, hubstr-scroll-area-fade-right-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--hubstr-scroll-area-fade-size),\n        calc(100% - var(--hubstr-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeBoth: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --hubstr-scroll-area-fade-size: 40px;\n    --hubstr-scroll-area-fade-top: min(\n      var(--hubstr-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --hubstr-scroll-area-fade-bottom: min(\n      var(--hubstr-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n    --hubstr-scroll-area-fade-left: min(\n      var(--hubstr-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --hubstr-scroll-area-fade-right: min(\n      var(--hubstr-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    mask-composite: intersect;\n\n    /*\n     * Combine vertical + horizontal fades by intersecting two gradient masks\n     * so the four corners stay transparent only when both axes overflow.\n     */\n    mask-image:\n      linear-gradient(\n        to bottom,\n        transparent 0,\n        #000 var(--hubstr-scroll-area-fade-top),\n        #000 calc(100% - var(--hubstr-scroll-area-fade-bottom)),\n        transparent 100%\n      ),\n      linear-gradient(\n        to right,\n        transparent 0,\n        #000 var(--hubstr-scroll-area-fade-left),\n        #000 calc(100% - var(--hubstr-scroll-area-fade-right)),\n        transparent 100%\n      );\n    mask-repeat: no-repeat, no-repeat;\n    mask-size:\n      100% 100%,\n      100% 100%;\n\n    @supports (animation-timeline: scroll()) {\n      @keyframes hubstr-scroll-area-fade-top-in-both {\n        from {\n          --hubstr-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --hubstr-scroll-area-fade-top: var(--hubstr-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes hubstr-scroll-area-fade-bottom-out-both {\n        from {\n          --hubstr-scroll-area-fade-bottom: var(--hubstr-scroll-area-fade-size);\n        }\n\n        to {\n          --hubstr-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      @keyframes hubstr-scroll-area-fade-left-in-both {\n        from {\n          --hubstr-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --hubstr-scroll-area-fade-left: var(--hubstr-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes hubstr-scroll-area-fade-right-out-both {\n        from {\n          --hubstr-scroll-area-fade-right: var(--hubstr-scroll-area-fade-size);\n        }\n\n        to {\n          --hubstr-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name:\n        hubstr-scroll-area-fade-top-in-both, hubstr-scroll-area-fade-bottom-out-both,\n        hubstr-scroll-area-fade-left-in-both, hubstr-scroll-area-fade-right-out-both;\n      animation-duration: 1ms, 1ms, 1ms, 1ms;\n      animation-timing-function: linear, linear, linear, linear;\n      animation-fill-mode: both, both, both, both;\n      animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--hubstr-scroll-area-fade-size),\n        calc(100% - var(--hubstr-scroll-area-fade-size)) 100%,\n        0 var(--hubstr-scroll-area-fade-size),\n        calc(100% - var(--hubstr-scroll-area-fade-size)) 100%;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;;iBAKG,OAAO,WAAW;;aAEtB,OAAO,UAAU;;CAG5B,QAAQ,GAAG;kBACK,OAAO,mBAAmB;;CAG1C,MAAM,GAAG;;;;CAKT,WAAW,GAAG;;;;qBAIK,OAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CzC,OAAO,GAAG;;;;kBAIM,OAAO,oBAAoB;;CAG3C,UAAU,GAAG;;;;;;2BAMY,OAAO,aAAa;;;;CAK7C,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DjB,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8D3B,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGtB,EAAE"}

package/ui/es/base-ui/ScrollArea/type.d.mts

@@ -0,0 +1,34 @@
+import { ScrollAreaContentProps, ScrollAreaCornerProps, ScrollAreaFadeOrientation, ScrollAreaRootProps, ScrollAreaScrollbarProps, ScrollAreaThumbProps, ScrollAreaViewportProps } from "./atoms.mjs";
+import { ReactNode } from "react";
+
+//#region src/base-ui/ScrollArea/type.d.ts
+interface ScrollAreaProps extends Omit<ScrollAreaRootProps, 'children'> {
+  children?: ReactNode;
+  contentProps?: Omit<ScrollAreaContentProps, 'children'>;
+  corner?: boolean;
+  cornerProps?: ScrollAreaCornerProps;
+  /**
+   * Override Base UI's default `min-width: fit-content` on the content node by
+   * setting `min-width: 0`. Use this when an unbreakable wide child (e.g. a
+   * `<pre>` code block) would otherwise propagate its intrinsic width up the
+   * ancestor chain and stretch the scroll container past its parent.
+   *
+   * @default false
+   */
+  disableContentFit?: boolean;
+  scrollbarProps?: Omit<ScrollAreaScrollbarProps, 'children'>;
+  /**
+   * Enable gradient scroll fade on the viewport edges.
+   *
+   * Accepts a boolean (true ≡ vertical) or an explicit orientation:
+   * `'vertical' | 'horizontal' | 'both'`.
+   *
+   * @default false
+   */
+  scrollFade?: boolean | ScrollAreaFadeOrientation;
+  thumbProps?: ScrollAreaThumbProps;
+  viewportProps?: Omit<ScrollAreaViewportProps, 'children' | 'scrollFade'>;
+}
+//#endregion
+export { ScrollAreaProps };
+//# sourceMappingURL=type.d.mts.map

package/ui/es/base-ui/Select/Select.d.mts

@@ -0,0 +1,8 @@
+import { SelectProps } from "./type.mjs";
+import * as _$react from "react";
+
+//#region src/base-ui/Select/Select.d.ts
+declare const Select: _$react.NamedExoticComponent<SelectProps<any>>;
+//#endregion
+export { Select };
+//# sourceMappingURL=Select.d.mts.map

package/ui/es/base-ui/Select/Select.mjs

@@ -0,0 +1,190 @@
+"use client";
+import { styles } from "../DropdownMenu/sharedStyle.mjs";
+import { styles as styles$1, triggerVariants } from "./style.mjs";
+import { SelectPositioner } from "./atoms.mjs";
+import { isValueEmpty } from "./helpers.mjs";
+import { usePortalContainer, useSelectOpen, useSelectSearch, useSelectValue, useSelectVirtual } from "./hooks.mjs";
+import { EmptyContent, SelectListSection, SelectSearchInput, SelectTriggerSuffix, createTriggerValueRenderer, resolveIconNode, resolveSuffixIcon } from "./parts.mjs";
+import { renderOptions } from "./renderOptions.mjs";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx, useThemeMode } from "antd-style";
+import { Select } from "@base-ui/react/select";
+//#region src/base-ui/Select/Select.tsx
+const Select$1 = memo(({ allowClear, autoFocus, className, classNames, defaultOpen, defaultValue, disabled, id, labelRender, listHeight = 512, listItemHeight, loading, mode, name, onChange, onOpenChange, onSelect, open, optionRender, options, placeholder, popupClassName, popupMatchSelectWidth, prefix, readOnly, required, behaviorVariant = "default", selectedIndicatorVariant = "check", shadow, showSearch, size = "middle", style, suffixIcon, suffixIconProps, tokenSeparators, value, variant, virtual }) => {
+	const { isDarkMode } = useThemeMode();
+	const resolvedVariant = variant ?? (isDarkMode ? "filled" : "outlined");
+	const isMultiple = mode === "multiple" || mode === "tags";
+	const isItemAligned = behaviorVariant === "item-aligned";
+	const [extraOptions, setExtraOptions] = useState([]);
+	useEffect(() => {
+		if (mode !== "tags" && extraOptions.length > 0) setExtraOptions([]);
+	}, [mode, extraOptions.length]);
+	const { appendTagValues, getOption, handleValueChange, normalizedValue, normalizeValue, resolvedOptions, valueArray } = useSelectValue({
+		defaultValue,
+		extraOptions,
+		isMultiple,
+		onChange,
+		onSelect,
+		options,
+		setExtraOptions,
+		value
+	});
+	const { handleOpenChange, mergedOpen } = useSelectOpen({
+		defaultOpen,
+		onOpenChange,
+		open
+	});
+	const { filteredOptions, handleSearchChange, handleSearchKeyDown, searchValue, shouldShowSearch, stopSearchPropagation } = useSelectSearch({
+		appendTagValues,
+		handleOpenChange,
+		mergedOpen,
+		mode,
+		resolvedOptions,
+		showSearch,
+		tokenSeparators
+	});
+	const virtualState = useSelectVirtual({
+		filteredOptions,
+		listItemHeight,
+		size,
+		valueArray,
+		virtual
+	});
+	const portalContainer = usePortalContainer();
+	const renderValue = useMemo(() => createTriggerValueRenderer({
+		getOption,
+		isMultiple,
+		labelRender,
+		normalizeValue,
+		placeholder
+	}), [
+		getOption,
+		isMultiple,
+		labelRender,
+		normalizeValue,
+		placeholder
+	]);
+	const hasValue = isMultiple ? valueArray.length > 0 : !isValueEmpty(normalizedValue);
+	const showClear = Boolean(allowClear && hasValue && !disabled && !readOnly);
+	const handleClear = useCallback((event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		handleValueChange(isMultiple ? [] : null);
+	}, [handleValueChange, isMultiple]);
+	const prefixNode = useMemo(() => resolveIconNode(prefix), [prefix]);
+	const suffixIconNode = useMemo(() => resolveSuffixIcon(suffixIcon, suffixIconProps, loading), [
+		loading,
+		suffixIcon,
+		suffixIconProps
+	]);
+	const popupStyle = useMemo(() => {
+		const maxHeight = isItemAligned ? "80vh" : `${listHeight}px`;
+		const baseStyle = {
+			maxHeight,
+			maxWidth: "var(--available-width)",
+			minWidth: "var(--anchor-width)",
+			["--hubstr-select-popup-max-height"]: maxHeight
+		};
+		if (popupMatchSelectWidth === void 0 || popupMatchSelectWidth === true) return baseStyle;
+		if (typeof popupMatchSelectWidth === "number") return {
+			...baseStyle,
+			minWidth: popupMatchSelectWidth,
+			width: popupMatchSelectWidth
+		};
+		return {
+			...baseStyle,
+			minWidth: "max-content"
+		};
+	}, [
+		isItemAligned,
+		listHeight,
+		popupMatchSelectWidth
+	]);
+	const triggerClassName = cx(triggerVariants({
+		shadow,
+		size,
+		variant: resolvedVariant
+	}), className, classNames?.root, classNames?.trigger);
+	const isBoldIndicator = selectedIndicatorVariant === "bold";
+	const itemTextClassName = cx(optionRender ? styles.itemContent : styles.label, styles$1.itemText, classNames?.itemText);
+	const isEmpty = filteredOptions.length === 0;
+	const listContent = isEmpty ? /* @__PURE__ */ jsx(EmptyContent, { classNames }) : renderOptions({
+		classNames,
+		isBoldIndicator,
+		items: filteredOptions,
+		itemTextClassName,
+		listItemHeight,
+		optionRender,
+		renderVirtualItem: virtualState.renderVirtualItem,
+		virtual
+	});
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		disabled,
+		id,
+		modal: isItemAligned,
+		multiple: isMultiple,
+		name,
+		open: mergedOpen,
+		readOnly,
+		required,
+		value: normalizedValue,
+		onOpenChange: handleOpenChange,
+		onValueChange: handleValueChange,
+		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
+			autoFocus,
+			className: triggerClassName,
+			disabled,
+			style,
+			children: [
+				prefixNode !== null && prefixNode !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: cx(styles$1.prefix, classNames?.prefix),
+					children: prefixNode
+				}),
+				/* @__PURE__ */ jsx(Select.Value, {
+					className: cx(styles$1.value, classNames?.value),
+					children: renderValue
+				}),
+				/* @__PURE__ */ jsx(SelectTriggerSuffix, {
+					classNames,
+					showClear,
+					suffixIconNode,
+					onClear: handleClear
+				})
+			]
+		}), /* @__PURE__ */ jsx(Select.Portal, {
+			container: portalContainer,
+			children: /* @__PURE__ */ jsx(SelectPositioner, {
+				align: "start",
+				alignItemWithTrigger: isItemAligned,
+				className: styles$1.positioner,
+				side: "bottom",
+				sideOffset: 6,
+				children: /* @__PURE__ */ jsxs(Select.Popup, {
+					style: popupStyle,
+					className: cx(styles.popup, styles$1.popup, popupClassName, classNames?.popup, classNames?.dropdown),
+					children: [shouldShowSearch && /* @__PURE__ */ jsx(SelectSearchInput, {
+						classNames,
+						placeholder,
+						stopPropagation: stopSearchPropagation,
+						value: searchValue,
+						onChange: handleSearchChange,
+						onKeyDown: handleSearchKeyDown
+					}), /* @__PURE__ */ jsx(SelectListSection, {
+						classNames,
+						isEmpty,
+						listContent,
+						listItemHeight,
+						virtual,
+						virtualState
+					})]
+				})
+			})
+		})]
+	});
+});
+Select$1.displayName = "Select";
+//#endregion
+export { Select$1 as default };
+
+//# sourceMappingURL=Select.mjs.map

package/ui/es/base-ui/Select/Select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.mjs","names":["Select","menuStyles","styles","BaseSelect"],"sources":["../../../src/base-ui/Select/Select.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Select as BaseSelect } from '@base-ui/react/select';\r\nimport { cx, useThemeMode } from 'antd-style';\r\nimport { type MouseEvent } from 'react';\r\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\r\n\r\nimport { styles as menuStyles } from '../DropdownMenu/sharedStyle';\r\n\r\nimport { SelectPositioner } from './atoms';\r\nimport { isValueEmpty } from './helpers';\r\nimport {\r\n  usePortalContainer,\r\n  useSelectOpen,\r\n  useSelectSearch,\r\n  useSelectValue,\r\n  useSelectVirtual,\r\n} from './hooks';\r\nimport {\r\n  createTriggerValueRenderer,\r\n  EmptyContent,\r\n  resolveIconNode,\r\n  resolveSuffixIcon,\r\n  SelectListSection,\r\n  SelectSearchInput,\r\n  SelectTriggerSuffix,\r\n} from './parts';\r\nimport { renderOptions } from './renderOptions';\r\nimport { styles, triggerVariants } from './style';\r\nimport { type SelectOption, type SelectProps } from './type';\r\n\r\nconst Select = memo<SelectProps<any>>(\r\n  ({\r\n    allowClear,\r\n    autoFocus,\r\n    className,\r\n    classNames,\r\n    defaultOpen,\r\n    defaultValue,\r\n    disabled,\r\n    id,\r\n    labelRender,\r\n    listHeight = 512,\r\n    listItemHeight,\r\n    loading,\r\n    mode,\r\n    name,\r\n    onChange,\r\n    onOpenChange,\r\n    onSelect,\r\n    open,\r\n    optionRender,\r\n    options,\r\n    placeholder,\r\n    popupClassName,\r\n    popupMatchSelectWidth,\r\n    prefix,\r\n    readOnly,\r\n    required,\r\n    behaviorVariant = 'default',\r\n    selectedIndicatorVariant = 'check',\r\n    shadow,\r\n    showSearch,\r\n    size = 'middle',\r\n    style,\r\n    suffixIcon,\r\n    suffixIconProps,\r\n    tokenSeparators,\r\n    value,\r\n    variant,\r\n    virtual,\r\n  }) => {\r\n    const { isDarkMode } = useThemeMode();\r\n    const resolvedVariant = variant ?? (isDarkMode ? 'filled' : 'outlined');\r\n    const isMultiple = mode === 'multiple' || mode === 'tags';\r\n    const isItemAligned = behaviorVariant === 'item-aligned';\r\n\r\n    const [extraOptions, setExtraOptions] = useState<SelectOption<any>[]>([]);\r\n\r\n    useEffect(() => {\r\n      if (mode !== 'tags' && extraOptions.length > 0) {\r\n        setExtraOptions([]);\r\n      }\r\n    }, [mode, extraOptions.length]);\r\n\r\n    const {\r\n      appendTagValues,\r\n      getOption,\r\n      handleValueChange,\r\n      normalizedValue,\r\n      normalizeValue,\r\n      resolvedOptions,\r\n      valueArray,\r\n    } = useSelectValue({\r\n      defaultValue,\r\n      extraOptions,\r\n      isMultiple,\r\n      onChange,\r\n      onSelect,\r\n      options,\r\n      setExtraOptions,\r\n      value,\r\n    });\r\n\r\n    const { handleOpenChange, mergedOpen } = useSelectOpen({ defaultOpen, onOpenChange, open });\r\n\r\n    const {\r\n      filteredOptions,\r\n      handleSearchChange,\r\n      handleSearchKeyDown,\r\n      searchValue,\r\n      shouldShowSearch,\r\n      stopSearchPropagation,\r\n    } = useSelectSearch({\r\n      appendTagValues,\r\n      handleOpenChange,\r\n      mergedOpen,\r\n      mode,\r\n      resolvedOptions,\r\n      showSearch,\r\n      tokenSeparators,\r\n    });\r\n\r\n    const virtualState = useSelectVirtual({\r\n      filteredOptions,\r\n      listItemHeight,\r\n      size,\r\n      valueArray,\r\n      virtual,\r\n    });\r\n\r\n    const portalContainer = usePortalContainer();\r\n\r\n    const renderValue = useMemo(\r\n      () =>\r\n        createTriggerValueRenderer({\r\n          getOption,\r\n          isMultiple,\r\n          labelRender,\r\n          normalizeValue,\r\n          placeholder,\r\n        }),\r\n      [getOption, isMultiple, labelRender, normalizeValue, placeholder],\r\n    );\r\n\r\n    const hasValue = isMultiple ? valueArray.length > 0 : !isValueEmpty(normalizedValue);\r\n    const showClear = Boolean(allowClear && hasValue && !disabled && !readOnly);\r\n\r\n    const handleClear = useCallback(\r\n      (event: MouseEvent) => {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        handleValueChange(isMultiple ? [] : null);\r\n      },\r\n      [handleValueChange, isMultiple],\r\n    );\r\n\r\n    const prefixNode = useMemo(() => resolveIconNode(prefix), [prefix]);\r\n    const suffixIconNode = useMemo(\r\n      () => resolveSuffixIcon(suffixIcon, suffixIconProps, loading),\r\n      [loading, suffixIcon, suffixIconProps],\r\n    );\r\n\r\n    const popupStyle = useMemo(() => {\r\n      const maxHeight = isItemAligned ? '80vh' : `${listHeight}px`;\r\n      const baseStyle: React.CSSProperties = {\r\n        maxHeight,\r\n        maxWidth: 'var(--available-width)',\r\n        minWidth: 'var(--anchor-width)',\r\n        ['--hubstr-select-popup-max-height' as any]: maxHeight,\r\n      };\r\n\r\n      if (popupMatchSelectWidth === undefined || popupMatchSelectWidth === true) {\r\n        return baseStyle;\r\n      }\r\n      if (typeof popupMatchSelectWidth === 'number') {\r\n        return {\r\n          ...baseStyle,\r\n          minWidth: popupMatchSelectWidth,\r\n          width: popupMatchSelectWidth,\r\n        };\r\n      }\r\n      return { ...baseStyle, minWidth: 'max-content' };\r\n    }, [isItemAligned, listHeight, popupMatchSelectWidth]);\r\n\r\n    const triggerClassName = cx(\r\n      triggerVariants({ shadow, size, variant: resolvedVariant }),\r\n      className,\r\n      classNames?.root,\r\n      classNames?.trigger,\r\n    );\r\n\r\n    const isBoldIndicator = selectedIndicatorVariant === 'bold';\r\n    const itemTextClassName = cx(\r\n      optionRender ? menuStyles.itemContent : menuStyles.label,\r\n      styles.itemText,\r\n      classNames?.itemText,\r\n    );\r\n\r\n    const isEmpty = filteredOptions.length === 0;\r\n    const listContent = isEmpty ? (\r\n      <EmptyContent classNames={classNames} />\r\n    ) : (\r\n      renderOptions({\r\n        classNames,\r\n        isBoldIndicator,\r\n        items: filteredOptions,\r\n        itemTextClassName,\r\n        listItemHeight,\r\n        optionRender,\r\n        renderVirtualItem: virtualState.renderVirtualItem,\r\n        virtual,\r\n      })\r\n    );\r\n\r\n    return (\r\n      <BaseSelect.Root\r\n        disabled={disabled}\r\n        id={id}\r\n        modal={isItemAligned}\r\n        multiple={isMultiple}\r\n        name={name}\r\n        open={mergedOpen}\r\n        readOnly={readOnly}\r\n        required={required}\r\n        value={normalizedValue}\r\n        onOpenChange={handleOpenChange}\r\n        onValueChange={handleValueChange}\r\n      >\r\n        <BaseSelect.Trigger\r\n          autoFocus={autoFocus}\r\n          className={triggerClassName}\r\n          disabled={disabled}\r\n          style={style}\r\n        >\r\n          {prefixNode !== null && prefixNode !== undefined && (\r\n            <span className={cx(styles.prefix, classNames?.prefix)}>{prefixNode}</span>\r\n          )}\r\n          <BaseSelect.Value className={cx(styles.value, classNames?.value)}>\r\n            {renderValue}\r\n          </BaseSelect.Value>\r\n          <SelectTriggerSuffix\r\n            classNames={classNames}\r\n            showClear={showClear}\r\n            suffixIconNode={suffixIconNode}\r\n            onClear={handleClear}\r\n          />\r\n        </BaseSelect.Trigger>\r\n\r\n        <BaseSelect.Portal container={portalContainer}>\r\n          <SelectPositioner\r\n            align=\"start\"\r\n            alignItemWithTrigger={isItemAligned}\r\n            className={styles.positioner}\r\n            side=\"bottom\"\r\n            sideOffset={6}\r\n          >\r\n            <BaseSelect.Popup\r\n              style={popupStyle}\r\n              className={cx(\r\n                menuStyles.popup,\r\n                styles.popup,\r\n                popupClassName,\r\n                classNames?.popup,\r\n                classNames?.dropdown,\r\n              )}\r\n            >\r\n              {shouldShowSearch && (\r\n                <SelectSearchInput\r\n                  classNames={classNames}\r\n                  placeholder={placeholder}\r\n                  stopPropagation={stopSearchPropagation}\r\n                  value={searchValue}\r\n                  onChange={handleSearchChange}\r\n                  onKeyDown={handleSearchKeyDown}\r\n                />\r\n              )}\r\n              <SelectListSection\r\n                classNames={classNames}\r\n                isEmpty={isEmpty}\r\n                listContent={listContent}\r\n                listItemHeight={listItemHeight}\r\n                virtual={virtual}\r\n                virtualState={virtualState}\r\n              />\r\n            </BaseSelect.Popup>\r\n          </SelectPositioner>\r\n        </BaseSelect.Portal>\r\n      </BaseSelect.Root>\r\n    );\r\n  },\r\n);\r\n\r\nSelect.displayName = 'Select';\r\n\r\nexport default Select;\r\n"],"mappings":"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"}