@yamada-ui/react 2.1.4-dev-20260323182837 → 2.2.0-next-20260324183323

package/dist/esm/components/tree/tree.style.js

@@ -0,0 +1,181 @@
+import { defineComponentSlotStyle } from "../../core/system/config.js";
+import "../../core/index.js";
+import { checkboxStyle } from "../checkbox/checkbox.style.js";
+import "../checkbox/index.js";
+
+//#region src/components/tree/tree.style.ts
+const treeStyle = defineComponentSlotStyle({
+	base: {
+		checkbox: { "--indicator-bg": "colors.bg" },
+		element: {
+			color: "{element-color}",
+			display: "inline-center",
+			gap: "{space}"
+		},
+		end: {},
+		group: {
+			alignItems: "stretch",
+			display: "flex",
+			flexDirection: "column"
+		},
+		indicator: {
+			color: "{element-color}",
+			transformOrigin: "center",
+			_animated: {
+				transitionDuration: "moderate",
+				transitionProperty: "transform"
+			},
+			_expanded: { transform: "rotate(90deg)" },
+			_hidden: { opacity: "0" }
+		},
+		item: {
+			"--element-color": "colors.fg.subtle",
+			"--space": "spaces.1",
+			"--space-start": "calc({depth-space} * ({level} - 1))",
+			alignItems: "center",
+			display: "flex",
+			_hasGroup: {
+				alignItems: "stretch",
+				flexDirection: "column"
+			},
+			_notHasGroup: {
+				border: "1px solid transparent",
+				cursor: "pointer",
+				focusVisibleRing: "inside",
+				gap: "{gap}",
+				pe: "{space}",
+				ps: "calc({space-start} + {space})",
+				rounded: "{rounded}",
+				userSelect: "none",
+				_hover: { bg: "bg.subtle" },
+				_focusVisible: { bg: "bg.subtle" },
+				_disabled: { layerStyle: "disabled" }
+			}
+		},
+		label: {
+			flex: "1",
+			textAlign: "left",
+			truncated: true
+		},
+		root: {
+			alignItems: "stretch",
+			display: "flex",
+			flexDirection: "column"
+		},
+		start: {},
+		trigger: {
+			alignItems: "center",
+			border: "1px solid transparent",
+			cursor: "pointer",
+			display: "flex",
+			focusVisibleRing: "inside",
+			gap: "{gap}",
+			pe: "{space}",
+			ps: "calc({space-start} + {space})",
+			rounded: "{rounded}",
+			userSelect: "none",
+			_hover: { bg: "bg.subtle" },
+			_focusVisible: { bg: "bg.subtle" },
+			_disabled: { layerStyle: "disabled" }
+		}
+	},
+	props: {
+		shape: {
+			circle: { item: { "--rounded": "radii.full" } },
+			rounded: { item: { "--rounded": "radii.l1" } },
+			square: { item: { "--rounded": "0" } }
+		},
+		withGuideLine: { true: {
+			group: {
+				position: "relative",
+				_before: {
+					bg: "border",
+					display: "block",
+					h: "full",
+					left: "calc({space-guide-line} + {depth-space})",
+					position: "absolute",
+					transform: "translateX(-50%)",
+					w: "px",
+					zIndex: "yamcha"
+				}
+			},
+			item: {
+				"--space-guide-line": "calc(({space-start} * 2) + {space})",
+				ps: "{space-guide-line}",
+				_hasGroup: { ps: "0" }
+			},
+			trigger: { ps: "{space-guide-line}" }
+		} }
+	},
+	variants: {
+		solid: {
+			checkbox: {
+				...checkboxStyle.variants?.solid.root,
+				_indicator: checkboxStyle.variants?.solid.indicator,
+				_selected: {
+					_checked: { "--indicator-border-color": "colorScheme.contrast" },
+					_indicator: {
+						color: "colorScheme.solid",
+						_checked: { bg: "colorScheme.contrast" },
+						_indeterminate: { bg: "colorScheme.contrast" }
+					}
+				}
+			},
+			item: { _notHasGroup: { _selected: {
+				layerStyle: "solid",
+				"--element-color": "colorScheme.contrast"
+			} } },
+			trigger: { _selected: {
+				layerStyle: "solid",
+				"--element-color": "colorScheme.contrast"
+			} }
+		},
+		subtle: {
+			checkbox: {
+				...checkboxStyle.variants?.solid.root,
+				_indicator: checkboxStyle.variants?.solid.indicator
+			},
+			item: { _notHasGroup: { _selected: {
+				layerStyle: "subtle",
+				"--element-color": "colorScheme.fg"
+			} } },
+			trigger: { _selected: {
+				layerStyle: "subtle",
+				"--element-color": "colorScheme.fg"
+			} }
+		}
+	},
+	sizes: {
+		sm: {
+			item: {
+				"--depth-space": "spaces.1.5",
+				"--gap": "spaces.1.5"
+			},
+			root: { fontSize: "sm" }
+		},
+		md: {
+			item: {
+				"--depth-space": "spaces.2",
+				"--gap": "spaces.2"
+			},
+			root: { fontSize: "md" }
+		},
+		lg: {
+			item: {
+				"--depth-space": "spaces.2",
+				"--gap": "spaces.2"
+			},
+			root: { fontSize: "lg" }
+		}
+	},
+	defaultProps: {
+		size: "md",
+		variant: "subtle",
+		shape: "rounded",
+		withGuideLine: false
+	}
+});
+
+//#endregion
+export { treeStyle };
+//# sourceMappingURL=tree.style.js.map

