@tpzdsp/next-toolkit 1.12.2 → 1.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "1.12.2",
+  "version": "1.12.3",
   "description": "A reusable React component library for Next.js applications",
   "engines": {
     "node": ">= 24.12.0",

package/src/assets/styles/globals.css

@@ -45,7 +45,7 @@
 /* Component-specific styles */
 @layer components {
   .focus-yellow {
-    @apply focus:border-[#ffbf47] focus:outline focus:outline-[3px] focus:outline-[#ffbf47];
+    @apply focus:border-focus focus:outline focus:outline-2 focus:outline-focus;
   }
 
   .library-button {
@@ -83,6 +83,10 @@
       top: calc(calc(var(--border) + var(--shadow)) * -1);
     }
   }
+
+  .input-height {
+    @apply h-[38px];
+  }
 }
 
 /* Utilities */

package/src/components/form/Input.tsx

@@ -14,7 +14,7 @@ export const Input = ({ hasError, className, ...props }: InputProps) => {
     <input
       {...props}
       className={cn(
-        'rounded-md border p-1 disabled:opacity-60 disabled:bg-gray-100',
+        'rounded-md border p-1 disabled:opacity-60 disabled:bg-gray-100 input-height focus-yellow',
         hasError ? 'border-error' : '',
         className,
       )}

package/src/components/select/Select.tsx

@@ -13,7 +13,7 @@ import type {
 } from 'react-select';
 import { components, default as ReactSelect } from 'react-select';
 
-import { SELECT_CONTAINER_CLASSES, SELECT_CONTROL_CLASSES, SELECT_MIN_HEIGHT } from './common';
+import { SELECT_CONTAINER_CLASSES, SELECT_CONTROL_CLASSES } from './common';
 import { cn } from '../../utils';
 
 // extends the react-select props with some of our own
@@ -30,7 +30,6 @@ const getClassNames = <Option, IsMulti extends boolean, Group extends GroupBase<
     control: (props) =>
       cn(
         SELECT_CONTROL_CLASSES,
-        SELECT_MIN_HEIGHT,
         props.isDisabled ? '!cursor-not-allowed bg-gray-100' : 'bg-white',
         props.isFocused
           ? 'shadow-[0px_0px_0px_theme(borderWidth.form)_theme(colors.focus)] border-focus'

package/src/components/select/SelectSkeleton.test.tsx

@@ -70,7 +70,7 @@ describe('SelectSkeleton', () => {
     expect(containerElement.tagName).toBe('DIV');
   });
 
-  it('should apply SELECT_CONTROL_CLASSES and SELECT_MIN_HEIGHT to control element', () => {
+  it('should apply SELECT_CONTROL_CLASSES to control element', () => {
     const { container } = render(<SelectSkeleton />);
 
     const controlElement = container.firstChild?.firstChild as HTMLElement;

package/src/components/select/SelectSkeleton.tsx

@@ -1,4 +1,4 @@
-import { SELECT_CONTAINER_CLASSES, SELECT_CONTROL_CLASSES, SELECT_MIN_HEIGHT } from './common';
+import { SELECT_CONTAINER_CLASSES, SELECT_CONTROL_CLASSES } from './common';
 import type { ExtendProps } from '../../types';
 import { cn } from '../../utils';
 
@@ -12,7 +12,7 @@ export type SelectSkeletonProps = ExtendProps<'div', Props>;
 export const SelectSkeleton = ({ className, ...props }: SelectSkeletonProps = {}) => {
   return (
     <div className={cn(SELECT_CONTAINER_CLASSES, className)} {...props}>
-      <div className={cn(SELECT_CONTROL_CLASSES, SELECT_MIN_HEIGHT)}>
+      <div className={cn(SELECT_CONTROL_CLASSES, 'p-2')}>
         <div
           className="w-full h-full bg-gray-100 animate-pulse rounded-md col-span-2"
           aria-label="Loading options"

package/src/components/select/common.ts

@@ -1,4 +1,3 @@
-export const SELECT_MIN_HEIGHT = '!min-h-[38px]';
-export const SELECT_CONTAINER_CLASSES = 'w-full h-max select-none !pointer-events-auto';
+export const SELECT_CONTAINER_CLASSES = 'w-full select-none !pointer-events-auto input-height';
 export const SELECT_CONTROL_CLASSES =
-  'px-2 py-2 !grid gap-4 grid-cols-[1fr_min-content] w-full border h-full rounded-md';
+  'p-1 !grid gap-4 grid-cols-[1fr_min-content] w-full border rounded-md input-height';