bump

Author: irsyadadl

README.md

@@ -1,4 +1,4 @@
-### TL;DR  
+### TL;DR
 
 ```bash
 composer create-project justd/laravel your-project-name

bun.lockb

@@ -4,8 +4,9 @@
 @variant dark (&:is(.dark *));
 
 @theme {
-  --font-sans: 'Figtree', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-sans:
+    'Figtree', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
 
   --color-border: var(--border);
   --color-input: var(--input);

resources/css/app.css

@@ -1,4 +1,4 @@
-import { tv, type VariantProps } from 'tailwind-variants';
+import { type VariantProps, tv } from 'tailwind-variants';
 
 const avatar = tv({
   base: [

resources/js/components/ui/avatar.tsx

@@ -54,7 +54,8 @@ const buttonStyles = tv({
       plain: ['border-transparent data-hovered:bg-secondary data-pressed:bg-secondary']
     },
     size: {
-      'extra-small': 'h-8 px-[calc(var(--spacing)*2.7)] text-xs/4 lg:text-[0.800rem]/4',
+      'extra-small':
+        'h-8 px-[calc(var(--spacing)*2.7)] text-xs/4 **:data-[slot=avatar]:*:size-3.5 **:data-[slot=avatar]:size-3.5 **:data-[slot=icon]:size-3 lg:text-[0.800rem]/4',
       small: 'h-9 px-3.5 text-sm/5 sm:text-sm/5',
       medium: 'h-10 px-4 text-base sm:text-sm/6',
       large: 'h-11 px-4.5 text-base *:data-[slot=icon]:mx-[-1.5px] sm:*:data-[slot=icon]:size-5 lg:text-base/7',
@@ -109,5 +110,5 @@ const Button = ({ className, intent, appearance, size, shape, ref, ...props }: B
   );
 };
 
-export { Button, ButtonPrimitive, buttonStyles };
+export { Button, buttonStyles };
 export type { ButtonProps };

resources/js/components/ui/button.tsx

@@ -1,60 +1,68 @@
-import { tv } from 'tailwind-variants';
-
+import { cn } from '@/utils/classes';
 import { Heading } from './heading';
 
-const card = tv({
-  slots: {
-    root: [
-      'xrkr xkd2 rounded-lg border bg-bg text-fg shadow-xs has-[table]:overflow-hidden **:data-[slot=table-header]:bg-muted/50 has-[table]:**:data-[slot=card-footer]:border-t **:[table]:overflow-hidden'
-    ],
-    header: 'flex flex-col gap-y-1 px-6 py-5',
-    title: 'font-semibold leading-none tracking-tight sm:leading-6',
-    description: 'text-muted-fg text-sm',
-    content:
-      'px-6 pb-6 has-[table]:border-t has-[[data-slot=table-header]]:bg-muted/40 has-[table]:p-0 **:data-[slot=table-cell]:px-6 **:data-[slot=table-column]:px-6 [&:has(table)+[data-slot=card-footer]]:py-5',
-    footer: 'flex items-center p-6 pt-0'
-  }
-});
-
-const { root, header, title, description, content, footer } = card();
-
 const Card = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
-  return <div data-slot="card" className={root({ className })} {...props} />;
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'rounded-lg border bg-bg text-fg shadow-xs has-[table]:overflow-hidden **:data-[slot=table-header]:bg-muted/50 has-[table]:**:data-[slot=card-footer]:border-t **:[table]:overflow-hidden',
+        className
+      )}
+      {...props}
+    />
+  );
 };
 
 interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   title?: string;
   description?: string;
 }
 
-const Header = ({ className, title, description, children, ...props }: HeaderProps) => (
-  <div data-slot="card-header" className={header({ className })} {...props}>
-    {title && <Title>{title}</Title>}
-    {description && <Description>{description}</Description>}
-    {!title && typeof children === 'string' ? <Title>{children}</Title> : children}
+const CardHeader = ({ className, title, description, children, ...props }: HeaderProps) => (
+  <div data-slot="card-header" className={cn('flex flex-col gap-y-1 px-6 py-5', className)} {...props}>
+    {title && <CardTitle>{title}</CardTitle>}
+    {description && <CardDescription>{description}</CardDescription>}
+    {!title && typeof children === 'string' ? <CardTitle>{children}</CardTitle> : children}
   </div>
 );
 
-const Title = ({ className, level = 3, ...props }: React.ComponentProps<typeof Heading>) => {
-  return <Heading data-slot="card-title" level={level} className={title({ className })} {...props} />;
+const CardTitle = ({ className, level = 3, ...props }: React.ComponentProps<typeof Heading>) => {
+  return (
+    <Heading
+      data-slot="card-title"
+      level={level}
+      className={cn('font-semibold leading-none tracking-tight sm:leading-6', className)}
+      {...props}
+    />
+  );
 };
 
-const Description = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
-  return <div {...props} data-slot="description" className={description({ className })} {...props} />;
+const CardDescription = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+  return <div {...props} data-slot="description" className={cn('text-muted-fg text-sm', className)} {...props} />;
 };
 
-const Content = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
-  return <div data-slot="card-content" className={content({ className })} {...props} />;
+const CardContent = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn(
+        'px-6 pb-6 has-[table]:border-t has-[[data-slot=table-header]]:bg-muted/40 has-[table]:p-0 **:data-[slot=table-cell]:px-6 **:data-[slot=table-column]:px-6 [&:has(table)+[data-slot=card-footer]]:py-5',
+        className
+      )}
+      {...props}
+    />
+  );
 };
 
-const Footer = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
-  return <div data-slot="card-footer" className={footer({ className })} {...props} />;
+const CardFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+  return <div data-slot="card-footer" className={cn('flex items-center p-6 pt-0', className)} {...props} />;
 };
 
-Card.Content = Content;
-Card.Description = Description;
-Card.Footer = Footer;
-Card.Header = Header;
-Card.Title = Title;
+Card.Content = CardContent;
+Card.Description = CardDescription;
+Card.Footer = CardFooter;
+Card.Header = CardHeader;
+Card.Title = CardTitle;
 
 export { Card };

resources/js/components/ui/card.tsx

@@ -24,7 +24,7 @@ interface CheckboxGroupProps extends CheckboxGroupPrimitiveProps {
 const CheckboxGroup = ({ className, ...props }: CheckboxGroupProps) => {
   return (
     <CheckboxGroupPrimitive {...props} className={composeTailwindRenderProps(className, 'flex flex-col gap-y-2')}>
-      <Label>{props.label}</Label>
+      {props.label && <Label>{props.label}</Label>}
       {props.children as React.ReactNode}
       {props.description && <Description className="block">{props.description}</Description>}
       <FieldError>{props.errorMessage}</FieldError>
@@ -89,7 +89,11 @@ const Checkbox = ({ className, ...props }: CheckboxProps) => {
 
           <div className="flex flex-col gap-1">
             <>
-              {props.label ? <Label>{props.label}</Label> : (props.children as React.ReactNode)}
+              {props.label ? (
+                <Label className={cn(props.description && 'font-normal text-sm/4')}>{props.label}</Label>
+              ) : (
+                (props.children as React.ReactNode)
+              )}
               {props.description && <Description>{props.description}</Description>}
             </>
           </div>

resources/js/components/ui/checkbox.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from 'react';
 
 import { IconX } from 'justd-icons';
-import type { ButtonProps as ButtonPrimitiveProps, DialogProps, HeadingProps } from 'react-aria-components';
-import { Button as ButtonPrimitive, Dialog as DialogPrimitive, Heading } from 'react-aria-components';
+import type { HeadingProps } from 'react-aria-components';
+import { Button as ButtonPrimitive, Dialog as DialogPrimitive, Heading, Text } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 
 import { useMediaQuery } from '@/utils/use-media-query';
@@ -17,22 +17,22 @@ const dialogStyles = tv({
       'relative flex flex-col gap-0.5 p-4 sm:gap-1 sm:p-6 [&[data-slot=dialog-header]:has(+[data-slot=dialog-footer])]:pb-0',
     description: 'text-muted-fg text-sm',
     body: [
-      'isolate flex flex-1 flex-col overflow-auto px-4 sm:px-6',
+      'isolate flex flex-1 flex-col overflow-auto px-4 py-1 sm:px-6',
       'max-h-[calc(var(--visual-viewport-height)-var(--visual-viewport-vertical-padding)-var(--dialog-header-height,0px)-var(--dialog-footer-height,0px))]'
     ],
-    footer: 'isolate mt-auto flex flex-col-reverse justify-between gap-3 p-4 sm:flex-row sm:p-6',
+    footer: 'isolate mt-auto flex flex-col-reverse justify-between gap-3 p-4 pt-3 sm:flex-row sm:p-6 sm:pt-5',
     closeIndicator:
       'close absolute top-1 right-1 z-50 grid size-8 place-content-center rounded-xl data-focused:bg-secondary data-hovered:bg-secondary data-focused:outline-hidden data-focus-visible:ring-1 data-focus-visible:ring-primary sm:top-2 sm:right-2 sm:size-7 sm:rounded-md'
   }
 });
 
 const { root, header, description, body, footer, closeIndicator } = dialogStyles();
 
-const Dialog = ({ role, className, ...props }: DialogProps) => {
-  return <DialogPrimitive role={role ?? 'dialog'} className={root({ className })} {...props} />;
+const Dialog = ({ role = 'dialog', className, ...props }: React.ComponentProps<typeof DialogPrimitive>) => {
+  return <DialogPrimitive role={role} className={root({ className })} {...props} />;
 };
 
-const Trigger = (props: ButtonPrimitiveProps) => <ButtonPrimitive slot="close" {...props} />;
+const Trigger = (props: React.ComponentProps<typeof ButtonPrimitive>) => <ButtonPrimitive {...props} />;
 
 type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
   title?: string;
@@ -89,7 +89,7 @@ const Title = ({ level = 2, className, ref, ...props }: DialogTitleProps) => (
 
 type DialogDescriptionProps = React.ComponentProps<'div'>;
 const Description = ({ className, ref, ...props }: DialogDescriptionProps) => (
-  <div className={description({ className })} ref={ref} {...props} />
+  <Text slot="description" className={description({ className })} ref={ref} {...props} />
 );
 
 type DialogBodyProps = React.ComponentProps<'div'>;

resources/js/components/ui/dialog.tsx

@@ -2,7 +2,6 @@ import { cn } from '@/utils/classes';
 import { IconCheck } from 'justd-icons';
 import {
   Collection,
-  composeRenderProps,
   Header,
   ListBoxItem as ListBoxItemPrimitive,
   type ListBoxItemProps,
@@ -11,7 +10,8 @@ import {
   Separator,
   type SeparatorProps,
   Text,
-  type TextProps
+  type TextProps,
+  composeRenderProps
 } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 import { Keyboard } from './keyboard';
@@ -145,11 +145,11 @@ const DropdownKeyboard = ({ className, ...props }: React.ComponentProps<typeof K
 export {
   DropdownItem,
   DropdownItemDetails,
-  dropdownItemStyles,
   DropdownKeyboard,
   DropdownLabel,
   DropdownSection,
-  dropdownSectionStyles,
-  DropdownSeparator
+  DropdownSeparator,
+  dropdownItemStyles,
+  dropdownSectionStyles
 };
 export type { DropdownItemDetailProps, DropdownItemProps, DropdownSectionProps };

resources/js/components/ui/dropdown.tsx

@@ -8,12 +8,12 @@ import type {
   ValidationResult
 } from 'react-aria-components';
 import {
-  composeRenderProps,
   FieldError as FieldErrorPrimitive,
   Group,
   Input as InputPrimitive,
   Label as LabelPrimitive,
-  Text
+  Text,
+  composeRenderProps
 } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 
@@ -31,15 +31,12 @@ interface FieldProps {
 const fieldStyles = tv({
   slots: {
     description: 'text-pretty text-muted-fg text-sm/6',
-    label: 'w-fit cursor-default font-medium text-secondary-fg text-sm',
-    fieldError: 'text-danger text-sm/6 forced-colors:text-[Mark]',
-    input: [
-      'w-full min-w-0 bg-transparent px-2.5 py-2 text-base text-fg placeholder-muted-fg outline-hidden data-focused:outline-hidden sm:text-sm [&::-ms-reveal]:hidden'
-    ]
+    label: 'w-fit cursor-default font-medium text-secondary-fg text-sm/6',
+    fieldError: 'text-danger text-sm/6 forced-colors:text-[Mark]'
   }
 });
 
-const { description, label, fieldError, input } = fieldStyles();
+const { description, label, fieldError } = fieldStyles();
 
 const Label = ({ className, ...props }: LabelProps) => {
   return <LabelPrimitive {...props} className={label({ className })} />;
@@ -71,12 +68,18 @@ const FieldError = ({ className, ref, ...props }: FieldErrorProps) => {
 
 const fieldGroupStyles = tv({
   base: [
-    'group flex h-10 items-center overflow-hidden rounded-lg border border-input transition duration-200 ease-out',
-    'focus-within:ring-4 group-data-invalid:focus-within:border-danger group-data-invalid:focus-within:ring-danger/20',
-    '[&>[role=progressbar]]:mr-2.5',
-    '**:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0',
-    '*:data-[slot=suffix]:mr-2.5 *:data-[slot=suffix]:text-muted-fg',
-    '*:data-[slot=prefix]:ml-2.5 *:data-[slot=prefix]:text-muted-fg'
+    'group flex h-10 items-center overflow-hidden rounded-lg border border-input shadow-xs transition duration-200 ease-out',
+    'relative focus-within:ring-4 group-data-invalid:focus-within:border-danger group-data-invalid:focus-within:ring-danger/20',
+    '[&>[role=progressbar]:first-child]:ml-2.5 [&>[role=progressbar]:last-child]:mr-2.5',
+    '**:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0 **:[button]:shrink-0',
+    '[&>button:has([data-slot=icon]):first-child]:left-0 [&>button:has([data-slot=icon]):last-child]:right-0 [&>button:has([data-slot=icon])]:absolute',
+    '*:data-[slot=icon]:pointer-events-none *:data-[slot=icon]:absolute *:data-[slot=icon]:top-[calc(var(--spacing)*2.7)] *:data-[slot=icon]:z-10 *:data-[slot=icon]:size-4 *:data-[slot=icon]:text-muted-fg',
+    '[&>[data-slot=icon]:first-child]:left-2.5 [&>[data-slot=icon]:last-child]:right-2.5',
+    '[&:has([data-slot=icon]+input)]:pl-6 [&:has(input+[data-slot=icon])]:pr-6',
+    '[&:has([data-slot=icon]+[role=group])]:pl-6 [&:has([role=group]+[data-slot=icon])]:pr-6',
+    'has-[[data-slot=icon]:last-child]:[&_input]:pr-7',
+    '*:[button]:h-8 *:[button]:rounded-[calc(var(--radius-sm)-1px)] *:[button]:px-2.5',
+    '[&>button:first-child]:ml-[calc(var(--spacing)*0.7)] [&>button:last-child]:mr-[calc(var(--spacing)*0.7)]'
   ],
   variants: {
     isFocusWithin: focusStyles.variants.isFocused,
@@ -104,8 +107,18 @@ const FieldGroup = ({ className, ...props }: GroupProps) => {
 interface InputProps extends InputPrimitiveProps {
   ref?: React.RefObject<HTMLInputElement>;
 }
+
 const Input = ({ className, ref, ...props }: InputProps) => {
-  return <InputPrimitive ref={ref} {...props} className={composeTailwindRenderProps(className, input())} />;
+  return (
+    <InputPrimitive
+      ref={ref}
+      {...props}
+      className={composeTailwindRenderProps(
+        className,
+        'w-full min-w-0 bg-transparent px-2.5 py-2 text-base text-fg placeholder-muted-fg outline-hidden data-focused:outline-hidden sm:text-sm/6 [&::-ms-reveal]:hidden [&::-webkit-search-cancel-button]:hidden'
+      )}
+    />
+  );
 };
 
 export { Description, FieldError, FieldGroup, Input, Label };

resources/js/components/ui/field.tsx

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 
 const keyboardStyles = tv({
   slots: {
-    base: 'hidden text-current/70 group-data-focused:text-fg group-data-hovered:text-fg group-data-disabled:opacity-50 group-data-focused:opacity-90 lg:inline-flex lg:inline-flex forced-colors:group-data-focused:text-[HighlightText]',
+    base: 'hidden text-current/70 group-data-focused:text-fg group-data-hovered:text-fg group-data-disabled:opacity-50 group-data-focused:opacity-90 lg:inline-flex forced-colors:group-data-focused:text-[HighlightText]',
     kbd: 'inline-grid min-h-5 min-w-[2ch] place-content-center rounded text-center font-sans text-[.75rem] uppercase'
   }
 });

resources/js/components/ui/keyboard.tsx

@@ -1,4 +1,4 @@
-import { composeRenderProps, Link as LinkPrimitive, type LinkProps as LinkPrimitiveProps } from 'react-aria-components';
+import { Link as LinkPrimitive, type LinkProps as LinkPrimitiveProps, composeRenderProps } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 
 import { focusButtonStyles } from './primitive';
@@ -37,5 +37,5 @@ const Link = ({ className, ref, ...props }: LinkProps) => {
   );
 };
 
-export { Link };
+export { Link, linkStyles };
 export type { LinkProps };