-
-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #83 from justdlabs/laravel-11.x
Laravel 11.x
- Loading branch information
Showing
17 changed files
with
523 additions
and
298 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,15 @@ | ||
|
||
|
||
## [1.0.3](https://github.com/justdlabs/inertia.ts/compare/1.0.2...1.0.3) (2024-08-05) | ||
|
||
## [1.0.2](https://github.com/justdlabs/inertia.ts/compare/1.0.1...1.0.2) (2024-08-04) | ||
|
||
## 1.0.1 (2024-08-04) | ||
|
||
|
||
### Bug Fixes | ||
|
||
* make all automate ([ac5b394](https://github.com/justdlabs/inertia.ts/commit/ac5b3945c2cb5576a908939a2b9420b9db05d411)) | ||
|
||
- make all automate ([ac5b394](https://github.com/justdlabs/inertia.ts/commit/ac5b3945c2cb5576a908939a2b9420b9db05d411)) | ||
|
||
### Chores | ||
|
||
* Update build command in readme ([7076e29](https://github.com/justdlabs/inertia.ts/commit/7076e29aed986a524adecce8b4176df531a6485d)) | ||
- Update build command in readme ([7076e29](https://github.com/justdlabs/inertia.ts/commit/7076e29aed986a524adecce8b4176df531a6485d)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -80,5 +80,5 @@ | |
} | ||
} | ||
}, | ||
"version": "1.0.2" | ||
"version": "1.0.3" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,150 @@ | ||
import { Dialog as DialogPrimitive, type DialogProps } from 'react-aria-components' | ||
import { twMerge } from 'tailwind-merge' | ||
import * as React from 'react' | ||
|
||
import { IconX } from '@irsyadadl/paranoid' | ||
import { Dialog as DialogPrimitive, type DialogProps, OverlayTriggerStateContext } from 'react-aria-components' | ||
import { tv } from 'tailwind-variants' | ||
|
||
import type { ButtonProps } from './button' | ||
import { Button } from './button' | ||
import type { HeadingProps } from './heading' | ||
import { Heading } from './heading' | ||
import { useMediaQuery } from './primitive' | ||
|
||
const dialogStyles = tv({ | ||
slots: { | ||
root: [ | ||
'dlc peer relative flex max-h-[inherit] [&::-webkit-scrollbar]:size-0.5 [scrollbar-width:thin] flex-col overflow-hidden outline-none peer', | ||
'[&:not(:has([data-slot=dialog-body]))]:px-6 [&:has([data-slot=dialog-body])_[data-slot=dialog-header]]:px-6 [&:has([data-slot=dialog-body])_[data-slot=dialog-footer]]:px-6' | ||
], | ||
header: 'relative flex flex-col pb-2.5 gap-y-0.5 pt-6', | ||
title: 'flex flex-1 items-center', | ||
description: 'text-sm text-muted-fg', | ||
body: [ | ||
'flex flex-1 flex-col gap-2 overflow-auto 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: 'mt-auto flex flex-col-reverse justify-between gap-3 pb-6 pt-4 sm:flex-row', | ||
closeIndicator: 'close absolute right-2 top-2 size-6 z-50' | ||
} | ||
}) | ||
|
||
const { root, header, title, description, body, footer, closeIndicator } = dialogStyles() | ||
|
||
const Dialog = ({ role, className, ...props }: DialogProps) => { | ||
return <DialogPrimitive {...props} role={role ?? 'dialog'} className={root({ className })} /> | ||
} | ||
|
||
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => { | ||
const headerRef = React.useRef<HTMLHeadingElement>(null) | ||
|
||
React.useEffect(() => { | ||
const header = headerRef.current | ||
if (!header) { | ||
return | ||
} | ||
|
||
const observer = new ResizeObserver((entries) => { | ||
for (const entry of entries) { | ||
header.parentElement?.style.setProperty('--dialog-header-height', `${entry.target.clientHeight}px`) | ||
} | ||
}) | ||
|
||
observer.observe(header) | ||
return () => { | ||
observer.unobserve(header) | ||
} | ||
}, []) | ||
|
||
const Dialog = ({ className, ...props }: DialogProps) => { | ||
return ( | ||
<DialogPrimitive | ||
{...props} | ||
className={twMerge( | ||
'relative max-h-[inherit] overflow-y-auto p-4 focus:outline-none outline-0 [[data-placement]>&]:p-4 dlc', | ||
className | ||
)} | ||
/> | ||
<div data-slot="dialog-header" ref={headerRef} className={header({ className })}> | ||
{typeof props.children === 'string' ? <DialogTitle {...props} /> : props.children} | ||
</div> | ||
) | ||
} | ||
|
||
export { Dialog } | ||
interface DialogTitleProps extends HeadingProps { | ||
className?: string | ||
} | ||
|
||
const DialogTitle = ({ tracking = 'tight', level = 2, className, ...props }: DialogTitleProps) => ( | ||
<Heading slot="title" tracking={tracking} level={level} className={title({ className })} {...props} /> | ||
) | ||
|
||
const DialogDescription = ({ className, ...props }: HeadingProps) => ( | ||
<p className={description({ className })} {...props} /> | ||
) | ||
|
||
const DialogBody = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => ( | ||
<div data-slot="dialog-body" className={body({ className })} {...props} /> | ||
) | ||
|
||
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => { | ||
const footerRef = React.useRef<HTMLDivElement>(null) | ||
|
||
React.useEffect(() => { | ||
const footer = footerRef.current | ||
|
||
if (!footer) { | ||
return | ||
} | ||
|
||
const observer = new ResizeObserver((entries) => { | ||
for (const entry of entries) { | ||
footer.parentElement?.style.setProperty('--dialog-footer-height', `${entry.target.clientHeight}px`) | ||
} | ||
}) | ||
|
||
observer.observe(footer) | ||
return () => { | ||
observer.unobserve(footer) | ||
} | ||
}, []) | ||
return <div ref={footerRef} data-slot="dialog-footer" className={footer({ className })} {...props} /> | ||
} | ||
|
||
const DialogClose = ({ className, ...props }: ButtonProps) => { | ||
const state = React.useContext(OverlayTriggerStateContext)! | ||
return <Button className={className} appearance="outline" onPress={() => state.close()} {...props} /> | ||
} | ||
|
||
interface CloseButtonIndicatorProps { | ||
className?: string | ||
close: () => void | ||
isDismissable?: boolean | undefined | ||
} | ||
|
||
const DialogCloseIndicator = ({ className, ...props }: CloseButtonIndicatorProps) => { | ||
const isMobile = useMediaQuery('(max-width: 600px)') | ||
const buttonRef = React.useRef<HTMLButtonElement>(null) | ||
|
||
React.useEffect(() => { | ||
if (isMobile && buttonRef.current) { | ||
buttonRef.current.focus() | ||
} | ||
}, [isMobile]) | ||
return props.isDismissable ? ( | ||
<Button | ||
ref={buttonRef} | ||
{...(isMobile ? { autoFocus: true } : {})} | ||
appearance="plain" | ||
size="square-petite" | ||
aria-label="Close" | ||
onPress={props.close} | ||
className={closeIndicator({ className })} | ||
> | ||
<IconX className="size-4" /> | ||
</Button> | ||
) : null | ||
} | ||
|
||
export { | ||
Dialog, | ||
DialogBody, | ||
DialogClose, | ||
DialogCloseIndicator, | ||
DialogDescription, | ||
DialogFooter, | ||
DialogHeader, | ||
DialogTitle, | ||
type DialogTitleProps | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
import { isIOS } from '@react-aria/utils' | ||
import { Heading as HeadingPrimitive, type HeadingProps as HeadingPrimitiveProps } from 'react-aria-components' | ||
import { tv } from 'tailwind-variants' | ||
|
||
const headingStyles = tv({ | ||
base: 'font-sans tracking-tight text-fg', | ||
variants: { | ||
level: { | ||
1: 'font-bold text-lg', | ||
2: 'font-semibold text-lg sm:text-lg/5', | ||
3: 'font-semibold text-base/6 sm:text-base/6', | ||
4: 'font-medium text-base/6 sm:text-sm/6' | ||
}, | ||
tracking: { | ||
tighter: 'tracking-tighter', | ||
tight: 'tracking-tight', | ||
normal: 'tracking-normal', | ||
wide: 'tracking-wide', | ||
wider: 'tracking-wider', | ||
widest: 'tracking-widest' | ||
} | ||
} | ||
}) | ||
|
||
interface HeadingProps extends HeadingPrimitiveProps { | ||
level?: 1 | 2 | 3 | 4 | ||
tracking?: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | ||
className?: string | ||
} | ||
|
||
const Heading = ({ className, tracking = 'normal', level = 1, ...props }: HeadingProps) => { | ||
return ( | ||
<HeadingPrimitive | ||
level={level} | ||
className={headingStyles({ | ||
level, | ||
tracking, | ||
className: isIOS() ? 'font-medium' : className | ||
})} | ||
{...props} | ||
/> | ||
) | ||
} | ||
|
||
export { Heading, type HeadingProps } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.