@optigrit/optigrit-ui 0.0.10 → 0.0.11

package/dist/{chunk-62RFRYVU.js → chunk-CGY2R33R.js}

@@ -229,15 +229,15 @@ var Input = forwardRef((props, ref) => {
         "--bg-color": bgColor,
         "--text-color": textColor,
         "--placeholder-color": colorMix(textColor, 80),
-        "--border-color": colorMix(borderColor, 50),
-        "--border-color-hover": colorMix(borderColor, 100),
+        "--border-color": colorMix(borderColor, 10),
+        "--border-color-hover": colorMix(primaryColor, 40),
         "--light-primary-color": colorMix(primaryColor, 50),
         "--primary-color": colorMix(primaryColor, 100),
         width: fullWidth === void 0 || fullWidth ? "100%" : "auto",
         ...inputContainerProps?.style
       },
       className: cn(
-        "flex items-center gap-1 border rounded-md h-[44px] p-1 transition-all duration-200 relative bg-[var(--bg-color)]",
+        "flex items-center gap-1 border rounded-xl h-[44px] p-1 transition-all duration-200 relative bg-[var(--bg-color)]",
         isFocus ? "ring-2 ring-[var(--light-primary-color)] border-[var(--primary-color)]" : "border-[var(--border-color)] hover:border-[var(--border-color-hover)]",
         inputContainerProps?.className
       ),
@@ -246,8 +246,11 @@ var Input = forwardRef((props, ref) => {
           "div",
           {
             id: "label",
-            className: "absolute bg-[var(--bg-color)] text-[var(--text-color)] px-1 rounded-sm transition-all duration-200 select-none cursor-text",
             onClick: () => container.current?.querySelector("input")?.focus(),
+            className: cn(
+              "absolute bg-[var(--bg-color)] px-1 rounded-sm transition-all duration-200 select-none cursor-text",
+              isFocus || !label || labelShrink === void 0 || labelShrink ? "text-[var(--text-color)]" : "text-[var(--placeholder-color)]"
+            ),
             children: label
           }
         ),
@@ -260,7 +263,7 @@ var Input = forwardRef((props, ref) => {
             ref,
             required: required === void 0 || required,
             className: cn(
-              "w-full h-full border-none outline-none rounded-sm transition-all duration-200 placeholder-[var(--placeholder-color)] text-[var(--text-color)] [&:-webkit-autofill]:[-webkit-text-fill-color:var(--text-color)] bg-[var(--bg-color)]",
+              "text-sm w-full h-full border-none outline-none rounded-sm transition-all duration-200 placeholder-[var(--placeholder-color)] text-[var(--text-color)] [&:-webkit-autofill]:[-webkit-text-fill-color:var(--text-color)] bg-[var(--bg-color)]",
               isFocus || !label || labelShrink === void 0 || labelShrink ? "" : "placeholder:opacity-0",
               inputProps.className
             ),

package/dist/components/index.d.ts

@@ -44,6 +44,7 @@ declare function Tooltip(props: TooltipProps): react_jsx_runtime.JSX.Element;
 
 type InputFieldProps = {
     value?: string;
+    labelBehavior?: 'fixed' | 'float';
     errorColor?: string;
     validateValue?: (value: string) => string | null;
     onChangeValue?: (value: string) => void;

package/dist/components/index.js

@@ -6,7 +6,7 @@ import {
   ShowWithAnimation,
   Spinner,
   cn
-} from "../chunk-62RFRYVU.js";
+} from "../chunk-CGY2R33R.js";
 import "../chunk-MCQS3QNN.js";
 import {
   useKeyboardShortcuts
@@ -300,6 +300,7 @@ function InputField(props) {
     onChangeValue,
     containerProps = {},
     errorColor = "rgb(240, 70, 70)",
+    labelBehavior = "fixed",
     ...inputProps
   } = props;
   const initRef = useRef4({ isUserTyped: false });
@@ -334,18 +335,22 @@ function InputField(props) {
     }
   }, [props.value]);
   return /* @__PURE__ */ jsxs4("div", { ...containerProps, children: [
-    /* @__PURE__ */ jsx4(
-      Input,
-      {
-        ...inputProps,
-        textColor: error ? errorColor : inputProps.textColor,
-        borderColor: error ? errorColor : inputProps.borderColor,
-        primaryColor: error ? errorColor : inputProps.primaryColor,
-        onChange: handleOnChange,
-        onFocus: handleOnFocus,
-        onBlur: handleOnBlur
-      }
-    ),
+    /* @__PURE__ */ jsxs4("label", { children: [
+      /* @__PURE__ */ jsx4(Show, { when: labelBehavior === "fixed", children: /* @__PURE__ */ jsx4("span", { className: "text-[10px] text-text-secondary/60 uppercase font-medium", children: props.label }) }),
+      /* @__PURE__ */ jsx4(
+        Input,
+        {
+          ...inputProps,
+          label: labelBehavior === "float" ? inputProps.label : void 0,
+          textColor: error ? errorColor : inputProps.textColor,
+          borderColor: error ? errorColor : inputProps.borderColor,
+          primaryColor: error ? errorColor : inputProps.primaryColor,
+          onChange: handleOnChange,
+          onFocus: handleOnFocus,
+          onBlur: handleOnBlur
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx4("p", { className: "pl-1 text-xs", style: { color: errorColor, display: error ? "block" : "none" }, children: error })
   ] });
 }
@@ -1267,7 +1272,7 @@ function Dialog(props) {
             role: "dialog",
             "aria-modal": "true",
             className: cn(
-              "relative z-10 w-full mx-4 bg-bg rounded-lg shadow-lg overflow-hidden",
+              "relative z-10 w-full mx-4 bg-bg-secondary rounded-2xl shadow-lg overflow-hidden max-h-[100vh] overflow-y-auto",
               sizeClasses2[size],
               className
             ),
@@ -1287,8 +1292,8 @@ function Dialog(props) {
 import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
 function DialogHeader(props) {
   const { title, children, ...rest } = props;
-  return /* @__PURE__ */ jsxs11("div", { ...rest, className: "px-6 py-4 border-b border-border", children: [
-    /* @__PURE__ */ jsx23(Show, { when: !!title, children: /* @__PURE__ */ jsx23("h1", { className: "text-lg font-medium", children: title }) }),
+  return /* @__PURE__ */ jsxs11("div", { ...rest, className: cn("p-4 sticky top-0 z-[20] backdrop-blur-sm", props.className), children: [
+    /* @__PURE__ */ jsx23(Show, { when: !!title, children: /* @__PURE__ */ jsx23("h1", { className: "text-lg font-bold", children: title }) }),
     children
   ] });
 }
@@ -1300,7 +1305,7 @@ function DialogFooter(props) {
     "div",
     {
       ...props,
-      className: cn("px-6 py-4 border-t flex items-center justify-end border-border", props.className)
+      className: cn("p-4 flex items-center justify-end sticky bottom-0 z-[20] backdrop-blur-sm", props.className)
     }
   );
 }
@@ -1312,7 +1317,7 @@ function DialogContent(props) {
     "div",
     {
       ...props,
-      className: cn("p-6", props.className)
+      className: cn("px-4 z-[10]", props.className)
     }
   );
 }

package/dist/core/index.js

@@ -5,7 +5,7 @@ import {
   Show,
   ShowWithAnimation,
   Spinner
-} from "../chunk-62RFRYVU.js";
+} from "../chunk-CGY2R33R.js";
 import "../chunk-MCQS3QNN.js";
 import "../chunk-U65NGM6F.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optigrit/optigrit-ui",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "UI components library for optigrit apps",
   "license": "ISC",
   "author": "",
@@ -54,7 +54,7 @@
     "lint": "tsc",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "dev:yalc": "chokidar \"src/**/*\" -c \"npm run build && yalc push\" --polling"
+    "dev:yalc": "chokidar \"src/**/*\" --debounce 2000 -c \"npm run build && yalc push\" --polling"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.1.2",