New update to the Table component

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 (

apps/docs/src/product/Cta.tsx

@@ -3,18 +3,36 @@ 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
           lines={{
             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>
   );
-};
+};