moduix 0.11.0 → 0.11.1

package/dist/components/Select/Select.css

@@ -0,0 +1,357 @@
+@layer ui.components {
+  .fT9mmG_field {
+    gap: var(--select-field-gap, .375rem);
+    flex-direction: column;
+    display: inline-flex;
+  }
+
+  .fT9mmG_label {
+    font-size: var(--select-label-font-size, var(--text-sm));
+    line-height: var(--select-label-line-height, var(--line-height-text-sm));
+    font-weight: var(--select-label-font-weight, var(--weight-medium));
+    color: var(--select-color, var(--color-foreground));
+    cursor: default;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .fT9mmG_trigger {
+    box-sizing: border-box;
+    width: var(--select-width, 14rem);
+    min-height: var(--select-control-height, var(--size-lg));
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--select-trigger-gap, .75rem);
+    padding: 0 var(--select-trigger-padding-x, .875rem);
+    border: var(--select-border-width, var(--border-width-sm)) solid
+      var(--select-border-color, var(--color-border));
+    border-radius: var(--select-radius, var(--radius-md));
+    background-color: var(--select-bg, var(--color-background));
+    color: var(--select-color, var(--color-foreground));
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+    user-select: none;
+    transition: background-color var(--transition-default),
+      border-color var(--transition-default),
+      color var(--transition-default),
+      outline-color var(--transition-default);
+    outline: 0;
+    margin: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--select-bg-hover, var(--color-accent));
+      }
+    }
+
+    &[data-popup-open] {
+      background-color: var(--select-bg-active, var(--color-muted));
+    }
+
+    &:focus-visible {
+      border-color: var(--select-focus-ring-color, var(--color-ring));
+      outline: var(--select-focus-ring-width, var(--select-border-width, var(--border-width-sm)))
+        solid var(--select-focus-ring-color, var(--color-ring));
+      outline-offset: var(--select-focus-ring-offset, -1px);
+    }
+
+    &[data-disabled], &[disabled] {
+      pointer-events: none;
+      opacity: var(--select-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .fT9mmG_value {
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+
+    &[data-placeholder] {
+      color: var(--select-placeholder-color, var(--color-muted-foreground));
+    }
+  }
+
+  .fT9mmG_icon {
+    width: var(--select-icon-size, .875rem);
+    height: var(--select-icon-size, .875rem);
+    color: var(--select-icon-color, var(--color-muted-foreground));
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    margin-left: auto;
+    display: inline-flex;
+  }
+
+  .fT9mmG_iconSvg {
+    width: var(--select-icon-svg-size, 1rem);
+    height: var(--select-icon-svg-size, 1rem);
+  }
+
+  .fT9mmG_backdrop {
+    z-index: var(--z-backdrop);
+    background-color: var(--select-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
+    min-height: 100dvh;
+    backdrop-filter: var(--backdrop-filter, blur(var(--select-backdrop-blur, 4px)));
+    transition: opacity var(--select-backdrop-transition, var(--transition-default)),
+      backdrop-filter var(--select-backdrop-transition, var(--transition-default));
+    position: fixed;
+    inset: 0;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      backdrop-filter: none;
+    }
+  }
+
+  .fT9mmG_positioner {
+    z-index: var(--z-popup);
+    outline: 0;
+  }
+
+  .fT9mmG_popup {
+    box-sizing: border-box;
+    width: var(--anchor-width);
+    min-width: min(var(--anchor-width), var(--available-width));
+    max-width: var(--available-width);
+    max-height: min(var(--select-popup-max-height, 24rem), var(--available-height));
+    border-radius: var(--select-radius, var(--radius-md));
+    background-color: var(--select-popup-bg, var(--color-popover));
+    color: var(--select-color, var(--color-popover-foreground));
+    outline: var(--select-popup-border-width, var(--border-width-sm)) solid
+      var(--select-popup-border-color, var(--color-border));
+    box-shadow: var(--select-shadow, var(--shadow-lg));
+    transform-origin: var(--transform-origin);
+    transition: opacity var(--transition-default),
+      transform var(--transition-default);
+    border: 0;
+    position: relative;
+    overflow: visible;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      transform: scale(var(--scale-popup));
+    }
+
+    &[data-side="none"] {
+      min-width: calc(var(--anchor-width) + var(--select-overlap-offset, 1rem));
+      opacity: 1;
+      transition: none;
+      transform: none;
+    }
+  }
+
+  .fT9mmG_arrow {
+    color: var(--select-popup-bg, var(--color-popover));
+    display: flex;
+
+    &[data-side="top"] {
+      bottom: calc(var(--select-arrow-size, .5rem) * -1);
+      rotate: 180deg;
+    }
+
+    &[data-side="bottom"] {
+      top: calc(var(--select-arrow-size, .5rem) * -1);
+      rotate: 0deg;
+    }
+
+    &[data-side="left"] {
+      right: calc(var(--select-arrow-inline-offset, .8125rem) * -1);
+      rotate: 90deg;
+    }
+
+    &[data-side="right"] {
+      left: calc(var(--select-arrow-inline-offset, .8125rem) * -1);
+      rotate: -90deg;
+    }
+  }
+
+  .fT9mmG_arrowSvg {
+    width: var(--select-arrow-width, 1.25rem);
+    height: var(--select-arrow-height, .625rem);
+    display: block;
+    overflow: visible;
+  }
+
+  .fT9mmG_arrowFill {
+    fill: currentColor;
+  }
+
+  .fT9mmG_arrowOuterStroke {
+    fill: var(--select-arrow-stroke-color, var(--select-popup-border-color, var(--color-border)));
+  }
+
+  .fT9mmG_arrowInnerStroke {
+    fill: var(--select-popup-bg, var(--color-popover));
+  }
+
+  .fT9mmG_scrollArrow {
+    width: auto;
+    height: var(--select-scroll-arrow-height, 1rem);
+    background-color: var(--select-popup-bg, var(--color-popover));
+    color: var(--select-scroll-arrow-color, var(--select-color, var(--color-foreground)));
+    cursor: default;
+    z-index: var(--select-scroll-arrow-z-index, 1);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    inset-inline: 0;
+
+    &[data-direction="up"] {
+      top: 0;
+    }
+
+    &[data-direction="down"] {
+      bottom: 0;
+    }
+  }
+
+  .fT9mmG_scrollArrowIcon {
+    width: var(--select-scroll-arrow-icon-size, .875rem);
+    height: var(--select-scroll-arrow-icon-size, .875rem);
+  }
+
+  .fT9mmG_list {
+    box-sizing: border-box;
+    max-height: min(var(--select-list-max-height, var(--select-popup-max-height, 24rem)),
+      var(--available-height));
+    overscroll-behavior: contain;
+    padding-block: var(--select-list-padding-y, var(--popup-list-padding-y, .25rem));
+    scroll-padding-block: var(--select-list-scroll-padding-y, var(--popup-list-padding-y, .25rem));
+    outline: 0;
+    overflow-y: auto;
+  }
+
+  .fT9mmG_item {
+    box-sizing: border-box;
+    grid-template-columns: var(--select-item-indicator-size, var(--popup-check-indicator-size, .75rem))
+      1fr;
+    align-items: center;
+    gap: var(--select-item-gap, var(--popup-check-gap, .5rem));
+    width: 100%;
+    min-height: var(--select-item-min-height, var(--popup-item-min-height, 2rem));
+    padding-block: var(--select-item-padding-y, var(--popup-item-padding-y, .5rem));
+    padding-inline: var(--select-item-padding-x-start, var(--popup-check-padding-x-start, .625rem))
+      var(--select-item-padding-x-end, var(--popup-item-padding-x-end, 1rem));
+    border-radius: var(--select-item-radius, 0);
+    cursor: default;
+    user-select: none;
+    font: inherit;
+    font-size: var(--select-item-font-size, var(--popup-item-font-size, var(--text-sm)));
+    line-height: var(--select-item-line-height, var(--popup-item-line-height, var(--line-height-text-sm)));
+    color: var(--select-item-color, var(--select-color, var(--color-foreground)));
+    outline: 0;
+    display: grid;
+    position: relative;
+
+    &[data-highlighted] {
+      z-index: 0;
+      color: var(--select-highlight-color, var(--color-background));
+
+      &:before {
+        content: "";
+        z-index: -1;
+        inset-block: 0;
+        inset-inline: var(--select-highlight-inset-x, var(--popup-highlight-inset-x, var(--spacing-1)));
+        border-radius: var(--select-highlight-radius, var(--popup-highlight-radius, var(--radius-sm)));
+        background-color: var(--select-highlight-bg, var(--color-foreground));
+        position: absolute;
+      }
+    }
+
+    &[data-disabled] {
+      opacity: var(--select-disabled-opacity, var(--opacity-disabled));
+      pointer-events: none;
+    }
+
+    &[data-indicator-position="end"] {
+      grid-template-columns: minmax(0, 1fr)
+        var(--select-item-indicator-size, var(--popup-check-indicator-size, .75rem));
+
+      & > .fT9mmG_itemIndicator {
+        grid-column-start: 2;
+        justify-self: end;
+      }
+
+      & > .fT9mmG_itemText {
+        grid-column-start: 1;
+      }
+    }
+  }
+
+  .fT9mmG_itemIndicator {
+    width: var(--select-item-indicator-size, var(--popup-check-indicator-size, .75rem));
+    height: var(--select-item-indicator-size, var(--popup-check-indicator-size, .75rem));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .fT9mmG_itemIndicatorIcon {
+    width: var(--select-item-indicator-icon-size, .75rem);
+    height: var(--select-item-indicator-icon-size, .75rem);
+  }
+
+  .fT9mmG_itemText {
+    grid-column-start: 2;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .fT9mmG_itemTextContent {
+    align-items: center;
+    gap: var(--select-item-text-content-gap, var(--spacing-2));
+    vertical-align: top;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-flex;
+  }
+
+  .fT9mmG_itemTextIcon {
+    width: var(--select-item-text-icon-size, 1rem);
+    height: var(--select-item-text-icon-size, 1rem);
+    color: var(--select-item-text-icon-color, currentColor);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .fT9mmG_itemTextLabel {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .fT9mmG_separator {
+    height: var(--select-separator-thickness, var(--border-width-sm));
+    margin: var(--select-separator-margin-y, var(--popup-separator-margin-y, .375rem))
+      var(--select-separator-margin-x, var(--popup-separator-margin-x-start, 1rem));
+    background-color: var(--select-separator-color, var(--select-border-color, var(--color-border)));
+  }
+
+  .fT9mmG_group {
+    padding-bottom: var(--select-group-padding-bottom, var(--spacing-1));
+  }
+
+  .fT9mmG_groupLabel {
+    z-index: 1;
+    padding: var(--select-group-label-padding-top, var(--popup-group-label-padding-y, .35rem))
+      var(--select-group-label-padding-x, var(--popup-group-label-padding-x-start, .625rem))
+      var(--select-group-label-padding-bottom, var(--popup-group-label-padding-y, .35rem));
+    background-color: var(--select-group-label-bg, var(--select-popup-bg, var(--color-popover)));
+    color: var(--select-group-label-color, var(--color-muted-foreground));
+    font-size: var(--select-group-label-font-size, var(--popup-group-label-font-size, var(--text-xs)));
+    font-weight: var(--select-group-label-font-weight, var(--weight-semibold));
+    line-height: var(--select-group-label-line-height, var(--popup-group-label-line-height, var(--line-height-text-xs)));
+    margin: 0;
+    display: block;
+    position: sticky;
+    top: 0;
+  }
+}

package/dist/components/Select/Select.d.ts

@@ -1,33 +1,119 @@
-import { ComponentProps } from 'react';
-import { Select as SelectPrimitive } from '@base-ui/react/select';
+import { ComponentProps } from "react";
+import { Select } from "@base-ui/react/select";
+
+//#region src/components/Select/Select.d.ts
 type IndicatorPosition = 'start' | 'end';
-type SelectContentProps = SelectPrimitive.Popup.Props & Pick<SelectPrimitive.Positioner.Props, 'align' | 'alignItemWithTrigger' | 'alignOffset' | 'arrowPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'collisionPadding' | 'side' | 'sideOffset'> & {
-    showArrow?: boolean;
+type SelectContentProps = Select.Popup.Props & Pick<Select.Positioner.Props, 'align' | 'alignItemWithTrigger' | 'alignOffset' | 'arrowPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'collisionPadding' | 'side' | 'sideOffset'> & {
+  showArrow?: boolean;
 };
-declare const Select: typeof SelectPrimitive.Root;
-declare function SelectField({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function SelectLabel({ className, ...props }: SelectPrimitive.Label.Props): import("react").JSX.Element;
-declare function SelectTrigger({ className, ...props }: SelectPrimitive.Trigger.Props): import("react").JSX.Element;
-declare function SelectValue({ className, ...props }: SelectPrimitive.Value.Props): import("react").JSX.Element;
-declare function SelectIcon({ className, children, ...props }: SelectPrimitive.Icon.Props): import("react").JSX.Element;
-declare function SelectPortal(props: SelectPrimitive.Portal.Props): import("react").JSX.Element;
-declare function SelectBackdrop({ className, ...props }: SelectPrimitive.Backdrop.Props): import("react").JSX.Element;
-declare function SelectPositioner({ className, ...props }: SelectPrimitive.Positioner.Props): import("react").JSX.Element;
-declare function SelectPopup({ className, ...props }: SelectPrimitive.Popup.Props): import("react").JSX.Element;
-declare function SelectArrow({ className, children, ...props }: SelectPrimitive.Arrow.Props): import("react").JSX.Element;
-declare function SelectContent({ className, children, showArrow, alignItemWithTrigger, side, sideOffset, align, alignOffset, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, ...popupProps }: SelectContentProps): import("react").JSX.Element;
-declare function SelectScrollUpArrow({ className, children, ...props }: SelectPrimitive.ScrollUpArrow.Props): import("react").JSX.Element;
-declare function SelectScrollDownArrow({ className, children, ...props }: SelectPrimitive.ScrollDownArrow.Props): import("react").JSX.Element;
-declare function SelectList({ className, ...props }: SelectPrimitive.List.Props): import("react").JSX.Element;
-declare function SelectItem({ className, indicator, ...props }: SelectPrimitive.Item.Props & {
-    indicator?: IndicatorPosition;
+declare const Select$1: typeof Select.Root;
+declare function SelectField({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function SelectLabel({
+  className,
+  ...props
+}: Select.Label.Props): import("react").JSX.Element;
+declare function SelectTrigger({
+  className,
+  ...props
+}: Select.Trigger.Props): import("react").JSX.Element;
+declare function SelectValue({
+  className,
+  ...props
+}: Select.Value.Props): import("react").JSX.Element;
+declare function SelectIcon({
+  className,
+  children,
+  ...props
+}: Select.Icon.Props): import("react").JSX.Element;
+declare function SelectPortal(props: Select.Portal.Props): import("react").JSX.Element;
+declare function SelectBackdrop({
+  className,
+  ...props
+}: Select.Backdrop.Props): import("react").JSX.Element;
+declare function SelectPositioner({
+  className,
+  ...props
+}: Select.Positioner.Props): import("react").JSX.Element;
+declare function SelectPopup({
+  className,
+  ...props
+}: Select.Popup.Props): import("react").JSX.Element;
+declare function SelectArrow({
+  className,
+  children,
+  ...props
+}: Select.Arrow.Props): import("react").JSX.Element;
+declare function SelectContent({
+  className,
+  children,
+  showArrow,
+  alignItemWithTrigger,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  arrowPadding,
+  collisionAvoidance,
+  collisionBoundary,
+  collisionPadding,
+  ...popupProps
+}: SelectContentProps): import("react").JSX.Element;
+declare function SelectScrollUpArrow({
+  className,
+  children,
+  ...props
+}: Select.ScrollUpArrow.Props): import("react").JSX.Element;
+declare function SelectScrollDownArrow({
+  className,
+  children,
+  ...props
+}: Select.ScrollDownArrow.Props): import("react").JSX.Element;
+declare function SelectList({
+  className,
+  ...props
+}: Select.List.Props): import("react").JSX.Element;
+declare function SelectItem({
+  className,
+  indicator,
+  ...props
+}: Select.Item.Props & {
+  indicator?: IndicatorPosition;
 }): import("react").JSX.Element;
-declare function SelectItemIndicator({ className, children, ...props }: SelectPrimitive.ItemIndicator.Props): import("react").JSX.Element;
-declare function SelectItemText({ className, ...props }: SelectPrimitive.ItemText.Props): import("react").JSX.Element;
-declare function SelectItemTextContent({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function SelectItemTextIcon({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function SelectItemTextLabel({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props): import("react").JSX.Element;
-declare function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props): import("react").JSX.Element;
-declare function SelectGroupLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props): import("react").JSX.Element;
-export { Select, SelectField, SelectLabel, SelectTrigger, SelectValue, SelectIcon, SelectPortal, SelectBackdrop, SelectPositioner, SelectPopup, SelectArrow, SelectContent, SelectScrollUpArrow, SelectScrollDownArrow, SelectList, SelectItem, SelectItemIndicator, SelectItemText, SelectItemTextContent, SelectItemTextIcon, SelectItemTextLabel, SelectSeparator, SelectGroup, SelectGroupLabel, };
+declare function SelectItemIndicator({
+  className,
+  children,
+  ...props
+}: Select.ItemIndicator.Props): import("react").JSX.Element;
+declare function SelectItemText({
+  className,
+  ...props
+}: Select.ItemText.Props): import("react").JSX.Element;
+declare function SelectItemTextContent({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function SelectItemTextIcon({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function SelectItemTextLabel({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function SelectSeparator({
+  className,
+  ...props
+}: Select.Separator.Props): import("react").JSX.Element;
+declare function SelectGroup({
+  className,
+  ...props
+}: Select.Group.Props): import("react").JSX.Element;
+declare function SelectGroupLabel({
+  className,
+  ...props
+}: Select.GroupLabel.Props): import("react").JSX.Element;
+//#endregion
+export { Select$1 as Select, SelectArrow, SelectBackdrop, SelectContent, SelectField, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectItemTextContent, SelectItemTextIcon, SelectItemTextLabel, SelectLabel, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue };