diff --git a/apps/docs/content/docs/manifest.json b/apps/docs/content/docs/manifest.json
index 31eff4cf6..be5f445d1 100644
--- a/apps/docs/content/docs/manifest.json
+++ b/apps/docs/content/docs/manifest.json
@@ -34,7 +34,8 @@
"routes": [
{
"title": "Default theme",
- "path": "/docs/theme/default-theme.mdx"
+ "path": "/docs/theme/default-theme.mdx",
+ "updated": true
},
{
"title": "Customize theme",
diff --git a/apps/docs/content/docs/theme/default-theme.mdx b/apps/docs/content/docs/theme/default-theme.mdx
index bcf982957..07b4c0b70 100644
--- a/apps/docs/content/docs/theme/default-theme.mdx
+++ b/apps/docs/content/docs/theme/default-theme.mdx
@@ -450,9 +450,9 @@ export default {
-### Border weights
+### Border widths
-NextUI includes by default a set of common border weights.
+NextUI includes by default a set of common border widths.
```js
export default {
@@ -463,7 +463,7 @@ export default {
fontWeights: {...}, // font weights object
lineHeights: {...}, // line heights object
radii: {...}, // border radius object
- borderWeights: {
+ borderWidths: {
light: '1px',
normal: '2px',
bold: '3px',
diff --git a/packages/components/collapse/src/base/collapse-item-base.tsx b/packages/components/collapse/src/base/collapse-item-base.tsx
index 7f548131f..c4e2bf518 100644
--- a/packages/components/collapse/src/base/collapse-item-base.tsx
+++ b/packages/components/collapse/src/base/collapse-item-base.tsx
@@ -1,11 +1,20 @@
import {BaseItem, ItemProps} from "@nextui-org/aria-utils";
-import {CSS} from "@nextui-org/system";
+import {CSSProp} from "@nextui-org/system";
import {FocusableProps} from "@react-types/shared";
import {ReactNode} from "react";
-type RenderIndicatorProps = {
+export type RenderIndicatorProps = {
+ /**
+ * The current indicator
+ */
indicator?: ReactNode;
+ /**
+ * The current open status.
+ */
isOpen?: boolean;
+ /**
+ * The current disabled status.
+ */
isDisabled?: boolean;
};
@@ -18,8 +27,10 @@ export interface CollapseItemBaseProps
children?: ReactNode | null;
/**
* The collapse item `expanded` indicator, it's usually an arrow icon.
+ * If you pass a function, NextUI will expose the current indicator and the open status,
+ * In case you want to use a custom indicator or muodify the current one.
*/
- indicator?: ReactNode | null;
+ indicator?: ReactNode | ((props: RenderIndicatorProps) => ReactNode) | null;
/**
* The collapse item subtitle.
*/
@@ -34,12 +45,12 @@ export interface CollapseItemBaseProps
* The border weight for bordered collapse item variation.
* @default "normal"
*/
- borderWeight?: CSS["borderWidth"];
+ borderWeight?: CSSProp["borderWidth"];
/**
* The border weight for the collapse item divider.
* @default "light"
*/
- dividerWeight?: CSS["borderWidth"];
+ dividerWeight?: CSSProp["borderWidth"];
/**
* Whether the collapse item have a bottom border.
* @default true
@@ -50,16 +61,6 @@ export interface CollapseItemBaseProps
* @default false
*/
disableAnimation?: boolean;
-
- /**
- * If you pass this function NextUI will expose the current indicator and the open status, In case you want to use a custom indicator or muodify the current one.
- * @param indicator The current indicator
- * @param isOpen The current open status.
- * @param isDisabled The current disabled status.
- *
- * @returns The indicator to be used.
- */
- renderIndicator?: (props: RenderIndicatorProps) => ReactNode;
}
const CollapseItem = BaseItem as (props: CollapseItemBaseProps) => JSX.Element;
diff --git a/packages/components/collapse/src/collapse-item.tsx b/packages/components/collapse/src/collapse-item.tsx
index 0b63cc331..c0b06f724 100644
--- a/packages/components/collapse/src/collapse-item.tsx
+++ b/packages/components/collapse/src/collapse-item.tsx
@@ -49,12 +49,12 @@ const CollapseItem = forwardRef((props, ref) => {
}, [indicator]);
const indicatorComponent = useMemo(() => {
- if (typeof item.props?.renderIndicator === "function") {
- return item.props?.renderIndicator({indicator, isOpen, isDisabled});
+ if (typeof item.props?.indicator === "function") {
+ return item.props?.indicator({indicator, isOpen, isDisabled});
}
return indicatorWrapper;
- }, [item.props?.renderIndicator, indicator, indicatorWrapper, isOpen, isDisabled]);
+ }, [item.props?.indicator, indicator, indicatorWrapper, isOpen, isDisabled]);
return (
extends CollapseItemBase
isDisabled?: boolean;
}
-// subtitle?: ReactNode | string; //TODO: unique per item
-// borderWeight?: CSS["borderWidth"];
-// dividerWeight?: CSS["borderWidth"];
-// withDivider?: boolean;
-// disableAnimation?: boolean;
-
export function useCollapseItem(props: UseCollapseItemProps) {
const {item, ...propsWithoutItem} = props;
@@ -51,10 +45,13 @@ export function useCollapseItem(props: UseCollapseItemProps
as = item.props?.as,
state,
focusedKey,
+ subtitle = item.props?.subtitle,
indicator = item.props?.indicator ?? ,
variant = item.props?.variant ?? "default",
+ withDivider = item.props?.withDivider ?? true,
borderWeight = item.props?.borderWeight ?? "normal",
dividerWeight = item.props?.dividerWeight ?? "light",
+ disableAnimation = item.props?.disableAnimation ?? false,
isDisabled: groupDisabled = false,
onFocusChange,
...otherProps
@@ -98,10 +95,13 @@ export function useCollapseItem(props: UseCollapseItemProps
item,
css: itemCss,
indicator,
+ subtitle,
variant,
isDisabled,
isOpen,
isFocusVisible,
+ withDivider,
+ disableAnimation,
buttonProps,
regionProps,
focusProps,
diff --git a/packages/components/collapse/stories/collapse.stories.tsx b/packages/components/collapse/stories/collapse.stories.tsx
index cf4223dc4..3de7f39c5 100644
--- a/packages/components/collapse/stories/collapse.stories.tsx
+++ b/packages/components/collapse/stories/collapse.stories.tsx
@@ -10,7 +10,7 @@ export default {
export const Default = () => (
-
+
file
@@ -32,7 +32,7 @@ export const CustomIndicator = () => {
return (
-
+
file
diff --git a/packages/core/system/src/common.ts b/packages/core/system/src/common.ts
index 04abf0f1c..274ff41fd 100644
--- a/packages/core/system/src/common.ts
+++ b/packages/core/system/src/common.ts
@@ -133,7 +133,7 @@ export const defaultTokens = {
10: "1000",
max: "9999",
},
- borderWeights: {
+ borderWidths: {
light: "1px",
normal: "2px",
bold: "3px",
@@ -515,7 +515,6 @@ export const defaultThemeMap = {
inlineSize: "space",
minInlineSize: "space",
maxInlineSize: "space",
- borderWidth: "borderWeights",
};
export default {
diff --git a/packages/core/system/src/types.ts b/packages/core/system/src/types.ts
index 6da465e2e..dcc04c58b 100644
--- a/packages/core/system/src/types.ts
+++ b/packages/core/system/src/types.ts
@@ -20,7 +20,7 @@ export declare namespace ConfigType {
space?: {[token in number | string]: boolean | number | string};
radii?: {[token in number | string]: boolean | number | string};
zIndices?: {[token in number | string]: boolean | number | string};
- borderWeights?: {[token in number | string]: boolean | number | string};
+ borderWidths?: {[token in number | string]: boolean | number | string};
colors?: {[token in number | string]: boolean | number | string};
shadows?: {[token in number | string]: boolean | number | string};
dropShadows?: {[token in number | string]: boolean | number | string};
@@ -60,6 +60,7 @@ export type StitchesTheme = typeof theme;
export type CSSComponent = typeof css;
// theme types
+export type BaseThemeMap = StitchesConfig["themeMap"];
export type BaseTheme = ConfigType.Theme;
export type NextUITheme = StitchesTheme;
export type ThemeType = "dark" | "light";
@@ -76,11 +77,34 @@ export interface TokenValue {
}
export type Theme = {
+ /**
+ * The theme type.
+ * @default "light"
+ */
type?: ThemeType | string;
+ /**
+ * The stitches theme class name.
+ * @see https://stitches.dev/docs/theming#add-a-new-theme
+ */
className?: string;
+ /**
+ * The stitches theme tokens object.
+ */
theme?: BaseTheme;
+ /**
+ * The stitches theme media object.
+ * @see https://stitches.dev/docs/breakpoints
+ */
media?: ConfigType.Media;
+ /**
+ * The theme utils object.
+ * @see https://stitches.dev/docs/utils
+ */
utils?: ConfigType.Utils;
+ /**
+ * The stitches theme themeMap object.
+ * @see https://stitches.dev/docs/tokens#property-mapping
+ */
themeMap?: ConfigType.ThemeMap;
};
@@ -89,3 +113,23 @@ export type NextUIThemeContext = {
theme?: NextUITheme;
isDark?: boolean;
};
+
+type Globals = "inherit" | "initial" | "revert" | "unset";
+
+type Index = (number | string) & Record;
+
+type TokenByScaleName = ScaleName extends keyof Theme
+ ? keyof Theme[ScaleName]
+ : never;
+
+type TokenByPropertyName = PropertyName extends keyof ThemeMap
+ ? TokenByScaleName
+ : never;
+
+export type CSSProp = {
+ [K in keyof CSSProperties]?:
+ | TokenByPropertyName
+ | Globals
+ | Index
+ | undefined;
+};