shadcn-ui-react 0.6.8 → 0.7.0

package/dist/index.cjs

@@ -7475,30 +7475,31 @@ var import_react34 = __toESM(require("react"), 1);
 var import_use_debounce = require("use-debounce");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function SearchInput({
-  value,
+  value = "",
   placeholder,
   className,
   classNameDefault,
   debounceTime = 750,
   onSearch
 }) {
-  const [searchTerm, setSearchTerm] = import_react34.default.useState(value);
-  const [debouncedValue] = (0, import_use_debounce.useDebounce)(searchTerm, debounceTime);
-  const handleSettingSearchParams = (0, import_react34.useCallback)((newSearchValue) => {
-    onSearch(newSearchValue);
-  }, []);
+  const [searchTerm, setSearchTerm] = import_react34.default.useState(value != null ? value : "");
+  const debouncedSearch = (0, import_use_debounce.useDebouncedCallback)((nextValue) => {
+    onSearch(nextValue);
+  }, debounceTime);
   import_react34.default.useEffect(() => {
-    handleSettingSearchParams(debouncedValue);
-  }, [debouncedValue, handleSettingSearchParams]);
-  import_react34.default.useEffect(() => {
-    setSearchTerm(value);
+    setSearchTerm(value != null ? value : "");
   }, [value]);
+  const handleChange = (event) => {
+    const nextValue = event.target.value;
+    setSearchTerm(nextValue);
+    debouncedSearch(nextValue);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     Input,
     {
-      placeholder: placeholder || `Search...`,
+      placeholder: placeholder || "Search...",
       value: searchTerm,
-      onChange: (event) => setSearchTerm(event.target.value),
+      onChange: handleChange,
       className: cn("w-full md:max-w-sm", className),
       classNameDefault
     }
@@ -9219,7 +9220,7 @@ function UiSelect({
             className,
             label ? "mt-1" : ""
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectValue, { placeholder })
+          children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectValue, { placeholder, className: "placeholder:text-muted-foreground" })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectContent, { className: cn(contentBase, contentClassName), children: children ? children : items ? items == null ? void 0 : items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
@@ -9292,25 +9293,31 @@ function UiInput(_a) {
       Label3,
       {
         ref,
-        className: cn(errorMessage && "text-destructive", labelClassName),
+        className: cn(
+          "mb-1 inline-flex items-start gap-0.5 text-sm font-medium",
+          errorMessage && "text-destructive",
+          labelClassName
+        ),
         htmlFor: formItemId,
         children: [
-          label,
-          requiredLabel && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { children: label }),
+          requiredLabel ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             import_lucide_react8.Asterisk,
             {
+              "aria-hidden": "true",
               className: cn(
-                "ml-px h-3 w-3 text-red-500",
+                "mt-0.5 h-3 w-3 shrink-0 text-red-500",
                 requiredLabelClassName
               )
             }
-          )
+          ) : null
         ]
       }
     ) : null,
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       Input,
       __spreadProps(__spreadValues({}, inputProps), {
+        id: formItemId,
         onChange,
         placeholder,
         className: cn(
@@ -9321,7 +9328,7 @@ function UiInput(_a) {
         classNameDefault
       })
     ),
-    errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: "text-sm text-destructive mt-1 ", children: errorMessage }) : null
+    errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: "mt-1 text-sm text-destructive", children: errorMessage }) : null
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.js

