From 7f2bf4db7429bf90ed0073f2a3fe52af403477bd Mon Sep 17 00:00:00 2001
From: JExcellence | Justin <justin.eiletz@outlook.com>
Date: Wed, 5 Nov 2025 12:39:10 +0100
Subject: [PATCH] fix(ui,docs): normalize `isOpen` handling + fix Input
 placeholder/label; tidy quotes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Normalize `isOpen` prop behavior across interactive components and docs/examples
  (consistent controlled/uncontrolled behavior, SSR-safe defaults).
  Touched: Dialog.tsx, DialogExample.tsx, dialog.mdx,
           DropdownWrapper.tsx, DropdownWrapperExample.tsx, dropdownWrapper.mdx,
           ContextMenu.tsx, Select.tsx, Kbar.tsx, ComponentsCheckPage.tsx

- Input: resolve placeholder/label overlap + ID wiring
  - Correct label/placeholder interaction and focus/blur states
  - Ensure `htmlFor` ↔ `id` pairing; improve a11y (`aria-*`)
  - Styling tweaks in Input.module.scss; updated examples
  Touched: Input.module.scss, InputExamples.tsx, TextareaExamples.tsx

- Misc cleanups
  - Quote consistency (`'` → `"` where needed), minor TS/prop nits
  - Example + demo updates (Countdown/Count/TypeFx, Date* pickers, CTA, Button, etc.)
  Touched: Accordion.tsx, Button.tsx, ChartHeader.tsx, CountdownFxExample.tsx,
           CountFxExample.tsx, Cta.tsx, DateInput.tsx, DatePicker.tsx,
           DatePickerExamples.tsx, DateRangeInput.tsx, emojiPickerDropdown.mdx,
           EmojiPickerDropdownExample.tsx, error.tsx, Select.tsx,
           ToastExample.tsx, TypeFxCustomExample.tsx

No breaking changes expected.
---
 .../src/components/ComponentsCheckPage.tsx    | 24 ++---
 apps/docs/src/app/error.tsx                   |  8 +-
 .../src/content/once-ui/components/dialog.mdx | 12 +--
 .../once-ui/components/dropdownWrapper.mdx    | 10 +-
 .../components/emojiPickerDropdown.mdx        |  2 +-
 apps/docs/src/product/CountFxExample.tsx      | 39 ++++++--
 apps/docs/src/product/CountdownFxExample.tsx  | 28 ++++--
 apps/docs/src/product/Cta.tsx                 | 92 +++++++++++++++----
 apps/docs/src/product/DatePickerExamples.tsx  | 46 +++-------
 apps/docs/src/product/DialogExample.tsx       | 10 +-
 .../src/product/DropdownWrapperExample.tsx    | 12 +--
 .../product/EmojiPickerDropdownExample.tsx    |  2 +-
 apps/docs/src/product/InputExamples.tsx       | 26 +++---
 apps/docs/src/product/TextareaExamples.tsx    |  4 +-
 apps/docs/src/product/ToastExample.tsx        | 24 +++--
 apps/docs/src/product/TypeFxCustomExample.tsx | 11 ++-
 packages/core/src/components/Accordion.tsx    |  2 +-
 packages/core/src/components/Button.tsx       |  2 +-
 packages/core/src/components/ContextMenu.tsx  | 10 +-
 packages/core/src/components/DateInput.tsx    |  4 +-
 packages/core/src/components/DatePicker.tsx   | 10 +-
 .../core/src/components/DateRangeInput.tsx    |  2 +-
 packages/core/src/components/Dialog.tsx       | 26 +++---
 .../core/src/components/DropdownWrapper.tsx   |  6 +-
 .../core/src/components/Input.module.scss     | 12 +--
 packages/core/src/components/Select.tsx       |  2 +-
 .../core/src/modules/data/ChartHeader.tsx     |  4 +-
 packages/core/src/modules/navigation/Kbar.tsx | 24 ++---
 28 files changed, 263 insertions(+), 191 deletions(-)

