aplance-ui 1.0.1

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

@@ -0,0 +1,29 @@
+/* Color Picker - input-field wrapper around ColorPalette.
+   Palette internals live in color-palette.module.css; this module only styles
+   the trigger swatch (sized to fit the family's icon column so the
+   data-start-actions padding produces a visible label gap). */
+
+.menu {
+  --picker-popover-menu-width: 17rem;
+  padding: 0;
+}
+
+/* Trigger swatch - width/height match --action-icon (--spacing-8) so the
+   reserved icon column fits exactly, leaving the family's clearance padding
+   intact between swatch and label. */
+.swatch {
+  display: inline-block;
+  width: var(--spacing-8);
+  height: var(--spacing-8);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+  flex-shrink: 0;
+
+  &[data-empty] {
+    background: linear-gradient(
+        45deg,
+        var(--color-muted) 0 50%,
+        transparent 50% 100%
+      );
+  }
+}

package/registry/components/ui/input-fields/color-picker/color-picker.tsx

@@ -0,0 +1,168 @@
+import { useId, useState, type CSSProperties } from "react";
+import clsx from "clsx";
+import {
+  Popover,
+  PopoverMenu,
+  PopoverTrigger,
+} from "../../../primitives/popover/popover";
+import { SelectButton } from "../common/select-button/select-button";
+import { ColorPalette } from "./color-palette";
+import sCommon from "../common/input-field-common.module.css";
+import sPickerCommon from "../common/picker-popover-common.module.css";
+import s from "./color-picker.module.css";
+import { FieldMessage } from "../common/field-message/field-message";
+import type { BaseInputFieldProps } from "../common/types";
+import type {
+  Position,
+  Align,
+} from "../../../primitives/popover/popover";
+import type { ButtonSize, ButtonVariant } from "../../button/button";
+
+const HEX_RE = /^#[0-9a-fA-F]{6}$/;
+const isHex = (s: string) => HEX_RE.test(s);
+
+export type ColorPickerProps = Omit<
+  BaseInputFieldProps,
+  "iconStart" | "iconEnd"
+> & {
+  /** Selected color as hex (controlled). Empty string = unset. */
+  value?: string;
+  /** Initial color (uncontrolled). */
+  defaultValue?: string;
+  /** Fires with the new hex value (`#rrggbb`) whenever it changes. */
+  onChange?: (color: string) => void;
+  /** Optional swatches displayed below the picker. Pass `[]` to hide. */
+  swatches?: readonly string[];
+  /** Placeholder shown when no color is picked. */
+  placeholder?: string;
+  /** SelectButton passthroughs. */
+  buttonVariant?: ButtonVariant | "none";
+  buttonSize?: ButtonSize;
+  /** Popover placement. */
+  popoverPosition?: Position;
+  popoverAlign?: Align;
+  /** Show clear affordance on the trigger when a value is set. */
+  showClear?: boolean;
+  popoverClassName?: string;
+  popoverStyle?: CSSProperties;
+};
+
+export const ColorPicker = ({
+  value,
+  defaultValue,
+  onChange,
+  label,
+  errors,
+  info,
+  disabled,
+  readOnly,
+  required,
+  id,
+  className,
+  style,
+  layout = "default",
+  layoutDirection = "default",
+  buttonStyle,
+  swatches,
+  placeholder = "Pick a color",
+  buttonVariant,
+  buttonSize,
+  popoverPosition = "bottom",
+  popoverAlign = "start",
+  showClear = true,
+  popoverClassName,
+  popoverStyle,
+}: ColorPickerProps) => {
+  const isControlled = value !== undefined;
+  const [internal, setInternal] = useState(defaultValue ?? "");
+  const [isOpen, setIsOpen] = useState(false);
+
+  const current = isControlled ? value : internal;
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const hasValue = !!current && isHex(current);
+  const resolvedButtonVariant = buttonVariant ?? buttonStyle ?? "bordered";
+
+  const commit = (next: string) => {
+    if (!isControlled) setInternal(next);
+    onChange?.(next);
+  };
+
+  return (
+    <div className={clsx(sCommon.container, className)} style={style}>
+      {label && (
+        <div
+          className={clsx(
+            sCommon.field_container,
+            layout !== "default" && sCommon[layout],
+            layout !== "default" &&
+              layoutDirection !== "default" &&
+              sCommon[layoutDirection],
+          )}
+        >
+          <label className={sCommon.label} htmlFor={inputId}>
+            {label}
+          </label>
+        </div>
+      )}
+
+      <Popover
+        position={popoverPosition}
+        align={popoverAlign}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        className={clsx(sPickerCommon.picker_popover, popoverClassName)}
+        closeOnClickOutside
+      >
+        <PopoverTrigger
+          asChild
+          className={sPickerCommon.picker_popover_trigger}
+          disabled={disabled || readOnly}
+        >
+          <SelectButton
+            id={inputId}
+            disabled={disabled || readOnly}
+            required={required}
+            buttonVariant={resolvedButtonVariant}
+            buttonSize={buttonSize}
+            showChevron={false}
+            showClear={hasValue && showClear && !disabled && !readOnly}
+            onClear={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              commit("");
+            }}
+            iconStart={
+              <span
+                className={s.swatch}
+                style={{
+                  backgroundColor: hasValue ? current : "transparent",
+                }}
+                data-empty={!hasValue || undefined}
+                aria-hidden="true"
+              />
+            }
+            className={clsx(!hasValue && sPickerCommon.picker_value_placeholder)}
+          >
+            {hasValue ? current?.toUpperCase() : placeholder}
+          </SelectButton>
+        </PopoverTrigger>
+
+        {!disabled && !readOnly && (
+          <PopoverMenu
+            className={clsx(sPickerCommon.picker_popover_menu_base, s.menu)}
+            style={popoverStyle}
+          >
+            <ColorPalette
+              value={hasValue ? current : ""}
+              onChange={commit}
+              swatches={swatches}
+            />
+          </PopoverMenu>
+        )}
+      </Popover>
+
+      <FieldMessage errors={errors} info={info} />
+    </div>
+  );
+};

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

