aplance-ui 1.0.1

package/registry/components/ui/input-fields/custom-select/custom-select.tsx

@@ -0,0 +1,403 @@
+import type { Align, Position } from "../../../primitives/popover/popover";
+import {
+  type CSSProperties,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+} from "react";
+import clsx from "clsx";
+import { Input } from "../input/input";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverMenu,
+} from "../../../primitives/popover/popover";
+import type { ComponentProps } from "react";
+import sCommon from "../common/input-field-common.module.css";
+import sPickerCommon from "../common/picker-popover-common.module.css";
+import { Button, type ButtonVariant } from "../../button/button";
+import s from "./custom-select.module.css";
+import { FieldMessage } from "../common/field-message/field-message";
+import { SelectButton, type SelectButtonProps } from "../common/select-button/select-button";
+import { Icon } from "../../../primitives/icon/icon";
+import type { BaseInputFieldProps } from "../common/types";
+
+export type CustomSelectOption = {
+  value: string;
+  label: string;
+  icon?: ReactNode;
+  optionStyle?: CSSProperties;
+  optionClassName?: string;
+  optionButtonVariant?: ButtonVariant;
+  applyToSelector?: boolean;
+  disabled?: boolean;
+};
+
+export type CustomSelectProps = Omit<
+  BaseInputFieldProps,
+  // its used in selectButton so no need it here
+  "buttonStyle"
+> & {
+  // Select specific props
+  placeholder?: string;
+  searchPlaceholder?: string;
+  options: CustomSelectOption[];
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onChange?: (value: string | string[]) => void;
+  multiple?: boolean;
+  searchable?: boolean;
+  showDisplayText?: boolean;
+  showDisplayIcon?: boolean;
+  onClear?: () => void;
+
+  // Popover behavior defaults
+  closeOnPathChange?: boolean;
+  closeOnClickOutside?: boolean;
+  animationDuration?: number;
+  position?: Position;
+  align?: Align;
+
+  // Nested popover props
+  popover?: Omit<ComponentProps<typeof Popover>, "children">;
+  popoverTrigger?: ComponentProps<typeof PopoverTrigger>;
+  popoverMenu?: ComponentProps<typeof PopoverMenu>;
+
+  // Options inside menu
+  optionsContainerClassName?: string;
+  optionsContainerStyle?: CSSProperties;
+
+  // Select button props
+  selectButton?: SelectButtonProps;
+};
+
+export const CustomSelect = ({
+  // Base props
+  label,
+  className,
+  style,
+  id,
+  info,
+  errors,
+  layout = "default",
+
+  // Select options and behavior
+  options,
+  value,
+  defaultValue,
+  onChange,
+  multiple = false,
+  searchable = false,
+  showDisplayIcon = true,
+  showDisplayText = true,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  onClear,
+  placeholder = "Select...",
+  searchPlaceholder = "Search options...",
+
+  // Popover behavior
+  closeOnPathChange = true,
+  closeOnClickOutside = true,
+  animationDuration = 200,
+  position = "bottom",
+  align = "start",
+
+  // Menu options props
+  optionsContainerClassName,
+  optionsContainerStyle,
+
+  // Nested popover props
+  popover,
+  popoverTrigger,
+  popoverMenu,
+  selectButton,
+}: CustomSelectProps) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Internal state for uncontrolled mode
+  const [internalValue, setInternalValue] = useState<string | string[]>(() => {
+    if (defaultValue !== undefined) {
+      return Array.isArray(defaultValue)
+        ? defaultValue
+        : defaultValue
+          ? [defaultValue]
+          : [];
+    }
+    return multiple ? [] : "";
+  });
+
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const isControlled = value !== undefined;
+  const actualValue = isControlled ? value : internalValue;
+  const interactive = !disabled && !readOnly;
+
+  // Normalize to array for consistent handling
+  const selectedValues = useMemo(
+    () =>
+      Array.isArray(actualValue)
+        ? actualValue
+        : actualValue
+          ? [actualValue]
+          : [],
+    [actualValue],
+  );
+
+  // Filter options based on search
+  const filteredOptions = useMemo(
+    () =>
+      searchable && searchTerm
+        ? options.filter((option) =>
+            option.label.toLowerCase().includes(searchTerm.toLowerCase()),
+          )
+        : options,
+    [options, searchable, searchTerm],
+  );
+
+  // Get all selected option data in one place
+  const selectedOptionData = useMemo(() => {
+    const hasValue = selectedValues.length > 0;
+    const selectedOption = options.find(
+      (opt) => opt.value === selectedValues[0],
+    );
+    const isMultipleSelection = multiple && selectedValues.length > 1;
+
+    return {
+      hasValue,
+      option: selectedOption,
+      label: selectedOption?.label,
+      icon: selectedOption?.icon,
+      displayText: !hasValue
+        ? placeholder
+        : isMultipleSelection
+          ? `${selectedValues.length} selected`
+          : selectedOption?.label,
+      shouldShowIcon:
+        showDisplayIcon && selectedOption?.icon && selectedValues.length === 1,
+      appliedClassName: selectedOption?.applyToSelector
+        ? selectedOption.optionClassName
+        : undefined,
+      appliedStyle: selectedOption?.applyToSelector
+        ? selectedOption.optionStyle
+        : undefined,
+    };
+  }, [multiple, options, placeholder, selectedValues, showDisplayIcon]);
+
+  const popoverOnClose = popover?.onClose;
+  const handlePopoverClose = useCallback(() => {
+    setSearchTerm("");
+    popoverOnClose?.();
+  }, [popoverOnClose]);
+
+  const {
+    className: popoverClassName,
+    offset: popoverOffset = 4,
+    ...popoverRest
+  } = popover ?? {};
+
+  const {
+    className: popoverTriggerClassName,
+    style: popoverTriggerStyle,
+    ...popoverTriggerRest
+  } = popoverTrigger ?? {};
+
+  const {
+    className: popoverMenuClassName,
+    style: popoverMenuStyle,
+    ...popoverMenuRest
+  } = popoverMenu ?? {};
+
+  // Handle external value changes for controlled mode
+  useEffect(() => {
+    if (isControlled) {
+      const normalized = Array.isArray(value) ? value : value ? [value] : [];
+      const isDifferent =
+        normalized.length !== selectedValues.length ||
+        normalized.some((val, i) => val !== selectedValues[i]);
+
+      if (isDifferent && !normalized.length) {
+        onClear?.();
+      }
+    }
+  }, [value, onClear, selectedValues, isControlled]);
+
+  const handleSelect = (option: CustomSelectOption) => {
+    if (!interactive || option.disabled) return;
+
+    const optionValue = option.value;
+
+    let newValues: string | string[];
+
+    if (multiple) {
+      newValues = selectedValues.includes(optionValue)
+        ? selectedValues.filter((val) => val !== optionValue)
+        : [...selectedValues, optionValue];
+    } else {
+      newValues = optionValue;
+      setIsOpen(false);
+    }
+
+    if (!isControlled) {
+      setInternalValue(newValues);
+    }
+
+    onChange?.(newValues);
+  };
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!interactive) return;
+
+    const newValue = multiple ? [] : "";
+
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+
+    onChange?.(newValue);
+    onClear?.();
+  };
+
+  return (
+    <div className={clsx(sCommon.container, className)} style={style}>
+      {label && (
+        <div
+          className={clsx(
+            sCommon.field_container,
+            layout !== "default" && sCommon[layout],
+          )}
+        >
+          <label className={sCommon.label} htmlFor={inputId}>
+            {label}
+          </label>
+        </div>
+      )}
+
+      <Popover
+        closeOnPathChange={closeOnPathChange}
+        closeOnClickOutside={closeOnClickOutside}
+        animationDuration={animationDuration}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        position={position}
+        align={align}
+        className={clsx(sPickerCommon.picker_popover, popoverClassName)}
+        offset={popoverOffset}
+        {...popoverRest}
+        onClose={handlePopoverClose}
+      >
+        <PopoverTrigger
+          asChild
+          className={clsx(
+            sPickerCommon.picker_popover_trigger,
+            popoverTriggerClassName,
+          )}
+          style={popoverTriggerStyle}
+          disabled={disabled || readOnly}
+          {...popoverTriggerRest}
+        >
+          <SelectButton
+            disabled={disabled || readOnly}
+            required={required}
+            showClear={selectedOptionData.hasValue && interactive}
+            onClear={handleClear}
+            id={inputId}
+            className={clsx(
+              !selectedOptionData.hasValue &&
+                sPickerCommon.picker_value_placeholder,
+              selectButton?.className,
+              selectedOptionData.appliedClassName,
+            )}
+            style={{
+              ...selectButton?.style,
+              ...selectedOptionData.appliedStyle,
+            }}
+            iconStart={
+              selectedOptionData.shouldShowIcon ? (
+                <Icon>{selectedOptionData.icon}</Icon>
+              ) : undefined
+            }
+            {...selectButton}
+          >
+            {showDisplayText && (
+              <span className={clsx(s.option_label, sCommon.truncate_text)}>
+                {selectedOptionData.displayText}
+              </span>
+            )}
+          </SelectButton>
+        </PopoverTrigger>
+
+        {!disabled && !readOnly && (
+          <PopoverMenu
+            className={clsx(
+              sPickerCommon.picker_popover_menu_base,
+              s.popover_menu,
+              popoverMenuClassName,
+            )}
+            style={popoverMenuStyle}
+            {...popoverMenuRest}
+          >
+            {searchable && (
+              <div className={s.search_container}>
+                <Input
+                  type="search"
+                  placeholder={searchPlaceholder}
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  onClick={(e) => e.stopPropagation()}
+                  showClear={true}
+                  autoFocus
+                />
+              </div>
+            )}
+
+            <div
+              className={clsx(s.options_container, optionsContainerClassName)}
+              style={optionsContainerStyle}
+            >
+              {filteredOptions.length === 0 ? (
+                <p className={s.no_options}>No options found</p>
+              ) : (
+                filteredOptions.map((option) => (
+                  <Button
+                    key={option.value}
+                    as="div"
+                    variant={option.optionButtonVariant || "ghost"}
+                    className={clsx(s.option, option.optionClassName)}
+                    style={option.optionStyle}
+                    isActive={selectedValues.includes(option.value)}
+                    disabled={disabled || readOnly || option.disabled}
+                    onClick={() => handleSelect(option)}
+                  >
+                    {multiple && (
+                      <Input
+                        type="checkbox"
+                        className={sCommon.option_checkbox}
+                        checked={selectedValues.includes(option.value)}
+                        disabled={disabled || readOnly || option.disabled}
+                      />
+                    )}
+                    {option.icon && option.icon}
+                    <span
+                      className={clsx(s.option_label, sCommon.truncate_text)}
+                    >
+                      {option.label}
+                    </span>
+                  </Button>
+                ))
+              )}
+            </div>
+          </PopoverMenu>
+        )}
+      </Popover>
+
+      <FieldMessage errors={errors} info={info} />
+    </div>
+  );
+};

