@duro-app/ui 3.4.2 → 3.6.0

package/src/components/Tree/styles.css.ts

@@ -0,0 +1,96 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+
+export const styles = css.create({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    margin: 0,
+    padding: 0,
+    listStyleType: 'none',
+  },
+  // The `role="group"` holding a branch's children: purely structural.
+  group: {
+    display: 'flex',
+    flexDirection: 'column',
+    margin: 0,
+    padding: 0,
+    listStyleType: 'none',
+  },
+  // The treeitem carries focus; its row draws the ring (the item also wraps
+  // its children, so a ring on it would circle the whole branch).
+  item: {
+    display: 'flex',
+    flexDirection: 'column',
+    outlineWidth: 0,
+    outlineStyle: 'none',
+  },
+  row: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing.xs,
+    paddingTop: '5px',
+    paddingBottom: '5px',
+    paddingRight: spacing.sm,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    color: colors.text,
+    borderRadius: radii.sm,
+    cursor: 'pointer',
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': colors.bgCardHover,
+    },
+    transitionProperty: 'background-color',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
+  },
+  // one indent step per level below the top
+  indent: (level: number) => ({
+    paddingLeft: `calc(${spacing.sm} + ${Math.max(0, level - 1)} * ${spacing.lg})`,
+  }),
+  rowFocused: {
+    outlineWidth: 2,
+    outlineStyle: 'solid',
+    outlineColor: colors.accent,
+    outlineOffset: -2,
+  },
+  rowSelected: {
+    color: colors.accent,
+    fontWeight: typography.fontWeightMedium,
+    backgroundColor: colors.bgCardHover,
+  },
+  chevron: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: spacing.md,
+    flexShrink: 0,
+    color: colors.textMuted,
+    transitionProperty: 'transform',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
+  },
+  chevronOpen: {
+    transform: 'rotate(90deg)',
+  },
+  // a leaf keeps the chevron's width (labels align) but shows nothing
+  chevronLeaf: {
+    visibility: 'hidden',
+  },
+  label: {
+    flexGrow: 1,
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  meta: {
+    flexShrink: 0,
+    fontSize: typography.fontSizeXs,
+    color: colors.textMuted,
+  },
+})

package/src/index.ts

@@ -74,6 +74,7 @@ export {TagGroup} from './components/TagGroup/TagGroup'
 // from there gives the same object with those attached.
 export {Table, type TableVariant, type TableSize} from './components/Table/Table'
 export {Tabs} from './components/Tabs/Tabs'
+export {Tree} from './components/Tree/Tree'
 export {Textarea, type TextareaVariant} from './components/Textarea/Textarea'
 export {
   ThemeProvider,