chore: Bump package version to 1.0.236 and enhance ImageDialog and Tabs components

- Updated package version in package.json to 1.0.236
- Enhanced ImageDialog component with new props for compression, max file size, allowed mime types, and input label
- Updated Tabs component styling for improved visual consistency and added support for disabled tabs in stories
- Refactored Avatar story to use updated image URL

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.235",
+  "version": "1.0.236",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/Avatar/Avatar.stories.tsx

@@ -23,7 +23,7 @@ export const Default: Story = {
 
 export const WithURL: Story = {
   args: {
-    src: "https://imagedelivery.net/mG9yIKlH_7CYi04eBXEpYg/47d46959-283a-4d0f-4ff3-6a1fa4686b00/public",
+    src: "https://images.programmer.network/47d46959-283a-4d0f-4ff3-6a1fa4686b00/public",
     size: 150
   }
 };

src/Components/ImageDialog/index.tsx

@@ -29,7 +29,11 @@ const ImageDialog = forwardRef<HTMLDialogElement, IImageDialogProps>(
         aspect: 1,
         circularCrop: false
       },
-      buttonText
+      buttonText,
+      compression = { enabled: true, quality: 0.8 },
+      maxFileSize = 1024 * 1024 * 0.5,
+      allowedMimeTypes = ["image/jpeg", "image/png", "image/gif"],
+      inputLabel = "Select an image"
     },
     forwardedRef
   ) => {
@@ -47,6 +51,7 @@ const ImageDialog = forwardRef<HTMLDialogElement, IImageDialogProps>(
         }
 
         setIsSaving(true);
+
         await onSave?.({
           blob: croppedImage,
           base64: await ImageUtils.blobToBase64(croppedImage),
@@ -144,11 +149,11 @@ const ImageDialog = forwardRef<HTMLDialogElement, IImageDialogProps>(
             setValidationError(error);
           }}
           error={validationError?.message}
-          label='Select an image'
+          label={inputLabel}
           accept='image/*'
-          maxFileSize={1024 * 1024 * 0.5} // 500KB
-          allowedMimeTypes={["image/jpeg", "image/png", "image/gif"]}
-          compression={{ enabled: true, quality: 0.8 }}
+          maxFileSize={maxFileSize}
+          allowedMimeTypes={allowedMimeTypes}
+          compression={compression}
         />
       </div>
     );

src/Components/ImageDialog/types.ts

@@ -16,4 +16,8 @@ export interface IImageDialogProps extends IDialogProps {
   onSave?: (args: IImageDialogOnSaveArgs) => Promise<unknown>;
   cropOptions?: IImageDialogCropOptions;
   buttonText: string;
+  compression?: { enabled: boolean; maxWidth?: number; quality?: number };
+  maxFileSize?: number;
+  allowedMimeTypes?: string[];
+  inputLabel?: string;
 }

src/Components/Inputs/Tiptap/constants.ts

@@ -125,7 +125,8 @@ export const toolbarItemToClassName = {
   },
   [TIPTAP_TOOLBAR_ITEMS.IMAGE]: {
     tagName: "img",
-    classes: "yl:mx-auto yl:block yl:p-2 yl:border yl:border-background"
+    classes:
+      "yl:mx-auto yl:block yl:p-2 yl:border-2 yl:border-border yl:my-4 yl:rounded-md yl:shadow-md"
   },
   [TIPTAP_TOOLBAR_ITEMS.MENTION]: {
     tagName: "span",

src/Components/Tabs/Tabs.stories.tsx

@@ -239,3 +239,78 @@ export const Compact: Story = {
     </div>
   )
 };
+
+export const DisabledTabs: Story = {
+  render: () => (
+    <div className='w-[500px] p-6'>
+      <Tabs>
+        <TabList>
+          <Tab>Active</Tab>
+          <Tab disabled>Disabled</Tab>
+          <Tab>Another</Tab>
+        </TabList>
+        <TabPanel>
+          <div className='text-text'>This tab is active and enabled.</div>
+        </TabPanel>
+        <TabPanel>
+          <div className='text-text'>
+            This tab is disabled and cannot be selected.
+          </div>
+        </TabPanel>
+        <TabPanel>
+          <div className='text-text'>Another enabled tab.</div>
+        </TabPanel>
+      </Tabs>
+    </div>
+  )
+};
+
+export const LongLabels: Story = {
+  render: () => (
+    <div className='w-[600px] p-6'>
+      <Tabs>
+        <TabList>
+          <Tab>This is a very long tab label to test overflow</Tab>
+          <Tab>Short</Tab>
+          <Tab>Another extremely long tab label for testing</Tab>
+        </TabList>
+        <TabPanel>
+          <div className='text-text'>Long label tab content.</div>
+        </TabPanel>
+        <TabPanel>
+          <div className='text-text'>Short label tab content.</div>
+        </TabPanel>
+        <TabPanel>
+          <div className='text-text'>Another long label tab content.</div>
+        </TabPanel>
+      </Tabs>
+    </div>
+  )
+};
+
+export const MixedEnabledDisabled: Story = {
+  render: () => (
+    <div className='w-[500px] p-6'>
+      <Tabs>
+        <TabList>
+          <Tab>First</Tab>
+          <Tab disabled>Second (Disabled)</Tab>
+          <Tab>Third</Tab>
+          <Tab disabled>Fourth (Disabled)</Tab>
+        </TabList>
+        <TabPanel>
+          <div className='text-text'>First tab content.</div>
+        </TabPanel>
+        <TabPanel>
+          <div className='text-text'>Second tab is disabled.</div>
+        </TabPanel>
+        <TabPanel>
+          <div className='text-text'>Third tab content.</div>
+        </TabPanel>
+        <TabPanel>
+          <div className='text-text'>Fourth tab is disabled.</div>
+        </TabPanel>
+      </Tabs>
+    </div>
+  )
+};

src/Components/Tabs/index.tsx

@@ -5,15 +5,7 @@ import { ITabListProps, ITabPanelProps, ITabProps, ITabsProps } from "./types";
 
 export const Tabs: ReactTabs.ReactTabsFunctionComponent<ITabsProps> = props => {
   return (
-    <ReactTabs.Tabs
-      {...props}
-      selectedTabClassName={classNames(
-        "yl:text-primary yl:border-primary yl:bg-primary/5",
-        "after:yl:opacity-100 after:yl:scale-x-100",
-        "yl:font-semibold",
-        props.selectedTabClassName
-      )}
-    >
+    <ReactTabs.Tabs {...props} className={props.className}>
       {props.children}
     </ReactTabs.Tabs>
   );
@@ -28,9 +20,7 @@ export const TabList: ReactTabs.ReactTabsFunctionComponent<
     <ReactTabs.TabList
       {...props}
       className={classNames(
-        "yl:flex yl:gap-1 yl:my-6 yl:overflow-x-auto yl:select-none yl:text-text",
-        "yl:bg-card yl:rounded-lg yl:p-1 yl:border-2 yl:border-border",
-        "yl:backdrop-blur-sm",
+        "yl:text-text yl:flex yl:gap-6 yl:border-b-2 yl:border-border yl:pb-4",
         props.className
       )}
     >
@@ -48,7 +38,6 @@ export const TabPanel: ReactTabs.ReactTabsFunctionComponent<
     <ReactTabs.TabPanel
       {...props}
       className={classNames(
-        "yl:mt-4 yl:outline-none",
         "yl:animate-in yl:fade-in-0 yl:duration-200",
         props.className
       )}
@@ -64,30 +53,10 @@ export const Tab: ReactTabs.ReactTabsFunctionComponent<ITabProps> = props => {
   return (
     <ReactTabs.Tab
       {...props}
+      selectedClassName='yl:text-primary'
+      disabledClassName='yl:!cursor-not-allowed yl:opacity-50'
       className={classNames(
-        "yl:flex yl:gap-2 yl:items-center yl:justify-center",
-        "yl:cursor-pointer yl:relative yl:transition-all yl:duration-200",
-        "yl:px-4 yl:py-2.5 yl:rounded-md yl:text-sm yl:font-medium",
-        "yl:min-w-0 yl:whitespace-nowrap",
-
-        "yl:text-text-secondary yl:bg-transparent",
-        "yl:border-2 yl:border-transparent",
-
-        "hover:yl:text-text hover:yl:bg-background/50",
-        "hover:yl:border-border/50",
-
-        "focus:yl:outline-none focus:yl:ring-2 focus:yl:ring-primary/20",
-        "focus:yl:border-primary/30",
-
-        "after:yl:content-[''] after:yl:absolute after:yl:bottom-0",
-        "after:yl:left-1/2 after:yl:-translate-x-1/2",
-        "after:yl:w-0 after:yl:h-0.5 after:yl:bg-primary",
-        "after:yl:rounded-full after:yl:transition-all after:yl:duration-300",
-        "after:yl:opacity-0 after:yl:scale-x-0",
-
-        "disabled:yl:cursor-not-allowed disabled:yl:opacity-50",
-        "disabled:hover:yl:text-text-secondary disabled:hover:yl:bg-transparent",
-
+        "yl:hover:cursor-pointer yl:outline-none yl:focus-visible:outline-none yl:flex yl:gap-1 yl:items-center yl:justify-center yl:transition-all yl:duration-200 yl:ease-in-out yl:text-text-secondary",
         props.className
       )}
     >