diff --git a/.changeset/config.json b/.changeset/config.json
index 91b6a95..432b15a 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -1,11 +1,11 @@
{
- "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
- "changelog": "@changesets/cli/changelog",
- "commit": false,
- "fixed": [],
- "linked": [],
- "access": "restricted",
- "baseBranch": "main",
- "updateInternalDependencies": "patch",
- "ignore": []
+ "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
+ "changelog": "@changesets/cli/changelog",
+ "commit": false,
+ "fixed": [],
+ "linked": [],
+ "access": "restricted",
+ "baseBranch": "main",
+ "updateInternalDependencies": "patch",
+ "ignore": []
}
diff --git a/.commitlintrc.json b/.commitlintrc.json
new file mode 100644
index 0000000..d8ad12a
--- /dev/null
+++ b/.commitlintrc.json
@@ -0,0 +1,27 @@
+{
+ "extends": ["@commitlint/config-conventional"],
+ "rules": {
+ "type-enum": [
+ 2,
+ "always",
+ [
+ "build",
+ "chore",
+ "ci",
+ "config",
+ "docs",
+ "feat",
+ "fix",
+ "perf",
+ "refactor",
+ "revert",
+ "style",
+ "test"
+ ]
+ ],
+ "scope-empty": [0],
+ "subject-empty": [2, "never"],
+ "subject-case": [2, "always", "lower-case"],
+ "body-leading-blank": [2, "always"]
+ }
+}
diff --git a/.lefthook/commit-msg/commitlint.sh b/.lefthook/commit-msg/commitlint.sh
new file mode 100644
index 0000000..ac4a39b
--- /dev/null
+++ b/.lefthook/commit-msg/commitlint.sh
@@ -0,0 +1,6 @@
+# .lefthook/commit-msg/commitlint.sh
+
+#!/bin/bash
+
+# Print the commit message
+echo $(head -n1 "$1") | bunx commitlint --color
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1121718..622000b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,53 +1,43 @@
{
- "[css]": {
- "editor.defaultFormatter": "esbenp.prettier-vscode"
- },
- "[javascript]": {
- "editor.defaultFormatter": "esbenp.prettier-vscode"
- },
- "[javascriptreact]": {
- "editor.defaultFormatter": "esbenp.prettier-vscode"
- },
- "[typescript]": {
- "editor.defaultFormatter": "esbenp.prettier-vscode"
- },
- "[typescriptreact]": {
- "editor.defaultFormatter": "esbenp.prettier-vscode"
- },
- "editor.codeActionsOnSave": {
- "source.fixAll": "explicit",
- "source.fixAll.eslint": "explicit"
- },
- "editor.defaultFormatter": "esbenp.prettier-vscode",
- "editor.formatOnPaste": false,
- "editor.formatOnSave": true,
- "eslint.format.enable": true,
- "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
- "files.encoding": "utf8",
- "files.insertFinalNewline": true,
- "files.trimTrailingWhitespace": true,
- "javascript.preferences.importModuleSpecifier": "non-relative",
- "javascript.updateImportsOnFileMove.enabled": "always",
- "prettier.useEditorConfig": true,
- "search.exclude": {
- "**/package-lock.json": true,
- "**/pnpm-lock.yaml": true,
- ".cache/**": true,
- ".git/**": true,
- "coverage/**": true,
- "dist/**": true,
- "generated/**": true,
- "node_modules/**": true,
- "public/**": true
- },
- "tailwindCSS.experimental.classRegex": [
- ["cn"],
- ["className\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
- ["classNams\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
- ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
- ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
- ],
- "typescript.preferences.importModuleSpecifier": "non-relative",
- "typescript.suggest.autoImports": true,
- "typescript.updateImportsOnFileMove.enabled": "always"
+ "[css]": {
+ "editor.defaultFormatter": "biomejs.biome"
+ },
+ "[javascript]": {
+ "editor.defaultFormatter": "biomejs.biome"
+ },
+ "[javascriptreact]": {
+ "editor.defaultFormatter": "biomejs.biome"
+ },
+ "[typescript]": {
+ "editor.defaultFormatter": "biomejs.biome"
+ },
+ "[typescriptreact]": {
+ "editor.defaultFormatter": "biomejs.biome"
+ },
+ "editor.codeActionsOnSave": {
+ "source.fixAll": "explicit",
+ "source.fixAll.eslint": "explicit"
+ },
+ "editor.defaultFormatter": "biomejs.biome",
+ "editor.formatOnPaste": false,
+ "editor.formatOnSave": true,
+ "files.encoding": "utf8",
+ "files.insertFinalNewline": true,
+ "files.trimTrailingWhitespace": true,
+ "javascript.preferences.importModuleSpecifier": "non-relative",
+ "javascript.updateImportsOnFileMove.enabled": "always",
+ "search.exclude": {
+ "**/package-lock.json": true,
+ "**/pnpm-lock.yaml": true,
+ ".cache/**": true,
+ ".git/**": true,
+ "coverage/**": true,
+ "dist/**": true,
+ "generated/**": true,
+ "node_modules/**": true,
+ "public/**": true
+ },
+ "typescript.preferences.importModuleSpecifier": "non-relative",
+ "typescript.suggest.autoImports": true,
+ "typescript.updateImportsOnFileMove.enabled": "always"
}
diff --git a/app.tsx b/app.tsx
index d3f3b4c..4d76af1 100644
--- a/app.tsx
+++ b/app.tsx
@@ -1,32 +1,32 @@
import {
- Button,
- Combobox,
- ComboboxContent,
- ComboboxItem,
- ComboboxTrigger,
- Drawer,
- DrawerContent,
- DrawerTrigger,
- Popover,
- PopoverContent,
- PopoverTrigger,
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
-} from "@/components";
-import { DrawerClose } from "@/components/drawer/components/drawer-close";
-import { DrawerDescription } from "@/components/drawer/components/drawer-description";
-import { DrawerHeader } from "@/components/drawer/components/drawer-header";
-import { DrawerTitle } from "@/components/drawer/components/drawer-title";
-import React, { useState } from "react";
+ Button,
+ Combobox,
+ ComboboxContent,
+ ComboboxItem,
+ ComboboxTrigger,
+ Drawer,
+ DrawerContent,
+ DrawerTrigger,
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+} from '@/components'
+import { DrawerClose } from '@/components/drawer/components/drawer-close'
+import { DrawerDescription } from '@/components/drawer/components/drawer-description'
+import { DrawerHeader } from '@/components/drawer/components/drawer-header'
+import { DrawerTitle } from '@/components/drawer/components/drawer-title'
+import React, { useState } from 'react'
const App = () => {
- const [state, setValue] = useState("");
+ const [state, setValue] = useState('')
- return (
-
- {/*
+ return (
+
+ {/*
Trigger
@@ -45,25 +45,25 @@ const App = () => {
Item 2
*/}
- {/*
+ {/*
Trigger
Item
Item 2
*/}
-
- Trigger
-
- X
-
- Title
- Description
-
-
-
-
- {error ?? children}
-
- )
+ return (
+
+ {error ?? children}
+
+ )
}
export { FieldMessage }
diff --git a/src/components/_shared/components/field/field/field.tsx b/src/components/_shared/components/field/field/field.tsx
index b915529..276661f 100644
--- a/src/components/_shared/components/field/field/field.tsx
+++ b/src/components/_shared/components/field/field/field.tsx
@@ -3,15 +3,15 @@ import React from 'react'
import { FieldProvider } from '@/components/_shared/components/field/field-context/field-context'
const Field = React.forwardRef((props, ref) => {
- const { children, error } = props
+ const { children, error } = props
- const id = React.useId()
+ const id = React.useId()
- return (
-
- {children}
-
- )
+ return (
+
+ {children}
+
+ )
})
Field.displayName = 'Field'
diff --git a/src/components/_shared/components/icons/caret-sort-icon.tsx b/src/components/_shared/components/icons/caret-sort-icon.tsx
index 5751d7f..32ea01d 100644
--- a/src/components/_shared/components/icons/caret-sort-icon.tsx
+++ b/src/components/_shared/components/icons/caret-sort-icon.tsx
@@ -1,16 +1,16 @@
-import React from "react";
+import React from 'react'
-const CaretSortIcon = (props: React.ComponentPropsWithRef<"svg">) => {
- return (
-
- );
-};
+const CaretSortIcon = (props: React.ComponentPropsWithRef<'svg'>) => {
+ return (
+
+ )
+}
-export { CaretSortIcon };
+export { CaretSortIcon }
diff --git a/src/components/_shared/components/icons/check-icon.tsx b/src/components/_shared/components/icons/check-icon.tsx
index d97afb1..629b92a 100644
--- a/src/components/_shared/components/icons/check-icon.tsx
+++ b/src/components/_shared/components/icons/check-icon.tsx
@@ -1,16 +1,16 @@
-import React from "react";
+import React from 'react'
-const CheckIcon = (props: React.ComponentPropsWithRef<"svg">) => {
- return (
-
- );
-};
+const CheckIcon = (props: React.ComponentPropsWithRef<'svg'>) => {
+ return (
+
+ )
+}
-export { CheckIcon };
+export { CheckIcon }
diff --git a/src/components/_shared/components/icons/chevron-down-icon.tsx b/src/components/_shared/components/icons/chevron-down-icon.tsx
index 18d9dcb..0be6fae 100644
--- a/src/components/_shared/components/icons/chevron-down-icon.tsx
+++ b/src/components/_shared/components/icons/chevron-down-icon.tsx
@@ -1,16 +1,16 @@
-import React from "react";
+import React from 'react'
-const ChevronDownIcon = (props: React.ComponentPropsWithRef<"svg">) => {
- return (
-
- );
-};
+const ChevronDownIcon = (props: React.ComponentPropsWithRef<'svg'>) => {
+ return (
+
+ )
+}
-export { ChevronDownIcon };
+export { ChevronDownIcon }
diff --git a/src/components/_shared/components/icons/chevron-up-icon.tsx b/src/components/_shared/components/icons/chevron-up-icon.tsx
index 4c9cd2e..e801abb 100644
--- a/src/components/_shared/components/icons/chevron-up-icon.tsx
+++ b/src/components/_shared/components/icons/chevron-up-icon.tsx
@@ -1,16 +1,16 @@
-import React from "react";
+import React from 'react'
-const ChevronUpIcon = (props: React.ComponentPropsWithRef<"svg">) => {
- return (
-
- );
-};
+const ChevronUpIcon = (props: React.ComponentPropsWithRef<'svg'>) => {
+ return (
+
+ )
+}
-export { ChevronUpIcon };
+export { ChevronUpIcon }
diff --git a/src/components/_shared/components/icons/cross-small-icon.tsx b/src/components/_shared/components/icons/cross-small-icon.tsx
index 4b7e96b..3ddb1f6 100644
--- a/src/components/_shared/components/icons/cross-small-icon.tsx
+++ b/src/components/_shared/components/icons/cross-small-icon.tsx
@@ -1,16 +1,16 @@
-import React from "react";
+import React from 'react'
-const CrossSmallIcon = (props: React.ComponentPropsWithRef<"svg">) => {
- return (
-
- );
-};
+const CrossSmallIcon = (props: React.ComponentPropsWithRef<'svg'>) => {
+ return (
+
+ )
+}
-export { CrossSmallIcon };
+export { CrossSmallIcon }
diff --git a/src/components/_shared/components/icons/eye-none-icon.tsx b/src/components/_shared/components/icons/eye-none-icon.tsx
index 24e927c..616c85e 100644
--- a/src/components/_shared/components/icons/eye-none-icon.tsx
+++ b/src/components/_shared/components/icons/eye-none-icon.tsx
@@ -1,16 +1,16 @@
-import React from "react";
+import React from 'react'
-const EyeNoneIcon = (props: React.ComponentPropsWithRef<"svg">) => {
- return (
-
- );
-};
+const EyeNoneIcon = (props: React.ComponentPropsWithRef<'svg'>) => {
+ return (
+
+ )
+}
-export { EyeNoneIcon };
+export { EyeNoneIcon }
diff --git a/src/components/_shared/components/icons/eye-open-icon.tsx b/src/components/_shared/components/icons/eye-open-icon.tsx
index 52846cb..372dfcd 100644
--- a/src/components/_shared/components/icons/eye-open-icon.tsx
+++ b/src/components/_shared/components/icons/eye-open-icon.tsx
@@ -1,16 +1,16 @@
-import React from "react";
+import React from 'react'
-const EyeOpenIcon = (props: React.ComponentPropsWithRef<"svg">) => {
- return (
-
- );
-};
+const EyeOpenIcon = (props: React.ComponentPropsWithRef<'svg'>) => {
+ return (
+
+ )
+}
-export { EyeOpenIcon };
+export { EyeOpenIcon }
diff --git a/src/components/_shared/components/icons/magnifying-glass-icon.tsx b/src/components/_shared/components/icons/magnifying-glass-icon.tsx
index ce76e46..3399767 100644
--- a/src/components/_shared/components/icons/magnifying-glass-icon.tsx
+++ b/src/components/_shared/components/icons/magnifying-glass-icon.tsx
@@ -1,16 +1,16 @@
-import React from "react";
+import React from 'react'
-const MagnifyingGlassIcon = (props: React.ComponentPropsWithRef<"svg">) => {
- return (
-
- );
-};
+const MagnifyingGlassIcon = (props: React.ComponentPropsWithRef<'svg'>) => {
+ return (
+
+ )
+}
-export { MagnifyingGlassIcon };
+export { MagnifyingGlassIcon }
diff --git a/src/components/_shared/components/modal-close/modal-close.tsx b/src/components/_shared/components/modal-close/modal-close.tsx
index 7d6e113..12f245c 100644
--- a/src/components/_shared/components/modal-close/modal-close.tsx
+++ b/src/components/_shared/components/modal-close/modal-close.tsx
@@ -1,20 +1,15 @@
-"use client";
+'use client'
-import { DialogClose as DialogClosePrimitive } from "@radix-ui/react-dialog";
-import { cn } from "@renderui/utils";
-import React from "react";
+import { DialogClose as DialogClosePrimitive } from '@radix-ui/react-dialog'
+import { cn } from '@renderui/utils'
+import React from 'react'
-type DialogCloseProps = React.ComponentProps;
+type DialogCloseProps = React.ComponentProps
const ModalClose = (props: DialogCloseProps) => {
- const { className, ...restProps } = props;
+ const { className, ...restProps } = props
- return (
-
- );
-};
+ return
+}
-export { ModalClose };
+export { ModalClose }
diff --git a/src/components/_shared/components/modal-description/modal-description.tsx b/src/components/_shared/components/modal-description/modal-description.tsx
index 77986a0..e15d226 100644
--- a/src/components/_shared/components/modal-description/modal-description.tsx
+++ b/src/components/_shared/components/modal-description/modal-description.tsx
@@ -1,19 +1,19 @@
-import { cx } from "@renderui/utils";
-import React from "react";
+import { cx } from '@renderui/utils'
+import React from 'react'
-import { Text, TextProps } from "@/components/text";
+import { Text, TextProps } from '@/components/text'
const ModalDescription = (props: TextProps) => {
- const { className, size = "sm", ...restProps } = props;
+ const { className, size = 'sm', ...restProps } = props
- return (
-
- );
-};
+ return (
+
+ )
+}
-export { ModalDescription };
+export { ModalDescription }
diff --git a/src/components/_shared/components/modal-footer/modal-footer.tsx b/src/components/_shared/components/modal-footer/modal-footer.tsx
index f01576a..9f168c3 100644
--- a/src/components/_shared/components/modal-footer/modal-footer.tsx
+++ b/src/components/_shared/components/modal-footer/modal-footer.tsx
@@ -1,21 +1,21 @@
-import { cx } from "@renderui/utils";
-import React from "react";
+import { cx } from '@renderui/utils'
+import React from 'react'
-import { Flex, FlexProps } from "@/components/flex";
+import { Flex, FlexProps } from '@/components/flex'
const ModalFooter = (props: FlexProps) => {
- const { className, ...restProps } = props;
+ const { className, ...restProps } = props
- return (
-
- );
-};
+ return (
+
+ )
+}
-export { ModalFooter };
+export { ModalFooter }
diff --git a/src/components/_shared/components/modal-header/modal-header.tsx b/src/components/_shared/components/modal-header/modal-header.tsx
index f949dc2..97ac5b2 100644
--- a/src/components/_shared/components/modal-header/modal-header.tsx
+++ b/src/components/_shared/components/modal-header/modal-header.tsx
@@ -1,18 +1,18 @@
-import { cx } from "@renderui/utils";
-import React from "react";
+import { cx } from '@renderui/utils'
+import React from 'react'
-import { Grid, GridProps } from "@/components/grid";
+import { Grid, GridProps } from '@/components/grid'
const ModalHeader = (props: GridProps) => {
- const { className, ...restProps } = props;
+ const { className, ...restProps } = props
- return (
-
- );
-};
+ return (
+
+ )
+}
-export { ModalHeader };
+export { ModalHeader }
diff --git a/src/components/_shared/components/modal-title/modal-title.tsx b/src/components/_shared/components/modal-title/modal-title.tsx
index af12c15..0cf8de2 100644
--- a/src/components/_shared/components/modal-title/modal-title.tsx
+++ b/src/components/_shared/components/modal-title/modal-title.tsx
@@ -4,17 +4,17 @@ import React, { ComponentProps } from 'react'
import { DialogTitle } from '@radix-ui/react-dialog'
const ModalTitle = (props: ComponentProps) => {
- const { ref, className, color = 'mode-contrast', ...restProps } = props
+ const { ref, className, color = 'mode-contrast', ...restProps } = props
- return (
-
- )
+ return (
+
+ )
}
export { ModalTitle }
diff --git a/src/components/_shared/hooks/use-aria-handlers.ts b/src/components/_shared/hooks/use-aria-handlers.ts
index bcafea1..2e19bbf 100644
--- a/src/components/_shared/hooks/use-aria-handlers.ts
+++ b/src/components/_shared/hooks/use-aria-handlers.ts
@@ -1,17 +1,17 @@
import { mergeProps } from '@renderui/utils'
import React from 'react'
import {
- FocusProps,
- FocusRingProps,
- HoverProps,
- LongPressProps,
- PressEvent,
- PressHookProps,
- useFocus,
- useFocusRing,
- useHover,
- useLongPress,
- usePress,
+ FocusProps,
+ FocusRingProps,
+ HoverProps,
+ LongPressProps,
+ PressEvent,
+ PressHookProps,
+ useFocus,
+ useFocusRing,
+ useHover,
+ useLongPress,
+ usePress,
} from 'react-aria'
import { UseAriaHandlersProps } from '@/components/_shared/types/aria'
@@ -20,177 +20,177 @@ import { isKeyboardPointerType } from '@/components/_shared/utils/is-keyboard-po
import { chain } from '@renderui/utils/chain'
function useAriaHandlers(
- props: OrUndefined,
- ref: React.ForwardedRef | undefined,
+ props: OrUndefined,
+ ref: React.ForwardedRef | undefined,
) {
- const {
- // PRESS
- isPressDisabled,
- isPressed: isPressedControlled,
- preventFocusOnPress,
- allowTextSelectionOnPress,
- shouldCancelOnPointerExit,
- onPress,
- onPressStart,
- onPressEnd,
- onPressChange,
- onPressUp,
-
- // KEYBOARD PRESS
- onKeyboardPressStart,
- onKeyboardPressEnd,
- onKeyboardPress,
-
- // LONG PRESS
- isLongPressDisabled,
- longPressTreshold,
- longPressAccessibilityDescription,
- onLongPressStart,
- onLongPress,
- onLongPressEnd,
-
- // FOCUS
- isFocusDisabled,
- onFocus,
- onFocusChange,
- onBlur,
-
- // FOCUS WITHIN
- isTextInput,
- isFocusWithin,
-
- // HOVER
- isHoverDisabled,
- onHoverStart,
- onHoverChange,
- onHoverEnd,
-
- // NATIVE
- onDragStart,
- onKeyDown,
- onKeyUp,
- onMouseDown,
- onPointerDown,
- onPointerEnter,
- onPointerLeave,
- onPointerUp,
-
- isUsingAriaPressProps = true,
- } = props
-
- const [isKeyboardPressed, setIsKeyboardPressed] = React.useState(false)
- const [isLongPressed, setIsLongPressed] = React.useState(false)
-
- const handlePressStart = (event: PressEvent) => {
- if (isKeyboardPointerType(event)) setIsKeyboardPressed(true)
- }
-
- const handlePressEnd = (event: PressEvent) => {
- if (isKeyboardPointerType(event)) setIsKeyboardPressed(false)
- }
-
- const handleKeyboardPressStart = (event: PressEvent) => {
- if (isKeyboardPointerType(event) && onKeyboardPressStart) onKeyboardPressStart(event)
- }
-
- const handleKeyboardPressEnd = (event: PressEvent) => {
- if (isKeyboardPointerType(event) && onKeyboardPressEnd) onKeyboardPressEnd(event)
- }
-
- const handleKeyboardPress = (event: PressEvent) => {
- if (isKeyboardPointerType(event) && onKeyboardPress) onKeyboardPress(event)
- }
-
- // hooks propeties are asserted due to the decision to keep exactOptionalPropertyTypes: true - TS rule
-
- const { pressProps, isPressed } = usePress({
- ref,
- isPressed: isPressedControlled,
- preventFocusOnPress,
- allowTextSelectionOnPress,
- shouldCancelOnPointerExit,
- isDisabled: isPressDisabled,
- onPressChange,
- onPressUp,
- onPress: chain(handleKeyboardPress, onPress),
- onPressStart: chain(handlePressStart, handleKeyboardPressStart, onPressStart),
- onPressEnd: chain(handlePressEnd, handleKeyboardPressEnd, onPressEnd),
- } as PressHookProps)
-
- const { longPressProps } = useLongPress({
- isDisabled: isLongPressDisabled,
- threshold: longPressTreshold,
- accessibilityDescription: longPressAccessibilityDescription,
- onLongPressStart: chain(onLongPressStart, () => setIsLongPressed(true)),
- onLongPress,
- onLongPressEnd,
- } as LongPressProps)
-
- const { focusProps } = useFocus({
- isDisabled: isFocusDisabled,
- onFocus,
- onBlur,
- onFocusChange,
- } as FocusProps)
-
- const {
- focusProps: focusVisibleProps,
- isFocusVisible,
- isFocused,
- } = useFocusRing({
- isTextInput,
- within: isFocusWithin,
- } as FocusRingProps)
-
- const { hoverProps, isHovered } = useHover({
- isDisabled: isHoverDisabled,
- onHoverStart,
- onHoverChange,
- onHoverEnd,
- } as HoverProps)
-
- const ariaHandlerProps = mergeProps(
- isLongPressDisabled ? undefined : longPressProps,
- isUsingAriaPressProps ? pressProps : undefined,
- focusProps,
- focusVisibleProps,
- hoverProps,
- {
- onPointerUp: chain(onPointerUp, () => setIsLongPressed(false)),
- onPointerLeave: chain(onPointerLeave, () => setIsLongPressed(false)),
- onDragStart,
- onKeyDown,
- onKeyUp,
- onMouseDown,
- onPointerDown,
- onPointerEnter,
- },
- )
-
- const accessibilityProps = {
- 'aria-pressed': isPressed,
- 'data-pressed': isPressed,
- 'data-long-pressed': isLongPressed,
- 'data-keyboard-pressed': isKeyboardPressed,
- 'data-hover': isHovered,
- 'data-focus-within': isFocusWithin ? isFocused : undefined,
- 'data-focus': isFocusWithin ? undefined : isFocused,
- 'data-focus-visible': isFocusVisible,
- }
-
- return {
- ariaComponentProps: {
- ...accessibilityProps,
- ...ariaHandlerProps,
- },
- ariaFlags: {
- isPressed,
- isKeyboardPressed,
- isFocused,
- isFocusVisible,
- isHovered,
- },
- }
+ const {
+ // PRESS
+ isPressDisabled,
+ isPressed: isPressedControlled,
+ preventFocusOnPress,
+ allowTextSelectionOnPress,
+ shouldCancelOnPointerExit,
+ onPress,
+ onPressStart,
+ onPressEnd,
+ onPressChange,
+ onPressUp,
+
+ // KEYBOARD PRESS
+ onKeyboardPressStart,
+ onKeyboardPressEnd,
+ onKeyboardPress,
+
+ // LONG PRESS
+ isLongPressDisabled,
+ longPressTreshold,
+ longPressAccessibilityDescription,
+ onLongPressStart,
+ onLongPress,
+ onLongPressEnd,
+
+ // FOCUS
+ isFocusDisabled,
+ onFocus,
+ onFocusChange,
+ onBlur,
+
+ // FOCUS WITHIN
+ isTextInput,
+ isFocusWithin,
+
+ // HOVER
+ isHoverDisabled,
+ onHoverStart,
+ onHoverChange,
+ onHoverEnd,
+
+ // NATIVE
+ onDragStart,
+ onKeyDown,
+ onKeyUp,
+ onMouseDown,
+ onPointerDown,
+ onPointerEnter,
+ onPointerLeave,
+ onPointerUp,
+
+ isUsingAriaPressProps = true,
+ } = props
+
+ const [isKeyboardPressed, setIsKeyboardPressed] = React.useState(false)
+ const [isLongPressed, setIsLongPressed] = React.useState(false)
+
+ const handlePressStart = (event: PressEvent) => {
+ if (isKeyboardPointerType(event)) setIsKeyboardPressed(true)
+ }
+
+ const handlePressEnd = (event: PressEvent) => {
+ if (isKeyboardPointerType(event)) setIsKeyboardPressed(false)
+ }
+
+ const handleKeyboardPressStart = (event: PressEvent) => {
+ if (isKeyboardPointerType(event) && onKeyboardPressStart) onKeyboardPressStart(event)
+ }
+
+ const handleKeyboardPressEnd = (event: PressEvent) => {
+ if (isKeyboardPointerType(event) && onKeyboardPressEnd) onKeyboardPressEnd(event)
+ }
+
+ const handleKeyboardPress = (event: PressEvent) => {
+ if (isKeyboardPointerType(event) && onKeyboardPress) onKeyboardPress(event)
+ }
+
+ // hooks propeties are asserted due to the decision to keep exactOptionalPropertyTypes: true - TS rule
+
+ const { pressProps, isPressed } = usePress({
+ ref,
+ isPressed: isPressedControlled,
+ preventFocusOnPress,
+ allowTextSelectionOnPress,
+ shouldCancelOnPointerExit,
+ isDisabled: isPressDisabled,
+ onPressChange,
+ onPressUp,
+ onPress: chain(handleKeyboardPress, onPress),
+ onPressStart: chain(handlePressStart, handleKeyboardPressStart, onPressStart),
+ onPressEnd: chain(handlePressEnd, handleKeyboardPressEnd, onPressEnd),
+ } as PressHookProps)
+
+ const { longPressProps } = useLongPress({
+ isDisabled: isLongPressDisabled,
+ threshold: longPressTreshold,
+ accessibilityDescription: longPressAccessibilityDescription,
+ onLongPressStart: chain(onLongPressStart, () => setIsLongPressed(true)),
+ onLongPress,
+ onLongPressEnd,
+ } as LongPressProps)
+
+ const { focusProps } = useFocus({
+ isDisabled: isFocusDisabled,
+ onFocus,
+ onBlur,
+ onFocusChange,
+ } as FocusProps)
+
+ const {
+ focusProps: focusVisibleProps,
+ isFocusVisible,
+ isFocused,
+ } = useFocusRing({
+ isTextInput,
+ within: isFocusWithin,
+ } as FocusRingProps)
+
+ const { hoverProps, isHovered } = useHover({
+ isDisabled: isHoverDisabled,
+ onHoverStart,
+ onHoverChange,
+ onHoverEnd,
+ } as HoverProps)
+
+ const ariaHandlerProps = mergeProps(
+ isLongPressDisabled ? undefined : longPressProps,
+ isUsingAriaPressProps ? pressProps : undefined,
+ focusProps,
+ focusVisibleProps,
+ hoverProps,
+ {
+ onPointerUp: chain(onPointerUp, () => setIsLongPressed(false)),
+ onPointerLeave: chain(onPointerLeave, () => setIsLongPressed(false)),
+ onDragStart,
+ onKeyDown,
+ onKeyUp,
+ onMouseDown,
+ onPointerDown,
+ onPointerEnter,
+ },
+ )
+
+ const accessibilityProps = {
+ 'aria-pressed': isPressed,
+ 'data-pressed': isPressed,
+ 'data-long-pressed': isLongPressed,
+ 'data-keyboard-pressed': isKeyboardPressed,
+ 'data-hover': isHovered,
+ 'data-focus-within': isFocusWithin ? isFocused : undefined,
+ 'data-focus': isFocusWithin ? undefined : isFocused,
+ 'data-focus-visible': isFocusVisible,
+ }
+
+ return {
+ ariaComponentProps: {
+ ...accessibilityProps,
+ ...ariaHandlerProps,
+ },
+ ariaFlags: {
+ isPressed,
+ isKeyboardPressed,
+ isFocused,
+ isFocusVisible,
+ isHovered,
+ },
+ }
}
export { useAriaHandlers }
diff --git a/src/components/_shared/hooks/use-controllable-state.ts b/src/components/_shared/hooks/use-controllable-state.ts
index e7e4eaa..86897bf 100644
--- a/src/components/_shared/hooks/use-controllable-state.ts
+++ b/src/components/_shared/hooks/use-controllable-state.ts
@@ -2,8 +2,8 @@
import { useFreshRef } from '@/components/_shared/hooks/use-fresh-ref'
import {
- UseControllableStateProps,
- useUncontrolledState,
+ UseControllableStateProps,
+ useUncontrolledState,
} from '@/components/_shared/hooks/use-uncontrolled-state'
import { isFunction } from '@renderui/utils/is-function'
import { noop } from '@renderui/utils/noop'
@@ -12,32 +12,32 @@ import React from 'react'
type SetStateFunction = (previousState?: T) => T
function useControllableState({
- prop,
- defaultProp,
- onChange = noop,
+ prop,
+ defaultProp,
+ onChange = noop,
}: UseControllableStateProps) {
- const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange })
- const isControlled = prop !== undefined
- const value = isControlled ? prop : uncontrolledProp
- const handleChange = useFreshRef(onChange)
+ const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange })
+ const isControlled = prop !== undefined
+ const value = isControlled ? prop : uncontrolledProp
+ const handleChange = useFreshRef(onChange)
- const setValue: React.Dispatch> = React.useCallback(
- (nextValue) => {
- if (isControlled) {
- const setter = nextValue as SetStateFunction
- const value = typeof nextValue === 'function' ? setter(prop) : nextValue
+ const setValue: React.Dispatch> = React.useCallback(
+ (nextValue) => {
+ if (isControlled) {
+ const setter = nextValue as SetStateFunction
+ const value = typeof nextValue === 'function' ? setter(prop) : nextValue
- if (value !== prop) handleChange.current(value as T)
+ if (value !== prop) handleChange.current(value as T)
- return
- }
+ return
+ }
- if (isFunction(setUncontrolledProp)) setUncontrolledProp(nextValue)
- },
- [isControlled, prop, setUncontrolledProp, handleChange],
- )
+ if (isFunction(setUncontrolledProp)) setUncontrolledProp(nextValue)
+ },
+ [isControlled, prop, setUncontrolledProp, handleChange],
+ )
- return [value, setValue] as [T, React.Dispatch>]
+ return [value, setValue] as [T, React.Dispatch>]
}
export { useControllableState }
diff --git a/src/components/_shared/hooks/use-event-listener.ts b/src/components/_shared/hooks/use-event-listener.ts
index 6e2b0ac..e4568ab 100644
--- a/src/components/_shared/hooks/use-event-listener.ts
+++ b/src/components/_shared/hooks/use-event-listener.ts
@@ -6,82 +6,82 @@ import React from 'react'
/* MediaQueryList Event based useEventListener interface */
function useEventListener(props: {
- event: K
- handler: (event: MediaQueryListEventMap[K]) => void
- element: MediaQueryList
- enabled?: boolean
- options?: boolean | AddEventListenerOptions
+ event: K
+ handler: (event: MediaQueryListEventMap[K]) => void
+ element: MediaQueryList
+ enabled?: boolean
+ options?: boolean | AddEventListenerOptions
}): void
/* Window Event based useEventListener interface */
function useEventListener(props: {
- event: K
- handler: (event: WindowEventMap[K]) => void
- element?: undefined
- enabled?: boolean
- options?: boolean | AddEventListenerOptions
+ event: K
+ handler: (event: WindowEventMap[K]) => void
+ element?: undefined
+ enabled?: boolean
+ options?: boolean | AddEventListenerOptions
}): void
/* Element Event based useEventListener interface */
function useEventListener<
- K extends keyof HTMLElementEventMap,
- T extends HTMLElement = HTMLDivElement,
+ K extends keyof HTMLElementEventMap,
+ T extends HTMLElement = HTMLDivElement,
>(props: {
- event: K
- handler: (event: HTMLElementEventMap[K]) => void
- element: T | null
- enabled?: boolean
- options?: boolean | AddEventListenerOptions
+ event: K
+ handler: (event: HTMLElementEventMap[K]) => void
+ element: T | null
+ enabled?: boolean
+ options?: boolean | AddEventListenerOptions
}): void
/* Document Event based useEventListener interface */
function useEventListener(props: {
- event: K
- handler: (event: DocumentEventMap[K]) => void
- element: Document
- enabled?: boolean
- options?: boolean | AddEventListenerOptions
+ event: K
+ handler: (event: DocumentEventMap[K]) => void
+ element: Document
+ enabled?: boolean
+ options?: boolean | AddEventListenerOptions
}): void
function useEventListener<
- KW extends keyof WindowEventMap,
- KH extends keyof HTMLElementEventMap,
- KM extends keyof MediaQueryListEventMap,
- T extends HTMLElement | MediaQueryList | void = void,
+ KW extends keyof WindowEventMap,
+ KH extends keyof HTMLElementEventMap,
+ KM extends keyof MediaQueryListEventMap,
+ T extends HTMLElement | MediaQueryList | void = void,
>(props: {
- event: KW | KH | KM
- element?: T
- options?: boolean | AddEventListenerOptions
- enabled?: boolean
- handler: (
- event: WindowEventMap[KW] | HTMLElementEventMap[KH] | MediaQueryListEventMap[KM] | Event,
- ) => void
+ event: KW | KH | KM
+ element?: T
+ options?: boolean | AddEventListenerOptions
+ enabled?: boolean
+ handler: (
+ event: WindowEventMap[KW] | HTMLElementEventMap[KH] | MediaQueryListEventMap[KM] | Event,
+ ) => void
}) {
- const { event, element, options, handler, enabled = true } = props
+ const { event, element, options, handler, enabled = true } = props
- /* Create a ref that stores handler */
- const freshHandler = useFreshRef(handler)
- const freshOptions = useFreshRef(options)
+ /* Create a ref that stores handler */
+ const freshHandler = useFreshRef(handler)
+ const freshOptions = useFreshRef(options)
- React.useEffect(() => {
- if (!enabled) return noop
+ React.useEffect(() => {
+ if (!enabled) return noop
- /* Define the listening target */
- const targetElement: T | HTMLElement | null =
- element ?? (typeof window !== 'undefined' ? window.document.documentElement : null)
+ /* Define the listening target */
+ const targetElement: T | HTMLElement | null =
+ element ?? (typeof window !== 'undefined' ? window.document.documentElement : null)
- if (!(targetElement && targetElement.addEventListener)) return noop
+ if (!(targetElement && targetElement.addEventListener)) return noop
- /* Create event listener that calls handler function stored in ref */
- const listener: typeof handler = (event) => freshHandler.current(event)
+ /* Create event listener that calls handler function stored in ref */
+ const listener: typeof handler = (event) => freshHandler.current(event)
- targetElement.addEventListener(event, listener, freshOptions.current)
+ targetElement.addEventListener(event, listener, freshOptions.current)
- /* Remove event listener on cleanup */
- return () => {
- targetElement.removeEventListener(event, listener, freshOptions.current)
- }
- }, [event, element, enabled])
+ /* Remove event listener on cleanup */
+ return () => {
+ targetElement.removeEventListener(event, listener, freshOptions.current)
+ }
+ }, [event, element, enabled])
}
export { useEventListener }
diff --git a/src/components/_shared/hooks/use-fresh-ref.ts b/src/components/_shared/hooks/use-fresh-ref.ts
index ac886bb..c850c1a 100644
--- a/src/components/_shared/hooks/use-fresh-ref.ts
+++ b/src/components/_shared/hooks/use-fresh-ref.ts
@@ -3,13 +3,13 @@
import React from 'react'
function useFreshRef(value: T) {
- const ref = React.useRef(value)
+ const ref = React.useRef(value)
- React.useEffect(() => {
- ref.current = value
- }, [value])
+ React.useEffect(() => {
+ ref.current = value
+ }, [value])
- return ref
+ return ref
}
export { useFreshRef }
diff --git a/src/components/_shared/hooks/use-keyboard-hotkey.ts b/src/components/_shared/hooks/use-keyboard-hotkey.ts
index 5a5c536..a9c2c4b 100644
--- a/src/components/_shared/hooks/use-keyboard-hotkey.ts
+++ b/src/components/_shared/hooks/use-keyboard-hotkey.ts
@@ -6,67 +6,67 @@ import { HotkeyCallback, useHotkeys } from 'react-hotkeys-hook'
import { HotkeysEvent, OptionsOrDependencyArray } from 'react-hotkeys-hook/dist/types'
const DEFAULT_KEY_COMBINATION_OPTIONS: OptionsOrDependencyArray = {
- preventDefault: true,
+ preventDefault: true,
}
type UseKeyboardHotkeyArgs = {
- keyCombination?: string | string[]
- keyCombinationOptions?: OptionsOrDependencyArray
- isKeyCombinationCasingIgnored?: boolean
- onKeyCombinationMatch?: HotkeyCallback
+ keyCombination?: string | string[]
+ keyCombinationOptions?: OptionsOrDependencyArray
+ isKeyCombinationCasingIgnored?: boolean
+ onKeyCombinationMatch?: HotkeyCallback
}
function useKeyboardHotkey(props: UseKeyboardHotkeyArgs) {
- const {
- onKeyCombinationMatch,
- keyCombination,
- keyCombinationOptions,
- isKeyCombinationCasingIgnored = true,
- } = props
+ const {
+ onKeyCombinationMatch,
+ keyCombination,
+ keyCombinationOptions,
+ isKeyCombinationCasingIgnored = true,
+ } = props
- const freshOnMatch = useFreshRef(onKeyCombinationMatch)
+ const freshOnMatch = useFreshRef(onKeyCombinationMatch)
- const freshKeyCombination = useFreshRef(keyCombination)
+ const freshKeyCombination = useFreshRef(keyCombination)
- const memoizedKeyCombination = React.useMemo(() => {
- return (
- (Array.isArray(freshKeyCombination.current)
- ? freshKeyCombination.current.join('+')
- : freshKeyCombination.current) ?? []
- )
- }, [])
+ const memoizedKeyCombination = React.useMemo(() => {
+ return (
+ (Array.isArray(freshKeyCombination.current)
+ ? freshKeyCombination.current.join('+')
+ : freshKeyCombination.current) ?? []
+ )
+ }, [])
- const freshOptions = useFreshRef(keyCombinationOptions)
+ const freshOptions = useFreshRef(keyCombinationOptions)
- const memoizedOptions = React.useMemo(() => {
- return freshOptions.current
- ? { ...DEFAULT_KEY_COMBINATION_OPTIONS, ...freshOptions.current }
- : DEFAULT_KEY_COMBINATION_OPTIONS
- }, [])
+ const memoizedOptions = React.useMemo(() => {
+ return freshOptions.current
+ ? { ...DEFAULT_KEY_COMBINATION_OPTIONS, ...freshOptions.current }
+ : DEFAULT_KEY_COMBINATION_OPTIONS
+ }, [])
- const hasCasingTestFailed = React.useCallback(
- (eventKey: string, optionKeys: readonly string[] | undefined) => {
- if (isKeyCombinationCasingIgnored) return false
+ const hasCasingTestFailed = React.useCallback(
+ (eventKey: string, optionKeys: readonly string[] | undefined) => {
+ if (isKeyCombinationCasingIgnored) return false
- const passesCasingTest = optionKeys?.includes(eventKey)
+ const passesCasingTest = optionKeys?.includes(eventKey)
- return !passesCasingTest
- },
- [],
- )
+ return !passesCasingTest
+ },
+ [],
+ )
- const handleKeyCombinationDown = React.useCallback(
- (event: KeyboardEvent, options: HotkeysEvent) => {
- if (!freshOnMatch.current) return
+ const handleKeyCombinationDown = React.useCallback(
+ (event: KeyboardEvent, options: HotkeysEvent) => {
+ if (!freshOnMatch.current) return
- if (hasCasingTestFailed(event.key, options?.keys)) return
+ if (hasCasingTestFailed(event.key, options?.keys)) return
- freshOnMatch.current(event, options)
- },
- [hasCasingTestFailed],
- )
+ freshOnMatch.current(event, options)
+ },
+ [hasCasingTestFailed],
+ )
- useHotkeys(memoizedKeyCombination, handleKeyCombinationDown, memoizedOptions)
+ useHotkeys(memoizedKeyCombination, handleKeyCombinationDown, memoizedOptions)
}
export { useKeyboardHotkey }
diff --git a/src/components/_shared/hooks/use-merged-ref.ts b/src/components/_shared/hooks/use-merged-ref.ts
index 8d4c5a2..4e0e302 100644
--- a/src/components/_shared/hooks/use-merged-ref.ts
+++ b/src/components/_shared/hooks/use-merged-ref.ts
@@ -1,44 +1,38 @@
-"use client";
+'use client'
-import { isFunction } from "@renderui/utils/is-function";
-import React from "react";
+import { isFunction } from '@renderui/utils/is-function'
+import React from 'react'
-function handleRef(
- element: T | null,
- ref: React.Ref | undefined | null
-) {
- if (!element || !ref) return;
-
- if (isFunction(ref)) {
- ref(element);
+function handleRef(element: T | null, ref: React.Ref | undefined | null) {
+ if (!element || !ref) return
- return;
- }
+ if (isFunction(ref)) {
+ ref(element)
- // eslint-disable-next-line padding-line-between-statements, no-param-reassign
- (ref as React.RefObject).current = element;
+ return
+ }
+ // eslint-disable-next-line padding-line-between-statements, no-param-reassign
+ ;(ref as React.RefObject).current = element
}
function mergeRefs(
- element: T | null,
- refs: Array | undefined | null>
+ element: T | null,
+ refs: Array | undefined | null>,
) {
- if (!refs) return;
+ if (!refs) return
- refs.filter(Boolean).forEach((ref) => {
- handleRef(element, ref);
- });
+ refs.filter(Boolean).forEach((ref) => {
+ handleRef(element, ref)
+ })
}
-function useMergedRef(
- refs: Array | undefined | null>
-) {
- return React.useCallback(
- (element: T) => {
- mergeRefs(element, refs);
- },
- [refs]
- );
+function useMergedRef(refs: Array | undefined | null>) {
+ return React.useCallback(
+ (element: T) => {
+ mergeRefs(element, refs)
+ },
+ [refs],
+ )
}
-export { useMergedRef };
+export { useMergedRef }
diff --git a/src/components/_shared/hooks/use-mutation-observer.ts b/src/components/_shared/hooks/use-mutation-observer.ts
index ade2b8c..34916f3 100644
--- a/src/components/_shared/hooks/use-mutation-observer.ts
+++ b/src/components/_shared/hooks/use-mutation-observer.ts
@@ -4,24 +4,24 @@ import React from 'react'
import { useFreshRef } from '@/components/_shared/hooks/use-fresh-ref'
function useMutationObserver(
- node: T | null,
- callback: MutationCallback,
- options: MutationObserverInit,
+ node: T | null,
+ callback: MutationCallback,
+ options: MutationObserverInit,
) {
- const freshCallback = useFreshRef(callback)
- const freshOptions = useFreshRef(options)
+ const freshCallback = useFreshRef(callback)
+ const freshOptions = useFreshRef(options)
- React.useEffect(() => {
- if (!node) return undefined
+ React.useEffect(() => {
+ if (!node) return undefined
- const observer = new MutationObserver(freshCallback.current)
+ const observer = new MutationObserver(freshCallback.current)
- observer.observe(node, freshOptions.current)
+ observer.observe(node, freshOptions.current)
- return () => {
- observer.disconnect()
- }
- }, [node])
+ return () => {
+ observer.disconnect()
+ }
+ }, [node])
}
export { useMutationObserver }
diff --git a/src/components/_shared/hooks/use-on-click-outside.ts b/src/components/_shared/hooks/use-on-click-outside.ts
index d33eb23..75170f8 100644
--- a/src/components/_shared/hooks/use-on-click-outside.ts
+++ b/src/components/_shared/hooks/use-on-click-outside.ts
@@ -5,43 +5,43 @@ import { useEventListener } from '@/components/_shared/hooks/use-event-listener'
const DEFAULT_EXCEPTION_SELECTORS: string[] = []
type UseOnClickOutsideProps = {
- element: T | null
- exceptionSelectors?: string[]
+ element: T | null
+ exceptionSelectors?: string[]
} & (
- | {
- event: 'mousedown' | 'mouseup'
- handler: ((event: MouseEvent) => void) | undefined
- }
- | {
- event: 'pointerdown' | 'pointerup'
- handler: ((event: PointerEvent) => void) | undefined
- }
+ | {
+ event: 'mousedown' | 'mouseup'
+ handler: ((event: MouseEvent) => void) | undefined
+ }
+ | {
+ event: 'pointerdown' | 'pointerup'
+ handler: ((event: PointerEvent) => void) | undefined
+ }
)
function useOnClickOutside(props: UseOnClickOutsideProps) {
- const { event, element, handler, exceptionSelectors = DEFAULT_EXCEPTION_SELECTORS } = props
-
- useEventListener({
- event,
- element: element,
- handler: (event) => {
- if (!(event.target instanceof Node)) {
- return
- }
-
- if (!handler || element?.contains(event.target)) {
- return
- }
-
- for (const selector of exceptionSelectors) {
- if ((event.target as Element).matches(selector)) {
- return
- }
- }
-
- handler(event as PointerEvent)
- },
- })
+ const { event, element, handler, exceptionSelectors = DEFAULT_EXCEPTION_SELECTORS } = props
+
+ useEventListener({
+ event,
+ element: element,
+ handler: (event) => {
+ if (!(event.target instanceof Node)) {
+ return
+ }
+
+ if (!handler || element?.contains(event.target)) {
+ return
+ }
+
+ for (const selector of exceptionSelectors) {
+ if ((event.target as Element).matches(selector)) {
+ return
+ }
+ }
+
+ handler(event as PointerEvent)
+ },
+ })
}
export { useOnClickOutside }
diff --git a/src/components/_shared/hooks/use-uncontrolled-state.ts b/src/components/_shared/hooks/use-uncontrolled-state.ts
index 2dba5c2..f53d0f4 100644
--- a/src/components/_shared/hooks/use-uncontrolled-state.ts
+++ b/src/components/_shared/hooks/use-uncontrolled-state.ts
@@ -5,27 +5,27 @@ import React from 'react'
import { useFreshRef } from '@/components/_shared/hooks/use-fresh-ref'
type UseControllableStateProps = {
- prop?: T | undefined
- defaultProp?: T | undefined
- onChange: ((state: T) => void) | undefined
+ prop?: T | undefined
+ defaultProp?: T | undefined
+ onChange: ((state: T) => void) | undefined
}
function useUncontrolledState({
- defaultProp,
- onChange,
+ defaultProp,
+ onChange,
}: Omit, 'prop'>) {
- const [value, setValue] = React.useState(defaultProp)
- const previousValueRef = React.useRef(value)
- const handleChange = useFreshRef(onChange)
-
- React.useEffect(() => {
- if (previousValueRef.current !== value) {
- handleChange.current?.(value as T)
- previousValueRef.current = value
- }
- }, [value, previousValueRef, handleChange])
-
- return [value, setValue]
+ const [value, setValue] = React.useState(defaultProp)
+ const previousValueRef = React.useRef(value)
+ const handleChange = useFreshRef(onChange)
+
+ React.useEffect(() => {
+ if (previousValueRef.current !== value) {
+ handleChange.current?.(value as T)
+ previousValueRef.current = value
+ }
+ }, [value, previousValueRef, handleChange])
+
+ return [value, setValue]
}
export { useUncontrolledState }
diff --git a/src/components/_shared/types/aria.ts b/src/components/_shared/types/aria.ts
index 50a53d1..dfb534b 100644
--- a/src/components/_shared/types/aria.ts
+++ b/src/components/_shared/types/aria.ts
@@ -1,51 +1,51 @@
import {
- AriaFocusRingProps,
- FocusProps,
- HoverProps,
- LongPressProps,
- PressEvent,
- PressProps,
+ AriaFocusRingProps,
+ FocusProps,
+ HoverProps,
+ LongPressProps,
+ PressEvent,
+ PressProps,
} from 'react-aria'
type UseAriaHandlersProps = {
- isPressDisabled: PressProps['isDisabled'] | undefined
- isPressed: PressProps['isPressed'] | undefined
- preventFocusOnPress: PressProps['preventFocusOnPress'] | undefined
- allowTextSelectionOnPress: PressProps['allowTextSelectionOnPress'] | undefined
- shouldCancelOnPointerExit: PressProps['shouldCancelOnPointerExit'] | undefined
- onPress: PressProps['onPress'] | undefined
- onPressStart: PressProps['onPressStart'] | undefined
- onPressEnd: PressProps['onPressEnd'] | undefined
- onPressChange: PressProps['onPressChange'] | undefined
- onPressUp: PressProps['onPressUp'] | undefined
- onKeyboardPress: ((event: PressEvent) => void) | undefined
- onKeyboardPressStart: ((event: PressEvent) => void) | undefined
- onKeyboardPressEnd: ((event: PressEvent) => void) | undefined
- isLongPressDisabled: LongPressProps['isDisabled'] | undefined
- longPressTreshold: LongPressProps['threshold'] | undefined
- longPressAccessibilityDescription: LongPressProps['accessibilityDescription'] | undefined
- onLongPressStart: LongPressProps['onLongPressStart'] | undefined
- onLongPress: LongPressProps['onLongPress'] | undefined
- onLongPressEnd: LongPressProps['onLongPressEnd'] | undefined
- isFocusDisabled: FocusProps['isDisabled'] | undefined
- onFocus: FocusProps['onFocus'] | undefined
- onFocusChange: FocusProps['onFocusChange'] | undefined
- onBlur: FocusProps['onBlur'] | undefined
- isTextInput: AriaFocusRingProps['isTextInput'] | undefined
- isFocusWithin: AriaFocusRingProps['within'] | undefined
- isHoverDisabled: HoverProps['isDisabled'] | undefined
- onHoverStart: HoverProps['onHoverStart'] | undefined
- onHoverChange: HoverProps['onHoverChange'] | undefined
- onHoverEnd: HoverProps['onHoverEnd'] | undefined
- isUsingAriaPressProps?: boolean
- onDragStart: React.DragEventHandler | undefined
- onKeyDown: React.KeyboardEventHandler | undefined
- onKeyUp: React.KeyboardEventHandler | undefined
- onMouseDown: React.MouseEventHandler | undefined
- onPointerDown: React.PointerEventHandler | undefined
- onPointerEnter: React.PointerEventHandler | undefined
- onPointerLeave: React.PointerEventHandler | undefined
- onPointerUp: React.PointerEventHandler | undefined
+ isPressDisabled: PressProps['isDisabled'] | undefined
+ isPressed: PressProps['isPressed'] | undefined
+ preventFocusOnPress: PressProps['preventFocusOnPress'] | undefined
+ allowTextSelectionOnPress: PressProps['allowTextSelectionOnPress'] | undefined
+ shouldCancelOnPointerExit: PressProps['shouldCancelOnPointerExit'] | undefined
+ onPress: PressProps['onPress'] | undefined
+ onPressStart: PressProps['onPressStart'] | undefined
+ onPressEnd: PressProps['onPressEnd'] | undefined
+ onPressChange: PressProps['onPressChange'] | undefined
+ onPressUp: PressProps['onPressUp'] | undefined
+ onKeyboardPress: ((event: PressEvent) => void) | undefined
+ onKeyboardPressStart: ((event: PressEvent) => void) | undefined
+ onKeyboardPressEnd: ((event: PressEvent) => void) | undefined
+ isLongPressDisabled: LongPressProps['isDisabled'] | undefined
+ longPressTreshold: LongPressProps['threshold'] | undefined
+ longPressAccessibilityDescription: LongPressProps['accessibilityDescription'] | undefined
+ onLongPressStart: LongPressProps['onLongPressStart'] | undefined
+ onLongPress: LongPressProps['onLongPress'] | undefined
+ onLongPressEnd: LongPressProps['onLongPressEnd'] | undefined
+ isFocusDisabled: FocusProps['isDisabled'] | undefined
+ onFocus: FocusProps['onFocus'] | undefined
+ onFocusChange: FocusProps['onFocusChange'] | undefined
+ onBlur: FocusProps['onBlur'] | undefined
+ isTextInput: AriaFocusRingProps['isTextInput'] | undefined
+ isFocusWithin: AriaFocusRingProps['within'] | undefined
+ isHoverDisabled: HoverProps['isDisabled'] | undefined
+ onHoverStart: HoverProps['onHoverStart'] | undefined
+ onHoverChange: HoverProps['onHoverChange'] | undefined
+ onHoverEnd: HoverProps['onHoverEnd'] | undefined
+ isUsingAriaPressProps?: boolean
+ onDragStart: React.DragEventHandler | undefined
+ onKeyDown: React.KeyboardEventHandler | undefined
+ onKeyUp: React.KeyboardEventHandler | undefined
+ onMouseDown: React.MouseEventHandler | undefined
+ onPointerDown: React.PointerEventHandler | undefined
+ onPointerEnter: React.PointerEventHandler | undefined
+ onPointerLeave: React.PointerEventHandler | undefined
+ onPointerUp: React.PointerEventHandler | undefined
}
type OptionalAriaProps = Partial
diff --git a/src/components/_shared/types/as-child.ts b/src/components/_shared/types/as-child.ts
index 9e7d227..c79c456 100644
--- a/src/components/_shared/types/as-child.ts
+++ b/src/components/_shared/types/as-child.ts
@@ -1,5 +1,5 @@
type AsChildProp = {
- asChild?: boolean
+ asChild?: boolean
}
export type { AsChildProp }
diff --git a/src/components/_shared/types/colors.ts b/src/components/_shared/types/colors.ts
index 9c22fec..8816de2 100644
--- a/src/components/_shared/types/colors.ts
+++ b/src/components/_shared/types/colors.ts
@@ -1,13 +1,13 @@
type Color =
- | 'mode'
- | 'mode-accent'
- | 'mode-contrast'
- | 'mode-contrast-accent'
- | 'primary'
- | 'secondary'
- | 'destructive'
- | 'success'
- | 'warning'
- | 'info'
+ | 'mode'
+ | 'mode-accent'
+ | 'mode-contrast'
+ | 'mode-contrast-accent'
+ | 'primary'
+ | 'secondary'
+ | 'destructive'
+ | 'success'
+ | 'warning'
+ | 'info'
export type { Color }
diff --git a/src/components/_shared/types/or-undefined.ts b/src/components/_shared/types/or-undefined.ts
index 6264483..df209f1 100644
--- a/src/components/_shared/types/or-undefined.ts
+++ b/src/components/_shared/types/or-undefined.ts
@@ -5,7 +5,7 @@
* @template T - The original type to be transformed.
*/
type OrUndefined = {
- [K in keyof T]: T[K] | undefined
+ [K in keyof T]: T[K] | undefined
}
export type { OrUndefined }
diff --git a/src/components/_shared/types/prettify.ts b/src/components/_shared/types/prettify.ts
index 1ad3946..bdef97b 100644
--- a/src/components/_shared/types/prettify.ts
+++ b/src/components/_shared/types/prettify.ts
@@ -6,8 +6,8 @@
* @template T - The original type to be transformed.
*/
type Prettify = {
- [K in keyof T]: T[K]
- // eslint-disable-next-line functional/readonly-type
+ [K in keyof T]: T[K]
+ // eslint-disable-next-line functional/readonly-type
} & {}
export type { Prettify }
diff --git a/src/components/_shared/types/variants.ts b/src/components/_shared/types/variants.ts
index 867409b..fbfdca2 100644
--- a/src/components/_shared/types/variants.ts
+++ b/src/components/_shared/types/variants.ts
@@ -1,7 +1,7 @@
import { VariantProps } from '@renderui/utils'
type NonNullableVariantProps any> = {
- [K in keyof VariantProps]: NonNullable[K]>
+ [K in keyof VariantProps]: NonNullable[K]>
}
export type { NonNullableVariantProps }
diff --git a/src/components/_shared/utils/focus-input.ts b/src/components/_shared/utils/focus-input.ts
index 819cb3a..5fbd44e 100644
--- a/src/components/_shared/utils/focus-input.ts
+++ b/src/components/_shared/utils/focus-input.ts
@@ -3,15 +3,15 @@
import React from 'react'
function focusInput(inputRef: React.RefObject) {
- if (!inputRef?.current) return
+ if (!inputRef?.current) return
- const { current: input } = inputRef
+ const { current: input } = inputRef
- input.focus()
+ input.focus()
- const valueLength = input.value.length
+ const valueLength = input.value.length
- input.setSelectionRange(valueLength, valueLength)
+ input.setSelectionRange(valueLength, valueLength)
}
export { focusInput }
diff --git a/src/components/_shared/utils/is-keyboard-pointer-type.ts b/src/components/_shared/utils/is-keyboard-pointer-type.ts
index b0ecd31..4324259 100644
--- a/src/components/_shared/utils/is-keyboard-pointer-type.ts
+++ b/src/components/_shared/utils/is-keyboard-pointer-type.ts
@@ -3,7 +3,7 @@
import { PressEvent } from 'react-aria'
function isKeyboardPointerType(event: PressEvent) {
- return event.pointerType === 'keyboard'
+ return event.pointerType === 'keyboard'
}
export { isKeyboardPointerType }
diff --git a/src/components/_shared/utils/split-aria-props.ts b/src/components/_shared/utils/split-aria-props.ts
index f64a676..cc506b4 100644
--- a/src/components/_shared/utils/split-aria-props.ts
+++ b/src/components/_shared/utils/split-aria-props.ts
@@ -5,91 +5,91 @@ import { UseAriaHandlersProps } from '@/components/_shared/types/aria'
type AriaHandlerPropsSelectorProps = T & Partial
const splitAriaProps = (props: AriaHandlerPropsSelectorProps) => {
- const {
- isPressDisabled,
- isPressed,
- preventFocusOnPress,
- allowTextSelectionOnPress,
- shouldCancelOnPointerExit,
- onPress,
- onPressStart,
- onPressEnd,
- onPressChange,
- onPressUp,
- onKeyboardPress,
- onKeyboardPressStart,
- onKeyboardPressEnd,
- isLongPressDisabled = true,
- longPressTreshold,
- longPressAccessibilityDescription,
- onLongPressStart,
- onLongPress,
- onLongPressEnd,
- isFocusDisabled,
- onFocus,
- onFocusChange,
- onBlur,
- isTextInput,
- isFocusWithin,
- isHoverDisabled,
- onHoverStart,
- onHoverChange,
- onHoverEnd,
- onDragStart,
- onKeyDown,
- onKeyUp,
- onMouseDown,
- onPointerDown,
- onPointerEnter,
- onPointerLeave,
- onPointerUp,
- ...nonAriaProps
- } = props
+ const {
+ isPressDisabled,
+ isPressed,
+ preventFocusOnPress,
+ allowTextSelectionOnPress,
+ shouldCancelOnPointerExit,
+ onPress,
+ onPressStart,
+ onPressEnd,
+ onPressChange,
+ onPressUp,
+ onKeyboardPress,
+ onKeyboardPressStart,
+ onKeyboardPressEnd,
+ isLongPressDisabled = true,
+ longPressTreshold,
+ longPressAccessibilityDescription,
+ onLongPressStart,
+ onLongPress,
+ onLongPressEnd,
+ isFocusDisabled,
+ onFocus,
+ onFocusChange,
+ onBlur,
+ isTextInput,
+ isFocusWithin,
+ isHoverDisabled,
+ onHoverStart,
+ onHoverChange,
+ onHoverEnd,
+ onDragStart,
+ onKeyDown,
+ onKeyUp,
+ onMouseDown,
+ onPointerDown,
+ onPointerEnter,
+ onPointerLeave,
+ onPointerUp,
+ ...nonAriaProps
+ } = props
- const ariaProps = {
- isPressDisabled,
- isPressed,
- preventFocusOnPress,
- allowTextSelectionOnPress,
- shouldCancelOnPointerExit,
- onPress,
- onPressStart,
- onPressEnd,
- onPressChange,
- onPressUp,
- onKeyboardPress,
- onKeyboardPressStart,
- onKeyboardPressEnd,
- isLongPressDisabled,
- longPressTreshold,
- longPressAccessibilityDescription,
- onLongPressStart,
- onLongPress,
- onLongPressEnd,
- isFocusDisabled,
- onFocus,
- onFocusChange,
- onBlur,
- isTextInput,
- isFocusWithin,
- isHoverDisabled,
- onHoverStart,
- onHoverChange,
- onHoverEnd,
- onDragStart,
- onKeyDown,
- onKeyUp,
- onMouseDown,
- onPointerDown,
- onPointerEnter,
- onPointerLeave,
- onPointerUp,
- }
+ const ariaProps = {
+ isPressDisabled,
+ isPressed,
+ preventFocusOnPress,
+ allowTextSelectionOnPress,
+ shouldCancelOnPointerExit,
+ onPress,
+ onPressStart,
+ onPressEnd,
+ onPressChange,
+ onPressUp,
+ onKeyboardPress,
+ onKeyboardPressStart,
+ onKeyboardPressEnd,
+ isLongPressDisabled,
+ longPressTreshold,
+ longPressAccessibilityDescription,
+ onLongPressStart,
+ onLongPress,
+ onLongPressEnd,
+ isFocusDisabled,
+ onFocus,
+ onFocusChange,
+ onBlur,
+ isTextInput,
+ isFocusWithin,
+ isHoverDisabled,
+ onHoverStart,
+ onHoverChange,
+ onHoverEnd,
+ onDragStart,
+ onKeyDown,
+ onKeyUp,
+ onMouseDown,
+ onPointerDown,
+ onPointerEnter,
+ onPointerLeave,
+ onPointerUp,
+ }
- return {
- ariaProps,
- nonAriaProps,
- }
+ return {
+ ariaProps,
+ nonAriaProps,
+ }
}
export { splitAriaProps }
diff --git a/src/components/_shared/variants/letter-spacing.ts b/src/components/_shared/variants/letter-spacing.ts
index 3d1422e..bec6dff 100644
--- a/src/components/_shared/variants/letter-spacing.ts
+++ b/src/components/_shared/variants/letter-spacing.ts
@@ -1,11 +1,11 @@
const letterSpacingVariants = {
- tightest: 'tracking-[-0.1em]',
- tighter: 'tracking-tighter',
- tight: 'tracking-tight',
- base: 'tracking-normal',
- wide: 'tracking-wide',
- wider: 'tracking-wider',
- widest: 'tracking-widest',
+ tightest: 'tracking-[-0.1em]',
+ tighter: 'tracking-tighter',
+ tight: 'tracking-tight',
+ base: 'tracking-normal',
+ wide: 'tracking-wide',
+ wider: 'tracking-wider',
+ widest: 'tracking-widest',
} as const
export { letterSpacingVariants }
diff --git a/src/components/_shared/variants/text-break.ts b/src/components/_shared/variants/text-break.ts
index 130d501..d77446e 100644
--- a/src/components/_shared/variants/text-break.ts
+++ b/src/components/_shared/variants/text-break.ts
@@ -1,8 +1,8 @@
const textBreakVariants = {
- none: 'keep-all [overflow-wrap:normal]',
- words: 'break-words [overflow-wrap:break-word]',
- normal: 'break-normal [overflow-wrap:normal]',
- all: 'break-all [overflow-wrap:anywhere]',
+ none: 'keep-all [overflow-wrap:normal]',
+ words: 'break-words [overflow-wrap:break-word]',
+ normal: 'break-normal [overflow-wrap:normal]',
+ all: 'break-all [overflow-wrap:anywhere]',
} as const
export { textBreakVariants }
diff --git a/src/components/_shared/variants/text-overflow.ts b/src/components/_shared/variants/text-overflow.ts
index e86cdb7..ba05541 100644
--- a/src/components/_shared/variants/text-overflow.ts
+++ b/src/components/_shared/variants/text-overflow.ts
@@ -1,6 +1,6 @@
const textOverflowVariants = {
- elipsis: 'truncate',
- clip: 'overflow-hidden whitespace-nowrap text-clip',
+ elipsis: 'truncate',
+ clip: 'overflow-hidden whitespace-nowrap text-clip',
} as const
export { textOverflowVariants }
diff --git a/src/components/_shared/variants/text-shadow.ts b/src/components/_shared/variants/text-shadow.ts
index 7ca0e5c..c55041d 100644
--- a/src/components/_shared/variants/text-shadow.ts
+++ b/src/components/_shared/variants/text-shadow.ts
@@ -1,9 +1,9 @@
const textShadowVariants = {
- xs: '[&]:text-shadow-xs shadow-current',
- sm: '[&]:text-shadow-sm shadow-current',
- md: '[&]:text-shadow shadow-current',
- lg: '[&]:text-shadow-lg shadow-current',
- xl: '[&]:text-shadow-xs shadow-current',
+ xs: '[&]:text-shadow-xs shadow-current',
+ sm: '[&]:text-shadow-sm shadow-current',
+ md: '[&]:text-shadow shadow-current',
+ lg: '[&]:text-shadow-lg shadow-current',
+ xl: '[&]:text-shadow-xs shadow-current',
} as const
export { textShadowVariants }
diff --git a/src/components/_shared/variants/text-size.ts b/src/components/_shared/variants/text-size.ts
index ad4ebe2..132642f 100644
--- a/src/components/_shared/variants/text-size.ts
+++ b/src/components/_shared/variants/text-size.ts
@@ -1,18 +1,18 @@
const textSizeVariants = {
- 'xs': 'text-xs',
- 'sm': 'text-sm',
- 'base': 'text-base',
- 'md': 'text-1.0675rem leading-1.5675rem',
- 'lg': 'text-lg',
- 'xl': 'text-xl',
- '2xl': 'text-2xl',
- '3xl': 'text-3xl',
- '4xl': 'text-4xl',
- '5xl': 'text-5xl',
- '6xl': 'text-6xl',
- '7xl': 'text-7xl',
- '8xl': 'text-8xl',
- '9xl': 'text-9xl',
+ 'xs': 'text-xs',
+ 'sm': 'text-sm',
+ 'base': 'text-base',
+ 'md': 'text-1.0675rem leading-1.5675rem',
+ 'lg': 'text-lg',
+ 'xl': 'text-xl',
+ '2xl': 'text-2xl',
+ '3xl': 'text-3xl',
+ '4xl': 'text-4xl',
+ '5xl': 'text-5xl',
+ '6xl': 'text-6xl',
+ '7xl': 'text-7xl',
+ '8xl': 'text-8xl',
+ '9xl': 'text-9xl',
} as const
export { textSizeVariants }
diff --git a/src/components/accordion/components/accordion-content.tsx b/src/components/accordion/components/accordion-content.tsx
index 8cf02d3..0a06714 100644
--- a/src/components/accordion/components/accordion-content.tsx
+++ b/src/components/accordion/components/accordion-content.tsx
@@ -1,74 +1,74 @@
-"use client";
+'use client'
-import { AccordionContent as AccordionContentPrimitive } from "@radix-ui/react-accordion";
-import { cn } from "@renderui/utils/cn";
-import { getOptionalObject } from "@renderui/utils/get-optional-object";
-import { polymorphic } from "@renderui/utils/polymorphic";
-import { getAnimationStyleVariables } from "@renderui/utils/get-animation-style-variables";
-import React from "react";
+import { AccordionContent as AccordionContentPrimitive } from '@radix-ui/react-accordion'
+import { cn } from '@renderui/utils/cn'
+import { getOptionalObject } from '@renderui/utils/get-optional-object'
+import { polymorphic } from '@renderui/utils/polymorphic'
+import { getAnimationStyleVariables } from '@renderui/utils/get-animation-style-variables'
+import React from 'react'
import {
- DEFAULT_ACCORDION_CONTENT_CHILDREN_CONTAINER_CLASSNAME,
- DEFAULT_ACCORDION_CONTENT_CLASSNAME,
-} from "@/components/accordion/constants/constants";
-import { AccordionContentProps } from "@/components/accordion/types/accordion-content";
+ DEFAULT_ACCORDION_CONTENT_CHILDREN_CONTAINER_CLASSNAME,
+ DEFAULT_ACCORDION_CONTENT_CLASSNAME,
+} from '@/components/accordion/constants/constants'
+import { AccordionContentProps } from '@/components/accordion/types/accordion-content'
const AccordionContent = (props: AccordionContentProps) => {
- const {
- className,
- style,
- children,
- childrenContainerProps,
- animationDuration,
- animationInDuration,
- animationOutDuration,
- animationTimingFunction,
- animationInTimingFunction,
- animationOutTimingFunction,
- ...restProps
- } = props;
+ const {
+ className,
+ style,
+ children,
+ childrenContainerProps,
+ animationDuration,
+ animationInDuration,
+ animationOutDuration,
+ animationTimingFunction,
+ animationInTimingFunction,
+ animationOutTimingFunction,
+ ...restProps
+ } = props
- const {
- asChild,
- className: childrenContainerClassName,
- ...restChildrenContainerProps
- } = getOptionalObject(childrenContainerProps);
+ const {
+ asChild,
+ className: childrenContainerClassName,
+ ...restChildrenContainerProps
+ } = getOptionalObject(childrenContainerProps)
- const AccordionContentChildrenContainer = polymorphic(asChild, "div");
+ const AccordionContentChildrenContainer = polymorphic(asChild, 'div')
- return (
-
-
- {children}
-
-
- );
-};
+ return (
+
+
+ {children}
+
+
+ )
+}
-AccordionContent.displayName = "AccordionContent";
+AccordionContent.displayName = 'AccordionContent'
-export { AccordionContent };
+export { AccordionContent }
diff --git a/src/components/accordion/components/accordion-item.tsx b/src/components/accordion/components/accordion-item.tsx
index 79c0d6f..3951d42 100644
--- a/src/components/accordion/components/accordion-item.tsx
+++ b/src/components/accordion/components/accordion-item.tsx
@@ -1,22 +1,22 @@
-"use client";
+'use client'
-import { AccordionItem as AccordionItemPrimitive } from "@radix-ui/react-accordion";
-import { cn } from "@renderui/utils";
-import React from "react";
+import { AccordionItem as AccordionItemPrimitive } from '@radix-ui/react-accordion'
+import { cn } from '@renderui/utils'
+import React from 'react'
-import { DEFAULT_ACCORDION_ITEM_CLASSNAME } from "@/components/accordion/constants/constants";
-import { AccordionItemProps } from "@/components/accordion/types/accordion-item";
+import { DEFAULT_ACCORDION_ITEM_CLASSNAME } from '@/components/accordion/constants/constants'
+import { AccordionItemProps } from '@/components/accordion/types/accordion-item'
const AccordionItem = (props: AccordionItemProps) => {
- const { className, ...restProps } = props;
+ const { className, ...restProps } = props
- return (
-
- );
-};
+ return (
+
+ )
+}
-export { AccordionItem };
+export { AccordionItem }
diff --git a/src/components/accordion/components/accordion-trigger.tsx b/src/components/accordion/components/accordion-trigger.tsx
index 7b9481e..65b4739 100644
--- a/src/components/accordion/components/accordion-trigger.tsx
+++ b/src/components/accordion/components/accordion-trigger.tsx
@@ -1,76 +1,75 @@
-"use client";
+'use client'
import {
- AccordionHeader as AccordionHeaderPrimitive,
- AccordionTrigger as AccordionTriggerPrimitive,
-} from "@radix-ui/react-accordion";
-import { cn, getOptionalObject } from "@renderui/utils";
-import React from "react";
+ AccordionHeader as AccordionHeaderPrimitive,
+ AccordionTrigger as AccordionTriggerPrimitive,
+} from '@radix-ui/react-accordion'
+import { cn, getOptionalObject } from '@renderui/utils'
+import React from 'react'
-import { ChevronDownIcon } from "@/components/_shared/components/icons/chevron-down-icon";
+import { ChevronDownIcon } from '@/components/_shared/components/icons/chevron-down-icon'
import {
- DEFAULT_ACCORDION_HEADER_CLASSNAME,
- DEFAULT_ACCORDION_TRIGGER_CLASSNAME,
- DEFAULT_ACCORDION_TRIGGER_ICON_CLASSNAME,
-} from "@/components/accordion/constants/constants";
-import { AccordionTriggerProps } from "@/components/accordion/types/accordion-trigger";
-import { Button } from "@/components/button";
+ DEFAULT_ACCORDION_HEADER_CLASSNAME,
+ DEFAULT_ACCORDION_TRIGGER_CLASSNAME,
+ DEFAULT_ACCORDION_TRIGGER_ICON_CLASSNAME,
+} from '@/components/accordion/constants/constants'
+import { AccordionTriggerProps } from '@/components/accordion/types/accordion-trigger'
+import { Button } from '@/components/button'
const AccordionTrigger = (props: AccordionTriggerProps) => {
- const {
- ref,
- className,
- children,
- icon,
- iconProps,
- accordionHeaderProps,
- hasIcon = true,
- hasRipple = false,
- hasDefaultPressedStyles = false,
- ...restProps
- } = props;
+ const {
+ ref,
+ className,
+ children,
+ icon,
+ iconProps,
+ accordionHeaderProps,
+ hasIcon = true,
+ hasRipple = false,
+ hasDefaultPressedStyles = false,
+ ...restProps
+ } = props
- const { className: headerClassName, ...restAccordionHeaderProps } =
- getOptionalObject(accordionHeaderProps);
+ const { className: headerClassName, ...restAccordionHeaderProps } =
+ getOptionalObject(accordionHeaderProps)
- const { className: iconClassName, ...restIconProps } =
- getOptionalObject(iconProps);
+ const { className: iconClassName, ...restIconProps } = getOptionalObject(iconProps)
- const renderIcon = () => {
- if (!hasIcon) return null;
+ const renderIcon = () => {
+ if (!hasIcon) return null
- if (icon) return icon;
+ if (icon) return icon
- return (
-
- );
- };
+ return (
+
+ )
+ }
- return (
-
-
-
-
-
- );
-};
+ return (
+
+
+
+
+
+ )
+}
-export { AccordionTrigger };
+export { AccordionTrigger }
diff --git a/src/components/accordion/components/accordion.tsx b/src/components/accordion/components/accordion.tsx
index 1218cc4..2afb87d 100644
--- a/src/components/accordion/components/accordion.tsx
+++ b/src/components/accordion/components/accordion.tsx
@@ -1,21 +1,21 @@
-"use client";
+'use client'
-import { Accordion as AccordionPrimitive } from "@radix-ui/react-accordion";
-import { cn } from "@renderui/utils";
-import React from "react";
+import { Accordion as AccordionPrimitive } from '@radix-ui/react-accordion'
+import { cn } from '@renderui/utils'
+import React from 'react'
-import { AccordionProps } from "@/components/accordion/types/accordion";
+import { AccordionProps } from '@/components/accordion/types/accordion'
const Accordion = (props: AccordionProps) => {
- const { className, ...restProps } = props;
+ const { className, ...restProps } = props
- return (
-
- );
-};
+ return (
+
+ )
+}
-export { Accordion };
+export { Accordion }
diff --git a/src/components/accordion/constants/constants.ts b/src/components/accordion/constants/constants.ts
index 69c98b3..351e320 100644
--- a/src/components/accordion/constants/constants.ts
+++ b/src/components/accordion/constants/constants.ts
@@ -1,25 +1,25 @@
const DEFAULT_ACCORDION_ITEM_CLASSNAME =
- 'render-ui-accordion-item border-b border-mode-accent transition-[border] duration-fast'
+ 'render-ui-accordion-item border-b border-mode-accent transition-[border] duration-fast'
const DEFAULT_ACCORDION_HEADER_CLASSNAME = 'render-ui-accordion-header flex'
const DEFAULT_ACCORDION_TRIGGER_CLASSNAME =
- 'render-ui-accordion-trigger flex flex-1 rounded-none items-center justify-between px-0 py-4 data-[focus-visible=true]:ring-offset-0 text-sm data-[hover=true]:underline [&[data-state=open]>svg]:rotate-180'
+ 'render-ui-accordion-trigger flex flex-1 rounded-none items-center justify-between px-0 py-4 data-[focus-visible=true]:ring-offset-0 text-sm data-[hover=true]:underline [&[data-state=open]>svg]:rotate-180'
const DEFAULT_ACCORDION_TRIGGER_ICON_CLASSNAME =
- 'render-ui-accordion-trigger-icon h-4 w-4 shrink-0 text-muted-foreground transition-[color,transform] duration-fast text-mode-contrast'
+ 'render-ui-accordion-trigger-icon h-4 w-4 shrink-0 text-muted-foreground transition-[color,transform] duration-fast text-mode-contrast'
const DEFAULT_ACCORDION_CONTENT_CLASSNAME =
- 'render-ui-accordion-content overflow-hidden text-sm text-mode-contrast data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down'
+ 'render-ui-accordion-content overflow-hidden text-sm text-mode-contrast data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down'
const DEFAULT_ACCORDION_CONTENT_CHILDREN_CONTAINER_CLASSNAME =
- 'render-ui-accordion-content-children-container pb-4 pt-0'
+ 'render-ui-accordion-content-children-container pb-4 pt-0'
export {
- DEFAULT_ACCORDION_CONTENT_CHILDREN_CONTAINER_CLASSNAME,
- DEFAULT_ACCORDION_CONTENT_CLASSNAME,
- DEFAULT_ACCORDION_HEADER_CLASSNAME,
- DEFAULT_ACCORDION_ITEM_CLASSNAME,
- DEFAULT_ACCORDION_TRIGGER_CLASSNAME,
- DEFAULT_ACCORDION_TRIGGER_ICON_CLASSNAME,
+ DEFAULT_ACCORDION_CONTENT_CHILDREN_CONTAINER_CLASSNAME,
+ DEFAULT_ACCORDION_CONTENT_CLASSNAME,
+ DEFAULT_ACCORDION_HEADER_CLASSNAME,
+ DEFAULT_ACCORDION_ITEM_CLASSNAME,
+ DEFAULT_ACCORDION_TRIGGER_CLASSNAME,
+ DEFAULT_ACCORDION_TRIGGER_ICON_CLASSNAME,
}
diff --git a/src/components/accordion/types/accordion-content.ts b/src/components/accordion/types/accordion-content.ts
index 3604fb5..b1f7ad8 100644
--- a/src/components/accordion/types/accordion-content.ts
+++ b/src/components/accordion/types/accordion-content.ts
@@ -1,24 +1,21 @@
-import { AccordionContent as AccordionContentPrimitive } from "@radix-ui/react-accordion";
-import { Simplify } from "@/components/_shared/types/simplify";
-import React from "react";
+import { AccordionContent as AccordionContentPrimitive } from '@radix-ui/react-accordion'
+import { Simplify } from '@/components/_shared/types/simplify'
+import React from 'react'
-import { AsChildProp } from "@/components/_shared/types/as-child";
-import { AnimationStyleVariables } from "@renderui/utils/get-animation-style-variables";
+import { AsChildProp } from '@/components/_shared/types/as-child'
+import { AnimationStyleVariables } from '@renderui/utils/get-animation-style-variables'
-type AccordionContentPrimitiveType = typeof AccordionContentPrimitive;
+type AccordionContentPrimitiveType = typeof AccordionContentPrimitive
-type AccordionContentPrimitiveProps =
- React.ComponentPropsWithRef;
+type AccordionContentPrimitiveProps = React.ComponentPropsWithRef
type AccordionContentChildrenContainerProps = {
- childrenContainerProps?: Simplify<
- React.ComponentPropsWithRef<"div"> & AsChildProp
- >;
- animationDuration?: number;
-} & AnimationStyleVariables;
+ childrenContainerProps?: Simplify & AsChildProp>
+ animationDuration?: number
+} & AnimationStyleVariables
type AccordionContentProps = Simplify<
- AccordionContentPrimitiveProps & AccordionContentChildrenContainerProps
->;
+ AccordionContentPrimitiveProps & AccordionContentChildrenContainerProps
+>
-export type { AccordionContentProps };
+export type { AccordionContentProps }
diff --git a/src/components/accordion/types/accordion-item.ts b/src/components/accordion/types/accordion-item.ts
index 363a8fb..bbf1da7 100644
--- a/src/components/accordion/types/accordion-item.ts
+++ b/src/components/accordion/types/accordion-item.ts
@@ -1,9 +1,8 @@
-import { AccordionItem as AccordionItemPrimitive } from "@radix-ui/react-accordion";
-import React from "react";
+import { AccordionItem as AccordionItemPrimitive } from '@radix-ui/react-accordion'
+import React from 'react'
-type AccordionItemPrimitiveType = typeof AccordionItemPrimitive;
+type AccordionItemPrimitiveType = typeof AccordionItemPrimitive
-type AccordionItemProps =
- React.ComponentPropsWithRef;
+type AccordionItemProps = React.ComponentPropsWithRef
-export type { AccordionItemProps };
+export type { AccordionItemProps }
diff --git a/src/components/accordion/types/accordion-trigger.ts b/src/components/accordion/types/accordion-trigger.ts
index 6098c69..d3d1e9f 100644
--- a/src/components/accordion/types/accordion-trigger.ts
+++ b/src/components/accordion/types/accordion-trigger.ts
@@ -1,24 +1,20 @@
-import { Simplify } from "@/components/_shared/types/simplify";
-import { AccordionHeader as AccordionHeaderPrimitive } from "@radix-ui/react-accordion";
-import React from "react";
+import { Simplify } from '@/components/_shared/types/simplify'
+import { AccordionHeader as AccordionHeaderPrimitive } from '@radix-ui/react-accordion'
+import React from 'react'
-import { ChevronDownIcon } from "@/components/_shared/components/icons/chevron-down-icon";
-import { ButtonProps } from "@/components/button";
+import { ChevronDownIcon } from '@/components/_shared/components/icons/chevron-down-icon'
+import { ButtonProps } from '@/components/button'
-type AccordionTriggerButtonProps = Omit;
+type AccordionTriggerButtonProps = Omit
type AccordionTriggerTriggerProps = {
- children?: React.ReactNode;
- hasIcon?: boolean;
- icon?: React.ReactNode;
- iconProps?: React.ComponentPropsWithRef;
- accordionHeaderProps?: React.ComponentPropsWithRef<
- typeof AccordionHeaderPrimitive
- >;
-};
+ children?: React.ReactNode
+ hasIcon?: boolean
+ icon?: React.ReactNode
+ iconProps?: React.ComponentPropsWithRef
+ accordionHeaderProps?: React.ComponentPropsWithRef
+}
-type AccordionTriggerProps = Simplify<
- AccordionTriggerButtonProps & AccordionTriggerTriggerProps
->;
+type AccordionTriggerProps = Simplify
-export type { AccordionTriggerProps };
+export type { AccordionTriggerProps }
diff --git a/src/components/accordion/types/accordion.ts b/src/components/accordion/types/accordion.ts
index 18e7c99..513d7b9 100644
--- a/src/components/accordion/types/accordion.ts
+++ b/src/components/accordion/types/accordion.ts
@@ -1,7 +1,7 @@
-import { Accordion as AccordionPrimitive } from "@radix-ui/react-accordion";
+import { Accordion as AccordionPrimitive } from '@radix-ui/react-accordion'
-type AccordionPrimitiveType = typeof AccordionPrimitive;
+type AccordionPrimitiveType = typeof AccordionPrimitive
-type AccordionProps = React.ComponentPropsWithRef;
+type AccordionProps = React.ComponentPropsWithRef
-export type { AccordionProps };
+export type { AccordionProps }
diff --git a/src/components/aria/components/aria.tsx b/src/components/aria/components/aria.tsx
index fe6260c..b5a6911 100644
--- a/src/components/aria/components/aria.tsx
+++ b/src/components/aria/components/aria.tsx
@@ -1,62 +1,59 @@
-"use client";
+'use client'
-import { cn, polymorphic } from "@renderui/utils";
-import React from "react";
+import { cn, polymorphic } from '@renderui/utils'
+import React from 'react'
-import { useAriaHandlers } from "@/components/_shared/hooks/use-aria-handlers";
-import { useMergedRef } from "@/components/_shared/hooks/use-merged-ref";
-import { splitAriaProps } from "@/components/_shared/utils/split-aria-props";
-import { DEFAULT_ARIA_CLASSNAME } from "@/components/aria/constants/constants";
-import { AriaProps } from "@/components/aria/types/aria";
+import { useAriaHandlers } from '@/components/_shared/hooks/use-aria-handlers'
+import { useMergedRef } from '@/components/_shared/hooks/use-merged-ref'
+import { splitAriaProps } from '@/components/_shared/utils/split-aria-props'
+import { DEFAULT_ARIA_CLASSNAME } from '@/components/aria/constants/constants'
+import { AriaProps } from '@/components/aria/types/aria'
const Aria = (props: AriaProps) => {
- const { ariaProps, nonAriaProps } = splitAriaProps(props);
-
- const internalRef = React.useRef(null);
- const mergedRefCallback = useMergedRef([
- internalRef,
- nonAriaProps.ref,
- ]);
-
- const {
- isPressDisabled,
- isFocusDisabled,
- isLongPressDisabled,
- isHoverDisabled,
- ...restAriaProps
- } = ariaProps;
-
- const {
- className,
- isDisabled,
- asChild,
- isUsingAriaPressProps = false,
- ...restNonAriaProps
- } = nonAriaProps;
-
- const { ariaComponentProps } = useAriaHandlers(
- {
- ...restAriaProps,
- isPressDisabled: isDisabled || isPressDisabled,
- isFocusDisabled: isDisabled || isFocusDisabled,
- isLongPressDisabled: isDisabled || isLongPressDisabled,
- isHoverDisabled: isDisabled || isHoverDisabled,
- isUsingAriaPressProps,
- },
- internalRef
- );
-
- const Component = polymorphic(asChild, "div");
-
- return (
- void}
- className={cn(DEFAULT_ARIA_CLASSNAME, className)}
- data-disabled={isDisabled}
- {...restNonAriaProps}
- {...ariaComponentProps}
- />
- );
-};
-
-export { Aria };
+ const { ariaProps, nonAriaProps } = splitAriaProps(props)
+
+ const internalRef = React.useRef(null)
+ const mergedRefCallback = useMergedRef([internalRef, nonAriaProps.ref])
+
+ const {
+ isPressDisabled,
+ isFocusDisabled,
+ isLongPressDisabled,
+ isHoverDisabled,
+ ...restAriaProps
+ } = ariaProps
+
+ const {
+ className,
+ isDisabled,
+ asChild,
+ isUsingAriaPressProps = false,
+ ...restNonAriaProps
+ } = nonAriaProps
+
+ const { ariaComponentProps } = useAriaHandlers(
+ {
+ ...restAriaProps,
+ isPressDisabled: isDisabled || isPressDisabled,
+ isFocusDisabled: isDisabled || isFocusDisabled,
+ isLongPressDisabled: isDisabled || isLongPressDisabled,
+ isHoverDisabled: isDisabled || isHoverDisabled,
+ isUsingAriaPressProps,
+ },
+ internalRef,
+ )
+
+ const Component = polymorphic(asChild, 'div')
+
+ return (
+ void}
+ className={cn(DEFAULT_ARIA_CLASSNAME, className)}
+ data-disabled={isDisabled}
+ {...restNonAriaProps}
+ {...ariaComponentProps}
+ />
+ )
+}
+
+export { Aria }
diff --git a/src/components/aria/types/aria.ts b/src/components/aria/types/aria.ts
index 97d866b..430fefb 100644
--- a/src/components/aria/types/aria.ts
+++ b/src/components/aria/types/aria.ts
@@ -1,16 +1,16 @@
-import React from "react";
+import React from 'react'
-import { OptionalAriaProps } from "@/components/_shared/types/aria";
-import { Simplify } from "@/components/_shared/types/simplify";
+import { OptionalAriaProps } from '@/components/_shared/types/aria'
+import { Simplify } from '@/components/_shared/types/simplify'
-type AriaPrimitiveProps = React.ComponentPropsWithRef<"div">;
+type AriaPrimitiveProps = React.ComponentPropsWithRef<'div'>
type AriaRenderUIProps = OptionalAriaProps & {
- asChild?: boolean;
- isDisabled?: boolean;
- isUsingAriaPressProps?: boolean;
-};
+ asChild?: boolean
+ isDisabled?: boolean
+ isUsingAriaPressProps?: boolean
+}
-type AriaProps = Simplify;
+type AriaProps = Simplify
-export type { AriaProps };
+export type { AriaProps }
diff --git a/src/components/aspect-ratio/components/aspect-ratio.tsx b/src/components/aspect-ratio/components/aspect-ratio.tsx
index c82a0c7..893dd59 100644
--- a/src/components/aspect-ratio/components/aspect-ratio.tsx
+++ b/src/components/aspect-ratio/components/aspect-ratio.tsx
@@ -1,23 +1,17 @@
-import { polymorphic } from "@renderui/utils";
-import React from "react";
+import { polymorphic } from '@renderui/utils'
+import React from 'react'
-import { AspectRatioProps } from "@/components/aspect-ratio/types/aspect-ratio";
-import { getMergedStyles } from "@/components/aspect-ratio/utils/get-merged-styles";
+import { AspectRatioProps } from '@/components/aspect-ratio/types/aspect-ratio'
+import { getMergedStyles } from '@/components/aspect-ratio/utils/get-merged-styles'
const AspectRatio = (props: AspectRatioProps) => {
- const { asChild, ratio, className, style, ...restProps } = props;
+ const { asChild, ratio, className, style, ...restProps } = props
- const { mergedClassName, mergedStyle } = getMergedStyles(
- ratio,
- className,
- style
- );
+ const { mergedClassName, mergedStyle } = getMergedStyles(ratio, className, style)
- const Component = polymorphic(asChild, "div");
+ const Component = polymorphic(asChild, 'div')
- return (
-
- );
-};
+ return
+}
-export { AspectRatio };
+export { AspectRatio }
diff --git a/src/components/aspect-ratio/types/aspect-ratio.ts b/src/components/aspect-ratio/types/aspect-ratio.ts
index 388bf02..9f7ef49 100644
--- a/src/components/aspect-ratio/types/aspect-ratio.ts
+++ b/src/components/aspect-ratio/types/aspect-ratio.ts
@@ -1,16 +1,14 @@
-import { Simplify } from "@/components/_shared/types/simplify";
-import React, { CSSProperties } from "react";
+import { Simplify } from '@/components/_shared/types/simplify'
+import React, { CSSProperties } from 'react'
-import { AsChildProp } from "@/components/_shared/types/as-child";
+import { AsChildProp } from '@/components/_shared/types/as-child'
-type AspectRatioBoxProps = React.ComponentPropsWithRef<"div">;
+type AspectRatioBoxProps = React.ComponentPropsWithRef<'div'>
type AspectRatioRatioProps = {
- ratio: CSSProperties["aspectRatio"];
-};
+ ratio: CSSProperties['aspectRatio']
+}
-type AspectRatioProps = Simplify<
- AspectRatioBoxProps & AspectRatioRatioProps & AsChildProp
->;
+type AspectRatioProps = Simplify
-export type { AspectRatioProps };
+export type { AspectRatioProps }
diff --git a/src/components/aspect-ratio/utils/get-merged-styles.ts b/src/components/aspect-ratio/utils/get-merged-styles.ts
index 8b06671..4c89a4b 100644
--- a/src/components/aspect-ratio/utils/get-merged-styles.ts
+++ b/src/components/aspect-ratio/utils/get-merged-styles.ts
@@ -3,14 +3,14 @@ import { cn } from '@renderui/utils'
import { AspectRatioProps } from '@/components/aspect-ratio/types/aspect-ratio'
function getMergedStyles(
- ratio: AspectRatioProps['ratio'],
- className: AspectRatioProps['className'],
- style: AspectRatioProps['style'],
+ ratio: AspectRatioProps['ratio'],
+ className: AspectRatioProps['className'],
+ style: AspectRatioProps['style'],
) {
- return {
- mergedClassName: cn('render-ui-aspect-ratio aspect-[var(--ratio)] overflow-hidden', className),
- mergedStyle: ratio ? { '--ratio': ratio, ...style } : style,
- }
+ return {
+ mergedClassName: cn('render-ui-aspect-ratio aspect-[var(--ratio)] overflow-hidden', className),
+ mergedStyle: ratio ? { '--ratio': ratio, ...style } : style,
+ }
}
export { getMergedStyles }
diff --git a/src/components/box/components/box.tsx b/src/components/box/components/box.tsx
index 8730b49..6b08357 100644
--- a/src/components/box/components/box.tsx
+++ b/src/components/box/components/box.tsx
@@ -1,20 +1,15 @@
-import { polymorphic } from "@renderui/utils";
-import React from "react";
+import { polymorphic } from '@renderui/utils'
+import React from 'react'
-import { BoxProps } from "@/components/box/types/box";
-import { getMergedClassName } from "@/components/box/utils/get-merged-class-name";
+import { BoxProps } from '@/components/box/types/box'
+import { getMergedClassName } from '@/components/box/utils/get-merged-class-name'
const Box = (props: BoxProps) => {
- const { asChild, className, grow, noShrink, ...restProps } = props;
+ const { asChild, className, grow, noShrink, ...restProps } = props
- const Component = polymorphic(asChild, "div");
+ const Component = polymorphic(asChild, 'div')
- return (
-
- );
-};
+ return
+}
-export { Box };
+export { Box }
diff --git a/src/components/box/types/box.ts b/src/components/box/types/box.ts
index efdd21d..b82c962 100644
--- a/src/components/box/types/box.ts
+++ b/src/components/box/types/box.ts
@@ -1,14 +1,14 @@
-import { Simplify } from "@/components/_shared/types/simplify";
+import { Simplify } from '@/components/_shared/types/simplify'
-import { AsChildProp } from "@/components/_shared/types/as-child";
+import { AsChildProp } from '@/components/_shared/types/as-child'
-type BoxPrimitiveProps = React.ComponentPropsWithRef<"div">;
+type BoxPrimitiveProps = React.ComponentPropsWithRef<'div'>
type BoxCustomProps = {
- grow?: boolean;
- noShrink?: boolean;
-};
+ grow?: boolean
+ noShrink?: boolean
+}
-type BoxProps = Simplify;
+type BoxProps = Simplify
-export type { BoxProps };
+export type { BoxProps }
diff --git a/src/components/box/utils/get-merged-class-name.ts b/src/components/box/utils/get-merged-class-name.ts
index a16d595..ff97ddd 100644
--- a/src/components/box/utils/get-merged-class-name.ts
+++ b/src/components/box/utils/get-merged-class-name.ts
@@ -3,11 +3,11 @@ import { cn } from '@renderui/utils'
import { BoxProps } from '@/components/box/types/box'
function getMergedClassName(
- className: BoxProps['className'],
- grow: BoxProps['grow'],
- noShrink: BoxProps['noShrink'],
+ className: BoxProps['className'],
+ grow: BoxProps['grow'],
+ noShrink: BoxProps['noShrink'],
) {
- return cn('render-ui-box', grow ? 'grow' : '', noShrink ? 'shrink-0' : '', className)
+ return cn('render-ui-box', grow ? 'grow' : '', noShrink ? 'shrink-0' : '', className)
}
export { getMergedClassName }
diff --git a/src/components/button/classes/button-classes.ts b/src/components/button/classes/button-classes.ts
index edacc4f..6209a3e 100644
--- a/src/components/button/classes/button-classes.ts
+++ b/src/components/button/classes/button-classes.ts
@@ -1,104 +1,104 @@
import { cva } from '@renderui/utils'
const buttonClasses = cva(
- 'render-ui-button group relative box-border inline-flex cursor-pointer select-none appearance-none items-center justify-center gap-3 whitespace-nowrap rounded text-sm font-medium outline-none ring-ring-color ring-offset-background transition-[box-shadow,background-color,transform,opacity] duration-fast disabled:cursor-not-allowed disabled:opacity-40 data-[loading=true]:cursor-default [&_.render-ui-loader]:opacity-0',
- {
- variants: {
- variant: {
- plain: 'text-mode-foreground',
- solid: '',
- outline: '',
- reveal: '',
- text: 'data-[hover=true]:text-[rgba(var(--button-bg),0.8)]',
- ghost: 'data-[hover=true]:bg-[rgba(var(--button-bg),0.15)]',
- shadow: 'shadow-lg [&]:shadow-[rgba(var(--button-bg),0.5)]',
- },
- size: {
- auto: '',
- icon: 'apsect-square min-size-4 p-1',
- sm: 'px-4.5 py-2 text-xs',
- md: 'px-5 py-2.5 text-sm',
- lg: 'px-7 py-3 text-base',
- },
- hasDefaultFocusVisibleStyles: {
- true: 'data-[focus-visible=true]:ring-ring-width data-[focus-visible=true]:ring-offset-offset',
- false: '',
- },
- hasRingOnAnyFocus: {
- true: 'data-[focus=true]:ring-ring-width data-[focus=true]:ring-offset-offset',
- false: '',
- },
- hasDefaultPressedStyles: {
- true: 'data-[pressed=true]:scale-[0.97]',
- false: '',
- },
- hasDefaultHoverStyles: {
- true: '',
- false: '',
- },
- hasLowerOpacityOnLoading: {
- true: 'data-[loading=true]:opacity-70',
- false: '',
- },
- hasLoaderOnLoading: {
- true: '[&[data-loading=true]_.render-ui-loader]:opacity-100',
- false: '',
- },
- hasContentOnLoading: {
- true: '[&[data-loading=true]_.render-ui-loader]:flex [&_.render-ui-loader]:hidden',
- false: [
- '[&[data-loading=true]]:!text-transparent [&[data-loading=true]_*]:[transition:all_150ms,color_0s] [&[data-loading=true]_.render-ui-ripple]:opacity-100 [&[data-loading=true]_.render-ui-sub-layer]:opacity-100 [&[data-loading=true]_>_*]:opacity-0',
- ],
- },
- },
- compoundVariants: [
- {
- variant: ['solid', 'shadow', 'outline', 'reveal'],
- className:
- 'before:pointer-events-none before:inset-0 before:inline-block before:size-full before:rounded-[inherit] before:content-[""]',
- },
- {
- variant: ['solid', 'shadow'],
- className:
- 'bg-[rgba(var(--button-bg))] text-[rgba(var(--button-color))] before:absolute before:z-[0] before:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] after:pointer-events-none after:absolute after:inset-0 after:z-[0] after:inline-block after:size-full after:rounded-[inherit] after:ring after:ring-[0.5px] after:ring-inset after:ring-offset-[0px] after:content-[""] data-[color=mode-contrast]:before:hidden data-[color=mode]:before:hidden data-[color=mode-accent]:before:shadow-[shadow:inset_0_1px_theme(colors.white/10%)] data-[color=mode]:after:hidden [&]:after:ring-white/[5%]',
- },
- {
- hasDefaultHoverStyles: true,
- variant: ['solid', 'shadow'],
- className: 'data-[hover=true]:bg-[rgba(var(--button-bg),0.8)]',
- },
- {
- variant: ['text', 'outline', 'ghost'],
- className:
- 'text-[rgba(var(--button-bg))] data-[pressed=true]:text-[rgba(var(--button-bg))]',
- },
- {
- hasDefaultHoverStyles: true,
- variant: ['outline', 'reveal'],
- className:
- 'data-[hover=true]:before:ring-[rgba(var(--button-bg))] data-[hover=true]:data-[pressed=true]:before:ring-[rgba(var(--button-bg))]',
- },
- {
- variant: ['outline'],
- className:
- 'before:absolute before:ring before:ring-[1px] before:ring-inset before:ring-[rgba(var(--button-bg))] before:ring-offset-[0px] before:transition-[inherit] before:duration-[inherit]',
- },
- {
- hasDefaultHoverStyles: true,
- variant: ['outline'],
- className: 'data-[hover=true]:bg-[rgba(var(--button-bg),0.1)]',
- },
- {
- variant: ['reveal'],
- className:
- 'text-[rgba(var(--mode-accent-foreground))] before:absolute before:ring before:ring-[1px] before:ring-inset before:ring-[rgba(var(--mode-accent))] before:ring-offset-[0px] before:transition-[inherit] before:duration-[inherit] ',
- },
- {
- variant: ['reveal'],
- className: 'data-[hover=true]:text-[rgba(var(--button-bg))]',
- },
- ],
- },
+ 'render-ui-button group relative box-border inline-flex cursor-pointer select-none appearance-none items-center justify-center gap-3 whitespace-nowrap rounded text-sm font-medium outline-none ring-ring-color ring-offset-background transition-[box-shadow,background-color,transform,opacity] duration-fast disabled:cursor-not-allowed disabled:opacity-40 data-[loading=true]:cursor-default [&_.render-ui-loader]:opacity-0',
+ {
+ variants: {
+ variant: {
+ plain: 'text-mode-foreground',
+ solid: '',
+ outline: '',
+ reveal: '',
+ text: 'data-[hover=true]:text-[rgba(var(--button-bg),0.8)]',
+ ghost: 'data-[hover=true]:bg-[rgba(var(--button-bg),0.15)]',
+ shadow: 'shadow-lg [&]:shadow-[rgba(var(--button-bg),0.5)]',
+ },
+ size: {
+ auto: '',
+ icon: 'apsect-square min-size-4 p-1',
+ sm: 'px-4.5 py-2 text-xs',
+ md: 'px-5 py-2.5 text-sm',
+ lg: 'px-7 py-3 text-base',
+ },
+ hasDefaultFocusVisibleStyles: {
+ true: 'data-[focus-visible=true]:ring-ring-width data-[focus-visible=true]:ring-offset-offset',
+ false: '',
+ },
+ hasRingOnAnyFocus: {
+ true: 'data-[focus=true]:ring-ring-width data-[focus=true]:ring-offset-offset',
+ false: '',
+ },
+ hasDefaultPressedStyles: {
+ true: 'data-[pressed=true]:scale-[0.97]',
+ false: '',
+ },
+ hasDefaultHoverStyles: {
+ true: '',
+ false: '',
+ },
+ hasLowerOpacityOnLoading: {
+ true: 'data-[loading=true]:opacity-70',
+ false: '',
+ },
+ hasLoaderOnLoading: {
+ true: '[&[data-loading=true]_.render-ui-loader]:opacity-100',
+ false: '',
+ },
+ hasContentOnLoading: {
+ true: '[&[data-loading=true]_.render-ui-loader]:flex [&_.render-ui-loader]:hidden',
+ false: [
+ '[&[data-loading=true]]:!text-transparent [&[data-loading=true]_*]:[transition:all_150ms,color_0s] [&[data-loading=true]_.render-ui-ripple]:opacity-100 [&[data-loading=true]_.render-ui-sub-layer]:opacity-100 [&[data-loading=true]_>_*]:opacity-0',
+ ],
+ },
+ },
+ compoundVariants: [
+ {
+ variant: ['solid', 'shadow', 'outline', 'reveal'],
+ className:
+ 'before:pointer-events-none before:inset-0 before:inline-block before:size-full before:rounded-[inherit] before:content-[""]',
+ },
+ {
+ variant: ['solid', 'shadow'],
+ className:
+ 'bg-[rgba(var(--button-bg))] text-[rgba(var(--button-color))] before:absolute before:z-[0] before:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] after:pointer-events-none after:absolute after:inset-0 after:z-[0] after:inline-block after:size-full after:rounded-[inherit] after:ring after:ring-[0.5px] after:ring-inset after:ring-offset-[0px] after:content-[""] data-[color=mode-contrast]:before:hidden data-[color=mode]:before:hidden data-[color=mode-accent]:before:shadow-[shadow:inset_0_1px_theme(colors.white/10%)] data-[color=mode]:after:hidden [&]:after:ring-white/[5%]',
+ },
+ {
+ hasDefaultHoverStyles: true,
+ variant: ['solid', 'shadow'],
+ className: 'data-[hover=true]:bg-[rgba(var(--button-bg),0.8)]',
+ },
+ {
+ variant: ['text', 'outline', 'ghost'],
+ className:
+ 'text-[rgba(var(--button-bg))] data-[pressed=true]:text-[rgba(var(--button-bg))]',
+ },
+ {
+ hasDefaultHoverStyles: true,
+ variant: ['outline', 'reveal'],
+ className:
+ 'data-[hover=true]:before:ring-[rgba(var(--button-bg))] data-[hover=true]:data-[pressed=true]:before:ring-[rgba(var(--button-bg))]',
+ },
+ {
+ variant: ['outline'],
+ className:
+ 'before:absolute before:ring before:ring-[1px] before:ring-inset before:ring-[rgba(var(--button-bg))] before:ring-offset-[0px] before:transition-[inherit] before:duration-[inherit]',
+ },
+ {
+ hasDefaultHoverStyles: true,
+ variant: ['outline'],
+ className: 'data-[hover=true]:bg-[rgba(var(--button-bg),0.1)]',
+ },
+ {
+ variant: ['reveal'],
+ className:
+ 'text-[rgba(var(--mode-accent-foreground))] before:absolute before:ring before:ring-[1px] before:ring-inset before:ring-[rgba(var(--mode-accent))] before:ring-offset-[0px] before:transition-[inherit] before:duration-[inherit] ',
+ },
+ {
+ variant: ['reveal'],
+ className: 'data-[hover=true]:text-[rgba(var(--button-bg))]',
+ },
+ ],
+ },
)
export { buttonClasses }
diff --git a/src/components/button/components/button.tsx b/src/components/button/components/button.tsx
index 3083b37..990326d 100644
--- a/src/components/button/components/button.tsx
+++ b/src/components/button/components/button.tsx
@@ -1,83 +1,80 @@
-"use client";
+'use client'
-import { functionCallOrValue } from "@renderui/utils/function-call-or-value";
-import { polymorphic } from "@renderui/utils/polymorphic";
-import React from "react";
+import { functionCallOrValue } from '@renderui/utils/function-call-or-value'
+import { polymorphic } from '@renderui/utils/polymorphic'
+import React from 'react'
-import { useButton } from "@/components/button/hooks/use-button";
-import { ButtonProps } from "@/components/button/types/button";
+import { useButton } from '@/components/button/hooks/use-button'
+import { ButtonProps } from '@/components/button/types/button'
const Loader = React.lazy(() =>
- import("@/components/loader/components/loader").then((module) => ({
- default: module.Loader,
- }))
-);
+ import('@/components/loader/components/loader').then((module) => ({
+ default: module.Loader,
+ })),
+)
const Ripple = React.lazy(() =>
- import("@/components/ripple/components/ripple").then((module) => ({
- default: module.Ripple,
- }))
-);
+ import('@/components/ripple/components/ripple').then((module) => ({
+ default: module.Ripple,
+ })),
+)
const Button = (props: ButtonProps) => {
- const { buttonProps, subLayerProps, rippleProps, loaderProps, utility } =
- useButton(props);
+ const { buttonProps, subLayerProps, rippleProps, loaderProps, utility } = useButton(props)
- const { children } = buttonProps;
- const {
- asChild,
- isPressed,
- isKeyboardPressed,
- isLoading,
- loader,
- loaderPosition,
- hasLoaderOnLoading,
- startContent,
- endContent,
- loadingContent,
- hasRipple,
- } = utility;
+ const { children } = buttonProps
+ const {
+ asChild,
+ isPressed,
+ isKeyboardPressed,
+ isLoading,
+ loader,
+ loaderPosition,
+ hasLoaderOnLoading,
+ startContent,
+ endContent,
+ loadingContent,
+ hasRipple,
+ } = utility
- const Component = polymorphic(asChild, "button");
+ const Component = polymorphic(asChild, 'button')
- const getChildren = () => {
- return isLoading && loadingContent
- ? functionCallOrValue(loadingContent, {
- isPressed,
- isKeyboardPressed,
- Loader: Loader,
- Ripple: Ripple,
- })
- : functionCallOrValue(children, {
- isPressed,
- isKeyboardPressed,
- Loader: Loader,
- Ripple: Ripple,
- });
- };
+ const getChildren = () => {
+ return isLoading && loadingContent
+ ? functionCallOrValue(loadingContent, {
+ isPressed,
+ isKeyboardPressed,
+ Loader: Loader,
+ Ripple: Ripple,
+ })
+ : functionCallOrValue(children, {
+ isPressed,
+ isKeyboardPressed,
+ Loader: Loader,
+ Ripple: Ripple,
+ })
+ }
- const getContent = () => {
- if (asChild) return getChildren();
+ const getContent = () => {
+ if (asChild) return getChildren()
- return (
- <>
- {functionCallOrValue(startContent, { isPressed, isKeyboardPressed })}
- {isLoading && hasLoaderOnLoading && loaderPosition === "start"
- ? loader ??
- : null}
- {getChildren()}
- {isLoading && hasLoaderOnLoading && loaderPosition === "end"
- ? loader ??
- : null}
- {functionCallOrValue(endContent, { isPressed, isKeyboardPressed })}
- {hasRipple ? (
-
- ) : null}
-
- );
- };
+ return (
+ <>
+ {functionCallOrValue(startContent, { isPressed, isKeyboardPressed })}
+ {isLoading && hasLoaderOnLoading && loaderPosition === 'start'
+ ? loader ??
+ : null}
+ {getChildren()}
+ {isLoading && hasLoaderOnLoading && loaderPosition === 'end'
+ ? loader ??
+ : null}
+ {functionCallOrValue(endContent, { isPressed, isKeyboardPressed })}
+ {hasRipple ? : null}
+
+ )
+ }
- return {getContent()};
-};
+ return {getContent()}
+}
-export { Button };
+export { Button }
diff --git a/src/components/button/hooks/use-button.ts b/src/components/button/hooks/use-button.ts
index b5c46b0..f33d1ee 100644
--- a/src/components/button/hooks/use-button.ts
+++ b/src/components/button/hooks/use-button.ts
@@ -1,135 +1,135 @@
-import { chain } from "@renderui/utils/chain";
-import { cn } from "@renderui/utils/cn";
-import React from "react";
+import { chain } from '@renderui/utils/chain'
+import { cn } from '@renderui/utils/cn'
+import React from 'react'
-import { useAriaHandlers } from "@/components/_shared/hooks/use-aria-handlers";
-import { useMergedRef } from "@/components/_shared/hooks/use-merged-ref";
-import { splitAriaProps } from "@/components/_shared/utils/split-aria-props";
-import { buttonClasses } from "@/components/button/classes/button-classes";
-import { ButtonProps } from "@/components/button/types/button";
-import { getColorVariables } from "@/components/button/utils/get-color-variables";
-import { getLoaderProps } from "@/components/button/utils/get-loader-props";
-import { getRippleProps } from "@/components/button/utils/get-ripple-props";
+import { useAriaHandlers } from '@/components/_shared/hooks/use-aria-handlers'
+import { useMergedRef } from '@/components/_shared/hooks/use-merged-ref'
+import { splitAriaProps } from '@/components/_shared/utils/split-aria-props'
+import { buttonClasses } from '@/components/button/classes/button-classes'
+import { ButtonProps } from '@/components/button/types/button'
+import { getColorVariables } from '@/components/button/utils/get-color-variables'
+import { getLoaderProps } from '@/components/button/utils/get-loader-props'
+import { getRippleProps } from '@/components/button/utils/get-ripple-props'
function useButton(props: ButtonProps) {
- const { ariaProps, nonAriaProps } = splitAriaProps(props);
- const {
- ref,
- asChild,
- className,
- style,
- isDisabled,
- isLoading,
- startContent,
- endContent,
- loadingContent,
- loaderProps,
- loaderRef,
- subLayerProps,
- rippleProps,
- rippleRef,
- loader,
- type = "button",
- size = "md",
- variant = "solid",
- color = "primary",
- loaderPosition = "end",
- hasLoaderOnLoading = true,
- hasRipple = true,
- hasDefaultHoverStyles = true,
- hasDefaultFocusVisibleStyles = true,
- hasDefaultPressedStyles = true,
- hasRingOnAnyFocus = false,
- hasLowerOpacityOnLoading = true,
- hasContentOnLoading = true,
- onClick,
- ...restProps
- } = nonAriaProps;
+ const { ariaProps, nonAriaProps } = splitAriaProps(props)
+ const {
+ ref,
+ asChild,
+ className,
+ style,
+ isDisabled,
+ isLoading,
+ startContent,
+ endContent,
+ loadingContent,
+ loaderProps,
+ loaderRef,
+ subLayerProps,
+ rippleProps,
+ rippleRef,
+ loader,
+ type = 'button',
+ size = 'md',
+ variant = 'solid',
+ color = 'primary',
+ loaderPosition = 'end',
+ hasLoaderOnLoading = true,
+ hasRipple = true,
+ hasDefaultHoverStyles = true,
+ hasDefaultFocusVisibleStyles = true,
+ hasDefaultPressedStyles = true,
+ hasRingOnAnyFocus = false,
+ hasLowerOpacityOnLoading = true,
+ hasContentOnLoading = true,
+ onClick,
+ ...restProps
+ } = nonAriaProps
- const internalRef = React.useRef(null);
- const mergedRefs = useMergedRef([internalRef, ref]);
+ const internalRef = React.useRef(null)
+ const mergedRefs = useMergedRef([internalRef, ref])
- const isPressDisabled = isDisabled || ariaProps?.isPressDisabled || isLoading;
- const isHoverDisabled = isDisabled || ariaProps?.isHoverDisabled || isLoading;
+ const isPressDisabled = isDisabled || ariaProps?.isPressDisabled || isLoading
+ const isHoverDisabled = isDisabled || ariaProps?.isHoverDisabled || isLoading
- const { ariaComponentProps, ariaFlags } = useAriaHandlers(
- {
- ...ariaProps,
- onPress: chain(ariaProps.onPress, onClick),
- isPressDisabled,
- isHoverDisabled,
- },
- internalRef
- );
- const { isPressed, isKeyboardPressed } = ariaFlags;
+ const { ariaComponentProps, ariaFlags } = useAriaHandlers(
+ {
+ ...ariaProps,
+ onPress: chain(ariaProps.onPress, onClick),
+ isPressDisabled,
+ isHoverDisabled,
+ },
+ internalRef,
+ )
+ const { isPressed, isKeyboardPressed } = ariaFlags
- const mergedLoaderProps = getLoaderProps({
- loaderRef,
- loaderProps,
- isLoading,
- });
+ const mergedLoaderProps = getLoaderProps({
+ loaderRef,
+ loaderProps,
+ isLoading,
+ })
- const hasContent = () => {
- if (mergedLoaderProps.position === "absolute-center") return false;
+ const hasContent = () => {
+ if (mergedLoaderProps.position === 'absolute-center') return false
- return hasContentOnLoading;
- };
+ return hasContentOnLoading
+ }
- const memoizedStyleWithColorVariable = React.useMemo(
- () => ({
- ...style,
- ...getColorVariables(color),
- }),
- [style, color]
- );
+ const memoizedStyleWithColorVariable = React.useMemo(
+ () => ({
+ ...style,
+ ...getColorVariables(color),
+ }),
+ [style, color],
+ )
- return {
- buttonProps: {
- type,
- ref: mergedRefs,
- disabled: isDisabled,
- className: cn(
- buttonClasses({
- size,
- variant,
- hasRingOnAnyFocus,
- hasDefaultFocusVisibleStyles,
- hasDefaultPressedStyles,
- hasDefaultHoverStyles,
- hasLowerOpacityOnLoading,
- hasLoaderOnLoading,
- hasContentOnLoading: hasContent(),
- }),
- className
- ),
- style: memoizedStyleWithColorVariable,
- "aria-label": isLoading ? "loading" : undefined,
- "aria-busy": isLoading || undefined,
- "data-variant": variant,
- "data-color": color,
- "data-loading": isLoading || undefined,
- "data-disabled": isDisabled,
- "data-slot": "base",
- ...ariaComponentProps,
- ...restProps,
- },
- subLayerProps,
- rippleProps: getRippleProps({ rippleRef, rippleProps, isLoading }),
- loaderProps: mergedLoaderProps,
- utility: {
- asChild,
- isPressed,
- isKeyboardPressed,
- isLoading,
- startContent,
- endContent,
- loadingContent,
- loader,
- loaderPosition,
- hasRipple,
- hasLoaderOnLoading,
- },
- };
+ return {
+ buttonProps: {
+ type,
+ ref: mergedRefs,
+ disabled: isDisabled,
+ className: cn(
+ buttonClasses({
+ size,
+ variant,
+ hasRingOnAnyFocus,
+ hasDefaultFocusVisibleStyles,
+ hasDefaultPressedStyles,
+ hasDefaultHoverStyles,
+ hasLowerOpacityOnLoading,
+ hasLoaderOnLoading,
+ hasContentOnLoading: hasContent(),
+ }),
+ className,
+ ),
+ style: memoizedStyleWithColorVariable,
+ 'aria-label': isLoading ? 'loading' : undefined,
+ 'aria-busy': isLoading || undefined,
+ 'data-variant': variant,
+ 'data-color': color,
+ 'data-loading': isLoading || undefined,
+ 'data-disabled': isDisabled,
+ 'data-slot': 'base',
+ ...ariaComponentProps,
+ ...restProps,
+ },
+ subLayerProps,
+ rippleProps: getRippleProps({ rippleRef, rippleProps, isLoading }),
+ loaderProps: mergedLoaderProps,
+ utility: {
+ asChild,
+ isPressed,
+ isKeyboardPressed,
+ isLoading,
+ startContent,
+ endContent,
+ loadingContent,
+ loader,
+ loaderPosition,
+ hasRipple,
+ hasLoaderOnLoading,
+ },
+ }
}
-export { useButton };
+export { useButton }
diff --git a/src/components/button/hooks/use-lazy-components.ts b/src/components/button/hooks/use-lazy-components.ts
index 3c57b71..a94ca1c 100644
--- a/src/components/button/hooks/use-lazy-components.ts
+++ b/src/components/button/hooks/use-lazy-components.ts
@@ -6,35 +6,35 @@ import { Loader } from '@/components/loader'
import { Ripple } from '@/components/ripple'
type UseLazyComponentsProps = Pick<
- ButtonProps,
- 'isLoading' | 'hasLoaderOnLoading' | 'loader' | 'hasRipple'
+ ButtonProps,
+ 'isLoading' | 'hasLoaderOnLoading' | 'loader' | 'hasRipple'
>
function useLazyComponents(props: UseLazyComponentsProps) {
- const { isLoading, hasLoaderOnLoading, loader, hasRipple } = props
+ const { isLoading, hasLoaderOnLoading, loader, hasRipple } = props
- const [LoaderComponent, setLoaderComponent] = React.useState(null)
- const [RippleComponent, setRippleComponent] = React.useState(null)
+ const [LoaderComponent, setLoaderComponent] = React.useState(null)
+ const [RippleComponent, setRippleComponent] = React.useState(null)
- React.useEffect(() => {
- const loadComponents = async () => {
- if (isLoading && hasLoaderOnLoading && !loader) {
- const { Loader } = await import('@/components/loader')
+ React.useEffect(() => {
+ const loadComponents = async () => {
+ if (isLoading && hasLoaderOnLoading && !loader) {
+ const { Loader } = await import('@/components/loader')
- setLoaderComponent(Loader)
- }
+ setLoaderComponent(Loader)
+ }
- if (hasRipple) {
- const { Ripple } = await import('@/components/ripple')
+ if (hasRipple) {
+ const { Ripple } = await import('@/components/ripple')
- setRippleComponent(Ripple)
- }
- }
+ setRippleComponent(Ripple)
+ }
+ }
- loadComponents()
- }, [isLoading, loader, hasLoaderOnLoading, hasRipple])
+ loadComponents()
+ }, [isLoading, loader, hasLoaderOnLoading, hasRipple])
- return { LoaderComponent, RippleComponent }
+ return { LoaderComponent, RippleComponent }
}
export { useLazyComponents }
diff --git a/src/components/button/types/button.ts b/src/components/button/types/button.ts
index 2d7c80a..6a98fd0 100644
--- a/src/components/button/types/button.ts
+++ b/src/components/button/types/button.ts
@@ -1,65 +1,61 @@
-import { Simplify } from "@/components/_shared/types/simplify";
-import React from "react";
-
-import { OptionalAriaProps } from "@/components/_shared/types/aria";
-import { AsChildProp } from "@/components/_shared/types/as-child";
-import { Color } from "@/components/_shared/types/colors";
-import { NonNullableVariantProps } from "@/components/_shared/types/variants";
-import { buttonClasses } from "@/components/button/classes/button-classes";
-import { LoaderProps, LoaderRef } from "@/components/loader";
-import { RippleProps, RippleRef } from "@/components/ripple";
-import { useLazyComponents } from "@/components/button/hooks/use-lazy-components";
-import { SubLayerProps } from "@/components/sub-layer";
+import { Simplify } from '@/components/_shared/types/simplify'
+import React from 'react'
+
+import { OptionalAriaProps } from '@/components/_shared/types/aria'
+import { AsChildProp } from '@/components/_shared/types/as-child'
+import { Color } from '@/components/_shared/types/colors'
+import { NonNullableVariantProps } from '@/components/_shared/types/variants'
+import { buttonClasses } from '@/components/button/classes/button-classes'
+import { LoaderProps, LoaderRef } from '@/components/loader'
+import { RippleProps, RippleRef } from '@/components/ripple'
+import { useLazyComponents } from '@/components/button/hooks/use-lazy-components'
+import { SubLayerProps } from '@/components/sub-layer'
type ButtonPrimitiveProps = Omit<
- React.ComponentPropsWithRef<"button">,
- "children" | "disabled" | "color"
->;
+ React.ComponentPropsWithRef<'button'>,
+ 'children' | 'disabled' | 'color'
+>
type ButtonContentRenderPropsProps = {
- isPressed?: boolean;
- isKeyboardPressed?: boolean;
-};
+ isPressed?: boolean
+ isKeyboardPressed?: boolean
+}
type ButtonChildrenRenderPropsProps = ButtonContentRenderPropsProps & {
- Loader: ReturnType["LoaderComponent"];
- Ripple: ReturnType["RippleComponent"];
-};
+ Loader: ReturnType['LoaderComponent']
+ Ripple: ReturnType['RippleComponent']
+}
type ButtonContentRenderProps =
- | ((props: ButtonContentRenderPropsProps) => React.ReactNode)
- | React.ReactNode;
+ | ((props: ButtonContentRenderPropsProps) => React.ReactNode)
+ | React.ReactNode
type ButtonChildrenRenderProps =
- | ((props: ButtonChildrenRenderPropsProps) => React.ReactNode)
- | React.ReactNode;
+ | ((props: ButtonChildrenRenderPropsProps) => React.ReactNode)
+ | React.ReactNode
type ButtonCustomProps = {
- children?: ButtonChildrenRenderProps;
- loadingContent?: ButtonChildrenRenderProps;
- startContent?: ButtonContentRenderProps;
- endContent?: ButtonContentRenderProps;
- hasRipple?: boolean;
- isDisabled?: boolean;
- isLoading?: boolean;
- color?: Color;
- loaderPosition?: "start" | "end";
- loaderProps?: LoaderProps;
- loaderRef?: React.Ref;
- loader?: React.ReactNode;
- subLayerProps?: SubLayerProps;
- rippleProps?: RippleProps;
- rippleRef?: React.Ref;
-};
-
-type ButtoVariantProps = NonNullableVariantProps;
+ children?: ButtonChildrenRenderProps
+ loadingContent?: ButtonChildrenRenderProps
+ startContent?: ButtonContentRenderProps
+ endContent?: ButtonContentRenderProps
+ hasRipple?: boolean
+ isDisabled?: boolean
+ isLoading?: boolean
+ color?: Color
+ loaderPosition?: 'start' | 'end'
+ loaderProps?: LoaderProps
+ loaderRef?: React.Ref
+ loader?: React.ReactNode
+ subLayerProps?: SubLayerProps
+ rippleProps?: RippleProps
+ rippleRef?: React.Ref
+}
+
+type ButtoVariantProps = NonNullableVariantProps
type ButtonProps = Simplify<
- ButtonPrimitiveProps &
- ButtonCustomProps &
- ButtoVariantProps &
- OptionalAriaProps &
- AsChildProp
->;
+ ButtonPrimitiveProps & ButtonCustomProps & ButtoVariantProps & OptionalAriaProps & AsChildProp
+>
-export type { ButtonProps };
+export type { ButtonProps }
diff --git a/src/components/button/utils/get-color-variables.ts b/src/components/button/utils/get-color-variables.ts
index 189d365..564e779 100644
--- a/src/components/button/utils/get-color-variables.ts
+++ b/src/components/button/utils/get-color-variables.ts
@@ -3,9 +3,9 @@ import React from 'react'
import { Color } from '@/components/_shared/types/colors'
const getColorVariables = (color: Color) =>
- ({
- '--button-bg': `var(--${color})`,
- '--button-color': `var(--${color}-foreground)`,
- }) as React.CSSProperties
+ ({
+ '--button-bg': `var(--${color})`,
+ '--button-color': `var(--${color}-foreground)`,
+ }) as React.CSSProperties
export { getColorVariables }
diff --git a/src/components/button/utils/get-loader-props.ts b/src/components/button/utils/get-loader-props.ts
index 98010cb..bf8c3a8 100644
--- a/src/components/button/utils/get-loader-props.ts
+++ b/src/components/button/utils/get-loader-props.ts
@@ -4,27 +4,27 @@ import React from 'react'
import { LoaderProps } from '@/components/loader'
type GetLoaderPropsArgs = {
- loaderRef: React.Ref | undefined
- loaderProps: LoaderProps | undefined
- isLoading: boolean | undefined
+ loaderRef: React.Ref | undefined
+ loaderProps: LoaderProps | undefined
+ isLoading: boolean | undefined
}
const getLoaderProps = (args: GetLoaderPropsArgs) => {
- const { loaderRef, loaderProps, isLoading } = args
+ const { loaderRef, loaderProps, isLoading } = args
- const {
- className,
- position = 'absolute-center',
- ...restLoaderProps
- } = getOptionalObject(loaderProps)
+ const {
+ className,
+ position = 'absolute-center',
+ ...restLoaderProps
+ } = getOptionalObject(loaderProps)
- return {
- 'ref': loaderRef,
- 'data-slot': 'loader',
- position,
- 'className': cx(isLoading ? 'text-[rgba(var(--button-color))]' : undefined, className),
- ...restLoaderProps,
- }
+ return {
+ 'ref': loaderRef,
+ 'data-slot': 'loader',
+ position,
+ 'className': cx(isLoading ? 'text-[rgba(var(--button-color))]' : undefined, className),
+ ...restLoaderProps,
+ }
}
export { getLoaderProps }
diff --git a/src/components/button/utils/get-ripple-props.ts b/src/components/button/utils/get-ripple-props.ts
index a2ae746..170c94b 100644
--- a/src/components/button/utils/get-ripple-props.ts
+++ b/src/components/button/utils/get-ripple-props.ts
@@ -4,30 +4,30 @@ import { RippleProps, RippleRef } from '@/components/ripple'
// @TODO understand type problem and fix it, remove any's
type GetRipplePropsArgs = {
- rippleRef: React.Ref | undefined
- rippleProps: RippleProps | undefined
- isLoading: boolean | undefined
+ rippleRef: React.Ref | undefined
+ rippleProps: RippleProps | undefined
+ isLoading: boolean | undefined
}
const getRippleProps = (args: any): any => {
- const { rippleRef, rippleProps, isLoading } = args
+ const { rippleRef, rippleProps, isLoading } = args
- const {
- color: colorProp,
- className,
- isDisabled: isDisabledProp,
- ...restRippleProps
- } = getOptionalObject(rippleProps)
+ const {
+ color: colorProp,
+ className,
+ isDisabled: isDisabledProp,
+ ...restRippleProps
+ } = getOptionalObject(rippleProps)
- const isDisabled = isLoading ?? isDisabledProp
+ const isDisabled = isLoading ?? isDisabledProp
- return {
- 'ref': rippleRef,
- 'data-slot': 'ripple',
- 'className': cx(isLoading ? '!text-[rgba(var(--button-color))]' : undefined, className),
- isDisabled,
- ...restRippleProps,
- }
+ return {
+ 'ref': rippleRef,
+ 'data-slot': 'ripple',
+ 'className': cx(isLoading ? '!text-[rgba(var(--button-color))]' : undefined, className),
+ isDisabled,
+ ...restRippleProps,
+ }
}
export { getRippleProps }
diff --git a/src/components/card/classes/card-classes.ts b/src/components/card/classes/card-classes.ts
index 75264b2..3ab2016 100644
--- a/src/components/card/classes/card-classes.ts
+++ b/src/components/card/classes/card-classes.ts
@@ -1,23 +1,23 @@
import { cva } from '@renderui/utils'
const cardClasses = cva(
- 'render-ui-card dark:border-mode-accent-high relative flex w-fit flex-col justify-between overflow-hidden rounded-lg border border-mode-accent bg-card text-foreground shadow-sm transition-all duration-fast',
- {
- variants: {
- hasShadowOnHover: {
- true: 'hover:shadow',
- false: '',
- },
- isBlurred: {
- true: ['bg-foreground/80', 'backdrop-blur-md', 'backdrop-saturate-150'],
- false: [],
- },
- },
- defaultVariants: {
- isBlurred: false,
- hasShadowOnHover: false,
- },
- },
+ 'render-ui-card dark:border-mode-accent-high relative flex w-fit flex-col justify-between overflow-hidden rounded-lg border border-mode-accent bg-card text-foreground shadow-sm transition-all duration-fast',
+ {
+ variants: {
+ hasShadowOnHover: {
+ true: 'hover:shadow',
+ false: '',
+ },
+ isBlurred: {
+ true: ['bg-foreground/80', 'backdrop-blur-md', 'backdrop-saturate-150'],
+ false: [],
+ },
+ },
+ defaultVariants: {
+ isBlurred: false,
+ hasShadowOnHover: false,
+ },
+ },
)
export { cardClasses }
diff --git a/src/components/card/components/card-body.tsx b/src/components/card/components/card-body.tsx
index 7282f06..c96835e 100644
--- a/src/components/card/components/card-body.tsx
+++ b/src/components/card/components/card-body.tsx
@@ -1,21 +1,21 @@
-import { cn, polymorphic } from "@renderui/utils";
-import React from "react";
+import { cn, polymorphic } from '@renderui/utils'
+import React from 'react'
-import { DEFAULT_CARD_BODY_CLASSNAME } from "@/components/card/constants/constants";
-import { CardBodyProps } from "@/components/card/types/card-body";
+import { DEFAULT_CARD_BODY_CLASSNAME } from '@/components/card/constants/constants'
+import { CardBodyProps } from '@/components/card/types/card-body'
const CardBody = (props: CardBodyProps) => {
- const { asChild, className, ...restProps } = props;
+ const { asChild, className, ...restProps } = props
- const Component = polymorphic(asChild, "div");
+ const Component = polymorphic(asChild, 'div')
- return (
-
- );
-};
+ return (
+
+ )
+}
-export { CardBody };
+export { CardBody }
diff --git a/src/components/card/components/card-description.tsx b/src/components/card/components/card-description.tsx
index fe880b9..98d477a 100644
--- a/src/components/card/components/card-description.tsx
+++ b/src/components/card/components/card-description.tsx
@@ -1,21 +1,21 @@
-import { cn } from "@renderui/utils";
-import React from "react";
+import { cn } from '@renderui/utils'
+import React from 'react'
-import { DEFAULT_CARD_DESCRIPTION_CLASSNAME } from "@/components/card/constants/constants";
-import { CardDescriptionProps } from "@/components/card/types/card-description";
-import { Text } from "@/components/text";
+import { DEFAULT_CARD_DESCRIPTION_CLASSNAME } from '@/components/card/constants/constants'
+import { CardDescriptionProps } from '@/components/card/types/card-description'
+import { Text } from '@/components/text'
const CardDescription = (props: CardDescriptionProps) => {
- const { className, size = "sm", ...restProps } = props;
+ const { className, size = 'sm', ...restProps } = props
- return (
-
- );
-};
+ return (
+
+ )
+}
-export { CardDescription };
+export { CardDescription }
diff --git a/src/components/card/components/card-footer.tsx b/src/components/card/components/card-footer.tsx
index b0d68e7..0220c13 100644
--- a/src/components/card/components/card-footer.tsx
+++ b/src/components/card/components/card-footer.tsx
@@ -1,59 +1,52 @@
-import { cn, getOptionalObject, polymorphic } from "@renderui/utils";
-import React from "react";
+import { cn, getOptionalObject, polymorphic } from '@renderui/utils'
+import React from 'react'
import {
- DEFAULT_CARD_FOOTER_CHILDREN_CLASSNAME,
- DEFAULT_CARD_FOOTER_CLASSNAME,
-} from "@/components/card/constants/constants";
-import { CardFooterProps } from "@/components/card/types/card-footer";
+ DEFAULT_CARD_FOOTER_CHILDREN_CLASSNAME,
+ DEFAULT_CARD_FOOTER_CLASSNAME,
+} from '@/components/card/constants/constants'
+import { CardFooterProps } from '@/components/card/types/card-footer'
const CardFooter = (props: CardFooterProps) => {
- const {
- asChild,
- childrenContainerProps,
- contentClassName,
- childrenClassName,
- startContent,
- endContent,
- children,
- ...restProps
- } = props;
+ const {
+ asChild,
+ childrenContainerProps,
+ contentClassName,
+ childrenClassName,
+ startContent,
+ endContent,
+ children,
+ ...restProps
+ } = props
- const {
- asChild: childrenContainerAsChild,
- className: childrenContainerClassName,
- ...restChildrenContainerProps
- } = getOptionalObject(childrenContainerProps);
+ const {
+ asChild: childrenContainerAsChild,
+ className: childrenContainerClassName,
+ ...restChildrenContainerProps
+ } = getOptionalObject(childrenContainerProps)
- const ContentComponent = polymorphic(asChild, "div");
+ const ContentComponent = polymorphic(asChild, 'div')
- const ChildrenContainerComponent = polymorphic(
- childrenContainerAsChild,
- "span"
- );
+ const ChildrenContainerComponent = polymorphic(childrenContainerAsChild, 'span')
- return (
-
- {startContent}
-
- {children}
-
- {endContent}
-
- );
-};
+ return (
+
+ {startContent}
+
+ {children}
+
+ {endContent}
+
+ )
+}
-export { CardFooter };
+export { CardFooter }
diff --git a/src/components/card/components/card-header.tsx b/src/components/card/components/card-header.tsx
index 40f79cc..a7bb5fd 100644
--- a/src/components/card/components/card-header.tsx
+++ b/src/components/card/components/card-header.tsx
@@ -1,58 +1,55 @@
-import { cn, getOptionalObject, polymorphic } from "@renderui/utils";
-import React from "react";
+import { cn, getOptionalObject, polymorphic } from '@renderui/utils'
+import React from 'react'
import {
- DEFAULT_CARD_HEADER_CHILDREN_CLASSNAME,
- DEFAULT_CARD_HEADER_CONTENT_CLASSNAME,
-} from "@/components/card/constants/constants";
-import { CardHeaderProps } from "@/components/card/types/card-header";
+ DEFAULT_CARD_HEADER_CHILDREN_CLASSNAME,
+ DEFAULT_CARD_HEADER_CONTENT_CLASSNAME,
+} from '@/components/card/constants/constants'
+import { CardHeaderProps } from '@/components/card/types/card-header'
const CardHeader = (props: CardHeaderProps) => {
- const {
- asChild,
- childrenContainerProps,
- contentClassName,
- childrenClassName,
- startContent,
- endContent,
- children,
- ...restProps
- } = props;
+ const {
+ asChild,
+ childrenContainerProps,
+ contentClassName,
+ childrenClassName,
+ startContent,
+ endContent,
+ children,
+ ...restProps
+ } = props
- const {
- asChild: childrenContainerAsChild,
- className: childrenContainerClassName,
- ...restChildrenContainerProps
- } = getOptionalObject(childrenContainerProps);
+ const {
+ asChild: childrenContainerAsChild,
+ className: childrenContainerClassName,
+ ...restChildrenContainerProps
+ } = getOptionalObject(childrenContainerProps)
- const ContentComponent = polymorphic(asChild, "div");
+ const ContentComponent = polymorphic(asChild, 'div')
- const ChildrenContainerComponent = polymorphic(
- childrenContainerAsChild,
- "span"
- );
+ const ChildrenContainerComponent = polymorphic(childrenContainerAsChild, 'span')
- return (
-
- {startContent}
-
- {children}
-
- {endContent}
-
- );
-};
+ return (
+
+ {startContent}
+
+ {children}
+
+ {endContent}
+
+ )
+}
-export { CardHeader };
+export { CardHeader }
diff --git a/src/components/card/components/card-title.tsx b/src/components/card/components/card-title.tsx
index 7501ca1..8c9d31c 100644
--- a/src/components/card/components/card-title.tsx
+++ b/src/components/card/components/card-title.tsx
@@ -1,21 +1,21 @@
-import { cx } from "@renderui/utils";
-import React from "react";
+import { cx } from '@renderui/utils'
+import React from 'react'
-import { DEFAULT_CARD_TITLE_CLASSNAME } from "@/components/card/constants/constants";
-import { CardTitleProps } from "@/components/card/types/card-title";
-import { Text } from "@/components/text";
+import { DEFAULT_CARD_TITLE_CLASSNAME } from '@/components/card/constants/constants'
+import { CardTitleProps } from '@/components/card/types/card-title'
+import { Text } from '@/components/text'
const CardTitle = (props: CardTitleProps) => {
- const { className, size = "md", ...restProps } = props;
+ const { className, size = 'md', ...restProps } = props
- return (
-
- );
-};
+ return (
+
+ )
+}
-export { CardTitle };
+export { CardTitle }
diff --git a/src/components/card/components/card.tsx b/src/components/card/components/card.tsx
index f30000e..a2a98d2 100644
--- a/src/components/card/components/card.tsx
+++ b/src/components/card/components/card.tsx
@@ -1,24 +1,17 @@
-import { cn, polymorphic } from "@renderui/utils";
-import React from "react";
+import { cn, polymorphic } from '@renderui/utils'
+import React from 'react'
-import { cardClasses } from "@/components/card/classes/card-classes";
-import { CardProps } from "@/components/card/types/card";
+import { cardClasses } from '@/components/card/classes/card-classes'
+import { CardProps } from '@/components/card/types/card'
const Card = (props: CardProps) => {
- const { asChild, className, isBlurred, hasShadowOnHover, ...restProps } =
- props;
+ const { asChild, className, isBlurred, hasShadowOnHover, ...restProps } = props
- const variantClassName = cardClasses({ isBlurred, hasShadowOnHover });
+ const variantClassName = cardClasses({ isBlurred, hasShadowOnHover })
- const Component = polymorphic(asChild, "div");
+ const Component = polymorphic(asChild, 'div')
- return (
-
- );
-};
+ return
+}
-export { Card };
+export { Card }
diff --git a/src/components/card/constants/constants.ts b/src/components/card/constants/constants.ts
index 22febfe..d855348 100644
--- a/src/components/card/constants/constants.ts
+++ b/src/components/card/constants/constants.ts
@@ -1,26 +1,26 @@
const DEFAULT_CARD_HEADER_CONTENT_CLASSNAME =
- 'render-ui-card-header-content flex items-center gap-4 pt-3 pb-2 px-4'
+ 'render-ui-card-header-content flex items-center gap-4 pt-3 pb-2 px-4'
const DEFAULT_CARD_HEADER_CHILDREN_CLASSNAME = 'render-ui-card-header-children flex grow flex-col'
const DEFAULT_CARD_BODY_CLASSNAME = 'render-ui-card-body py-3 px-4 text-sm'
const DEFAULT_CARD_FOOTER_CLASSNAME =
- 'render-ui-card-footer flex justify-end items-center gap-2 pt-2 pb-3 px-4'
+ 'render-ui-card-footer flex justify-end items-center gap-2 pt-2 pb-3 px-4'
const DEFAULT_CARD_FOOTER_CHILDREN_CLASSNAME =
- 'render-ui-card-footer-children flex grow flex-col-reverse gap-2 xs:flex-row xs:justify-end'
+ 'render-ui-card-footer-children flex grow flex-col-reverse gap-2 xs:flex-row xs:justify-end'
const DEFAULT_CARD_TITLE_CLASSNAME = 'render-ui-card-title font-semibold'
const DEFAULT_CARD_DESCRIPTION_CLASSNAME = 'render-ui-card-description text-mode-contrast-accent'
export {
- DEFAULT_CARD_BODY_CLASSNAME,
- DEFAULT_CARD_DESCRIPTION_CLASSNAME,
- DEFAULT_CARD_FOOTER_CHILDREN_CLASSNAME,
- DEFAULT_CARD_FOOTER_CLASSNAME,
- DEFAULT_CARD_HEADER_CHILDREN_CLASSNAME,
- DEFAULT_CARD_HEADER_CONTENT_CLASSNAME,
- DEFAULT_CARD_TITLE_CLASSNAME,
+ DEFAULT_CARD_BODY_CLASSNAME,
+ DEFAULT_CARD_DESCRIPTION_CLASSNAME,
+ DEFAULT_CARD_FOOTER_CHILDREN_CLASSNAME,
+ DEFAULT_CARD_FOOTER_CLASSNAME,
+ DEFAULT_CARD_HEADER_CHILDREN_CLASSNAME,
+ DEFAULT_CARD_HEADER_CONTENT_CLASSNAME,
+ DEFAULT_CARD_TITLE_CLASSNAME,
}
diff --git a/src/components/card/types/card-body.ts b/src/components/card/types/card-body.ts
index bea2715..44f5368 100644
--- a/src/components/card/types/card-body.ts
+++ b/src/components/card/types/card-body.ts
@@ -1,8 +1,8 @@
-import { Simplify } from "@/components/_shared/types/simplify";
-import React from "react";
+import { Simplify } from '@/components/_shared/types/simplify'
+import React from 'react'
-import { AsChildProp } from "@/components/_shared/types/as-child";
+import { AsChildProp } from '@/components/_shared/types/as-child'
-type CardBodyProps = Simplify & AsChildProp>;
+type CardBodyProps = Simplify & AsChildProp>
-export type { CardBodyProps, CardBodyRef };
+export type { CardBodyProps, CardBodyRef }
diff --git a/src/components/card/types/card-description.ts b/src/components/card/types/card-description.ts
index 4ac0e69..e198db6 100644
--- a/src/components/card/types/card-description.ts
+++ b/src/components/card/types/card-description.ts
@@ -1,5 +1,5 @@
-import { TextProps } from "@/components/text";
+import { TextProps } from '@/components/text'
-type CardDescriptionProps = TextProps;
+type CardDescriptionProps = TextProps
-export type { CardDescriptionProps };
+export type { CardDescriptionProps }
diff --git a/src/components/card/types/card-footer.ts b/src/components/card/types/card-footer.ts
index 9031834..b54045c 100644
--- a/src/components/card/types/card-footer.ts
+++ b/src/components/card/types/card-footer.ts
@@ -1,25 +1,18 @@
-import { Simplify } from "@/components/_shared/types/simplify";
-import React from "react";
+import { Simplify } from '@/components/_shared/types/simplify'
+import React from 'react'
-import { AsChildProp } from "@/components/_shared/types/as-child";
+import { AsChildProp } from '@/components/_shared/types/as-child'
-type CardFooterPrimitiveProps = Omit<
- React.ComponentPropsWithRef<"div">,
- "className"
->;
+type CardFooterPrimitiveProps = Omit, 'className'>
type CardFooterCustomProps = {
- startContent?: React.ReactNode;
- endContent?: React.ReactNode;
- childrenClassName?: string;
- contentClassName?: string;
- childrenContainerProps?: Simplify<
- React.ComponentPropsWithRef<"span"> & AsChildProp
- >;
-};
+ startContent?: React.ReactNode
+ endContent?: React.ReactNode
+ childrenClassName?: string
+ contentClassName?: string
+ childrenContainerProps?: Simplify & AsChildProp>
+}
-type CardFooterProps = Simplify<
- CardFooterPrimitiveProps & CardFooterCustomProps & AsChildProp
->;
+type CardFooterProps = Simplify
-export type { CardFooterProps };
+export type { CardFooterProps }
diff --git a/src/components/card/types/card-header.ts b/src/components/card/types/card-header.ts
index cb2aa1e..2e15c13 100644
--- a/src/components/card/types/card-header.ts
+++ b/src/components/card/types/card-header.ts
@@ -1,25 +1,18 @@
-import { Simplify } from "@/components/_shared/types/simplify";
-import React from "react";
+import { Simplify } from '@/components/_shared/types/simplify'
+import React from 'react'
-import { AsChildProp } from "@/components/_shared/types/as-child";
+import { AsChildProp } from '@/components/_shared/types/as-child'
-type CardHeaderPrimitiveProps = Omit<
- React.ComponentPropsWithRef<"div">,
- "className"
->;
+type CardHeaderPrimitiveProps = Omit, 'className'>
type CardHeaderCustomProps = {
- startContent?: React.ReactNode;
- endContent?: React.ReactNode;
- childrenClassName?: string;
- contentClassName?: string;
- childrenContainerProps?: Simplify<
- React.ComponentPropsWithRef<"span"> & AsChildProp
- >;
-};
+ startContent?: React.ReactNode
+ endContent?: React.ReactNode
+ childrenClassName?: string
+ contentClassName?: string
+ childrenContainerProps?: Simplify & AsChildProp>
+}
-type CardHeaderProps = Simplify<
- CardHeaderPrimitiveProps & CardHeaderCustomProps & AsChildProp
->;
+type CardHeaderProps = Simplify
-export type { CardHeaderProps };
+export type { CardHeaderProps }
diff --git a/src/components/card/types/card-title.ts b/src/components/card/types/card-title.ts
index 5c00b92..d5c0c03 100644
--- a/src/components/card/types/card-title.ts
+++ b/src/components/card/types/card-title.ts
@@ -1,5 +1,5 @@
-import { TextProps } from "@/components/text";
+import { TextProps } from '@/components/text'
-type CardTitleProps = TextProps;
+type CardTitleProps = TextProps
-export type { CardTitleProps };
+export type { CardTitleProps }
diff --git a/src/components/card/types/card.ts b/src/components/card/types/card.ts
index e9e68bd..89cd18d 100644
--- a/src/components/card/types/card.ts
+++ b/src/components/card/types/card.ts
@@ -1,14 +1,14 @@
-import { Simplify } from "@/components/_shared/types/simplify";
-import React from "react";
+import { Simplify } from '@/components/_shared/types/simplify'
+import React from 'react'
-import { AsChildProp } from "@/components/_shared/types/as-child";
-import { NonNullableVariantProps } from "@/components/_shared/types/variants";
-import { cardClasses } from "@/components/card/classes/card-classes";
+import { AsChildProp } from '@/components/_shared/types/as-child'
+import { NonNullableVariantProps } from '@/components/_shared/types/variants'
+import { cardClasses } from '@/components/card/classes/card-classes'
-type CardPrimitiveProps = React.ComponentPropsWithRef<"div">;
+type CardPrimitiveProps = React.ComponentPropsWithRef<'div'>
-type CardVariantProps = NonNullableVariantProps;
+type CardVariantProps = NonNullableVariantProps
-type CardProps = Simplify;
+type CardProps = Simplify
-export type { CardProps };
+export type { CardProps }
diff --git a/src/components/checkbox/components/checkbox-indicator.tsx b/src/components/checkbox/components/checkbox-indicator.tsx
index ce89d80..4a590ca 100644
--- a/src/components/checkbox/components/checkbox-indicator.tsx
+++ b/src/components/checkbox/components/checkbox-indicator.tsx
@@ -4,63 +4,63 @@ import React from 'react'
import { DEFAULT_CHECKBOX_INDICATOR_CLASSNAME } from '@/components/checkbox/constants/constants'
import {
- CheckboxIndicatorProps,
- CheckboxIndicatorRef,
+ CheckboxIndicatorProps,
+ CheckboxIndicatorRef,
} from '@/components/checkbox/types/checkbox-indicator'
import { getMergedIndicatorVariantAnimation } from '@/components/checkbox/utils/get-merged-indicator-variant-animation'
import { LazyMotionDomAnimationProvider } from '@/providers'
const CheckboxIndicator = React.forwardRef(
- (props, ref) => {
- const {
- isChecked,
- hasIconContentWhenUnchecked,
- className,
- pathProps,
- animate,
- animationDuration,
- initial = false,
- fill = 'none',
- viewBox = '0 0 24 24',
- ...restProps
- } = props
+ (props, ref) => {
+ const {
+ isChecked,
+ hasIconContentWhenUnchecked,
+ className,
+ pathProps,
+ animate,
+ animationDuration,
+ initial = false,
+ fill = 'none',
+ viewBox = '0 0 24 24',
+ ...restProps
+ } = props
- const {
- strokeLinecap = 'round',
- strokeLinejoin = 'round',
- d: dProp = 'M4.5 12.75l6 6 9-13.5',
- variants,
- ...restPathprops
- } = getOptionalObject(pathProps)
+ const {
+ strokeLinecap = 'round',
+ strokeLinejoin = 'round',
+ d: dProp = 'M4.5 12.75l6 6 9-13.5',
+ variants,
+ ...restPathprops
+ } = getOptionalObject(pathProps)
- return (
-
-
-
-
-
- )
- },
+ return (
+
+
+
+
+
+ )
+ },
)
CheckboxIndicator.displayName = 'CheckboxIndicator'
diff --git a/src/components/checkbox/components/checkbox.tsx b/src/components/checkbox/components/checkbox.tsx
index 4eec13b..6fc08a0 100644
--- a/src/components/checkbox/components/checkbox.tsx
+++ b/src/components/checkbox/components/checkbox.tsx
@@ -1,121 +1,107 @@
-"use client";
+'use client'
-import {
- chain,
- cn,
- cx,
- functionCallOrValue,
- getOptionalObject,
- polymorphic,
-} from "@renderui/utils";
-import React from "react";
+import { chain, cn, cx, functionCallOrValue, getOptionalObject, polymorphic } from '@renderui/utils'
+import React from 'react'
-import { Button } from "@/components/button";
-import { CheckboxIndicator } from "@/components/checkbox/components/checkbox-indicator";
+import { Button } from '@/components/button'
+import { CheckboxIndicator } from '@/components/checkbox/components/checkbox-indicator'
import {
- DEFAULT_CHECKBOX_CLASSNAME,
- DEFAULT_CHECKBOX_HIDDEN_INPUT_CLASSNAME,
-} from "@/components/checkbox/constants/constants";
-import { CheckboxProps } from "@/components/checkbox/types/checkbox";
-import { VisuallyHidden } from "@/components/visually-hidden";
-import { useControllableState } from "@/components/_shared/hooks/use-controllable-state";
+ DEFAULT_CHECKBOX_CLASSNAME,
+ DEFAULT_CHECKBOX_HIDDEN_INPUT_CLASSNAME,
+} from '@/components/checkbox/constants/constants'
+import { CheckboxProps } from '@/components/checkbox/types/checkbox'
+import { VisuallyHidden } from '@/components/visually-hidden'
+import { useControllableState } from '@/components/_shared/hooks/use-controllable-state'
const Checkbox = (props: CheckboxProps) => {
- const {
- inputRef,
- inputProps,
- name,
- className,
- defaultChecked,
- isChecked: checkedProp,
- isDisabled,
- isInvalid,
- isReadOnly,
- isRequired,
- startContent,
- endContent,
- children,
- animationDuration,
- onCheckedChange,
- onPress,
- color = "primary",
- hasRipple = false,
- hasIconContentWhenUnchecked = true,
- ...restProps
- } = props;
+ const {
+ inputRef,
+ inputProps,
+ name,
+ className,
+ defaultChecked,
+ isChecked: checkedProp,
+ isDisabled,
+ isInvalid,
+ isReadOnly,
+ isRequired,
+ startContent,
+ endContent,
+ children,
+ animationDuration,
+ onCheckedChange,
+ onPress,
+ color = 'primary',
+ hasRipple = false,
+ hasIconContentWhenUnchecked = true,
+ ...restProps
+ } = props
- const [checked, setChecked] = useControllableState({
- prop: checkedProp,
- defaultProp: defaultChecked,
- onChange: onCheckedChange,
- });
+ const [checked, setChecked] = useControllableState({
+ prop: checkedProp,
+ defaultProp: defaultChecked,
+ onChange: onCheckedChange,
+ })
- const {
- asChild,
- name: inputName,
- value: inputValue,
- className: inputClassName,
- checked: inputChecked,
- onChange,
- tabIndex = -1,
- ...restInputProps
- } = getOptionalObject(inputProps);
+ const {
+ asChild,
+ name: inputName,
+ value: inputValue,
+ className: inputClassName,
+ checked: inputChecked,
+ onChange,
+ tabIndex = -1,
+ ...restInputProps
+ } = getOptionalObject(inputProps)
- const InputComponent = polymorphic(asChild, "input");
+ const InputComponent = polymorphic(asChild, 'input')
- return (
-
- );
-};
+ return (
+
+ )
+}
-export { Checkbox };
+export { Checkbox }
diff --git a/src/components/checkbox/constants/constants.ts b/src/components/checkbox/constants/constants.ts
index a308d79..78327a5 100644
--- a/src/components/checkbox/constants/constants.ts
+++ b/src/components/checkbox/constants/constants.ts
@@ -1,28 +1,28 @@
const DEFAULT_CHECKBOX_CLASSNAME =
- 'render-ui-checkbox p-0.5 bg-transparent rounded-md min-w-0 h-fit w-fit aspect-square shrink-0 text-white data-[state=checked]:bg-primary data-[invalid=true]:ring-destructive'
+ 'render-ui-checkbox p-0.5 bg-transparent rounded-md min-w-0 h-fit w-fit aspect-square shrink-0 text-white data-[state=checked]:bg-primary data-[invalid=true]:ring-destructive'
const DEFAULT_CHECKBOX_INDICATOR_CLASSNAME =
- 'render-ui-checkbox-indicator h-[0.85rem] w-[0.85rem] stroke-white stroke-[2.5]'
+ 'render-ui-checkbox-indicator h-[0.85rem] w-[0.85rem] stroke-white stroke-[2.5]'
const DEFAULT_CHECKBOX_HIDDEN_INPUT_CLASSNAME = 'render-ui-checkbox-hidden-input'
const DEFEAULT_MOTION_PROPS = {
- checked: {
- pathLength: 1,
- opacity: 1,
- transition: {
- duration: 0.275,
- delay: 0,
- },
- },
- unchecked: {
- pathLength: 0,
- opacity: 0,
- transition: {
- duration: 0,
- delay: 0,
- },
- },
+ checked: {
+ pathLength: 1,
+ opacity: 1,
+ transition: {
+ duration: 0.275,
+ delay: 0,
+ },
+ },
+ unchecked: {
+ pathLength: 0,
+ opacity: 0,
+ transition: {
+ duration: 0,
+ delay: 0,
+ },
+ },
} as const
const CHECKBOX_BUTTON_ROLE_TYPE_CONFIG = { role: 'checkbox', type: 'button' } as const
@@ -30,10 +30,10 @@ const CHECKBOX_BUTTON_ROLE_TYPE_CONFIG = { role: 'checkbox', type: 'button' } as
const CHECKBOX_INPUT_TYPE_CONFIG = { type: 'checkbox' } as const
export {
- CHECKBOX_BUTTON_ROLE_TYPE_CONFIG,
- CHECKBOX_INPUT_TYPE_CONFIG,
- DEFAULT_CHECKBOX_CLASSNAME,
- DEFAULT_CHECKBOX_HIDDEN_INPUT_CLASSNAME,
- DEFAULT_CHECKBOX_INDICATOR_CLASSNAME,
- DEFEAULT_MOTION_PROPS,
+ CHECKBOX_BUTTON_ROLE_TYPE_CONFIG,
+ CHECKBOX_INPUT_TYPE_CONFIG,
+ DEFAULT_CHECKBOX_CLASSNAME,
+ DEFAULT_CHECKBOX_HIDDEN_INPUT_CLASSNAME,
+ DEFAULT_CHECKBOX_INDICATOR_CLASSNAME,
+ DEFEAULT_MOTION_PROPS,
}
diff --git a/src/components/checkbox/types/checkbox-indicator.ts b/src/components/checkbox/types/checkbox-indicator.ts
index 02ec42a..e9bf085 100644
--- a/src/components/checkbox/types/checkbox-indicator.ts
+++ b/src/components/checkbox/types/checkbox-indicator.ts
@@ -1,22 +1,22 @@
-import { Simplify } from "@/components/_shared/types/simplify";
-import { m } from "framer-motion";
-import React from "react";
+import { Simplify } from '@/components/_shared/types/simplify'
+import { m } from 'framer-motion'
+import React from 'react'
// type CheckboxIndicatorPrimitive = typeof m.svg;
// @TODO
// type CheckboxIndicatorPrimitiveProps = React.ComponentPropsWithRef
-type CheckboxIndicatorPrimitiveProps = Record;
+type CheckboxIndicatorPrimitiveProps = Record
type CheckboxIndicatorCustomProps = {
- isChecked?: boolean;
- animationDuration?: number;
- hasIconContentWhenUnchecked?: boolean;
- pathProps?: React.ComponentPropsWithRef;
-};
+ isChecked?: boolean
+ animationDuration?: number
+ hasIconContentWhenUnchecked?: boolean
+ pathProps?: React.ComponentPropsWithRef
+}
type CheckboxIndicatorProps = Simplify<
- CheckboxIndicatorPrimitiveProps & CheckboxIndicatorCustomProps
->;
+ CheckboxIndicatorPrimitiveProps & CheckboxIndicatorCustomProps
+>
-export type { CheckboxIndicatorProps };
+export type { CheckboxIndicatorProps }
diff --git a/src/components/checkbox/types/checkbox.ts b/src/components/checkbox/types/checkbox.ts
index 1ac8e56..d00a337 100644
--- a/src/components/checkbox/types/checkbox.ts
+++ b/src/components/checkbox/types/checkbox.ts
@@ -1,40 +1,32 @@
-import { Primitive as primitive } from "@radix-ui/react-primitive";
-import { Simplify } from "@/components/_shared/types/simplify";
-import React from "react";
+import { Primitive as primitive } from '@radix-ui/react-primitive'
+import { Simplify } from '@/components/_shared/types/simplify'
+import React from 'react'
-import { AsChildProp } from "@/components/_shared/types/as-child";
-import { ButtonProps } from "@/components/button";
+import { AsChildProp } from '@/components/_shared/types/as-child'
+import { ButtonProps } from '@/components/button'
type CheckboxButtonProps = Omit<
- ButtonProps,
- | "children"
- | "disabled"
- | "readonly"
- | "required"
- | "startContent"
- | "children"
- | "endContent"
->;
+ ButtonProps,
+ 'children' | 'disabled' | 'readonly' | 'required' | 'startContent' | 'children' | 'endContent'
+>
type CheckboxCustomProps = {
- children?: React.ReactNode | ((checked: boolean) => React.ReactNode);
- startContent?: React.ReactNode | ((checked: boolean) => React.ReactNode);
- endContent?: React.ReactNode | ((checked: boolean) => React.ReactNode);
- inputRef?: React.RefObject;
- inputProps?: Simplify<
- React.ComponentPropsWithRef & AsChildProp
- >;
- name?: string;
- isChecked?: boolean;
- isReadOnly?: boolean;
- isInvalid?: boolean;
- isRequired?: boolean;
- defaultChecked?: boolean;
- hasIconContentWhenUnchecked?: boolean;
- animationDuration?: number;
- onCheckedChange?: (isChecked: boolean) => void;
-};
+ children?: React.ReactNode | ((checked: boolean) => React.ReactNode)
+ startContent?: React.ReactNode | ((checked: boolean) => React.ReactNode)
+ endContent?: React.ReactNode | ((checked: boolean) => React.ReactNode)
+ inputRef?: React.RefObject
+ inputProps?: Simplify & AsChildProp>
+ name?: string
+ isChecked?: boolean
+ isReadOnly?: boolean
+ isInvalid?: boolean
+ isRequired?: boolean
+ defaultChecked?: boolean
+ hasIconContentWhenUnchecked?: boolean
+ animationDuration?: number
+ onCheckedChange?: (isChecked: boolean) => void
+}
-type CheckboxProps = Simplify;
+type CheckboxProps = Simplify
-export type { CheckboxProps };
+export type { CheckboxProps }
diff --git a/src/components/checkbox/utils/get-merged-indicator-variant-animation.ts b/src/components/checkbox/utils/get-merged-indicator-variant-animation.ts
index fefe6ef..e096845 100644
--- a/src/components/checkbox/utils/get-merged-indicator-variant-animation.ts
+++ b/src/components/checkbox/utils/get-merged-indicator-variant-animation.ts
@@ -2,26 +2,26 @@ import { CheckboxIndicatorProps } from '@/checkbox'
import { DEFEAULT_MOTION_PROPS } from '@/components/checkbox/constants/constants'
function getMergedIndicatorVariantAnimation(
- variants: CheckboxIndicatorProps['variants'],
- animationDuration: number | undefined,
+ variants: CheckboxIndicatorProps['variants'],
+ animationDuration: number | undefined,
) {
- if (animationDuration === undefined)
- return {
- ...DEFEAULT_MOTION_PROPS,
- ...variants,
- }
+ if (animationDuration === undefined)
+ return {
+ ...DEFEAULT_MOTION_PROPS,
+ ...variants,
+ }
- return {
- ...DEFEAULT_MOTION_PROPS,
- checked: {
- ...DEFEAULT_MOTION_PROPS.checked,
- transition: {
- ...DEFEAULT_MOTION_PROPS.checked.transition,
- duration: Number.parseFloat((animationDuration / 1000).toFixed(2)),
- },
- },
- ...variants,
- }
+ return {
+ ...DEFEAULT_MOTION_PROPS,
+ checked: {
+ ...DEFEAULT_MOTION_PROPS.checked,
+ transition: {
+ ...DEFEAULT_MOTION_PROPS.checked.transition,
+ duration: Number.parseFloat((animationDuration / 1000).toFixed(2)),
+ },
+ },
+ ...variants,
+ }
}
export { getMergedIndicatorVariantAnimation }
diff --git a/src/components/collapsible/components/collapsible-content.tsx b/src/components/collapsible/components/collapsible-content.tsx
index dc38a41..666c16d 100644
--- a/src/components/collapsible/components/collapsible-content.tsx
+++ b/src/components/collapsible/components/collapsible-content.tsx
@@ -5,66 +5,66 @@ import { cn } from '@renderui/utils'
import React, { useEffect, useState } from 'react'
import {
- CollapsibleContentProps,
- CollapsibleContentRef,
+ CollapsibleContentProps,
+ CollapsibleContentRef,
} from '@/components/collapsible/types/collapsible-content'
import {
- COLLAPSIBLE_ANIMATED_CONTENT_CLASSNAME,
- COLLAPSIBLE_CONTENT_DEFAULT_ANIMATION_DURATION,
- DEFAULT_COLLAPSIBLE_CONTENT_CLASSNAME,
+ COLLAPSIBLE_ANIMATED_CONTENT_CLASSNAME,
+ COLLAPSIBLE_CONTENT_DEFAULT_ANIMATION_DURATION,
+ DEFAULT_COLLAPSIBLE_CONTENT_CLASSNAME,
} from '../constants/constants'
import { getAnimationStyleVariables } from '@renderui/utils/get-animation-style-variables'
const CollapsibleContent = React.forwardRef(
- (props, ref) => {
- const {
- style,
- className,
- hasSkippedInitialAnimation,
- animationDuration,
- animationInDuration,
- animationOutDuration,
- animationTimingFunction,
- animationInTimingFunction,
- animationOutTimingFunction,
- hasDefaultAnimation = true,
- ...restProps
- } = props
+ (props, ref) => {
+ const {
+ style,
+ className,
+ hasSkippedInitialAnimation,
+ animationDuration,
+ animationInDuration,
+ animationOutDuration,
+ animationTimingFunction,
+ animationInTimingFunction,
+ animationOutTimingFunction,
+ hasDefaultAnimation = true,
+ ...restProps
+ } = props
- const [defaultDuration, setDefaultDuration] = useState(
- hasSkippedInitialAnimation ? 0 : COLLAPSIBLE_CONTENT_DEFAULT_ANIMATION_DURATION,
- )
+ const [defaultDuration, setDefaultDuration] = useState(
+ hasSkippedInitialAnimation ? 0 : COLLAPSIBLE_CONTENT_DEFAULT_ANIMATION_DURATION,
+ )
- useEffect(() => {
- setDefaultDuration(COLLAPSIBLE_CONTENT_DEFAULT_ANIMATION_DURATION)
- }, [hasSkippedInitialAnimation])
+ useEffect(() => {
+ setDefaultDuration(COLLAPSIBLE_CONTENT_DEFAULT_ANIMATION_DURATION)
+ }, [hasSkippedInitialAnimation])
- return (
-
- )
- },
+ return (
+
+ )
+ },
)
CollapsibleContent.displayName = 'CollapsibleContent'
diff --git a/src/components/collapsible/components/collapsible-trigger.tsx b/src/components/collapsible/components/collapsible-trigger.tsx
index acf9b39..8288a3d 100644
--- a/src/components/collapsible/components/collapsible-trigger.tsx
+++ b/src/components/collapsible/components/collapsible-trigger.tsx
@@ -6,27 +6,27 @@ import React from 'react'
import { Button } from '@/components/button'
import {
- CollapsibleTriggerProps,
- CollapsibleTriggerRef,
+ CollapsibleTriggerProps,
+ CollapsibleTriggerRef,
} from '@/components/collapsible/types/collapsible-trigger'
const CollapsibleTrigger = React.forwardRef(
- (props, ref) => {
- const { className, variant = 'solid', color = 'mode-accent' } = props
+ (props, ref) => {
+ const { className, variant = 'solid', color = 'mode-accent' } = props
- return (
-
-
-
- )
- },
+ return (
+
+
+
+ )
+ },
)
CollapsibleTrigger.displayName = 'CollapsibleTrigger'
diff --git a/src/components/collapsible/components/collapsible.tsx b/src/components/collapsible/components/collapsible.tsx
index 50b32fb..f11cff0 100644
--- a/src/components/collapsible/components/collapsible.tsx
+++ b/src/components/collapsible/components/collapsible.tsx
@@ -1,20 +1,20 @@
-"use client";
+'use client'
-import { CollapsibleProps } from "@/components/collapsible/types/collapsible";
-import { Collapsible as CollapsiblePrimitive } from "@radix-ui/react-collapsible";
-import { cn } from "@renderui/utils";
-import React from "react";
+import { CollapsibleProps } from '@/components/collapsible/types/collapsible'
+import { Collapsible as CollapsiblePrimitive } from '@radix-ui/react-collapsible'
+import { cn } from '@renderui/utils'
+import React from 'react'
const Collapsible = (props: CollapsibleProps) => {
- const { className, ...restProps } = props;
+ const { className, ...restProps } = props
- return (
-
- );
-};
+ return (
+
+ )
+}
-export { Collapsible };
+export { Collapsible }
diff --git a/src/components/collapsible/constants/constants.ts b/src/components/collapsible/constants/constants.ts
index f2bec4d..7858489 100644
--- a/src/components/collapsible/constants/constants.ts
+++ b/src/components/collapsible/constants/constants.ts
@@ -1,12 +1,12 @@
const DEFAULT_COLLAPSIBLE_CONTENT_CLASSNAME = 'render-ui-collapsible-content'
const COLLAPSIBLE_ANIMATED_CONTENT_CLASSNAME =
- 'data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden'
+ 'data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden'
const COLLAPSIBLE_CONTENT_DEFAULT_ANIMATION_DURATION = 200
export {
- DEFAULT_COLLAPSIBLE_CONTENT_CLASSNAME,
- COLLAPSIBLE_ANIMATED_CONTENT_CLASSNAME,
- COLLAPSIBLE_CONTENT_DEFAULT_ANIMATION_DURATION,
+ DEFAULT_COLLAPSIBLE_CONTENT_CLASSNAME,
+ COLLAPSIBLE_ANIMATED_CONTENT_CLASSNAME,
+ COLLAPSIBLE_CONTENT_DEFAULT_ANIMATION_DURATION,
}
diff --git a/src/components/collapsible/types/collapsible-content.ts b/src/components/collapsible/types/collapsible-content.ts
index 0aefe17..d56be23 100644
--- a/src/components/collapsible/types/collapsible-content.ts
+++ b/src/components/collapsible/types/collapsible-content.ts
@@ -1,19 +1,16 @@
-import { CollapsibleContent as CollapsibleContentPrimitive } from "@radix-ui/react-collapsible";
-import { Simplify } from "@/components/_shared/types/simplify";
-import { AnimationStyleVariables } from "@renderui/utils/get-animation-style-variables";
+import { CollapsibleContent as CollapsibleContentPrimitive } from '@radix-ui/react-collapsible'
+import { Simplify } from '@/components/_shared/types/simplify'
+import { AnimationStyleVariables } from '@renderui/utils/get-animation-style-variables'
-type CollapsibleContentPrimitiveType = typeof CollapsibleContentPrimitive;
+type CollapsibleContentPrimitiveType = typeof CollapsibleContentPrimitive
-type CollapsibleContentPrimitiveProps =
- React.ComponentPropsWithRef;
+type CollapsibleContentPrimitiveProps = React.ComponentPropsWithRef
type CollapsibleCustomProps = {
- hasDefaultAnimation?: boolean;
- hasSkippedInitialAnimation?: boolean;
-} & AnimationStyleVariables;
+ hasDefaultAnimation?: boolean
+ hasSkippedInitialAnimation?: boolean
+} & AnimationStyleVariables
-type CollapsibleContentProps = Simplify<
- CollapsibleContentPrimitiveProps & CollapsibleCustomProps
->;
+type CollapsibleContentProps = Simplify
-export type { CollapsibleContentProps };
+export type { CollapsibleContentProps }
diff --git a/src/components/collapsible/types/collapsible-trigger.ts b/src/components/collapsible/types/collapsible-trigger.ts
index 43b31b3..ed9c0fd 100644
--- a/src/components/collapsible/types/collapsible-trigger.ts
+++ b/src/components/collapsible/types/collapsible-trigger.ts
@@ -1,5 +1,5 @@
-import { ButtonProps } from "@/components/button";
+import { ButtonProps } from '@/components/button'
-type CollapsibleTriggerProps = ButtonProps;
+type CollapsibleTriggerProps = ButtonProps
-export type { CollapsibleTriggerProps };
+export type { CollapsibleTriggerProps }
diff --git a/src/components/collapsible/types/collapsible.ts b/src/components/collapsible/types/collapsible.ts
index a6ccc24..d9c0326 100644
--- a/src/components/collapsible/types/collapsible.ts
+++ b/src/components/collapsible/types/collapsible.ts
@@ -1,7 +1,7 @@
-import { Collapsible as CollapsiblePrimitive } from "@radix-ui/react-collapsible";
+import { Collapsible as CollapsiblePrimitive } from '@radix-ui/react-collapsible'
-type CollapsiblePrimitiveType = typeof CollapsiblePrimitive;
+type CollapsiblePrimitiveType = typeof CollapsiblePrimitive
-type CollapsibleProps = React.ComponentPropsWithRef;
+type CollapsibleProps = React.ComponentPropsWithRef
-export type { CollapsibleProps };
+export type { CollapsibleProps }
diff --git a/src/components/combobox/components/combobox-content.tsx b/src/components/combobox/components/combobox-content.tsx
index 364a0e8..2017176 100644
--- a/src/components/combobox/components/combobox-content.tsx
+++ b/src/components/combobox/components/combobox-content.tsx
@@ -1,171 +1,154 @@
-"use client";
+'use client'
-import { cx, getOptionalObject } from "@renderui/utils";
-import React from "react";
+import { cx, getOptionalObject } from '@renderui/utils'
+import React from 'react'
-import { ComboboxInput } from "@/components/combobox/components/combobox-input";
+import { ComboboxInput } from '@/components/combobox/components/combobox-input'
import {
- COMBOBOX_INPUT_CONTAINER_CLASSNAME,
- DEFAULT_COMBOBOX_COMMAND_CLASSNAME,
- DEFAULT_COMBOBOX_COMMAND_GROUP_CLASSNAME,
- DEFAULT_COMBOBOX_CONTENT_CLASSNAME,
- DEFAULT_COMBOBOX_INPUT_CLASSNAME,
- DEFAULT_COMBOBOX_SCROLL_AREA_CLASSNAME,
- DEFAULT_COMBOBOX_SCROLL_AREA_SCROLLBAR_CLASSNAME,
- DEFAULT_INPUT_CONTAINER_CLASSNAME,
- SELECT_INPUT_CONTAINER_CLASSNAME,
-} from "@/components/combobox/constants/constants";
-import { useComboboxContext } from "@/components/combobox/contexts/combobox-context";
-import { useLazyScrollAreaComponent } from "@/components/combobox/hooks/use-lazy-scroll-area-component";
-import { ComboboxContentProps } from "@/components/combobox/types/combobox-content";
-import { Command } from "@/components/command/components/command";
-import { CommandEmpty } from "@/components/command/components/command-empty";
-import { CommandGroup } from "@/components/command/components/command-group";
-import { CommandList } from "@/components/command/components/command-list";
-import { PopoverContent } from "@/components/popover/components/popover-content";
-import { ScrollAreaScrollbarProps } from "@/components/scroll-area/types/scroll-area-scrollbar";
+ COMBOBOX_INPUT_CONTAINER_CLASSNAME,
+ DEFAULT_COMBOBOX_COMMAND_CLASSNAME,
+ DEFAULT_COMBOBOX_COMMAND_GROUP_CLASSNAME,
+ DEFAULT_COMBOBOX_CONTENT_CLASSNAME,
+ DEFAULT_COMBOBOX_INPUT_CLASSNAME,
+ DEFAULT_COMBOBOX_SCROLL_AREA_CLASSNAME,
+ DEFAULT_COMBOBOX_SCROLL_AREA_SCROLLBAR_CLASSNAME,
+ DEFAULT_INPUT_CONTAINER_CLASSNAME,
+ SELECT_INPUT_CONTAINER_CLASSNAME,
+} from '@/components/combobox/constants/constants'
+import { useComboboxContext } from '@/components/combobox/contexts/combobox-context'
+import { useLazyScrollAreaComponent } from '@/components/combobox/hooks/use-lazy-scroll-area-component'
+import { ComboboxContentProps } from '@/components/combobox/types/combobox-content'
+import { Command } from '@/components/command/components/command'
+import { CommandEmpty } from '@/components/command/components/command-empty'
+import { CommandGroup } from '@/components/command/components/command-group'
+import { CommandList } from '@/components/command/components/command-list'
+import { PopoverContent } from '@/components/popover/components/popover-content'
+import { ScrollAreaScrollbarProps } from '@/components/scroll-area/types/scroll-area-scrollbar'
const ComboboxContent = (props: ComboboxContentProps) => {
- const {
- className,
- children,
- placeholder,
- emptyContent,
- commandProps,
- commandInputProps,
- commandEmptyProps,
- commandGroupProps,
- commandListProps,
- scrollAreaProps,
- align = "start",
- side = "bottom",
- hasScroll = false,
- hasEmptyContent = true,
- hasTriggerMinWidth = true,
- ...restProps
- } = props;
+ const {
+ className,
+ children,
+ placeholder,
+ emptyContent,
+ commandProps,
+ commandInputProps,
+ commandEmptyProps,
+ commandGroupProps,
+ commandListProps,
+ scrollAreaProps,
+ align = 'start',
+ side = 'bottom',
+ hasScroll = false,
+ hasEmptyContent = true,
+ hasTriggerMinWidth = true,
+ ...restProps
+ } = props
- const { type, focusValue, setFocusValue } = useComboboxContext();
+ const { type, focusValue, setFocusValue } = useComboboxContext()
- const {
- loop = true,
- className: commandClassName,
- ...restCommandProps
- } = getOptionalObject(commandProps);
+ const {
+ loop = true,
+ className: commandClassName,
+ ...restCommandProps
+ } = getOptionalObject(commandProps)
- const {
- placeholder: commandInputPlaceholder,
- className: commandInputClassName,
- ...restCommandInputProps
- } = getOptionalObject(commandInputProps);
+ const {
+ placeholder: commandInputPlaceholder,
+ className: commandInputClassName,
+ ...restCommandInputProps
+ } = getOptionalObject(commandInputProps)
- const { children: commandEmptyContent, ...restCommandEmptyProps } =
- getOptionalObject(commandEmptyProps);
+ const { children: commandEmptyContent, ...restCommandEmptyProps } =
+ getOptionalObject(commandEmptyProps)
- const { className: commandGroupClassName, ...restCommandGroupClassName } =
- getOptionalObject(commandGroupProps);
+ const { className: commandGroupClassName, ...restCommandGroupClassName } =
+ getOptionalObject(commandGroupProps)
- const {
- className: scrollAreaClassName,
- scrollbarProps,
- ...restScrollAreaProps
- } = getOptionalObject(scrollAreaProps);
+ const {
+ className: scrollAreaClassName,
+ scrollbarProps,
+ ...restScrollAreaProps
+ } = getOptionalObject(scrollAreaProps)
- const { className: scrollbarClassName, ...restScrollbarProps } =
- getOptionalObject(scrollbarProps);
+ const { className: scrollbarClassName, ...restScrollbarProps } = getOptionalObject(scrollbarProps)
- const ScrollAreaComponent = useLazyScrollAreaComponent(hasScroll);
+ const ScrollAreaComponent = useLazyScrollAreaComponent(hasScroll)
- const shouldRenderEmptyContent =
- hasEmptyContent && (commandEmptyContent || emptyContent);
+ const shouldRenderEmptyContent = hasEmptyContent && (commandEmptyContent || emptyContent)
- return (
-
-
-
+ return (
+
+
+
- {hasScroll && ScrollAreaComponent ? (
-
-
- {children}
-
-
- ) : (
-
- {children}
-
- )}
- {shouldRenderEmptyContent ? (
-
- {commandEmptyContent ?? emptyContent}
-
- ) : null}
-
-
- );
-};
+ {hasScroll && ScrollAreaComponent ? (
+
+
+ {children}
+
+
+ ) : (
+
+ {children}
+
+ )}
+ {shouldRenderEmptyContent ? (
+
+ {commandEmptyContent ?? emptyContent}
+
+ ) : null}
+
+
+ )
+}
-export { ComboboxContent };
+export { ComboboxContent }
diff --git a/src/components/combobox/components/combobox-input.tsx b/src/components/combobox/components/combobox-input.tsx
index ade723d..ccb2216 100644
--- a/src/components/combobox/components/combobox-input.tsx
+++ b/src/components/combobox/components/combobox-input.tsx
@@ -1,26 +1,26 @@
-"use client";
+'use client'
-import { cn } from "@renderui/utils";
-import React from "react";
+import { cn } from '@renderui/utils'
+import React from 'react'
-import { ComboboxInputProps } from "@/components/combobox/types/combobox-input";
-import { CommandInput } from "@/components/command/components/command-input";
-import { COMMAND_INPUT_CLASSNAME } from "@/components/command/constants/constants";
+import { ComboboxInputProps } from '@/components/combobox/types/combobox-input'
+import { CommandInput } from '@/components/command/components/command-input'
+import { COMMAND_INPUT_CLASSNAME } from '@/components/command/constants/constants'
const ComboboxInput = (props: ComboboxInputProps) => {
- const { className, containerProps, iconProps, ...restProps } = props;
+ const { className, containerProps, iconProps, ...restProps } = props
- return (
-
- );
-};
+ return (
+
+ )
+}
-ComboboxInput.displayName = "ComboboxInput";
+ComboboxInput.displayName = 'ComboboxInput'
-export { ComboboxInput };
+export { ComboboxInput }
diff --git a/src/components/combobox/components/combobox-item.tsx b/src/components/combobox/components/combobox-item.tsx
index 0e97946..38d20f7 100644
--- a/src/components/combobox/components/combobox-item.tsx
+++ b/src/components/combobox/components/combobox-item.tsx
@@ -1,112 +1,101 @@
-"use client";
+'use client'
-import {
- chain,
- cn,
- functionCallOrValue,
- getNestedChildrenTextContent,
-} from "@renderui/utils";
-import React from "react";
+import { chain, cn, functionCallOrValue, getNestedChildrenTextContent } from '@renderui/utils'
+import React from 'react'
-import { CheckIcon } from "@/components/_shared/components/icons/check-icon";
+import { CheckIcon } from '@/components/_shared/components/icons/check-icon'
import {
- COMBOBOX_ITEM_CHECK_ICON_CHECKED_CLASSNAME,
- DEFAULT_COMBOBOX_ITEM_CHECK_ICON_CLASSNAME,
- DEFAULT_COMBOBOX_ITEM_CLASSNAME,
-} from "@/components/combobox/constants/constants";
-import { useComboboxContext } from "@/components/combobox/contexts/combobox-context";
-import { ComboboxItemProps } from "@/components/combobox/types/combobox-item";
-import { CommandItem } from "@/components/command/components/command-item";
+ COMBOBOX_ITEM_CHECK_ICON_CHECKED_CLASSNAME,
+ DEFAULT_COMBOBOX_ITEM_CHECK_ICON_CLASSNAME,
+ DEFAULT_COMBOBOX_ITEM_CLASSNAME,
+} from '@/components/combobox/constants/constants'
+import { useComboboxContext } from '@/components/combobox/contexts/combobox-context'
+import { ComboboxItemProps } from '@/components/combobox/types/combobox-item'
+import { CommandItem } from '@/components/command/components/command-item'
// @TODO waiting for cmdk fix https://github.com/pacocoursey/cmdk/issues/150 to be implemented
const ComboboxItem = (props: ComboboxItemProps) => {
- const {
- className,
- children,
- startContent,
- endContent,
- value,
- onSelect,
- role = "option",
- ...restProps
- } = props;
+ const {
+ className,
+ children,
+ startContent,
+ endContent,
+ value,
+ onSelect,
+ role = 'option',
+ ...restProps
+ } = props
- const {
- value: rootValue,
- open,
- label,
- hasCheckIcon,
- closeTimeout,
- setOpen,
- setValue,
- setLabel,
- setFocusValue,
- } = useComboboxContext();
+ const {
+ value: rootValue,
+ open,
+ label,
+ hasCheckIcon,
+ closeTimeout,
+ setOpen,
+ setValue,
+ setLabel,
+ setFocusValue,
+ } = useComboboxContext()
- const timeoutRef = React.useRef(null);
+ const timeoutRef = React.useRef(null)
- const childrenTextContent = React.useMemo(
- () => getNestedChildrenTextContent(children),
- [children]
- );
+ const childrenTextContent = React.useMemo(
+ () => getNestedChildrenTextContent(children),
+ [children],
+ )
- const handleSelect = () => {
- const isUnselect = value === rootValue;
+ const handleSelect = () => {
+ const isUnselect = value === rootValue
- setValue(isUnselect ? "" : value);
- setLabel(isUnselect ? "" : childrenTextContent);
- setFocusValue(isUnselect ? "" : childrenTextContent);
+ setValue(isUnselect ? '' : value)
+ setLabel(isUnselect ? '' : childrenTextContent)
+ setFocusValue(isUnselect ? '' : childrenTextContent)
- if (timeoutRef.current) {
- clearTimeout(timeoutRef.current);
- }
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current)
+ }
- setTimeout(() => setOpen(false), closeTimeout);
- };
+ setTimeout(() => setOpen(false), closeTimeout)
+ }
- React.useEffect(() => {
- return () => {
- if (timeoutRef.current) {
- clearTimeout(timeoutRef.current);
- }
- };
- }, []);
+ React.useEffect(() => {
+ return () => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current)
+ }
+ }
+ }, [])
- const isChecked = value === rootValue;
+ const isChecked = value === rootValue
- return (
-
- {functionCallOrValue(startContent, isChecked)}
- {functionCallOrValue(children, isChecked)}
- {hasCheckIcon ? (
-
- ) : null}
- {functionCallOrValue(endContent, isChecked)}
-
- );
-};
+ return (
+
+ {functionCallOrValue(startContent, isChecked)}
+ {functionCallOrValue(children, isChecked)}
+ {hasCheckIcon ? (
+
+ ) : null}
+ {functionCallOrValue(endContent, isChecked)}
+
+ )
+}
-export { ComboboxItem };
+export { ComboboxItem }
diff --git a/src/components/combobox/components/combobox-trigger.tsx b/src/components/combobox/components/combobox-trigger.tsx
index 564499f..485ce82 100644
--- a/src/components/combobox/components/combobox-trigger.tsx
+++ b/src/components/combobox/components/combobox-trigger.tsx
@@ -1,143 +1,137 @@
-"use client";
+'use client'
-import { chain, cn, cx, getOptionalObject } from "@renderui/utils";
-import React from "react";
+import { chain, cn, cx, getOptionalObject } from '@renderui/utils'
+import React from 'react'
-import { CaretSortIcon } from "@/components/_shared/components/icons/caret-sort-icon";
-import { useMergedRef } from "@/components/_shared/hooks/use-merged-ref";
+import { CaretSortIcon } from '@/components/_shared/components/icons/caret-sort-icon'
+import { useMergedRef } from '@/components/_shared/hooks/use-merged-ref'
import {
- COMBOBOX_TRIGGER_OUTLINE_CLASSNAME,
- COMBOBOX_TRIGGER_SOLID_CLASSNAME,
- COMBOBOX_TRUNCATED_TEXT_CHILD_CLASSNAME,
- DEFAULT_COMBOBOX_TRIGGER_CLASSNAME,
- DEFAULT_COMBOBOX_TRIGGER_ICON_CLASSNAME,
-} from "@/components/combobox/constants/constants";
-import { useComboboxContext } from "@/components/combobox/contexts/combobox-context";
-import { ComboboxTriggerProps } from "@/components/combobox/types/combobox-trigger";
-import { getHandleKeyDownCapture } from "@/components/combobox/utils/get-handle-keydown-capture";
-import { PopoverTrigger } from "@/components/popover";
+ COMBOBOX_TRIGGER_OUTLINE_CLASSNAME,
+ COMBOBOX_TRIGGER_SOLID_CLASSNAME,
+ COMBOBOX_TRUNCATED_TEXT_CHILD_CLASSNAME,
+ DEFAULT_COMBOBOX_TRIGGER_CLASSNAME,
+ DEFAULT_COMBOBOX_TRIGGER_ICON_CLASSNAME,
+} from '@/components/combobox/constants/constants'
+import { useComboboxContext } from '@/components/combobox/contexts/combobox-context'
+import { ComboboxTriggerProps } from '@/components/combobox/types/combobox-trigger'
+import { getHandleKeyDownCapture } from '@/components/combobox/utils/get-handle-keydown-capture'
+import { PopoverTrigger } from '@/components/popover'
const ComboboxTrigger = (props: ComboboxTriggerProps) => {
- const {
- ref,
- className,
- children,
- iconProps,
- endContent,
- onKeyDownCapture,
- role = "combobox",
- "aria-haspopup": ariaHasPopup = "listbox",
- variant = "solid",
- color = "mode-accent",
- hasIndicator = true,
- hasTruncatedText = false,
- hasDefaultPressedStyles = false,
- hasRipple = false,
- ...restProps
- } = props;
+ const {
+ ref,
+ className,
+ children,
+ iconProps,
+ endContent,
+ onKeyDownCapture,
+ role = 'combobox',
+ 'aria-haspopup': ariaHasPopup = 'listbox',
+ variant = 'solid',
+ color = 'mode-accent',
+ hasIndicator = true,
+ hasTruncatedText = false,
+ hasDefaultPressedStyles = false,
+ hasRipple = false,
+ ...restProps
+ } = props
- const { className: iconClassName } = getOptionalObject(iconProps);
+ const { className: iconClassName } = getOptionalObject(iconProps)
- const {
- label,
- value,
- open,
- triggerRef,
- isDisabled,
- isInvalid,
- isReadonly,
- isRequired,
- setOpen,
- setFocusValue,
- } = useComboboxContext();
+ const {
+ label,
+ value,
+ open,
+ triggerRef,
+ isDisabled,
+ isInvalid,
+ isReadonly,
+ isRequired,
+ setOpen,
+ setFocusValue,
+ } = useComboboxContext()
- const forcedVariant = variant === "outline" ? "outline" : "solid";
+ const forcedVariant = variant === 'outline' ? 'outline' : 'solid'
- const mergedRefCallaback = useMergedRef([triggerRef, ref]);
+ const mergedRefCallaback = useMergedRef([triggerRef, ref])
- const timeoutIdRef = React.useRef(null);
+ const timeoutIdRef = React.useRef(null)
- React.useEffect(
- () => () => {
- if (!timeoutIdRef.current) return;
+ React.useEffect(
+ () => () => {
+ if (!timeoutIdRef.current) return
- clearTimeout(timeoutIdRef.current);
- },
- []
- );
+ clearTimeout(timeoutIdRef.current)
+ },
+ [],
+ )
- const content = label || children;
- const isEmpty = value === null || value === undefined;
+ const content = label || children
+ const isEmpty = value === null || value === undefined
- return (
- (
- <>
- {typeof endContent === "function" ? endContent(props) : endContent}
- {hasIndicator ? (
-
- ) : null}
-
- )}
- {...restProps}
- >
- {hasTruncatedText ? (
-
- {content}
-
- ) : (
- content
- )}
-
- );
-};
+ return (
+ (
+ <>
+ {typeof endContent === 'function' ? endContent(props) : endContent}
+ {hasIndicator ? (
+
+ ) : null}
+
+ )}
+ {...restProps}
+ >
+ {hasTruncatedText ? (
+
+ {content}
+
+ ) : (
+ content
+ )}
+
+ )
+}
-export { ComboboxTrigger };
+export { ComboboxTrigger }
diff --git a/src/components/combobox/components/combobox.tsx b/src/components/combobox/components/combobox.tsx
index 90db773..ae14035 100644
--- a/src/components/combobox/components/combobox.tsx
+++ b/src/components/combobox/components/combobox.tsx
@@ -10,84 +10,84 @@ import { Popover } from '@/components/popover'
import { VisuallyHidden } from '@/components/visually-hidden'
const Combobox = (props: ComboboxProps) => {
- const {
- open: openProp,
- value: valueProp,
- name,
- children,
- inputProps,
- triggerRef,
- isDisabled,
- isInvalid,
- isReadonly,
- isRequired,
- onOpenChange,
- onValueChange,
- defaultValue = '',
- defaultOpen = false,
- hasCheckIcon = true,
- closeTimeout = 50,
- type = 'combobox',
- ...restProps
- } = props
+ const {
+ open: openProp,
+ value: valueProp,
+ name,
+ children,
+ inputProps,
+ triggerRef,
+ isDisabled,
+ isInvalid,
+ isReadonly,
+ isRequired,
+ onOpenChange,
+ onValueChange,
+ defaultValue = '',
+ defaultOpen = false,
+ hasCheckIcon = true,
+ closeTimeout = 50,
+ type = 'combobox',
+ ...restProps
+ } = props
- const [open, setOpen] = useControllableState({
- defaultProp: defaultOpen,
- prop: openProp,
- onChange: onOpenChange,
- })
+ const [open, setOpen] = useControllableState({
+ defaultProp: defaultOpen,
+ prop: openProp,
+ onChange: onOpenChange,
+ })
- const [value, setValue] = useControllableState({
- defaultProp: defaultValue,
- prop: valueProp,
- onChange: onValueChange,
- })
+ const [value, setValue] = useControllableState({
+ defaultProp: defaultValue,
+ prop: valueProp,
+ onChange: onValueChange,
+ })
- const [focusValue, setFocusValue] = React.useState('')
+ const [focusValue, setFocusValue] = React.useState('')
- const [label, setLabel] = React.useState('')
+ const [label, setLabel] = React.useState('')
- const handleRefocusToActiveItem = () => {
- setFocusValue(label)
- }
+ const handleRefocusToActiveItem = () => {
+ setFocusValue(label)
+ }
- return (
-
-
- {children}
-
-
- setValue(event.target.value)}
- {...inputProps}
- />
-
-
- )
+ return (
+
+
+ {children}
+
+
+ setValue(event.target.value)}
+ {...inputProps}
+ />
+
+
+ )
}
export { Combobox }
diff --git a/src/components/combobox/constants/constants.ts b/src/components/combobox/constants/constants.ts
index 65126db..1ed4d73 100644
--- a/src/components/combobox/constants/constants.ts
+++ b/src/components/combobox/constants/constants.ts
@@ -1,22 +1,22 @@
const DEFAULT_COMBOBOX_TRIGGER_CLASSNAME =
- 'render-ui-combobox-trigger group justify-between min-h-[40px] transition-[background-color,box-shadow] data-[empty=true]:text-mode-foreground/50 aria-[expanded=true]:ring-ring-color aria-[expanded=true]:ring-[1px] ring-offset-0 data-[focus-visible]:ring-offset-0 data-[hover=true]:ring-[1px] data-[expanded=true]:ring-[2px] data-[hover=true]:data-[focus-visible=true]:ring-[2px] data-[expanded=true]:data-[hover=true]:ring-[2px] data-[invalid=true]:data-[expanded=true]:ring-destructive data-[invalid=true]:ring-destructive data-[value-type=placeholder]:text-mode-foreground/50'
+ 'render-ui-combobox-trigger group justify-between min-h-[40px] transition-[background-color,box-shadow] data-[empty=true]:text-mode-foreground/50 aria-[expanded=true]:ring-ring-color aria-[expanded=true]:ring-[1px] ring-offset-0 data-[focus-visible]:ring-offset-0 data-[hover=true]:ring-[1px] data-[expanded=true]:ring-[2px] data-[hover=true]:data-[focus-visible=true]:ring-[2px] data-[expanded=true]:data-[hover=true]:ring-[2px] data-[invalid=true]:data-[expanded=true]:ring-destructive data-[invalid=true]:ring-destructive data-[value-type=placeholder]:text-mode-foreground/50'
const COMBOBOX_TRIGGER_SOLID_CLASSNAME = 'after:hidden before:hidden'
const COMBOBOX_TRIGGER_OUTLINE_CLASSNAME =
- 'before:ring-[2px] before:ring-offset-0 text-mode-contrast data-[pressed=true]:text-[foreground]'
+ 'before:ring-[2px] before:ring-offset-0 text-mode-contrast data-[pressed=true]:text-[foreground]'
const COMBOBOX_TRUNCATED_TEXT_CHILD_CLASSNAME = 'inline-block min-w-0 truncate'
const DEFAULT_COMBOBOX_TRIGGER_ICON_CLASSNAME =
- 'render-ui-combobox-trigger-icon inline-block h-4 w-4 shrink-0 opacity-50 text-mode-foreground transition-[transform] duration-fast group-aria-expanded:rotate-[-90deg]'
+ 'render-ui-combobox-trigger-icon inline-block h-4 w-4 shrink-0 opacity-50 text-mode-foreground transition-[transform] duration-fast group-aria-expanded:rotate-[-90deg]'
const DEFAULT_COMBOBOX_INPUT_CLASSNAME = 'render-ui-combobox-content h-9'
const DEFAULT_COMBOBOX_ITEM_CLASSNAME = 'render-ui-combobox-item flex items-center gap-2 break-all'
const DEFAULT_COMBOBOX_ITEM_CHECK_ICON_CLASSNAME =
- 'render-ui-combobox-item-check-icon ml-auto h-4 w-4 shrink-0 opacity-0'
+ 'render-ui-combobox-item-check-icon ml-auto h-4 w-4 shrink-0 opacity-0'
const COMBOBOX_ITEM_CHECK_ICON_CHECKED_CLASSNAME = 'opacity-100'
@@ -41,27 +41,27 @@ const DEFAULT_COMBOBOX_COMMAND_GROUP_CLASSNAME = 'bg-transparent border-t border
const DEFAULT_COMBOBOX_SCROLL_AREA_CLASSNAME = 'render-ui-combobox-scroll-area w-[7px]'
const DEFAULT_COMBOBOX_SCROLL_AREA_SCROLLBAR_CLASSNAME =
- 'render-ui-combobox-scroll-area-scrollbar max-h-80 bg-transparent sm:max-h-80'
+ 'render-ui-combobox-scroll-area-scrollbar max-h-80 bg-transparent sm:max-h-80'
export {
- COMBOBOX_TRIGGER_OUTLINE_CLASSNAME,
- ACTIVE_ITEM_CLASSNAME,
- ALLOWED_SELECT_KEYS,
- COMBOBOX_TRUNCATED_TEXT_CHILD_CLASSNAME,
- COMBOBOX_INPUT_CONTAINER_CLASSNAME,
- COMBOBOX_ITEM_CHECK_ICON_CHECKED_CLASSNAME,
- DEFAULT_COMBOBOX_COMMAND_CLASSNAME,
- DEFAULT_COMBOBOX_COMMAND_GROUP_CLASSNAME,
- DEFAULT_COMBOBOX_CONTENT_CLASSNAME,
- DEFAULT_COMBOBOX_INPUT_CLASSNAME,
- DEFAULT_COMBOBOX_ITEM_CHECK_ICON_CLASSNAME,
- DEFAULT_COMBOBOX_ITEM_CLASSNAME,
- DEFAULT_COMBOBOX_SCROLL_AREA_CLASSNAME,
- DEFAULT_COMBOBOX_SCROLL_AREA_SCROLLBAR_CLASSNAME,
- DEFAULT_COMBOBOX_TRIGGER_CLASSNAME,
- DEFAULT_COMBOBOX_TRIGGER_ICON_CLASSNAME,
- DEFAULT_INPUT_CONTAINER_CLASSNAME,
- ITEM_CLASSNAME,
- COMBOBOX_TRIGGER_SOLID_CLASSNAME,
- SELECT_INPUT_CONTAINER_CLASSNAME,
+ COMBOBOX_TRIGGER_OUTLINE_CLASSNAME,
+ ACTIVE_ITEM_CLASSNAME,
+ ALLOWED_SELECT_KEYS,
+ COMBOBOX_TRUNCATED_TEXT_CHILD_CLASSNAME,
+ COMBOBOX_INPUT_CONTAINER_CLASSNAME,
+ COMBOBOX_ITEM_CHECK_ICON_CHECKED_CLASSNAME,
+ DEFAULT_COMBOBOX_COMMAND_CLASSNAME,
+ DEFAULT_COMBOBOX_COMMAND_GROUP_CLASSNAME,
+ DEFAULT_COMBOBOX_CONTENT_CLASSNAME,
+ DEFAULT_COMBOBOX_INPUT_CLASSNAME,
+ DEFAULT_COMBOBOX_ITEM_CHECK_ICON_CLASSNAME,
+ DEFAULT_COMBOBOX_ITEM_CLASSNAME,
+ DEFAULT_COMBOBOX_SCROLL_AREA_CLASSNAME,
+ DEFAULT_COMBOBOX_SCROLL_AREA_SCROLLBAR_CLASSNAME,
+ DEFAULT_COMBOBOX_TRIGGER_CLASSNAME,
+ DEFAULT_COMBOBOX_TRIGGER_ICON_CLASSNAME,
+ DEFAULT_INPUT_CONTAINER_CLASSNAME,
+ ITEM_CLASSNAME,
+ COMBOBOX_TRIGGER_SOLID_CLASSNAME,
+ SELECT_INPUT_CONTAINER_CLASSNAME,
}
diff --git a/src/components/combobox/contexts/combobox-context.ts b/src/components/combobox/contexts/combobox-context.ts
index 2e3fa57..302c0e5 100644
--- a/src/components/combobox/contexts/combobox-context.ts
+++ b/src/components/combobox/contexts/combobox-context.ts
@@ -3,10 +3,10 @@ import { initializeContext } from '@renderui/utils'
import { ComboboxContext } from '@/components/combobox/types/combobox-context'
const [ComboboxProvider, useComboboxContext] = initializeContext({
- errorMessage: 'Components using combobox context must be wrapped in a .',
- providerName: 'ComboboxProvider',
- hookName: 'useComboboxContext',
- name: 'ComboboxContext',
+ errorMessage: 'Components using combobox context must be wrapped in a .',
+ providerName: 'ComboboxProvider',
+ hookName: 'useComboboxContext',
+ name: 'ComboboxContext',
})
export { ComboboxProvider, useComboboxContext }
diff --git a/src/components/combobox/hooks/use-lazy-scroll-area-component.ts b/src/components/combobox/hooks/use-lazy-scroll-area-component.ts
index 4f843a6..e75cfd3 100644
--- a/src/components/combobox/hooks/use-lazy-scroll-area-component.ts
+++ b/src/components/combobox/hooks/use-lazy-scroll-area-component.ts
@@ -4,19 +4,19 @@ import { ComboboxContentProps } from '@/components/combobox/types/combobox-conte
import { ScrollArea } from '@/components/scroll-area'
function useLazyScrollAreaComponent(hasScroll: ComboboxContentProps['hasScroll']) {
- const [ScrollAreaComponent, setScrollComponent] = React.useState(null)
+ const [ScrollAreaComponent, setScrollComponent] = React.useState(null)
- React.useEffect(() => {
- const loadComponent = async () => {
- const { ScrollArea } = await import('@/components/scroll-area')
+ React.useEffect(() => {
+ const loadComponent = async () => {
+ const { ScrollArea } = await import('@/components/scroll-area')
- setScrollComponent(ScrollArea)
- }
+ setScrollComponent(ScrollArea)
+ }
- loadComponent()
- }, [hasScroll])
+ loadComponent()
+ }, [hasScroll])
- return ScrollAreaComponent
+ return ScrollAreaComponent
}
export { useLazyScrollAreaComponent }
diff --git a/src/components/combobox/index.ts b/src/components/combobox/index.ts
index 834d1e9..15f7a59 100644
--- a/src/components/combobox/index.ts
+++ b/src/components/combobox/index.ts
@@ -7,4 +7,4 @@ export * from '@/components/combobox/types/combobox'
export * from '@/components/combobox/types/combobox-content'
export * from '@/components/combobox/types/combobox-input'
export * from '@/components/combobox/types/combobox-item'
-export * from '@/components/combobox/types/combobox-trigger'
\ No newline at end of file
+export * from '@/components/combobox/types/combobox-trigger'
diff --git a/src/components/combobox/types/combobox-content.ts b/src/components/combobox/types/combobox-content.ts
index 5ea29a9..0c43ac2 100644
--- a/src/components/combobox/types/combobox-content.ts
+++ b/src/components/combobox/types/combobox-content.ts
@@ -1,33 +1,33 @@
-import { Simplify } from "@/components/_shared/types/simplify";
-import React from "react";
+import { Simplify } from '@/components/_shared/types/simplify'
+import React from 'react'
import {
- Command,
- CommandEmpty,
- CommandGroup,
- CommandInput,
- CommandList,
-} from "@/components/command";
-import { PopoverContentProps } from "@/components/popover";
-import { ScrollArea } from "@/components/scroll-area";
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandList,
+} from '@/components/command'
+import { PopoverContentProps } from '@/components/popover'
+import { ScrollArea } from '@/components/scroll-area'
-type ComboboxContentPopoverContentProps = PopoverContentProps;
+type ComboboxContentPopoverContentProps = PopoverContentProps
type ComboboxContentCustomProps = {
- placeholder?: string;
- hasEmptyContent?: boolean;
- hasScroll?: boolean;
- emptyContent?: React.ReactNode;
- commandProps?: React.ComponentPropsWithRef;
- commandInputProps?: React.ComponentPropsWithRef;
- commandEmptyProps?: React.ComponentPropsWithRef;
- commandGroupProps?: React.ComponentPropsWithRef;
- commandListProps?: React.ComponentPropsWithRef;
- scrollAreaProps?: React.ComponentPropsWithRef;
-};
+ placeholder?: string
+ hasEmptyContent?: boolean
+ hasScroll?: boolean
+ emptyContent?: React.ReactNode
+ commandProps?: React.ComponentPropsWithRef
+ commandInputProps?: React.ComponentPropsWithRef
+ commandEmptyProps?: React.ComponentPropsWithRef
+ commandGroupProps?: React.ComponentPropsWithRef
+ commandListProps?: React.ComponentPropsWithRef
+ scrollAreaProps?: React.ComponentPropsWithRef
+}
type ComboboxContentProps = Simplify<
- ComboboxContentPopoverContentProps & ComboboxContentCustomProps
->;
+ ComboboxContentPopoverContentProps & ComboboxContentCustomProps
+>
-export type { ComboboxContentProps };
+export type { ComboboxContentProps }
diff --git a/src/components/combobox/types/combobox-context.ts b/src/components/combobox/types/combobox-context.ts
index 1a70dd4..15c79e2 100644
--- a/src/components/combobox/types/combobox-context.ts
+++ b/src/components/combobox/types/combobox-context.ts
@@ -1,23 +1,23 @@
-import { ComboboxProps } from "@/components/combobox/types/combobox";
-import { ButtonProps } from "@/components/button/types/button";
+import { ComboboxProps } from '@/components/combobox/types/combobox'
+import { ButtonProps } from '@/components/button/types/button'
type ComboboxContext = {
- type: NonNullable;
- open: ComboboxProps["open"];
- value: ComboboxProps["value"];
- focusValue: ComboboxProps["value"];
- label: React.ReactNode;
- triggerRef: React.RefObject | undefined;
- hasCheckIcon: boolean;
- isDisabled: boolean | undefined;
- isInvalid: boolean | undefined;
- isReadonly: boolean | undefined;
- isRequired: boolean | undefined;
- closeTimeout: number;
- setOpen: React.Dispatch>;
- setValue: React.Dispatch>;
- setFocusValue: React.Dispatch>;
- setLabel: React.Dispatch>;
-};
+ type: NonNullable
+ open: ComboboxProps['open']
+ value: ComboboxProps['value']
+ focusValue: ComboboxProps['value']
+ label: React.ReactNode
+ triggerRef: React.RefObject | undefined
+ hasCheckIcon: boolean
+ isDisabled: boolean | undefined
+ isInvalid: boolean | undefined
+ isReadonly: boolean | undefined
+ isRequired: boolean | undefined
+ closeTimeout: number
+ setOpen: React.Dispatch>
+ setValue: React.Dispatch>
+ setFocusValue: React.Dispatch>
+ setLabel: React.Dispatch>
+}
-export type { ComboboxContext };
+export type { ComboboxContext }
diff --git a/src/components/combobox/types/combobox-input.ts b/src/components/combobox/types/combobox-input.ts
index fb0b3f0..278c048 100644
--- a/src/components/combobox/types/combobox-input.ts
+++ b/src/components/combobox/types/combobox-input.ts
@@ -1,19 +1,17 @@
-import { Simplify } from "@/components/_shared/types/simplify";
-import { Primitive as primitive } from "@radix-ui/react-primitive";
-import React from "react";
+import { Simplify } from '@/components/_shared/types/simplify'
+import { Primitive as primitive } from '@radix-ui/react-primitive'
+import React from 'react'
-import { MagnifyingGlassIcon } from "@/components/_shared/components/icons/magnifying-glass-icon";
-import { CommandInputProps } from "@/components/command";
+import { MagnifyingGlassIcon } from '@/components/_shared/components/icons/magnifying-glass-icon'
+import { CommandInputProps } from '@/components/command'
-type ComboboxInputCommandInputProps = CommandInputProps;
+type ComboboxInputCommandInputProps = CommandInputProps
type ComboboxInputCustomProps = {
- containerProps?: React.ComponentPropsWithRef;
- iconProps?: React.ComponentPropsWithRef;
-};
+ containerProps?: React.ComponentPropsWithRef
+ iconProps?: React.ComponentPropsWithRef
+}
-type ComboboxInputProps = Simplify<
- ComboboxInputCommandInputProps & ComboboxInputCustomProps
->;
+type ComboboxInputProps = Simplify
-export type { ComboboxInputProps };
+export type { ComboboxInputProps }
diff --git a/src/components/combobox/types/combobox-item.ts b/src/components/combobox/types/combobox-item.ts
index c3a24df..eca324d 100644
--- a/src/components/combobox/types/combobox-item.ts
+++ b/src/components/combobox/types/combobox-item.ts
@@ -1,21 +1,16 @@
-import { Simplify } from "@/components/_shared/types/simplify";
+import { Simplify } from '@/components/_shared/types/simplify'
-import { CommandItemProps } from "@/components/command";
+import { CommandItemProps } from '@/components/command'
-type ComboboxItemCommandItemProps = Omit<
- CommandItemProps,
- "value" | "children"
->;
+type ComboboxItemCommandItemProps = Omit
type ComboboxItemCustomProps = {
- value: string | number;
- children: React.ReactNode;
- startContent?: React.ReactNode;
- endContent?: React.ReactNode;
-};
+ value: string | number
+ children: React.ReactNode
+ startContent?: React.ReactNode
+ endContent?: React.ReactNode
+}
-type ComboboxItemProps = Simplify<
- ComboboxItemCommandItemProps & ComboboxItemCustomProps
->;
+type ComboboxItemProps = Simplify
-export type { ComboboxItemProps };
+export type { ComboboxItemProps }
diff --git a/src/components/combobox/types/combobox-trigger.ts b/src/components/combobox/types/combobox-trigger.ts
index 5103250..0397390 100644
--- a/src/components/combobox/types/combobox-trigger.ts
+++ b/src/components/combobox/types/combobox-trigger.ts
@@ -1,23 +1,18 @@
-import { Simplify } from "@/components/_shared/types/simplify";
+import { Simplify } from '@/components/_shared/types/simplify'
-import { CaretSortIcon } from "@/components/_shared/components/icons/caret-sort-icon";
-import { ButtonProps } from "@/components/button/types/button";
+import { CaretSortIcon } from '@/components/_shared/components/icons/caret-sort-icon'
+import { ButtonProps } from '@/components/button/types/button'
-type ComboboxTriggerButtonProps = Omit<
- ButtonProps,
- "children" | "variant" | "size"
->;
+type ComboboxTriggerButtonProps = Omit
type ComboboxTriggerCustomProps = {
- variant?: "solid" | "outline";
- hasTruncatedText?: boolean;
- hasIndicator?: boolean;
- children?: React.ReactNode;
- iconProps?: React.ComponentPropsWithRef;
-};
+ variant?: 'solid' | 'outline'
+ hasTruncatedText?: boolean
+ hasIndicator?: boolean
+ children?: React.ReactNode
+ iconProps?: React.ComponentPropsWithRef
+}
-type ComboboxTriggerProps = Simplify<
- ComboboxTriggerButtonProps & ComboboxTriggerCustomProps
->;
+type ComboboxTriggerProps = Simplify
-export type { ComboboxTriggerProps };
+export type { ComboboxTriggerProps }
diff --git a/src/components/combobox/types/combobox.ts b/src/components/combobox/types/combobox.ts
index cf9c7c0..2a56aa4 100644
--- a/src/components/combobox/types/combobox.ts
+++ b/src/components/combobox/types/combobox.ts
@@ -1,28 +1,26 @@
-import { ButtonProps } from "@/button";
-import { Simplify } from "@/components/_shared/types/simplify";
+import { ButtonProps } from '@/button'
+import { Simplify } from '@/components/_shared/types/simplify'
-import { PopoverProps } from "@/components/popover";
+import { PopoverProps } from '@/components/popover'
-type ComboboxPopoverProps = PopoverProps;
+type ComboboxPopoverProps = PopoverProps
type ComboboxCustomProps = {
- type?: "select" | "combobox";
- name?: string;
- value?: string | number;
- defaultValue?: string;
- inputProps?: React.ComponentPropsWithRef<"input">;
- triggerRef?: React.RefObject;
- hasCheckIcon?: boolean;
- isDisabled?: boolean | undefined;
- isInvalid?: boolean | undefined;
- isReadonly?: boolean | undefined;
- isRequired?: boolean | undefined;
- closeTimeout?: number | undefined;
- onValueChange?: React.Dispatch<
- React.SetStateAction
- >;
-};
+ type?: 'select' | 'combobox'
+ name?: string
+ value?: string | number
+ defaultValue?: string
+ inputProps?: React.ComponentPropsWithRef<'input'>
+ triggerRef?: React.RefObject
+ hasCheckIcon?: boolean
+ isDisabled?: boolean | undefined
+ isInvalid?: boolean | undefined
+ isReadonly?: boolean | undefined
+ isRequired?: boolean | undefined
+ closeTimeout?: number | undefined
+ onValueChange?: React.Dispatch>
+}
-type ComboboxProps = Simplify;
+type ComboboxProps = Simplify
-export type { ComboboxProps };
+export type { ComboboxProps }
diff --git a/src/components/combobox/utils/get-handle-input-keydown-capture.ts b/src/components/combobox/utils/get-handle-input-keydown-capture.ts
index 815da17..9601c21 100644
--- a/src/components/combobox/utils/get-handle-input-keydown-capture.ts
+++ b/src/components/combobox/utils/get-handle-input-keydown-capture.ts
@@ -5,44 +5,44 @@ import React from 'react'
import { ACTIVE_ITEM_CLASSNAME } from '@/components/combobox/constants/constants'
type GetHandleInputKeyDownCaptureArgs = {
- variant: 'select' | 'combobox'
- setOpen: React.Dispatch>
- setValue: React.Dispatch>
- setLabel: React.Dispatch>
+ variant: 'select' | 'combobox'
+ setOpen: React.Dispatch>
+ setValue: React.Dispatch>
+ setLabel: React.Dispatch>
}
function getHandleInputKeyDownCapture(args: GetHandleInputKeyDownCaptureArgs) {
- const { variant, setOpen, setLabel, setValue } = args
+ const { variant, setOpen, setLabel, setValue } = args
- // If the variant is of type 'combobox', keep default functionality, space press adds space string to input
- if (variant === 'combobox') return undefined
+ // If the variant is of type 'combobox', keep default functionality, space press adds space string to input
+ if (variant === 'combobox') return undefined
- // if the variant is of type 'select', prevent default functionality, space press selects the active item
- return (event: React.KeyboardEvent) => {
- const { key } = event
+ // if the variant is of type 'select', prevent default functionality, space press selects the active item
+ return (event: React.KeyboardEvent) => {
+ const { key } = event
- // @TODO inspect this
- // if (!ALLOWED_SELECT_KEYS.includes(key)) {
- // event.preventDefault()
- // }
+ // @TODO inspect this
+ // if (!ALLOWED_SELECT_KEYS.includes(key)) {
+ // event.preventDefault()
+ // }
- if (key === ' ') {
- event.preventDefault()
+ if (key === ' ') {
+ event.preventDefault()
- if (!document) return
+ if (!document) return
- const activeItem = document.querySelector(ACTIVE_ITEM_CLASSNAME)
+ const activeItem = document.querySelector(ACTIVE_ITEM_CLASSNAME)
- if (!activeItem || !(activeItem instanceof HTMLElement)) return
+ if (!activeItem || !(activeItem instanceof HTMLElement)) return
- const activeItemValue = activeItem.dataset.inputValue ?? ''
- const activeItemLabel = activeItem.textContent ?? ''
+ const activeItemValue = activeItem.dataset.inputValue ?? ''
+ const activeItemLabel = activeItem.textContent ?? ''
- setValue(activeItemValue)
- setLabel(activeItemLabel)
- setOpen(false)
- }
- }
+ setValue(activeItemValue)
+ setLabel(activeItemLabel)
+ setOpen(false)
+ }
+ }
}
export { getHandleInputKeyDownCapture }
diff --git a/src/components/combobox/utils/get-handle-keydown-capture.ts b/src/components/combobox/utils/get-handle-keydown-capture.ts
index ccde18a..db447e9 100644
--- a/src/components/combobox/utils/get-handle-keydown-capture.ts
+++ b/src/components/combobox/utils/get-handle-keydown-capture.ts
@@ -4,44 +4,44 @@ import { ACTIVE_ITEM_CLASSNAME } from '@/components/combobox/constants/constants
import { getNextOrPreviousItem } from '@/components/combobox/utils/get-next-or-previous-item'
type GetHandleKeyDownCaptureArgs = {
- open: boolean | undefined
- value: string | number | undefined
- timeoutIdRef: React.RefObject
- setOpen: (open: boolean) => void
- setFocusValue: (value: string) => void
+ open: boolean | undefined
+ value: string | number | undefined
+ timeoutIdRef: React.RefObject
+ setOpen: (open: boolean) => void
+ setFocusValue: (value: string) => void
}
function getHandleKeyDownCapture(props: GetHandleKeyDownCaptureArgs) {
- const { open, value, timeoutIdRef, setOpen, setFocusValue } = props
+ const { open, value, timeoutIdRef, setOpen, setFocusValue } = props
- return (event: React.KeyboardEvent) => {
- if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && !open) {
- setOpen(true)
- }
+ return (event: React.KeyboardEvent) => {
+ if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && !open) {
+ setOpen(true)
+ }
- const canNextItemBeSet = !open && value
+ const canNextItemBeSet = !open && value
- if (!canNextItemBeSet) return
+ if (!canNextItemBeSet) return
- timeoutIdRef.current = setTimeout(() => {
- if (!(event.key === 'ArrowDown' || event.key === 'ArrowUp' || !document)) return
+ timeoutIdRef.current = setTimeout(() => {
+ if (!(event.key === 'ArrowDown' || event.key === 'ArrowUp' || !document)) return
- const activeItem = document.querySelector(ACTIVE_ITEM_CLASSNAME)
+ const activeItem = document.querySelector(ACTIVE_ITEM_CLASSNAME)
- if (!activeItem) return
+ if (!activeItem) return
- const direction = event.key === 'ArrowDown' ? 'next' : 'prev'
- const newItem = getNextOrPreviousItem(activeItem, direction)
+ const direction = event.key === 'ArrowDown' ? 'next' : 'prev'
+ const newItem = getNextOrPreviousItem(activeItem, direction)
- if (newItem && newItem instanceof HTMLElement) {
- const newItemValue = newItem.dataset.value
+ if (newItem && newItem instanceof HTMLElement) {
+ const newItemValue = newItem.dataset.value
- if (!newItemValue) return
+ if (!newItemValue) return
- setFocusValue(newItemValue)
- }
- }, 0)
- }
+ setFocusValue(newItemValue)
+ }
+ }, 0)
+ }
}
export { getHandleKeyDownCapture }
diff --git a/src/components/combobox/utils/get-next-or-previous-item.ts b/src/components/combobox/utils/get-next-or-previous-item.ts
index fee731d..060b95b 100644
--- a/src/components/combobox/utils/get-next-or-previous-item.ts
+++ b/src/components/combobox/utils/get-next-or-previous-item.ts
@@ -3,21 +3,21 @@
import { ITEM_CLASSNAME } from '@/components/combobox/constants/constants'
function getNextOrPreviousItem(activeItem: Element, direction: 'next' | 'prev') {
- if (!document) return
+ if (!document) return
- const items = Array.from(document.querySelectorAll(ITEM_CLASSNAME))
- const activeIndex = items.indexOf(activeItem)
- const lastIndex = items.length - 1
+ const items = Array.from(document.querySelectorAll(ITEM_CLASSNAME))
+ const activeIndex = items.indexOf(activeItem)
+ const lastIndex = items.length - 1
- if (direction === 'next') {
- const nextIndex = activeIndex >= lastIndex ? 0 : activeIndex + 1
+ if (direction === 'next') {
+ const nextIndex = activeIndex >= lastIndex ? 0 : activeIndex + 1
- return items.at(nextIndex)
- }
+ return items.at(nextIndex)
+ }
- const previousIndex = activeIndex <= 0 ? lastIndex : activeIndex - 1
+ const previousIndex = activeIndex <= 0 ? lastIndex : activeIndex - 1
- return items.at(previousIndex)
+ return items.at(previousIndex)
}
export { getNextOrPreviousItem }
diff --git a/src/components/command/components/command-dialog.tsx b/src/components/command/components/command-dialog.tsx
index 61a02e4..b0a0a86 100644
--- a/src/components/command/components/command-dialog.tsx
+++ b/src/components/command/components/command-dialog.tsx
@@ -3,22 +3,22 @@ import React from 'react'
import { Command } from '@/components/command/components/command'
import {
- COMMAND_DIALOG_COMMAND_CLASSNAME,
- COMMAND_DIALOG_CONTENT_CLASSNAME,
+ COMMAND_DIALOG_COMMAND_CLASSNAME,
+ COMMAND_DIALOG_CONTENT_CLASSNAME,
} from '@/components/command/constants/constants'
import { CommandDialogProps } from '@/components/command/types/command-dialog'
import { Dialog, DialogContent } from '@/components/dialog'
const CommandDialog = (props: CommandDialogProps) => {
- const { children, ...restProps } = props
+ const { children, ...restProps } = props
- return (
-
- )
+ return (
+
+ )
}
export { CommandDialog }
diff --git a/src/components/command/components/command-empty.tsx b/src/components/command/components/command-empty.tsx
index 1d78661..0a57405 100644
--- a/src/components/command/components/command-empty.tsx
+++ b/src/components/command/components/command-empty.tsx
@@ -1,22 +1,22 @@
-"use client";
+'use client'
-import { cn } from "@renderui/utils";
-import { CommandEmpty as CommandEmptyPrimitive } from "cmdk";
-import React from "react";
+import { cn } from '@renderui/utils'
+import { CommandEmpty as CommandEmptyPrimitive } from 'cmdk'
+import React from 'react'
-import { DEFAULT_COMMAND_EMPTY_CLASSNAME } from "@/components/command/constants/constants";
-import { CommandEmptyProps } from "@/components/command/types/command-empty";
+import { DEFAULT_COMMAND_EMPTY_CLASSNAME } from '@/components/command/constants/constants'
+import { CommandEmptyProps } from '@/components/command/types/command-empty'
const CommandEmpty = (props: CommandEmptyProps) => {
- const { className, ...restProps } = props;
+ const { className, ...restProps } = props
- return (
-
- );
-};
+ return (
+
+ )
+}
-export { CommandEmpty };
+export { CommandEmpty }
diff --git a/src/components/command/components/command-group.tsx b/src/components/command/components/command-group.tsx
index f26a895..0b70a76 100644
--- a/src/components/command/components/command-group.tsx
+++ b/src/components/command/components/command-group.tsx
@@ -1,22 +1,22 @@
-"use client";
+'use client'
-import { cn } from "@renderui/utils";
-import { CommandGroup as CommandGroupPrimitive } from "cmdk";
-import React from "react";
+import { cn } from '@renderui/utils'
+import { CommandGroup as CommandGroupPrimitive } from 'cmdk'
+import React from 'react'
-import { DEFAULT_COMMAND_GROUP_CLASSNAME } from "@/components/command/constants/constants";
-import { CommandGroupProps } from "@/components/command/types/command-group";
+import { DEFAULT_COMMAND_GROUP_CLASSNAME } from '@/components/command/constants/constants'
+import { CommandGroupProps } from '@/components/command/types/command-group'
const CommandGroup = (props: CommandGroupProps) => {
- const { className, ...restProps } = props;
+ const { className, ...restProps } = props
- return (
-
- );
-};
+ return (
+
+ )
+}
-export { CommandGroup };
+export { CommandGroup }
diff --git a/src/components/command/components/command-input.tsx b/src/components/command/components/command-input.tsx
index c9a395a..c6ca770 100644
--- a/src/components/command/components/command-input.tsx
+++ b/src/components/command/components/command-input.tsx
@@ -1,83 +1,82 @@
-"use client";
+'use client'
-import { cn, getOptionalObject, polymorphic } from "@renderui/utils";
-import { CommandInput as CommandInputPrimitive } from "cmdk";
-import React from "react";
+import { cn, getOptionalObject, polymorphic } from '@renderui/utils'
+import { CommandInput as CommandInputPrimitive } from 'cmdk'
+import React from 'react'
-import { MagnifyingGlassIcon } from "@/components/_shared/components/icons/magnifying-glass-icon";
-import { useControllableState } from "@/components/_shared/hooks/use-controllable-state";
+import { MagnifyingGlassIcon } from '@/components/_shared/components/icons/magnifying-glass-icon'
+import { useControllableState } from '@/components/_shared/hooks/use-controllable-state'
import {
- COMMAND_INPUT_CLASSNAME,
- COMMAND_INPUT_CONTAINER_CLASSNAME,
- COMMAND_INPUT_ICON_CLASSNAME,
-} from "@/components/command/constants/constants";
-import { useSearch } from "@/components/command/hooks/use-search";
-import { CommandInputProps } from "@/components/command/types/command-input";
+ COMMAND_INPUT_CLASSNAME,
+ COMMAND_INPUT_CONTAINER_CLASSNAME,
+ COMMAND_INPUT_ICON_CLASSNAME,
+} from '@/components/command/constants/constants'
+import { useSearch } from '@/components/command/hooks/use-search'
+import { CommandInputProps } from '@/components/command/types/command-input'
const CommandInput = (props: CommandInputProps) => {
- const {
- asChild,
- className,
- containerProps,
- iconProps,
- onValueChange,
- value: valueProp,
- defaultValue = "",
- ...restProps
- } = props;
+ const {
+ asChild,
+ className,
+ containerProps,
+ iconProps,
+ onValueChange,
+ value: valueProp,
+ defaultValue = '',
+ ...restProps
+ } = props
- const {
- asChild: inputContainerAsChild,
- className: inputContainerClassName,
- ...restInputContainerProps
- } = getOptionalObject(containerProps);
+ const {
+ asChild: inputContainerAsChild,
+ className: inputContainerClassName,
+ ...restInputContainerProps
+ } = getOptionalObject(containerProps)
- const { className: iconClassName, ...restIconProps } =
- getOptionalObject(iconProps);
+ const { className: iconClassName, ...restIconProps } = getOptionalObject(iconProps)
- const [value, setValue] = useControllableState({
- prop: valueProp,
- defaultProp: defaultValue as string,
- onChange: onValueChange,
- });
+ const [value, setValue] = useControllableState({
+ prop: valueProp,
+ defaultProp: defaultValue as string,
+ onChange: onValueChange,
+ })
- const { type, handleValueChangeWithSearch } = useSearch(value, setValue);
+ const { type, handleValueChangeWithSearch } = useSearch(value, setValue)
- const InputContainerComponent = polymorphic(inputContainerAsChild, "div");
+ const InputContainerComponent = polymorphic(inputContainerAsChild, 'div')
- const InputComponent = polymorphic(asChild, "input");
+ const InputComponent = polymorphic(asChild, 'input')
- return (
-
-
- {type === "select" ? (
- handleValueChangeWithSearch(event.target.value)}
- className={cn(COMMAND_INPUT_CLASSNAME, className)}
- {...restProps}
- />
- ) : (
-
- )}
-
- );
-};
+ return (
+
+
+ {type === 'select' ? (
+ handleValueChangeWithSearch(event.target.value)}
+ className={cn(COMMAND_INPUT_CLASSNAME, className)}
+ {...restProps}
+ />
+ ) : (
+
+ )}
+
+ )
+}
-CommandInput.displayName = "CommandInput";
+CommandInput.displayName = 'CommandInput'
-export { CommandInput };
+export { CommandInput }
diff --git a/src/components/command/components/command-item.tsx b/src/components/command/components/command-item.tsx
index 278ad4f..ccbc8ae 100644
--- a/src/components/command/components/command-item.tsx
+++ b/src/components/command/components/command-item.tsx
@@ -1,22 +1,22 @@
-"use client";
+'use client'
-import { cn } from "@renderui/utils";
-import { CommandItem as CommandItemPrimitive } from "cmdk";
-import React from "react";
+import { cn } from '@renderui/utils'
+import { CommandItem as CommandItemPrimitive } from 'cmdk'
+import React from 'react'
-import { DEFAULT_COMMAND_ITEM_CLASSNAME } from "@/components/command/constants/constants";
-import { CommandItemProps } from "@/components/command/types/command-item";
+import { DEFAULT_COMMAND_ITEM_CLASSNAME } from '@/components/command/constants/constants'
+import { CommandItemProps } from '@/components/command/types/command-item'
const CommandItem = (props: CommandItemProps) => {
- const { className, ...restProps } = props;
+ const { className, ...restProps } = props
- return (
-
- );
-};
+ return (
+
+ )
+}
-export { CommandItem };
+export { CommandItem }
diff --git a/src/components/command/components/command-list.tsx b/src/components/command/components/command-list.tsx
index 7ce8ffa..b92abcc 100644
--- a/src/components/command/components/command-list.tsx
+++ b/src/components/command/components/command-list.tsx
@@ -1,22 +1,22 @@
-"use client";
+'use client'
-import { cn } from "@renderui/utils";
-import { CommandList as CommandListPrimitive } from "cmdk";
-import React from "react";
+import { cn } from '@renderui/utils'
+import { CommandList as CommandListPrimitive } from 'cmdk'
+import React from 'react'
-import { DEFAULT_COMMAND_LIST_CLASSNAME } from "@/components/command/constants/constants";
-import { CommandListProps } from "@/components/command/types/command-list";
+import { DEFAULT_COMMAND_LIST_CLASSNAME } from '@/components/command/constants/constants'
+import { CommandListProps } from '@/components/command/types/command-list'
const CommandList = (props: CommandListProps) => {
- const { className, ...restProps } = props;
+ const { className, ...restProps } = props
- return (
-
- );
-};
+ return (
+
+ )
+}
-export { CommandList };
+export { CommandList }
diff --git a/src/components/command/components/command.tsx b/src/components/command/components/command.tsx
index 54a51c4..c018a37 100644
--- a/src/components/command/components/command.tsx
+++ b/src/components/command/components/command.tsx
@@ -1,56 +1,51 @@
-"use client";
+'use client'
-import { cn } from "@renderui/utils";
-import { Command as CommandPrimitive } from "cmdk";
-import React from "react";
+import { cn } from '@renderui/utils'
+import { Command as CommandPrimitive } from 'cmdk'
+import React from 'react'
-import { useControllableState } from "@/components/_shared/hooks/use-controllable-state";
-import { DEFAULT_COMMAND_CLASSNAME } from "@/components/command/constants/constants";
-import { CommandProvider } from "@/components/command/contexts/command-context";
-import { CommandProps } from "@/components/command/types/command";
-import { defaultFilter } from "@/components/command/utils/default-filter";
+import { useControllableState } from '@/components/_shared/hooks/use-controllable-state'
+import { DEFAULT_COMMAND_CLASSNAME } from '@/components/command/constants/constants'
+import { CommandProvider } from '@/components/command/contexts/command-context'
+import { CommandProps } from '@/components/command/types/command'
+import { defaultFilter } from '@/components/command/utils/default-filter'
const Command = (props: CommandProps) => {
- const {
- className,
- children,
- value: valueProp,
- defaultValue,
- onValueChange,
- filter,
- loop = true,
- type = "combobox",
- ...restProps
- } = props;
-
- const [value, setValue] = useControllableState({
- prop: valueProp,
- defaultProp: defaultValue,
- onChange: onValueChange,
- });
-
- const memoizedProviderValue = React.useMemo(
- () => ({ type, setValue }),
- [type, setValue]
- );
-
- return (
-
-
- {children}
-
-
- );
-};
-
-Command.displayName = "Command";
-
-export { Command };
+ const {
+ className,
+ children,
+ value: valueProp,
+ defaultValue,
+ onValueChange,
+ filter,
+ loop = true,
+ type = 'combobox',
+ ...restProps
+ } = props
+
+ const [value, setValue] = useControllableState({
+ prop: valueProp,
+ defaultProp: defaultValue,
+ onChange: onValueChange,
+ })
+
+ const memoizedProviderValue = React.useMemo(() => ({ type, setValue }), [type, setValue])
+
+ return (
+
+ {children}
+
+ )
+}
+
+Command.displayName = 'Command'
+
+export { Command }
diff --git a/src/components/command/constants/constants.ts b/src/components/command/constants/constants.ts
index 8b9b73a..5485e5f 100644
--- a/src/components/command/constants/constants.ts
+++ b/src/components/command/constants/constants.ts
@@ -1,29 +1,29 @@
const DEFAULT_COMMAND_CLASSNAME =
- 'render-ui-command flex h-full w-full flex-col overflow-hidden rounded-md bg-background text-foreground outline-none'
+ 'render-ui-command flex h-full w-full flex-col overflow-hidden rounded-md bg-background text-foreground outline-none'
const COMMAND_DIALOG_CONTENT_CLASSNAME = 'overflow-hidden p-0'
const COMMAND_DIALOG_COMMAND_CLASSNAME =
- 'render-ui-command-dialog-command [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'
+ 'render-ui-command-dialog-command [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'
const COMMAND_INPUT_CONTAINER_CLASSNAME =
- 'render-ui-command-input-container flex justify-start items-center border-b border-mode-accent px-3'
+ 'render-ui-command-input-container flex justify-start items-center border-b border-mode-accent px-3'
const COMMAND_INPUT_CLASSNAME =
- 'render-ui-command-input flex h-10 rounded-md bg-transparent min-w-[0px] shrink py-3 text-sm w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50'
+ 'render-ui-command-input flex h-10 rounded-md bg-transparent min-w-[0px] shrink py-3 text-sm w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50'
const COMMAND_INPUT_ICON_CLASSNAME = 'render-ui-command-input-icon mr-2 h-4 w-4 shrink-0 opacity-50'
const DEFAULT_COMMAND_LIST_CLASSNAME =
- 'render-ui-command-list max-h-[300px] overflow-y-auto overflow-x-hidden'
+ 'render-ui-command-list max-h-[300px] overflow-y-auto overflow-x-hidden'
const DEFAULT_COMMAND_EMPTY_CLASSNAME = 'render-ui-command-dialog-empty py-6 text-center text-sm'
const DEFAULT_COMMAND_GROUP_CLASSNAME =
- 'render-ui-command-dialog-group overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground'
+ 'render-ui-command-dialog-group overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground'
const DEFAULT_COMMAND_ITEM_CLASSNAME =
- 'render-ui-command-item relative rounded flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none aria-selected:bg-primary aria-selected:text-white data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50'
+ 'render-ui-command-item relative rounded flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none aria-selected:bg-primary aria-selected:text-white data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50'
const RADIX_FOCUS_GUARD_ATTRUBUTE = '[data-radix-focus-guard]'
@@ -34,28 +34,28 @@ const COMMAND_ITEM_CLASSNAME_SELECTOR = '.render-ui-command-item'
const SEARCH_PAUSE_DURATION = 750
const SEARCH_OBSERVER_OPTIONS = {
- childList: true,
- subtree: true,
- attributeOldValue: false,
- characterData: false,
- attributes: false,
- characterDataOldValue: false,
+ childList: true,
+ subtree: true,
+ attributeOldValue: false,
+ characterData: false,
+ attributes: false,
+ characterDataOldValue: false,
} as const
export {
- COMMAND_ATTRIBUTE,
- COMMAND_DIALOG_COMMAND_CLASSNAME,
- COMMAND_DIALOG_CONTENT_CLASSNAME,
- COMMAND_INPUT_CLASSNAME,
- COMMAND_INPUT_CONTAINER_CLASSNAME,
- COMMAND_INPUT_ICON_CLASSNAME,
- COMMAND_ITEM_CLASSNAME_SELECTOR,
- DEFAULT_COMMAND_CLASSNAME,
- DEFAULT_COMMAND_EMPTY_CLASSNAME,
- DEFAULT_COMMAND_GROUP_CLASSNAME,
- DEFAULT_COMMAND_ITEM_CLASSNAME,
- DEFAULT_COMMAND_LIST_CLASSNAME,
- RADIX_FOCUS_GUARD_ATTRUBUTE,
- SEARCH_PAUSE_DURATION,
- SEARCH_OBSERVER_OPTIONS,
+ COMMAND_ATTRIBUTE,
+ COMMAND_DIALOG_COMMAND_CLASSNAME,
+ COMMAND_DIALOG_CONTENT_CLASSNAME,
+ COMMAND_INPUT_CLASSNAME,
+ COMMAND_INPUT_CONTAINER_CLASSNAME,
+ COMMAND_INPUT_ICON_CLASSNAME,
+ COMMAND_ITEM_CLASSNAME_SELECTOR,
+ DEFAULT_COMMAND_CLASSNAME,
+ DEFAULT_COMMAND_EMPTY_CLASSNAME,
+ DEFAULT_COMMAND_GROUP_CLASSNAME,
+ DEFAULT_COMMAND_ITEM_CLASSNAME,
+ DEFAULT_COMMAND_LIST_CLASSNAME,
+ RADIX_FOCUS_GUARD_ATTRUBUTE,
+ SEARCH_PAUSE_DURATION,
+ SEARCH_OBSERVER_OPTIONS,
}
diff --git a/src/components/command/contexts/command-context.ts b/src/components/command/contexts/command-context.ts
index 09a7360..b36c757 100644
--- a/src/components/command/contexts/command-context.ts
+++ b/src/components/command/contexts/command-context.ts
@@ -5,10 +5,10 @@ import { initializeContext } from '@renderui/utils'
import { CommandContext } from '@/components/command/types/command-context'
const [CommandProvider, useCommandContext] = initializeContext({
- errorMessage: 'Components using command context must be wrapped in a .',
- providerName: 'CommandProvider',
- hookName: 'useCommandContext',
- name: 'CommandContext',
+ errorMessage: 'Components using command context must be wrapped in a .',
+ providerName: 'CommandProvider',
+ hookName: 'useCommandContext',
+ name: 'CommandContext',
})
export { CommandProvider, useCommandContext }
diff --git a/src/components/command/hooks/use-command.ts b/src/components/command/hooks/use-command.ts
index 9d6d1fc..2c03b4e 100644
--- a/src/components/command/hooks/use-command.ts
+++ b/src/components/command/hooks/use-command.ts
@@ -7,17 +7,16 @@ import { DEFAULT_COMMAND_CLASSNAME } from '@/components/command/constants/consta
import { CommandProps, CommandRef } from '@/components/command/types/command'
import { defaultFilter } from '@/components/command/utils/default-filter'
-
function useCommand(props: CommandProps, ref: React.ForwardedRef) {
- const { className, onValueChange, filter, ...restProps } = props
+ const { className, onValueChange, filter, ...restProps } = props
- return {
- ref,
- className: cn(DEFAULT_COMMAND_CLASSNAME, className),
- onValueChange,
- filter: filter ?? defaultFilter,
- ...restProps,
- }
+ return {
+ ref,
+ className: cn(DEFAULT_COMMAND_CLASSNAME, className),
+ onValueChange,
+ filter: filter ?? defaultFilter,
+ ...restProps,
+ }
}
export { useCommand }
diff --git a/src/components/command/hooks/use-search.ts b/src/components/command/hooks/use-search.ts
index 9eee73d..d91dbf3 100644
--- a/src/components/command/hooks/use-search.ts
+++ b/src/components/command/hooks/use-search.ts
@@ -4,119 +4,119 @@ import React from 'react'
import { useMutationObserver } from '@/components/_shared/hooks/use-mutation-observer'
import {
- COMMAND_ATTRIBUTE,
- COMMAND_ITEM_CLASSNAME_SELECTOR,
- RADIX_FOCUS_GUARD_ATTRUBUTE,
- SEARCH_OBSERVER_OPTIONS,
- SEARCH_PAUSE_DURATION,
+ COMMAND_ATTRIBUTE,
+ COMMAND_ITEM_CLASSNAME_SELECTOR,
+ RADIX_FOCUS_GUARD_ATTRUBUTE,
+ SEARCH_OBSERVER_OPTIONS,
+ SEARCH_PAUSE_DURATION,
} from '@/components/command/constants/constants'
import { useCommandContext } from '@/components/command/contexts/command-context'
import { lowercaseBinarySearch } from '@/components/command/utils/lowercase-binary-search'
function useSearch(value: string, setValue: React.Dispatch>) {
- const dataValueMapRef = React.useRef>(new Map())
- const dataValueArrayRef = React.useRef([])
- const timeoutIdRef = React.useRef(null)
- const previousSuccesfulSearchRef = React.useRef('')
- const shouldStartClearOnNextInputRef = React.useRef(false)
+ const dataValueMapRef = React.useRef>(new Map())
+ const dataValueArrayRef = React.useRef([])
+ const timeoutIdRef = React.useRef(null)
+ const previousSuccesfulSearchRef = React.useRef('')
+ const shouldStartClearOnNextInputRef = React.useRef(false)
- const { type, setValue: setRootValue } = useCommandContext()
+ const { type, setValue: setRootValue } = useCommandContext()
- const htmlDocument = typeof document !== 'undefined' ? document : null
+ const htmlDocument = typeof document !== 'undefined' ? document : null
- const storeCommandItems = React.useCallback(() => {
- /* check if the focus guard exists and the command root exists */
- const focusGuardExists = htmlDocument?.querySelector(RADIX_FOCUS_GUARD_ATTRUBUTE) !== null
- const cmdkRoot = htmlDocument?.querySelector(COMMAND_ATTRIBUTE)
+ const storeCommandItems = React.useCallback(() => {
+ /* check if the focus guard exists and the command root exists */
+ const focusGuardExists = htmlDocument?.querySelector(RADIX_FOCUS_GUARD_ATTRUBUTE) !== null
+ const cmdkRoot = htmlDocument?.querySelector(COMMAND_ATTRIBUTE)
- if (!focusGuardExists || !cmdkRoot) return
+ if (!focusGuardExists || !cmdkRoot) return
- /* find all command popover items in the DOM */
- const commandItems = cmdkRoot.querySelectorAll(COMMAND_ITEM_CLASSNAME_SELECTOR)
+ /* find all command popover items in the DOM */
+ const commandItems = cmdkRoot.querySelectorAll(COMMAND_ITEM_CLASSNAME_SELECTOR)
- const newDataValueMap = new Map()
- const newDataValueArray: string[] = []
+ const newDataValueMap = new Map()
+ const newDataValueArray: string[] = []
- commandItems.forEach((item) => {
- if (!(item instanceof HTMLElement)) return
+ commandItems.forEach((item) => {
+ if (!(item instanceof HTMLElement)) return
- const dataValue = item.dataset.label || ''
+ const dataValue = item.dataset.label || ''
- newDataValueMap.set(dataValue, dataValue)
- newDataValueArray.push(dataValue)
- })
+ newDataValueMap.set(dataValue, dataValue)
+ newDataValueArray.push(dataValue)
+ })
- /* set map of found items */
- dataValueMapRef.current = newDataValueMap
+ /* set map of found items */
+ dataValueMapRef.current = newDataValueMap
- /* set sorted array of found items, will be binary searched */
- dataValueArrayRef.current = newDataValueArray.sort((a: string, b: string) =>
- a.toLowerCase().localeCompare(b.toLowerCase()),
- )
- }, [])
+ /* set sorted array of found items, will be binary searched */
+ dataValueArrayRef.current = newDataValueArray.sort((a: string, b: string) =>
+ a.toLowerCase().localeCompare(b.toLowerCase()),
+ )
+ }, [])
- useMutationObserver(
- htmlDocument?.documentElement ?? null,
- storeCommandItems,
- SEARCH_OBSERVER_OPTIONS,
- )
+ useMutationObserver(
+ htmlDocument?.documentElement ?? null,
+ storeCommandItems,
+ SEARCH_OBSERVER_OPTIONS,
+ )
- React.useEffect(() => {
- setTimeout(storeCommandItems, 0)
- }, [storeCommandItems])
+ React.useEffect(() => {
+ setTimeout(storeCommandItems, 0)
+ }, [storeCommandItems])
- const handleValueChangeWithSearch = (searchValue: string) => {
- /* initial check */
- if (!setValue) return
+ const handleValueChangeWithSearch = (searchValue: string) => {
+ /* initial check */
+ if (!setValue) return
- let currentSearchValue = searchValue
+ let currentSearchValue = searchValue
- setValue(currentSearchValue)
+ setValue(currentSearchValue)
- /* clear previous search reset timeout */
- if (timeoutIdRef.current) {
- clearTimeout(timeoutIdRef.current)
- }
+ /* clear previous search reset timeout */
+ if (timeoutIdRef.current) {
+ clearTimeout(timeoutIdRef.current)
+ }
- /* add new search reset timeout */
- timeoutIdRef.current = setTimeout(() => {
- shouldStartClearOnNextInputRef.current = true
- }, SEARCH_PAUSE_DURATION)
+ /* add new search reset timeout */
+ timeoutIdRef.current = setTimeout(() => {
+ shouldStartClearOnNextInputRef.current = true
+ }, SEARCH_PAUSE_DURATION)
- /* if input was truthy but cleared, do not change root value, stay on current item */
- if (currentSearchValue?.trim() === '') return
+ /* if input was truthy but cleared, do not change root value, stay on current item */
+ if (currentSearchValue?.trim() === '') return
- /* if enough time passed, shave the previous string from the current string */
- if (shouldStartClearOnNextInputRef.current && value) {
- currentSearchValue = searchValue.startsWith(value)
- ? searchValue.slice(value.length)
- : searchValue
- shouldStartClearOnNextInputRef.current = false
- }
+ /* if enough time passed, shave the previous string from the current string */
+ if (shouldStartClearOnNextInputRef.current && value) {
+ currentSearchValue = searchValue.startsWith(value)
+ ? searchValue.slice(value.length)
+ : searchValue
+ shouldStartClearOnNextInputRef.current = false
+ }
- /* set new input value, after input manipulation */
- setValue(currentSearchValue)
+ /* set new input value, after input manipulation */
+ setValue(currentSearchValue)
- /* check for exact match first with map */
- if (dataValueMapRef.current.has(currentSearchValue)) {
- setRootValue(currentSearchValue)
+ /* check for exact match first with map */
+ if (dataValueMapRef.current.has(currentSearchValue)) {
+ setRootValue(currentSearchValue)
- return
- }
+ return
+ }
- /* check for label that starts with input using lowercase binary search */
- const startingLabelElement = lowercaseBinarySearch(
- dataValueArrayRef.current,
- currentSearchValue,
- )
+ /* check for label that starts with input using lowercase binary search */
+ const startingLabelElement = lowercaseBinarySearch(
+ dataValueArrayRef.current,
+ currentSearchValue,
+ )
- if (startingLabelElement) {
- setRootValue(startingLabelElement)
- previousSuccesfulSearchRef.current = startingLabelElement
- }
- }
+ if (startingLabelElement) {
+ setRootValue(startingLabelElement)
+ previousSuccesfulSearchRef.current = startingLabelElement
+ }
+ }
- return { type, handleValueChangeWithSearch }
+ return { type, handleValueChangeWithSearch }
}
export { useSearch }
diff --git a/src/components/command/types/command-context.ts b/src/components/command/types/command-context.ts
index 78b1eae..ec7b712 100644
--- a/src/components/command/types/command-context.ts
+++ b/src/components/command/types/command-context.ts
@@ -1,10 +1,8 @@
-import { CommandProps } from "@/components/command/types/command";
+import { CommandProps } from '@/components/command/types/command'
type CommandContext = {
- type: CommandProps["type"];
- setValue: React.Dispatch<
- React.SetStateAction
- >;
-};
+ type: CommandProps['type']
+ setValue: React.Dispatch>
+}
-export type { CommandContext };
+export type { CommandContext }
diff --git a/src/components/command/types/command-empty.ts b/src/components/command/types/command-empty.ts
index 19ac647..0f226bf 100644
--- a/src/components/command/types/command-empty.ts
+++ b/src/components/command/types/command-empty.ts
@@ -1,7 +1,7 @@
-import { CommandEmpty as CommandEmptyPrimitive } from "cmdk";
+import { CommandEmpty as CommandEmptyPrimitive } from 'cmdk'
-type CommandEmptyPrimitiveType = typeof CommandEmptyPrimitive;
+type CommandEmptyPrimitiveType = typeof CommandEmptyPrimitive
-type CommandEmptyProps = React.ComponentPropsWithRef;
+type CommandEmptyProps = React.ComponentPropsWithRef
-export type { CommandEmptyProps };
+export type { CommandEmptyProps }
diff --git a/src/components/command/types/command-group.ts b/src/components/command/types/command-group.ts
index 32cd3ce..63930c8 100644
--- a/src/components/command/types/command-group.ts
+++ b/src/components/command/types/command-group.ts
@@ -1,7 +1,7 @@
-import { CommandGroup as CommandGroupPrimitive } from "cmdk";
+import { CommandGroup as CommandGroupPrimitive } from 'cmdk'
-type CommandGroupPrimitiveType = typeof CommandGroupPrimitive;
+type CommandGroupPrimitiveType = typeof CommandGroupPrimitive
-type CommandGroupProps = React.ComponentPropsWithRef;
+type CommandGroupProps = React.ComponentPropsWithRef
-export type { CommandGroupProps };
+export type { CommandGroupProps }
diff --git a/src/components/command/types/command-input.ts b/src/components/command/types/command-input.ts
index 2e9efa3..465a075 100644
--- a/src/components/command/types/command-input.ts
+++ b/src/components/command/types/command-input.ts
@@ -1,21 +1,20 @@
-import { Simplify } from "@/components/_shared/types/simplify";
-import { CommandInput as CommandInputPrimitive } from "cmdk";
+import { Simplify } from '@/components/_shared/types/simplify'
+import { CommandInput as CommandInputPrimitive } from 'cmdk'
-import { MagnifyingGlassIcon } from "@/components/_shared/components/icons/magnifying-glass-icon";
-import { AsChildProp } from "@/components/_shared/types/as-child";
+import { MagnifyingGlassIcon } from '@/components/_shared/components/icons/magnifying-glass-icon'
+import { AsChildProp } from '@/components/_shared/types/as-child'
-type CommandInputPrimitiveType = typeof CommandInputPrimitive;
+type CommandInputPrimitiveType = typeof CommandInputPrimitive
-type CommandInputPrimitiveProps =
- React.ComponentPropsWithRef;
+type CommandInputPrimitiveProps = React.ComponentPropsWithRef
type ComboboxInputCustomProps = {
- containerProps?: Simplify & AsChildProp>;
- iconProps?: React.ComponentPropsWithRef;
-};
+ containerProps?: Simplify & AsChildProp>
+ iconProps?: React.ComponentPropsWithRef
+}
type CommandInputProps = Simplify<
- CommandInputPrimitiveProps & ComboboxInputCustomProps & AsChildProp
->;
+ CommandInputPrimitiveProps & ComboboxInputCustomProps & AsChildProp
+>
-export type { CommandInputProps };
+export type { CommandInputProps }
diff --git a/src/components/command/types/command-item.ts b/src/components/command/types/command-item.ts
index 94e5874..6282588 100644
--- a/src/components/command/types/command-item.ts
+++ b/src/components/command/types/command-item.ts
@@ -1,7 +1,7 @@
-import { CommandItem as CommandItemPrimitive } from "cmdk";
+import { CommandItem as CommandItemPrimitive } from 'cmdk'
-type CommandItemPrimitiveType = typeof CommandItemPrimitive;
+type CommandItemPrimitiveType = typeof CommandItemPrimitive
-type CommandItemProps = React.ComponentPropsWithRef;
+type CommandItemProps = React.ComponentPropsWithRef
-export type { CommandItemProps };
+export type { CommandItemProps }
diff --git a/src/components/command/types/command-list.ts b/src/components/command/types/command-list.ts
index 34ed5cf..b3a5439 100644
--- a/src/components/command/types/command-list.ts
+++ b/src/components/command/types/command-list.ts
@@ -1,7 +1,7 @@
-import { CommandList as CommandListPrimitive } from "cmdk";
+import { CommandList as CommandListPrimitive } from 'cmdk'
-type CommandListPrimitiveType = typeof CommandListPrimitive;
+type CommandListPrimitiveType = typeof CommandListPrimitive
-type CommandListProps = React.ComponentPropsWithRef;
+type CommandListProps = React.ComponentPropsWithRef
-export type { CommandListProps };
+export type { CommandListProps }
diff --git a/src/components/command/types/command.ts b/src/components/command/types/command.ts
index 9beba96..e4d7ece 100644
--- a/src/components/command/types/command.ts
+++ b/src/components/command/types/command.ts
@@ -1,15 +1,15 @@
-import { Simplify } from "@/components/_shared/types/simplify";
-import { Command as CommandPrimitive } from "cmdk";
-import React from "react";
+import { Simplify } from '@/components/_shared/types/simplify'
+import { Command as CommandPrimitive } from 'cmdk'
+import React from 'react'
-type CommandPrimitiveType = typeof CommandPrimitive;
+type CommandPrimitiveType = typeof CommandPrimitive
-type CommandPrimitiveProps = React.ComponentPropsWithRef;
+type CommandPrimitiveProps = React.ComponentPropsWithRef
type CommandCustomProps = {
- type?: "select" | "combobox";
-};
+ type?: 'select' | 'combobox'
+}
-type CommandProps = Simplify;
+type CommandProps = Simplify
-export type { CommandProps };
+export type { CommandProps }
diff --git a/src/components/command/utils/default-filter.ts b/src/components/command/utils/default-filter.ts
index 9950787..3edd0c6 100644
--- a/src/components/command/utils/default-filter.ts
+++ b/src/components/command/utils/default-filter.ts
@@ -1,9 +1,9 @@
'use client'
function defaultFilter(value: string, search: string) {
- if (value.toLowerCase().startsWith(search.toLowerCase())) return 1
+ if (value.toLowerCase().startsWith(search.toLowerCase())) return 1
- return 0
+ return 0
}
export { defaultFilter }
diff --git a/src/components/command/utils/filter-with-focus-on-exact-match.ts b/src/components/command/utils/filter-with-focus-on-exact-match.ts
index 9eea932..128f577 100644
--- a/src/components/command/utils/filter-with-focus-on-exact-match.ts
+++ b/src/components/command/utils/filter-with-focus-on-exact-match.ts
@@ -5,38 +5,38 @@ import React from 'react'
import { defaultFilter } from '@/components/command/utils/default-filter'
type GetFilterWithFocusOnExactMatchArgs = {
- timeoutIdRef: React.RefObject
- dataValueMapRef: React.RefObject>
- dataValueArrayRef: React.RefObject
- onValueChange: ((value: string) => void) | undefined
- filter: ((value: string, search: string) => number) | undefined
+ timeoutIdRef: React.RefObject
+ dataValueMapRef: React.RefObject>
+ dataValueArrayRef: React.RefObject
+ onValueChange: ((value: string) => void) | undefined
+ filter: ((value: string, search: string) => number) | undefined
}
function getFilterWithFocusOnExactMatch(args: GetFilterWithFocusOnExactMatchArgs) {
- const { timeoutIdRef, dataValueMapRef, dataValueArrayRef, onValueChange, filter } = args
+ const { timeoutIdRef, dataValueMapRef, dataValueArrayRef, onValueChange, filter } = args
- return (filterValue: string, filterSearch: string) => {
- timeoutIdRef.current = setTimeout(() => {
- if (dataValueMapRef.current.has(filterSearch)) {
- onValueChange?.(filterSearch)
- }
- }, 0)
+ return (filterValue: string, filterSearch: string) => {
+ timeoutIdRef.current = setTimeout(() => {
+ if (dataValueMapRef.current.has(filterSearch)) {
+ onValueChange?.(filterSearch)
+ }
+ }, 0)
- if (filterSearch !== '') {
- const startingLabelElement = dataValueArrayRef.current.find((value) =>
- value.toLowerCase().startsWith(filterSearch.toLowerCase()),
- )
+ if (filterSearch !== '') {
+ const startingLabelElement = dataValueArrayRef.current.find((value) =>
+ value.toLowerCase().startsWith(filterSearch.toLowerCase()),
+ )
- if (startingLabelElement) onValueChange?.(startingLabelElement)
- }
+ if (startingLabelElement) onValueChange?.(startingLabelElement)
+ }
- const isMatch =
- filter?.(filterValue, filterSearch) || defaultFilter?.(filterValue, filterSearch)
+ const isMatch =
+ filter?.(filterValue, filterSearch) || defaultFilter?.(filterValue, filterSearch)
- if (isMatch) return 1
+ if (isMatch) return 1
- return 0
- }
+ return 0
+ }
}
export { getFilterWithFocusOnExactMatch }
diff --git a/src/components/command/utils/lowercase-binary-search.ts b/src/components/command/utils/lowercase-binary-search.ts
index 30ec716..b5d19f2 100644
--- a/src/components/command/utils/lowercase-binary-search.ts
+++ b/src/components/command/utils/lowercase-binary-search.ts
@@ -1,30 +1,30 @@
'use client'
function lowercaseBinarySearch(array: string[], target: string): string | undefined {
- let left = 0
- let right = array.length - 1
+ let left = 0
+ let right = array.length - 1
- const lowerCaseTarget = target.toLowerCase()
+ const lowerCaseTarget = target.toLowerCase()
- while (left <= right) {
- const mid = Math.floor((left + right) / 2)
- const midValue = array[mid]?.toLowerCase() ?? ''
+ while (left <= right) {
+ const mid = Math.floor((left + right) / 2)
+ const midValue = array[mid]?.toLowerCase() ?? ''
- if (midValue.startsWith(lowerCaseTarget)) {
- // If the previous element also starts with the target, continue the search
- if (mid > 0 && array[mid - 1]?.toLowerCase().startsWith(lowerCaseTarget)) {
- right = mid - 1
- } else {
- return array[mid] // return original value, not lowercased
- }
- } else if (midValue < lowerCaseTarget) {
- left = mid + 1
- } else {
- right = mid - 1
- }
- }
+ if (midValue.startsWith(lowerCaseTarget)) {
+ // If the previous element also starts with the target, continue the search
+ if (mid > 0 && array[mid - 1]?.toLowerCase().startsWith(lowerCaseTarget)) {
+ right = mid - 1
+ } else {
+ return array[mid] // return original value, not lowercased
+ }
+ } else if (midValue < lowerCaseTarget) {
+ left = mid + 1
+ } else {
+ right = mid - 1
+ }
+ }
- return undefined
+ return undefined
}
export { lowercaseBinarySearch }
diff --git a/src/components/container/components/container.tsx b/src/components/container/components/container.tsx
index f1c0553..172bb69 100644
--- a/src/components/container/components/container.tsx
+++ b/src/components/container/components/container.tsx
@@ -1,20 +1,15 @@
-import { polymorphic } from "@renderui/utils";
-import React from "react";
+import { polymorphic } from '@renderui/utils'
+import React from 'react'
-import { ContainerProps } from "@/components/container/types/container";
-import { getMergedClassName } from "@/components/container/utils/get-merged-class-name";
+import { ContainerProps } from '@/components/container/types/container'
+import { getMergedClassName } from '@/components/container/utils/get-merged-class-name'
const Container = (props: ContainerProps) => {
- const { asChild, isFullHeight, className, ...restProps } = props;
+ const { asChild, isFullHeight, className, ...restProps } = props
- const Component = polymorphic(asChild, "div");
+ const Component = polymorphic(asChild, 'div')
- return (
-
- );
-};
+ return
+}
-export { Container };
+export { Container }
diff --git a/src/components/container/types/container.ts b/src/components/container/types/container.ts
index 77097fa..34b8259 100644
--- a/src/components/container/types/container.ts
+++ b/src/components/container/types/container.ts
@@ -1,16 +1,14 @@
-import { Simplify } from "@/components/_shared/types/simplify";
-import React from "react";
+import { Simplify } from '@/components/_shared/types/simplify'
+import React from 'react'
-import { AsChildProp } from "../../_shared/types/as-child";
+import { AsChildProp } from '../../_shared/types/as-child'
-type ContainerPrimitiveProps = React.ComponentPropsWithRef<"div">;
+type ContainerPrimitiveProps = React.ComponentPropsWithRef<'div'>
type ContainerRenderUIProps = {
- isFullHeight?: boolean;
-};
+ isFullHeight?: boolean
+}
-type ContainerProps = Simplify<
- ContainerPrimitiveProps & ContainerRenderUIProps & AsChildProp
->;
+type ContainerProps = Simplify
-export type { ContainerProps };
+export type { ContainerProps }
diff --git a/src/components/container/utils/get-merged-class-name.ts b/src/components/container/utils/get-merged-class-name.ts
index 87391a1..d301cbb 100644
--- a/src/components/container/utils/get-merged-class-name.ts
+++ b/src/components/container/utils/get-merged-class-name.ts
@@ -3,14 +3,14 @@ import { cn } from '@renderui/utils'
import { ContainerProps } from '@/components/container/types/container'
function getMergedClassName(
- isFullHeight: ContainerProps['isFullHeight'],
- className: ContainerProps['className'],
+ isFullHeight: ContainerProps['isFullHeight'],
+ className: ContainerProps['className'],
) {
- return cn(
- 'render-ui-container w-full mx-auto px-4 md:px-6 lg:px-8 2xl:max-w-screen-2xl',
- isFullHeight ? 'min-h-screen' : '',
- className,
- )
+ return cn(
+ 'render-ui-container w-full mx-auto px-4 md:px-6 lg:px-8 2xl:max-w-screen-2xl',
+ isFullHeight ? 'min-h-screen' : '',
+ className,
+ )
}
export { getMergedClassName }
diff --git a/src/components/dialog/components/dialog-close.tsx b/src/components/dialog/components/dialog-close.tsx
index 9466a0b..0fd46dd 100644
--- a/src/components/dialog/components/dialog-close.tsx
+++ b/src/components/dialog/components/dialog-close.tsx
@@ -1 +1 @@
-export { ModalClose as DialogClose } from "@/components/_shared/components/modal-close/modal-close";
+export { ModalClose as DialogClose } from '@/components/_shared/components/modal-close/modal-close'
diff --git a/src/components/dialog/components/dialog-content.tsx b/src/components/dialog/components/dialog-content.tsx
index e170f32..071a602 100644
--- a/src/components/dialog/components/dialog-content.tsx
+++ b/src/components/dialog/components/dialog-content.tsx
@@ -1,105 +1,93 @@
-"use client";
+'use client'
import {
- DialogContent as DialogContentPrimitive,
- DialogPortal as DialogPortalPrimitive,
-} from "@radix-ui/react-dialog";
-import { cn, cx, getOptionalObject } from "@renderui/utils";
-import React from "react";
+ DialogContent as DialogContentPrimitive,
+ DialogPortal as DialogPortalPrimitive,
+} from '@radix-ui/react-dialog'
+import { cn, cx, getOptionalObject } from '@renderui/utils'
+import React from 'react'
-import { CrossSmallIcon } from "@/components/_shared/components/icons/cross-small-icon";
-import { Button } from "@/components/button/components/button";
-import { DialogClose } from "@/components/dialog/components/dialog-close";
+import { CrossSmallIcon } from '@/components/_shared/components/icons/cross-small-icon'
+import { Button } from '@/components/button/components/button'
+import { DialogClose } from '@/components/dialog/components/dialog-close'
import {
- DEFAULT_DIALOG_CLOSE_BUTTON_CLASSNAME,
- DEFAULT_DIALOG_CLOSE_BUTTON_ICON_CLASSNAME,
- DFEAULT_DIALOG_CONTENT_CLASSNAME,
-} from "@/components/dialog/constants/constants";
-import { DialogContentProps } from "@/components/dialog/types/dialog-content";
-import { Overlay } from "@/components/overlay/components/overlay";
-import { VisuallyHidden } from "@/components/visually-hidden/components/visually-hidden";
-import { getAnimationStyleVariables } from "@renderui/utils/get-animation-style-variables";
+ DEFAULT_DIALOG_CLOSE_BUTTON_CLASSNAME,
+ DEFAULT_DIALOG_CLOSE_BUTTON_ICON_CLASSNAME,
+ DFEAULT_DIALOG_CONTENT_CLASSNAME,
+} from '@/components/dialog/constants/constants'
+import { DialogContentProps } from '@/components/dialog/types/dialog-content'
+import { Overlay } from '@/components/overlay/components/overlay'
+import { VisuallyHidden } from '@/components/visually-hidden/components/visually-hidden'
+import { getAnimationStyleVariables } from '@renderui/utils/get-animation-style-variables'
const DialogContent = (props: DialogContentProps) => {
- const {
- className,
- style,
- children,
- closeButtonProps,
- closeButtonIconProps,
- animationDuration,
- animationInDuration,
- animationOutDuration,
- animationTimingFunction,
- animationInTimingFunction,
- animationOutTimingFunction,
- hasCloseButton = true,
- ...restProps
- } = props;
+ const {
+ className,
+ style,
+ children,
+ closeButtonProps,
+ closeButtonIconProps,
+ animationDuration,
+ animationInDuration,
+ animationOutDuration,
+ animationTimingFunction,
+ animationInTimingFunction,
+ animationOutTimingFunction,
+ hasCloseButton = true,
+ ...restProps
+ } = props
- const {
- className: closeButtonClassName,
- "aria-label": closeButtonAriaLabel,
- variant = "ghost",
- color = "mode-contrast",
- ...restCloseButtonProps
- } = getOptionalObject(closeButtonProps);
+ const {
+ className: closeButtonClassName,
+ 'aria-label': closeButtonAriaLabel,
+ variant = 'ghost',
+ color = 'mode-contrast',
+ ...restCloseButtonProps
+ } = getOptionalObject(closeButtonProps)
- const { className: closeButtonIconClassName, ...restCloseButtonIconProps } =
- getOptionalObject(closeButtonIconProps);
+ const { className: closeButtonIconClassName, ...restCloseButtonIconProps } =
+ getOptionalObject(closeButtonIconProps)
- return (
-
-
-
- {hasCloseButton ? (
-
-
-
- ) : null}
- {children}
-
-
- );
-};
+ return (
+
+
+
+ {hasCloseButton ? (
+
+
+
+ ) : null}
+ {children}
+
+
+ )
+}
-export { DialogContent };
+export { DialogContent }
diff --git a/src/components/dialog/components/dialog-description.tsx b/src/components/dialog/components/dialog-description.tsx
index d36cbb2..1cfd043 100644
--- a/src/components/dialog/components/dialog-description.tsx
+++ b/src/components/dialog/components/dialog-description.tsx
@@ -1,5 +1,5 @@
-import { ModalDescription } from "@/components/_shared/components/modal-description/modal-description";
+import { ModalDescription } from '@/components/_shared/components/modal-description/modal-description'
-const DialogDescription = ModalDescription;
+const DialogDescription = ModalDescription
-export { DialogDescription };
+export { DialogDescription }
diff --git a/src/components/dialog/components/dialog-footer.tsx b/src/components/dialog/components/dialog-footer.tsx
index 4098305..f25476f 100644
--- a/src/components/dialog/components/dialog-footer.tsx
+++ b/src/components/dialog/components/dialog-footer.tsx
@@ -1,5 +1,5 @@
-import { ModalFooter } from "@/components/_shared/components/modal-footer/modal-footer";
+import { ModalFooter } from '@/components/_shared/components/modal-footer/modal-footer'
-const DialogFooter = ModalFooter;
+const DialogFooter = ModalFooter
-export { DialogFooter };
+export { DialogFooter }
diff --git a/src/components/dialog/components/dialog-header.tsx b/src/components/dialog/components/dialog-header.tsx
index 20639d1..2bcd974 100644
--- a/src/components/dialog/components/dialog-header.tsx
+++ b/src/components/dialog/components/dialog-header.tsx
@@ -1,5 +1,5 @@
-import { ModalHeader } from "@/components/_shared/components/modal-header/modal-header";
+import { ModalHeader } from '@/components/_shared/components/modal-header/modal-header'
-const DialogHeader = ModalHeader;
+const DialogHeader = ModalHeader
-export { DialogHeader };
+export { DialogHeader }
diff --git a/src/components/dialog/components/dialog-trigger.tsx b/src/components/dialog/components/dialog-trigger.tsx
index 8114b73..aa9d6d5 100644
--- a/src/components/dialog/components/dialog-trigger.tsx
+++ b/src/components/dialog/components/dialog-trigger.tsx
@@ -1,32 +1,27 @@
-"use client";
+'use client'
-import { DialogTrigger as DialogTriggerPrimitive } from "@radix-ui/react-dialog";
-import { cn } from "@renderui/utils";
-import React from "react";
+import { DialogTrigger as DialogTriggerPrimitive } from '@radix-ui/react-dialog'
+import { cn } from '@renderui/utils'
+import React from 'react'
-import { Button } from "@/components/button/components/button";
-import { DEFAULT_DIALOG_TRIGGER_CLASSNAME } from "@/components/dialog/constants/constants";
-import { DialogTriggerProps } from "@/components/dialog/types/dialog-trigger";
+import { Button } from '@/components/button/components/button'
+import { DEFAULT_DIALOG_TRIGGER_CLASSNAME } from '@/components/dialog/constants/constants'
+import { DialogTriggerProps } from '@/components/dialog/types/dialog-trigger'
const DialogTrigger = (props: DialogTriggerProps) => {
- const {
- className,
- variant = "solid",
- color = "mode-accent",
- ...restProps
- } = props;
+ const { className, variant = 'solid', color = 'mode-accent', ...restProps } = props
- return (
-
-
-
- );
-};
+ return (
+
+
+
+ )
+}
-export { DialogTrigger };
+export { DialogTrigger }
diff --git a/src/components/dialog/components/dialog.tsx b/src/components/dialog/components/dialog.tsx
index 028b2e7..8482773 100644
--- a/src/components/dialog/components/dialog.tsx
+++ b/src/components/dialog/components/dialog.tsx
@@ -6,9 +6,9 @@ import React from 'react'
import { DialogProps } from '@/components/dialog/types/dialog'
const Dialog = (props: DialogProps) => {
- const { isModal, ...restProps } = props
+ const { isModal, ...restProps } = props
- return
+ return
}
Dialog.displayName = 'Dialog'
diff --git a/src/components/dialog/constants/constants.ts b/src/components/dialog/constants/constants.ts
index 5b0af04..dd89b49 100644
--- a/src/components/dialog/constants/constants.ts
+++ b/src/components/dialog/constants/constants.ts
@@ -1,17 +1,17 @@
const DEFAULT_DIALOG_TRIGGER_CLASSNAME = 'render-ui-dialog-trigger rounded'
const DFEAULT_DIALOG_CONTENT_CLASSNAME =
- 'render-ui-dialog-content fixed left-[50%] top-[50%] z-50 grid w-[calc(100%_-_1rem)] sm:w-full sm:max-w-lg -translate-x-1/2 -translate-y-1/2 text-mode-contrast border border-mode-accent gap-4 bg-background p-6 shadow-lg duration-medium data-[state=open]:animate-dialog-enter data-[state=closed]:animate-dialog-exit data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg outline-none ring-ring-color ring-offset-background focus-visible:ring-ring-width focus-visible:ring-offset-offset'
+ 'render-ui-dialog-content fixed left-[50%] top-[50%] z-50 grid w-[calc(100%_-_1rem)] sm:w-full sm:max-w-lg -translate-x-1/2 -translate-y-1/2 text-mode-contrast border border-mode-accent gap-4 bg-background p-6 shadow-lg duration-medium data-[state=open]:animate-dialog-enter data-[state=closed]:animate-dialog-exit data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg outline-none ring-ring-color ring-offset-background focus-visible:ring-ring-width focus-visible:ring-offset-offset'
const DEFAULT_DIALOG_CLOSE_BUTTON_CLASSNAME =
- 'redner-ui-dialog-close absolute z-[1] right-4 top-4 p-2'
+ 'redner-ui-dialog-close absolute z-[1] right-4 top-4 p-2'
const DEFAULT_DIALOG_CLOSE_BUTTON_ICON_CLASSNAME =
- 'render-ui-sheet-close-button-icon h-4 w-4 opacity-70'
+ 'render-ui-sheet-close-button-icon h-4 w-4 opacity-70'
export {
- DEFAULT_DIALOG_CLOSE_BUTTON_CLASSNAME,
- DEFAULT_DIALOG_CLOSE_BUTTON_ICON_CLASSNAME,
- DEFAULT_DIALOG_TRIGGER_CLASSNAME,
- DFEAULT_DIALOG_CONTENT_CLASSNAME,
+ DEFAULT_DIALOG_CLOSE_BUTTON_CLASSNAME,
+ DEFAULT_DIALOG_CLOSE_BUTTON_ICON_CLASSNAME,
+ DEFAULT_DIALOG_TRIGGER_CLASSNAME,
+ DFEAULT_DIALOG_CONTENT_CLASSNAME,
}
diff --git a/src/components/dialog/index.ts b/src/components/dialog/index.ts
index 85f048c..2cd2a8b 100644
--- a/src/components/dialog/index.ts
+++ b/src/components/dialog/index.ts
@@ -8,4 +8,4 @@ export * from '@/components/dialog/components/dialog-title'
export * from '@/components/dialog/components/dialog-trigger'
export * from '@/components/dialog/types/dialog'
export * from '@/components/dialog/types/dialog-content'
-export * from '@/components/dialog/types/dialog-trigger'
\ No newline at end of file
+export * from '@/components/dialog/types/dialog-trigger'
diff --git a/src/components/dialog/types/dialog-content.ts b/src/components/dialog/types/dialog-content.ts
index c55f364..3da7309 100644
--- a/src/components/dialog/types/dialog-content.ts
+++ b/src/components/dialog/types/dialog-content.ts
@@ -1,29 +1,25 @@
import {
- DialogContent as DialogContentPrimitive,
- DialogPortal as DialogPortalPrimitive,
-} from "@radix-ui/react-dialog";
-import { Simplify } from "@/components/_shared/types/simplify";
-import React from "react";
+ DialogContent as DialogContentPrimitive,
+ DialogPortal as DialogPortalPrimitive,
+} from '@radix-ui/react-dialog'
+import { Simplify } from '@/components/_shared/types/simplify'
+import React from 'react'
-import { CrossSmallIcon } from "@/components/_shared/components/icons/cross-small-icon";
-import { ButtonProps } from "@/components/button";
-import { AnimationStyleVariables } from "@renderui/utils/get-animation-style-variables";
+import { CrossSmallIcon } from '@/components/_shared/components/icons/cross-small-icon'
+import { ButtonProps } from '@/components/button'
+import { AnimationStyleVariables } from '@renderui/utils/get-animation-style-variables'
-type DialogContentPrimitiveProps = React.ComponentPropsWithRef<
- typeof DialogContentPrimitive
->;
+type DialogContentPrimitiveProps = React.ComponentPropsWithRef
type DialogContentRenderUIProps = {
- portalProps?: React.ComponentPropsWithRef;
- overlayProps?: React.ComponentPropsWithRef;
- closeButtonProps?: ButtonProps;
- closeButtonIconProps?: React.ComponentPropsWithRef;
- hasCloseButton?: boolean;
-};
+ portalProps?: React.ComponentPropsWithRef
+ overlayProps?: React.ComponentPropsWithRef
+ closeButtonProps?: ButtonProps
+ closeButtonIconProps?: React.ComponentPropsWithRef