diff --git a/apps/dev/src/components/ComponentsCheckPage.tsx b/apps/dev/src/components/ComponentsCheckPage.tsx
index 66ff728..bb8a797 100644
--- a/apps/dev/src/components/ComponentsCheckPage.tsx
+++ b/apps/dev/src/components/ComponentsCheckPage.tsx
@@ -49,7 +49,6 @@ import {
     TagInput,
     Avatar,
     Background,
-    Input,
     Card,
     Chip,
     Fade,
@@ -97,6 +96,7 @@ import {
     TypeFx,
     WeatherFx,
     CountdownFx,
+    Input,
 } from "@once-ui-system/core";
 
 interface ComponentCategory {
@@ -104,25 +104,12 @@ interface ComponentCategory {
     description: string;
     components: {
         name: string;
-        element: React.ReactNode;
+        element: React.ReactNode[] | React.ReactNode;
     }[];
 }
 
 export default function ComponentsCheck() {
     const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
-    const [menuSelections, setMenuSelections] = useState<Record<string, string>>({});
-    const [expandedComponents, setExpandedComponents] = useState<Set<string>>(new Set());
-
-    const toggleComponent = (componentName: string) => {
-        const newSet = new Set(expandedComponents);
-        if (newSet.has(componentName)) {
-            newSet.delete(componentName);
-        } else {
-            newSet.add(componentName);
-        }
-        setExpandedComponents(newSet);
-    };
-
     const categories: ComponentCategory[] = [
         {
             name: "Layout",
@@ -150,7 +137,11 @@ export default function ComponentsCheck() {
             components: [
                 { name: "Button", element: <Button>Click me</Button> },
                 { name: "IconButton", element: <IconButton icon="heart" /> },
-                { name: "Input", element: <Input id="input-test" placeholder="Enter text" /> },
+                { name: "Input", element: [
+                    <Input key={"input-1"} id="input-test" placeholder="label"/>,
+                    <Input key={"input-2"} id="input-test-2" placeholder="label" label="label test"/>,
+                    <Input key={"input-3"} id="input-test-3" label="label test"/>
+                ]},
                 { name: "Textarea", element: <Textarea id="textarea-test" placeholder="Enter text..." lines={3} /> },
                 { name: "Checkbox", element: <Checkbox label="Checkbox" /> },
                 { name: "Switch", element: <Switch isChecked={false} onToggle={() => console.log()} label="Toggle" /> },
@@ -365,6 +356,7 @@ export default function ComponentsCheck() {
                                                     padding="m"
                                                     cursor="pointer"
                                                     center
+                                                    gap="m"
                                                 >
                                                     {component.element}
                                                 </Column>
diff --git a/apps/docs/src/app/error.tsx b/apps/docs/src/app/error.tsx
index 84eebb7..2b4a982 100644
--- a/apps/docs/src/app/error.tsx
+++ b/apps/docs/src/app/error.tsx
@@ -1,6 +1,6 @@
-'use client';
+"use client";
 
-import { Column, Heading, Text, Button } from '@once-ui-system/core';
+import { Column, Heading, Text, Button } from "@once-ui-system/core";
 
 export default function Error({
   error,
@@ -11,13 +11,13 @@ export default function Error({
 }) {
   return (
     <Column fill center>
-      <Column maxWidth="s" gap="24" padding="32" align="center" center >
+      <Column maxWidth="s" gap="24" padding="32" align="center" center>
         <Heading variant="display-strong-s">Dang! It&apos;s broken...</Heading>
         <Text wrap="balance" marginBottom="8">
           An error occurred while rendering this page. This is what happened:
         </Text>
         <Text wrap="balance" variant="code-default-s" onBackground="brand-medium" marginBottom="24">
-          {error.message || 'Unknown error'}
+          {error.message || "Unknown error"}
         </Text>
         <Button
           prefixIcon="refresh"
diff --git a/apps/docs/src/content/once-ui/components/dialog.mdx b/apps/docs/src/content/once-ui/components/dialog.mdx
index 19a3c6f..8357c20 100644
--- a/apps/docs/src/content/once-ui/components/dialog.mdx
+++ b/apps/docs/src/content/once-ui/components/dialog.mdx
@@ -31,7 +31,7 @@ return (
         Open Dialog
       </Button>
       <Dialog
-        isOpen={isOpen}
+        open={isOpen}
         onClose={() => setIsOpen(false)}
         title="Basic dialog"
         description="This is a simple dialog with a title and description."
@@ -76,7 +76,7 @@ return (
         Dialog with footer
       </Button>
       <Dialog
-        isOpen={isOpen}
+        open={isOpen}
         onClose={() => setIsOpen(false)}
         title="Dialog with footer"
         footer={
@@ -126,7 +126,7 @@ return (
       </Button>
       
       <Dialog
-        isOpen={isBaseOpen}
+        open={isBaseOpen}
         onClose={() => setIsBaseOpen(false)}
         title="Base dialog"
         base={isStackedOpen}
@@ -147,7 +147,7 @@ return (
       </Dialog>
       
       <Dialog
-        isOpen={isStackedOpen}
+        open={isStackedOpen}
         onClose={() => setIsStackedOpen(false)}
         title="Stacked dialog"
         stack
@@ -189,7 +189,7 @@ return (
         Customized dialog
       </Button>
       <Dialog
-        isOpen={isOpen}
+        open={isOpen}
         onClose={() => setIsOpen(false)}
         title="Customized dialog"
         maxWidth={48}
@@ -231,7 +231,7 @@ The Dialog component follows accessibility best practices:
 
 <PropsTable
   content={[
-    ["isOpen", "boolean", "false"],
+    ["open", "boolean", "false"],
     ["onClose", "() => void"],
     ["title", "ReactNode | string"],
     ["description", "ReactNode"],
diff --git a/apps/docs/src/content/once-ui/components/dropdownWrapper.mdx b/apps/docs/src/content/once-ui/components/dropdownWrapper.mdx
index 1fbca31..bcd6a14 100644
--- a/apps/docs/src/content/once-ui/components/dropdownWrapper.mdx
+++ b/apps/docs/src/content/once-ui/components/dropdownWrapper.mdx
@@ -43,7 +43,7 @@ const handleSelect = (value: string) => {
 
 return (
     <DropdownWrapper
-      isOpen={isOpen}
+      open={isOpen}
       onOpenChange={setIsOpen}
       trigger={
         <Button 
@@ -95,7 +95,7 @@ Control the placement of the dropdown relative to its trigger element.
 return (
   <Row horizontal="center">
     <DropdownWrapper
-      isOpen={isOpen}
+      open={isOpen}
       onOpenChange={setIsOpen}
       placement="top"
       trigger={
@@ -169,7 +169,7 @@ const filteredOptions = options.filter(option =>
 
 return (
     <DropdownWrapper
-      isOpen={isOpen}
+      open={isOpen}
       onOpenChange={setIsOpen}
       minHeight={200}
       trigger={
@@ -228,8 +228,8 @@ return (
   content={[
     ["trigger", "ReactNode"],
     ["dropdown", "ReactNode"],
-    ["isOpen", "boolean", "false"],
-    ["onOpenChange", "(isOpen: boolean) => void"],
+    ["open", "boolean", "false"],
+    ["onOpenChange", "(open: boolean) => void"],
     ["placement", "Placement", "bottom-start"],
     ["minWidth", "number"],
     ["maxWidth", "number"],
diff --git a/apps/docs/src/content/once-ui/components/emojiPickerDropdown.mdx b/apps/docs/src/content/once-ui/components/emojiPickerDropdown.mdx
index 224b15d..033eff7 100644
--- a/apps/docs/src/content/once-ui/components/emojiPickerDropdown.mdx
+++ b/apps/docs/src/content/once-ui/components/emojiPickerDropdown.mdx
@@ -204,7 +204,7 @@ const [selectedEmoji, setSelectedEmoji] = useState("");
   <EmojiPickerDropdown
     trigger={<Button label="Controlled Dropdown" />}
     onSelect={(emoji) => setSelectedEmoji(emoji)}
-    isOpen={isOpen}
+    open={isOpen}
     onOpenChange={setIsOpen}
   />
   <Button 
diff --git a/apps/docs/src/product/CountFxExample.tsx b/apps/docs/src/product/CountFxExample.tsx
index cfdc6fa..6e0ffdb 100644
--- a/apps/docs/src/product/CountFxExample.tsx
+++ b/apps/docs/src/product/CountFxExample.tsx
@@ -1,11 +1,11 @@
-'use client';
+"use client";
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 import { Row, CountFx } from "@once-ui-system/core";
 
 export const CountFxExample = () => {
   const [value, setValue] = useState<number>(0);
-  
+
   useEffect(() => {
     // Start with 0 and animate to a random value between 1000 and 9999
     const targetValue = Math.floor(Math.random() * 9000) + 1000;
@@ -13,10 +13,35 @@ export const CountFxExample = () => {
   }, []);
 
   return (
-    <Row fillWidth m={{direction:"column"}} gap="32">
-      <Row fillWidth><CountFx variant="display-strong-m" value={value} speed={5000} effect="wheel" easing="ease-out" /></Row>
-      <Row fillWidth><CountFx variant="display-strong-m" value={value} speed={5000} effect="smooth" easing="ease-out" /></Row>
-      <Row fillWidth><CountFx variant="display-strong-m" separator="," value={value} speed={5000} effect="simple" easing="ease-out" /></Row>
+    <Row fillWidth m={{ direction: "column" }} gap="32">
+      <Row fillWidth>
+        <CountFx
+          variant="display-strong-m"
+          value={value}
+          speed={5000}
+          effect="wheel"
+          easing="ease-out"
+        />
+      </Row>
+      <Row fillWidth>
+        <CountFx
+          variant="display-strong-m"
+          value={value}
+          speed={5000}
+          effect="smooth"
+          easing="ease-out"
+        />
+      </Row>
+      <Row fillWidth>
+        <CountFx
+          variant="display-strong-m"
+          separator=","
+          value={value}
+          speed={5000}
+          effect="simple"
+          easing="ease-out"
+        />
+      </Row>
     </Row>
   );
 };
diff --git a/apps/docs/src/product/CountdownFxExample.tsx b/apps/docs/src/product/CountdownFxExample.tsx
index 6d2f50d..a79875a 100644
--- a/apps/docs/src/product/CountdownFxExample.tsx
+++ b/apps/docs/src/product/CountdownFxExample.tsx
@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import { Column, Row, Text, CountdownFx, Heading } from "@once-ui-system/core";
 
@@ -18,7 +18,9 @@ export const CountdownFxFormats = () => {
   return (
     <Column gap="24" fill>
       <Column gap="8">
-        <Text variant="label-default-s" onBackground="neutral-weak">HH:MM:SS</Text>
+        <Text variant="label-default-s" onBackground="neutral-weak">
+          HH:MM:SS
+        </Text>
         <CountdownFx
           targetDate={new Date(Date.now() + 5 * 60 * 60 * 1000)}
           variant="heading-strong-l"
@@ -26,7 +28,9 @@ export const CountdownFxFormats = () => {
         />
       </Column>
       <Column gap="8">
-        <Text variant="label-default-s" onBackground="neutral-weak">MM:SS</Text>
+        <Text variant="label-default-s" onBackground="neutral-weak">
+          MM:SS
+        </Text>
         <CountdownFx
           targetDate={new Date(Date.now() + 10 * 60 * 1000)}
           variant="heading-strong-l"
@@ -34,7 +38,9 @@ export const CountdownFxFormats = () => {
         />
       </Column>
       <Column gap="8">
-        <Text variant="label-default-s" onBackground="neutral-weak">DD:HH:MM:SS</Text>
+        <Text variant="label-default-s" onBackground="neutral-weak">
+          DD:HH:MM:SS
+        </Text>
         <CountdownFx
           targetDate={new Date(Date.now() + 3 * 24 * 60 * 60 * 1000)}
           variant="heading-strong-l"
@@ -49,7 +55,9 @@ export const CountdownFxEffects = () => {
   return (
     <Column gap="24" fill>
       <Column gap="8">
-        <Text variant="label-default-s" onBackground="neutral-weak">Wheel Effect</Text>
+        <Text variant="label-default-s" onBackground="neutral-weak">
+          Wheel Effect
+        </Text>
         <CountdownFx
           targetDate={new Date(Date.now() + 2 * 60 * 60 * 1000)}
           variant="display-strong-m"
@@ -57,7 +65,9 @@ export const CountdownFxEffects = () => {
         />
       </Column>
       <Column gap="8">
-        <Text variant="label-default-s" onBackground="neutral-weak">Smooth Effect</Text>
+        <Text variant="label-default-s" onBackground="neutral-weak">
+          Smooth Effect
+        </Text>
         <CountdownFx
           targetDate={new Date(Date.now() + 2 * 60 * 60 * 1000)}
           variant="display-strong-m"
@@ -65,7 +75,9 @@ export const CountdownFxEffects = () => {
         />
       </Column>
       <Column gap="8">
-        <Text variant="label-default-s" onBackground="neutral-weak">Simple Effect</Text>
+        <Text variant="label-default-s" onBackground="neutral-weak">
+          Simple Effect
+        </Text>
         <CountdownFx
           targetDate={new Date(Date.now() + 2 * 60 * 60 * 1000)}
           variant="display-strong-m"
@@ -104,7 +116,7 @@ export const CountdownFxLaunch = () => {
 
 export const CountdownFxOnComplete = () => {
   const handleComplete = () => {
-    console.log('Countdown complete!');
+    console.log("Countdown complete!");
   };
 
   return (
diff --git a/apps/docs/src/product/Cta.tsx b/apps/docs/src/product/Cta.tsx
index 3b67e8c..fcbfa63 100644
--- a/apps/docs/src/product/Cta.tsx
+++ b/apps/docs/src/product/Cta.tsx
@@ -3,8 +3,18 @@ import { Row, Button, Mask, Particle, Column, TypeFx, Background } from "@once-u
 export const Cta = () => {
   return (
     <Row fillWidth horizontal="center">
-      <Row flex={1} border="neutral-alpha-medium" radius="full" minWidth={4} l={{hide: true}}/>
-      <Column maxWidth="xl" height="m" center paddingX="l" gap="24" s={{direction: "column"}} borderLeft="neutral-alpha-medium" borderRight="neutral-alpha-medium" overflow="hidden">
+      <Row flex={1} border="neutral-alpha-medium" radius="full" minWidth={4} l={{ hide: true }} />
+      <Column
+        maxWidth="xl"
+        height="m"
+        center
+        paddingX="l"
+        gap="24"
+        s={{ direction: "column" }}
+        borderLeft="neutral-alpha-medium"
+        borderRight="neutral-alpha-medium"
+        overflow="hidden"
+      >
         <Background
           position="absolute"
           fill
@@ -12,9 +22,17 @@ export const Cta = () => {
             display: true,
             color: "neutral-alpha-weak",
             angle: -45,
-            size: "4"
-          }}/>
-        <Row overflow="hidden" position="absolute" minWidth={80} minHeight={28} radius="full" border="neutral-alpha-medium">
+            size: "4",
+          }}
+        />
+        <Row
+          overflow="hidden"
+          position="absolute"
+          minWidth={80}
+          minHeight={28}
+          radius="full"
+          border="neutral-alpha-medium"
+        >
           <Background
             fill
             position="absolute"
@@ -36,7 +54,7 @@ export const Cta = () => {
             position="absolute"
             bottom="0"
             left="0"
-            style={{filter: "blur(1rem)", transform: "scale(1.1)"}}
+            style={{ filter: "blur(1rem)", transform: "scale(1.1)" }}
             gradient={{
               display: true,
               x: 50,
@@ -46,17 +64,46 @@ export const Cta = () => {
               colorStart: "brand-on-background-strong",
             }}
           />
-          </Row>
-          <Row overflow="hidden" position="absolute" minWidth={58} minHeight={28} radius="full" border="neutral-alpha-medium"/>
-          <Row overflow="hidden" position="absolute" minWidth={42} minHeight={28} radius="full" border="neutral-alpha-medium"/>
-          <Row overflow="hidden" position="absolute" minWidth={28} minHeight={28} radius="full" border="neutral-alpha-medium">
-          <Mask fill
-            position="absolute"
-            x={50}
-            y={50}
-            radius={25}
-            >
-            <Particle style={{transform: "scale(1.1)"}} opacity={70} position="absolute" top="0" left="0" fill interactive speed={1.5} density={100} size="2" intensity={20} mode="attract"/>
+        </Row>
+        <Row
+          overflow="hidden"
+          position="absolute"
+          minWidth={58}
+          minHeight={28}
+          radius="full"
+          border="neutral-alpha-medium"
+        />
+        <Row
+          overflow="hidden"
+          position="absolute"
+          minWidth={42}
+          minHeight={28}
+          radius="full"
+          border="neutral-alpha-medium"
+        />
+        <Row
+          overflow="hidden"
+          position="absolute"
+          minWidth={28}
+          minHeight={28}
+          radius="full"
+          border="neutral-alpha-medium"
+        >
+          <Mask fill position="absolute" x={50} y={50} radius={25}>
+            <Particle
+              style={{ transform: "scale(1.1)" }}
+              opacity={70}
+              position="absolute"
+              top="0"
+              left="0"
+              fill
+              interactive
+              speed={1.5}
+              density={100}
+              size="2"
+              intensity={20}
+              mode="attract"
+            />
           </Mask>
         </Row>
         <Column horizontal="center" gap="20">
@@ -67,12 +114,17 @@ export const Cta = () => {
             hold={2000}
             trigger="instant"
           />
-          <Button data-border="rounded" id="hero-cta-button" href="https://once-ui.com/auth?signup" arrowIcon>
+          <Button
+            data-border="rounded"
+            id="hero-cta-button"
+            href="https://once-ui.com/auth?signup"
+            arrowIcon
+          >
             Start now
           </Button>
         </Column>
       </Column>
-      <Row flex={1} border="neutral-alpha-medium" radius="full" minWidth={4} l={{hide: true}}/>
+      <Row flex={1} border="neutral-alpha-medium" radius="full" minWidth={4} l={{ hide: true }} />
     </Row>
   );
-};
\ No newline at end of file
+};
diff --git a/apps/docs/src/product/DatePickerExamples.tsx b/apps/docs/src/product/DatePickerExamples.tsx
index 59dac59..7fbafb0 100644
--- a/apps/docs/src/product/DatePickerExamples.tsx
+++ b/apps/docs/src/product/DatePickerExamples.tsx
@@ -7,72 +7,56 @@ import type { DateRange } from "@once-ui-system/core";
 // Basic DatePicker example with managed state
 export function BasicDatePickerExample() {
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
-  
+
   const handleDateChange = (newDate: Date) => {
     setSelectedDate(newDate);
   };
-  
-  return (
-    <DatePicker
-      value={selectedDate}
-      onChange={handleDateChange}
-    />
-  );
+
+  return <DatePicker value={selectedDate} onChange={handleDateChange} />;
 }
 
 // DatePicker with time picker example
 export function DateTimePickerExample() {
   const [dateTime, setDateTime] = useState<Date | undefined>(new Date());
-  
+
   const handleDateTimeChange = (newDateTime: Date) => {
     setDateTime(newDateTime);
   };
-  
-  return (
-    <DatePicker
-      value={dateTime}
-      onChange={handleDateTimeChange}
-      timePicker
-    />
-  );
+
+  return <DatePicker value={dateTime} onChange={handleDateTimeChange} timePicker />;
 }
 
 // DateRangePicker example
 export function DateRangePickerExample() {
   const [dateRange, setDateRange] = useState<DateRange>({
     startDate: new Date(),
-    endDate: new Date(new Date().setDate(new Date().getDate() + 7))
+    endDate: new Date(new Date().setDate(new Date().getDate() + 7)),
   });
-  
+
   const handleRangeChange = (range: DateRange) => {
     setDateRange(range);
   };
-  
-  return (
-    <DateRangePicker
-      value={dateRange}
-      onChange={handleRangeChange}
-    />
-  );
+
+  return <DateRangePicker value={dateRange} onChange={handleRangeChange} />;
 }
 
 // DateRangePicker with custom styling example
 export function DateRangePickerPresetsExample() {
   const [dateRange, setDateRange] = useState<DateRange>({
     startDate: new Date(),
-    endDate: new Date(new Date().setDate(new Date().getDate() + 7))
+    endDate: new Date(new Date().setDate(new Date().getDate() + 7)),
   });
-  
+
   const handleRangeChange = (range: DateRange) => {
     setDateRange(range);
   };
-  
+
   return (
     <DateRangePicker
       value={dateRange}
       onChange={handleRangeChange}
       size="l"
-      style={{ border: '1px solid #e0e0e0', borderRadius: '8px', padding: '16px' }}
+      style={{ border: "1px solid #e0e0e0", borderRadius: "8px", padding: "16px" }}
     />
   );
-}
\ No newline at end of file
+}
diff --git a/apps/docs/src/product/DialogExample.tsx b/apps/docs/src/product/DialogExample.tsx
index c660c0f..e329537 100644
--- a/apps/docs/src/product/DialogExample.tsx
+++ b/apps/docs/src/product/DialogExample.tsx
@@ -18,7 +18,7 @@ export function BasicDialog() {
     <>
       <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
       <Dialog
-        isOpen={isOpen}
+        open={isOpen}
         onClose={() => setIsOpen(false)}
         title="Basic dialog"
         description="This is a simple dialog with a title and description."
@@ -45,7 +45,7 @@ export function DialogWithFooter() {
     <>
       <Button variant="secondary" onClick={() => setIsOpen(true)}>Dialog with footer</Button>
       <Dialog
-        isOpen={isOpen}
+        open={isOpen}
         onClose={() => setIsOpen(false)}
         title="Dialog with footer"
         footer={
@@ -73,7 +73,7 @@ export function StackedDialogs() {
       <Button variant="secondary" onClick={() => setIsBaseOpen(true)}>Open stacked dialogs</Button>
       
       <Dialog
-        isOpen={isBaseOpen}
+        open={isBaseOpen}
         onClose={() => setIsBaseOpen(false)}
         title="Base dialog"
         base={isStackedOpen}
@@ -90,7 +90,7 @@ export function StackedDialogs() {
       </Dialog>
       
       <Dialog
-        isOpen={isStackedOpen}
+        open={isStackedOpen}
         onClose={() => setIsStackedOpen(false)}
         title="Stacked dialog"
         stack
@@ -114,7 +114,7 @@ export function CustomizedDialog() {
     <>
       <Button variant="danger" onClick={() => setIsOpen(true)}>Customized dialog</Button>
       <Dialog
-        isOpen={isOpen}
+        open={isOpen}
         onClose={() => setIsOpen(false)}
         title="Customized dialog"
         maxWidth={48}
diff --git a/apps/docs/src/product/DropdownWrapperExample.tsx b/apps/docs/src/product/DropdownWrapperExample.tsx
index 8355a0a..3096360 100644
--- a/apps/docs/src/product/DropdownWrapperExample.tsx
+++ b/apps/docs/src/product/DropdownWrapperExample.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import React, { useState } from "react";
-import { 
+import {
   Button,
   DropdownWrapper,
-  Flex, 
+  Flex,
   Text,
   Column,
   Option,
@@ -29,7 +29,7 @@ export function BasicDropdown() {
   
   return (
     <DropdownWrapper
-      isOpen={isOpen}
+      open={isOpen}
       onOpenChange={setIsOpen}
       trigger={
         <Button 
@@ -74,7 +74,7 @@ export function DropdownWithIcons() {
   
   return (
     <DropdownWrapper
-      isOpen={isOpen}
+      open={isOpen}
       onOpenChange={setIsOpen}
       trigger={
         <Button 
@@ -121,7 +121,7 @@ export function CustomPositionDropdown() {
   
   return (
     <DropdownWrapper
-      isOpen={isOpen}
+      open={isOpen}
       onOpenChange={setIsOpen}
       placement="right-start"
       trigger={
@@ -172,7 +172,7 @@ export function SearchableDropdown() {
   
   return (
     <DropdownWrapper
-      isOpen={isOpen}
+      open={isOpen}
       onOpenChange={setIsOpen}
       minHeight={200}
       trigger={
diff --git a/apps/docs/src/product/EmojiPickerDropdownExample.tsx b/apps/docs/src/product/EmojiPickerDropdownExample.tsx
index 4aa3e83..251a007 100644
--- a/apps/docs/src/product/EmojiPickerDropdownExample.tsx
+++ b/apps/docs/src/product/EmojiPickerDropdownExample.tsx
@@ -126,7 +126,7 @@ export function ControlledEmojiPickerDropdown() {
       <EmojiPickerDropdown
         trigger={<Button label="Controlled Dropdown" />}
         onSelect={(emoji) => setSelectedEmoji(emoji)}
-        isOpen={isOpen}
+        open={isOpen}
         onOpenChange={setIsOpen}
       />
       <Button 
diff --git a/apps/docs/src/product/InputExamples.tsx b/apps/docs/src/product/InputExamples.tsx
index 155de97..4c58f63 100644
--- a/apps/docs/src/product/InputExamples.tsx
+++ b/apps/docs/src/product/InputExamples.tsx
@@ -1,15 +1,15 @@
 "use client";
 
 import React, { useState } from "react";
-import { 
-  Input, 
-  Icon, 
-  IconButton, 
-  ColorInput, 
-  DateInput, 
-  NumberInput, 
-  OTPInput, 
-  PasswordInput, 
+import {
+  Input,
+  Icon,
+  IconButton,
+  ColorInput,
+  DateInput,
+  NumberInput,
+  OTPInput,
+  PasswordInput,
   TagInput,
   Flex,
   Text,
@@ -202,8 +202,8 @@ export function OTPInputExample({ autoFocus = true }: { autoFocus?: boolean }) {
 
 // Password Input example with toggle visibility
 export function PasswordInputExample() {
-  const [password, setPassword] = useState<string>('');
-  
+  const [password, setPassword] = useState<string>("");
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setPassword(e.target.value);
   };
@@ -220,8 +220,8 @@ export function PasswordInputExample() {
 
 // Tag Input example for adding multiple tags
 export function TagInputExample() {
-  const [tags, setTags] = useState<string[]>(['React', 'Next.js']);
-  
+  const [tags, setTags] = useState<string[]>(["React", "Next.js"]);
+
   const handleChange = (newTags: string[]) => {
     setTags(newTags);
   };
diff --git a/apps/docs/src/product/TextareaExamples.tsx b/apps/docs/src/product/TextareaExamples.tsx
index f4a10d2..cf3d1af 100644
--- a/apps/docs/src/product/TextareaExamples.tsx
+++ b/apps/docs/src/product/TextareaExamples.tsx
@@ -5,14 +5,14 @@ import { Textarea } from "@once-ui-system/core";
 
 // Textarea with validation
 export function ValidationTextareaExample() {
-  const [value, setValue] = useState('');
+  const [value, setValue] = useState("");
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setValue(e.target.value);
   };
 
   const validateContent = (value: React.ReactNode) => {
-    if (value && typeof value === 'string' && value.length < 20) {
+    if (value && typeof value === "string" && value.length < 20) {
       return "Please enter at least 20 characters";
     }
     return null;
diff --git a/apps/docs/src/product/ToastExample.tsx b/apps/docs/src/product/ToastExample.tsx
index ab9f6aa..6b52485 100644
--- a/apps/docs/src/product/ToastExample.tsx
+++ b/apps/docs/src/product/ToastExample.tsx
@@ -7,25 +7,29 @@ export function ToastExample() {
   const { addToast } = useToast();
   const [count, setCount] = useState(0);
 
-  const handleAddToast = (variant: 'success' | 'danger') => {
-    setCount(prev => prev + 1);
+  const handleAddToast = (variant: "success" | "danger") => {
+    setCount((prev) => prev + 1);
     addToast({
       variant,
-      message: `Toast #${count + 1} - ${variant === 'success' ? 'Success!' : 'Error!'}`,
-      action: variant === 'danger' ? (
-        <Button size="s" onClick={() => addToast({ variant: 'success', message: 'Retry successful!' })}>
-          Retry
-        </Button>
-      ) : undefined,
+      message: `Toast #${count + 1} - ${variant === "success" ? "Success!" : "Error!"}`,
+      action:
+        variant === "danger" ? (
+          <Button
+            size="s"
+            onClick={() => addToast({ variant: "success", message: "Retry successful!" })}
+          >
+            Retry
+          </Button>
+        ) : undefined,
     });
   };
 
   return (
     <Row gap="8">
-      <Button size="s" onClick={() => handleAddToast('success')}>
+      <Button size="s" onClick={() => handleAddToast("success")}>
         Show Success
       </Button>
-      <Button size="s" variant="secondary" onClick={() => handleAddToast('danger')}>
+      <Button size="s" variant="secondary" onClick={() => handleAddToast("danger")}>
         Show Error
       </Button>
     </Row>
diff --git a/apps/docs/src/product/TypeFxCustomExample.tsx b/apps/docs/src/product/TypeFxCustomExample.tsx
index 19e780e..113ac10 100644
--- a/apps/docs/src/product/TypeFxCustomExample.tsx
+++ b/apps/docs/src/product/TypeFxCustomExample.tsx
@@ -1,6 +1,6 @@
-'use client';
+"use client";
 
-import { useRef } from 'react';
+import { useRef } from "react";
 import { TypeFx, Button, Column } from "@once-ui-system/core";
 
 export const TypeFxCustomExample = () => {
@@ -17,7 +17,12 @@ export const TypeFxCustomExample = () => {
           triggerFnRef.current = fn;
         }}
       />
-      <Button onClick={() => triggerFnRef.current?.()} data-border="rounded" variant="secondary" size="s">
+      <Button
+        onClick={() => triggerFnRef.current?.()}
+        data-border="rounded"
+        variant="secondary"
+        size="s"
+      >
         Start typing
       </Button>
     </Column>
diff --git a/packages/core/src/components/Accordion.tsx b/packages/core/src/components/Accordion.tsx
index 02fc52b..870198a 100644
--- a/packages/core/src/components/Accordion.tsx
+++ b/packages/core/src/components/Accordion.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, forwardRef, useImperativeHandle, useEffect, useCallback } from "react";
-import { Flex, Icon, Text, Column, Grid, Row } from ".";
+import { Flex, Icon, Column, Grid, Row } from ".";
 import styles from "./Accordion.module.scss";
 import classNames from "classnames";
 
diff --git a/packages/core/src/components/Button.tsx b/packages/core/src/components/Button.tsx
index 402f7b0..bdfda97 100644
--- a/packages/core/src/components/Button.tsx
+++ b/packages/core/src/components/Button.tsx
@@ -6,7 +6,7 @@ import classNames from "classnames";
 
 import { Spinner, Icon, Arrow, Flex } from ".";
 import styles from "./Button.module.scss";
-import { IconName } from "../icons";
+import { IconName } from "@/icons";
 
 interface CommonProps {
   variant?: "primary" | "secondary" | "tertiary" | "danger";
diff --git a/packages/core/src/components/ContextMenu.tsx b/packages/core/src/components/ContextMenu.tsx
index 9b698ab..f31d2cf 100644
--- a/packages/core/src/components/ContextMenu.tsx
+++ b/packages/core/src/components/ContextMenu.tsx
@@ -27,8 +27,8 @@ export interface ContextMenuProps {
   className?: string;
   onSelect?: (value: string) => void;
   closeAfterClick?: boolean;
-  isOpen?: boolean;
-  onOpenChange?: (isOpen: boolean) => void;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
   selectedOption?: string;
 }
 
@@ -40,7 +40,7 @@ const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
       minHeight,
       onSelect,
       closeAfterClick = true,
-      isOpen,
+      open,
       onOpenChange,
       minWidth = 12,
       maxWidth,
@@ -61,8 +61,8 @@ const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
     const previouslyFocusedElement = useRef<Element | null>(null);
 
     // Control open state internally if not provided
-    const isControlled = isOpen !== undefined;
-    const isDropdownOpen = isControlled ? isOpen : internalIsOpen;
+    const isControlled = open !== undefined;
+    const isDropdownOpen = isControlled ? open : internalIsOpen;
 
     // Handle open state changes
     const handleOpenChange = useCallback(
diff --git a/packages/core/src/components/DateInput.tsx b/packages/core/src/components/DateInput.tsx
index 83ea272..7d9efda 100644
--- a/packages/core/src/components/DateInput.tsx
+++ b/packages/core/src/components/DateInput.tsx
@@ -102,12 +102,12 @@ export const DateInput: React.FC<DateInputProps> = ({
           minDate={minDate}
           maxDate={maxDate}
           autoFocus={true}
-          isOpen={isOpen}
+          open={isOpen}
         />
       }
       fillWidth
       minHeight={minHeight}
-      isOpen={isOpen}
+      open={isOpen}
       onOpenChange={setIsOpen}
       className={className}
       closeAfterClick={!timePicker}
diff --git a/packages/core/src/components/DatePicker.tsx b/packages/core/src/components/DatePicker.tsx
index ff8b1ae..a7c9181 100644
--- a/packages/core/src/components/DatePicker.tsx
+++ b/packages/core/src/components/DatePicker.tsx
@@ -46,7 +46,7 @@ export interface DatePickerProps extends Omit<React.ComponentProps<typeof Flex>,
   };
   onHover?: (date: Date | null) => void;
   autoFocus?: boolean;
-  isOpen?: boolean;
+  open?: boolean;
 }
 
 const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
@@ -71,7 +71,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       range,
       onHover,
       autoFocus = false,
-      isOpen,
+      open,
       ...rest
     },
     ref,
@@ -245,7 +245,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           return () => clearTimeout(timer);
         }
       }
-    }, [selectedDate, isTimeSelector, isReady, currentMonth, currentYear, isOpen]);
+    }, [selectedDate, isTimeSelector, isReady, currentMonth, currentYear, open]);
 
     const monthNames = [
       "January",
@@ -635,7 +635,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   <DropdownWrapper
                     isNested={isNested}
                     placement="bottom-start"
-                    isOpen={isMonthOpen}
+                    open={isMonthOpen}
                     dropdownId="month-dropdown"
                     onOpenChange={(open) => {
                       setIsMonthOpen(open);
@@ -709,7 +709,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                     optionsCount={generateYearOptions().length}
                     columns={generateYearOptions().length < 6 ? 1 : 6}
                     isNested={isNested}
-                    isOpen={isYearOpen}
+                    open={isYearOpen}
                     dropdownId="year-dropdown"
                     onOpenChange={(open) => {
                       setIsYearOpen(open);
diff --git a/packages/core/src/components/DateRangeInput.tsx b/packages/core/src/components/DateRangeInput.tsx
index cd0b917..a09c933 100644
--- a/packages/core/src/components/DateRangeInput.tsx
+++ b/packages/core/src/components/DateRangeInput.tsx
@@ -118,7 +118,7 @@ export const DateRangeInput: React.FC<DateRangeInputProps> = ({
       trigger={trigger}
       minHeight={minHeight}
       dropdown={dropdown}
-      isOpen={isOpen}
+      open={isOpen}
       closeAfterClick={false}
       disableTriggerClick={true}
       className={className}
diff --git a/packages/core/src/components/Dialog.tsx b/packages/core/src/components/Dialog.tsx
index 3f43ba9..1ab52ec 100644
--- a/packages/core/src/components/Dialog.tsx
+++ b/packages/core/src/components/Dialog.tsx
@@ -15,7 +15,7 @@ import { Column, Flex, Heading, IconButton, Text } from ".";
 import styles from "./Dialog.module.scss";
 
 interface DialogProps extends Omit<React.ComponentProps<typeof Flex>, "title"> {
-  isOpen: boolean;
+  open: boolean;
   onClose: () => void;
   title: ReactNode | string;
   description?: ReactNode;
@@ -55,7 +55,7 @@ export const DialogProvider: React.FC<{
 const Dialog: React.FC<DialogProps> = forwardRef<HTMLDivElement, DialogProps>(
   (
     {
-      isOpen,
+      open,
       onClose,
       title,
       description,
@@ -70,15 +70,15 @@ const Dialog: React.FC<DialogProps> = forwardRef<HTMLDivElement, DialogProps>(
     ref,
   ) => {
     const dialogRef = useRef<HTMLDivElement>(null);
-    const [isVisible, setIsVisible] = useState(isOpen);
+    const [isVisible, setIsVisible] = useState(open);
     const [isAnimating, setIsAnimating] = useState(false);
     const { stackedDialogOpen, setStackedDialogOpen } = useContext(DialogContext);
 
     useEffect(() => {
       if (stack) {
-        setStackedDialogOpen(isOpen);
+        setStackedDialogOpen(open);
       }
-    }, [stack, isOpen, setStackedDialogOpen]);
+    }, [stack, open, setStackedDialogOpen]);
 
     useEffect(() => {
       if (dialogRef.current && isVisible) {
@@ -88,7 +88,7 @@ const Dialog: React.FC<DialogProps> = forwardRef<HTMLDivElement, DialogProps>(
     }, [isVisible, onHeightChange]);
 
     useEffect(() => {
-      if (isOpen) {
+      if (open) {
         setIsVisible(true);
         setTimeout(() => {
           setIsAnimating(true);
@@ -99,7 +99,7 @@ const Dialog: React.FC<DialogProps> = forwardRef<HTMLDivElement, DialogProps>(
           setIsVisible(false);
         }, 300);
       }
-    }, [isOpen]);
+    }, [open]);
 
     const handleKeyDown = useCallback(
       (event: KeyboardEvent) => {
@@ -129,16 +129,16 @@ const Dialog: React.FC<DialogProps> = forwardRef<HTMLDivElement, DialogProps>(
     );
 
     useEffect(() => {
-      if (isOpen) {
+      if (open) {
         document.addEventListener("keydown", handleKeyDown);
         return () => {
           document.removeEventListener("keydown", handleKeyDown);
         };
       }
-    }, [isOpen, handleKeyDown]);
+    }, [open, handleKeyDown]);
 
     useEffect(() => {
-      if (isOpen) {
+      if (open) {
         document.body.style.overflow = "hidden";
         // Make everything outside the dialog inert
         document.body.childNodes.forEach((node) => {
@@ -175,17 +175,17 @@ const Dialog: React.FC<DialogProps> = forwardRef<HTMLDivElement, DialogProps>(
           document.body.style.overflow = "unset";
         }
       }
-    }, [isOpen, stack]);
+    }, [open, stack]);
 
     useEffect(() => {
-      if (isOpen && dialogRef.current) {
+      if (open && dialogRef.current) {
         const focusableElements = dialogRef.current.querySelectorAll<HTMLElement>(
           'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
         );
         const firstElement = focusableElements[0];
         firstElement.focus();
       }
-    }, [isOpen]);
+    }, [open]);
 
     useEffect(() => {
       const handleClickOutside = (event: MouseEvent) => {
diff --git a/packages/core/src/components/DropdownWrapper.tsx b/packages/core/src/components/DropdownWrapper.tsx
index 8d8c715..52c4a54 100644
--- a/packages/core/src/components/DropdownWrapper.tsx
+++ b/packages/core/src/components/DropdownWrapper.tsx
@@ -40,8 +40,8 @@ export interface DropdownWrapperProps {
   onSelect?: (value: string) => void;
   closeAfterClick?: boolean;
   handleArrowNavigation?: boolean;
-  isOpen?: boolean;
-  onOpenChange?: (isOpen: boolean) => void;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
   isNested?: boolean;
   navigationLayout?: NavigationLayout;
   columns?: number | string;
@@ -62,7 +62,7 @@ const DropdownWrapper = forwardRef<HTMLDivElement, DropdownWrapperProps>(
       minHeight,
       onSelect,
       closeAfterClick = true,
-      isOpen: controlledIsOpen,
+      open: controlledIsOpen,
       handleArrowNavigation = true,
       onOpenChange,
       minWidth,
diff --git a/packages/core/src/components/Input.module.scss b/packages/core/src/components/Input.module.scss
index 195945b..bad9cd8 100644
--- a/packages/core/src/components/Input.module.scss
+++ b/packages/core/src/components/Input.module.scss
@@ -6,8 +6,10 @@
         border-color: var(--neutral-border-medium);
     }
 
-    &:has(.placeholder) {
-        min-height: var(--static-space-48);
+    &:has(.placeholder):has(.floating) {
+        .placeholder {
+          padding-top: var(--static-space-12);
+        }
     }
 }
 
@@ -59,13 +61,9 @@
 .s {
     min-height: var(--static-space-48);
 
-    &:has(.placeholder) {
-        min-height: var(--static-space-40);
-    }
-
     .label {
         &.floating {
-            top: var(--static-space-4);
+            top: calc(var(--static-space-4) - var(--static-space-1));
         }
     }
 }
diff --git a/packages/core/src/components/Select.tsx b/packages/core/src/components/Select.tsx
index 165e64e..564391d 100644
--- a/packages/core/src/components/Select.tsx
+++ b/packages/core/src/components/Select.tsx
@@ -265,7 +265,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
           if (typeof ref === "function") ref(node);
           else if (ref) ref.current = node;
         }}
-        isOpen={isDropdownOpen}
+        open={isDropdownOpen}
         onOpenChange={setIsDropdownOpen}
         placement={placement}
         closeAfterClick={false}
diff --git a/packages/core/src/modules/data/ChartHeader.tsx b/packages/core/src/modules/data/ChartHeader.tsx
index c7d7449..cc9b314 100644
--- a/packages/core/src/modules/data/ChartHeader.tsx
+++ b/packages/core/src/modules/data/ChartHeader.tsx
@@ -175,8 +175,8 @@ export const ChartHeader: React.FC<ChartHeaderProps> = ({
         </Column>
         {dateRange && date?.selector && (
           <DropdownWrapper
-            isOpen={dateRangeOpen}
-            onOpenChange={(isOpen) => setDateRangeOpen(isOpen)}
+            open={dateRangeOpen}
+            onOpenChange={(open) => setDateRangeOpen(open)}
             placement="bottom-end"
             trigger={
               <IconButton
diff --git a/packages/core/src/modules/navigation/Kbar.tsx b/packages/core/src/modules/navigation/Kbar.tsx
index 77e7ba2..9332ba3 100644
--- a/packages/core/src/modules/navigation/Kbar.tsx
+++ b/packages/core/src/modules/navigation/Kbar.tsx
@@ -79,14 +79,14 @@ export const KbarTrigger: React.FC<KbarTriggerProps> = ({ onClick, children, ...
 };
 
 interface KbarContentProps {
-  isOpen: boolean;
+  open: boolean;
   onClose: () => void;
   items: KbarItem[];
   placeholder?: string;
 }
 
 export const KbarContent: React.FC<KbarContentProps> = ({
-  isOpen,
+  open,
   onClose,
   items,
   placeholder = "Search",
@@ -204,18 +204,18 @@ export const KbarContent: React.FC<KbarContentProps> = ({
       }
     };
 
-    if (isOpen) {
+    if (open) {
       document.addEventListener("keydown", handleEscapeKey);
     }
 
     return () => {
       document.removeEventListener("keydown", handleEscapeKey);
     };
-  }, [isOpen, handleClose]);
+  }, [open, handleClose]);
 
   // Lock body scroll when kbar is open
   useEffect(() => {
-    if (isOpen) {
+    if (open) {
       // Prevent body scrolling when kbar is open
       document.body.style.overflow = "hidden";
     } else {
@@ -227,18 +227,18 @@ export const KbarContent: React.FC<KbarContentProps> = ({
       // Cleanup function to ensure body scroll is restored
       document.body.style.overflow = "unset";
     };
-  }, [isOpen]);
+  }, [open]);
 
   // Clear search query when kbar is closed
   useEffect(() => {
-    if (!isOpen) {
+    if (!open) {
       setSearchQuery("");
     }
-  }, [isOpen]);
+  }, [open]);
 
   // Focus search input when kbar is opened
   useEffect(() => {
-    if (isOpen && inputRef.current) {
+    if (open && inputRef.current) {
       // Use a small timeout to ensure the component is fully rendered
       const timer = setTimeout(() => {
         inputRef.current?.focus();
@@ -246,7 +246,7 @@ export const KbarContent: React.FC<KbarContentProps> = ({
 
       return () => clearTimeout(timer);
     }
-  }, [isOpen]);
+  }, [open]);
 
   // Handle search input change
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -254,7 +254,7 @@ export const KbarContent: React.FC<KbarContentProps> = ({
   };
 
   // Render nothing if not open
-  if (!isOpen) return null;
+  if (!open) return null;
 
   // Create portal for the kbar
   return (
@@ -443,7 +443,7 @@ export const Kbar: React.FC<KbarProps> = ({ items, children, ...rest }) => {
       </KbarTrigger>
       {isOpen &&
         createPortal(
-          <KbarContent isOpen={isOpen} onClose={handleClose} items={items} />,
+          <KbarContent open={isOpen} onClose={handleClose} items={items} />,
           document.body,
         )}
     </>