package/dist/esm/components/tree/tree.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.style.js","names":[],"sources":["../../../../src/components/tree/tree.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { checkboxStyle } from \"../checkbox\"\n\nexport const treeStyle = defineComponentSlotStyle({\n  base: {\n    checkbox: { \"--indicator-bg\": \"colors.bg\" },\n    element: {\n      color: \"{element-color}\",\n      display: \"inline-center\",\n      gap: \"{space}\",\n    },\n    end: {},\n    group: { alignItems: \"stretch\", display: \"flex\", flexDirection: \"column\" },\n    indicator: {\n      color: \"{element-color}\",\n      transformOrigin: \"center\",\n      _animated: {\n        transitionDuration: \"moderate\",\n        transitionProperty: \"transform\",\n      },\n      _expanded: { transform: \"rotate(90deg)\" },\n      _hidden: { opacity: \"0\" },\n    },\n    item: {\n      \"--element-color\": \"colors.fg.subtle\",\n      \"--space\": \"spaces.1\",\n      \"--space-start\": \"calc({depth-space} * ({level} - 1))\",\n      alignItems: \"center\",\n      display: \"flex\",\n      _hasGroup: {\n        alignItems: \"stretch\",\n        flexDirection: \"column\",\n      },\n      _notHasGroup: {\n        border: \"1px solid transparent\",\n        cursor: \"pointer\",\n        focusVisibleRing: \"inside\",\n        gap: \"{gap}\",\n        pe: \"{space}\",\n        ps: \"calc({space-start} + {space})\",\n        rounded: \"{rounded}\",\n        userSelect: \"none\",\n        _hover: { bg: \"bg.subtle\" },\n        _focusVisible: { bg: \"bg.subtle\" },\n        _disabled: { layerStyle: \"disabled\" },\n      },\n    },\n    label: { flex: \"1\", textAlign: \"left\", truncated: true },\n    root: {\n      alignItems: \"stretch\",\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    start: {},\n    trigger: {\n      alignItems: \"center\",\n      border: \"1px solid transparent\",\n      cursor: \"pointer\",\n      display: \"flex\",\n      focusVisibleRing: \"inside\",\n      gap: \"{gap}\",\n      pe: \"{space}\",\n      ps: \"calc({space-start} + {space})\",\n      rounded: \"{rounded}\",\n      userSelect: \"none\",\n      _hover: { bg: \"bg.subtle\" },\n      _focusVisible: { bg: \"bg.subtle\" },\n      _disabled: { layerStyle: \"disabled\" },\n    },\n  },\n\n  props: {\n    /**\n     * The shape of the component\n     *\n     * @default 'rounded'\n     */\n    shape: {\n      circle: {\n        item: { \"--rounded\": \"radii.full\" },\n      },\n      rounded: {\n        item: { \"--rounded\": \"radii.l1\" },\n      },\n      square: {\n        item: { \"--rounded\": \"0\" },\n      },\n    },\n    /**\n     * If `true`, display guide lines.\n     *\n     * @default false\n     */\n    withGuideLine: {\n      true: {\n        group: {\n          position: \"relative\",\n          _before: {\n            bg: \"border\",\n            display: \"block\",\n            h: \"full\",\n            left: \"calc({space-guide-line} + {depth-space})\",\n            position: \"absolute\",\n            transform: \"translateX(-50%)\",\n            w: \"px\",\n            zIndex: \"yamcha\",\n          },\n        },\n        item: {\n          \"--space-guide-line\": \"calc(({space-start} * 2) + {space})\",\n          ps: \"{space-guide-line}\",\n          _hasGroup: { ps: \"0\" },\n        },\n        trigger: { ps: \"{space-guide-line}\" },\n      },\n    },\n  },\n\n  variants: {\n    solid: {\n      checkbox: {\n        ...checkboxStyle.variants?.solid.root,\n        _indicator: checkboxStyle.variants?.solid.indicator,\n        _selected: {\n          _checked: { \"--indicator-border-color\": \"colorScheme.contrast\" },\n          _indicator: {\n            color: \"colorScheme.solid\",\n            _checked: { bg: \"colorScheme.contrast\" },\n            _indeterminate: { bg: \"colorScheme.contrast\" },\n          },\n        },\n      },\n      item: {\n        _notHasGroup: {\n          _selected: {\n            layerStyle: \"solid\",\n            \"--element-color\": \"colorScheme.contrast\",\n          },\n        },\n      },\n      trigger: {\n        _selected: {\n          layerStyle: \"solid\",\n          \"--element-color\": \"colorScheme.contrast\",\n        },\n      },\n    },\n    subtle: {\n      checkbox: {\n        ...checkboxStyle.variants?.solid.root,\n        _indicator: checkboxStyle.variants?.solid.indicator,\n      },\n      item: {\n        _notHasGroup: {\n          _selected: {\n            layerStyle: \"subtle\",\n            \"--element-color\": \"colorScheme.fg\",\n          },\n        },\n      },\n      trigger: {\n        _selected: {\n          layerStyle: \"subtle\",\n          \"--element-color\": \"colorScheme.fg\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    sm: {\n      item: { \"--depth-space\": \"spaces.1.5\", \"--gap\": \"spaces.1.5\" },\n      root: { fontSize: \"sm\" },\n    },\n    md: {\n      item: { \"--depth-space\": \"spaces.2\", \"--gap\": \"spaces.2\" },\n      root: { fontSize: \"md\" },\n    },\n    lg: {\n      item: { \"--depth-space\": \"spaces.2\", \"--gap\": \"spaces.2\" },\n      root: { fontSize: \"lg\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"subtle\",\n    shape: \"rounded\",\n    withGuideLine: false,\n  },\n})\n\nexport type TreeStyle = typeof treeStyle\n"],"mappings":"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"}