aplance-ui 1.0.1

package/registry/components/ui/input-fields/common/input-field-native.module.css

@@ -0,0 +1,267 @@
+/* uses input-field-common (.container and all)
++ extends .wrapper (from input-field-common) with 
+.native_field_wrapper (styling defalut input types)
+*/
+
+.native_field_wrapper {
+  /* input-specific overrides & browser fixes */
+  input[type="search"]::-webkit-search-cancel-button {
+    appearance: none;
+    display: none;
+  }
+
+  /* remove password reveal */
+  input[type="password"] {
+    &::-ms-reveal,
+    &::-webkit-reveal {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+  }
+
+  /* calendar and time picker override */
+  input[type="date"],
+  input[type="month"],
+  input[type="week"],
+  input[type="time"],
+  input[type="datetime-local"] {
+    &::-webkit-calendar-picker-indicator {
+      display: none;
+      -webkit-appearance: none;
+    }
+  }
+
+  /* Base control styles (checkbox, radio, range thumb, color) */
+  input[type="checkbox"],
+  input[type="radio"],
+  input[type="color"] {
+    appearance: none;
+    -webkit-appearance: none;
+    background-color: var(--color-background);
+    border: 1.5px solid var(--color-border);
+    transition: all var(--transition-fast);
+
+    &:not(:disabled):focus {
+      box-shadow: var(--shadow-ring);
+    }
+  }
+
+  /* radio */
+  input[type="radio"] {
+    width: 1.2rem;
+    height: 1.2rem;
+    border-radius: var(--radius-full);
+    position: relative;
+
+    &:checked::after {
+      content: "";
+      position: absolute;
+      inset: 4px;
+      border-radius: var(--radius-full);
+      background-color: var(--color-primary);
+    }
+  }
+
+  /* checkbox */
+  input[type="checkbox"] {
+    width: 1.2rem;
+    height: 1.2rem;
+    border-radius: var(--radius-sm);
+    position: relative;
+    appearance: none;
+
+    &:checked {
+      background-color: var(--color-primary);
+    }
+
+    &:checked::after {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 45%;
+      width: 0.35rem;
+      height: 0.7rem;
+      border: solid var(--color-primary-foreground);
+      border-width: 0 2.5px 2.5px 0;
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+  }
+
+  /* number */
+  input[type="number"] {
+    appearance: textfield;
+    -webkit-appearance: textfield;
+    position: relative;
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      appearance: none;
+      -webkit-appearance: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    &::-webkit-inner-spin-button {
+      position: absolute;
+      right: var(--spacing-4);
+      top: 50%;
+      transform: translateY(-50%);
+      width: 14px;
+      height: 28px;
+      display: block;
+      cursor: pointer;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 14px 28px;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 28' fill='none' stroke='%23181818' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10l2.5-2.5 2.5 2.5'/%3E%3Cpath d='M4.5 18l2.5 2.5 2.5-2.5'/%3E%3C/svg%3E");
+    }
+  }
+
+  /* dark theme */
+  [data-theme="dark"] & {
+    input[type="number"] {
+      &::-webkit-inner-spin-button {
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 28' fill='none' stroke='%23ffffff' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10l2.5-2.5 2.5 2.5'/%3E%3Cpath d='M4.5 18l2.5 2.5 2.5-2.5'/%3E%3C/svg%3E");
+      }
+    }
+  }
+
+  /* range */
+  input[type="range"] {
+    appearance: none;
+    width: 100%;
+    height: var(--spacing-2);
+    border-radius: var(--radius-full);
+    background-color: var(--color-border);
+    cursor: pointer;
+    transition: background-color var(--transition-fast);
+    outline: none;
+    margin: var(--spacing-2) 0;
+
+    &:not(:disabled):hover {
+      background-color: var(--color-ring);
+    }
+
+    /* hover affects thumb */
+    &:hover::-webkit-slider-thumb {
+      background-color: var(--color-primary);
+    }
+
+    &:hover::-moz-range-thumb {
+      background-color: var(--color-primary);
+    }
+
+    /* thumb base */
+    &::-webkit-slider-thumb,
+    &::-moz-range-thumb {
+      width: 1.1rem;
+      height: 1.1rem;
+      border-radius: var(--radius-full);
+      background-color: var(--color-background);
+      border: 1.5px solid var(--color-border);
+      transition: all var(--transition-fast);
+      cursor: pointer;
+    }
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    &:active::-webkit-slider-thumb,
+    &:active::-moz-range-thumb {
+      transform: scale(1.1);
+    }
+
+    &::-moz-range-track {
+      height: var(--spacing-2);
+      border-radius: var(--radius-full);
+      background-color: var(--color-border);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  }
+
+  /* color */
+  input[type="color"] {
+    width: 2.5rem;
+    height: 2.5rem;
+    padding: 0;
+    border-radius: var(--radius-md);
+
+    &::-webkit-color-swatch-wrapper {
+      padding: var(--spacing-2);
+      border-radius: var(--radius-md);
+    }
+
+    &::-webkit-color-swatch,
+    &::-moz-color-swatch {
+      border-radius: var(--radius-md);
+      border: none;
+    }
+  }
+
+  /* select - single */
+  select:not([multiple]) {
+    appearance: none;
+
+    option {
+      padding: var(--spacing-2) var(--spacing-3);
+      background-color: var(--color-background);
+      color: var(--color-foreground);
+
+      &:hover {
+        background-color: var(--color-muted);
+      }
+
+      &:checked {
+        background-color: var(--color-primary);
+        color: var(--color-primary-foreground);
+        font-weight: 500;
+      }
+    }
+
+    option:checked {
+      background-color: var(--color-primary);
+      color: var(--color-primary-foreground);
+    }
+  }
+
+  /* native select chevron rotation */
+  .native_select_chevron {
+    transition: transform var(--transition-fast) ease-in-out;
+  }
+
+  &:focus-within .native_select_chevron,
+  &:active .native_select_chevron {
+    transform: rotate(180deg) !important;
+  }
+
+  /* select - multiple */
+  select[multiple] {
+    height: fit-content;
+    min-height: 8rem;
+    appearance: none;
+    overflow-y: auto;
+    padding: var(--spacing-2) var(--spacing-1);
+    background-image: none;
+
+    option {
+      margin: var(--spacing-2);
+      background-color: var(--color-background);
+      border: 1px solid var(--color-border);
+      padding: var(--spacing-2) var(--spacing-3);
+      border-radius: var(--radius-md);
+
+      &:hover,
+      &:checked {
+        background-color: var(--color-primary);
+        color: var(--color-primary-foreground);
+      }
+    }
+  }
+}

package/registry/components/ui/input-fields/common/picker-popover-common.module.css

@@ -0,0 +1,40 @@
+/*
+ * Shared popover-picker primitives for input-field components.
+ * Keep names generic so future pickers (date/time/color/etc.) can reuse these
+ * shell styles without duplicating visual frame and action-footer rules.
+ */
+
+.picker_popover {
+  width: 100%;
+}
+
+.picker_popover_trigger {
+  width: 100%;
+}
+
+.picker_popover_menu_base {
+  width: var(--picker-popover-menu-width, auto) !important;
+  background-color: var(--color-background);
+  border: var(--border-1) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: 0;
+  overflow: hidden;
+}
+
+.picker_actions_footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-4);
+  padding: var(--spacing-4);
+  border-top: var(--border-1) solid var(--color-border);
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+}
+
+.picker_value_placeholder {
+  color: var(
+    --field-placeholder-color,
+    var(--button-placeholder, var(--color-muted-foreground))
+  );
+}

package/registry/components/ui/input-fields/common/select-button/select-button.module.css

@@ -0,0 +1,9 @@
+/*
+ * SelectButton has no module-scoped styles of its own. It composes the
+ * shared field-wrapper contracts from `../input-field-common.module.css`
+ * and the tone classes from `../../../button/button.module.css` so every
+ * popover-driven trigger (CustomSelect, DatePicker, TimePicker, ColorPicker,
+ * MediaInput) renders with the same chrome as a native input.
+ *
+ * Kept empty for co-location consistency with the rest of the family.
+ */

package/registry/components/ui/input-fields/common/select-button/select-button.tsx

@@ -0,0 +1,171 @@
+import {
+  type CSSProperties,
+  type FC,
+  type ReactNode,
+} from "react";
+import clsx from "clsx";
+import { IconChevronDown, IconChevronRight, IconX } from "@tabler/icons-react";
+import {
+  Button,
+  type ButtonSize,
+  type ButtonVariant,
+} from "../../../button/button";
+import sButton from "../../../button/button.module.css";
+import { Icon } from "../../../../primitives/icon/icon";
+import { Tooltip } from "../../../tooltip/tooltip";
+import type { Position } from "../../../../primitives/popover/popover";
+import { usePopover } from "../../../../primitives/popover/popover-context";
+import sCommon from "../input-field-common.module.css";
+
+export type SelectButtonProps = {
+  disabled?: boolean;
+  required?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  id?: string;
+  buttonVariant?: ButtonVariant | "none";
+  buttonSize?: ButtonSize;
+  tooltip?: string;
+  tooltipPosition?: Position;
+  showClear?: boolean;
+  showChevron?: boolean;
+  isSubmenu?: boolean;
+  onClear?: (e: React.MouseEvent) => void;
+  iconStart?: ReactNode;
+  iconEnd?: ReactNode;
+  children?: ReactNode;
+};
+
+/**
+ * Shared trigger surface for popover-based input fields (CustomSelect,
+ * DatePicker, TimePicker, ColorPicker, MediaInput). Mirrors the visual
+ * contract of `Input`: same wrapper paddings, focus ring, and start/end
+ * action slots - but rendered as a button so it can drive a popover.
+ *
+ * Must be rendered inside a `<Popover>` - it reads open state via
+ * `usePopover` to flip `isActive` and chevron rotation.
+ */
+export const SelectButton: FC<SelectButtonProps> = ({
+  disabled = false,
+  required = false,
+  className,
+  style,
+  id,
+  buttonVariant = "bordered",
+  buttonSize = "default",
+  showClear = false,
+  isSubmenu = false,
+  showChevron = true,
+  tooltip,
+  tooltipPosition = "bottom",
+  onClear,
+  iconStart,
+  iconEnd,
+  children,
+}) => {
+  const { isOpen } = usePopover();
+  const isButtonVariant = buttonVariant !== "none";
+  const buttonToneClass = isButtonVariant
+    ? sButton[`tone_${buttonVariant}`]
+    : undefined;
+
+  const endActionCount = [showClear, showChevron, iconEnd].filter(
+    Boolean,
+  ).length;
+
+  const buttonContent = (
+    <span className={clsx(sCommon.truncate_text)}>{children}</span>
+  );
+
+  const button = (
+    <div
+      className={clsx(
+        sCommon.field_wrapper,
+        isButtonVariant && sCommon.field_wrapper_variant,
+        isButtonVariant && buttonToneClass,
+      )}
+      data-start-actions={iconStart ? 1 : undefined}
+      data-end-actions={endActionCount > 0 ? Math.min(3, endActionCount) : undefined}
+    >
+      {iconStart && <div className={sCommon.icon_start}>{iconStart}</div>}
+      {buttonVariant === "none" ? (
+        <button
+          className={clsx(
+            sCommon.field_default,
+            sCommon.field_cursor_default,
+            className,
+          )}
+          disabled={disabled}
+          aria-required={required || undefined}
+          style={style}
+          type="button"
+          id={id}
+          data-active={isOpen}
+        >
+          {buttonContent}
+        </button>
+      ) : (
+        <Button
+          className={clsx(
+            sCommon.field_full_width,
+            sCommon.field_justify_start,
+            sCommon.field_cursor_default,
+            sCommon.field_button_variant,
+            sButton.input_focus,
+            buttonToneClass,
+            className,
+          )}
+          variant={buttonVariant as ButtonVariant}
+          isActive={isOpen}
+          size={buttonSize}
+          disabled={disabled}
+          aria-required={required || undefined}
+          style={style}
+          type="button"
+          id={id}
+        >
+          {buttonContent}
+        </Button>
+      )}
+      {endActionCount > 0 && (
+        <div className={sCommon.action_end_wrapper}>
+          {showClear && (
+            <Icon
+              onClick={onClear}
+              clickable
+              data-disabled={disabled}
+              aria-label="Clear selection"
+            >
+              <IconX />
+            </Icon>
+          )}
+          {!isSubmenu && showChevron && (
+            <Icon disabled={disabled} rotate={isOpen} clickable>
+              <IconChevronDown />
+            </Icon>
+          )}
+          {isSubmenu && showChevron && (
+            <Icon disabled={disabled} rotateSub={isOpen} clickable>
+              <IconChevronRight />
+            </Icon>
+          )}
+          {iconEnd}
+        </div>
+      )}
+    </div>
+  );
+
+  if (tooltip) {
+    return (
+      <Tooltip
+        content={tooltip}
+        position={tooltipPosition}
+        popoverMenu={{ style: { display: isOpen ? "none" : undefined } }}
+      >
+        {button}
+      </Tooltip>
+    );
+  }
+
+  return button;
+};

package/registry/components/ui/input-fields/common/types.ts

@@ -0,0 +1,38 @@
+import type { ButtonVariant } from "../../button/button";
+import type { CSSProperties, ReactNode } from "react";
+
+export const layoutTypes = [
+  "default",
+  "inline",
+  "inline_justify",
+  "centered",
+] as const;
+export type LayoutType = (typeof layoutTypes)[number];
+
+export type InputFieldButtonStyle = "none" | ButtonVariant;
+
+export type InputFieldMessageProps = {
+  errors?: readonly string[];
+  info?: readonly string[];
+};
+
+export type InputFieldInteractionProps = {
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+};
+
+export type BaseInputFieldProps =
+  InputFieldMessageProps &
+  InputFieldInteractionProps & {
+  label?: string;
+  style?: CSSProperties;
+  className?: string;
+  id?: string;
+  name?: string;
+  layout?: LayoutType;
+  layoutDirection?: "default" | "rev"; // for inline layouts
+  buttonStyle?: InputFieldButtonStyle; // to use button variant styles
+  iconStart?: ReactNode;
+  iconEnd?: ReactNode;
+};

package/registry/components/ui/input-fields/custom-select/custom-select.module.css

@@ -0,0 +1,56 @@
+/* uses input-field-common (.container and all) 
++ popover related stuff
+*/
+
+/* actual menu selector */
+.popover_menu {
+  --picker-popover-menu-width: 100%;
+  width: 100%;
+  border-radius: calc(var(--radius-md) + var(--spacing-2));
+
+  /* Search container */
+  .search_container {
+    padding: var(--spacing-4);
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  /* Options container */
+  .options_container {
+    width: 100%;
+    max-height: 16rem;
+    overflow-y: auto;
+    padding: var(--spacing-2);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+
+    .no_options {
+      padding: var(--spacing-4);
+      text-align: center;
+      color: var(--color-muted-foreground);
+      font-size: var(--font-size-sm);
+    }
+
+    /* Option button */
+    .option {
+      width: 100%;
+      /* button has justify-content: space-between */
+      justify-content: flex-start;
+      /* modifying padding of actual button variant for consistency */
+      padding: var(--spacing-3) var(--spacing-4);
+      border-radius: var(--radius-md);
+
+      /* > icon */
+
+      .option_label {
+        max-width: 100% !important;
+      }
+    }
+  }
+}
+
+.option_label {
+  max-width: 100% !important;
+}
+
+