@@ -7256,34 +7256,35 @@ var ScrollBar = React52.forwardRef((_a, ref) => {
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // src/components/search-input.tsx
-import React53, { useCallback as useCallback4 } from "react";
-import { useDebounce } from "use-debounce";
+import React53 from "react";
+import { useDebouncedCallback } from "use-debounce";
 import { jsx as jsx31 } from "react/jsx-runtime";
 function SearchInput({
-  value,
+  value = "",
   placeholder,
   className,
   classNameDefault,
   debounceTime = 750,
   onSearch
 }) {
-  const [searchTerm, setSearchTerm] = React53.useState(value);
-  const [debouncedValue] = useDebounce(searchTerm, debounceTime);
-  const handleSettingSearchParams = useCallback4((newSearchValue) => {
-    onSearch(newSearchValue);
-  }, []);
+  const [searchTerm, setSearchTerm] = React53.useState(value != null ? value : "");
+  const debouncedSearch = useDebouncedCallback((nextValue) => {
+    onSearch(nextValue);
+  }, debounceTime);
   React53.useEffect(() => {
-    handleSettingSearchParams(debouncedValue);
-  }, [debouncedValue, handleSettingSearchParams]);
-  React53.useEffect(() => {
-    setSearchTerm(value);
+    setSearchTerm(value != null ? value : "");
   }, [value]);
+  const handleChange = (event) => {
+    const nextValue = event.target.value;
+    setSearchTerm(nextValue);
+    debouncedSearch(nextValue);
+  };
   return /* @__PURE__ */ jsx31(
     Input,
     {
-      placeholder: placeholder || `Search...`,
+      placeholder: placeholder || "Search...",
       value: searchTerm,
-      onChange: (event) => setSearchTerm(event.target.value),
+      onChange: handleChange,
       className: cn("w-full md:max-w-sm", className),
       classNameDefault
     }
@@ -9017,7 +9018,7 @@ function UiSelect({
             className,
             label ? "mt-1" : ""
           ),
-          children: /* @__PURE__ */ jsx55(SelectValue, { placeholder })
+          children: /* @__PURE__ */ jsx55(SelectValue, { placeholder, className: "placeholder:text-muted-foreground" })
         }
       ),
       /* @__PURE__ */ jsx55(SelectContent, { className: cn(contentBase, contentClassName), children: children ? children : items ? items == null ? void 0 : items.map((item) => /* @__PURE__ */ jsx55(
@@ -9090,25 +9091,31 @@ function UiInput(_a) {
       Label3,
       {
         ref,
-        className: cn(errorMessage && "text-destructive", labelClassName),
+        className: cn(
+          "mb-1 inline-flex items-start gap-0.5 text-sm font-medium",
+          errorMessage && "text-destructive",
+          labelClassName
+        ),
         htmlFor: formItemId,
         children: [
-          label,
-          requiredLabel && /* @__PURE__ */ jsx56(
+          /* @__PURE__ */ jsx56("span", { children: label }),
+          requiredLabel ? /* @__PURE__ */ jsx56(
             Asterisk2,
             {
+              "aria-hidden": "true",
               className: cn(
-                "ml-px h-3 w-3 text-red-500",
+                "mt-0.5 h-3 w-3 shrink-0 text-red-500",
                 requiredLabelClassName
               )
             }
-          )
+          ) : null
         ]
       }
     ) : null,
     /* @__PURE__ */ jsx56(
       Input,
       __spreadProps(__spreadValues({}, inputProps), {
+        id: formItemId,
         onChange,
         placeholder,
         className: cn(
@@ -9119,7 +9126,7 @@ function UiInput(_a) {
         classNameDefault
       })
     ),
-    errorMessage ? /* @__PURE__ */ jsx56("p", { className: "text-sm text-destructive mt-1 ", children: errorMessage }) : null
+    errorMessage ? /* @__PURE__ */ jsx56("p", { className: "mt-1 text-sm text-destructive", children: errorMessage }) : null
   ] });
 }
 export {

package/dist/style.css

@@ -444,6 +444,9 @@
   .-mt-4 {
     margin-top: calc(var(--spacing) * -4);
   }
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * 0.5);
+  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -802,6 +805,9 @@
   .items-end {
     align-items: flex-end;
   }
+  .items-start {
+    align-items: flex-start;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -814,6 +820,9 @@
   .gap-0 {
     gap: calc(var(--spacing) * 0);
   }
+  .gap-0\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui-react",
-  "version": "0.6.8",
+  "version": "0.7.0",
   "private": false,
   "author": "Bleker Cordova <bleker@gliyen.com>",
   "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",