feat(system): tokens types mapped to use the prop without the "$" symbol

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",

apps/docs/content/docs/theme/default-theme.mdx

@@ -450,9 +450,9 @@ export default {
 
 <Spacer y={2} />
 
-### 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',

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<T extends object = {}>
   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<T extends object = {}>
    * 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<T extends object = {}>
    * @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;

packages/components/collapse/src/collapse-item.tsx

@@ -49,12 +49,12 @@ const CollapseItem = forwardRef<CollapseItemProps, "div">((props, ref) => {
   }, [indicator]);
 
   const indicatorComponent = useMemo(() => {
-    if (typeof item.props?.renderIndicator === "function") {
+    if (typeof item.props?.indicator === "function") {
-      return item.props?.renderIndicator({indicator, isOpen, isDisabled});
+      return item.props?.indicator({indicator, isOpen, isDisabled});
     }
 
     return indicatorWrapper;
-  }, [item.props?.renderIndicator, indicator, indicatorWrapper, isOpen, isDisabled]);
+  }, [item.props?.indicator, indicator, indicatorWrapper, isOpen, isDisabled]);
 
   return (
     <StyledCollapseItem

packages/components/collapse/src/index.ts

@@ -1,5 +1,7 @@
 // export types
 export type {CollapseProps} from "./collapse";
+export type {CollapseItemProps} from "./collapse-item";
+export type {RenderIndicatorProps} from "./base/collapse-item-base";
 
 // export component
 export {default as Collapse} from "./collapse";

packages/components/collapse/src/use-collapse-item.tsx

@@ -36,12 +36,6 @@ export interface UseCollapseItemProps<T extends object> extends CollapseItemBase
   isDisabled?: boolean;
 }
 
-// subtitle?: ReactNode | string; //TODO: unique per item
-// borderWeight?: CSS["borderWidth"];
-// dividerWeight?: CSS["borderWidth"];
-// withDivider?: boolean;
-// disableAnimation?: boolean;
-
 export function useCollapseItem<T extends object>(props: UseCollapseItemProps<T>) {
   const {item, ...propsWithoutItem} = props;
 
@@ -51,10 +45,13 @@ export function useCollapseItem<T extends object>(props: UseCollapseItemProps<T>
     as = item.props?.as,
     state,
     focusedKey,
+    subtitle = item.props?.subtitle,
     indicator = item.props?.indicator ?? <CollapseIcon />,
     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<T extends object>(props: UseCollapseItemProps<T>
     item,
     css: itemCss,
     indicator,
+    subtitle,
     variant,
     isDisabled,
     isOpen,
     isFocusVisible,
+    withDivider,
+    disableAnimation,
     buttonProps,
     regionProps,
     focusProps,

packages/components/collapse/stories/collapse.stories.tsx

@@ -10,7 +10,7 @@ export default {
 
 export const Default = () => (
   <Collapse selectionMode="single">
-    <Collapse.Item key="1" title="Your files">
+    <Collapse.Item key="1" dividerWeight="" title="Your files">
       file
     </Collapse.Item>
     <Collapse.Item key="2" title="Shared with you">
@@ -32,7 +32,7 @@ export const CustomIndicator = () => {
 
   return (
     <Collapse selectionMode="single">
-      <Collapse.Item key="1" renderIndicator={renderIndicator} title="Your files">
+      <Collapse.Item key="1" indicator={renderIndicator} title="Your files">
         file
       </Collapse.Item>
       <Collapse.Item key="2" title="Shared with you">

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 {

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<never, never>;
+
+type TokenByScaleName<ScaleName, Theme> = ScaleName extends keyof Theme
+  ? keyof Theme[ScaleName]
+  : never;
+
+type TokenByPropertyName<PropertyName, Theme, ThemeMap> = PropertyName extends keyof ThemeMap
+  ? TokenByScaleName<ThemeMap[PropertyName], Theme>
+  : never;
+
+export type CSSProp = {
+  [K in keyof CSSProperties]?:
+    | TokenByPropertyName<K, NextUITheme, BaseThemeMap>
+    | Globals
+    | Index
+    | undefined;
+};