package/registry/components/ui/input-fields/date-picker/calendar.module.css

@@ -0,0 +1,311 @@
+/* calendar.module.css – standard absolute nav layout (shadcn pattern), clean spacing */
+.calendar {
+  --calendar-cell-size: var(--spacing-11);
+  --calendar-cell-radius: var(--radius-md);
+  --calendar-row-gap: var(--spacing-1);
+
+  width: fit-content;
+  font-family: var(--font-family-1);
+  color: var(--color-foreground);
+  background: transparent;
+  user-select: none;
+}
+
+.root {
+  width: fit-content;
+}
+
+.months {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-4);
+  position: relative;
+}
+
+.month {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+/* Nav floats at left/right edges over the caption row */
+.nav {
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  pointer-events: none;
+  z-index: 1;
+  height: var(--calendar-cell-size);
+
+  & > * {
+    pointer-events: auto;
+  }
+}
+
+
+
+.chevron {
+  width: var(--spacing-8);
+  height: var(--spacing-8);
+}
+
+/* Caption: centered text/dropdowns with padding to avoid arrow overlap */
+.month_caption {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--calendar-cell-size);
+  padding-inline: var(--calendar-cell-size);
+}
+
+.caption_label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-foreground);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.dropdowns {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  align-items: center;
+  gap: var(--spacing-4);
+  width: 100%;
+  min-width: 0;
+}
+
+.dropdown_root {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
+
+.dropdown {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.dropdown_field {
+  width: 100%;
+  min-width: 0;
+}
+
+.dropdown_select_button {
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  background: var(--color-muted);
+  border: var(--border-1) solid transparent;
+  border-radius: var(--calendar-cell-radius);
+  transition:
+    border-color var(--transition-fast),
+    background-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+
+  &:hover {
+    border-color: var(--color-border);
+  }
+
+  &:focus,
+  &[data-active="true"] {
+    border-color: var(--color-ring);
+    box-shadow: var(--shadow-ring);
+  }
+
+  > span,
+  > span > span {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.dropdown_menu {
+  min-width: 100%;
+  background-color: var(--color-background);
+  border: var(--border-1) solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+}
+
+.dropdown_options {
+  max-height: 13rem;
+}
+
+.dropdown_option {
+  padding-block: var(--spacing-3);
+}
+
+.month_grid {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.weekdays {
+  display: flex;
+  margin-bottom: var(--spacing-1);
+}
+
+.weekday {
+  flex: 1;
+  min-width: var(--calendar-cell-size);
+  height: var(--calendar-cell-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-muted-foreground);
+  text-transform: capitalize;
+  letter-spacing: var(--letter-spacing-wide);
+}
+
+.weeks {
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-row-gap);
+}
+
+.week {
+  display: flex;
+}
+
+.week_number,
+.week_number_header {
+  width: var(--calendar-cell-size);
+  height: var(--calendar-cell-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-xs);
+  color: var(--color-muted-foreground);
+}
+
+.day {
+  flex: 1;
+  min-width: var(--calendar-cell-size);
+  height: var(--calendar-cell-size);
+  padding: 0;
+  position: relative;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &.outside {
+    color: var(--color-muted-foreground);
+    opacity: 0.55;
+  }
+
+  &.today .day_button {
+    font-weight: var(--font-weight-medium);
+    color: var(--color-foreground);
+    border-color: var(--color-border);
+    background: var(--color-muted);
+  }
+
+  /* Selected states stay solid primary – hover no longer overrides */
+  &.selected .day_button,
+  &.range_start .day_button,
+  &.range_end .day_button {
+    background: var(--color-primary);
+    color: var(--color-primary-foreground);
+    border-color: var(--color-primary);
+    font-weight: var(--font-weight-medium);
+  }
+
+  /* Explicit hover override for selected states */
+  &.selected .day_button:hover:not(:disabled),
+  &.range_start .day_button:hover:not(:disabled),
+  &.range_end .day_button:hover:not(:disabled) {
+    background: var(--color-primary);
+    color: var(--color-primary-foreground);
+    border-color: var(--color-primary);
+  }
+
+  &.range_middle {
+    background: var(--color-muted);
+    border-radius: 0;
+
+    .day_button {
+      background: transparent;
+      color: var(--color-foreground);
+      border-color: transparent;
+    }
+  }
+
+  &.range_start {
+    border-top-left-radius: var(--calendar-cell-radius);
+    border-bottom-left-radius: var(--calendar-cell-radius);
+    background: var(--color-muted);
+  }
+
+  &.range_end {
+    border-top-right-radius: var(--calendar-cell-radius);
+    border-bottom-right-radius: var(--calendar-cell-radius);
+    background: var(--color-muted);
+  }
+
+  &.day_disabled .day_button {
+    opacity: 0.35;
+    cursor: not-allowed;
+    text-decoration: line-through;
+  }
+}
+
+.day_button {
+  position: relative;
+  width: calc(var(--calendar-cell-size) - var(--spacing-2));
+  height: calc(var(--calendar-cell-size) - var(--spacing-2));
+  margin: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  border: var(--border-1) solid transparent;
+  border-radius: var(--calendar-cell-radius);
+  cursor: pointer;
+  transition:
+    background-color var(--transition-fast),
+    color var(--transition-fast),
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+
+  &:hover:not(:disabled) {
+    background: var(--color-muted);
+    color: var(--color-foreground);
+  }
+
+  &:focus-visible {
+    outline: none;
+    border-color: var(--color-ring);
+    box-shadow: var(--shadow-ring);
+    z-index: 1;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.hidden {
+  visibility: hidden;
+}
+