@@ -0,0 +1,28 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  /* margin-inline: var(--spacing-2); */
+
+  .wrapper {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-2) var(--spacing-4);
+    padding: var(--spacing-1) 0;
+    /* border: 1px solid var(--color-border);
+    border-radius: var(--radius-xl); */
+
+    > .info {
+      font-size: var(--font-size-xs);
+      color: var(--color-muted-foreground);
+      font-family: var(--font-family-1);
+    }
+
+    > .error {
+      font-size: var(--font-size-xs);
+      color: var(--color-error-foreground);
+      font-family: var(--font-family-1);
+    }
+  }
+}

package/registry/components/ui/input-fields/common/field-message/field-message.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import s from "./field-message.module.css";
+import clsx from "clsx";
+
+export type FieldMessageProps = {
+  info?: readonly string[];
+  errors?: readonly string[];
+};
+
+export const FieldMessage: React.FC<FieldMessageProps> = ({ info, errors }) => {
+  const hasInfo = Array.isArray(info) && info.length > 0;
+  const hasErrors = Array.isArray(errors) && errors.length > 0;
+
+  if (!hasInfo && !hasErrors) return null;
+
+  return (
+    <div className={s.container}>
+      {!hasErrors && hasInfo && (
+        <div className={clsx(s.wrapper, s.info_wrapper)}>
+          {info!.map((inf, idx) => (
+            <small key={idx} className={s.info}>
+              {inf}
+            </small>
+          ))}
+        </div>
+      )}
+
+      {hasErrors && (
+        <div className={s.wrapper}>
+          {errors!.map((err, idx) => (
+            <small key={idx} className={s.error}>
+              {err}
+            </small>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,318 @@
+/* This file contains basic / common heirarchy for all input fields */
+
+/* contains form field (with label) and field message (errors info etc.) */
+.container {
+  width: 100%;
+  min-width: fit-content;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+
+  /* When .field_container has the centered layout, propagate horizontal
+     centering to the outer container so the FieldMessage block centers too.
+     Avoids requiring every variant to also apply the layout class up here. */
+  &:has(.field_container.centered) {
+    align-items: center;
+    text-align: center;
+  }
+}
+
+/* contains form field elements like label etc... */
+.field_container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+
+  .label {
+    font-family: var(--font-family-1);
+    color: var(--color-secondary-foreground);
+    font-size: var(--font-size-sm);
+    text-wrap: nowrap;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--spacing-2);
+  }
+
+  /* layout */
+  &.inline {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-3);
+    justify-content: flex-start;
+
+    .label {
+      flex-direction: column;
+      /* margin-inline: unset; */
+    }
+
+    /* direction */
+    &.rev {
+      flex-direction: row-reverse;
+
+      /* due to reverse direction it will become flex-end */
+      justify-content: flex-end;
+    }
+  }
+
+  /* layout: centered - column-stacked with horizontally centered control + label. */
+  &.centered {
+    align-items: center;
+
+    .label {
+      justify-content: center;
+      text-align: center;
+    }
+  }
+
+  /* layout */
+  &.inline_justify {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-3);
+    justify-content: space-between;
+
+    .field_wrapper {
+      width: fit-content;
+      justify-self: flex-start;
+    }
+
+    .label {
+      flex-direction: column;
+      /* margin-inline: unset; */
+    }
+
+    /* direction */
+    &.rev {
+      flex-direction: row-reverse;
+
+      .field_wrapper {
+        justify-self: flex-end;
+      }
+    }
+  }
+}
+
+/* Shared row for label + action pairs (e.g. char count, clear-all). */
+.label_row {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  text-wrap: wrap;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--spacing-5);
+  row-gap: var(--spacing-1);
+}
+
+/* Secondary text (e.g. textarea char counter) sitting beside the label
+   inside a .label_row wrapper. */
+.label_meta {
+  font-family: var(--font-family-1);
+  font-size: var(--font-size-xs);
+  color: var(--color-muted-foreground);
+  align-self: center;
+}
+
+/* mostly for positining to set icons inside input fields */
+.field_wrapper {
+  --field-content-color: var(--color-foreground);
+  --field-placeholder-color: var(--color-muted-foreground);
+  --field-icon-color: var(--color-secondary-foreground);
+
+  width: 100%;
+  position: relative;
+  display: inline-flex;
+
+  /* Action Padding Mathematics Metrics */
+  --action-inset: var(--spacing-5); /* Exact match for right: var(--spacing-5) */
+  --action-icon: var(--spacing-8); /* Safe optical width for 24px SVGs */
+  --action-gap: var(--spacing-2); /* Exact match for flex gap */
+  --action-clearance: var(--spacing-3); /* Crisp 6px optical breathing room */
+}
+
+.field_wrapper_variant {
+  --field-content-color: var(--button-fg, var(--color-foreground));
+  --field-placeholder-color: var(
+    --button-placeholder,
+    var(--field-content-color)
+  );
+  --field-icon-color: var(--button-icon, var(--field-content-color));
+}
+
+/* icons wrapped in span at start like search etc... */
+.icon_start {
+  width: fit-content;
+  position: absolute;
+  top: 50%;
+  left: var(--spacing-5);
+  transform: translateY(-50%);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  --icon-color: var(--field-icon-color);
+  color: var(--field-icon-color);
+}
+
+/* action buttons at end like cross password eyes etc... */
+.action_end_wrapper {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  position: absolute;
+  right: var(--spacing-5);
+  top: 50%;
+  transform: translateY(-50%);
+  flex-shrink: 0;
+  --icon-color: var(--field-icon-color);
+  color: var(--field-icon-color);
+
+  /* icons */
+}
+
+/* default style */
+.field_default {
+  /* layout */
+  width: 100%;
+  min-height: var(--spacing-11);
+
+  /* typography */
+  font-family: var(--font-family-1);
+  font-size: var(--font-size-sm);
+  color: var(--field-content-color);
+  text-align: start;
+  vertical-align: middle;
+
+  /* necessary */
+  line-height: 1.125;
+
+  /* visual */
+  padding-top: var(--spacing-3);
+  padding-bottom: var(--spacing-3);
+  padding-left: var(--spacing-6);
+  padding-right: var(--spacing-6);
+
+  /* display */
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacing-4);
+
+  border: 1px solid var(--color-border) !important;
+  border-radius: var(--radius-md);
+  outline: none;
+  background-color: var(--color-muted);
+
+  /* interaction */
+  transition:
+    border-color var(--transition-base),
+    box-shadow var(--transition-base),
+    background-color var(--transition-base);
+
+  &::placeholder {
+    color: var(--field-placeholder-color);
+    opacity: 1;
+  }
+
+  &:hover:not(:disabled):not(:focus) {
+    background-color: var(--color-muted);
+  }
+
+  &:focus,
+  &[data-active="true"] {
+    border-color: var(--color-ring);
+    box-shadow: var(--shadow-ring);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* we need to adjust paddings of input or select fields inline dynamically due to icons at start and ends */
+}
+
+.field_button_variant {
+  color: var(--field-content-color);
+  caret-color: var(--field-content-color);
+
+  &::placeholder {
+    color: var(--field-placeholder-color);
+    opacity: 1;
+  }
+}
+
+/* Dynamic Action Padding via Data Attributes */
+.field_wrapper[data-start-actions="1"] > :is(input, select, textarea, button) {
+  padding-left: calc(
+    var(--action-inset) + var(--action-icon) + var(--action-clearance)
+  ) !important;
+}
+
+.field_wrapper[data-end-actions="1"] > :is(input, select, textarea, button) {
+  padding-right: calc(
+    var(--action-inset) + var(--action-icon) + var(--action-clearance)
+  ) !important;
+}
+
+.field_wrapper[data-end-actions="2"] > :is(input, select, textarea, button) {
+  padding-right: calc(
+    var(--action-inset) + calc(var(--action-icon) * 2) + var(--action-gap) + var(--action-clearance)
+  ) !important;
+}
+
+.field_wrapper[data-end-actions="3"] > :is(input, select, textarea, button) {
+  padding-right: calc(
+    var(--action-inset) + calc(var(--action-icon) * 3) + calc(var(--action-gap) * 2) + var(--action-clearance)
+  ) !important;
+}
+
+/* Reusable micro-classes for the input-fields family.
+   Keep these after .field_default so they reliably override base paddings. */
+.field_full_width {
+  width: 100% !important;
+}
+
+.field_wrapper_fit {
+  width: fit-content;
+}
+
+.field_cursor_text {
+  cursor: text !important;
+}
+
+.field_cursor_default {
+  cursor: default !important;
+}
+
+.field_justify_start {
+  justify-content: flex-start !important;
+}
+
+.field_justify_end {
+  justify-content: flex-end !important;
+}
+
+.textarea_padding_y {
+  padding-top: var(--spacing-5);
+  padding-bottom: var(--spacing-5);
+}
+
+.textarea_button_variant_padding {
+  padding-top: var(--spacing-5) !important;
+  padding-bottom: var(--spacing-5) !important;
+}
+
+.truncate_text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.option_checkbox {
+  width: fit-content;
+}
+