157 bug expand the size of pagenavigator buttons depending on the content

package.json

@@ -1,6 +1,6 @@
 {
   "name": "traboda-chaya-ui",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Modern, Data-First UI Components for React",
   "keywords": [
     "react",

src/components/Card.tsx

@@ -12,6 +12,7 @@ export type CardProps = {
   title?: string;
   description?: string;
   titleClassName?: string;
+  headerClassName?: string;
   bodyClassName?: string;
   titleIcon?: IconInputType;
   id?: string;
@@ -28,6 +29,7 @@ const Card = ({
   className,
   bodyClassName,
   titleClassName,
+  headerClassName = '!bg-transparent',
   titleIcon,
   sidebarRenderer,
 }: CardProps) => (
@@ -45,6 +47,7 @@ const Card = ({
           'card-header flex w-full items-start justify-between gap-3',
           'rounded-t-lg border-b px-3 py-2',
           variant === 'shaded' && 'bg-background-lighten-1 dark:bg-background-darken-1',
+          headerClassName,
         ])}
       >
         <div>

src/components/ConfirmationDialog.tsx

@@ -26,6 +26,7 @@ export type ConfirmationDialogProps = {
   onConfirm?: (args: { password?: string }) => void;
   onCancel?: () => void;
   className?: string;
+  headerClassName?: string;
   formID?: string;
   confirmButtonProps?: ButtonProps;
   cancelButtonProps?: ButtonProps;
@@ -48,6 +49,7 @@ const ConfirmationDialog = ({
   onConfirm = () => {},
   onCancel = () => {},
   className,
+  headerClassName,
   formID,
   confirmButtonProps,
   cancelButtonProps,
@@ -70,7 +72,7 @@ const ConfirmationDialog = ({
     <Modal
       isOpen={isOpen}
       onClose={onCancel}
-      headerClassName="w-[450px]"
+      headerClassName={mcs(['!bg-transparent w-[450px]', headerClassName])}
       contentClassName={mcs('confirmation-dialog w-[450px] max-w-full', className)}
       title={labels?.title}
       description={labels.description}

src/components/PageNavigator.tsx

@@ -73,9 +73,9 @@ const PageNavigator = ({
     base: ['flex items-center justify-center'],
     variants: {
       size: {
-        sm: 'w-6 h-6 text-sm',
-        md: 'w-8 h-8 text-base',
-        lg: 'w-10 h-10 text-lg',
+        sm: 'min-w-6 h-6 px-1 text-sm',
+        md: 'min-w-8 h-8 px-1.5 text-base',
+        lg: 'min-w-10 h-10 px-2 text-lg',
       },
     },
   });

stories/components/display/Card.stories.tsx

@@ -104,6 +104,16 @@ export const NestedCardsWithCustomContent: Story = {
   },
 };
 
+export const CustomHeaderBackground: Story = {
+  args: {
+    title: 'Add Members',
+    description: 'Add members to your team, and collaborate with them on projects.',
+    children:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, vitae aliquam nisl nunc vitae nisl',
+    headerClassName: 'bg-blue-500 text-white',
+  },
+};
+
 export const OutlineVariant: Story = {
   tags: ['unlisted'],
   args: {

stories/components/feedback/ConfirmationDialog.stories.tsx

@@ -51,6 +51,31 @@ export const Primary: Story = {
   },
 };
 
+export const CustomHeaderBackground: Story = {
+  render: () => {
+    const [isOpen, setOpen] = useState(false);
+
+    return (
+      <div>
+        <Button color="danger" onClick={() => setOpen(true)}>
+          Delete
+        </Button>
+        <ConfirmationDialog
+          labels={{
+            title: 'Delete All Photos',
+            description: 'Are you sure you want to delete all photos? This is permanent action.',
+          }}
+          headerClassName="bg-blue-500 text-white"
+          confirmButtonProps={{ color: 'danger' }}
+          isOpen={isOpen}
+          onConfirm={() => setOpen(false)}
+          onCancel={() => setOpen(false)}
+        />
+      </div>
+    );
+  },
+};
+
 export const RequirePassword: Story = {
   render: () => {
     const [isOpen, setOpen] = useState(false);