fix(ui,docs): normalize isOpen handling + fix Input placeholder/label; tidy quotes

apps/dev/src/components/ComponentsCheckPage.tsx

@@ -49,7 +49,6 @@ import {
     TagInput,
     Avatar,
     Background,
-    Input,
     Card,
     Chip,
     Fade,
@@ -97,32 +96,20 @@ import {
     TypeFx,
     WeatherFx,
     CountdownFx,
+    Input,
 } from "@once-ui-system/core";
 
 interface ComponentCategory {
     name: string;
     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>

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"

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"],

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"],

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 

apps/docs/src/product/CountFxExample.tsx

@@ -1,22 +1,47 @@
-'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;
     setValue(targetValue);
   }, []);
 
   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>
   );
 };

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,23 +18,29 @@ 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"
           format="HH:MM:SS"
         />
       </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"
           format="MM:SS"
         />
       </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,23 +55,29 @@ 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"
           effect="wheel"
         />
       </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"
           effect="smooth"
         />
       </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 (