Update package versions and refactor UI components

Updated package versions in package.json and refactored size definitions in various UI components. The refactor replaced explicit 'height' and 'width' values with the shorthand 'size' to improve code readability and ease of maintenance across multiple components.

Author: thevuong

apps/docs/package.json

@@ -28,10 +28,10 @@
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^7.6.6",
     "@storybook/types": "^7.6.6",
-    "@tanstack/react-table": "^8.11.0",
+    "@tanstack/react-table": "^8.11.2",
     "class-variance-authority": "^0.7.0",
-    "date-fns": "^3.0.1",
-    "lucide-react": "^0.298.0",
+    "date-fns": "^3.0.5",
+    "lucide-react": "^0.299.0",
     "next": "^14.0.4",
     "react": "^18.2.0",
     "react-day-picker": "^8.9.1",

apps/docs/src/app/page.tsx

@@ -45,7 +45,7 @@ export default function Page(): React.JSX.Element {
           </CardHeader>
           <CardBody className="grid gap-4">
             <div className="flex items-center space-x-4 rounded-md border p-4">
-              <BellIcon className="h-4 w-4 shrink-0" />
+              <BellIcon className="size-4 shrink-0" />
               <div className="flex-1 space-y-1">
                 <p className="text-sm font-medium">Push Notifications</p>
                 <p className="text-muted-foreground text-sm">
@@ -60,7 +60,7 @@ export default function Page(): React.JSX.Element {
                   className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
                   key={notification.title}
                 >
-                  <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+                  <span className="flex size-2 translate-y-1 rounded-full bg-sky-500" />
                   <div className="space-y-1">
                     <p className="text-sm font-medium">{notification.title}</p>
                     <p className="text-muted-foreground text-sm">
@@ -74,7 +74,7 @@ export default function Page(): React.JSX.Element {
           <CardFooter>
             <Button
               className="w-full"
-              startIcon={<CheckIcon className="h-4 w-4" />}
+              startIcon={<CheckIcon className="size-4" />}
             >
               Mark all as read
             </Button>

apps/docs/src/stories/aspect-ratio/aspect-radio.stories.tsx

@@ -24,7 +24,7 @@ export const Basic: Story = {
       <AspectRatio {...args}>
         <Image
           alt="Landscape photograph by Tobias Tullius"
-          className="h-full w-full object-cover"
+          className="size-full object-cover"
           height={774}
           src="https://images.unsplash.com/flagged/photo-1570700005880-4ecdb8595d4a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774"
           width={1162}

apps/docs/src/stories/avatar/avatar.stories.tsx

@@ -31,15 +31,15 @@ export const Sizes: Story = {
       <Avatar
         {...args}
         alt="Colm Tuite"
-        className="h-6 w-6"
+        className="size-6"
         fallback="CT"
         src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
       />
 
       <Avatar
         {...args}
         alt="Colm Tuite"
-        className="h-8 w-8"
+        className="size-8"
         fallback="CT"
         src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
       />
@@ -54,15 +54,15 @@ export const Sizes: Story = {
       <Avatar
         {...args}
         alt="Colm Tuite"
-        className="h-16 w-16"
+        className="size-16"
         fallback="CT"
         src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
       />
 
       <Avatar
         {...args}
         alt="Colm Tuite"
-        className="h-20 w-20"
+        className="size-20"
         fallback="CT"
         src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
       />

apps/docs/src/stories/card/card.stories.tsx

@@ -74,7 +74,7 @@ export const Basic: Story = {
               className="mb-2 grid grid-cols-[25px_1fr] items-start pb-2 last:mb-0 last:pb-0"
               key={notification.title}
             >
-              <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+              <span className="flex size-2 translate-y-1 rounded-full bg-sky-500" />
               <div className="space-y-1">
                 <p className="text-sm font-medium">{notification.title}</p>
                 <p className="text-muted-foreground text-sm">
@@ -168,7 +168,7 @@ export const WithShadow: Story = {
               className="mb-2 grid grid-cols-[25px_1fr] items-start pb-2 last:mb-0 last:pb-0"
               key={notification.title}
             >
-              <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+              <span className="flex size-2 translate-y-1 rounded-full bg-sky-500" />
               <div className="space-y-1">
                 <p className="text-sm font-medium">{notification.title}</p>
                 <p className="text-muted-foreground text-sm">

apps/docs/src/stories/collapsible/collapsible.stories.tsx

@@ -25,7 +25,11 @@ function CollapsibleWithHooks(): React.JSX.Element {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <Collapsible className="w-[350px]" onOpenChange={setIsOpen} open={isOpen}>
+    <Collapsible
+      className="w-[21.875rem]"
+      onOpenChange={setIsOpen}
+      open={isOpen}
+    >
       <div className="flex items-center justify-between space-x-4 px-4">
         <h4 className="text-sm font-semibold">
           @peduarte starred 3 repositories

apps/docs/src/stories/combobox/combobox.stories.tsx

@@ -156,12 +156,12 @@ function ComboboxAssignMember(): React.JSX.Element {
         {currentMember ? (
           <Avatar
             alt={getFirstInitials(currentMember.name)}
-            className="h-9 w-9"
+            className="size-9"
             fallback={currentMember.name}
             src={currentMember.avatar}
           />
         ) : (
-          <div className="flex h-9 w-9 items-center justify-center rounded-full border border-dashed">
+          <div className="flex size-9 items-center justify-center rounded-full border border-dashed">
             <UserPlus2Icon size={24} />
           </div>
         )}
@@ -191,14 +191,14 @@ function ComboboxAssignMember(): React.JSX.Element {
                 >
                   <Avatar
                     alt={getFirstInitials(member.name)}
-                    className="h-9 w-9"
+                    className="size-9"
                     fallback={member.name}
                     src={member.avatar}
                   />
                   {member.name}
                   <CheckIcon
                     className={cx(
-                      'ml-auto h-4 w-4',
+                      'ml-auto size-4',
                       member.id === currentMember?.id
                         ? 'opacity-100'
                         : 'opacity-0',
@@ -253,7 +253,7 @@ function ComboboxAssignMemberWithCustomTrigger(): React.JSX.Element {
                 >
                   <Avatar
                     alt={getFirstInitials(member.name)}
-                    className="h-9 w-9"
+                    className="size-9"
                     fallback={member.name}
                     src={member.avatar}
                   />

apps/docs/src/stories/context-menu/context-menu.stories.tsx

@@ -38,7 +38,7 @@ function ContextMenuWithHooks(
 
   return (
     <ContextMenu {...args}>
-      <ContextMenuTrigger className="block w-[300px] select-none rounded border-2 border-dashed py-[45px] text-center text-[15px]">
+      <ContextMenuTrigger className="py-11.25 text-3.75 block w-[18.75rem] select-none rounded border-2 border-dashed text-center">
         Right click here.
       </ContextMenuTrigger>
 

apps/docs/src/stories/editor/editor.stories.tsx

@@ -19,7 +19,7 @@ export default meta;
 
 type Story = StoryObj<typeof Editor>;
 
-const content = `<p class="lead">Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.</p><div data-youtube-video><iframe src="https://www.youtube.com/watch?v=3VJqq0M2O8M"></iframe></div><p>By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you <em>really are</em> just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.</p><p>We get lots of complaints about it actually, with people regularly asking us things like:</p><blockquote><p>Why is Tailwind removing the default styles on my <code>h1</code> elements? How do I disable this? What do you mean I lose all the other base styles too?</p></blockquote><p>We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a <code>p</code> element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look <em>awesome</em>, not awful.</p><p>The <code>@tailwindcss/typography</code> plugin is our attempt to give you what you <em>actually</em> want, without any of the downsides of doing something stupid like disabling our base styles.</p><p>It adds a new <code>prose</code> class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:</p><pre><code class="language-html">&lt;article class="prose"&gt;
+const content = `<p class="lead">Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.</p><div data-youtube-video><iframe src="https://www.youtube.com/watch?v=zpOULjyy-n8"></iframe></div><p>By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you <em>really are</em> just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.</p><p>We get lots of complaints about it actually, with people regularly asking us things like:</p><blockquote><p>Why is Tailwind removing the default styles on my <code>h1</code> elements? How do I disable this? What do you mean I lose all the other base styles too?</p></blockquote><p>We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a <code>p</code> element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look <em>awesome</em>, not awful.</p><p>The <code>@tailwindcss/typography</code> plugin is our attempt to give you what you <em>actually</em> want, without any of the downsides of doing something stupid like disabling our base styles.</p><p>It adds a new <code>prose</code> class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:</p><pre><code class="language-html">&lt;article class="prose"&gt;
   &lt;h1&gt;Garlic bread with cheese: What the science tells us&lt;/h1&gt;
   &lt;p&gt;
     For years parents have espoused the health benefits of eating garlic bread with cheese to their
@@ -44,7 +44,7 @@ export const Basic: Story = {
   args: {
     content,
     classNames: {
-      editor: 'max-h-[620px] overflow-y-auto',
+      editor: 'max-h-[38.75rem] overflow-y-auto',
     },
   },
 };

apps/docs/src/stories/navigation-menu/navigation-menu.stories.tsx

@@ -21,7 +21,7 @@ const meta: Meta<typeof NavigationMenu> = {
   component: NavigationMenu,
   decorators: [
     (Story): React.JSX.Element => (
-      <div className="min-h-[600px]">
+      <div className="min-h-[37.5rem]">
         <Story />
       </div>
     ),
@@ -68,11 +68,11 @@ export const Basic: Story = {
       <NavigationMenuItem>
         <NavigationMenuTrigger>Learn</NavigationMenuTrigger>
         <NavigationMenuContent>
-          <ul className="grid gap-x-2.5 p-5 sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
+          <ul className="grid gap-x-2.5 p-5 sm:w-[31.25rem] sm:grid-cols-[0.75fr_1fr]">
             <li className="row-span-3 grid">
               <NavigationMenuLink asChild>
                 <Link
-                  className="focus:ring-primary flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-purple-800 to-indigo-800 p-6 no-underline outline-none focus:ring-2"
+                  className="focus:ring-primary flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-purple-800 to-indigo-800 p-6 no-underline outline-none focus:ring-2"
                   href="/"
                 >
                   <svg
@@ -114,7 +114,7 @@ export const Basic: Story = {
       <NavigationMenuItem>
         <NavigationMenuTrigger>Overview</NavigationMenuTrigger>
         <NavigationMenuContent>
-          <ul className="grid gap-x-2.5 p-5 sm:w-[600px] sm:grid-flow-col sm:grid-rows-3">
+          <ul className="grid gap-x-2.5 p-5 sm:w-[37.5rem] sm:grid-flow-col sm:grid-rows-3">
             <ListItem
               href="/docs/primitives/overview/introduction"
               title="Introduction"

apps/docs/src/stories/separator/separator.stories.tsx

@@ -13,7 +13,7 @@ type Story = StoryObj<typeof Separator>;
 
 export const Basic: Story = {
   render: (args) => (
-    <div className="mx-4 w-full max-w-[300px]">
+    <div className="mx-4 w-full max-w-[18.75rem]">
       <div className="text-sm font-medium">Radix Primitives</div>
       <p className="text-muted-foreground text-sm">
         An open-source UI component library.

apps/docs/src/stories/skeleton/skeleton.stories.tsx

@@ -20,10 +20,10 @@ export const Basic: Story = {
 export const ProfileLoading: Story = {
   render: () => (
     <div className="flex items-center space-x-4">
-      <Skeleton className="h-12 w-12 rounded-full" />
+      <Skeleton className="size-12 rounded-full" />
       <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
+        <Skeleton className="h-4 w-[15.625rem]" />
+        <Skeleton className="h-4 w-[12.5rem]" />
       </div>
     </div>
   ),

apps/docs/src/ui/notification.tsx

@@ -42,7 +42,7 @@ export function Notification({
         </CardHeader>
         <CardBody className="grid gap-4">
           <div className="flex items-center space-x-4 rounded-md border p-4">
-            <BellIcon className="h-4 w-4 shrink-0" />
+            <BellIcon className="size-4 shrink-0" />
             <div className="flex-1 space-y-1">
               <p className="text-sm font-medium">Push Notifications</p>
               <p className="text-muted-foreground text-sm">
@@ -57,7 +57,7 @@ export function Notification({
                 className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
                 key={notification.title}
               >
-                <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+                <span className="flex size-2 translate-y-1 rounded-full bg-sky-500" />
                 <div className="space-y-1">
                   <p className="text-sm font-medium">{notification.title}</p>
                   <p className="text-muted-foreground text-sm">
@@ -71,7 +71,7 @@ export function Notification({
         <CardFooter>
           <Button
             className="w-full"
-            startIcon={<CheckIcon className="h-4 w-4" />}
+            startIcon={<CheckIcon className="size-4" />}
           >
             Mark all as read
           </Button>

packages/tailwindcss/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @codefixlabs/tailwindcss
 
+## 0.1.38
+
+### Patch Changes
+
+- Update package versions and refactor UI components
+
 ## 0.1.37
 
 ### Patch Changes

packages/tailwindcss/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefixlabs/tailwindcss",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

packages/tailwindcss/src/tailwind.config.ts

@@ -222,11 +222,6 @@ export const sharedConfig: Config = {
         sans: [`var(--font-sans, ${fontFamily.sans.join(', ')})`],
         serif: [`var(--font-serif, ${fontFamily.serif.join(', ')})`],
       },
-      height: {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- allow for now
-        // @ts-expect-error
-        screen: ['100vh', '100dvh'],
-      },
       keyframes: {
         'collapsible-down': {
           from: { height: '0' },
@@ -422,16 +417,6 @@ export const sharedConfig: Config = {
           },
         },
       },
-      maxHeight: {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- allow for now
-        // @ts-expect-error
-        screen: ['100vh', '100dvh'],
-      },
-      minHeight: {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- allow for now
-        // @ts-expect-error
-        screen: ['100vh', '100dvh'],
-      },
       spacing: {
         0.75: '0.1875rem' /* 3px */,
         1.25: '0.3125rem' /* 5px */,

packages/ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @codefixlabs/ui
 
+## 0.1.73
+
+### Patch Changes
+
+- Update package versions and refactor UI components
+
 ## 0.1.72
 
 ### Patch Changes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefixlabs/ui",
-  "version": "0.1.72",
+  "version": "0.1.73",
   "license": "MIT",
   "sideEffects": false,
   "exports": {
@@ -65,8 +65,8 @@
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@tanstack/react-table": "^8.11.0",
-    "@tanstack/table-core": "^8.11.0",
+    "@tanstack/react-table": "^8.11.2",
+    "@tanstack/table-core": "^8.11.2",
     "@tiptap/extension-highlight": "^2.1.13",
     "@tiptap/extension-image": "^2.1.13",
     "@tiptap/extension-table": "^2.1.13",
@@ -83,8 +83,8 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
-    "date-fns": "^3.0.1",
-    "lucide-react": "^0.298.0",
+    "date-fns": "^3.0.5",
+    "lucide-react": "^0.299.0",
     "pluralize": "^8.0.0",
     "react": "^18.2.0",
     "react-day-picker": "^8.9.1",

packages/ui/src/react/accordion.tsx

@@ -76,7 +76,7 @@ export const AccordionTrigger = forwardRef<
         <ChevronDownIcon
           aria-hidden
           className={twMerge(
-            'group-data-state-open:rotate-180 text-accent-foreground h-4 w-4 transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)]',
+            'group-data-state-open:rotate-180 text-accent-foreground size-4 transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)]',
             classNames?.icon,
           )}
         />

packages/ui/src/react/alert.tsx

@@ -12,7 +12,7 @@ const alertVariants = cva(
   [
     'relative w-full rounded-lg border p-4',
     '[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',
-    '[&>svg+div]:translate-y-[-3px]',
+    '[&>svg+div]:-translate-y-0.75',
     '[&:has(svg)]:pl-11',
   ],
   {