@plexui/ui 0.2.0

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

@@ -0,0 +1,23 @@
+@layer components {.FieldError {
+  display: flex;
+  align-items: center;
+  gap: var(--field-error-gap);
+  padding-inline-start: var(--field-error-padding-inline);
+  color: var(--field-error-color);
+  font-size: var(--field-error-font-size);
+  line-height: var(--field-error-line-height);
+  text-align: left;
+}.FieldError:first-of-type {
+  margin-top: var(--field-error-margin-top);
+}.FieldError:last-of-type {
+  margin-bottom: var(--field-error-margin-bottom);
+}.FieldError > * {
+  flex-shrink: 0;
+}.Icon {
+  width: var(--field-error-icon-size);
+  height: var(--field-error-icon-size);
+  display: block;
+  align-self: center;
+  margin-top: -0.1em;
+}
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/FieldError/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAA","sourcesContent":["export { FieldError, type FieldErrorProps } from \"./FieldError\"\n"]}

package/dist/es/components/FloatingLabelInput/FloatingLabelInput.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
+import { mergeRefs } from "react-merge-refs";
+import { FieldError } from "../FieldError";
+import { X } from "../Icon";
+import s from "./FloatingLabelInput.module.css";
+export const FloatingLabelInput = forwardRef(function FloatingLabelInput(props, ref) {
+    const { label, errorMessage, "invalid": invalidProp, disabled = false, readOnly = false, onClear, onAutofill, allowAutofillExtensions = false, className, "id": idProp, name, type = "text", value, defaultValue, onChange, onFocus, onBlur, onAnimationStart, "aria-describedby": ariaDescribedByProp, ...restProps } = props;
+    const inputRef = useRef(null);
+    const generatedId = useId();
+    const inputId = idProp || `floating-label-input-${generatedId}`;
+    const errorId = `${inputId}-error`;
+    const [focused, setFocused] = useState(false);
+    const [hasValue, setHasValue] = useState(() => {
+        return !!(value !== undefined ? value : defaultValue);
+    });
+    // Sync hasValue with controlled value prop
+    useEffect(() => {
+        if (value !== undefined) {
+            setHasValue(!!value);
+        }
+    }, [value]);
+    // Determine invalid state from prop or presence of errorMessage
+    const invalid = invalidProp ?? !!errorMessage;
+    // Determine if clear button should be shown
+    const showClearButton = !!onClear && hasValue && !disabled && !readOnly;
+    // Merge aria-describedby with error id
+    const ariaDescribedBy = [ariaDescribedByProp, errorMessage ? errorId : undefined].filter(Boolean).join(" ") ||
+        undefined;
+    // Handle clicks on the container to focus the input
+    const handleContainerMouseDown = useCallback((evt) => {
+        const input = inputRef.current;
+        if (!evt.target || !(evt.target instanceof Element) || !input) {
+            return;
+        }
+        if (input.contains(evt.target)) {
+            return;
+        }
+        if (evt.target.closest("button, [type='button'], [role='button']")) {
+            return;
+        }
+        evt.preventDefault();
+        if (document.activeElement !== input) {
+            input.focus();
+        }
+        const length = input.value.length;
+        input.setSelectionRange(length, length);
+    }, []);
+    const handleFocus = useCallback((evt) => {
+        setFocused(true);
+        onFocus?.(evt);
+    }, [onFocus]);
+    const handleBlur = useCallback((evt) => {
+        setFocused(false);
+        onBlur?.(evt);
+    }, [onBlur]);
+    const handleChange = useCallback((evt) => {
+        setHasValue(!!evt.currentTarget.value);
+        onChange?.(evt);
+    }, [onChange]);
+    const handleAnimationStart = useCallback((evt) => {
+        onAnimationStart?.(evt);
+        // Detect browser autofill
+        if (evt.animationName === "native-autofill-in") {
+            setHasValue(true);
+            onAutofill?.();
+        }
+    }, [onAnimationStart, onAutofill]);
+    return (_jsxs("div", { className: clsx(s.Root, className), children: [_jsxs("div", { className: clsx(s.FieldFootprint, {
+                    [s.HasValue]: hasValue,
+                }), "data-focused": focused ? "" : undefined, "data-has-value": hasValue ? "" : undefined, "data-invalid": invalid ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-readonly": readOnly ? "" : undefined, onMouseDown: handleContainerMouseDown, children: [_jsx("label", { className: s.TypeableLabel, htmlFor: inputId, children: _jsx("div", { className: s.LabelPositioner, children: _jsx("div", { className: s.LabelText, children: label }) }) }), _jsx("input", { ...restProps, ref: mergeRefs([ref, inputRef]), id: inputId, name: name, type: type, className: s.Input, value: value, defaultValue: defaultValue, disabled: disabled, readOnly: readOnly, "aria-invalid": invalid ? true : undefined, "aria-describedby": ariaDescribedBy, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onAnimationStart: handleAnimationStart, "data-lpignore": allowAutofillExtensions ? undefined : true, "data-1p-ignore": allowAutofillExtensions ? undefined : true }), showClearButton && (_jsx("button", { type: "button", "aria-label": "Clear input", className: s.ClearButton, onClick: onClear, children: _jsx(X, {}) }))] }), errorMessage && (_jsx(FieldError, { id: errorId, className: s.ErrorMessage, children: errorMessage }))] }));
+});
+FloatingLabelInput.displayName = "FloatingLabelInput";
+//# sourceMappingURL=FloatingLabelInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingLabelInput.js","sourceRoot":"","sources":["../../../../src/components/FloatingLabelInput/FloatingLabelInput.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { forwardRef, useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\n\nimport { FieldError } from \"../FieldError\"\nimport { X } from \"../Icon\"\n\nimport s from \"./FloatingLabelInput.module.css\"\n\nexport type FloatingLabelInputProps = {\n  /**\n   * Label text for the floating label\n   */\n  label: string\n  /**\n   * Error message to display below the input\n   */\n  errorMessage?: string\n  /**\n   * Mark the input as invalid\n   * @default false (or true if errorMessage is provided)\n   */\n  invalid?: boolean\n  /**\n   * Disables the input visually and from interactions\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Makes the input read-only\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * Callback invoked when the clear button is clicked\n   */\n  onClear?: () => void\n  /**\n   * Callback invoked when the input is autofilled by the browser\n   */\n  onAutofill?: () => void\n  /**\n   * Allow autofill extensions to appear in the input\n   * @default false\n   */\n  allowAutofillExtensions?: boolean\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"placeholder\">\n\nexport const FloatingLabelInput = forwardRef<HTMLInputElement, FloatingLabelInputProps>(\n  function FloatingLabelInput(props, ref) {\n    const {\n      label,\n      errorMessage,\n      \"invalid\": invalidProp,\n      disabled = false,\n      readOnly = false,\n      onClear,\n      onAutofill,\n      allowAutofillExtensions = false,\n      className,\n      \"id\": idProp,\n      name,\n      type = \"text\",\n      value,\n      defaultValue,\n      onChange,\n      onFocus,\n      onBlur,\n      onAnimationStart,\n      \"aria-describedby\": ariaDescribedByProp,\n      ...restProps\n    } = props\n\n    const inputRef = useRef<HTMLInputElement | null>(null)\n    const generatedId = useId()\n    const inputId = idProp || `floating-label-input-${generatedId}`\n    const errorId = `${inputId}-error`\n\n    const [focused, setFocused] = useState(false)\n    const [hasValue, setHasValue] = useState(() => {\n      return !!(value !== undefined ? value : defaultValue)\n    })\n\n    // Sync hasValue with controlled value prop\n    useEffect(() => {\n      if (value !== undefined) {\n        setHasValue(!!value)\n      }\n    }, [value])\n\n    // Determine invalid state from prop or presence of errorMessage\n    const invalid = invalidProp ?? !!errorMessage\n\n    // Determine if clear button should be shown\n    const showClearButton = !!onClear && hasValue && !disabled && !readOnly\n\n    // Merge aria-describedby with error id\n    const ariaDescribedBy =\n      [ariaDescribedByProp, errorMessage ? errorId : undefined].filter(Boolean).join(\" \") ||\n      undefined\n\n    // Handle clicks on the container to focus the input\n    const handleContainerMouseDown = useCallback((evt: React.MouseEvent<HTMLDivElement>) => {\n      const input = inputRef.current\n      if (!evt.target || !(evt.target instanceof Element) || !input) {\n        return\n      }\n      if (input.contains(evt.target)) {\n        return\n      }\n      if (evt.target.closest(\"button, [type='button'], [role='button']\")) {\n        return\n      }\n      evt.preventDefault()\n      if (document.activeElement !== input) {\n        input.focus()\n      }\n      const length = input.value.length\n      input.setSelectionRange(length, length)\n    }, [])\n\n    const handleFocus = useCallback(\n      (evt: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(true)\n        onFocus?.(evt)\n      },\n      [onFocus],\n    )\n\n    const handleBlur = useCallback(\n      (evt: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(false)\n        onBlur?.(evt)\n      },\n      [onBlur],\n    )\n\n    const handleChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>) => {\n        setHasValue(!!evt.currentTarget.value)\n        onChange?.(evt)\n      },\n      [onChange],\n    )\n\n    const handleAnimationStart = useCallback(\n      (evt: React.AnimationEvent<HTMLInputElement>) => {\n        onAnimationStart?.(evt)\n        // Detect browser autofill\n        if (evt.animationName === \"native-autofill-in\") {\n          setHasValue(true)\n          onAutofill?.()\n        }\n      },\n      [onAnimationStart, onAutofill],\n    )\n\n    return (\n      <div className={clsx(s.Root, className)}>\n        <div\n          className={clsx(s.FieldFootprint, {\n            [s.HasValue]: hasValue,\n          })}\n          data-focused={focused ? \"\" : undefined}\n          data-has-value={hasValue ? \"\" : undefined}\n          data-invalid={invalid ? \"\" : undefined}\n          data-disabled={disabled ? \"\" : undefined}\n          data-readonly={readOnly ? \"\" : undefined}\n          onMouseDown={handleContainerMouseDown}\n        >\n          <label className={s.TypeableLabel} htmlFor={inputId}>\n            <div className={s.LabelPositioner}>\n              <div className={s.LabelText}>{label}</div>\n            </div>\n          </label>\n          <input\n            {...restProps}\n            ref={mergeRefs([ref, inputRef])}\n            id={inputId}\n            name={name}\n            type={type}\n            className={s.Input}\n            value={value}\n            defaultValue={defaultValue}\n            disabled={disabled}\n            readOnly={readOnly}\n            aria-invalid={invalid ? true : undefined}\n            aria-describedby={ariaDescribedBy}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onAnimationStart={handleAnimationStart}\n            data-lpignore={allowAutofillExtensions ? undefined : true}\n            data-1p-ignore={allowAutofillExtensions ? undefined : true}\n          />\n          {showClearButton && (\n            <button\n              type=\"button\"\n              aria-label=\"Clear input\"\n              className={s.ClearButton}\n              onClick={onClear}\n            >\n              <X />\n            </button>\n          )}\n        </div>\n        {errorMessage && (\n          <FieldError id={errorId} className={s.ErrorMessage}>\n            {errorMessage}\n          </FieldError>\n        )}\n      </div>\n    )\n  },\n)\n\nFloatingLabelInput.displayName = \"FloatingLabelInput\"\n"]}

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

@@ -0,0 +1,126 @@
+@layer components {.Root {
+  position: relative;
+  --field-error-padding-inline: 0;
+  --field-error-margin-top: 0.25rem;
+}.Root:has(: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, text);
+  transition: border-color var(--floating-input-transition-duration) ease-in-out;
+}.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-invalid] {
+  --input-state-color: var(--floating-input-border-color-invalid);
+}/* Label container - positioned absolutely */.TypeableLabel {
+  cursor: var(--cursor, text);
+  position: absolute;
+  inset: 0;
+}/* Label background overlay - covers input when not focused */.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, text);
+  transform: translate(calc(-1 * var(--horizontal-padding)));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: calc(100% - var(--floating-input-gutter) * 2);
+}/* Focused state - label floats up */.FieldFootprint[data-focused] .TypeableLabel,
+.FieldFootprint[data-invalid] .TypeableLabel,
+.HasValue .TypeableLabel {
+  pointer-events: none;
+}.FieldFootprint[data-focused] .TypeableLabel::before,
+.FieldFootprint[data-invalid] .TypeableLabel::before,
+.HasValue .TypeableLabel::before {
+  display: none;
+}.FieldFootprint[data-focused] .LabelPositioner,
+.FieldFootprint[data-invalid] .LabelPositioner,
+.HasValue .LabelPositioner {
+  transform: translateY(-50%);
+}.FieldFootprint[data-focused] .LabelText,
+.FieldFootprint[data-invalid] .LabelText,
+.HasValue .LabelText {
+  transform: translate(-12px) scale(var(--floating-input-label-scale));
+  max-width: 133%;
+}/* Focus label color */.FieldFootprint[data-focused] .LabelText {
+  color: var(--floating-input-label-color-focus);
+}/* Invalid label color */.FieldFootprint[data-invalid] .LabelText {
+  color: var(--floating-input-label-color-invalid);
+}/* Input element */.Input {
+  background-color: transparent;
+  outline: none;
+  border: 0;
+  font: inherit;
+  width: 100%;
+  padding: 0;
+  color: inherit;
+  position: relative;
+  z-index: 1;
+}.Input::-moz-placeholder {
+  opacity: 0;
+}.Input::placeholder {
+  opacity: 0;
+}.Input:disabled {
+  cursor: not-allowed;
+}/* Clear button */.ClearButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--color-text-tertiary);
+  font-size: 1rem;
+  position: relative;
+  z-index: 1;
+  transition: color 150ms ease;
+}.ClearButton:hover {
+  color: var(--color-text);
+}/* 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/FloatingLabelInput/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/FloatingLabelInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAgC,MAAM,sBAAsB,CAAA","sourcesContent":["export { FloatingLabelInput, type FloatingLabelInputProps } from \"./FloatingLabelInput\"\n"]}

package/dist/es/components/Icon/aliases.js

@@ -0,0 +1,25 @@
+// Icon aliases for backward compatibility
+// Maps old icon names to new icon names
+export { default as ArrowRight } from "./svg/ArrowRightSm";
+export { default as ArrowUpRight } from "./svg/ArrowTopRightSm";
+export { default as ArrowUp } from "./svg/ArrowUpSm";
+export { default as CalendarAlt } from "./svg/Calendar";
+export { default as Check } from "./svg/CheckMd";
+export { default as ChevronDownVector } from "./svg/ChevronDown";
+export { default as ChevronLeft } from "./svg/ChevronLeftMd";
+export { default as ChevronRight } from "./svg/ChevronRightMd";
+export { default as DropdownVector } from "./svg/Dropdown";
+export { default as Documentation } from "./svg/FileDocument";
+export { default as Delete } from "./svg/RemoveTrash";
+export { default as Clear } from "./svg/X";
+export { default as Explore } from "./svg/AllProductsExplore";
+export { default as Workspace } from "./svg/BuildingWorkspace";
+export { default as Mail } from "./svg/Email";
+export { default as Functions } from "./svg/Function";
+export { default as History } from "./svg/HistoryOn";
+export { default as Info } from "./svg/InfoCircle";
+export { default as Wave } from "./svg/PhoneWaves";
+export { default as Trash } from "./svg/RemoveTrash";
+// Note: Beta icon is not available in new set - uses need to be replaced manually
+// IconName is a TypeScript type, not an actual icon export
+//# sourceMappingURL=aliases.js.map

package/dist/es/components/Icon/aliases.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aliases.js","sourceRoot":"","sources":["../../../../src/components/Icon/aliases.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,wCAAwC;AAExC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAC7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAE1C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEpD,kFAAkF;AAClF,2DAA2D","sourcesContent":["// Icon aliases for backward compatibility\n// Maps old icon names to new icon names\n\nexport { default as ArrowRight } from \"./svg/ArrowRightSm\"\nexport { default as ArrowUpRight } from \"./svg/ArrowTopRightSm\"\nexport { default as ArrowUp } from \"./svg/ArrowUpSm\"\nexport { default as CalendarAlt } from \"./svg/Calendar\"\nexport { default as Check } from \"./svg/CheckMd\"\nexport { default as ChevronDownVector } from \"./svg/ChevronDown\"\nexport { default as ChevronLeft } from \"./svg/ChevronLeftMd\"\nexport { default as ChevronRight } from \"./svg/ChevronRightMd\"\nexport { default as DropdownVector } from \"./svg/Dropdown\"\nexport { default as Documentation } from \"./svg/FileDocument\"\nexport { default as Delete } from \"./svg/RemoveTrash\"\nexport { default as Clear } from \"./svg/X\"\n\nexport { default as Explore } from \"./svg/AllProductsExplore\"\nexport { default as Workspace } from \"./svg/BuildingWorkspace\"\nexport { default as Mail } from \"./svg/Email\"\nexport { default as Functions } from \"./svg/Function\"\nexport { default as History } from \"./svg/HistoryOn\"\nexport { default as Info } from \"./svg/InfoCircle\"\nexport { default as Wave } from \"./svg/PhoneWaves\"\nexport { default as Trash } from \"./svg/RemoveTrash\"\n\n// Note: Beta icon is not available in new set - uses need to be replaced manually\n// IconName is a TypeScript type, not an actual icon export\n"]}