Collapsible

import * as stylex from '@stylexjs/stylex';

import { Button } from '@/components/ui/button';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { space, fontSize, fontWeight, stroke, container } from '@/lib/constants.stylex';
import { colors, radius } from '@/lib/tokens.stylex';

export default function CollapsibleDemo() {
  return (
    <Collapsible defaultOpen {...stylex.props(styles.root)}>
      <div {...stylex.props(styles.header)}>
        <span {...stylex.props(styles.title)}>
          @peduarte starred 3 repositories
        </span>
        <CollapsibleTrigger render={<Button variant="ghost" size="sm" />}>
          Toggle
        </CollapsibleTrigger>
      </div>
      <div {...stylex.props(styles.repo)}>
        <code>@radix-ui/primitives</code>
      </div>
      <CollapsibleContent style={styles.panel}>
        <div {...stylex.props(styles.repo)}>
          <code>@base-ui/react</code>
        </div>
        <div {...stylex.props(styles.repo)}>
          <code>@stylexjs/stylex</code>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}

const styles = stylex.create({
  root: {
    display: 'flex',
    flexDirection: 'column',
    gap: space.s2,
    width: container.md,
  },
  header: {
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'space-between',
  },
  title: {
    fontSize: fontSize.sm,
    fontWeight: fontWeight.medium,
  },
  panel: {
    display: 'flex',
    flexDirection: 'column',
    gap: space.s2,
  },
  repo: {
    borderColor: colors.border,
    borderRadius: radius.md,
    borderStyle: 'solid',
    borderWidth: stroke.border,
    fontSize: fontSize.sm,
    paddingBlock: space.s2,
    paddingInline: space.s3,
  },
});

import * as React from 'react';

import * as stylex from '@stylexjs/stylex';
import { ChevronRight, File as FileIcon, Folder as FolderIcon } from 'lucide-react';

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { space, fontSize, duration, stroke } from '@/lib/constants.stylex';
import { icon } from '@/lib/stylex-utils';
import { colors, radius } from '@/lib/tokens.stylex';

function Folder({
  name,
  defaultOpen,
  depth = 0,
  children,
}: {
  name: string;
  defaultOpen?: boolean;
  depth?: number;
  children: React.ReactNode;
}) {
  return (
    <Collapsible defaultOpen={defaultOpen}>
      <CollapsibleTrigger
        {...stylex.props(styles.row, indents.depth(depth))}
      >
        <ChevronRight {...stylex.props(icon.sm, styles.chevron)} />
        <FolderIcon {...stylex.props(icon.sm)} />
        <code>{name}</code>
      </CollapsibleTrigger>
      <CollapsibleContent>{children}</CollapsibleContent>
    </Collapsible>
  );
}

function File({ name, depth = 1 }: { name: string; depth?: number }) {
  return (
    <div {...stylex.props(styles.row, styles.file, indents.depth(depth))}>
      <span {...stylex.props(styles.fileSpacer)} />
      <FileIcon {...stylex.props(icon.sm)} />
      <code>{name}</code>
    </div>
  );
}

export default function CollapsibleFileTree() {
  return (
    <div {...stylex.props(styles.tree)}>
      <Folder name="src" defaultOpen depth={0}>
        <Folder name="components" defaultOpen depth={1}>
          <File name="button.tsx" depth={2} />
          <File name="dialog.tsx" depth={2} />
        </Folder>
        <File name="index.ts" depth={1} />
      </Folder>
      <Folder name="public" depth={0}>
        <File name="favicon.ico" depth={1} />
      </Folder>
      <File name="package.json" depth={0} />
    </div>
  );
}

const styles = stylex.create({
  tree: {
    display: 'flex',
    flexDirection: 'column',
    fontSize: fontSize.sm,
  },
  row: {
    alignItems: 'center',
    backgroundColor: {
      default: 'transparent',
      ':hover': colors.accent,
    },
    borderRadius: radius.sm,
    borderStyle: 'none',
    color: colors.foreground,
    cursor: 'pointer',
    display: 'flex',
    fontSize: fontSize.sm,
    gap: space.s1,
    outline: {
      default: 'none',
      ':focus-visible': `${stroke.focus} solid ${colors.ring}`,
    },
    // Read by the chevron below — StyleX has no child selectors, so the
    // trigger's [data-panel-open] state travels via a custom property.
    '--file-tree-chevron-rotation': {
      default: null,
      '[data-panel-open]': '90deg',
    },
    paddingBlock: space.s1,
    paddingInline: space.s1,
    textAlign: 'left',
    width: '100%',
  },
  file: {
    color: colors.mutedForeground,
    cursor: 'default',
  },
  fileSpacer: {
    display: 'inline-block',
    width: space.s25,
  },
  chevron: {
    transform: 'rotate(var(--file-tree-chevron-rotation, 0deg))',
    transitionDuration: duration.fast,
    transitionProperty: 'transform',
  },
});

const indents = stylex.create({
  depth: (depth: number) => ({
    paddingLeft: `calc(${space.s4} * ${depth})`,
  }),
});