@plexui/ui 0.7.15 → 0.7.16

package/dist/es/components/FloatingLabelSelect/FloatingLabelSelect.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef, useCallback, useId } from "react";
+import { FieldError } from "../FieldError";
+import { Button } from "../Button";
+import { Dropdown, X } from "../Icon";
+import s from "./FloatingLabelSelect.module.css";
+export const FloatingLabelSelect = forwardRef(function FloatingLabelSelect(props, ref) {
+    const { label, selected = false, errorMessage, "invalid": invalidProp, disabled = false, open = false, onInteract, onClearClick, children, className, "aria-describedby": ariaDescribedByProp, onKeyDown, ...restProps } = props;
+    const generatedId = useId();
+    const errorId = `floating-label-select-${generatedId}-error`;
+    const invalid = invalidProp ?? !!errorMessage;
+    const showClearButton = !!onClearClick && selected && !disabled;
+    const ariaDescribedBy = [ariaDescribedByProp, errorMessage ? errorId : undefined].filter(Boolean).join(" ") ||
+        undefined;
+    const handlePointerDown = useCallback((evt) => {
+        if (evt.button === 2 || disabled)
+            return;
+        evt.preventDefault();
+        onInteract?.();
+    }, [disabled, onInteract]);
+    const handleKeyDown = useCallback((evt) => {
+        onKeyDown?.(evt);
+        if (disabled)
+            return;
+        switch (evt.key) {
+            case "ArrowDown":
+            case "ArrowUp":
+            case " ":
+                evt.stopPropagation();
+                evt.preventDefault();
+                onInteract?.();
+                break;
+        }
+    }, [disabled, onInteract, onKeyDown]);
+    const handleClearPointerDown = useCallback((evt) => {
+        evt.stopPropagation();
+    }, []);
+    const handleClearClick = useCallback((evt) => {
+        evt.stopPropagation();
+        evt.preventDefault();
+        onClearClick?.();
+    }, [onClearClick]);
+    return (_jsxs("div", { className: clsx(s.Root, className), ref: ref, children: [_jsxs("div", { className: clsx(s.FieldFootprint, {
+                    [s.HasValue]: selected,
+                }), role: "button", tabIndex: disabled ? -1 : 0, "data-open": open ? "" : undefined, "data-invalid": invalid ? "" : undefined, "data-disabled": disabled ? "" : undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-invalid": invalid ? true : undefined, "aria-describedby": ariaDescribedBy, "aria-disabled": disabled || undefined, onPointerDown: handlePointerDown, onKeyDown: handleKeyDown, ...restProps, children: [_jsx("div", { className: s.TypeableLabel, children: _jsx("div", { className: s.LabelPositioner, children: _jsx("div", { className: s.LabelText, children: label }) }) }), _jsx("span", { className: s.Content, children: selected ? children : null }), _jsxs("div", { className: s.IndicatorWrapper, children: [showClearButton && (_jsx(Button, { "aria-label": "Clear selection", className: s.Clear, onPointerDown: handleClearPointerDown, onClick: handleClearClick, color: "secondary", variant: "ghost", size: "3xs", uniform: true, pill: true, children: _jsx(X, {}) })), _jsx(Dropdown, { className: s.DropdownIcon })] })] }), errorMessage && (_jsx(FieldError, { id: errorId, className: s.ErrorMessage, children: errorMessage }))] }));
+});
+FloatingLabelSelect.displayName = "FloatingLabelSelect";
+//# sourceMappingURL=FloatingLabelSelect.js.map

package/dist/es/components/FloatingLabelSelect/FloatingLabelSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingLabelSelect.js","sourceRoot":"","sources":["../../../../src/components/FloatingLabelSelect/FloatingLabelSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { forwardRef, useCallback, useId } from \"react\"\n\nimport { FieldError } from \"../FieldError\"\nimport { Button } from \"../Button\"\nimport { Dropdown, X } from \"../Icon\"\n\nimport s from \"./FloatingLabelSelect.module.css\"\n\nexport type FloatingLabelSelectProps = {\n  label: string\n  selected?: boolean\n  errorMessage?: string\n  invalid?: boolean\n  disabled?: boolean\n  open?: boolean\n  onInteract?: () => void\n  onClearClick?: () => void\n  children?: React.ReactNode\n  className?: string\n  \"aria-describedby\"?: string\n} & Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"children\" | \"role\" | \"tabIndex\" | \"aria-describedby\"\n>\n\nexport const FloatingLabelSelect = forwardRef<HTMLDivElement, FloatingLabelSelectProps>(\n  function FloatingLabelSelect(props, ref) {\n    const {\n      label,\n      selected = false,\n      errorMessage,\n      \"invalid\": invalidProp,\n      disabled = false,\n      open = false,\n      onInteract,\n      onClearClick,\n      children,\n      className,\n      \"aria-describedby\": ariaDescribedByProp,\n      onKeyDown,\n      ...restProps\n    } = props\n\n    const generatedId = useId()\n    const errorId = `floating-label-select-${generatedId}-error`\n\n    const invalid = invalidProp ?? !!errorMessage\n\n    const showClearButton = !!onClearClick && selected && !disabled\n\n    const ariaDescribedBy =\n      [ariaDescribedByProp, errorMessage ? errorId : undefined].filter(Boolean).join(\" \") ||\n      undefined\n\n    const handlePointerDown = useCallback(\n      (evt: React.PointerEvent<HTMLDivElement>) => {\n        if (evt.button === 2 || disabled) return\n        evt.preventDefault()\n        onInteract?.()\n      },\n      [disabled, onInteract],\n    )\n\n    const handleKeyDown = useCallback(\n      (evt: React.KeyboardEvent<HTMLDivElement>) => {\n        onKeyDown?.(evt)\n        if (disabled) return\n\n        switch (evt.key) {\n          case \"ArrowDown\":\n          case \"ArrowUp\":\n          case \" \":\n            evt.stopPropagation()\n            evt.preventDefault()\n            onInteract?.()\n            break\n        }\n      },\n      [disabled, onInteract, onKeyDown],\n    )\n\n    const handleClearPointerDown = useCallback((evt: React.PointerEvent<HTMLButtonElement>) => {\n      evt.stopPropagation()\n    }, [])\n\n    const handleClearClick = useCallback(\n      (evt: React.MouseEvent<HTMLButtonElement>) => {\n        evt.stopPropagation()\n        evt.preventDefault()\n        onClearClick?.()\n      },\n      [onClearClick],\n    )\n\n    return (\n      <div className={clsx(s.Root, className)} ref={ref}>\n        <div\n          className={clsx(s.FieldFootprint, {\n            [s.HasValue]: selected,\n          })}\n          role=\"button\"\n          tabIndex={disabled ? -1 : 0}\n          data-open={open ? \"\" : undefined}\n          data-invalid={invalid ? \"\" : undefined}\n          data-disabled={disabled ? \"\" : undefined}\n          aria-expanded={open}\n          aria-haspopup=\"listbox\"\n          aria-invalid={invalid ? true : undefined}\n          aria-describedby={ariaDescribedBy}\n          aria-disabled={disabled || undefined}\n          onPointerDown={handlePointerDown}\n          onKeyDown={handleKeyDown}\n          {...restProps}\n        >\n          <div className={s.TypeableLabel}>\n            <div className={s.LabelPositioner}>\n              <div className={s.LabelText}>{label}</div>\n            </div>\n          </div>\n          <span className={s.Content}>{selected ? children : null}</span>\n          <div className={s.IndicatorWrapper}>\n            {showClearButton && (\n              <Button\n                aria-label=\"Clear selection\"\n                className={s.Clear}\n                onPointerDown={handleClearPointerDown}\n                onClick={handleClearClick}\n                color=\"secondary\"\n                variant=\"ghost\"\n                size=\"3xs\"\n                uniform\n                pill\n              >\n                <X />\n              </Button>\n            )}\n            <Dropdown className={s.DropdownIcon} />\n          </div>\n        </div>\n        {errorMessage && (\n          <FieldError id={errorId} className={s.ErrorMessage}>\n            {errorMessage}\n          </FieldError>\n        )}\n      </div>\n    )\n  },\n)\n\nFloatingLabelSelect.displayName = \"FloatingLabelSelect\"\n"]}

package/dist/es/components/FloatingLabelSelect/FloatingLabelSelect.module.css

@@ -0,0 +1,145 @@
+@layer components {.Root {
+  position: relative;
+  --field-error-padding-inline: 0;
+  --field-error-margin-top: 0.25rem;
+}.Root:has([data-disabled]) {
+  --cursor: not-allowed;
+  opacity: 0.5;
+}.FieldFootprint {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  height: var(--floating-input-height);
+  border-radius: var(--floating-input-border-radius);
+  line-height: 1.5rem;
+  color: var(--color-text);
+  font-size: 1rem;
+  width: 100%;
+  border: 1px solid var(--input-state-color, var(--floating-input-border-color));
+  padding: 0 var(--floating-input-gutter);
+  background-color: var(--floating-input-background);
+  cursor: var(--cursor, pointer);
+  transition: border-color var(--floating-input-transition-duration) ease-in-out;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}.FieldFootprint:hover:not([data-disabled]) {
+  border-color: var(--input-state-color, var(--floating-input-border-color-hover));
+}.FieldFootprint[data-focused] {
+  --input-state-color: var(--floating-input-border-color-focus);
+}.FieldFootprint[data-open] {
+  --input-state-color: var(--floating-input-border-color-focus);
+}.FieldFootprint[data-invalid] {
+  --input-state-color: var(--floating-input-border-color-invalid);
+}/* Focus ring */.FieldFootprint:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 1px;
+}/* Label container - positioned absolutely */.TypeableLabel {
+  cursor: var(--cursor, pointer);
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}/* Label background overlay - covers content when not selected */.TypeableLabel::before {
+  content: "";
+  display: block;
+  position: absolute;
+  inset: 0;
+  border-radius: var(--floating-input-border-radius);
+  background-color: var(--floating-input-background);
+}/* Label text positioner */.LabelPositioner {
+  --placeholder-transition: transform var(--floating-input-transition-duration) ease-in-out;
+  position: absolute;
+  inset: 0;
+  padding: 0 var(--floating-input-gutter);
+  display: flex;
+  align-items: center;
+  transition: var(--placeholder-transition);
+  pointer-events: none;
+}/* Label text */.LabelText {
+  --horizontal-padding: 6px;
+  background-color: var(--floating-input-background);
+  padding: 1px var(--horizontal-padding);
+  transition: var(--placeholder-transition);
+  color: var(--input-state-color, var(--floating-input-label-color));
+  font-size: 1rem;
+  line-height: 1;
+  cursor: var(--cursor, pointer);
+  transform: translate(calc(-1 * var(--horizontal-padding)));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: calc(100% - var(--floating-input-gutter) * 2);
+}/* Float state - label moves up */.FieldFootprint[data-open] .TypeableLabel,
+.FieldFootprint[data-invalid] .TypeableLabel,
+.HasValue .TypeableLabel {
+  pointer-events: none;
+}.FieldFootprint[data-open] .TypeableLabel::before,
+.FieldFootprint[data-invalid] .TypeableLabel::before,
+.HasValue .TypeableLabel::before {
+  display: none;
+}.FieldFootprint[data-open] .LabelPositioner,
+.FieldFootprint[data-invalid] .LabelPositioner,
+.HasValue .LabelPositioner {
+  transform: translateY(-50%);
+}.FieldFootprint[data-open] .LabelText,
+.FieldFootprint[data-invalid] .LabelText,
+.HasValue .LabelText {
+  transform: translate(-12px) scale(var(--floating-input-label-scale));
+  max-width: 133%;
+}/* Focus/open label color */.FieldFootprint[data-focused] .LabelText,
+.FieldFootprint[data-open] .LabelText {
+  color: var(--floating-input-label-color-focus);
+}/* Invalid label color */.FieldFootprint[data-invalid] .LabelText {
+  color: var(--floating-input-label-color-invalid);
+}/* Content area (selected value) */.Content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: inherit;
+}/* Indicator wrapper — mirrors SelectControl IndicatorWrapper at 3xl size */.IndicatorWrapper {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-left: 4px;
+}/* Clear button — using Button component, sizing matches SelectControl 3xl */.Clear {
+  --button-size: 24px;
+  --button-icon-size: 16px;
+
+  position: relative;
+  opacity: 0.75;
+}.FieldFootprint:hover:not([data-disabled]) .Clear,
+.FieldFootprint[data-open] .Clear,
+.Clear:focus-visible {
+  opacity: 1;
+}/* Dropdown icon — matches SelectControl 3xl: 9×13 */.DropdownIcon {
+  position: relative;
+  flex-shrink: 0;
+  width: 9px;
+  height: 13px;
+  color: var(--color-text-secondary);
+  opacity: 0.75;
+  transition: opacity var(--floating-input-transition-duration) ease-in-out;
+}.FieldFootprint:hover:not([data-disabled]) .DropdownIcon {
+  opacity: 1;
+}.FieldFootprint[data-open] .DropdownIcon {
+  opacity: 1;
+}/* Error message spacing */.ErrorMessage {
+  margin-top: var(--field-error-margin-top);
+}/* Reduced motion preference */@media (prefers-reduced-motion: reduce) {
+  .FieldFootprint,
+  .LabelPositioner,
+  .LabelText {
+    transition: none;
+  }
+}
+}

package/dist/es/components/FloatingLabelSelect/index.js

@@ -0,0 +1,2 @@
+export { FloatingLabelSelect } from "./FloatingLabelSelect";
+//# sourceMappingURL=index.js.map

package/dist/es/components/FloatingLabelSelect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/FloatingLabelSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAiC,MAAM,uBAAuB,CAAA","sourcesContent":["export { FloatingLabelSelect, type FloatingLabelSelectProps } from \"./FloatingLabelSelect\"\n"]}

package/dist/types/components/FloatingLabelSelect/FloatingLabelSelect.d.ts

@@ -0,0 +1,26 @@
+export type FloatingLabelSelectProps = {
+    label: string;
+    selected?: boolean;
+    errorMessage?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    open?: boolean;
+    onInteract?: () => void;
+    onClearClick?: () => void;
+    children?: React.ReactNode;
+    className?: string;
+    "aria-describedby"?: string;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "role" | "tabIndex" | "aria-describedby">;
+export declare const FloatingLabelSelect: import("react").ForwardRefExoticComponent<{
+    label: string;
+    selected?: boolean;
+    errorMessage?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    open?: boolean;
+    onInteract?: () => void;
+    onClearClick?: () => void;
+    children?: React.ReactNode;
+    className?: string;
+    "aria-describedby"?: string;
+} & Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "role" | "tabIndex" | "aria-describedby"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/FloatingLabelSelect/index.d.ts

@@ -0,0 +1 @@
+export { FloatingLabelSelect, type FloatingLabelSelectProps } from "./FloatingLabelSelect";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/ui",
-  "version": "0.7.15",
+  "version": "0.7.16",
   "description": "Modern design system for building high-quality applications",
   "type": "module",
   "license": "MIT",