Showing preview only (892K chars total). Download the full file or copy to clipboard to get everything.
Repository: actifyjs/actify
Branch: main
Commit: bde0f0b00bf4
Files: 416
Total size: 784.0 KB
Directory structure:
gitextract_0nomnhu6/
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ ├── custom.md
│ │ └── feature_request.md
│ └── workflows/
│ └── docs-deploy.yml
├── .gitignore
├── .npmrc
├── .prettierrc
├── LICENSE.md
├── README.md
├── apps/
│ └── docs/
│ ├── .gitignore
│ ├── content/
│ │ ├── components/
│ │ │ ├── accordion.md
│ │ │ ├── app-bars/
│ │ │ │ ├── bottom-app-bar.md
│ │ │ │ └── top-app-bar.md
│ │ │ ├── autocomplete.md
│ │ │ ├── avatar.md
│ │ │ ├── badges.md
│ │ │ ├── before-after.md
│ │ │ ├── buttons/
│ │ │ │ ├── button.md
│ │ │ │ ├── fab.md
│ │ │ │ ├── icon-button.md
│ │ │ │ └── segmented-button.md
│ │ │ ├── cards.md
│ │ │ ├── carousel.md
│ │ │ ├── checkbox.md
│ │ │ ├── chips.md
│ │ │ ├── date-pickers.md
│ │ │ ├── dialogs.md
│ │ │ ├── divider.md
│ │ │ ├── focus-ring.md
│ │ │ ├── label.md
│ │ │ ├── lists.md
│ │ │ ├── menus.md
│ │ │ ├── navigation/
│ │ │ │ ├── navigation-bar.md
│ │ │ │ ├── navigation-drawer.md
│ │ │ │ └── navigation-rail.md
│ │ │ ├── pagination.md
│ │ │ ├── progress/
│ │ │ │ ├── circular-progress.md
│ │ │ │ └── linear-progress.md
│ │ │ ├── radio.md
│ │ │ ├── ripple.md
│ │ │ ├── select.md
│ │ │ ├── sheets/
│ │ │ │ ├── bottom-sheets.md
│ │ │ │ └── side-sheets.md
│ │ │ ├── sliders.md
│ │ │ ├── snackbar.md
│ │ │ ├── swiper.md
│ │ │ ├── switch.md
│ │ │ ├── table.md
│ │ │ ├── tabs.md
│ │ │ ├── terminal.md
│ │ │ ├── text-fields.md
│ │ │ ├── time-pickers.md
│ │ │ └── tooltips.md
│ │ └── getting-started/
│ │ ├── icons.md
│ │ ├── installation.md
│ │ ├── theme.md
│ │ └── why-actify.md
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.mjs
│ ├── src/
│ │ ├── app/
│ │ │ ├── (docs)/
│ │ │ │ ├── [...slug]/
│ │ │ │ │ └── page.tsx
│ │ │ │ └── layout.tsx
│ │ │ ├── app.css
│ │ │ ├── fonts.ts
│ │ │ ├── layout.tsx
│ │ │ ├── page.tsx
│ │ │ └── template.tsx
│ │ ├── components/
│ │ │ ├── App.tsx
│ │ │ ├── AppDrawer.tsx
│ │ │ ├── Aside.tsx
│ │ │ ├── Console.tsx
│ │ │ ├── DocPreview.tsx
│ │ │ ├── DocTabs.tsx
│ │ │ ├── DocUsage.tsx
│ │ │ ├── Dropdown.tsx
│ │ │ ├── EditOnGitHub.tsx
│ │ │ ├── Footer.tsx
│ │ │ ├── GettingStarted.tsx
│ │ │ ├── Header.tsx
│ │ │ ├── Logo.tsx
│ │ │ ├── Markdown.tsx
│ │ │ ├── NavLink.tsx
│ │ │ ├── NgrokerLogo.tsx
│ │ │ ├── OpenInCodeSandbox.tsx
│ │ │ ├── OpenInStackblitz.tsx
│ │ │ ├── QzyLogo.tsx
│ │ │ ├── Search.tsx
│ │ │ ├── Sponsors.tsx
│ │ │ ├── SyntaxHighlighter.tsx
│ │ │ ├── TableOfContents.tsx
│ │ │ ├── TaildoorLogo.tsx
│ │ │ ├── ThemeChanger.tsx
│ │ │ └── ViewSource.tsx
│ │ ├── hooks/
│ │ │ ├── useAutoTheme.ts
│ │ │ └── useMounted.ts
│ │ ├── lib/
│ │ │ ├── doc.ts
│ │ │ └── raw.ts
│ │ ├── usages/
│ │ │ ├── accordion.tsx
│ │ │ ├── app-bars/
│ │ │ │ ├── bottom-app-bar.tsx
│ │ │ │ └── top-app-bar.tsx
│ │ │ ├── autocomplete.tsx
│ │ │ ├── avatar.tsx
│ │ │ ├── badges.tsx
│ │ │ ├── before-after.tsx
│ │ │ ├── buttons/
│ │ │ │ ├── button.tsx
│ │ │ │ ├── fab.tsx
│ │ │ │ ├── icon-button.tsx
│ │ │ │ └── segmented-button.tsx
│ │ │ ├── cards.tsx
│ │ │ ├── carousel.tsx
│ │ │ ├── checkbox.tsx
│ │ │ ├── chips.tsx
│ │ │ ├── dialogs.tsx
│ │ │ ├── divider.tsx
│ │ │ ├── focus-ring.tsx
│ │ │ ├── lists.tsx
│ │ │ ├── menus.tsx
│ │ │ ├── navigation/
│ │ │ │ ├── navigation-bar.tsx
│ │ │ │ ├── navigation-drawer.tsx
│ │ │ │ └── navigation-rail.tsx
│ │ │ ├── pagination.tsx
│ │ │ ├── progress/
│ │ │ │ ├── circular-progress.tsx
│ │ │ │ └── linear-progress.tsx
│ │ │ ├── radio.tsx
│ │ │ ├── ripple.tsx
│ │ │ ├── select.tsx
│ │ │ ├── sheets/
│ │ │ │ ├── bottom-sheets.tsx
│ │ │ │ └── side-sheets.tsx
│ │ │ ├── sliders.tsx
│ │ │ ├── snackbar.tsx
│ │ │ ├── swiper.tsx
│ │ │ ├── switch.tsx
│ │ │ ├── table.tsx
│ │ │ ├── tabs.tsx
│ │ │ ├── terminal.tsx
│ │ │ ├── text-fields.tsx
│ │ │ └── tooltips.tsx
│ │ ├── utils/
│ │ │ ├── apply-theme-string.ts
│ │ │ ├── cn.ts
│ │ │ ├── material-color-helpers.ts
│ │ │ └── theme.ts
│ │ └── views/
│ │ ├── icon.tsx
│ │ ├── icons.json
│ │ └── theme.tsx
│ └── tsconfig.json
├── biome.json
├── package.json
├── packages/
│ ├── actify/
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── src/
│ │ │ ├── animations/
│ │ │ │ └── index.ts
│ │ │ ├── components/
│ │ │ │ ├── Accordion/
│ │ │ │ │ ├── Accordion.tsx
│ │ │ │ │ ├── AccordionContent.tsx
│ │ │ │ │ ├── AccordionContext.tsx
│ │ │ │ │ ├── AccordionHeader.tsx
│ │ │ │ │ ├── AccordionItem.tsx
│ │ │ │ │ ├── accordion.module.css
│ │ │ │ │ └── index.ts
│ │ │ │ ├── ActionMenu/
│ │ │ │ │ ├── ActionMenu.tsx
│ │ │ │ │ ├── Menu.tsx
│ │ │ │ │ ├── MenuItem.tsx
│ │ │ │ │ ├── MenuItems.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── menu.module.css
│ │ │ │ ├── Autocomplete/
│ │ │ │ │ ├── Autocomplete.tsx
│ │ │ │ │ ├── autocomplete.module.css
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Avatar/
│ │ │ │ │ ├── Avatar.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Badges/
│ │ │ │ │ ├── Badges.tsx
│ │ │ │ │ ├── badges.module.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── BeforeAfter/
│ │ │ │ │ ├── BeforeAfter.tsx
│ │ │ │ │ ├── before-after.module.css
│ │ │ │ │ └── index.ts
│ │ │ │ ├── BottomAppBar/
│ │ │ │ │ ├── BottomAppBar.tsx
│ │ │ │ │ ├── BottomAppBarFab.tsx
│ │ │ │ │ ├── BottomAppBarIcons.tsx
│ │ │ │ │ ├── bottom-app-bar.module.css
│ │ │ │ │ └── index.ts
│ │ │ │ ├── BottomSheets/
│ │ │ │ │ ├── BottomSheets.tsx
│ │ │ │ │ ├── BottomSheetsActivator.tsx
│ │ │ │ │ ├── BottomSheetsContent.tsx
│ │ │ │ │ ├── BottomSheetsContext.tsx
│ │ │ │ │ ├── bottom-sheets.module.css
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Buttons/
│ │ │ │ │ ├── Button.tsx
│ │ │ │ │ ├── Fab.tsx
│ │ │ │ │ ├── IconButton.tsx
│ │ │ │ │ ├── LinkButton.tsx
│ │ │ │ │ ├── fab.module.css
│ │ │ │ │ ├── icon-button.module.css
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── styles/
│ │ │ │ │ ├── button.module.css
│ │ │ │ │ ├── color.module.css
│ │ │ │ │ └── variant.module.css
│ │ │ │ ├── Cards/
│ │ │ │ │ ├── Card.tsx
│ │ │ │ │ ├── card.module.css
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Carousel/
│ │ │ │ │ ├── Carousel.tsx
│ │ │ │ │ ├── CarouselContent.tsx
│ │ │ │ │ ├── CarouselContext.tsx
│ │ │ │ │ ├── CarouselControl.tsx
│ │ │ │ │ ├── CarouselIndicator.tsx
│ │ │ │ │ ├── CarouselItem.tsx
│ │ │ │ │ ├── carousel-control.module.css
│ │ │ │ │ ├── carousel-indicator.module.css
│ │ │ │ │ ├── carousel.module.css
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Checkbox/
│ │ │ │ │ ├── Checkbox.tsx
│ │ │ │ │ ├── CheckboxGroup.tsx
│ │ │ │ │ ├── checkbox-group.module.css
│ │ │ │ │ ├── checkbox.module.css
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Chips/
│ │ │ │ │ ├── Chip.tsx
│ │ │ │ │ ├── ChipGroup.tsx
│ │ │ │ │ ├── chip-group.module.css
│ │ │ │ │ ├── chip.module.css
│ │ │ │ │ └── index.ts
│ │ │ │ ├── CircularProgress/
│ │ │ │ │ ├── CircularProgress.tsx
│ │ │ │ │ ├── circular-progress.module.css
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Dialogs/
│ │ │ │ │ ├── Dialog.tsx
│ │ │ │ │ ├── DialogActivator.tsx
│ │ │ │ │ ├── animation.ts
│ │ │ │ │ ├── dialog.module.css
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Divider/
│ │ │ │ │ ├── Divider.tsx
│ │ │ │ │ ├── divider.module.css
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Elevation/
│ │ │ │ │ ├── Elevation.tsx
│ │ │ │ │ ├── elevation.module.css
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Field/
│ │ │ │ │ ├── Field.tsx
│ │ │ │ │ ├── FilledField.tsx
│ │ │ │ │ ├── OutlinedField.tsx
│ │ │ │ │ ├── SupportingText.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── styles/
│ │ │ │ │ ├── field.module.css
│ │ │ │ │ └── supporting.module.css
│ │ │ │ ├── FocusRing/
│ │ │ │ │ ├── FocusRing.tsx
│ │ │ │ │ ├── focusring.module.css
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Icon/
│ │ │ │ │ ├── Icon.tsx
│ │ │ │ │ ├── icon.module.css
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Item/
│ │ │ │ │ ├── Item.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── item.module.css
│ │ │ │ ├── Label/
│ │ │ │ │ ├── Label.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── LinearProgress/
│ │ │ │ │ ├── LinearProgress.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── linear-progress.module.css
│ │ │ │ ├── ListBox/
│ │ │ │ │ ├── ListBox.tsx
│ │ │ │ │ ├── ListBoxOption.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── listbox.module.css
│ │ │ │ │ └── option.module.css
│ │ │ │ ├── Lists/
│ │ │ │ │ ├── List.tsx
│ │ │ │ │ ├── ListContext.tsx
│ │ │ │ │ ├── ListGroup.tsx
│ │ │ │ │ ├── ListItem.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── list-group.module.css
│ │ │ │ │ ├── list-item.module.css
│ │ │ │ │ └── list.module.css
│ │ │ │ ├── Menus/
│ │ │ │ │ ├── ListBox.tsx
│ │ │ │ │ ├── ListBoxItem.tsx
│ │ │ │ │ ├── Menu.tsx
│ │ │ │ │ ├── MenuButton.tsx
│ │ │ │ │ ├── MenuItem.tsx
│ │ │ │ │ ├── MenuPopover.tsx
│ │ │ │ │ ├── Submenu.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── listbox-item.module.css
│ │ │ │ │ ├── listbox.module.css
│ │ │ │ │ ├── menu-popover.module.css
│ │ │ │ │ └── menu.module.css
│ │ │ │ ├── Modal/
│ │ │ │ │ ├── Modal.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── modal.module.css
│ │ │ │ ├── NavigationBar/
│ │ │ │ │ ├── NavigationBar.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── navigation-bar.module.css
│ │ │ │ ├── NavigationDrawer/
│ │ │ │ │ ├── DrawerActivator.tsx
│ │ │ │ │ ├── DrawerContent.tsx
│ │ │ │ │ ├── DrawerContext.tsx
│ │ │ │ │ ├── NavigationDrawer.tsx
│ │ │ │ │ ├── drawer.module.css
│ │ │ │ │ └── index.ts
│ │ │ │ ├── NavigationRail/
│ │ │ │ │ ├── NavigationRail.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── navigation-rail.module.css
│ │ │ │ ├── Pagination/
│ │ │ │ │ ├── Pagination.tsx
│ │ │ │ │ ├── PaginationNumber.tsx
│ │ │ │ │ ├── generatePagination.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── pagination.module.css
│ │ │ │ ├── Popover/
│ │ │ │ │ ├── Popover.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── popover.module.css
│ │ │ │ ├── PopoverMenu/
│ │ │ │ │ ├── PopoverMenu.tsx
│ │ │ │ │ ├── PopoverMenuItem.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── menu.module.css
│ │ │ │ ├── Radio/
│ │ │ │ │ ├── Radio.tsx
│ │ │ │ │ ├── RadioGroup.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── radio-group.module.css
│ │ │ │ │ └── radio.module.css
│ │ │ │ ├── Ripple/
│ │ │ │ │ ├── Ripple.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── ripple.module.css
│ │ │ │ ├── SegmentedButton/
│ │ │ │ │ ├── SegmentedButton.tsx
│ │ │ │ │ ├── SegmentedButtonSet.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── segmented-buttont.module.css
│ │ │ │ ├── Select/
│ │ │ │ │ ├── FilledField.tsx
│ │ │ │ │ ├── OutlinedField.tsx
│ │ │ │ │ ├── Select.tsx
│ │ │ │ │ ├── SelectOption.tsx
│ │ │ │ │ ├── TrailingIcon.tsx
│ │ │ │ │ ├── filled-field.module.css
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── outlined-field.module.css
│ │ │ │ │ ├── select.module.css
│ │ │ │ │ └── trailingIcon.module.css
│ │ │ │ ├── SideSheets/
│ │ │ │ │ ├── SideSheets.tsx
│ │ │ │ │ ├── SideSheetsAction.tsx
│ │ │ │ │ ├── SideSheetsActivator.tsx
│ │ │ │ │ ├── SideSheetsBody.tsx
│ │ │ │ │ ├── SideSheetsContent.tsx
│ │ │ │ │ ├── SideSheetsContext.tsx
│ │ │ │ │ ├── SideSheetsHeader.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── side-sheets.module.css
│ │ │ │ ├── Sliders/
│ │ │ │ │ ├── Slider.tsx
│ │ │ │ │ ├── Thumb.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── slider.module.css
│ │ │ │ ├── Slot/
│ │ │ │ │ ├── Slot.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Snackbar/
│ │ │ │ │ ├── Toast.tsx
│ │ │ │ │ ├── ToastProvider.tsx
│ │ │ │ │ ├── ToastRegion.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── toast.module.css
│ │ │ │ ├── Spacer/
│ │ │ │ │ ├── Spacer.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Swiper/
│ │ │ │ │ ├── Swiper.tsx
│ │ │ │ │ ├── SwiperItem.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── swiper.module.css
│ │ │ │ ├── Switch/
│ │ │ │ │ ├── Switch.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── switch.module.css
│ │ │ │ ├── Table/
│ │ │ │ │ ├── Table.tsx
│ │ │ │ │ ├── TableCell.tsx
│ │ │ │ │ ├── TableCheckboxCell.tsx
│ │ │ │ │ ├── TableColumnHeader.tsx
│ │ │ │ │ ├── TableHeader.tsx
│ │ │ │ │ ├── TableHeaderRow.tsx
│ │ │ │ │ ├── TableRow.tsx
│ │ │ │ │ ├── TableRowGroup.tsx
│ │ │ │ │ ├── TableSelectAllCell.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── table.module.css
│ │ │ │ ├── Tabs/
│ │ │ │ │ ├── Tab.tsx
│ │ │ │ │ ├── TabPanel.tsx
│ │ │ │ │ ├── Tabs.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── tabs.module.css
│ │ │ │ ├── Terminal/
│ │ │ │ │ ├── Terminal.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── terminal.module.css
│ │ │ │ ├── Text/
│ │ │ │ │ ├── Text.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── TextFields/
│ │ │ │ │ ├── TextField.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── text-field.module.css
│ │ │ │ ├── Tooltips/
│ │ │ │ │ ├── OverlayArrow.tsx
│ │ │ │ │ ├── Tooltip.tsx
│ │ │ │ │ ├── TooltipGroup.tsx
│ │ │ │ │ ├── TooltipInner.tsx
│ │ │ │ │ ├── TooltipTrigger.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── TopAppBar/
│ │ │ │ │ ├── TopAppBar.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── top-app-bar.module.css
│ │ │ │ └── VisuallyHidden/
│ │ │ │ ├── VisuallyHidden.tsx
│ │ │ │ ├── index.ts
│ │ │ │ └── visually-hidden.module.css
│ │ │ ├── css-module.d.ts
│ │ │ ├── hooks/
│ │ │ │ ├── index.ts
│ │ │ │ ├── mergeRefs.tsx
│ │ │ │ ├── useAttachable.ts
│ │ │ │ ├── useControllable.ts
│ │ │ │ ├── useControllableState.ts
│ │ │ │ ├── useDebounce.ts
│ │ │ │ ├── useInputState.tsx
│ │ │ │ ├── useInterval.ts
│ │ │ │ ├── useOnClickOutside.ts
│ │ │ │ ├── usePrevious.ts
│ │ │ │ └── useResizeObserver.tsx
│ │ │ ├── index.ts
│ │ │ ├── themes/
│ │ │ │ └── index.ts
│ │ │ └── utils/
│ │ │ ├── index.ts
│ │ │ └── utils.tsx
│ │ ├── tsconfig.json
│ │ └── tsconfig.rollup.json
│ └── create-actify/
│ ├── index.ts
│ └── package.json
├── pnpm-workspace.yaml
├── todo.md
├── turbo.json
└── vercel.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
title: ''
labels: ''
assignees: ''
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Additional context**
Add any other context about the problem here.
================================================
FILE: .github/ISSUE_TEMPLATE/custom.md
================================================
---
name: Custom issue template
about: Describe this issue template's purpose here.
title: ''
labels: ''
assignees: ''
---
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: ''
assignees: ''
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.
================================================
FILE: .github/workflows/docs-deploy.yml
================================================
name: Deploy Next.js SSG site to Pages
on:
# Runs on pushes targeting the default branch
push:
branches: ['main']
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: 'pages'
cancel-in-progress: false
jobs:
# Build job
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup pnpm
uses: pnpm/action-setup@v4
with:
version: 9.5.0
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'pnpm'
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Install dependencies
run: pnpm install
- name: Build Next.js
run: |
cd apps/docs
pnpm build
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./apps/docs/dist
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.next
.turbo
# Contentlayer
.contentlayer
================================================
FILE: .npmrc
================================================
auto-install-peers = true
node-linker=hoisted
================================================
FILE: .prettierrc
================================================
{
"tabWidth": 2,
"semi": false,
"printWidth": 80,
"singleQuote": true,
"trailingComma": "none",
"bracketSameLine": false
}
================================================
FILE: LICENSE.md
================================================
The MIT License (MIT)
Copyright (c) 2023 Lerte Smith
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
================================================
FILE: README.md
================================================
<p align="center">
<a href="https://actifyjs.com">
<img alt="Actify Logo" width="100" src="https://actifyjs.com/actify.svg">
</a>
</p>
<p align="center">
<a href="https://github.com/actifyjs/actify/blob/master/LICENSE.md">
<img src="https://badgen.net/github/license/actifyjs/actify?color=green" alt="License">
</a>
<img src="https://visitor-badge.laobi.icu/badge?page_id=actifyjs.actify" alt="visitors" />
</p>
---
## 🌟Overview
Welcome to Actify, an open-source React Components Library designed to accelerate your React application development. Actify leverages TypeScript, Tailwind CSS, Reat-Aria, Framer Motion, Material Design 3, and more to provide a comprehensive set of modern and customizable UI components.
## ✨ Features
- **TypeScript**: Benefit from enhanced developer experience and static typing.
- **Tailwind CSS**: Embrace a utility-first CSS framework for effortless and flexible styling.
- **React-Aria**: React Aria implements accessibility support according to the WAI-ARIA specification, published by the W3C.
- **Framer Motion**: Bring fluid animations and transitions to your components with Framer Motion.
- **Material Design 3**: Implement the latest Material Design principles for a cohesive and visually appealing interface.
## 🚀 Getting Started
### 📦 Installation
```bash
# with pnpm
pnpm add actify
# with yarn
yarn add actify
# with npm
npm install actify
```
### 💻 Usage
```jsx
import { Button } from 'actify'
export default () => {
return <Button>Hello Actify</Button>
}
```
Refer to the [documentation](https://actifyjs.com/getting-started/installation) for in-depth information on each component and their usage.
## 📚 Documentation
Explore our [documentation](https://actifyjs.com/getting-started/installation) for detailed insights, examples, and customization options for each component in the Actify library.
## 🚥 Roadmap
Our goals is convert all [Material Web](https://github.com/material-components/material-web) components to React Components, not just a React wrapped components.
| Component | Web component | React Component |
| ------------------- | ------------- | --------------- |
| Ripple | | ✅ |
| Elevation | | ✅ |
| Focus ring | | ✅ |
| Icon | | ✅ |
| Button | | ✅ |
| Icon button | | ✅ |
| Checkbox | | ✅ |
| Slider | | ✅ |
| Switch | | ✅ |
| TextField | | ✅ |
| Progress indicators | | ✅ |
| Radio | | ✅ |
| Divider | | ✅ |
| Menu | | ✅ |
| Dialog | | ✅ |
| Select | | ✅ |
| SegmentedButton | | ✅ |
| SegmentedButtonSet | | ✅ |
## 🤝 Contributing
Contributions are always welcome!
Thanks to everyone who has already contributed to `actify` !
<a href="https://github.com/actifyjs/actify/graphs/contributors"><img src="https://contributors.nn.ci/api?repo=actifyjs/actify" /></a>
## 📜 License
Actify React Components Library is licensed under the MIT License - see the [MIT licensed](./LICENSE.md) file for details..
## 🙏 Acknowledgments
- Special thanks to our contributors and the open-source community for making Actify possible.
- Highly inspired by [Vuetify](https://vuetifyjs.com) for its impactful contributions to UI design and development trends.
## 📧 Support
If you have any questions or need assistance, feel free to reach out to us at [hello@actifyjs.com](mailto:hello@actifyjs.com).
Happy coding with Actify! 🚀
================================================
FILE: apps/docs/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
# testing
/coverage
# next.js
/.next/
/out/
/dist/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
================================================
FILE: apps/docs/content/components/accordion.md
================================================
---
title: Accordion
description: Accordion display a list of high-level options that can expand/collapse to reveal more information.
---
## Usage
<usage></usage>
## Tips
`asChild` prop can use to override `Header` style and `Content` style
## Props
| Props | Type | Description | Default |
| ---------- | --------- | ---------------------------------------------------------------------------- | ----------- |
| `open` | `array` | Set which index item is open. eg. [,true] stands for the second item is open | `[]` |
| `multiple` | `boolean` | Allow multiple items to be expanded at the same time. | `undefined` |
================================================
FILE: apps/docs/content/components/app-bars/bottom-app-bar.md
================================================
---
title: Bottom app bar
description: Bottom app bars display navigation and key actions at the bottom of mobile and tablet screens
---
## Usage
<usage></usage>
================================================
FILE: apps/docs/content/components/app-bars/top-app-bar.md
================================================
---
title: Top app bars
description: The top app bar displays information and actions relating to the current screen.
---
## Usage
<usage></usage>
================================================
FILE: apps/docs/content/components/autocomplete.md
================================================
---
title: Autocomplete
description: Autocomplete component offers simple and flexible type-ahead functionality. This is useful when searching large sets of data or even dynamically requesting information from an API.
---
## Usage
<usage></usage>
================================================
FILE: apps/docs/content/components/avatar.md
================================================
---
title: Avatar
description: Avatar is a component that can be used to display a user's avatar.
---
## Usage
<usage></usage>
================================================
FILE: apps/docs/content/components/badges.md
================================================
---
title: Badge
description: Badges show notifications, counts, or status information on navigation items and icons
---
## Usage
<usage></usage>
## Props
| Props | Type | Description | Default |
| ------- | ----------------- | ------------------------- | ------- |
| `value` | `string` `number` | The content of the badge. | `null` |
| `color` | `string` | The color of the badge. | `error` |
================================================
FILE: apps/docs/content/components/before-after.md
================================================
---
title: Before After
description: Before after show a before and after image of a product.
---
## Usage
<usage></usage>
## Props
| Props | Type | Description | Default |
| --------- | ----- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| `before` | `url` | original image url | `null` |
| `after` | `url` | after image url | `null` |
| `bgImage` | `url` | after image background image | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="%23dedede" d="M0 0h8v8H0zM8 8h8v8H8z"/></svg> |
================================================
FILE: apps/docs/content/components/buttons/button.md
================================================
---
title: Button
description: Buttons have label text that describes the action that will occur if a user taps a button.
---
## Usage
<usage></usage>
> Notice! Button component under react-router Link component will cause refresh page.
- Solution 1: add onPress(e=>e.preventDefault()) to Button component
- Solution 2: put Link component under Button component
## Props
| Name | Type | Default | Description |
| ------------------- | --------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| form | `string` | — | The <form> element to associate the button with. The value of this attribute must be the id of a <form> in the same document. |
| formAction | `string` | — | The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner. |
| formEncType | `string` | — | Indicates how to encode the form data that is submitted. |
| formMethod | `string` | — | Indicates the HTTP method used to submit the form. |
| formNoValidate | `boolean` | — | Indicates that the form is not to be validated when it is submitted. |
| formTarget | `string` | — | Overrides the target attribute of the button's form owner. |
| name | `string` | — | Submitted as a pair with the button's value as part of the form data. |
| value | `string` | — | The value associated with the button's name when it's submitted with the form data. |
| isPending | `boolean` | — | Whether the button is in a pending state. This disables press and hover events while retaining focusability, and announces the pending state to screen readers. |
| isDisabled | `boolean` | — | Whether the button is disabled. |
| autoFocus | `boolean` | — | Whether the element should receive focus on render. |
| type | `button` `submit` `reset` | 'button' | The behavior of the button when used in an HTML form. |
| preventFocusOnPress | `boolean` | — | Whether to prevent focus from moving to the button when pressing it. |
| children | `React.ReactNode` | — | The children of the component. A function may be provided to alter the children based on component state. |
| className | `string` | — | The CSS className for the element. A function may be provided to compute the class based on component state. |
| style | `React.CSSProperties` | — | The inline style for the element. A function may be provided to compute the style based on component state. |
| color | `primary` `secondary` `tertiary` `error` | 'primary' | |
| variant | `elevated` `filled` `tonal` `outlined` `text` | 'filled' | |
## Events
| Name | Type | Description |
| --------------- | --------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `onPress` | `(e: PressEvent) => void` | Handler that is called when the press is released over the target. |
| `onPressStart` | `(e: PressEvent) => void` | Handler that is called when a press interaction starts. |
| `onPressEnd` | `(e: PressEvent) => void` | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressChange` | `(e: PressEvent) => void` | Handler that is called when the press state changes. |
| `onPressUp` | `(e: PressEvent) => void` | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `onFocus` | `(e: FocusEvent<Target>) => void` | Handler that is called when the element receives focus. |
| `onBlur` | `(e: FocusEvent<Target>) => void` | Handler that is called when the element loses focus. |
| `onFocusChange` | `(isFocused: boolean) => void` | Handler that is called when the element's focus status changes. |
| `onKeyDown` | `(e: KeyboardEvent) => void` | Handler that is called when a key is pressed. |
| `onKeyUp` | `(e: KeyboardEvent) => void` | Handler that is called when a key is released. |
| `onHoverStart` | `(e: HoverEvent) => void` | Handler that is called when a hover interaction starts. |
| `onHoverEnd` | `(e: HoverEvent) => void` | Handler that is called when a hover interaction ends. |
| `onHoverChange` | `(isHovering: boolean) => void` | Handler that is called when the hover state changes. |
### Layout
| Name | Type | Description |
| ------ | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `slot` | `string` `null` | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent. |
================================================
FILE: apps/docs/content/components/buttons/fab.md
================================================
---
title: Floating action buttons
description: Floating action buttons (FABs) help people take primary actions
---
## Usage
<usage></usage>
================================================
FILE: apps/docs/content/components/buttons/icon-button.md
================================================
---
title: Icon buttons
description: Icon buttons help people take minor actions with one tap
---
## Usage
<usage></usage>
================================================
FILE: apps/docs/content/components/buttons/segmented-button.md
================================================
---
title: Segmented button
description: Segmented buttons help people select options, switch views, or sort elements
---
## Usage
<usage></usage>
## Props
| Props | Type | Description | Default |
| -------- | --------- | ----------- | ------- |
| selected | `boolean` | | `false` |
================================================
FILE: apps/docs/content/components/cards.md
================================================
---
title: Cards
description: Cards display content and actions about a single subject
---
## Usage
<usage></usage>
## With Ripple
<preview code='<Card ripple>
<img
alt=""
className="w-full object-fit"
src="https://images.unsplash.com/photo-1694736301344-0a2e4b5f51c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80"
/>
<div className="block flex-grow flex-shrink p-5 text-on-surface">
<div className="font-medium mb-3">card with ripple</div>
<p>
Tempore rem numquam qui quae placeat, enim ut temporibus inventore
architecto eaque.
</p>
</div>
</Card>'></preview>
## Props
| Props | Type | Description | Default |
| ------ | ------------------- | --------------------- | ------- |
| `type` | `filled` `outlined` | The type of the Card. | null |
================================================
FILE: apps/docs/content/components/carousel.md
================================================
---
title: Carousel
description: Carousels show a collection of items that can be scrolled on and off the screen
---
## Usage
<usage></usage>
## Props
| Props | Type | Description | Default |
| ---------- | ------------------ | ----------------------------------------------------------- | ------- |
| autoPlay | `boolean` | Sets the autoplay mode for carousel | `false` |
| control | `boolean` | Show prev and next button for carousel | `false` |
| current | `number` | Sets carousel start play index | `0` |
| indicator | `boolean` | Show the indicator for carousel | `false` |
| infinite | `boolean` | Sets the infinite mode for carousel | `false` |
| interval | `number` | Sets the interval duration for autoplay mode in miliseconds | `3000` |
| `children` | `React.React.Node` | | `null` |
================================================
FILE: apps/docs/content/components/checkbox.md
================================================
---
title: Checkbox
description: Checkboxes let users select one or more items from a list, or turn an item on or off
---
## Usage
<usage></usage>
## Props
| Props | Type | Description | Default |
| ----------------- | ----------------------------------------- | ---------------------------------------- | ------- |
| `color` | `primary` `secondary` `tertiaray` `error` | The color of the checkbox | `null` |
| `value` | `boolean` | Checkbox value | `null` |
| `isDisabled` | `boolean` | Whether the checkbox is disabled | `false` |
| `isSelected` | `boolean` | whether the checkbox is selected | `false` |
| `isIndeterminate` | `boolean` | whether the item is toggled on or off. | `false` |
| `defaultSelected` | `boolean` | whether the checkbox is default selected | `false` |
## Events
| Events | Description |
| ---------- | ------------------------ |
| `onChange` | fired when value changed |
================================================
FILE: apps/docs/content/components/chips.md
================================================
---
title: Chips
description: Chips help people enter information, make selections, filter content, or trigger actions
---
## Usage
<usage></usage>
## Props
| Prop | Type | Description | Default |
| -------- | -------- | ---------------------- | ------- |
| `lable` | `string` | The label of the chip | `null` |
| `type` | `string` | The type of the chip | `null` |
| `href` | `string` | The href of the chip | `null` |
| `target` | `string` | The target of the chip | `null` |
================================================
FILE: apps/docs/content/components/date-pickers.md
================================================
---
title: Date pickers
description: Date pickers let people select a date, or a range of dates
---
## Usage
<usage></usage>
## Props
| Props | Type | Description | Default |
| ---------------- | --------- | ---------------------------- | ------------ |
| `asSingle` | `boolean` | render as single date picker | `false` |
| `useRange` | `boolean` | use range mode | `true` |
| `placeholder` | `string` | placeholder text | `null` |
| `separator` | `string` | separator between range date | `~` |
| `showShortcuts` | `boolean` | show left shortcuts date | `false` |
| `showFooter` | `boolean` | show footer actions | `false` |
| `displayFormat` | `string` | display format of date | `DD/MM/YYYY` |
| `readOnly` | `boolean` | readonly mode | `false` |
| `disabled` | `boolean` | disabled mode | `false` |
| `inputClassName` | `string` | input class name | `null` |
| `startFrom` | `Date` | start date for range mode | `new Date()` |
| `minDate` | `Date` | min date | `null` |
| `maxDate` | `Date` | max date | `null` |
================================================
FILE: apps/docs/content/components/dialogs.md
================================================
---
title: Dialogs
description: Dialogs provide important prompts in a user flow
---
## Usage
<usage></usage>
================================================
FILE: apps/docs/content/components/divider.md
================================================
---
title: Divider
description: Dividers are thin lines that group content in lists or other containers
---
## Usage
<usage></usage>
## Props
| Name | Type | Description | Default |
| ------------ | --------- | ------------------------------------------------------- | ----------- |
| `inset` | `boolean` | add 16px to padding-inline-start and padding-inline-end | `undefined` |
| `insetStart` | `boolean` | add 16px to padding-inline-start | `undefined` |
| `insetEnd` | `boolean` | add 16px to padding-inline-end | `undefined` |
================================================
FILE: apps/docs/content/components/focus-ring.md
================================================
---
title: Focus Ring
---
## Usage
<usage></usage>
## Props
| Name | Type | Description | Default |
| --------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------- | --------- |
| type | `outward` `inward` | The way the focus ring is animated and positioned. | `outward` |
| as | `keyof HTMLElementTagNameMap` `React.ElementType` | Allows for more flexibility when supporting different elements that can act as a FocusRing. | `span` |
| style | `React.CSSProperties` | — | — |
| className | `string` | — | — |
================================================
FILE: apps/docs/content/components/label.md
================================================
---
title: Label
description: Use original html label tag, but prevented text selection when double clicked
---
## Usage with Checkbox
<preview code='<Label className="flex items-center">with checkbox <Checkbox aria-label="with checkbox" /></Label>'></preview>
## Usage with Raido
<preview code='<RadioGroup label="with radio"><Radio value="actify">actify</Radio></RadioGroup>'>
</preview>
================================================
FILE: apps/docs/content/components/lists.md
================================================
---
title: Lists
description: Lists are continuous, vertical indexes of text and images
---
## Usage
<usage></usage>
## Props
| Name | Type | Description | Default |
| ------------ | ----------------- | --------------------------------------------------------------------------------------------------------------------------- | ------- |
| `transition` | `Object` | Item hover trantisition is framer motion <a target="_blank" href="https://www.framer.com/motion/transition/">transition</a> | `null` |
| `children` | `React.ReactNode` | children | `null` |
## Child
| Name | Description |
| --------- | ----------- |
| ListItem | List item |
| ListGroup | List group |
================================================
FILE: apps/docs/content/components/menus.md
================================================
---
title: Menus
description: Menus display a list of choices on a temporary surface
---
## Usage
<usage></usage>
## Props
### MenuButton
| Name | Type | Description | Default |
| ------------------- | ------------------- | --------------------------------------------------------------------------- | ------- |
| `label` | `React.ReactNode` | The text to show on the menu button. | — |
| `popoverProps` | `PopoverProps` | Props that allow changing the popover placement, flip behavior, style etc. | — |
### MenuItem
| Name | Type | Description | Default |
| ------------------- | --------------------- | --------------------------------------------------------------------------------- | ------- |
| `textValue` | `string` | A string representation of the item's contents, used for features like typeahead. | — |
| `isDisabled` | `boolean` | Whether the item is disabled. | `false` |
| `className` | `string` | — | — |
| `style` | `React.CSSProperties` | — | — |
## Events
### MenuItem
| Name | Type | Description |
| ----------------- | --------------------------------- | -------------------------------------------------------- |
| `onAction` | `() => void` | Handler that is called when the item is selected. |
| `onHoverChange` | `(isHovering: boolean) => void` | Handler that is called when the hover state changes. |
| `onHoverStart` | `(e: HoverEvent) => void` | Handler that is called when a hover interaction starts. |
| `onHoverEnd` | `(e: HoverEvent) => void` | Handler that is called when a hover interaction ends. |
================================================
FILE: apps/docs/content/components/navigation/navigation-bar.md
================================================
---
title: Navigation bar
description: Navigation bars let people switch between UI views on smaller devices
---
## Usage
<usage></usage>
================================================
FILE: apps/docs/content/components/navigation/navigation-drawer.md
================================================
---
title: Navigation drawer
description: Navigation drawers let people switch between UI views on larger devices
---
## Usage
<usage></usage>
## Props
| Props | Type | Description | Default |
| ----------- | ----------------------------- | ------------------------------------------ | ------- |
| `open` | `boolean` | Whether the drawer is open or not | `false` |
| `placement` | `top` `right` `bottom` `left` | Where the drawer should be placed | `left` |
| `asChild` | `boolean` | set true pass any element as the activator | `false` |
================================================
FILE: apps/docs/content/components/navigation/navigation-rail.md
================================================
---
title: Navigation rail
description: Navigation rails let people switch between UI views on mid-sized devices
---
## Usage
<usage></usage>
================================================
FILE: apps/docs/content/components/pagination.md
================================================
---
title: Pagination
description: Pagination is a component that allows users to navigate between multiple pages.
---
## Usage
<usage></usage>
## Props
| Props | Type | Description | Default |
| ------------- | -------- | ------------ | ----------- |
| `currentPage` | `number` | current page | `undefined` |
| `totalPages` | `number` | total page | `undefined` |
## Events
| Events | Description |
| -------------- | ------------------------------- |
| `onPageChange` | fired when current page changed |
================================================
FILE: apps/docs/content/components/progress/circular-progress.md
================================================
---
title: CircularProgress
description: Circular progress is a visual indicator that communicates the status of a process.
---
## Usage
<usage></usage>
## Props
| Name | Type | Description | Default |
| ----------------- | ----------------------------------------- | ----------------------------------------------- | ----------- |
| `size` | `xs` `sm` `md` `lg` `xl` `2xl` | The size of the circle | `sm` |
| `value` | `number` | set the value of progress 0-100 | `undefined` |
| `color` | `primary` `secondary` `tertiaray` `error` | set the color of progress circle | `primary` |
| `isIndeterminate` | `boolean` | whether determinate circular progress indicator | `false` |
================================================
FILE: apps/docs/content/components/progress/linear-progress.md
================================================
---
title: LinearProgress
description: Linear progress indicators visualize the linear progress of a task, where the progress is displayed as a bar.
---
## Usage
<usage></usage>
## Props
| Name | Type | Description | Default |
| ----------------- | ----------------------------------------- | --------------------------------------------- | ----------- |
| `value` | `number` | set the value of progress 0-100 | `undefined` |
| `color` | `primary` `secondary` `tertiaray` `error` | set the color of progress bar | `primary` |
| `isIndeterminate` | `boolean` | whether determinate linear progress indicator | `false` |
================================================
FILE: apps/docs/content/components/radio.md
================================================
---
title: Radio button
description: Radio buttons let people select one option from a set of options
---
## Usage
<usage></usage>
## Props
| Props | Type | Description | Default |
| ------------- | ----------------------- | ----------------------------------------------------------------- | ----------- |
| `value` | `string` | The value of the radio button, used when submitting an HTML form. | `null` |
| `children` | `ReactNode` | The label for the Radio. Accepts any renderable node. | `undefined` |
| `isDisabled` | `boolean` | Whether the radio button is disabled or not. | `undefined` |
| `orientation` | `horizontal` `vertical` | The axis the Radio should align with. | `vertical` |
================================================
FILE: apps/docs/content/components/ripple.md
================================================
---
title: Ripple
description: Ripples are state layers used to communicate the status of a component or interactive element.
---
<usage></usage>
================================================
FILE: apps/docs/content/components/select.md
================================================
---
title: Select
description: Select fields components are used for collecting user provided information from a list of options.
---
## Usage
<usage></usage>
## Props
| Name | Type | Default | Description |
| --------------------- | --------------------- | -------------- | ------------------------------------------------------------------------------------------------------------- |
| `label` | `React.ReactNode` | — | The content to display as the label. |
| `selectedKey` | `Key` | — | The currently selected key in the collection (controlled). |
| `disabledKeys` | `Iterable<Key>` | — | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
| `isOpen` | `boolean` | `false` | Sets the open state of the menu. |
| `isDisabled` | `boolean` | `false` | Whether the input is disabled. |
| `isRequired` | `boolean` | `false` | Whether user input is required on the input before form submission. |
| `isInvalid` | `boolean` | `false` | Whether the input value is invalid. |
| `validationBehavior` | `aria` `native` | `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. |
| `validate` | `(value: Key) => ValidationError` `true` | — | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead. |
| `variant` | `filled` `outlined` | `filled` | The type of the Select. |
| `popoverProps` | `PopoverProps` | — | Props that allow changing the popover placement, flip behavior, style etc. |
| `className` | `string` | — | — |
| `style` | `React.CSSProperties` | — | — |
## Events
| Name | Type | Description |
| ------------------- | ------------------------------- | ----------------------------------------------------------------- |
| `onSelectionChange` | `(key: Key) => void` | Handler that is called when the selection changes. |
| `onBlur` | `(e: React.FocusEvent) => void` | Handler that is called when the element loses focus. |
| `onFocus` | `(e: React.FocusEvent) => void` | Handler that is called when the element receives focus. |
| `onFocusChange` | `(isFocused: boolean) => void` | Handler that is called when the element's focus status changes. |
| `onOpenChange` | `(isOpened: boolean) => void` | Method that is called when the open state of the menu changes. |
================================================
FILE: apps/docs/content/components/sheets/bottom-sheets.md
================================================
---
title: Bottom sheets
description: Bottom sheets show secondary content anchored to the bottom of the screen
---
## Usage
<usage></usage>
## Activator Props
| Props | Type | Description | Default |
| --------- | --------- | ------------------------------------------ | ------- |
| `asChild` | `boolean` | set true pass any element as the activator | `false` |
| `open` | `boolean` | Whether the sheets is open or not | `false` |
================================================
FILE: apps/docs/content/components/sheets/side-sheets.md
================================================
---
title: Side sheets
description: Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow. They are typically anchored on the right edge of larger screens like tablets and desktops.
---
## Usage
<usage></usage>
## Props
| Props | Type | Description | Default |
| --------- | --------- | ---------------------------- | ------- |
| `divider` | `boolean` | show divider in body content | `false` |
## Activator Props
| Props | Type | Description | Default |
| --------- | --------- | ------------------------------------------ | ------- |
| `asChild` | `boolean` | set true pass any element as the activator | `false` |
| `open` | `boolean` | Whether the sheets is open or not | `false` |
================================================
FILE: apps/docs/content/components/sliders.md
================================================
---
title: Sliders
description: Sliders let users make selections from a range of values
---
## Usage
<usage></usage>
## Props
| Props | Type | Description | Default |
| -------------- | ----------------------------------------- | -------------------- | ----------- |
| `color` | `primary` `secondary` `tertiaray` `error` | color | `primary` |
| `label` | `string` | label | `undefined` |
| `value` | `number` `number[]` | slider value | `undefined` |
| `labeled ` | `boolean` | show label on thumb | `undefined` |
| `isDisabled` | `boolean` | disable slider | `undefined` |
| `defaultValue` | `number` `number[]` | default slider value | `undefined` |
## Events
| Events | Description |
| ---------- | ------------------------ |
| `onChange` | fired when value changed |
================================================
FILE: apps/docs/content/components/snackbar.md
================================================
---
title: Snackbar
description: Snackbars show short updates about app processes at the bottom of the screen
---
## Usage
<usage></usage>
================================================
FILE: apps/docs/content/components/swiper.md
================================================
---
title: Swiper
description: Swiper is simple banner slider with a lot of features.
---
## Usage
<usage></usage>
================================================
FILE: apps/docs/content/components/switch.md
================================================
---
title: Switch
description: Switches toggle the state of an item on or off
---
## Usage
<usage></usage>
## Props
| Name | Type | Default | Description |
| ----------------- | ------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `icons` | `boolean` | — | Show x or √ icon |
| `color` | `primary` `secondary` `tertiaray` `error` | — | The color of the switch |
| `defaultSelected` | `boolean` | — | Whether the Switch should be selected (uncontrolled). |
| `isSelected` | `boolean` | — | Whether the Switch should be selected (controlled). |
| `isDisabled` | `boolean` | — | Whether the input is disabled. |
| `isReadOnly` | `boolean` | — | Whether the input can be selected but not changed by the user. |
| `autoFocus` | `boolean` | — | Whether the element should receive focus on render. |
| `name` | `string` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `children` | `string` `React.ReactNode` | — | The children of the component. A function may be provided to alter the children based on component state. |
| `className` | `string` `(values: SwitchRenderProps & { defaultClassName: string \| undefined}) => string` | — | The CSS className for the element. A function may be provided to compute the class based on component state. |
| `style` | `React.CSSProperties` | — | The inline style for the element. A function may be provided to compute the style based on component state. |
## Events
| Name | Type | Description |
| --------------- | --------------------------------- | ----------------------------------------------------------------- |
| `onChange` | `(isSelected: boolean) => void` | Handler that is called when the Switch's selection state changes. |
| `onFocus` | `(e: FocusEvent<Target>) => void` | Handler that is called when the element receives focus. |
| `onBlur` | `(e: FocusEvent<Target>) => void` | Handler that is called when the element loses focus. |
| `onFocusChange` | `(isFocused: boolean) => void` | Handler that is called when the element's focus status changes. |
| `onKeyDown` | `(e: KeyboardEvent) => void` | Handler that is called when a key is pressed. |
| `onKeyUp` | `(e: KeyboardEvent) => void` | Handler that is called when a key is released. |
| `onHoverStart` | `(e: HoverEvent) => void` | Handler that is called when a hover interaction starts. |
| `onHoverEnd` | `(e: HoverEvent) => void` | Handler that is called when a hover interaction ends. |
| `onHoverChange` | `(isHovering: boolean) => void` | Handler that is called when the hover state changes. |
================================================
FILE: apps/docs/content/components/table.md
================================================
---
title: Table
description: Table is a component that allows you to display tabular data.
---
## Usage
<usage></usage>
## Props
### Table
| Name | Type | Default | Description |
| ---------------------- | ------------------------ | ----------- | ------------------------------------------------------------------------------------------------------------ |
| children | `ReactNode` | — | The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. |
| selectionBehavior | `SelectionBehavior` | 'toggle' | How multiple selection should behave in the collection. |
| disabledBehavior | `DisabledBehavior` | 'selection' | Whether disabledKeys applies to all interactions, or only selection. |
| dragAndDropHooks | `DragAndDropHooks` | — | The drag and drop hooks returned by useDragAndDrop used to enable drag and drop behavior for the Table. |
| disabledKeys | `Iterable<Key>` | — | A list of row keys to disable. |
| selectionMode | `SelectionMode` | — | The type of selection that is allowed in the collection. |
| disallowEmptySelection | `boolean` | — | Whether the collection allows empty selection. |
| selectedKeys | `'all' \| Iterable<Key>` | — | The currently selected keys in the collection (controlled). |
| defaultSelectedKeys | `'all' \| Iterable<Key>` | — | The initial selected keys in the collection (uncontrolled). |
| sortDescriptor | `SortDescriptor` | — | The current sorted column and direction. |
| className | `string` | — | The CSS className for the element. A function may be provided to compute the class based on component state. |
| style | `React.CSSProperties` | — | The inline style for the element. A function may be provided to compute the style based on component state. |
### Events
| Name | Type | Description |
| ----------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| onRowAction | `(key: Key) => void` | Handler that is called when a user performs an action on the row. |
| onSelectionChange | `(keys: Selection) => void` | Handler that is called when the selection changes. |
| onSortChange | `(descriptor: SortDescriptor) => any` | Handler that is called when the sorted column or direction changes. |
| onScroll | `(e: UIEvent<Element>) => void` | Handler that is called when a user scrolls. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event). |
### TableHeader
| Name | Type | Description |
| ------------ | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| columns | `object[]` | A list of table columns. |
| children | `ReactNode \| (item: object) => ReactElement` | A list of Column(s) or a function. If the latter, a list of columns must be provided using the columns prop. |
| dependencies | `any[]` | Values that should invalidate the column cache when using dynamic collections. |
| className | `string` | The CSS className for the element. A function may be provided to compute the class based on component state. |
| style | `React.CSSProperties` | The inline style for the element. A function may be provided to compute the style based on component state. |
================================================
FILE: apps/docs/content/components/tabs.md
================================================
---
title: Tabs
description: Tabs organize content across different screens and views
---
## Usage
<usage></usage>
## Props
| Props | Type | Description | Default |
| -------------------- | ----------------------- | --------------------------- | ------------ |
| `orientation` | `horizontal` `vertical` | The orientation of the tabs | `horizontal` |
| `keyboardActivation` | `automatic` `manual` | keyboard activation | `automatic` |
| `defaultSelectedKey` | `string` \| `number` | default selected key | `undefined` |
## Events
| Events | Description |
| ------------------- | --------------------------- |
| `onSelectionChange` | fired when selected changed |
================================================
FILE: apps/docs/content/components/terminal.md
================================================
---
title: Terminal
description: Tabs organize content across different screens and views
---
## Usage
<usage></usage>
## Props
| Props | Type | Description | Default |
| ----------- | ----------------- | -------------- | ------------------- |
| `title` | `string` | terminal title | `Terminal` |
| `lastlogin` | `Date` | last login | `new Date()` |
| `hostname` | `string` | hostname | `Lerte-MacBook-Pro` |
| `username` | `string` | username | `lerte` |
| `children` | `React.ReactNode` | | `null` |
================================================
FILE: apps/docs/content/components/text-fields.md
================================================
---
title: Text fields
description: Text fields let users enter text into a UI
---
## Usage
<usage></usage>
## Props
### TextField
| Name | Type | Default | Description |
| -------------------- | ----------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `label` | `string` | — | Input label |
| `isInvalid` | `boolean` | — | Whether the value is invalid. |
| `isDisabled` | `boolean` | — | Whether the input is disabled. |
| `isReadOnly` | `boolean` | — | Whether the input can be selected but not changed by the user. |
| `isRequired` | `boolean` | — | Whether user input is required on the input before form submission. |
| `validate` | `(value: string) => ValidationError \| true \| null \| undefined` | — | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead. |
| `autoFocus` | `boolean` | — | Whether the element should receive focus on render. |
| `value` | `string` | — | The current value (controlled). |
| `defaultValue` | `string` | — | The default value (uncontrolled). |
| `autoComplete` | `string` | — | Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). |
| `maxLength` | `number` | — | The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength). |
| `minLength` | `number` | — | The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength). |
| `pattern` | `string` | — | Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern). |
| `type` | `text` `textarea` `search` `url` `tel` `email` `password` `string & {}` | 'text' | The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). |
| `inputMode` | `none` `text` `tel` `url` `email` `numeric` `decimal` `search` | — | Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute). |
| `name` | `string` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `validationBehavior` | `native` `aria` | 'native' | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. |
| `children` | `React.ReactNode` | — | The children of the component. A function may be provided to alter the children based on component state. |
| `className` | `string` | — | The CSS className for the element. A function may be provided to compute the class based on component state. |
| `style` | `React.CSSProperties` | — | The inline style for the element. A function may be provided to compute the style based on component state. |
| `variant` | `filled` `outlined` | 'filled' | |
| `suffixText` | `string` | — | |
| `prefixText` | `string` | — | |
| `leadingIcon` | `React.ReactNode` | — | |
| `trailingIcon` | `React.ReactNode` | — | |
## Events
| Name | Type | Description |
| -------------------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `onFocus` | `(e: FocusEvent<T>) => void` | Handler that is called when the element receives focus. |
| `onBlur` | `(e: FocusEvent<T>) => void` | Handler that is called when the element loses focus. |
| `onFocusChange` | `(isFocused: boolean) => void` | Handler that is called when the element's focus status changes. |
| `onKeyUp` | `(e: KeyboardEvent) => void` | Handler that is called when a key is released. |
| `onChange` | `(value: T) => void` | Handler that is called when the value changes. |
| `onCopy` | `ClipboardEventHandler<HTMLInputElement>` | Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/copy_event). |
| `onPaste` | `ClipboardEventHandler<HTMLInputElement>` | Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/paste_event). |
| `onCompositionStart` | `CompositionEventHandler<HTMLInputElement>` | Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event). |
| `onSelect` | `ReactEventHandler<HTMLInputElement>` | Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event). |
| `onBeforeInput` | `FormEventHandler<HTMLInputElement>` | Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/beforeinput_event). |
| `onInput` | `FormEventHandler<HTMLInputElement>` | Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event). |
================================================
FILE: apps/docs/content/components/time-pickers.md
================================================
---
title: Time pickers
description: Time pickers help users select and set a specific time
---
## Usage
<usage></usage>
================================================
FILE: apps/docs/content/components/tooltips.md
================================================
---
title: Tooltips
description: Tooltips display brief labels or messages
---
## Usage
<usage></usage>
## Props
### TooltipTrigger
| Name | Type | Default | Description |
| ----------- | ----------- | ------- | ------------------------------------------------------------------------------- |
| children | `ReactNode` | — | |
| isDisabled | `boolean` | — | Whether the tooltip should be disabled, independent from the trigger. |
| delay | `number` | 1500 | The delay time for the tooltip to show up. |
| closeDelay | `number` | 500 | The delay time for the tooltip to close. |
| trigger | `focus` | — | By default, opens for both focus and hover. Can be made to open only for focus. |
| isOpen | `boolean` | 12 | Whether the overlay is open by default (controlled). |
| defaultOpen | `boolean` | 0 | Whether the overlay is open by default (uncontrolled). |
### Tooltip
| Name | Type | Default | Description |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| triggerRef | `RefObject<Element \| null>` | — | The ref for the element which the tooltip positions itself with respect to. When used within a TooltipTrigger this is set automatically. It is only required when used standalone. |
| isEntering | `boolean` | — | Whether the tooltip is currently performing an entry animation. |
| isExiting | `boolean` | — | Whether the tooltip is currently performing an exit animation. |
| UNSTABLE_portalContainer | `Element` | document.body | The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to. |
| placement | `Placement` | 'top' | The placement of the tooltip with respect to the trigger. |
| containerPadding | `number` | 12 | The placement padding that should be applied between the element and its surrounding container. |
| offset | `number` | 0 | The additional offset applied along the main axis between the element and its anchor element. |
| crossOffset | `number` | 0 | The additional offset applied along the cross axis between the element and its anchor element. |
| shouldFlip | `boolean` | true | Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely. |
| isOpen | `boolean` | — | Whether the element is rendered. |
| arrowBoundaryOffset | `number` | 0 | The minimum distance the arrow's edge should be from the edge of the overlay element. |
| defaultOpen | `boolean` | — | Whether the overlay is open by default (uncontrolled). |
| children | `ReactNode \| (values: TooltipRenderProps & { defaultChildren: ReactNode \| undefined }) => ReactNode` | — | The children of the component. A function may be provided to alter the children based on component state. |
| className | `string \| (values: TooltipRenderProps & { defaultClassName: string \| undefined}) => string` | — | The CSS className for the element. A function may be provided to compute the class based on component state. |
| style | `CSSProperties \| (values: TooltipRenderProps & {defaultStyle: CSSProperties}) => CSSProperties \| undefined` | — | The inline style for the element. A function may be provided to compute the style based on component state. |
================================================
FILE: apps/docs/content/getting-started/icons.md
================================================
---
title: Icon
---
> Icons are based on <a href="https://fonts.google.com/icons" target="_blank">Material Icons</a>
<icon></icon>
================================================
FILE: apps/docs/content/getting-started/installation.md
================================================
---
title: Installation
---
## Prerequisites
> Actify is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - <a href="https://tailwindcss.com/docs/installation/framework-guides" target="_blank">Tailwind CSS Installation Guide</a>.
## Install
<tabs language="shell" items='[{"label":"pnpm","icon":"pnpm","content":"pnpm add actify"},{"label":"yarn","icon":"yarn","content":"yarn add actify"},{"label":"npm","icon":"npm","content":"npm i actify"}]'>
</tabs>
## app.css
```css
@import 'tailwindcss';
:root {
--md-sys-color-background: #18130b;
--md-sys-color-on-background: #ede1d3;
--md-sys-color-surface: #18130b;
--md-sys-color-surface-dim: #18130b;
--md-sys-color-surface-bright: #3f382f;
--md-sys-color-surface-container-lowest: #120d06;
--md-sys-color-surface-container-low: #201b12;
--md-sys-color-surface-container: #251f16;
--md-sys-color-surface-container-high: #2f2920;
--md-sys-color-surface-container-highest: #3b342a;
--md-sys-color-on-surface: #ede1d3;
--md-sys-color-surface-variant: #504534;
--md-sys-color-on-surface-variant: #d5c4ae;
--md-sys-color-inverse-surface: #ede1d3;
--md-sys-color-inverse-on-surface: #362f26;
--md-sys-color-outline: #9d8f7b;
--md-sys-color-outline-variant: #504534;
--md-sys-color-shadow: #000000;
--md-sys-color-scrim: #000000;
--md-sys-color-surface-tint: #ffba3e;
--md-sys-color-primary: #ffc971;
--md-sys-color-on-primary: #432c00;
--md-sys-color-primary-container: #ecaa2e;
--md-sys-color-on-primary-container: #614100;
--md-sys-color-inverse-primary: #7f5700;
--md-sys-color-secondary: #e6c188;
--md-sys-color-on-secondary: #432c02;
--md-sys-color-secondary-container: #5e4518;
--md-sys-color-on-secondary-container: #d7b37c;
--md-sys-color-tertiary: #c7dc64;
--md-sys-color-on-tertiary: #2c3400;
--md-sys-color-tertiary-container: #acc04b;
--md-sys-color-on-tertiary-container: #414d00;
--md-sys-color-error: #ffb4ab;
--md-sys-color-on-error: #690005;
--md-sys-color-error-container: #93000a;
--md-sys-color-on-error-container: #ffdad6;
}
@theme {
--color-background: var(--md-sys-color-background);
--color-on-background: var(--md-sys-color-on-background);
--color-surface: var(--md-sys-color-surface);
--color-surface-dim: var(--md-sys-color-surface-dim);
--color-surface-bright: var(--md-sys-color-surface-bright);
--color-surface-container-lowest: var(
--md-sys-color-surface-container-lowest
);
--color-surface-container-low: var(--md-sys-color-surface-container-low);
--color-surface-container: var(--md-sys-color-surface-container);
--color-surface-container-high: var(--md-sys-color-surface-container-high);
--color-surface-container-highest: var(
--md-sys-color-surface-container-highest
);
--color-on-surface: var(--md-sys-color-on-surface);
--color-surface-variant: var(--md-sys-color-surface-variant);
--color-on-surface-variant: var(--md-sys-color-on-surface-variant);
--color-inverse-surface: var(--md-sys-color-inverse-surface);
--color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
--color-outline: var(--md-sys-color-outline);
--color-outline-variant: var(--md-sys-color-outline-variant);
--color-shadow: var(--md-sys-color-shadow);
--color-scrim: var(--md-sys-color-scrim);
--color-surface-tint: var(--md-sys-color-surface-tint);
--color-primary: var(--md-sys-color-primary);
--color-on-primary: var(--md-sys-color-on-primary);
--color-primary-container: var(--md-sys-color-primary-container);
--color-on-primary-container: var(--md-sys-color-on-primary-container);
--color-inverse-primary: var(--md-sys-color-inverse-primary);
--color-secondary: var(--md-sys-color-secondary);
--color-on-secondary: var(--md-sys-color-on-secondary);
--color-secondary-container: var(--md-sys-color-secondary-container);
--color-on-secondary-container: var(--md-sys-color-on-secondary-container);
--color-tertiary: var(--md-sys-color-tertiary);
--color-on-tertiary: var(--md-sys-color-on-tertiary);
--color-tertiary-container: var(--md-sys-color-tertiary-container);
--color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
--color-error: var(--md-sys-color-error);
--color-on-error: var(--md-sys-color-on-error);
--color-error-container: var(--md-sys-color-error-container);
--color-on-error-container: var(--md-sys-color-on-error-container);
}
```
## Example
```jsx
import { Button } from 'actify'
export default () => {
return <Button>Hello Actify</Button>
}
```
================================================
FILE: apps/docs/content/getting-started/theme.md
================================================
---
title: Theme
---
<theme></theme>
================================================
FILE: apps/docs/content/getting-started/why-actify.md
================================================
---
title: Why Actify
---
## What is Actify?
Actify is an open source react component library written in Vite + React + Tailwind CSS based on Google's [Material Design 3](https://m3.material.io/). Highly inspired by [Vuetify](https://www.vuetifyjs.com). You can use it for write react pages.
## Getting started
For a complete list of installation options please navigate to the [Installation page](/getting-started/installation)
## Why Actify?
Actify is a powerful React Component Library built from the ground up to be easy to learn and rewarding to master. Our collection of UI components maintain a consistent style throughout your application with enough customization options to meet any use-case.
## It’s free
Actify is an Open Source project available for free under the [MIT licensed](http://opensource.org/licenses/MIT)
. Additionally, Actify’s source code is available on GitHub, allowing developers to modify and contribute to its development if they choose to do so.
================================================
FILE: apps/docs/next.config.mjs
================================================
/** @type {import('next').NextConfig} */
const nextConfig = {
distDir: 'dist',
output: 'export'
}
export default nextConfig
================================================
FILE: apps/docs/package.json
================================================
{
"name": "docs",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@docsearch/react": "^3.9.0",
"@material/material-color-utilities": "^0.3.0",
"actify": "workspace:*",
"codesandbox": "^2.2.3",
"date-fns": "^3.6.0",
"gray-matter": "^4.0.3",
"next": "^15.1.0",
"next-themes": "^0.4.3",
"react": "catalog:",
"react-dom": "catalog:",
"react-markdown": "^9.0.1",
"rehype-autolink-headings": "^7.1.0",
"rehype-raw": "^7.0.0",
"rehype-slug": "^6.0.0",
"remark-gfm": "^4.0.0",
"shiki": "^1.6.1",
"sonner": "^1.7.0"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.1.4",
"@tailwindcss/typography": "^0.5.16",
"@types/node": "^20.12.12",
"@types/react": "catalog:",
"@types/react-dom": "catalog:",
"clsx": "^2.1.1",
"postcss": "^8.5.3",
"react-live": "^4.1.6",
"tailwind-merge": "^2.5.4",
"tailwind-variants": "^0.2.1",
"tailwindcss": "^4.1.4",
"typescript": "^5.4.5"
}
}
================================================
FILE: apps/docs/postcss.config.mjs
================================================
const config = {
plugins: {
'@tailwindcss/postcss': {}
}
}
export default config
================================================
FILE: apps/docs/src/app/(docs)/[...slug]/page.tsx
================================================
import { getAllDocSlugs, getDocData } from '@/lib/doc'
import Markdown from '@/components/Markdown'
import TableOfContents from '@/components/TableOfContents'
import { getFileRaw } from '@/lib/raw'
type PageProps = {
params: Promise<{ slug: string[] }>
}
export const generateMetadata = async (props: PageProps) => {
const params = await props.params
const { slug } = params
const docs = getDocData(slug)
return {
title: docs?.title,
description: docs?.description
}
}
export async function generateStaticParams() {
const slugs = getAllDocSlugs()
return slugs
}
export default async function PageLayout(props: PageProps) {
const params = await props.params
const { slug } = params
const docs = getDocData(slug)
const filepath = slug.join('/').replace('components/', '')
const content = await getFileRaw(`./src/usages/${filepath}.tsx`)
return (
<article className="prose dark:prose-invert text-sm sm:text-base md:text-lg mb-4 max-w-full prose-pre:p-0 prose-a:no-underline">
<Markdown docs={docs} usage={{ component: filepath, content }} />
<TableOfContents markdown={docs.content} />
</article>
)
}
================================================
FILE: apps/docs/src/app/(docs)/layout.tsx
================================================
'use client'
import Aside from '@/components/Aside'
import EditOnGitHub from '@/components/EditOnGitHub'
import { tv } from 'tailwind-variants'
import { usePathname } from 'next/navigation'
const base = tv({
base: [
'flex',
'flex-col',
'bg-surface',
'text-on-surface',
'pl-0',
'md:pl-60',
'col-end-3',
'col-start-1'
]
})
export default function DocLayout({ children }: { children: React.ReactNode }) {
const pathname = usePathname()
return (
<>
<Aside />
<main className={base()}>
<div className="p-4 lg:pr-64 flex flex-col">{children}</div>
<div className="w-fit pl-2 pb-2">
<EditOnGitHub pathname={pathname} />
</div>
</main>
</>
)
}
================================================
FILE: apps/docs/src/app/app.css
================================================
@import 'tailwindcss';
@plugin "@tailwindcss/typography";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
html {
scroll-behavior: smooth;
}
:root,
:host {
--md-sys-color-background: #fff8f3;
--md-sys-color-on-background: #201b12;
--md-sys-color-surface: #fff8f3;
--md-sys-color-surface-dim: #e4d8cb;
--md-sys-color-surface-bright: #fff8f3;
--md-sys-color-surface-container-lowest: #ffffff;
--md-sys-color-surface-container-low: #fef2e4;
--md-sys-color-surface-container: #f8ecde;
--md-sys-color-surface-container-high: #f3e6d8;
--md-sys-color-surface-container-highest: #ede1d3;
--md-sys-color-on-surface: #201b12;
--md-sys-color-surface-variant: #f2e0c9;
--md-sys-color-on-surface-variant: #504534;
--md-sys-color-inverse-surface: #362f26;
--md-sys-color-inverse-on-surface: #fbefe1;
--md-sys-color-outline: #837562;
--md-sys-color-outline-variant: #d5c4ae;
--md-sys-color-shadow: #000000;
--md-sys-color-scrim: #000000;
--md-sys-color-surface-tint: #7f5700;
--md-sys-color-primary: #7f5700;
--md-sys-color-on-primary: #ffffff;
--md-sys-color-primary-container: #ecaa2e;
--md-sys-color-on-primary-container: #614100;
--md-sys-color-inverse-primary: #ffba3e;
--md-sys-color-secondary: #765a2b;
--md-sys-color-on-secondary: #ffffff;
--md-sys-color-secondary-container: #fed79d;
--md-sys-color-on-secondary-container: #785c2d;
--md-sys-color-tertiary: #566500;
--md-sys-color-on-tertiary: #ffffff;
--md-sys-color-tertiary-container: #acc04b;
--md-sys-color-on-tertiary-container: #414d00;
--md-sys-color-error: #ba1a1a;
--md-sys-color-on-error: #ffffff;
--md-sys-color-error-container: #ffdad6;
--md-sys-color-on-error-container: #93000a;
}
[data-theme='dark'] {
--md-sys-color-background: #18130b;
--md-sys-color-on-background: #ede1d3;
--md-sys-color-surface: #18130b;
--md-sys-color-surface-dim: #18130b;
--md-sys-color-surface-bright: #3f382f;
--md-sys-color-surface-container-lowest: #120d06;
--md-sys-color-surface-container-low: #201b12;
--md-sys-color-surface-container: #251f16;
--md-sys-color-surface-container-high: #2f2920;
--md-sys-color-surface-container-highest: #3b342a;
--md-sys-color-on-surface: #ede1d3;
--md-sys-color-surface-variant: #504534;
--md-sys-color-on-surface-variant: #d5c4ae;
--md-sys-color-inverse-surface: #ede1d3;
--md-sys-color-inverse-on-surface: #362f26;
--md-sys-color-outline: #9d8f7b;
--md-sys-color-outline-variant: #504534;
--md-sys-color-shadow: #000000;
--md-sys-color-scrim: #000000;
--md-sys-color-surface-tint: #ffba3e;
--md-sys-color-primary: #ffc971;
--md-sys-color-on-primary: #432c00;
--md-sys-color-primary-container: #ecaa2e;
--md-sys-color-on-primary-container: #614100;
--md-sys-color-inverse-primary: #7f5700;
--md-sys-color-secondary: #e6c188;
--md-sys-color-on-secondary: #432c02;
--md-sys-color-secondary-container: #5e4518;
--md-sys-color-on-secondary-container: #d7b37c;
--md-sys-color-tertiary: #c7dc64;
--md-sys-color-on-tertiary: #2c3400;
--md-sys-color-tertiary-container: #acc04b;
--md-sys-color-on-tertiary-container: #414d00;
--md-sys-color-error: #ffb4ab;
--md-sys-color-on-error: #690005;
--md-sys-color-error-container: #93000a;
--md-sys-color-on-error-container: #ffdad6;
}
@theme {
--color-background: var(--md-sys-color-background);
--color-on-background: var(--md-sys-color-on-background);
--color-surface: var(--md-sys-color-surface);
--color-surface-dim: var(--md-sys-color-surface-dim);
--color-surface-bright: var(--md-sys-color-surface-bright);
--color-surface-container-lowest: var(
--md-sys-color-surface-container-lowest
);
--color-surface-container-low: var(--md-sys-color-surface-container-low);
--color-surface-container: var(--md-sys-color-surface-container);
--color-surface-container-high: var(--md-sys-color-surface-container-high);
--color-surface-container-highest: var(
--md-sys-color-surface-container-highest
);
--color-on-surface: var(--md-sys-color-on-surface);
--color-surface-variant: var(--md-sys-color-surface-variant);
--color-on-surface-variant: var(--md-sys-color-on-surface-variant);
--color-inverse-surface: var(--md-sys-color-inverse-surface);
--color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
--color-outline: var(--md-sys-color-outline);
--color-outline-variant: var(--md-sys-color-outline-variant);
--color-shadow: var(--md-sys-color-shadow);
--color-scrim: var(--md-sys-color-scrim);
--color-surface-tint: var(--md-sys-color-surface-tint);
--color-primary: var(--md-sys-color-primary);
--color-on-primary: var(--md-sys-color-on-primary);
--color-primary-container: var(--md-sys-color-primary-container);
--color-on-primary-container: var(--md-sys-color-on-primary-container);
--color-inverse-primary: var(--md-sys-color-inverse-primary);
--color-secondary: var(--md-sys-color-secondary);
--color-on-secondary: var(--md-sys-color-on-secondary);
--color-secondary-container: var(--md-sys-color-secondary-container);
--color-on-secondary-container: var(--md-sys-color-on-secondary-container);
--color-tertiary: var(--md-sys-color-tertiary);
--color-on-tertiary: var(--md-sys-color-on-tertiary);
--color-tertiary-container: var(--md-sys-color-tertiary-container);
--color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
--color-error: var(--md-sys-color-error);
--color-on-error: var(--md-sys-color-on-error);
--color-error-container: var(--md-sys-color-error-container);
--color-on-error-container: var(--md-sys-color-on-error-container);
}
================================================
FILE: apps/docs/src/app/fonts.ts
================================================
import { Fira_Code, Poppins } from 'next/font/google'
export const poppins = Poppins({
display: 'swap',
subsets: ['latin'],
variable: '--font-poppins',
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900']
})
export const fira_code = Fira_Code({
subsets: ['latin'],
variable: '--font-fira-code',
display: 'swap'
})
================================================
FILE: apps/docs/src/app/layout.tsx
================================================
import './app.css'
import { Metadata } from 'next'
import { poppins } from './fonts'
export const metadata: Metadata = {
title: 'Actify',
description: 'React Material Design 3 Components Library',
icons: {
icon: '/favicon.ico',
shortcut: '/short-cut-icon.png',
apple: '/apple-touch-icon.png'
}
}
export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
<html lang="en" suppressHydrationWarning className={poppins.className}>
<body>{children}</body>
</html>
)
}
================================================
FILE: apps/docs/src/app/page.tsx
================================================
import { Icon, LinkButton } from 'actify'
import Link from 'next/link'
import Logo from '@/components/Logo'
import Sponsors from '@/components/Sponsors'
import SyntaxHighlighter from '@/components/SyntaxHighlighter'
export const generateMetadata = () => {
return {
title: 'Actify — 🌻React Material Design 3 Components Library'
}
}
export default function Page() {
return (
<main className="col-start-1 col-end-3 bg-surface">
<div className="flex flex-col gap-4 pt-2">
<div className="mx-auto w-40 sm:w-60">
<Logo />
</div>
<p className="text-center text-secondary text-2xl md:text-3xl lg:text-4xl font-extrabold ">
React Material Design 3 Components Library
</p>
<div className="flex flex-col sm:flex-row p-4 sm:p-0 items-center justify-center gap-4">
<Link
tabIndex={-1}
className="max-sm:w-full"
href="/getting-started/installation"
>
<LinkButton
variant="filled"
className="max-sm:w-full flex justify-center"
>
Get Started
<Icon>arrow_forward</Icon>
</LinkButton>
</Link>
<Link
tabIndex={-1}
className="max-sm:w-full text-center"
href="/getting-started/why-actify"
>
<LinkButton
variant="tonal"
className="max-sm:w-full flex justify-center"
>
<Icon>help</Icon>
Why Actify
</LinkButton>
</Link>
<a
tabIndex={-1}
target="_blank"
className="max-sm:w-full"
href="https://github.com/actifyjs/actify"
>
<LinkButton
variant="outlined"
className="max-sm:w-full flex justify-center"
>
<Icon>
<svg
width="18"
height="18"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M9 18c-4.51 2-5-2-7-2" />
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
</svg>
</Icon>
GitHub
</LinkButton>
</a>
</div>
<div className="w-full max-w-md mx-auto">
<SyntaxHighlighter lang="shell">pnpm add actify</SyntaxHighlighter>
</div>
<Sponsors />
</div>
</main>
)
}
================================================
FILE: apps/docs/src/app/template.tsx
================================================
'use client'
import App from '@/components/App'
import Console from '@/components/Console'
import Footer from '@/components/Footer'
import Header from '@/components/Header'
import { ThemeProvider } from 'next-themes'
import { Toaster } from 'sonner'
export default function Template({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider storageKey="color-mode">
<App>
<Header />
{children}
<Footer />
<Console />
<Toaster richColors position="top-center" />
</App>
</ThemeProvider>
)
}
================================================
FILE: apps/docs/src/components/App.tsx
================================================
import React from 'react'
import packageInfo from 'actify/package.json'
export default function App({ children }: { children: React.ReactNode }) {
return (
<div
id="actify"
data-version={packageInfo.version}
className="grid grid-cols-1 antialiased min-h-screen grid-rows-[64px_1fr_56px]"
>
{children}
</div>
)
}
================================================
FILE: apps/docs/src/components/AppDrawer.tsx
================================================
'use client'
import {
DrawerActivator,
DrawerContent,
Icon,
IconButton,
NavigationDrawer
} from 'actify'
import Aside from '@/components/Aside'
import { useState } from 'react'
export default function AppDrawer() {
const [open, setOpen] = useState(false)
return (
<NavigationDrawer
open={open}
setOpen={setOpen}
placement="left"
className="overflow-hidden"
>
<DrawerActivator asChild className="md:hidden">
<IconButton color="primary">
<Icon>menu</Icon>
</IconButton>
</DrawerActivator>
<DrawerContent style={{ width: '15rem' }}>
<Aside open={open} />
</DrawerContent>
</NavigationDrawer>
)
}
================================================
FILE: apps/docs/src/components/Aside.tsx
================================================
'use client'
import { List, ListGroup, ListItem } from 'actify'
import GettingStarted from './GettingStarted'
import NavLink from './NavLink'
import { tv } from 'tailwind-variants'
const components = [
{
label: 'App bars',
children: [
{
name: 'Bottom app bar'
},
{
name: 'Top app bar'
}
]
},
{
name: 'Accordion'
},
{
name: 'Avatar'
},
{
name: 'Badges'
},
{
name: 'Before After'
},
{
label: 'Buttons',
children: [
{
name: 'Button'
},
{
name: 'FAB'
},
{
name: 'Icon button'
},
{
name: 'Segmented button'
}
]
},
{
name: 'Cards'
},
{
name: 'Carousel'
},
{
name: 'Checkbox'
},
{
name: 'Chips'
},
{
name: 'Dialogs'
},
{
name: 'Divider'
},
{
name: 'Focus Ring'
},
{
name: 'Label'
},
{
name: 'Lists'
},
{
name: 'Menus'
},
{
label: 'Navigation',
children: [
{
name: 'Navigation bar'
},
{
name: 'Navigation drawer'
},
{
name: 'Navigation rail'
}
]
},
{
name: 'Pagination'
},
{
label: 'Progress',
children: [
{
name: 'Linear progress'
},
{
name: 'Circular progress'
}
]
},
{
name: 'Radio'
},
{
name: 'Ripple'
},
{
name: 'Autocomplete'
},
{
name: 'Select'
},
{
label: 'Sheets',
children: [
{
name: 'Bottom sheets'
},
{
name: 'Side sheets'
}
]
},
{
name: 'Sliders'
},
{
name: 'Snackbar'
},
{
name: 'Swiper'
},
{
name: 'Switch'
},
{
name: 'Tabs'
},
{
name: 'Table'
},
{
name: 'Terminal'
},
{
name: 'Text fields'
},
{
name: 'Tooltips'
}
]
const spaces2Hyphen = (str: string) => str.toLowerCase().split(' ').join('-')
const base = tv({
base: [
'fixed',
'z-40',
'left-0',
'top-16',
'w-60',
'bottom-0',
'bg-surface',
'shadow-inner',
'translate-x-0',
'text-on-surface',
'overflow-x-hidden',
'overflow-y-scroll',
'transition-transform',
'max-md:-translate-x-full',
'h-[calc(100%_-_64px_-_56px)]'
],
variants: {
open: {
true: ['!static', '!translate-x-0', '!h-full'],
false: ''
}
}
})
interface AsideProps extends React.ComponentProps<'aside'> {
open?: boolean
}
export default function Aside({ open, className }: AsideProps) {
return (
<aside className={base({ open, className })}>
<List>
<GettingStarted />
{components.map((component, index) =>
component.children ? (
<ListGroup key={index} label={component.label}>
{component.children.map((child, index) => (
<NavLink
key={index}
className={({ isActive }) =>
isActive
? 'block text-primary bg-surface-container-high'
: ''
}
href={
`/components/${spaces2Hyphen(component.label)}/` +
child.name.toLowerCase().split(' ').join('-')
}
>
<ListItem>{child.name}</ListItem>
</NavLink>
))}
</ListGroup>
) : (
<NavLink
key={index}
className={({ isActive }) =>
isActive ? 'block text-primary bg-surface-container-high' : ''
}
href={'/components/' + spaces2Hyphen(component.name)}
>
<ListItem>{component.name}</ListItem>
</NavLink>
)
)}
</List>
</aside>
)
}
================================================
FILE: apps/docs/src/components/Console.tsx
================================================
import React from 'react'
const Console = () => {
const svgToBase64 = (svgElement: Node) => {
const svgString = new XMLSerializer().serializeToString(svgElement)
const base64String = btoa(
encodeURIComponent(svgString).replace(/%([0-9A-F]{2})/g, (_, p1) =>
String.fromCharCode(parseInt(p1, 16))
)
)
return `data:image/svg+xml;base64,${base64String}`
}
React.useEffect(() => {
console.info(
'%c actify',
`
font-size: 64px;
color: #0000;
background-size: contain;
background-position: left center;
background-repeat: no-repeat;
background-image: url(${svgToBase64(document.querySelector('svg.animated')!)});
`
)
}, [])
return (
<div className="fixed">
<svg
fill="none"
viewBox="0 0 132 31"
xmlns="http://www.w3.org/2000/svg"
className="animated w-[50vmin] opacity-0 transition-opacity duration-500"
>
<defs>
<style>
{`
@keyframes slide {
25%,
to {
translate: 0-29px;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
35%,
to {
opacity: 1;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
15%,
to {
filter: blur(1px);
opacity: 0;
}
}
.letter path {
fill: #000;
}
@media (prefers-color-scheme: dark) {
.letter path {
fill: #fff;
}
}
.letter {
--duration: 2.2s;
--delay: calc(
(
sin((var(--index) / var(--total)) * 90deg) *
(var(--duration) * 0.25)
)
);
transform-origin: 50% 50%;
transform-box: fill-box;
animation: slide var(--duration) var(--delay) infinite ease;
}
.letter path:last-of-type {
transform-origin: 50% 50%;
translate: 0 29px;
transform-box: fill-box;
animation: fade-in var(--duration) var(--delay) both infinite ease;
}
.letter path:first-of-type {
transform-origin: 50% 100%;
transform-box: fill-box;
animation: fade-out var(--duration) var(--delay) both infinite ease;
}`}
</style>
</defs>
<g style={{ '--total': 6 } as React.CSSProperties}>
<g className="letter" style={{ '--index': 0 } as React.CSSProperties}>
<path
d="M21.172,0H17.094L15.078-5.7H6.266L4.328,0H.266L8.656-22.406h4.188ZM14.094-8.734l-3.109-8.937a10.586,10.586,0,0,1-.3-1.406h-.062a9.146,9.146,0,0,1-.312,1.406L7.234-8.734Z"
transform="translate(-0.266 22.406)"
/>
<path
d="M21.172,0H17.094L15.078-5.7H6.266L4.328,0H.266L8.656-22.406h4.188ZM14.094-8.734l-3.109-8.937a10.586,10.586,0,0,1-.3-1.406h-.062a9.146,9.146,0,0,1-.312,1.406L7.234-8.734Z"
transform="translate(-0.266 22.406)"
/>
</g>
<g className="letter" style={{ '--index': 1 } as React.CSSProperties}>
<path
d="M13.813-.734A8.94,8.94,0,0,1,9.266.375a7.7,7.7,0,0,1-5.75-2.227A7.887,7.887,0,0,1,1.328-7.625,8.681,8.681,0,0,1,3.68-13.977a8.407,8.407,0,0,1,6.289-2.4,9.18,9.18,0,0,1,3.859.766v3.375a5.845,5.845,0,0,0-3.562-1.25A4.951,4.951,0,0,0,6.5-11.93a5.685,5.685,0,0,0-1.469,4.07A5.42,5.42,0,0,0,6.414-3.937,4.91,4.91,0,0,0,10.125-2.5a5.8,5.8,0,0,0,3.688-1.391Z"
transform="translate(23.328 20.375)"
/>
<path
d="M13.813-.734A8.94,8.94,0,0,1,9.266.375a7.7,7.7,0,0,1-5.75-2.227A7.887,7.887,0,0,1,1.328-7.625,8.681,8.681,0,0,1,3.68-13.977a8.407,8.407,0,0,1,6.289-2.4,9.18,9.18,0,0,1,3.859.766v3.375a5.845,5.845,0,0,0-3.562-1.25A4.951,4.951,0,0,0,6.5-11.93a5.685,5.685,0,0,0-1.469,4.07A5.42,5.42,0,0,0,6.414-3.937,4.91,4.91,0,0,0,10.125-2.5a5.8,5.8,0,0,0,3.688-1.391Z"
transform="translate(23.328 20.375)"
/>
</g>
<g className="letter" style={{ '--index': 2 } as React.CSSProperties}>
<path
d="M10.8-.172A6.282,6.282,0,0,1,8,.359q-4.656,0-4.656-4.469v-9.047H.672V-16H3.344v-3.7l3.625-1.031V-16H10.8v2.844H6.969v8a3.152,3.152,0,0,0,.516,2.031A2.141,2.141,0,0,0,9.2-2.516,2.492,2.492,0,0,0,10.8-3.047Z"
transform="translate(45.672 20.734)"
/>
<path
d="M10.8-.172A6.282,6.282,0,0,1,8,.359q-4.656,0-4.656-4.469v-9.047H.672V-16H3.344v-3.7l3.625-1.031V-16H10.8v2.844H6.969v8a3.152,3.152,0,0,0,.516,2.031A2.141,2.141,0,0,0,9.2-2.516,2.492,2.492,0,0,0,10.8-3.047Z"
transform="translate(45.672 20.734)"
/>
</g>
<g className="letter" style={{ '--index': 3 } as React.CSSProperties}>
<path
d="M4.188-19.359a2.179,2.179,0,0,1-1.523-.578,1.9,1.9,0,0,1-.633-1.469,1.951,1.951,0,0,1,.633-1.484,2.147,2.147,0,0,1,1.523-.594,2.214,2.214,0,0,1,1.563.594,1.94,1.94,0,0,1,.641,1.484,1.913,1.913,0,0,1-.641,1.445A2.2,2.2,0,0,1,4.188-19.359ZM5.984,0H2.359V-16H5.984Z"
transform="translate(67.031 23.484)"
/>
<path
d="M4.188-19.359a2.179,2.179,0,0,1-1.523-.578,1.9,1.9,0,0,1-.633-1.469,1.951,1.951,0,0,1,.633-1.484,2.147,2.147,0,0,1,1.523-.594,2.214,2.214,0,0,1,1.563.594,1.94,1.94,0,0,1,.641,1.484,1.913,1.913,0,0,1-.641,1.445A2.2,2.2,0,0,1,4.188-19.359ZM5.984,0H2.359V-16H5.984Z"
transform="translate(67.031 23.484)"
/>
</g>
<g className="letter" style={{ '--index': 4 } as React.CSSProperties}>
<path
d="M11.406-20.734a3.3,3.3,0,0,0-1.672-.422q-2.641,0-2.641,2.984V-16h3.719v2.844h-3.7V0H3.484V-13.156H.75V-16H3.484v-2.594a5.05,5.05,0,0,1,1.656-3.992,6.031,6.031,0,0,1,4.141-1.461,6.149,6.149,0,0,1,2.125.3Z"
transform="translate(80.75 24.047)"
/>
<path
d="M11.406-20.734a3.3,3.3,0,0,0-1.672-.422q-2.641,0-2.641,2.984V-16h3.719v2.844h-3.7V0H3.484V-13.156H.75V-16H3.484v-2.594a5.05,5.05,0,0,1,1.656-3.992,6.031,6.031,0,0,1,4.141-1.461,6.149,6.149,0,0,1,2.125.3Z"
transform="translate(80.75 24.047)"
/>
</g>
<g className="letter" style={{ '--index': 5 } as React.CSSProperties}>
<path
d="M16.219-16,9,2.563Q6.75,7.531,2.688,7.531a7.569,7.569,0,0,1-1.906-.2V4.313a5.069,5.069,0,0,0,1.563.281,3.224,3.224,0,0,0,3.031-2L6.453-.031.094-16H4.109L7.922-4.375q.062.219.281,1.156h.078q.078-.359.281-1.125l4-11.656Z"
transform="translate(101.094 20)"
/>
<path
d="M16.219-16,9,2.563Q6.75,7.531,2.688,7.531a7.569,7.569,0,0,1-1.906-.2V4.313a5.069,5.069,0,0,0,1.563.281,3.224,3.224,0,0,0,3.031-2L6.453-.031.094-16H4.109L7.922-4.375q.062.219.281,1.156h.078q.078-.359.281-1.125l4-11.656Z"
transform="translate(101.094 20)"
/>
</g>
</g>
</svg>
</div>
)
}
export default Console
================================================
FILE: apps/docs/src/components/DocPreview.tsx
================================================
'use client'
import * as Actify from 'actify'
import { LivePreview, LiveProvider } from 'react-live'
import SyntaxHighlighter from '@/components/SyntaxHighlighter'
type CodePreviewProps = {
code?: string
}
const DocPreview = ({ code = '' }: CodePreviewProps) => {
return (
<LiveProvider code={code} scope={Actify}>
<div className="not-prose rounded-lg bg-surface-variant shadow-lg">
<Actify.Tabs>
<Actify.TabItem
key="preview"
title={
<>
<Actify.Icon>visibility</Actify.Icon>
Preview
</>
}
>
<div className="p-2 sm:p-4 bg-surface-container">
<LivePreview className="flex gap-2" />
</div>
</Actify.TabItem>
<Actify.TabItem
key="code"
title={
<>
<Actify.Icon>
<svg
fill="none"
width="24"
height="24"
strokeWidth="2"
viewBox="0 0 24 24"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
xmlns="http://www.w3.org/2000/svg"
>
<path d="m18 16 4-4-4-4" />
<path d="m6 8-4 4 4 4" />
<path d="m14.5 4-5 16" />
</svg>
</Actify.Icon>
Code
</>
}
>
<div className="p-2 sm:p-4 bg-surface-container">
<SyntaxHighlighter lang="tsx">{code}</SyntaxHighlighter>
</div>
</Actify.TabItem>
</Actify.Tabs>
</div>
</LiveProvider>
)
}
export default DocPreview
================================================
FILE: apps/docs/src/components/DocTabs.tsx
================================================
'use client'
import { TabItem, Tabs } from 'actify'
import React from 'react'
import SyntaxHighlighter from '@/components/SyntaxHighlighter'
interface ActifyTabsProps extends React.ComponentProps<'html'> {
items?: string
language?: string
activeTabIndex?: number
}
type TypeTab = { label: string; icon: string; content: string }
type IconProps = {
name: 'pnpm' | 'yarn' | 'npm'
}
const IconMap = {
pnpm: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<polyline points="4 17 10 11 4 5" />
<line x1="12" x2="20" y1="19" y2="19" />
</svg>
),
yarn: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m7 11 2-2-2-2" />
<path d="M11 13h4" />
<rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
</svg>
),
npm: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect width="18" height="18" x="3" y="3" rx="2" />
<path d="m10 8 4 4-4 4" />
</svg>
)
}
const DocTabs = (props: ActifyTabsProps) => {
const { language, items = '' } = props
const tabs: TypeTab[] = JSON.parse(items)
return (
<div className="not-prose rounded-lg bg-surface-variant shadow-lg">
<Tabs>
{tabs.map((tab) => (
<TabItem
key={tab.label}
title={
<>
{IconMap[tab.icon as IconProps['name']]}
{tab.label}
</>
}
>
<SyntaxHighlighter
lang={`${language}` || 'jsx'}
className="rounded-t-none"
>
{tab.content}
</SyntaxHighlighter>
</TabItem>
))}
</Tabs>
</div>
)
}
export default DocTabs
================================================
FILE: apps/docs/src/components/DocUsage.tsx
================================================
'use client'
import { Icon, TabItem, Tabs, TooltipGroup } from 'actify'
import OpenInCodeSandbox from '@/components/OpenInCodeSandbox'
import OpenInStackblitz from '@/components/OpenInStackblitz'
import SyntaxHighlighter from '@/components/SyntaxHighlighter'
import ViewSource from '@/components/ViewSource'
import dynamic from 'next/dynamic'
interface DocUsageProps {
content?: string
component: string
}
const DocUsage = (props: DocUsageProps) => {
const { content = '', component } = props
const DynamicComponent = dynamic(() => import(`@/usages/${component}`), {
ssr: false
})
return (
<div className="relative not-prose rounded-lg text-on-surface-variant bg-surface-variant shadow-lg">
<Tabs>
<TabItem
key="preview"
title={
<>
<Icon>visibility</Icon>
Preview
</>
}
>
<div className="p-2 sm:p-4 bg-surface-container">
<DynamicComponent />
</div>
</TabItem>
<TabItem
key="code"
title={
<>
<Icon>
<svg
fill="none"
width="24"
height="24"
strokeWidth="2"
viewBox="0 0 24 24"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
xmlns="http://www.w3.org/2000/svg"
>
<path d="m18 16 4-4-4-4" />
<path d="m6 8-4 4 4 4" />
<path d="m14.5 4-5 16" />
</svg>
</Icon>
Code
</>
}
>
<div className="p-2 sm:p-4 bg-surface-container">
<SyntaxHighlighter lang="tsx">{content}</SyntaxHighlighter>
</div>
</TabItem>
</Tabs>
<div className="absolute top-3 right-4 flex">
<TooltipGroup placement="bottom">
<ViewSource name={component} />
<OpenInCodeSandbox title={component} code={content} />
<OpenInStackblitz title={component} code={content} />
</TooltipGroup>
</div>
</div>
)
}
export default DocUsage
================================================
FILE: apps/docs/src/components/Dropdown.tsx
================================================
import { Button, Icon } from 'actify'
import NavLink from './NavLink'
import React from 'react'
interface DropdownProps extends React.ComponentProps<'div'> {
items?: Array<{
href: string
text?: string
}>
}
const Dropdown = (props: DropdownProps) => {
const { title, items } = props
return (
<div className="relative">
<Button variant="text" className="group peer px-2.5">
{title}
<div className="flex items-center transition-transform duration-300 group-hover:rotate-90">
<Icon className="[--md-icon-size:20px]">keyboard_arrow_down</Icon>
</div>
</Button>
<div className="absolute right-0 hidden w-28 flex-col bg-surface drop-shadow-lg hover:flex peer-hover:flex">
{items?.map((item, index) => (
<NavLink
key={index}
href={item.href}
className="block px-4 py-2 text-sm hover:bg-surface-variant"
>
{item.text}
</NavLink>
))}
</div>
</div>
)
}
export default Dropdown
================================================
FILE: apps/docs/src/components/EditOnGitHub.tsx
================================================
import { Button, Icon } from 'actify'
type EditOnGitHubProps = {
pathname: string | null
}
const EditOnGitHub = ({ pathname }: EditOnGitHubProps) => {
return (
<a
tabIndex={-1}
target="_blank"
href={`https://github.com/actifyjs/actify/blob/main/apps/docs/content${pathname}.md`}
>
<Button variant="text">
Edit this page on GitHub
<Icon>edit</Icon>
</Button>
</a>
)
}
export default EditOnGitHub
================================================
FILE: apps/docs/src/components/Footer.tsx
================================================
'use client'
import { Icon } from 'actify'
import React from 'react'
import { tv } from 'tailwind-variants'
const variants = tv({
base: [
'fixed',
'w-full',
'bottom-0',
'col-start-1',
'col-end-3',
'bg-surface',
'shadow-inner',
'bg-surface-container'
]
})
const Footer = ({ className }: React.ComponentProps<'footer'>) => {
return (
<footer className={variants({ className })}>
<div className="text-on-surface mx-auto w-full max-w-screen-xl py-1 md:py-4 px-4 md:flex md:items-center md:justify-between">
<p className="text-center">
Copyright © {new Date().getFullYear()} Actify
</p>
<p className="text-center">
Released under the{' '}
<a
target="_blank"
rel="noreferrer"
className="inline-flex gap-1"
href="https://opensource.org/licenses/MIT"
>
MIT License
<Icon>
<svg
width="20"
height="20"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M15 3h6v6" />
<path d="M10 14 21 3" />
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
</svg>
</Icon>
</a>
</p>
</div>
</footer>
)
}
export default Footer
================================================
FILE: apps/docs/src/components/GettingStarted.tsx
================================================
import { ListGroup, ListItem } from 'actify'
import NavLink from './NavLink'
const GettingStarted = () => {
return (
<ListGroup label="Getting started">
<NavLink
href="/getting-started/installation"
className={({ isActive }) =>
isActive ? 'block text-primary bg-surface-container-high' : ''
}
>
<ListItem>Installation</ListItem>
</NavLink>
<NavLink
href="/getting-started/theme"
className={({ isActive }) =>
isActive ? 'block text-primary bg-surface-container-high' : ''
}
>
<ListItem>Theme</ListItem>
</NavLink>
<NavLink
href="/getting-started/icons"
className={({ isActive }) =>
isActive ? 'block text-primary bg-surface-container-high' : ''
}
>
<ListItem>Icon</ListItem>
</NavLink>
</ListGroup>
)
}
export default GettingStarted
================================================
FILE: apps/docs/src/components/Header.tsx
================================================
'use client'
import { Icon, IconButton, LinkButton, Spacer } from 'actify'
import AppDrawer from '@/components/AppDrawer'
import Dropdown from '@/components/Dropdown'
import Logo from '@/components/Logo'
import NavLink from '@/components/NavLink'
import React from 'react'
import Search from '@/components/Search'
import { ThemeChanger } from './ThemeChanger'
const Header = () => {
return (
<header className="sticky top-0 z-50 h-16 col-start-1 bg-surface-container px-2 shadow backdrop-blur">
<div className="mx-auto flex h-full flex-wrap items-center justify-between">
<NavLink
href="/"
tabIndex={-1}
className="hidden md:flex items-center text-primary"
>
<LinkButton
variant="text"
className="self-center whitespace-nowrap text-2xl font-semibold"
>
<Logo height={36} />
ctify
</LinkButton>
</NavLink>
<div className="inline-flex md:hidden">
<AppDrawer />
</div>
<Search
indexName="actify"
appId="QT1V8AWXWR"
apiKey="aea069649b0718ada66d001637c44dbf"
/>
<Spacer />
<NavLink href="/" className="flex md:hidden items-center text-primary">
<Logo height={24} />
<span className="self-center whitespace-nowrap font-semibold">
ctify
</span>
</NavLink>
<Spacer />
<a
tabIndex={-1}
target="_blank"
title="twitter"
href="https://x.com/actifyjs"
>
<IconButton>
<Icon>
<svg
viewBox="0 0 24 24"
className="size-5"
xmlns="http://www.w3.org/2000/svg"
>
<path
className="fill-current"
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
/>
</svg>
</Icon>
</IconButton>
</a>
<a
tabIndex={-1}
target="_blank"
title="actify github"
href="https://github.com/actifyjs/actify"
>
<IconButton>
<Icon>
<svg
viewBox="0 0 24 24"
className="size-5"
xmlns="http://www.w3.org/2000/svg"
>
<path
className="fill-current"
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
/>
</svg>
</Icon>
</IconButton>
</a>
<ThemeChanger />
<div className="hidden w-full md:block md:w-auto">
<ul className="flex flex-row gap-2 font-medium">
<li>
<Dropdown
title="Learn"
items={[
{
text: 'Get Started',
href: '/getting-started/installation'
}
]}
/>
</li>
</ul>
</div>
</div>
</header>
)
}
export default Header
================================================
FILE: apps/docs/src/components/Logo.tsx
================================================
'use client'
import React from 'react'
import { motion } from 'motion/react'
const Logo = ({ height }: React.ComponentProps<'svg'>) => {
return (
<svg
height={height}
className="fill-primary"
viewBox="0 0 33.455 36.987"
xmlns="http://www.w3.org/2000/svg"
>
<motion.path
strokeWidth="2"
className="stroke-on-primary"
transform="translate(-28.272 365)"
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={{
duration: 3,
repeat: Infinity,
ease: 'easeInOut',
repeatType: 'reverse'
}}
d="M55.047-328.513l-5.238-13.822-14.323,5.317-3.243,8.5H29L42.821-364.5h4.359L61-328.513Zm-6.067-15.969.829,2.147-.829-2.147-5.308-13.745-7.123,18.445"
/>
</svg>
)
}
export default Logo
================================================
FILE: apps/docs/src/components/Markdown.tsx
================================================
import DocPreview from '@/components/DocPreview'
import DocTabs from '@/components/DocTabs'
import DocUsage from '@/components/DocUsage'
import Icon from '@/views/icon'
import ReactMarkdown from 'react-markdown'
import SyntaxHighlighter from '@/components/SyntaxHighlighter'
import Theme from '@/views/theme'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypeRaw from 'rehype-raw'
import rehypeSlug from 'rehype-slug'
import remarkGfm from 'remark-gfm'
interface MarkdownProps extends React.ComponentProps<'div'> {
docs: {
title?: string
description?: string
content?: string
}
usage: {
content?: string
component: string
}
}
export default function Markdown({ docs, usage }: MarkdownProps) {
return (
// @ts-ignore
<ReactMarkdown
remarkPlugins={[[remarkGfm, { singleTilde: false }]]}
rehypePlugins={[[rehypeRaw], [rehypeSlug], [rehypeAutolinkHeadings]]}
components={{
p: ({ children }) => (
<div className="mb-4">
<>{children}</>
</div>
), // replace p tag to div tag
a: ({ node, children, ...props }) => (
<a className="text-tertiary hover:bg-surface-variant" {...props}>
<>{children}</>
</a>
),
pre: ({ children }) => <>{children}</>, // remove pre tag
code: ({ node, inline, className, children, ...props }) => {
const match = /language-(\w+)/.exec(className || '')
return !inline && match ? (
<SyntaxHighlighter
lang={match[1]}
children={String(children).replace(/\n$/, '')}
/>
) : (
<code
className="leading-8 before:hidden after:hidden bg-black/10 dark:bg-white/10 rounded-md p-1.5"
{...props}
>
<>{children}</>
</code>
)
},
// @ts-ignore
tabs: ({ node, children, ...rest }) => <DocTabs {...rest} />,
// @ts-ignore
usage: ({ node, children, ...rest }) => (
<DocUsage {...usage} {...rest} />
),
// @ts-ignore
preview: ({ node, children, ...rest }) => <DocPreview {...rest} />,
theme: () => <Theme />,
icon: () => <Icon />
}}
>
{`# ${docs.title} ${docs.description ? '\r\n>' + docs.description : ''}\r\n` +
docs.content}
</ReactMarkdown>
)
}
================================================
FILE: apps/docs/src/components/NavLink.tsx
================================================
'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
interface NavLinkProps {
href: string
tabIndex?: number
children: React.ReactNode
className?: string | ((props: { isActive: boolean }) => string | undefined)
}
export default function NavLink({
href,
className,
children,
...rest
}: NavLinkProps) {
const pathname = usePathname()
const isActive = pathname === href
return (
<Link
{...rest}
href={href}
className={
typeof className == 'function' ? className({ isActive }) : className
}
>
{children}
</Link>
)
}
================================================
FILE: apps/docs/src/components/NgrokerLogo.tsx
================================================
const NgrokerLogo = () => {
return (
<svg width="137" height="32" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
fillRule="evenodd"
d="M94.025 6.55a41.5 41.5 0 0 1 5.916.211q-2.782 4.211-5.7 8.346 3.089 4.912 6.339 9.719a48 48 0 0 1-6.339 0q-2.206-3.407-4.332-6.867a7.5 7.5 0 0 0-2.431-.211v7.184h-5.496V0h5.494v12.889a7.8 7.8 0 0 0 2.536-.211Q92.1 9.659 94.026 6.55M0 24.933V6.549h5.071a15 15 0 0 0 .106 2.536 7.93 7.93 0 0 1 8.98-2.641 6.45 6.45 0 0 1 3.909 4.963q.159 6.761.106 13.522h-5.494q.051-5.811-.106-11.621a2.94 2.94 0 0 0-3.064-2.324A3.82 3.82 0 0 0 5.6 13.731q-.159 5.6-.106 11.2Z"
/>
<path
fill="currentColor"
d="M41.045 32.068H24.353v-4.861h10.99c.035-1.616 0-3.251-.106-4.862a8.6 8.6 0 0 1-2.633 1.888 7.3 7.3 0 0 1-3 .629 9.4 9.4 0 0 1-2.286-.3 11 11 0 0 1-2.658-1.453 8.1 8.1 0 0 1-1.87-1.982 8.2 8.2 0 0 1-1.089-2.509 11.3 11.3 0 0 1-.308-3.036 12 12 0 0 1 .447-3.191 8.8 8.8 0 0 1 1.24-2.613 8.6 8.6 0 0 1 2.034-2.036 11.7 11.7 0 0 1 2.828-1.459 9.6 9.6 0 0 1 1.733-.163 7.4 7.4 0 0 1 3.26.727 8.4 8.4 0 0 1 2.725 2.184 13 13 0 0 0 .106-2.324h5.282v25.361ZM30.96 10.899a6 6 0 0 0-.69.04 16 16 0 0 0-2.11 1.163 6.82 6.82 0 0 0-.951 5.177 3.82 3.82 0 0 0 2.219 2.431 11 11 0 0 0 1.8.165 4.07 4.07 0 0 0 3.246-1.2c.843-.981 1.1-2.586.769-4.771a4.8 4.8 0 0 0-.845-1.69 5.09 5.09 0 0 0-3.43-1.308"
/>
<path
fill="currentColor"
fillRule="evenodd"
d="M55.039 6.128h2.747v5.328a38 38 0 0 0-4.014.107 3.546 3.546 0 0 0-2.852 3.3q-.159 5.115-.106 10.23h-5.49V6.552h5.071a9.3 9.3 0 0 0 .211 2.771 5.57 5.57 0 0 1 4.433-3.195"
/>
<path
fill="currentColor"
d="M68.853 25.479a10.5 10.5 0 0 1-3.3-.551 14.6 14.6 0 0 1-3.352-1.651 11.6 11.6 0 0 1-1.777-2.027 9.45 9.45 0 0 1-1.638-4.741 11.8 11.8 0 0 1 .139-2.714 12 12 0 0 1 1.051-2.831 8.97 8.97 0 0 1 3.856-3.835 11.6 11.6 0 0 1 2.806-1 14 14 0 0 1 2.031-.156 11.3 11.3 0 0 1 2.394.25 10.2 10.2 0 0 1 2.2.748 10.8 10.8 0 0 1 2.012 1.247 13 13 0 0 1 1.82 1.747 13.3 13.3 0 0 1 1.409 3.3 9.45 9.45 0 0 1-.476 6.339 13.2 13.2 0 0 1-1.885 3.04 14.2 14.2 0 0 1-3.613 2.131 10.2 10.2 0 0 1-3.682.709m-.613-14.468c-.176 0-.359 0-.543.014a4.65 4.65 0 0 0-2.852 2.557 5.51 5.51 0 0 0 1.585 6.286 7 7 0 0 0 2.566.571c1.932 0 3.308-1.231 4.089-3.659a5.6 5.6 0 0 0-1-4.41 4.95 4.95 0 0 0-3.845-1.357Zm42.839 14.429a10.8 10.8 0 0 1-3.222-.46 8.7 8.7 0 0 1-2.688-1.385 9.9 9.9 0 0 1-2.154-2.306 14.8 14.8 0 0 1-1.621-3.23 14.4 14.4 0 0 1 .051-4.239 8.77 8.77 0 0 1 3.856-5.966 13.8 13.8 0 0 1 3.8-1.729c.506-.034 1-.051 1.473-.051a13.7 13.7 0 0 1 4.616.709 9 9 0 0 1 1.815.887 7.8 7.8 0 0 1 1.486 1.241 8.3 8.3 0 0 1 1.157 1.6 10.3 10.3 0 0 1 .828 1.95 17 17 0 0 1 .67 4.964q-7.08-.107-14.157.213c.881 2.114 2.292 3.187 4.192 3.187a6.8 6.8 0 0 0 1.936-.31 3.35 3.35 0 0 0 1.9-1.492q2.85-.159 5.7-.107a10.5 10.5 0 0 1-1.045 2.346 8.1 8.1 0 0 1-3.486 3.143 10.5 10.5 0 0 1-2.441.8 16 16 0 0 1-2.679.243m-.07-14.852q-.207 0-.421.013a4.7 4.7 0 0 0-3.592 3.09 56 56 0 0 0 8.452-.107 4.51 4.51 0 0 0-4.439-3"
/>
<path
fill="currentColor"
fillRule="evenodd"
d="M134.041 6.128h2.958v5.328q-2.115-.051-4.226.107a4.03 4.03 0 0 0-2.852 3.729q-.159 4.9-.106 9.8h-5.494V6.552h5.282a18 18 0 0 0 .106 2.771 5.36 5.36 0 0 1 4.332-3.2"
/>
</svg>
)
}
export default NgrokerLogo
================================================
FILE: apps/docs/src/components/OpenInCodeSandbox.tsx
================================================
import { IconButton, Tooltip, TooltipTrigger } from 'actify'
import React from 'react'
import { getParameters } from 'codesandbox/lib/api/define'
import packageInfo from 'actify/package.json'
interface OpenInCodeSandboxProps extends React.ComponentProps<'form'> {
title: string
code: string
}
const OpenInCodeSandbox = ({ title, code }: OpenInCodeSandboxProps) => {
const parameters = getParameters({
files: {
'package.json': {
content: JSON.stringify(
{
name: `actify-${title}`,
private: true,
type: 'module',
version: '0.0.0',
scripts: {
dev: 'vite'
},
dependencies: {
actify: `^${packageInfo.version}`,
react: '^19.0.0',
'react-dom': '^19.0.0'
},
devDependencies: {
'@eslint/js': '^9.13.0',
'@tailwindcss/vite': 'latest',
'@vitejs/plugin-react': '^4.3.3',
'@types/react': '^19.0.0',
'@types/react-dom': '^19.0.0',
autoprefixer: '^10.4.20',
eslint: '^9.13.0',
'eslint-plugin-react-hooks': '^5.0.0',
'eslint-plugin-react-refresh': '^0.4.14',
globals: '^15.11.0',
postcss: '^8.4.47',
tailwindcss: 'latest',
typescript: '~5.6.2',
'typescript-eslint': '^8.11.0',
vite: 'latest'
}
},
null,
2
),
isBinary: false
},
'src/App.tsx': {
content: code,
isBinary: false
},
'src/main.tsx': {
content: `import './app.css'
import App from "./App.tsx";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<App />
</StrictMode>
);`,
isBinary: false
},
'src/app.css': {
content: `@import 'tailwindcss';
:root {
--md-sys-color-background: #fff8f3;
--md-sys-color-on-background: #201b12;
--md-sys-color-surface: #fff8f3;
--md-sys-color-surface-dim: #e4d8cb;
--md-sys-color-surface-bright: #fff8f3;
--md-sys-color-surface-container-lowest: #ffffff;
--md-sys-color-surface-container-low: #fef2e4;
--md-sys-color-surface-container: #f8ecde;
--md-sys-color-surface-container-high: #f3e6d8;
--md-sys-color-surface-container-highest: #ede1d3;
--md-sys-color-on-surface: #201b12;
--md-sys-color-surface-variant: #f2e0c9;
--md-sys-color-on-surface-variant: #504534;
--md-sys-color-inverse-surface: #362f26;
--md-sys-color-inverse-on-surface: #fbefe1;
--md-sys-color-outline: #837562;
--md-sys-color-outline-variant: #d5c4ae;
--md-sys-color-shadow: #000000;
--md-sys-color-scrim: #000000;
--md-sys-color-surface-tint: #7f5700;
--md-sys-color-primary: #7f5700;
--md-sys-color-on-primary: #ffffff;
--md-sys-color-primary-container: #ecaa2e;
--md-sys-color-on-primary-container: #614100;
--md-sys-color-inverse-primary: #ffba3e;
--md-sys-color-secondary: #765a2b;
--md-sys-color-on-secondary: #ffffff;
--md-sys-color-secondary-container: #fed79d;
--md-sys-color-on-secondary-container: #785c2d;
--md-sys-color-tertiary: #566500;
--md-sys-color-on-tertiary: #ffffff;
--md-sys-color-tertiary-container: #acc04b;
--md-sys-color-on-tertiary-container: #414d00;
--md-sys-color-error: #ba1a1a;
--md-sys-color-on-error: #ffffff;
--md-sys-color-error-container: #ffdad6;
--md-sys-color-on-error-container: #93000a;
}
@theme {
--color-background: var(--md-sys-color-background);
--color-on-background: var(--md-sys-color-on-background);
--color-surface: var(--md-sys-color-surface);
--color-surface-dim: var(--md-sys-color-surface-dim);
--color-surface-bright: var(--md-sys-color-surface-bright);
--color-surface-container-lowest: var(
--md-sys-color-surface-container-lowest
);
--color-surface-container-low: var(--md-sys-color-surface-container-low);
--color-surface-container: var(--md-sys-color-surface-container);
--color-surface-container-high: var(--md-sys-color-surface-container-high);
--color-surface-container-highest: var(
--md-sys-color-surface-container-highest
);
--color-on-surface: var(--md-sys-color-on-surface);
--color-surface-variant: var(--md-sys-color-surface-variant);
--color-on-surface-variant: var(--md-sys-color-on-surface-variant);
--color-inverse-surface: var(--md-sys-color-inverse-surface);
--color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
--color-outline: var(--md-sys-color-outline);
--color-outline-variant: var(--md-sys-color-outline-variant);
--color-shadow: var(--md-sys-color-shadow);
--color-scrim: var(--md-sys-color-scrim);
--color-surface-tint: var(--md-sys-color-surface-tint);
--color-primary: var(--md-sys-color-primary);
--color-on-primary: var(--md-sys-color-on-primary);
--color-primary-container: var(--md-sys-color-primary-container);
--color-on-primary-container: var(--md-sys-color-on-primary-container);
--color-inverse-primary: var(--md-sys-color-inverse-primary);
--color-secondary: var(--md-sys-color-secondary);
--color-on-secondary: var(--md-sys-color-on-secondary);
--color-secondary-container: var(--md-sys-color-secondary-container);
--color-on-secondary-container: var(--md-sys-color-on-secondary-container);
--color-tertiary: var(--md-sys-color-tertiary);
--color-on-tertiary: var(--md-sys-color-on-tertiary);
--color-tertiary-container: var(--md-sys-color-tertiary-container);
--color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
--color-error: var(--md-sys-color-error);
--color-on-error: var(--md-sys-color-on-error);
--color-error-container: var(--md-sys-color-error-container);
--color-on-error-container: var(--md-sys-color-on-error-container);
}
`,
isBinary: false
},
'vite.config.ts': {
content: `import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss()],
})
`,
isBinary: false
},
'tsconfig.app.json': {
content: `{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "Bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}`,
isBinary: false
},
'tsconfig.json': {
content: `{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}`,
isBinary: false
},
'tsconfig.node.json': {
content: `{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "Bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}`,
isBinary: false
},
'index.html': {
content: `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Actify-${title}</title>
</head>
<body class="p-5">
<div id="root"></div>
<script type="module" src="src/main.tsx"></script>
</body>
</html>`,
isBinary: false
}
}
})
return (
<TooltipTrigger delay={50} closeDelay={50}>
<form
method="POST"
target="_blank"
action="https://codesandbox.io/api/v1/sandboxes/define"
>
<input type="hidden" name="parameters" value={parameters} />
<IconButton type="submit">
<svg
width="24"
height="24"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
<polyline points="7.5 4.21 12 6.81 16.5 4.21" />
<polyline points="7.5 19.79 7.5 14.6 3 12" />
<polyline points="21 12 16.5 14.6 16.5 19.79" />
<polyline points="3.27 6.96 12 12.01 20.73 6.96" />
<line x1="12" x2="12" y1="22.08" y2="12" />
</svg>
</IconButton>
</form>
<Tooltip placement="top">Open in CodeSandbox</Tooltip>
</TooltipTrigger>
)
}
export default OpenInCodeSandbox
================================================
FILE: apps/docs/src/components/OpenInStackblitz.tsx
================================================
import { IconButton, Tooltip, TooltipTrigger } from 'actify'
import React from 'react'
import packageInfo from 'actify/package.json'
interface OpenInStackblitzProps extends React.ComponentProps<'form'> {
title: string
code: string
}
const OpenInStackblitz = ({ title, code }: OpenInStackblitzProps) => {
const project = {
title: 'Actify ' + title,
template: 'node',
description: 'Actify ' + title + ' usage example',
files: {
'.gitignore': `# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
`,
'index.html': `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Actify-${title}</title>
</head>
<body class="p-5">
<div id="root"></div>
<script type="module" src="src/main.tsx"></script>
</body>
</html>`,
'src/main.tsx': `import './app.css'
import App from "./App.tsx";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<App />
</StrictMode>
);`,
'src/vite-env.d.ts': `/// <reference types="vite/client" />`,
'src/App.tsx': code,
'package.json': `{
"name": "actify-${title}",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite"
},
"dependencies": {
"actify": "^${packageInfo.version}",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@eslint/js": "^9.13.0",
"@tailwindcss/vite": "latest",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@vitejs/plugin-react": "^4.3.3",
"eslint": "^9.13.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.14",
"globals": "^15.11.0",
"tailwindcss": "latest",
"typescript": "~5.6.2",
"typescript-eslint": "^8.11.0",
"vite": "latest"
}
}`,
'src/app.css': `@import 'tailwindcss';
:root {
--md-sys-color-background: #18130b;
--md-sys-color-on-background: #ede1d3;
--md-sys-color-surface: #18130b;
--md-sys-color-surface-dim: #18130b;
--md-sys-color-surface-bright: #3f382f;
--md-sys-color-surface-container-lowest: #120d06;
--md-sys-color-surface-container-low: #201b12;
--md-sys-color-surface-container: #251f16;
--md-sys-color-surface-container-high: #2f2920;
--md-sys-color-surface-container-highest: #3b342a;
--md-sys-color-on-surface: #ede1d3;
--md-sys-color-surface-variant: #504534;
--md-sys-color-on-surface-variant: #d5c4ae;
--md-sys-color-inverse-surface: #ede1d3;
--md-sys-color-inverse-on-surface: #362f26;
--md-sys-color-outline: #9d8f7b;
--md-sys-color-outline-variant: #504534;
--md-sys-color-shadow: #000000;
--md-sys-color-scrim: #000000;
--md-sys-color-surface-tint: #ffba3e;
--md-sys-color-primary: #ffc971;
--md-sys-color-on-primary: #432c00;
--md-sys-color-primary-container: #ecaa2e;
--md-sys-color-on-primary-container: #614100;
--md-sys-color-inverse-primary: #7f5700;
--md-sys-color-secondary: #e6c188;
--md-sys-color-on-secondary: #432c02;
--md-sys-color-secondary-container: #5e4518;
--md-sys-color-on-secondary-container: #d7b37c;
--md-sys-color-tertiary: #c7dc64;
--md-sys-color-on-tertiary: #2c3400;
--md-sys-color-tertiary-container: #acc04b;
--md-sys-color-on-tertiary-container: #414d00;
--md-sys-color-error: #ffb4ab;
--md-sys-color-on-error: #690005;
--md-sys-color-error-container: #93000a;
--md-sys-color-on-error-container: #ffdad6;
}
@theme {
--color-background: var(--md-sys-color-background);
--color-on-background: var(--md-sys-color-on-background);
--color-surface: var(--md-sys-color-surface);
--color-surface-dim: var(--md-sys-color-surface-dim);
--color-surface-bright: var(--md-sys-color-surface-bright);
--color-surface-container-lowest: var(
--md-sys-color-surface-container-lowest
);
--color-surface-container-low: var(--md-sys-color-surface-container-low);
--color-surface-container: var(--md-sys-color-surface-container);
--color-surface-container-high: var(--md-sys-color-surface-container-high);
--color-surface-container-highest: var(
--md-sys-color-surface-container-highest
);
--color-on-surface: var(--md-sys-color-on-surface);
--color-surface-variant: var(--md-sys-color-surface-variant);
--color-on-surface-variant: var(--md-sys-color-on-surface-variant);
--color-inverse-surface: var(--md-sys-color-inverse-surface);
--color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
--color-outline: var(--md-sys-color-outline);
--color-outline-variant: var(--md-sys-color-outline-variant);
--color-shadow: var(--md-sys-color-shadow);
--color-scrim: var(--md-sys-color-scrim);
--color-surface-tint: var(--md-sys-color-surface-tint);
--color-primary: var(--md-sys-color-primary);
--color-on-primary: var(--md-sys-color-on-primary);
--color-primary-container: var(--md-sys-color-primary-container);
--color-on-primary-container: var(--md-sys-color-on-primary-container);
--color-inverse-primary: var(--md-sys-color-inverse-primary);
--color-secondary: var(--md-sys-color-secondary);
--color-on-secondary: var(--md-sys-color-on-secondary);
--color-secondary-container: var(--md-sys-color-secondary-container);
--color-on-secondary-container: var(--md-sys-color-on-secondary-container);
--color-tertiary: var(--md-sys-color-tertiary);
--color-on-tertiary: var(--md-sys-color-on-tertiary);
--color-tertiary-container: var(--md-sys-color-tertiary-container);
--color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
--color-error: var(--md-sys-color-error);
--color-on-error: var(--md-sys-color-on-error);
--color-error-container: var(--md-sys-color-error-container);
--color-on-error-container: var(--md-sys-color-on-error-container);
}
`,
'vite.config.ts': `import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss()],
})
`,
'tsconfig.app.json': `{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "Bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}`,
'tsconfig.json': `{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}`,
'tsconfig.node.json': `{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "Bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}`
},
settings: JSON.stringify({
compile: { clearConsole: false }
})
}
return (
<TooltipTrigger delay={50} closeDelay={50}>
<form
method="post"
target="_target"
className="flex"
action="https://stackblitz.com/run"
>
{Object.keys(project).map((item) =>
item != 'files' ? (
<input
key={item}
type="hidden"
name={`project[${item}]`}
// @ts-expect-error
value={project[item]}
/>
) : (
Object.keys(project[item]).map((file) => (
<input
key={file}
type="hidden"
name={`project[files][${file}]`}
// @ts-expect-error
value={project[item][file]}
/>
))
)
)}
<IconButton type="submit">
<svg
viewBox="0 0 28 28"
aria-hidden="true"
className="size-6 fill-[#1389fd]"
>
<path d="M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z"></path>
</svg>
</IconButton>
</form>
<Tooltip placement="top">Open in Stackblitz</Tooltip>
</TooltipTrigger>
)
}
export default OpenInStackblitz
================================================
FILE: apps/docs/src/components/QzyLogo.tsx
================================================
const Logo = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="150.016"
height="43.576"
viewBox="0 0 150.016 43.576"
>
<g transform="translate(0.02 0.022)">
<path
d="M29.406,6.607a12,12,0,0,1,.462-1.212l-.058-.058q-.71.427-1.443.808a16.72,16.72,0,0,0-12.816-.2,17,17,0,0,0,10.506,32.27,16.8,16.8,0,0,0,8.255-5.022q-2.119-3.345-4.272-6.668,2.684-.115,5.369,0,4.9,6.941,9.756,13.913-3.088.1-6.177.029-1.021-1.537-2.021-3.088a21.791,21.791,0,1,1,3.521-26.758q-2.122,1.1-4.272,2.165a17.3,17.3,0,0,0-4.849-5.051,16.5,16.5,0,0,0-1.961-1.128"
fill="#1d2976"
fillRule="evenodd"
opacity="0.988"
/>
<path
d="M29.406,6.607l-.462.981q-5.793,2.42-11.6,4.792,5.5-3.138,11.026-6.235.733-.381,1.443-.808l.058.058a12,12,0,0,0-.465,1.212"
fill="#4374b0"
fillRule="evenodd"
opacity="0.968"
/>
<path
d="M28.944,7.589q-.323.847-.693,1.674-7.241,2.957-14.432,6a18,18,0,0,1-2.425.433q2.95-1.706,5.946-3.319,5.812-2.368,11.6-4.788"
fill="#4278b3"
fillRule="evenodd"
opacity="0.985"
/>
<path
d="M28.251,9.263l-.4.924q-5.279,2.149-10.507,4.387-1.756.369-3.521.693,7.187-3.047,14.428-6"
fill="#417bb6"
fillRule="evenodd"
opacity="0.988"
/>
<path
d="M52.786,9.725q1.885.153,3.752.462a10.4,10.4,0,0,1-2.482.491q-1.565-.2-3.117-.462Z"
fill="#3699ce"
fillRule="evenodd"
opacity="0.918"
/>
<path
d="M27.847,10.187q-.5,1.2-1.039,2.367L19.765,15.5q.263-.729.577-1.443L20.255,14q-1.457.294-2.915.577,5.228-2.238,10.507-4.387"
fill="#3f7fb9"
fillRule="evenodd"
opacity="0.987"
/>
<path
d="M48.052,10.418q1.853.2,3.695.491-1.1.28-2.194.548-1.735-.244-3.464-.52Z"
fill="#359ace"
fillRule="evenodd"
opacity="0.919"
/>
<path
d="M43.376,11.4q-7.306,3.1-14.663,6.119,1.437-.95,2.944-1.818,3.017-1.567,6.119-2.944,1.883-.734,3.752-1.5a12,12,0,0,1,1.849.143"
fill="#3990c6"
fillRule="evenodd"
opacity="0.979"
/>
<path
d="M43.376,11.4q.735.1,1.443.231-9.849,4.053-19.685,8.14,1.743-1.193,3.579-2.251Q36.07,14.5,43.376,11.4"
fill="#3992c8"
fillRule="evenodd"
opacity="0.989"
/>
<path
d="M60.925,11.168q1.887.139,3.752.462a10.4,10.4,0,0,1-2.482.491q-1.563-.2-3.117-.462Z"
fill="#3795ca"
fillRule="evenodd"
opacity="0.902"
/>
<path
d="M55.442,11.572l3.579.491a21,21,0,0,1-2.222.548q-1.69-.237-3.377-.491,1.01-.288,2.02-.548"
fill="#3797cc"
fillRule="evenodd"
opacity="0.908"
/>
<path
d="M44.819,11.63a3.8,3.8,0,0,1,.924.115q-.832.23-1.674.433a10,10,0,0,0,1.212.2q-14.7,6.192-29.441,12.3a8,8,0,0,1,.519-1.212L23.4,20.522a1.1,1.1,0,0,1-.173.375l.058.029q.9-.622,1.847-1.155,9.837-4.088,19.685-8.141"
fill="#3894c9"
fillRule="evenodd"
opacity="0.993"
/>
<path
d="M50.361,12.322Q32.579,19.789,14.743,27.158q.528-1.257,1.1-2.482,14.746-6.1,29.441-12.3.973.125,1.934.289l2.02-.52q.558.1,1.123.177"
fill="#3697cc"
fillRule="evenodd"
opacity="0.997"
/>
<path
d="M50.361,12.323q.952.122,1.9.231Q33.258,20.507,14.223,28.429l.52-1.27Q32.578,19.79,50.361,12.323"
fill="#359bcf"
fillRule="evenodd"
opacity="0.998"
/>
<path
d="M52.266,12.553a4.4,4.4,0,0,1,.693.144q-.917.258-1.847.462,1.587.221,3.175.433.987-.189,1.963-.433a2.8,2.8,0,0,1,1.039.087l-3.695,1.616a49.1,49.1,0,0,0-16.683,5.109q-2.813,1.478-5.484,3.175-1.924,1.3-3.868,2.569-7.408,3.011-14.778,6.119.672-1.73,1.443-3.406,19.034-7.922,38.042-15.875"
fill="#349ed2"
fillRule="evenodd"
opacity="0.986"
/>
<path
d="M26.808,12.553a4.4,4.4,0,0,1-.231.635q-3.561,1.448-7.1,2.944a2.2,2.2,0,0,1,.289-.635Z"
fill="#3e82bc"
fillRule="evenodd"
opacity="0.99"
/>
<path
d="M26.577,13.188q-.585,1.372-1.212,2.713l-7.043,2.887q.562-1.341,1.155-2.656,3.54-1.5,7.1-2.944"
fill="#3d86be"
fillRule="evenodd"
opacity="0.989"
/>
<path
d="M57.289,13.246q2.171.224,4.33.548-4,.655-8.024,1.068Z"
fill="#32a3d5"
fillRule="evenodd"
opacity="0.929"
/>
<path
d="M25.365,15.9q-.558,1.463-1.212,2.886L17.11,21.674q.572-1.458,1.212-2.886Z"
fill="#3a8cc3"
fillRule="evenodd"
opacity="0.989"
/>
<path
d="M43.146,18.384a.15.15,0,0,1,.144.115,22.1,22.1,0,0,1-1.328,11.43q-.267.619-.577,1.212-1.646-2.485-3.2-5.022a17.3,17.3,0,0,0,.52-6q2.251-.8,4.441-1.735"
fill="#1d2876"
fillRule="evenodd"
opacity="0.983"
/>
<path
d="M24.152,18.788q-.343.887-.75,1.732l-7.043,2.944a17,17,0,0,1,.751-1.79Z"
fill="#3991c7"
fillRule="evenodd"
opacity="0.99"
/>
<path
d="M27.558,25.715q-1.01.678-2.078,1.27L12.549,32.354a1.1,1.1,0,0,1,.231-.52q7.369-3.107,14.778-6.119"
fill="#33a2d5"
fillRule="evenodd"
opacity="0.987"
/>
<path
d="M25.48,26.985q-2.42,1.47-4.907,2.858l-8.948,4.82-.058-.058q.471-1.144.981-2.251Z"
fill="#32a3d5"
fillRule="evenodd"
opacity="0.961"
/>
<path
d="M90.02,10.071q1.358.419,2.684.924a5.3,5.3,0,0,1-.779,1.328,31,31,0,0,0,3.291.029l.722-.722,1.7,1.357a.16.16,0,0,1,.029.2l-.548.9q-1.269.043-2.54.029a13,13,0,0,1-.173,1.616,3.3,3.3,0,0,0,.866-.058q.315-.417.664-.808l1.9,1.559q.043-2.4.029-4.791H100.7v.52q1.011.014,2.021-.029a9,9,0,0,1,.837-.953q1.435.9,2.858,1.818a10.5,10.5,0,0,1-.837,1.01q-.043,3.117-.029,6.234h-2.771v-.577H100.7v.577H97.871q.015-1.732-.029-3.464-.264.369-.549.722l-3.464.058q-.115.087,0,.173,1.311.364,2.6.808a1.6,1.6,0,0,1,.664.375.86.86,0,0,1,.058.577,13,13,0,0,1-.433,1.616q1.847.1,3.695.029a6.3,6.3,0,0,1,1.01-1.01q1.565.919,3.088,1.905-.431.532-.895,1.039-.043,3.521-.029,7.043h-2.944V29.061H93.6V30.1h-3q.029-4.561-.058-9.121a12.4,12.4,0,0,1-2.858,1.155,12,12,0,0,1-.722-1.183,10.7,10.7,0,0,0,3.2-2.338,6.5,6.5,0,0,0,.722-1.039q-1.586-.087-3.175-.058-.141-.889-.347-1.761,2.135-.043,4.272-.029a9,9,0,0,0,.115-1.616q-.722-.014-1.443.029a16.6,16.6,0,0,1-1.818,1.472,10,10,0,0,1-1.01-.808,12.8,12.8,0,0,0,2.542-4.732m10.68,3.868h2.078v3.925H100.7Zm-7.851,5.08a28,28,0,0,1,2.713,2.107q-.981.043-1.963.029v-.4q-1.357.014-2.713-.029a5.84,5.84,0,0,0,1.963-1.707m.75,3.925h7.043v1.27H93.6Zm0,3.06h7.043v1.212H93.6Z"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.977"
/>
<path
d="M80.844,10.649a.18.18,0,0,1,.173.058l1.616,2.829a.2.2,0,0,1-.058.087q-2.9.5-5.831.722v4.5q2.223.014,4.445-.029.565-.709,1.183-1.357,1.435,1.071,2.858,2.165-.276.6-.577,1.183-3.954.087-7.909.058v9.294H73.453V20.865q-3.665.014-7.331-.029-.333-.982-.577-1.992h7.909V14.63q-2.853.227-5.715.289-.131-.724-.288-1.443a95,95,0,0,0,11.43-2.223,19,19,0,0,0,1.963-.6"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.983"
/>
<path
d="M136.434,10.648q1.28.712,2.54,1.472a.7.7,0,0,1,.289.26q-.378.508-.722,1.039-.028,7.476-.058,14.951a1.83,1.83,0,0,1-1.068,1.068,5.7,5.7,0,0,1-1.963.375,1.345,1.345,0,0,0-.981-1.241,3.5,3.5,0,0,0-.75-.144,10,10,0,0,1-.087-1.328,8,8,0,0,0,1.76.087.72.72,0,0,0,.433-.26q.127-2.361.087-4.734h-1.79a13.7,13.7,0,0,1-2.684,7.793,7,7,0,0,1-1.241-.548,15.5,15.5,0,0,0,1.241-5.34q.125-6.464.086-12.931h2.713v.577q.751.014,1.5-.029a11,11,0,0,0,.695-1.067m-2.194,2.944h1.674v2.367H134.24Zm0,4.214h1.674v2.54H134.24Z"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.987"
/>
<path
d="M146.478,10.822q1.222.683,2.425,1.414a1.3,1.3,0,0,1,.346.289q-.292.453-.606.9-.16,1.468-.231,2.944a1.99,1.99,0,0,1-1.472,1.53,8.2,8.2,0,0,1-1.847.2,1,1,0,0,0-.809-1.126,6,6,0,0,1-.779-.087q-.093-.662-.144-1.328a11.5,11.5,0,0,0,1.79.029q.568-.041.4-.577.069-.706.115-1.414H142.26v5.253q1.905.014,3.81-.029l.78-.779q1.341.873,2.655,1.79a5.7,5.7,0,0,1-.866,1.1,12.9,12.9,0,0,1-1.472,4.445,6.7,6.7,0,0,0,1.443.837q.7.267,1.386.548a24.6,24.6,0,0,0-1.847,3.06,13.2,13.2,0,0,1-2.54-2.136,14,14,0,0,1-2.742,2.251,3.7,3.7,0,0,1-.577-.52,4,4,0,0,0-.029.693h-2.71V11.054h2.713v.693q1.7.014,3.406-.029.39-.463.808-.9m-4.214,9.929h.347a13.7,13.7,0,0,0,1.616,5.167,11.8,11.8,0,0,1-1.934,2.453q-.042-3.81-.029-7.62m2.021,0H145.9a15.5,15.5,0,0,1-.549,2.656,8.9,8.9,0,0,1-1.069-2.656Z"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.98"
/>
<path
d="M123.56,11.226q1.227,1.1,2.482,2.165l-.577.924q-7.043.043-14.085.029-.258-.975-.462-1.963,5.773.014,11.546-.029.566-.552,1.1-1.126"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.97"
/>
<path
d="M125.754,16.364a34,34,0,0,1,2.8,2.078,9,9,0,0,1-.549,1.241l-10.448.058,1.674.9a.116.116,0,0,1,.029.173,47,47,0,0,1-4.243,4.965q3.553.09,7.1-.144l-1.559-2.367a13,13,0,0,1,1.126-.953,33,33,0,0,1,3.723,2.8q.624.594,1.183,1.241a1.7,1.7,0,0,1,0,.635A7.7,7.7,0,0,1,125,29.844a.564.564,0,0,1-.78-.2L123.1,27.508q-6.158,1.045-12.354,1.616-.283-1.528-.491-3.06a4.07,4.07,0,0,0,2.367-1.328,18.7,18.7,0,0,0,2.973-4.993l-6.35-.058q-.322-.956-.577-1.934,7.966.014,15.933-.029a13,13,0,0,0,1.156-1.358"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.978"
/>
<path
d="M68.66,32.47q2.721-.121,2.338,2.6a2.6,2.6,0,0,1-.375.808l.4.577-.4.346a6,6,0,0,0-.491-.52,3,3,0,0,1-1.7.087,1.89,1.89,0,0,1-1.155-1.9A1.94,1.94,0,0,1,68.66,32.47m.173.577a1.22,1.22,0,0,1,1.53.981,2.3,2.3,0,0,1-.173,1.328,4.5,4.5,0,0,0-.577-.635,4,4,0,0,0-.375.4q.275.29.52.606a1.225,1.225,0,0,1-1.588-.317,1.8,1.8,0,0,1,.26-2.165Z"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.914"
/>
<path
d="M73.222,32.527h.635V36.4h-.635Z"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.922"
/>
<path
d="M77.205,32.527a2.5,2.5,0,0,1,.75.058q.772,1.889,1.443,3.81h-.693a5.6,5.6,0,0,0-.346-.952,10.5,10.5,0,0,0-1.559,0q-.164.449-.346.9a1.07,1.07,0,0,1-.693,0q.757-1.9,1.444-3.811m.346.75q.341.776.635,1.587a6.3,6.3,0,0,1-1.212,0,11,11,0,0,0,.578-1.587Z"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.918"
/>
<path
d="M81.361,32.523a2,2,0,0,1,.664.058q.945,1.341,1.847,2.713.043-1.385.029-2.771h.635v3.868a3.5,3.5,0,0,1-.635-.029l-1.876-2.684q-.043,1.356-.029,2.713h-.635Z"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.931"
/>
<path
d="M93.542,32.527h2.886a3,3,0,0,1-.029.577l-2.165,2.742q1.155.043,2.309.029v.52H93.368a3,3,0,0,1,.029-.577q1.075-1.312,2.107-2.656a17,17,0,0,0-1.963-.058Z"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.917"
/>
<path
d="M98.622,32.527h.635v1.616h1.9V32.527h.635V36.4h-.635V34.721h-1.9V36.4h-.635Z"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.925"
/>
<path
d="M104.106,32.527h.635V36.4h-.635Z"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.922"
/>
<path
d="M113.458,32.585a1.9,1.9,0,0,1,.808-.029q.5.845,1.068,1.645.522-.8,1.01-1.616a1.45,1.45,0,0,1,.808,0q-.753,1.114-1.472,2.251-.044.778-.029,1.559h-.635q.015-.751-.029-1.5-.745-1.176-1.529-2.31"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.906"
/>
<path
d="M119.115,32.527h.635q-.015,1.385.029,2.771a.884.884,0,0,0,.895.635.87.87,0,0,0,.953-.693q.043-1.356.029-2.713h.635a29,29,0,0,1-.086,3.06,1.41,1.41,0,0,1-1.5.866,1.37,1.37,0,0,1-1.5-.808,30,30,0,0,1-.09-3.118"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.922"
/>
<path
d="M124.6,32.528a3.5,3.5,0,0,1,.635.029l1.876,2.684q.043-1.356.029-2.713h.635V36.4a2,2,0,0,1-.664-.058q-.9-1.372-1.847-2.713-.044,1.386-.029,2.771H124.6Z"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.931"
/>
<path
d="M136.838,32.527h2.656V33.1h-2.021v1.039h1.9v.577h-1.9v1.674h-.635Z"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.904"
/>
<path
d="M141.572,32.527h.635q-.014,1.357.029,2.713a.854.854,0,0,0,.924.693.9.9,0,0,0,.924-.635q.043-1.385.029-2.771h.635a30,30,0,0,1-.087,3.117,1.37,1.37,0,0,1-1.5.808,1.35,1.35,0,0,1-1.5-.866,29,29,0,0,1-.089-3.059"
className="fill-on-surface"
fillRule="evenodd"
opacity="0.921"
/>
</g>
</svg>
)
}
export default Logo
================================================
FILE: apps/docs/src/components/Search.tsx
================================================
'use client'
import '@docsearch/css'
import { Button, Icon } from 'actify'
import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react'
import { useCallback, useEffect, useRef, useState } from 'react'
import Link from 'next/link'
import { createPortal } from 'react-dom'
type DocSearchProps = {
appId: string
apiKey: string
indexName: string
}
const DocSearch = ({ appId, apiKey, indexName }: DocSearchProps) => {
const searchButtonRef = useRef<HTMLButtonElement>(null)
const [isOpen, setIsOpen] = useState(false)
const [navigator, setNavigator] = useState<Navigator>()
const [initialQuery, setInitialQuery] = useState('')
useEffect(() => {
setNavigator(window.navigator)
}, [])
const onOpen = useCallback(() => {
setIsOpen(true)
}, [setIsOpen])
const onClose = useCallback(() => {
setIsOpen(false)
}, [setIsOpen])
const onInput = useCallback(
(event: any) => {
setIsOpen(true)
setInitialQuery(event.key)
},
[setIsOpen, setInitialQuery]
)
useDocSearchKeyboardEvents({
isOpen,
onOpen,
onClose,
onInput,
searchButtonRef
})
return (
<>
<style>
{`
:root{
--docsearch-primary-color: var(--md-sys-color-primary);
}
.DocSearch-Modal{
--docsearch-modal-background: var(--md-sys-color-surface);
--docsearch-hit-active-color: var(--md-sys-color-on-primary);
--docsearch-footer-background: var(--md-sys-color-surface-container);
}
`}
</style>
<Button
variant="text"
onPress={onOpen}
ref={searchButtonRef}
className="ml-0 md:ml-2 lg:ml-4"
>
<Icon>search</Icon>
<span className="font-semibold hidden sm:inline">Search</span>
<span className="hidden md:block text-xs border border-outline p-1.5 rounded-full">
{navigator?.platform == 'Windows' || navigator?.platform == 'Win32'
? 'Ctrl'
: '⌘'}
+K
</span>
</Button>
{isOpen &&
createPortal(
<DocSearchModal
appId={appId}
apiKey={apiKey}
indexName={indexName}
onClose={onClose}
initialQuery={initialQuery}
initialScrollY={window.scrollY}
placeholder="Search Actify"
hitComponent={({ hit, children }) => (
<Link href={hit.url}>
<>{children}</>
</Link>
)}
/>,
document.body
)}
</>
)
}
export default DocSearch
================================================
FILE: apps/docs/src/components/Sponsors.tsx
================================================
import { LinkButton } from 'actify'
import NgrokerLogo from '@/components/NgrokerLogo'
import TaildoorLogo from '@/components/TaildoorLogo'
const Sponsors = () => {
return (
<div className="max-w-7xl mx-auto">
<h2 className="text-secondary text-2xl mb-4 text-center">Sponsors</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 items-center">
<a tabIndex={-1} target="_blank" href="https://www.taildoor.com">
<LinkButton
variant="text"
className="[--md-text-button-container-height:64px] [--md-text-button-container-shape:0]"
>
<TaildoorLogo />
</LinkButton>
</a>
<a tabIndex={-1} target="_blank" href="https://ngroker.com">
<LinkButton
variant="text"
className="[--md-text-button-container-height:64px] [--md-text-button-container-shape:0]"
>
<NgrokerLogo />
</LinkButton>
</a>
</div>
</div>
)
}
export default Sponsors
================================================
FILE: apps/docs/src/components/SyntaxHighlighter.tsx
================================================
'use client'
import { Icon, IconButton } from 'actify'
import React, { useState } from 'react'
import { cn } from '@/utils/cn'
import { fira_code } from '@/app/fonts'
import { getSingletonHighlighter } from 'shiki'
import { useMounted } from '@/hooks/useMounted'
import { useTheme } from 'next-themes'
const langs = ['shell', 'css', 'js', 'ts', 'jsx', 'tsx']
type Langs = (typeof langs)[number]
const SyntaxHighlighter = (props: React.ComponentProps<'div'>) => {
const mounted = useMounted()
const { theme, systemTheme } = useTheme()
const { lang, children, className } = props
const [code, setCode] = useState('')
const [iconName, setIconName] = useState('content_copy')
if (mounted) {
const highlight = async () => {
const highlighter = await getSingletonHighlighter({
langs,
themes: ['catppuccin-latte', 'catppuccin-mocha']
})
const _code = highlighter.codeToHtml(children as string, {
themes: {
light: 'catppuccin-latte',
dark: 'catppuccin-mocha',
system:
systemTheme == 'dark' ? 'catppuccin-mocha' : 'catppuccin-latte'
},
lang: lang as Langs,
defaultColor: theme
})
setCode(_code)
}
highlight()
}
const copyCode = () => {
navigator.clipboard.writeText(children as string).then(
() => {
setIconName('check')
setTimeout(() => {
setIconName('content_copy')
}, 2000)
},
() => {
setIconName('content_copy')
setTimeout(() => {
setIconName('copy')
}, 2000)
}
)
}
return (
<div
className={cn(
fira_code.variable,
['group', 'relative', 'rounded-lg', 'shadow-lg', 'overflow-hidden'],
className
)}
>
<div className="absolute top-3 right-6 cursor-pointer opacity-0 transition-opacity group-hover:opacity-100">
<IconButton variant="filled" onPress={copyCode} color="secondary">
<Icon>{iconName}</Icon>
</IconButton>
</div>
<div
dangerouslySetInnerHTML={{ __html: code }}
className="[&_code]:[fontFamily:var(--font-fira-code)] [&_code]:block [&_code]:w-full overflow-x-hidden h-fit max-h-[calc(100vh-234px)] [&_pre]:p-4 [&_pre]:!my-0"
/>
</div>
)
}
export default SyntaxHighlighter
================================================
FILE: apps/docs/src/components/TableOfContents.tsx
================================================
'use client'
import { useEffect, useState } from 'react'
const generateSlug = (str: string) => {
str = str?.replace(/^\s+|\s+$/g, '')
str = str?.toLowerCase()
const from = 'àáãäâèéëêìíïîòóöôùúüûñç·/_,:;'
const to = 'aaaaaeeeeiiiioooouuuunc------'
for (let i = 0, l = from.length; i < l; i++) {
str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i))
}
str = str
?.replace(/[^a-z0-9 -]/g, '')
.replace(/\s+/g, '-')
.replace(/-+/g, '-')
return str
}
type TocProps = {
slug: string
title: string
}[]
const TableOfContents = ({ markdown }: { markdown?: string }) => {
const hash = ''
const [toc, setToc] = useState<TocProps>([])
useEffect(() => {
// #{1,6}\s+[^#\d\r\n]+/g
const regXHeader = /(#{1,6})\s+(.*)/gm
if (markdown) {
const matches = markdown.match(regXHeader) ?? []
const headings = matches.map((heading) => {
const headingText = heading.replace(/#/g, '')
const slug = generateSlug(headingText)
return {
slug,
title: headingText
}
})
setToc(headings)
}
}, [markdown])
return (
<nav className="fixed bottom-14 right-0 w-60 h-[calc(100vh-120px)] hidden lg:grid lg:place-content-center">
<ul className="m-0 list-none text-sm">
{toc.map((item) => (
<li
key={item.slug}
className={`${item.slug == hash.slice(1) ? 'border-primary' : ''}`}
>
<a
href={`#${item.slug}`}
className={`${
item.slug == hash.slice(1) ? 'text-primary font-bold' : ''
}`}
>
{item.title}
</a>
</li>
))}
</ul>
</nav>
)
}
export default TableOfContents
================================================
FILE: apps/docs/src/components/TaildoorLogo.tsx
================================================
const TaildoorLogo = () => {
return (
<svg
height="32"
viewBox="0 0 1675.615 400"
xmlns="http://www.w3.org/2000/svg"
>
<g transform="translate(-21.005 113)">
<path
d="M300,400H100l-1.668-.027-1.711-.028q-1.38-.019-2.761-.045h-.011l-4.039-.2-.732-.036c-.452-.021-.851-.041-1.189-.058l-2.243-.191-3.517-.3-2.335-.285-.472-.058-2.763-.337-5.37-.88-.535-.112-.52-.108L66.9,396.66h-.011L66,396.475l-4.98-1.26-4.78-1.47-.632-.229c-.559-.2-1.115-.4-1.658-.6h-.008l-.351-.128-1.94-.7-.592-.249-1.151-.485-.143-.061-2.513-1.057-3.91-1.918-.1-.048-.012-.006-.18-.088-.5-.278c-.654-.364-1.346-.753-2.222-1.245l-.011-.006-1.27-.713-3.81-2.44-1.1-.807q-1.254-.915-2.506-1.834l-.887-.734-2.533-2.1-.012-.011,0-.008-.6-.568-.771-.725-.875-.824L25,375l-.023-.025-.012-.013-.012-.013-.018-.018-.014-.015-2.95-3.136-2.056-2.48-.775-.937-.465-.636-.715-.978v-.006l-.245-.336L16.5,364.75l-2.44-3.811-.78-1.393L11.856,357l-.036-.064-2.06-4.2-1.188-2.827-.364-.865-.3-.708v-.006l-.156-.433c-.292-.8-.585-1.613-.894-2.473l-.066-.184c-.213-.589-.4-1.1-.54-1.5l-.057-.185-.121-.391-1.292-4.2-1.26-4.98v-.007l-.1-.474q-.443-2.1-.876-4.207l-.1-.488L2.182,327.2c-.161-.978-.347-2.117-.614-3.756L1.14,320l-.26-2.135-.08-.973c-.058-.671-.116-1.361-.18-2.12L.6,314.488l-.032-.373.124,1.446-.222-2.609-.01-.117-.062-.729L.305,310.2l-.015-.315-.074-1.51c-.034-.687-.073-1.489-.107-2.225l-.064-3.94L.005,300V100c.028-1.944.059-4.02.1-6.15.08-1.66.16-3.31.29-5.96l.2-2.352.082-.961.016-.19c.053-.694.112-1.437.187-2.257L1,81.119l.556-4.559.515-3.14.084-.512.282-1.718.132-.635.011-.054c.269-1.3.548-2.637.937-4.492.2-.8.395-1.572.721-2.856l.019-.053.3-1.162q.1-.38.2-.806l.006-.024.019-.076,1.47-4.78,1.059-2.929L7.7,52.266l.018-.049.2-.558.461-1.1,1.189-2.828.2-.476,2.06-4.2,2.24-4,2.4-3.743.022-.033.022-.033,2.641-3.61.655-.794.963-1.162,1.211-1.464c1-1.064,2.13-2.269,3.03-3.22l3.028-2.849.192-.181.112-.093.161-.133,2.2-1.821.271-.224.095-.078.581-.481,1.793-1.311c.489-.358,1.074-.787,1.818-1.329l1.192-.763.047-.03.024-.015c.63-.4,1.414-.909,2.546-1.631.336-.19.677-.38,1.071-.6h.007l.266-.149.879-.492c.592-.333,1.216-.684,1.776-.995l.367-.18.412-.2,3.421-1.678,2.211-.93,2.189-.92,1.454-.527c.782-.283,1.743-.632,3.136-1.134l4.78-1.47,1.086-.276c1.071-.272,2.285-.58,3.894-.984l.357-.075.277-.058c1.3-.273,2.858-.6,4.546-.947.381-.064.764-.126,1.2-.2h.012l.221-.036,3.933-.644,5.569-.68L84.21.7C85.2.62,86.3.525,87.892.392L89.063.334C90.105.282,91.489.215,93.853.1,95.744.066,97.622.038,99.437.011h.025L100,0h200c.849.012,1.723.026,2.672.042h.1c.964.015,2.057.032,3.377.056.762.034,1.536.072,2.608.125l2.943.145.361.018h.04l3.429.292.084.007.083.007,2.164.185c.785.092,1.574.189,2.769.336l.137.017,2.664.327.415.068,4.954.812.624.13.062.013.954.2.827.171c1.092.226,2.035.421,2.714.568l4.98,1.26,3.794,1.166.986.3,1.171.422c1.012.365,2.159.779,3.419,1.238l2.227.936.283.119.033.014,1.857.781,3.751,1.84.449.22.444.248.022.012c.739.413,1.659.927,3.534,1.98l3.811,2.44,2.314,1.693,1.3.948,1.273,1.053,2.147,1.777.528.5.4.374.554.522L375,25c.234.248.467.5.742.788l.707.753.18.191.008.009c.458.485.931.986,1.392,1.48l.741.9.329.4.015.017c.524.632,1.087,1.311,1.746,2.11l.141.193L381.849,33l1.651,2.258c.258.4.515.8.81,1.265l.366.571,1.264,1.974.443.79.173.308.019.033c.531.948,1.081,1.927,1.606,2.868.38.768.748,1.519,1.257,2.559l.03.062.773,1.579,1.85,4.4c.166.455.331.913.509,1.406l.138.383.025.068.988,2.733,1.47,4.78.65,2.567c.173.681.371,1.463.61,2.413q.193.911.382,1.819c.211,1.008.433,2.076.7,3.361l.88,5.37c.233,1.89.5,4.033.68,5.57l.265,3.091.128,1.523.1,1.145c.047.915.091,1.826.147,2.979l.01.205.016.332c.038.785.078,1.594.117,2.443.038,1.927.066,3.84.093,5.69V300l-.041,2.542-.059,3.608-.119,2.454-.037.75-.04.853.025-.514-.118,2.417-.167,1.958-.154,1.818-.169,1.985-.519,4.249-.075.61a.365.365,0,0,1-.01.085l-.014.115-.026.217-.036.3-.121.739-.76,4.631-.155.744L397,331.5q-.178.87-.364,1.754l.212-1.015-.365,1.751-.837,3.309-.423,1.67-1.168,3.8-.3.98-.031.086v.012l-.026.07-.006.019-.006.018v.011l-.047.129-.393,1.086c-.306.855-.565,1.571-.837,2.32l.52-1.437-.823,2.276-.019.044-.008.019-.027.063-.119.284-.171.406-1.522,3.585-2.06,4.2-1.38,2.46-.245.436-.02.036-.044.079-.553.987-.4.63L383.5,364.75l-.345.471-.048.066-.042.058-.007.01-.035.048-2.163,2.957-.369.446-1.921,2.321-.186.225-.067.081-.05.06-.121.147-.116.14L375,375l-.243.229-.1.1-.021.019-.013.013-.037.035-.019.018-.013.013-.23.217-2.544,2.391-2.706,2.24-.714.59-.329.241-.118.086-.159.116-1.854,1.358-1.15.839-2.066,1.323-.527.337-.08.051-.014.009-.035.022.129-.083-.129.083-.028.017-1.063.68-2.865,1.6-1.135.635-2.1,1.03-2.1,1.03-4.4,1.85-2.208.8-2.382.861-1.162.357-3.615,1.118-1.521.385,1.33-.337-.991.253c-.968.245-1.932.49-2.839.718l-.958.242-1.956.408-3.225.672-1.59.261-3.779.619-2.545.311-3.025.37c-.494.044-.987.086-1.47.127l-1.822.155-1.479.126-.989.084-5.96.29c-1.665.032-3.3.057-4.89.081h-.015ZM60,60V340c88.286-12.609,152.345-21.761,208.863-29.836l.145-.021.9-.128,68.01-9.715.169-.024.04-.006.041-.006h.033l.047-.007.322-.046h.01l.053-.008h.013l.077-.011.088-.013h.005l.048-.007.833-.119.308-.053V100l-61.552-8.793-26.548-3.793C196.478,79.5,127.5,69.64,60,60M307.527,399.835l3.082-.15Zm50.31-12.155.239-.134,2.865-1.6-.328.186c-.725.4-1.544.861-2.776,1.548m22.323-18.471.332-.4.369-.446Zm18.74-49.563.217-1.776Z"
transform="translate(21 -113)"
fill="currentColor"
/>
<path
d="M200.005,137l-5.13.16-4.88.5-4.63.82-4.39,1.14-4.14,1.48-3.9,1.8-3.65,2.14-3.4,2.46-3.16,2.79-2.91,3.11-2.67,3.45-2.42,3.77-2.17,4.1-1.93,4.43-1.68,4.76-1.44,5.09,4.02-4.84,4.18-4.02,4.35-3.2,4.51-2.38,4.68-1.56,4.84-.73,5,.08,5.17.9,2.89.92,2.72,1.24,5.03,3.28,4.71,4.12,4.67,4.65,3.96,3.97,4.26,3.96,4.71,3.79,5.29,3.46,6.03,2.98,6.92,2.32,3.83.87,4.11.65,4.4.4,4.72.14,5.13-.17,4.88-.49,4.63-.82,4.39-1.15,4.14-1.47,3.9-1.81,3.65-2.13,3.4-2.46,3.16-2.79,2.91-3.12,2.67-3.44,2.42-3.78,2.17-4.1,1.93-4.43,1.68-4.76,1.44-5.09-4.02,4.84-4.18,4.03-4.35,3.19-4.51,2.38-4.68,1.56-4.84.74-5-.08-5.17-.9-2.89-.92-2.72-1.24-5.02-3.29-4.72-4.11-4.68-4.65-3.95-3.97-4.26-3.96-4.7-3.79-5.3-3.47-6.03-2.97-6.91-2.33-3.84-.87-4.11-.64-4.4-.4Z"
transform="translate(21 -113)"
fill="currentColor"
fillRule="evenodd"
/>
<path
d="M147.5,200l-5.13.16-4.88.5-4.63.82-4.39,1.14-4.14,1.48-3.9,1.81-3.65,2.13-3.4,2.46-3.16,2.79-2.91,3.12-2.67,3.44-2.42,3.77-2.17,4.11-1.93,4.43-1.68,4.76L95,242l4.02-4.84,4.18-4.02,4.35-3.2,4.51-2.38,4.68-1.56,4.84-.73,5,.08,5.17.9,2.89.92,2.72,1.24,5.03,3.28,4.71,4.12,4.67,4.65,3.96,3.97,4.26,3.96,4.71,3.79,5.29,3.46,6.03,2.98,6.92,2.32,3.83.87,4.11.65,4.4.4L200,263l5.13-.17,4.88-.49,4.63-.82,4.39-1.15,4.14-1.47,3.9-1.81,3.65-2.13,3.4-2.46,3.16-2.79,2.91-3.12,2.67-3.44,2.42-3.77,2.17-4.11,1.93-4.42,1.68-4.76L252.5,221l-4.02,4.84-4.18,4.02-4.35,3.2-4.51,2.38-4.68,1.55-4.84.74-5-.08-5.17-.9-2.89-.92-2.72-1.24-5.02-3.29-4.72-4.11-4.68-4.65-3.95-3.97-4.26-3.96-4.7-3.79-5.3-3.47-6.03-2.97-6.91-2.33-3.84-.87-4.11-.64-4.4-.4Z"
transform="translate(21 -113)"
fill="currentColor"
fillRule="evenodd"
/>
<path
d="M650.056,117.733h-80.73v199.26h-30.05V117.733h-80.74V91.023h191.52Z"
transform="translate(21 -113)"
fill="currentColor"
fillRule="evenodd"
/>
<path
d="M684.205,321.7h-.324l-.231-.006-4.845-.134-4.192-.537-1.118-.143-2.852-.654-2.334-.534,2.334.534.7.16-3.031-.7-1.283-.429-.892-.3-1.132-.381-1.737-.583-4.85-2.17-1.251-.716-3.38-1.933-4.36-3.1-1.317-1.152-1.287-1.125c-.489-.427-.98-.856-1.455-1.273l-.424-.446-3.316-3.475-3.24-4.189-1-1.62-.887-1.444-.847-1.377-2.05-4.291-.015-.031-.093-.2-.092-.193-1.425-4.071-.315-.9-.076-.319-.079-.334-.288-1.215-.8-3.36.007.028-.007-.03-.068-.5-.067-.486-.22-1.616-.394-2.879-.1-2.3-.075-1.72-.074-1.733.112-4.037.012-.469v-.005l.005-.2c.075-.881.153-1.764.236-2.7v-.01l.049-.553.1-1.207c.164-1.092.349-2.33.64-4.24l.7-3.092.21-.929.481-1.564.516-1.683.163-.532.008-.019.051-.128v-.007l.021-.052,1.337-3.344.541-1.052c.284-.565.635-1.259,1.148-2.274l1.94-3.091.017-.021c.376-.453.75-.9,1.2-1.447l3.661-4.412c1.051-.963,2.1-1.917,3.017-2.759l.152-.139,2.451-2.242,6.27-4.31,4.25-2.129,2.58-1.291.062-.023.015-.006c1.481-.553,3.012-1.125,5.207-1.941,1.408-.526,2.665-.993,3.736-1.39,1.3-.379,2.609-.757,4.03-1.168,1.742-.506,3.394-.983,5.2-1.5,3.449-.732,6.835-1.437,9.4-1.97l.8-.106,5.756-.756,2.979-.388c3.112-.328,6.25-.65,11.05-1.14,2.377-.21,4.715-.411,7.951-.689h.021l.739-.064,2.739-.236,3.248-.228,1.87-.131,6.459-.453.264-.018c2.06-.119,4.143-.236,6.781-.383h.084l5.252-.294.133-.007V200.6l-.021-.791-.041-1.309-.055-2.056-.61-4.1-1.111-3.99-1.589-3.84-1-1.6-.888-1.414-2.291-2.7-2.64-2.351-.392-.259-2.578-1.7-.417-.2c-.7-.341-1.5-.73-3.042-1.488l-.78-.293.357.134c-.369-.137-.764-.286-1.257-.472l-.016-.006-.229-.086.614.229-1.683-.631-.6-.227-1.336-.364-2.374-.647h-.011l-1.747-.3-2.042-.351h-.013l-1.883-.2c-1.557-.161-3.026-.315-4.223-.441l-2.731-.284-6.6-.215-2.3-.075-2.55.1-3.77.143-6.28.58-1.433.206-4.818.694-6.189,1.23-5,1.294-8.7,2.252-.053.014-.057.015-.306.079-.33.085-11.825,4.051-2.274.779h-1.52v-28.98c.852-.218,1.705-.433,2.5-.633l2.138-.537c1.357-.3,2.8-.619,5.56-1.22l.65-.128,3.028-.6,2.822-.555.217-.039.085-.015c2.5-.452,5.079-.919,7.128-1.285,1.375-.212,2.728-.418,3.985-.609,1.438-.221,2.624-.4,3.735-.571,1.095-.123,2.2-.243,4.192-.46l.272-.03,3.306-.36c1.563-.108,3.116-.211,4.7-.316l3.1-.2c2.125-.051,4.268-.1,7.819-.18.783.008,1.552.019,2.527.032h.021l.419.005.56.007c1.213.015,2.588.031,4.313.055l.081.005c2.744.184,5.581.375,7.749.525l1.579.19h.022l.327.04,2.269.278h.01l3.573.439c1.135.2,2.249.4,3.66.647h.01l1.254.223.82.145,1.986.353,6.12,1.61,5.91,2.229,5.639,2.84c1.5.957,3.139,2.008,5.32,3.41,1.166.971,2.329,1.94,4.521,3.77l.131.143,1.274,1.385.008.008c.891.968,1.733,1.882,2.547,2.774.967,1.362,1.93,2.73,3.37,4.78.853,1.615,1.7,3.246,2.73,5.21q.714,1.9,1.42,3.8l.006.016c.235.63.488,1.309.765,2.057l.061.254c.427,1.773.868,3.606,1.509,6.287l.227,1.729.714,5.46.243,6.172.01.265.056,1.433V316.98h-28.38V298.92l-.341.237c-.516.357-1.05.726-1.719,1.183l-1.03.717-1.37.953-.626.445-.728.516q-.491.354-.987.7l-.377.268-3.06,2.19-5.683,3.73-.282.185-.115.076L725,312.079l-.147.077.147-.077-.19.1-.295.154L722.3,313.5l-8.036,3.334-.015.006-7.555,2.265-.785.235-1.456.3c-.741.153-1.659.34-2.855.581l1.742-.354-2.8.569-2.4.337,1.041-.146-.18.027-.545.077h-.024l-.214.03h-.023l-1.487.209-1.578.222-3.657.282-1.794.138-3.418.056Zm-18.541-35.82,1.992,1.9,2.349,1.72.25.144c.508.293,1.111.638,2.38,1.356.561.244,1.129.487,1.629.7l.313.134.988.425c1.035.338,1.967.64,2.849.923l.361.116,1.238.284h.014c.941.216,1.753.4,2.247.513h.006l.171.026.331.051,2.639.4.036.005.608.093,4.08.34,3.953.108.326.009h.091l5.737-.252.193-.008.231-.01.673-.029.247-.011,6.98-1.08,6.819-1.85,1.211-.48,2.215-.877,3.166-1.253.623-.312q2.718-1.351,5.427-2.718l.53-.3q2.106-1.195,4.206-2.4l.313-.179.422-.242.4-.228,5.68-3.67,5.47-3.98v-47.2c-2.541.158-4.644.29-6.82.429l-1.244.087-6.146.433-2.651.206-.986.076c-1.216.094-2.593.2-4.332.338-2.351.193-5.016.412-8.55.71l-.44.039h-.008c-1.708.15-3.473.3-6.623.591-.916.121-1.846.246-2.962.4l-4.068.544-2.653.479c-1.139.205-2.5.45-4.327.781l-3.3.749-3.618.822-5.45,1.76-5.171,2.42-3.3,2.088-.134.085-.069.043-1.315.828-3.209,2.629-1.221,1-.021.025-.051.061c-.755.912-1.493,1.81-2.206,2.678l-.019.023-.5.606-.526.637c-.2.388-.391.775-.612,1.216l-.143.284-1.616,3.21-.559,2.137-.007.028v.012l-.074.279-.116.442c-.182.693-.4,1.51-.66,2.522-.052.638-.1,1.264-.169,2.131v.011l-.013.17-.3,3.787c.015.4.031.8.048,1.191l.023.565c.021.544.044,1.161.07,1.775l.41,3.3c.174.787.348,1.565.69,3.081l.3.9.184.545.006.018c.134.4.285.855.467,1.393l1.239,2.62.233.372.74,1.181.156.25.381.608c.36.438.724.879,1.033,1.252l.757.918.068.065Zm22.841,35.749,1.173-.019c-.39.008-.776.014-1.173.021Zm20.053-3.083,5.69-1.706c-1.909.577-3.857,1.16-5.69,1.708Zm7.891-2.619,2.412-1q-1.109.463-2.412,1m16.645-8.655,1.725-1.132c-.546.36-1.084.713-1.725,1.133Z"
transform="translate(21 -113)"
fill="currentColor"
/>
<path
d="M859.025,119.1h-32.17V89.511h32.17Z"
transform="translate(21 -113)"
fill="currentColor"
fillRule="evenodd"
/>
<path
d="M857.205,316.99h-28.53V147.48h28.53Z"
transform="translate(21 -113)"
fill="currentColor"
fillRule="evenodd"
/>
<path
d="M942.491,316.99h-28.53V80.86h28.53Z"
transform="translate(21 -113)"
fill="currentColor"
fillRule="evenodd"
/>
<path
d="M1053.29,321.7l-4.707-.236-1.735-.086-.948-.048h-.022l-1.293-.2-3.025-.475-2.627-.414-.032-.005-3.648-1-2.962-.815-3.386-1.394-1.6-.659-.221-.091h-.011l.4.165-1.4-.578h-.009l-.869-.489-1.534-.864-.455-.257-2.963-1.667-5.43-4.02-.55-.517c-.7-.654-1.4-1.318-2.15-2.022l-.024-.023-.915-.862-.444-.418-.833-.784-.13-.122-2.7-3.178-.262-.308-.086-.1-.009-.01-.112-.132-.006-.007-1.472-1.733-1.008-1.478c-1.081-1.583-2.419-3.542-3.171-4.653l.077.113-.077-.113-.006-.011-.894-1.653-.439-.809-.135-.248c-.6-1.1-1.276-2.357-2.145-3.97l-1.059-2.5-.377-.891-.8-1.884-.835-1.973-.336-1.045-2.174-6.775-1.95-8.38-.981-6.32-.409-2.631-.84-9.509-.113-4.238-.056-2.1-.1-3.745.26-9.77c.239-2.08.48-4.16,1.12-9.69l1.362-6.609.608-2.951c.925-3.13,1.848-6.218,2.79-9.37l2.782-6.88.125-.309.014-.035.1-.238.013-.031.018-.044.01-.025.02-.048.009-.024.005-.013.038-.093q1.909-3.7,3.829-7.39l.04-.061.1-.154.1-.154.031-.048.03-.046.015-.024.015-.023q2.086-3.244,4.174-6.483l.747-.949.071-.09,1.475-1.876v-.01l.309-.392V169.7l.005-.007.078-.1.061-.077.024-.031.059-.075.01-.012.049-.062.033-.042.028-.035.554-.7.048-.061,1.6-2.035c.506-.515,1.012-1.031,1.528-1.553.984-1,2.118-2.154,3.741-3.8l1.3-1.068,4.5-3.682,6.279-4.09c1.562-.8,3.1-1.582,4.919-2.507.71-.361,1.31-.665,1.782-.9,1.637-.636,3.294-1.274,4.625-1.787l.836-.322.269-.1,1.106-.426,7.06-1.9.141-.022.1-.016c2.181-.347,4.376-.7,6.991-1.111l7.32-.381,5.98.111,5.95.509c.915.137,1.778.268,2.564.389,1.406.213,2.469.375,3.346.511q1.373.3,2.759.608c.672.148,1.722.379,3.081.682.873.27,1.779.552,3.029.942.731.227,1.569.487,2.561.8l4.392,1.633.829.308.269.1c1.883.815,3.849,1.666,5.37,2.329l5.25,2.61V80.86h28.53l-.01,236.13H1107.92V299.23q-2.965,2.431-5.94,4.85l-6.27,4.379-6.58,3.9-.646.322-.526.263-5.678,2.837-6.989,2.62-1.648.428-4.094,1.065-1.448.376-4.351.651-.883.131-2.127.319-3.966.175h-.078l-.678.03-.511.023Zm-35.158-68.44.035.273v.011l.273,1.452.063.333.009.05v.01c.255,1.356.518,2.759.781,4.115.384,1.476.784,3.009,1.45,5.51.294.857.592,1.7,1.31,3.75l.46,1.31.264.579.017.036.808,1.77c.266.585.593,1.3,1.012,2.214.368.645.739,1.28,1.413,2.435v.007l.045.078.958,1.641,1.092,1.451,1.678,2.229,3.16,3.19,3.079,2.341.313.239.035.026.124.094,2.3,1.284,1.655.926c.718.287,1.428.568,2.115.84l.1.041,2.112.839c1.264.33,2.539.66,4.7,1.218h.006c.65.1,1.359.2,2.233.326.89.129,1.831.265,2.877.414l1.17.051.8.036c.883.04,1.8.081,2.865.125l.579.024h.083l4.856-.292.619-.037.257-.015.264-.016h.084l.147-.009h.1l.58-.1.164-.027h.006c1.727-.287,3.514-.583,5.491-.916l.629-.172.23-.062c.908-.248,1.916-.523,3.334-.912.637-.174,1.278-.349,1.906-.523l5.91-2.29.869-.411,1.282-.606.018-.009.6-.283,2.238-1.057.053-.025.657-.311.112-.053.2-.1.107-.05.064-.035,1.585-.881,1.773-.986.965-.536.029-.015.028-.015,1.477-.821.253-.163c.738-.469,1.546-.99,2.884-1.854l.021-.014.392-.253,1.69-1.09.46-.3.47-.347c.921-.676,1.839-1.355,2.728-2.011l.915-.676.529-.392.132-.1.147-.109.133-.1.012-.009.39-.287v-97.28l-1.057-.427c-3.353-1.355-6.519-2.636-9.083-3.662l-.222-.065-.065-.019-1.684-.489-.093-.027-.039-.011c-1.753-.509-4.155-1.207-8.4-2.429-1.814-.284-3.659-.567-6.718-1.035h-.018l-3.154-.483-9.99-.46-1.963.091c-1.041.046-2.229.1-3.867.179l-.236.033c-1.053.148-2.247.316-5.254.747l-5.17,1.3-4.83,1.83-3.415,1.776-.5.26-.586.3-.532.366-.008.005c-1.106.76-2.246,1.545-3.629,2.5l-3.84,3.39-.256.285-.015.016q-1.62,1.8-3.23,3.618l-.4.551-.015.022-.124.173c-.942,1.319-2,2.8-2.6,3.644l-.006.011-.015.026-.006.011-.006.011q-1.232,2.184-2.455,4.374l-.019.035-.2.362-.011.024c-.463,1.054-.941,2.144-2.289,5.236l-.218.662-.012.037-1.65,5-1.461,6.14-.025.157-.258,1.628v.01c-.233,1.466-.473,2.982-.755,4.774l-.63,7.01-.009.313q-.1,3.568-.191,7.137c.031,1.593.067,3.188.1,4.73l.019.831.018.808.021.961c.14,2.083.288,4.166.445,6.37v.012l.035.488c.142,1.154.289,2.3.474,3.761v.018l.175,1.376Zm20.085,66.788c-1.514-.413-3
gitextract_0nomnhu6/ ├── .github/ │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.md │ │ ├── custom.md │ │ └── feature_request.md │ └── workflows/ │ └── docs-deploy.yml ├── .gitignore ├── .npmrc ├── .prettierrc ├── LICENSE.md ├── README.md ├── apps/ │ └── docs/ │ ├── .gitignore │ ├── content/ │ │ ├── components/ │ │ │ ├── accordion.md │ │ │ ├── app-bars/ │ │ │ │ ├── bottom-app-bar.md │ │ │ │ └── top-app-bar.md │ │ │ ├── autocomplete.md │ │ │ ├── avatar.md │ │ │ ├── badges.md │ │ │ ├── before-after.md │ │ │ ├── buttons/ │ │ │ │ ├── button.md │ │ │ │ ├── fab.md │ │ │ │ ├── icon-button.md │ │ │ │ └── segmented-button.md │ │ │ ├── cards.md │ │ │ ├── carousel.md │ │ │ ├── checkbox.md │ │ │ ├── chips.md │ │ │ ├── date-pickers.md │ │ │ ├── dialogs.md │ │ │ ├── divider.md │ │ │ ├── focus-ring.md │ │ │ ├── label.md │ │ │ ├── lists.md │ │ │ ├── menus.md │ │ │ ├── navigation/ │ │ │ │ ├── navigation-bar.md │ │ │ │ ├── navigation-drawer.md │ │ │ │ └── navigation-rail.md │ │ │ ├── pagination.md │ │ │ ├── progress/ │ │ │ │ ├── circular-progress.md │ │ │ │ └── linear-progress.md │ │ │ ├── radio.md │ │ │ ├── ripple.md │ │ │ ├── select.md │ │ │ ├── sheets/ │ │ │ │ ├── bottom-sheets.md │ │ │ │ └── side-sheets.md │ │ │ ├── sliders.md │ │ │ ├── snackbar.md │ │ │ ├── swiper.md │ │ │ ├── switch.md │ │ │ ├── table.md │ │ │ ├── tabs.md │ │ │ ├── terminal.md │ │ │ ├── text-fields.md │ │ │ ├── time-pickers.md │ │ │ └── tooltips.md │ │ └── getting-started/ │ │ ├── icons.md │ │ ├── installation.md │ │ ├── theme.md │ │ └── why-actify.md │ ├── next.config.mjs │ ├── package.json │ ├── postcss.config.mjs │ ├── src/ │ │ ├── app/ │ │ │ ├── (docs)/ │ │ │ │ ├── [...slug]/ │ │ │ │ │ └── page.tsx │ │ │ │ └── layout.tsx │ │ │ ├── app.css │ │ │ ├── fonts.ts │ │ │ ├── layout.tsx │ │ │ ├── page.tsx │ │ │ └── template.tsx │ │ ├── components/ │ │ │ ├── App.tsx │ │ │ ├── AppDrawer.tsx │ │ │ ├── Aside.tsx │ │ │ ├── Console.tsx │ │ │ ├── DocPreview.tsx │ │ │ ├── DocTabs.tsx │ │ │ ├── DocUsage.tsx │ │ │ ├── Dropdown.tsx │ │ │ ├── EditOnGitHub.tsx │ │ │ ├── Footer.tsx │ │ │ ├── GettingStarted.tsx │ │ │ ├── Header.tsx │ │ │ ├── Logo.tsx │ │ │ ├── Markdown.tsx │ │ │ ├── NavLink.tsx │ │ │ ├── NgrokerLogo.tsx │ │ │ ├── OpenInCodeSandbox.tsx │ │ │ ├── OpenInStackblitz.tsx │ │ │ ├── QzyLogo.tsx │ │ │ ├── Search.tsx │ │ │ ├── Sponsors.tsx │ │ │ ├── SyntaxHighlighter.tsx │ │ │ ├── TableOfContents.tsx │ │ │ ├── TaildoorLogo.tsx │ │ │ ├── ThemeChanger.tsx │ │ │ └── ViewSource.tsx │ │ ├── hooks/ │ │ │ ├── useAutoTheme.ts │ │ │ └── useMounted.ts │ │ ├── lib/ │ │ │ ├── doc.ts │ │ │ └── raw.ts │ │ ├── usages/ │ │ │ ├── accordion.tsx │ │ │ ├── app-bars/ │ │ │ │ ├── bottom-app-bar.tsx │ │ │ │ └── top-app-bar.tsx │ │ │ ├── autocomplete.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badges.tsx │ │ │ ├── before-after.tsx │ │ │ ├── buttons/ │ │ │ │ ├── button.tsx │ │ │ │ ├── fab.tsx │ │ │ │ ├── icon-button.tsx │ │ │ │ └── segmented-button.tsx │ │ │ ├── cards.tsx │ │ │ ├── carousel.tsx │ │ │ ├── checkbox.tsx │ │ │ ├── chips.tsx │ │ │ ├── dialogs.tsx │ │ │ ├── divider.tsx │ │ │ ├── focus-ring.tsx │ │ │ ├── lists.tsx │ │ │ ├── menus.tsx │ │ │ ├── navigation/ │ │ │ │ ├── navigation-bar.tsx │ │ │ │ ├── navigation-drawer.tsx │ │ │ │ └── navigation-rail.tsx │ │ │ ├── pagination.tsx │ │ │ ├── progress/ │ │ │ │ ├── circular-progress.tsx │ │ │ │ └── linear-progress.tsx │ │ │ ├── radio.tsx │ │ │ ├── ripple.tsx │ │ │ ├── select.tsx │ │ │ ├── sheets/ │ │ │ │ ├── bottom-sheets.tsx │ │ │ │ └── side-sheets.tsx │ │ │ ├── sliders.tsx │ │ │ ├── snackbar.tsx │ │ │ ├── swiper.tsx │ │ │ ├── switch.tsx │ │ │ ├── table.tsx │ │ │ ├── tabs.tsx │ │ │ ├── terminal.tsx │ │ │ ├── text-fields.tsx │ │ │ └── tooltips.tsx │ │ ├── utils/ │ │ │ ├── apply-theme-string.ts │ │ │ ├── cn.ts │ │ │ ├── material-color-helpers.ts │ │ │ └── theme.ts │ │ └── views/ │ │ ├── icon.tsx │ │ ├── icons.json │ │ └── theme.tsx │ └── tsconfig.json ├── biome.json ├── package.json ├── packages/ │ ├── actify/ │ │ ├── package.json │ │ ├── rollup.config.mjs │ │ ├── src/ │ │ │ ├── animations/ │ │ │ │ └── index.ts │ │ │ ├── components/ │ │ │ │ ├── Accordion/ │ │ │ │ │ ├── Accordion.tsx │ │ │ │ │ ├── AccordionContent.tsx │ │ │ │ │ ├── AccordionContext.tsx │ │ │ │ │ ├── AccordionHeader.tsx │ │ │ │ │ ├── AccordionItem.tsx │ │ │ │ │ ├── accordion.module.css │ │ │ │ │ └── index.ts │ │ │ │ ├── ActionMenu/ │ │ │ │ │ ├── ActionMenu.tsx │ │ │ │ │ ├── Menu.tsx │ │ │ │ │ ├── MenuItem.tsx │ │ │ │ │ ├── MenuItems.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── menu.module.css │ │ │ │ ├── Autocomplete/ │ │ │ │ │ ├── Autocomplete.tsx │ │ │ │ │ ├── autocomplete.module.css │ │ │ │ │ └── index.ts │ │ │ │ ├── Avatar/ │ │ │ │ │ ├── Avatar.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Badges/ │ │ │ │ │ ├── Badges.tsx │ │ │ │ │ ├── badges.module.css │ │ │ │ │ └── index.tsx │ │ │ │ ├── BeforeAfter/ │ │ │ │ │ ├── BeforeAfter.tsx │ │ │ │ │ ├── before-after.module.css │ │ │ │ │ └── index.ts │ │ │ │ ├── BottomAppBar/ │ │ │ │ │ ├── BottomAppBar.tsx │ │ │ │ │ ├── BottomAppBarFab.tsx │ │ │ │ │ ├── BottomAppBarIcons.tsx │ │ │ │ │ ├── bottom-app-bar.module.css │ │ │ │ │ └── index.ts │ │ │ │ ├── BottomSheets/ │ │ │ │ │ ├── BottomSheets.tsx │ │ │ │ │ ├── BottomSheetsActivator.tsx │ │ │ │ │ ├── BottomSheetsContent.tsx │ │ │ │ │ ├── BottomSheetsContext.tsx │ │ │ │ │ ├── bottom-sheets.module.css │ │ │ │ │ └── index.ts │ │ │ │ ├── Buttons/ │ │ │ │ │ ├── Button.tsx │ │ │ │ │ ├── Fab.tsx │ │ │ │ │ ├── IconButton.tsx │ │ │ │ │ ├── LinkButton.tsx │ │ │ │ │ ├── fab.module.css │ │ │ │ │ ├── icon-button.module.css │ │ │ │ │ ├── index.ts │ │ │ │ │ └── styles/ │ │ │ │ │ ├── button.module.css │ │ │ │ │ ├── color.module.css │ │ │ │ │ └── variant.module.css │ │ │ │ ├── Cards/ │ │ │ │ │ ├── Card.tsx │ │ │ │ │ ├── card.module.css │ │ │ │ │ └── index.ts │ │ │ │ ├── Carousel/ │ │ │ │ │ ├── Carousel.tsx │ │ │ │ │ ├── CarouselContent.tsx │ │ │ │ │ ├── CarouselContext.tsx │ │ │ │ │ ├── CarouselControl.tsx │ │ │ │ │ ├── CarouselIndicator.tsx │ │ │ │ │ ├── CarouselItem.tsx │ │ │ │ │ ├── carousel-control.module.css │ │ │ │ │ ├── carousel-indicator.module.css │ │ │ │ │ ├── carousel.module.css │ │ │ │ │ └── index.ts │ │ │ │ ├── Checkbox/ │ │ │ │ │ ├── Checkbox.tsx │ │ │ │ │ ├── CheckboxGroup.tsx │ │ │ │ │ ├── checkbox-group.module.css │ │ │ │ │ ├── checkbox.module.css │ │ │ │ │ └── index.ts │ │ │ │ ├── Chips/ │ │ │ │ │ ├── Chip.tsx │ │ │ │ │ ├── ChipGroup.tsx │ │ │ │ │ ├── chip-group.module.css │ │ │ │ │ ├── chip.module.css │ │ │ │ │ └── index.ts │ │ │ │ ├── CircularProgress/ │ │ │ │ │ ├── CircularProgress.tsx │ │ │ │ │ ├── circular-progress.module.css │ │ │ │ │ └── index.ts │ │ │ │ ├── Dialogs/ │ │ │ │ │ ├── Dialog.tsx │ │ │ │ │ ├── DialogActivator.tsx │ │ │ │ │ ├── animation.ts │ │ │ │ │ ├── dialog.module.css │ │ │ │ │ └── index.ts │ │ │ │ ├── Divider/ │ │ │ │ │ ├── Divider.tsx │ │ │ │ │ ├── divider.module.css │ │ │ │ │ └── index.ts │ │ │ │ ├── Elevation/ │ │ │ │ │ ├── Elevation.tsx │ │ │ │ │ ├── elevation.module.css │ │ │ │ │ └── index.ts │ │ │ │ ├── Field/ │ │ │ │ │ ├── Field.tsx │ │ │ │ │ ├── FilledField.tsx │ │ │ │ │ ├── OutlinedField.tsx │ │ │ │ │ ├── SupportingText.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── styles/ │ │ │ │ │ ├── field.module.css │ │ │ │ │ └── supporting.module.css │ │ │ │ ├── FocusRing/ │ │ │ │ │ ├── FocusRing.tsx │ │ │ │ │ ├── focusring.module.css │ │ │ │ │ └── index.ts │ │ │ │ ├── Icon/ │ │ │ │ │ ├── Icon.tsx │ │ │ │ │ ├── icon.module.css │ │ │ │ │ └── index.ts │ │ │ │ ├── Item/ │ │ │ │ │ ├── Item.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── item.module.css │ │ │ │ ├── Label/ │ │ │ │ │ ├── Label.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── LinearProgress/ │ │ │ │ │ ├── LinearProgress.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── linear-progress.module.css │ │ │ │ ├── ListBox/ │ │ │ │ │ ├── ListBox.tsx │ │ │ │ │ ├── ListBoxOption.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── listbox.module.css │ │ │ │ │ └── option.module.css │ │ │ │ ├── Lists/ │ │ │ │ │ ├── List.tsx │ │ │ │ │ ├── ListContext.tsx │ │ │ │ │ ├── ListGroup.tsx │ │ │ │ │ ├── ListItem.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── list-group.module.css │ │ │ │ │ ├── list-item.module.css │ │ │ │ │ └── list.module.css │ │ │ │ ├── Menus/ │ │ │ │ │ ├── ListBox.tsx │ │ │ │ │ ├── ListBoxItem.tsx │ │ │ │ │ ├── Menu.tsx │ │ │ │ │ ├── MenuButton.tsx │ │ │ │ │ ├── MenuItem.tsx │ │ │ │ │ ├── MenuPopover.tsx │ │ │ │ │ ├── Submenu.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── listbox-item.module.css │ │ │ │ │ ├── listbox.module.css │ │ │ │ │ ├── menu-popover.module.css │ │ │ │ │ └── menu.module.css │ │ │ │ ├── Modal/ │ │ │ │ │ ├── Modal.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── modal.module.css │ │ │ │ ├── NavigationBar/ │ │ │ │ │ ├── NavigationBar.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── navigation-bar.module.css │ │ │ │ ├── NavigationDrawer/ │ │ │ │ │ ├── DrawerActivator.tsx │ │ │ │ │ ├── DrawerContent.tsx │ │ │ │ │ ├── DrawerContext.tsx │ │ │ │ │ ├── NavigationDrawer.tsx │ │ │ │ │ ├── drawer.module.css │ │ │ │ │ └── index.ts │ │ │ │ ├── NavigationRail/ │ │ │ │ │ ├── NavigationRail.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── navigation-rail.module.css │ │ │ │ ├── Pagination/ │ │ │ │ │ ├── Pagination.tsx │ │ │ │ │ ├── PaginationNumber.tsx │ │ │ │ │ ├── generatePagination.ts │ │ │ │ │ ├── index.ts │ │ │ │ │ └── pagination.module.css │ │ │ │ ├── Popover/ │ │ │ │ │ ├── Popover.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── popover.module.css │ │ │ │ ├── PopoverMenu/ │ │ │ │ │ ├── PopoverMenu.tsx │ │ │ │ │ ├── PopoverMenuItem.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── menu.module.css │ │ │ │ ├── Radio/ │ │ │ │ │ ├── Radio.tsx │ │ │ │ │ ├── RadioGroup.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── radio-group.module.css │ │ │ │ │ └── radio.module.css │ │ │ │ ├── Ripple/ │ │ │ │ │ ├── Ripple.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── ripple.module.css │ │ │ │ ├── SegmentedButton/ │ │ │ │ │ ├── SegmentedButton.tsx │ │ │ │ │ ├── SegmentedButtonSet.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── segmented-buttont.module.css │ │ │ │ ├── Select/ │ │ │ │ │ ├── FilledField.tsx │ │ │ │ │ ├── OutlinedField.tsx │ │ │ │ │ ├── Select.tsx │ │ │ │ │ ├── SelectOption.tsx │ │ │ │ │ ├── TrailingIcon.tsx │ │ │ │ │ ├── filled-field.module.css │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── outlined-field.module.css │ │ │ │ │ ├── select.module.css │ │ │ │ │ └── trailingIcon.module.css │ │ │ │ ├── SideSheets/ │ │ │ │ │ ├── SideSheets.tsx │ │ │ │ │ ├── SideSheetsAction.tsx │ │ │ │ │ ├── SideSheetsActivator.tsx │ │ │ │ │ ├── SideSheetsBody.tsx │ │ │ │ │ ├── SideSheetsContent.tsx │ │ │ │ │ ├── SideSheetsContext.tsx │ │ │ │ │ ├── SideSheetsHeader.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── side-sheets.module.css │ │ │ │ ├── Sliders/ │ │ │ │ │ ├── Slider.tsx │ │ │ │ │ ├── Thumb.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── slider.module.css │ │ │ │ ├── Slot/ │ │ │ │ │ ├── Slot.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Snackbar/ │ │ │ │ │ ├── Toast.tsx │ │ │ │ │ ├── ToastProvider.tsx │ │ │ │ │ ├── ToastRegion.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── toast.module.css │ │ │ │ ├── Spacer/ │ │ │ │ │ ├── Spacer.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Swiper/ │ │ │ │ │ ├── Swiper.tsx │ │ │ │ │ ├── SwiperItem.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── swiper.module.css │ │ │ │ ├── Switch/ │ │ │ │ │ ├── Switch.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── switch.module.css │ │ │ │ ├── Table/ │ │ │ │ │ ├── Table.tsx │ │ │ │ │ ├── TableCell.tsx │ │ │ │ │ ├── TableCheckboxCell.tsx │ │ │ │ │ ├── TableColumnHeader.tsx │ │ │ │ │ ├── TableHeader.tsx │ │ │ │ │ ├── TableHeaderRow.tsx │ │ │ │ │ ├── TableRow.tsx │ │ │ │ │ ├── TableRowGroup.tsx │ │ │ │ │ ├── TableSelectAllCell.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── table.module.css │ │ │ │ ├── Tabs/ │ │ │ │ │ ├── Tab.tsx │ │ │ │ │ ├── TabPanel.tsx │ │ │ │ │ ├── Tabs.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── tabs.module.css │ │ │ │ ├── Terminal/ │ │ │ │ │ ├── Terminal.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── terminal.module.css │ │ │ │ ├── Text/ │ │ │ │ │ ├── Text.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── TextFields/ │ │ │ │ │ ├── TextField.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── text-field.module.css │ │ │ │ ├── Tooltips/ │ │ │ │ │ ├── OverlayArrow.tsx │ │ │ │ │ ├── Tooltip.tsx │ │ │ │ │ ├── TooltipGroup.tsx │ │ │ │ │ ├── TooltipInner.tsx │ │ │ │ │ ├── TooltipTrigger.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── TopAppBar/ │ │ │ │ │ ├── TopAppBar.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── top-app-bar.module.css │ │ │ │ └── VisuallyHidden/ │ │ │ │ ├── VisuallyHidden.tsx │ │ │ │ ├── index.ts │ │ │ │ └── visually-hidden.module.css │ │ │ ├── css-module.d.ts │ │ │ ├── hooks/ │ │ │ │ ├── index.ts │ │ │ │ ├── mergeRefs.tsx │ │ │ │ ├── useAttachable.ts │ │ │ │ ├── useControllable.ts │ │ │ │ ├── useControllableState.ts │ │ │ │ ├── useDebounce.ts │ │ │ │ ├── useInputState.tsx │ │ │ │ ├── useInterval.ts │ │ │ │ ├── useOnClickOutside.ts │ │ │ │ ├── usePrevious.ts │ │ │ │ └── useResizeObserver.tsx │ │ │ ├── index.ts │ │ │ ├── themes/ │ │ │ │ └── index.ts │ │ │ └── utils/ │ │ │ ├── index.ts │ │ │ └── utils.tsx │ │ ├── tsconfig.json │ │ └── tsconfig.rollup.json │ └── create-actify/ │ ├── index.ts │ └── package.json ├── pnpm-workspace.yaml ├── todo.md ├── turbo.json └── vercel.json
SYMBOL INDEX (244 symbols across 138 files)
FILE: apps/docs/src/app/(docs)/[...slug]/page.tsx
type PageProps (line 7) | type PageProps = {
function generateStaticParams (line 22) | async function generateStaticParams() {
function PageLayout (line 27) | async function PageLayout(props: PageProps) {
FILE: apps/docs/src/app/(docs)/layout.tsx
function DocLayout (line 21) | function DocLayout({ children }: { children: React.ReactNode }) {
FILE: apps/docs/src/app/layout.tsx
function RootLayout (line 16) | function RootLayout({
FILE: apps/docs/src/app/page.tsx
function Page (line 14) | function Page() {
FILE: apps/docs/src/app/template.tsx
function Template (line 10) | function Template({ children }: { children: React.ReactNode }) {
FILE: apps/docs/src/components/App.tsx
function App (line 4) | function App({ children }: { children: React.ReactNode }) {
FILE: apps/docs/src/components/AppDrawer.tsx
function AppDrawer (line 14) | function AppDrawer() {
FILE: apps/docs/src/components/Aside.tsx
type AsideProps (line 188) | interface AsideProps extends React.ComponentProps<'aside'> {
function Aside (line 192) | function Aside({ open, className }: AsideProps) {
FILE: apps/docs/src/components/DocPreview.tsx
type CodePreviewProps (line 9) | type CodePreviewProps = {
FILE: apps/docs/src/components/DocTabs.tsx
type ActifyTabsProps (line 8) | interface ActifyTabsProps extends React.ComponentProps<'html'> {
type TypeTab (line 14) | type TypeTab = { label: string; icon: string; content: string }
type IconProps (line 16) | type IconProps = {
FILE: apps/docs/src/components/DocUsage.tsx
type DocUsageProps (line 11) | interface DocUsageProps {
FILE: apps/docs/src/components/Dropdown.tsx
type DropdownProps (line 6) | interface DropdownProps extends React.ComponentProps<'div'> {
FILE: apps/docs/src/components/EditOnGitHub.tsx
type EditOnGitHubProps (line 3) | type EditOnGitHubProps = {
FILE: apps/docs/src/components/Markdown.tsx
type MarkdownProps (line 13) | interface MarkdownProps extends React.ComponentProps<'div'> {
function Markdown (line 24) | function Markdown({ docs, usage }: MarkdownProps) {
FILE: apps/docs/src/components/NavLink.tsx
type NavLinkProps (line 6) | interface NavLinkProps {
function NavLink (line 12) | function NavLink({
FILE: apps/docs/src/components/OpenInCodeSandbox.tsx
type OpenInCodeSandboxProps (line 7) | interface OpenInCodeSandboxProps extends React.ComponentProps<'form'> {
FILE: apps/docs/src/components/OpenInStackblitz.tsx
type OpenInStackblitzProps (line 6) | interface OpenInStackblitzProps extends React.ComponentProps<'form'> {
FILE: apps/docs/src/components/Search.tsx
type DocSearchProps (line 12) | type DocSearchProps = {
FILE: apps/docs/src/components/SyntaxHighlighter.tsx
type Langs (line 13) | type Langs = (typeof langs)[number]
FILE: apps/docs/src/components/TableOfContents.tsx
type TocProps (line 23) | type TocProps = {
FILE: apps/docs/src/lib/doc.ts
function getFiles (line 7) | function getFiles(dir: string, files: string[] = []) {
function getAllDocSlugs (line 20) | function getAllDocSlugs() {
function getDocData (line 29) | function getDocData(slugs: string[]) {
FILE: apps/docs/src/lib/raw.ts
function getFileRaw (line 3) | async function getFileRaw(filepath: string) {
FILE: apps/docs/src/usages/focus-ring.tsx
function FocusRingInput (line 5) | function FocusRingInput({ inward }: { inward?: boolean }) {
FILE: apps/docs/src/usages/table.tsx
type StarWarsChar (line 11) | interface StarWarsChar {
method load (line 19) | async load({ signal }) {
method sort (line 28) | async sort({ items, sortDescriptor }) {
FILE: apps/docs/src/utils/apply-theme-string.ts
type WithStylesheet (line 1) | type WithStylesheet = typeof globalThis & {
function applyThemeString (line 20) | function applyThemeString(
FILE: apps/docs/src/utils/cn.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
FILE: apps/docs/src/utils/material-color-helpers.ts
type Theme (line 11) | interface Theme {
function hctFromHex (line 64) | function hctFromHex(value: string) {
function hexFromHct (line 77) | function hexFromHct(hue: number, chroma: number, tone: number) {
function themeFromSourceColor (line 93) | function themeFromSourceColor(color: string, isDark: boolean): Theme {
function applyMaterialTheme (line 114) | function applyMaterialTheme(
FILE: apps/docs/src/utils/theme.ts
type ColorMode (line 7) | type ColorMode = 'light' | 'dark' | 'system'
function applyThemeFromColor (line 17) | function applyThemeFromColor(color: string, isDark: boolean) {
function isModeDark (line 32) | function isModeDark(mode: ColorMode, saveAutoMode = true) {
function getCurrentThemeString (line 54) | function getCurrentThemeString(): string | null {
function getCurrentMode (line 63) | function getCurrentMode(): ColorMode | null {
function saveColorMode (line 72) | function saveColorMode(mode: ColorMode) {
function getCurrentSeedColor (line 81) | function getCurrentSeedColor(): string | null {
function saveSeedColor (line 90) | function saveSeedColor(color: string) {
function getLastSavedAutoColorMode (line 99) | function getLastSavedAutoColorMode() {
function saveLastSavedAutoColorMode (line 109) | function saveLastSavedAutoColorMode(mode: 'light' | 'dark') {
function changeColor (line 118) | function changeColor(color: string) {
function changeColorMode (line 131) | function changeColorMode(mode: ColorMode) {
function changeColorAndMode (line 146) | function changeColorAndMode(color: string, mode: ColorMode) {
FILE: packages/actify/rollup.config.mjs
method onwarn (line 69) | onwarn(warning, warn) {
FILE: packages/actify/src/animations/index.ts
constant STANDARD (line 1) | const STANDARD = [0.2, 0, 0, 1] as const
constant STANDARD_ACCELERATE (line 2) | const STANDARD_ACCELERATE = [0.3, 0, 1, 1] as const
constant STANDARD_DECELERATE (line 3) | const STANDARD_DECELERATE = [0, 0, 0, 1] as const
constant EMPHASIZED (line 4) | const EMPHASIZED = [0.3, 0, 0, 1] as const
constant EMPHASIZED_ACCELERATE (line 5) | const EMPHASIZED_ACCELERATE = [0.3, 0, 0.8, 0.15] as const
constant EMPHASIZED_DECELERATE (line 6) | const EMPHASIZED_DECELERATE = [0.05, 0.7, 0.1, 1] as const
constant EASING (line 8) | const EASING = {
FILE: packages/actify/src/components/Accordion/Accordion.tsx
type AccordionRootProps (line 15) | interface AccordionRootProps extends AccordionProps, ComponentProps<'div...
FILE: packages/actify/src/components/Accordion/AccordionContent.tsx
type AccordionContentProps (line 11) | interface AccordionContentProps
FILE: packages/actify/src/components/Accordion/AccordionContext.tsx
type AccordionProps (line 5) | type AccordionProps = {
type AccordionProviderProps (line 13) | interface AccordionProviderProps
FILE: packages/actify/src/components/Accordion/AccordionHeader.tsx
type AccordionHeaderProps (line 12) | interface AccordionHeaderProps
FILE: packages/actify/src/components/Accordion/AccordionItem.tsx
type AccordionItemProps (line 8) | interface AccordionItemProps extends React.ComponentProps<'div'> {
FILE: packages/actify/src/components/ActionMenu/ActionMenu.tsx
type MenuButtonProps (line 10) | interface MenuButtonProps<T extends object>
FILE: packages/actify/src/components/ActionMenu/Menu.tsx
type MenuProps (line 10) | interface MenuProps<T extends object> extends AriaMenuProps<T> {
FILE: packages/actify/src/components/ActionMenu/MenuItem.tsx
type MenuItemProps (line 11) | interface MenuItemProps<T> {
FILE: packages/actify/src/components/ActionMenu/MenuItems.tsx
type MenuSectionProps (line 8) | interface MenuSectionProps<T> {
FILE: packages/actify/src/components/Autocomplete/Autocomplete.tsx
type AutocompleteProps (line 12) | interface AutocompleteProps<T>
FILE: packages/actify/src/components/Avatar/Avatar.tsx
type AvatarProps (line 3) | interface AvatarProps extends React.ComponentProps<'img'> {}
FILE: packages/actify/src/components/Badges/Badges.tsx
type BadgeProps (line 8) | interface BadgeProps extends React.ComponentProps<'div'> {
FILE: packages/actify/src/components/BeforeAfter/BeforeAfter.tsx
type BeforeAfterProps (line 7) | interface BeforeAfterProps extends React.ComponentProps<'div'> {
FILE: packages/actify/src/components/BottomAppBar/BottomAppBar.tsx
type BottomAppBarProps (line 6) | interface BottomAppBarProps extends React.ComponentProps<'div'> {}
FILE: packages/actify/src/components/BottomAppBar/BottomAppBarFab.tsx
type BottomAppBarFabProps (line 5) | interface BottomAppBarFabProps extends React.ComponentProps<'div'> {}
FILE: packages/actify/src/components/BottomAppBar/BottomAppBarIcons.tsx
type BottomAppBarIconsProps (line 5) | interface BottomAppBarIconsProps extends React.ComponentProps<'div'> {}
FILE: packages/actify/src/components/BottomSheets/BottomSheetsActivator.tsx
type BottomSheetsActivatorProps (line 7) | interface BottomSheetsActivatorProps
FILE: packages/actify/src/components/BottomSheets/BottomSheetsContext.tsx
type BottomSheetsProps (line 7) | interface BottomSheetsProps {
type BottomSheetsProviderProps (line 17) | interface BottomSheetsProviderProps
function useBottomSheets (line 38) | function useBottomSheets() {
FILE: packages/actify/src/components/Buttons/Button.tsx
type ButtonProps (line 18) | interface ButtonProps extends AriaButtonProps {
FILE: packages/actify/src/components/Buttons/Fab.tsx
type FabProps (line 17) | type FabProps = {
FILE: packages/actify/src/components/Buttons/IconButton.tsx
type IconButtonProps (line 15) | interface IconButtonProps extends AriaButtonProps {
FILE: packages/actify/src/components/Buttons/LinkButton.tsx
type LinkButtonProps (line 15) | interface LinkButtonProps extends AriaButtonProps, StyleProps {
FILE: packages/actify/src/components/Cards/Card.tsx
type CardProps (line 9) | interface CardProps extends React.ComponentProps<'div'> {
FILE: packages/actify/src/components/Carousel/Carousel.tsx
type CarouselProps (line 11) | interface CarouselProps extends React.ComponentProps<'div'> {
FILE: packages/actify/src/components/Carousel/CarouselContext.tsx
type CarouselProps (line 5) | interface CarouselProps {
type CarouselProviderProps (line 23) | interface CarouselProviderProps
function useCarousel (line 68) | function useCarousel() {
FILE: packages/actify/src/components/Carousel/CarouselControl.tsx
type CarouselControlProps (line 12) | type CarouselControlProps = {
FILE: packages/actify/src/components/Checkbox/Checkbox.tsx
type CheckboxProps (line 22) | interface CheckboxProps extends AriaCheckboxProps, StyleProps {
FILE: packages/actify/src/components/Checkbox/CheckboxGroup.tsx
type Props (line 12) | interface Props extends AriaCheckboxGroupProps, StyleProps {
FILE: packages/actify/src/components/Chips/Chip.tsx
type ChipProps (line 12) | interface ChipProps<T> extends AriaTagProps<T> {
FILE: packages/actify/src/components/CircularProgress/CircularProgress.tsx
type CircularProgressProp (line 12) | interface CircularProgressProp extends AriaProgressBarProps, StyleProps {
FILE: packages/actify/src/components/Dialogs/Dialog.tsx
type DialogProps (line 5) | interface DialogProps extends AriaDialogProps {
FILE: packages/actify/src/components/Dialogs/DialogActivator.tsx
type DialogActivatorProps (line 8) | interface DialogActivatorProps extends OverlayTriggerProps {
FILE: packages/actify/src/components/Dialogs/animation.ts
type DialogAnimationArgs (line 3) | type DialogAnimationArgs = Parameters<Element['animate']>
type DialogAnimation (line 5) | interface DialogAnimation {
constant DIALOG_DEFAULT_OPEN_ANIMATION (line 35) | const DIALOG_DEFAULT_OPEN_ANIMATION: DialogAnimation = {
constant DIALOG_DEFAULT_CLOSE_ANIMATION (line 91) | const DIALOG_DEFAULT_CLOSE_ANIMATION: DialogAnimation = {
FILE: packages/actify/src/components/Divider/Divider.tsx
type DividerProps (line 8) | interface DividerProps extends SeparatorProps, StyleProps {
FILE: packages/actify/src/components/Elevation/Elevation.tsx
type ElevationProps (line 7) | interface ElevationProps
FILE: packages/actify/src/components/Field/Field.tsx
type FieldProps (line 8) | interface FieldProps extends SupportingTextProps {
FILE: packages/actify/src/components/Field/FilledField.tsx
type FilledFieldProps (line 6) | interface FilledFieldProps extends FieldProps, React.ComponentProps<'div...
FILE: packages/actify/src/components/Field/OutlinedField.tsx
type OutlinedFieldProps (line 6) | interface OutlinedFieldProps
FILE: packages/actify/src/components/Field/SupportingText.tsx
type SupportingTextProps (line 4) | interface SupportingTextProps {
FILE: packages/actify/src/components/FocusRing/FocusRing.tsx
type FocusRingProps (line 5) | type FocusRingProps = {
FILE: packages/actify/src/components/Icon/Icon.tsx
type IconProps (line 5) | interface IconProps extends React.ComponentProps<'span'> {
FILE: packages/actify/src/components/Item/Item.tsx
type ItemProps (line 4) | interface ItemProps extends React.ComponentProps<'div'> {
FILE: packages/actify/src/components/Label/Label.tsx
type LabelProps (line 6) | interface LabelProps extends LabelAriaProps, React.ComponentProps<'label...
FILE: packages/actify/src/components/LinearProgress/LinearProgress.tsx
type LinearProgressProps (line 10) | interface LinearProgressProps extends AriaProgressBarProps, StyleProps {
FILE: packages/actify/src/components/ListBox/ListBox.tsx
type ListBoxProps (line 8) | interface ListBoxProps<T> extends AriaListBoxOptions<T> {
FILE: packages/actify/src/components/ListBox/ListBoxOption.tsx
type OptionProps (line 16) | interface OptionProps<T> extends AriaOptionProps, AriaFocusRingProps {
FILE: packages/actify/src/components/Lists/List.tsx
type ListProps (line 10) | interface ListProps extends React.ComponentProps<'ul'> {
FILE: packages/actify/src/components/Lists/ListGroup.tsx
type ListItemProps (line 17) | interface ListItemProps extends React.ComponentProps<'li'> {
FILE: packages/actify/src/components/Lists/ListItem.tsx
type ListItemProps (line 11) | interface ListItemProps extends React.ComponentProps<'li'> {
FILE: packages/actify/src/components/Menus/MenuButton.tsx
type MenuButtonProps (line 10) | interface MenuButtonProps<T>
FILE: packages/actify/src/components/Menus/MenuPopover.tsx
type PopoverProps (line 15) | interface PopoverProps extends Omit<AriaPopoverProps, 'children'> {
FILE: packages/actify/src/components/Modal/Modal.tsx
type ModalProps (line 7) | interface ModalProps extends AriaModalOverlayProps {
function Modal (line 11) | function Modal({ state, children, ...props }: ModalProps) {
FILE: packages/actify/src/components/NavigationBar/NavigationBar.tsx
type NavigationBarProps (line 8) | interface NavigationBarProps extends React.ComponentProps<'div'> {}
FILE: packages/actify/src/components/NavigationDrawer/DrawerActivator.tsx
type DrawerActivatorProps (line 7) | interface DrawerActivatorProps extends React.ComponentProps<'div'> {
FILE: packages/actify/src/components/NavigationDrawer/DrawerContent.tsx
type DrawerContentProps (line 11) | interface DrawerContentProps extends React.ComponentProps<'div'> {}
FILE: packages/actify/src/components/NavigationDrawer/DrawerContext.tsx
type Placement (line 7) | type Placement = 'left' | 'right' | 'top' | 'bottom'
type DrawerProps (line 9) | interface DrawerProps {
type DrawerProviderProps (line 18) | interface DrawerProviderProps
function useDrawer (line 39) | function useDrawer() {
FILE: packages/actify/src/components/NavigationDrawer/NavigationDrawer.tsx
type NavigationDrawerProps (line 7) | interface NavigationDrawerProps extends DrawerProviderProps {
FILE: packages/actify/src/components/NavigationRail/NavigationRail.tsx
type Item (line 11) | interface Item extends React.ComponentProps<'button'> {
type NavigationRailProps (line 18) | interface NavigationRailProps extends React.ComponentProps<'div'> {
FILE: packages/actify/src/components/Pagination/Pagination.tsx
type PaginationProps (line 12) | interface PaginationProps extends React.ComponentProps<'nav'> {
FILE: packages/actify/src/components/Popover/Popover.tsx
type PopoverRenderProps (line 22) | interface PopoverRenderProps {
type PopoverProps (line 45) | interface PopoverProps
FILE: packages/actify/src/components/PopoverMenu/PopoverMenu.tsx
type PopoverMenuContextProps (line 11) | interface PopoverMenuContextProps {
type PopoverMenuRef (line 18) | interface PopoverMenuRef {
type PopoverMenuProps (line 24) | interface PopoverMenuProps extends Omit<React.ComponentProps<'div'>, 're...
FILE: packages/actify/src/components/PopoverMenu/PopoverMenuItem.tsx
type PopoverMenuItemProps (line 9) | interface PopoverMenuItemProps extends Omit<ItemProps, 'container'> {}
FILE: packages/actify/src/components/Radio/Radio.tsx
type RadioProps (line 13) | interface RadioProps extends AriaRadioProps, StyleProps {
FILE: packages/actify/src/components/Radio/RadioGroup.tsx
type RadioGroupProps (line 12) | interface RadioGroupProps extends AriaRadioGroupProps, StyleProps {
FILE: packages/actify/src/components/Ripple/Ripple.tsx
constant TOUCH_DELAY_MS (line 10) | const TOUCH_DELAY_MS = 150
constant PRESS_GROW_MS (line 11) | const PRESS_GROW_MS = 450
constant MINIMUM_PRESS_MS (line 12) | const MINIMUM_PRESS_MS = 225
constant INITIAL_ORIGIN_SCALE (line 13) | const INITIAL_ORIGIN_SCALE = 0.2
constant PADDING (line 14) | const PADDING = 10
constant SOFT_EDGE_MINIMUM_SIZE (line 15) | const SOFT_EDGE_MINIMUM_SIZE = 75
constant SOFT_EDGE_CONTAINER_RATIO (line 16) | const SOFT_EDGE_CONTAINER_RATIO = 0.35
constant PRESS_PSEUDO (line 17) | const PRESS_PSEUDO = '::after'
constant ANIMATION_FILL (line 18) | const ANIMATION_FILL = 'forwards'
type State (line 20) | enum State {
constant EVENTS (line 55) | const EVENTS = [
type RippleProps (line 66) | interface RippleProps extends React.ComponentProps<'label'> {
FILE: packages/actify/src/components/SegmentedButton/SegmentedButton.tsx
type SegmentedButtonProps (line 16) | type SegmentedButtonProps = {
FILE: packages/actify/src/components/SegmentedButton/SegmentedButtonSet.tsx
type SegmentedButtonSetProps (line 3) | interface SegmentedButtonSetProps extends React.ComponentProps<'div'> {}
FILE: packages/actify/src/components/Select/FilledField.tsx
type OutlinedFieldProps (line 15) | type OutlinedFieldProps = React.ComponentProps<'button'> & AriaButtonProps
FILE: packages/actify/src/components/Select/OutlinedField.tsx
type OutlinedFieldProps (line 15) | type OutlinedFieldProps = React.ComponentProps<'button'> & AriaButtonProps
FILE: packages/actify/src/components/Select/Select.tsx
type SelectProps (line 15) | interface SelectProps<T> extends AriaSelectOptions<T>, SelectStateOption...
FILE: packages/actify/src/components/SideSheets/SideSheets.tsx
type SideSheetsProps (line 6) | type SideSheetsProps = Omit<React.ComponentProps<'div'>, 'onChange'> & {
FILE: packages/actify/src/components/SideSheets/SideSheetsActivator.tsx
type ActivatorProps (line 7) | interface ActivatorProps extends React.ComponentProps<'div'> {
FILE: packages/actify/src/components/SideSheets/SideSheetsContent.tsx
type ContentProps (line 11) | interface ContentProps extends React.ComponentProps<'div'> {
FILE: packages/actify/src/components/SideSheets/SideSheetsContext.tsx
type SideSheetsProps (line 7) | interface SideSheetsProps {
type SideSheetsProviderProps (line 16) | interface SideSheetsProviderProps
function useSideSheets (line 39) | function useSideSheets() {
FILE: packages/actify/src/components/Sliders/Slider.tsx
type SliderProps (line 10) | interface SliderProps extends AriaSliderProps {
FILE: packages/actify/src/components/Sliders/Thumb.tsx
type ThumbProps (line 17) | interface ThumbProps extends AriaSliderThumbProps {
FILE: packages/actify/src/components/Slot/Slot.tsx
type SlotProps (line 9) | interface SlotProps extends React.ComponentProps<'div'> {
type SlotCloneProps (line 60) | interface SlotCloneProps extends React.ComponentPropsWithoutRef<'div'> {
type AnyProps (line 94) | type AnyProps = Record<string, any>
function isSlottable (line 96) | function isSlottable(child: React.ReactNode): child is React.ReactElement {
function mergeProps (line 100) | function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
FILE: packages/actify/src/components/Snackbar/Toast.tsx
type ToastProps (line 10) | interface ToastProps<T> extends AriaToastProps<T> {
FILE: packages/actify/src/components/Snackbar/ToastProvider.tsx
type ToastProviderProps (line 6) | interface ToastProviderProps<T> {
FILE: packages/actify/src/components/Snackbar/ToastRegion.tsx
type ToastRegionProps (line 8) | interface ToastRegionProps<T> extends AriaToastRegionProps {
FILE: packages/actify/src/components/Swiper/Swiper.tsx
type SwiperProps (line 11) | interface SwiperProps extends React.ComponentProps<'div'> {
FILE: packages/actify/src/components/Switch/Switch.tsx
type SwitchProps (line 20) | interface SwitchProps extends AriaCheckboxProps, StyleProps {
FILE: packages/actify/src/components/Table/Table.tsx
type TableComponentProps (line 18) | interface TableComponentProps<T> extends AriaTableProps, TableProps<T> {
FILE: packages/actify/src/components/Table/TableCell.tsx
type TableCellProps (line 14) | interface TableCellProps<T> extends AriaTableCellProps {
FILE: packages/actify/src/components/Table/TableCheckboxCell.tsx
type TableCheckboxCellProps (line 12) | interface TableCheckboxCellProps<T> extends AriaTableCellProps {
FILE: packages/actify/src/components/Table/TableColumnHeader.tsx
type TableColumnHeaderProps (line 14) | interface TableColumnHeaderProps<T> extends AriaTableCellProps {
FILE: packages/actify/src/components/Table/TableHeaderRow.tsx
type TableHeaderRowProps (line 6) | interface TableHeaderRowProps<T> extends React.ComponentProps<'tr'> {
FILE: packages/actify/src/components/Table/TableRow.tsx
type TableRowProps (line 15) | interface TableRowProps<T> extends GridRowProps<T> {
FILE: packages/actify/src/components/Table/TableRowGroup.tsx
type TableRowGroupProps (line 4) | type TableRowGroupProps = {
FILE: packages/actify/src/components/Table/TableSelectAllCell.tsx
type TableSelectAllCellProps (line 12) | interface TableSelectAllCellProps<T> extends AriaTableCellProps {
FILE: packages/actify/src/components/Tabs/Tab.tsx
type TabProps (line 9) | interface TabProps<T> extends AriaTabProps {
FILE: packages/actify/src/components/Tabs/TabPanel.tsx
type TabPanelProps (line 9) | interface TabPanelProps<T> extends AriaTabPanelProps, StyleProps {
FILE: packages/actify/src/components/Tabs/Tabs.tsx
type TabsProps (line 18) | interface TabsProps<T>
FILE: packages/actify/src/components/Terminal/Terminal.tsx
type TerminalProps (line 9) | interface TerminalProps extends React.ComponentProps<'div'> {
FILE: packages/actify/src/components/TextFields/TextField.tsx
type TextFieldProps (line 9) | interface TextFieldProps extends AriaTextFieldProps, StyleProps {
FILE: packages/actify/src/components/Tooltips/OverlayArrow.tsx
type OverlayArrowContextValue (line 18) | interface OverlayArrowContextValue extends OverlayArrowProps {
type OverlayArrowProps (line 28) | interface OverlayArrowProps
type OverlayArrowRenderProps (line 35) | interface OverlayArrowRenderProps {
function OverlayArrow (line 43) | function OverlayArrow({
FILE: packages/actify/src/components/Tooltips/Tooltip.tsx
type TooltipRenderProps (line 29) | interface TooltipRenderProps {
type TooltipProps (line 52) | interface TooltipProps
FILE: packages/actify/src/components/Tooltips/TooltipGroup.tsx
type TooltipGroupProps (line 16) | interface TooltipGroupProps {
FILE: packages/actify/src/components/Tooltips/TooltipTrigger.tsx
type TooltipTriggerComponentProps (line 16) | interface TooltipTriggerComponentProps extends TooltipTriggerProps {
function TooltipTrigger (line 28) | function TooltipTrigger(props: TooltipTriggerComponentProps) {
FILE: packages/actify/src/components/TopAppBar/TopAppBar.tsx
type TopAppBarProps (line 9) | interface TopAppBarProps extends React.ComponentProps<'div'> {
FILE: packages/actify/src/components/VisuallyHidden/VisuallyHidden.tsx
type Props (line 6) | interface Props extends VisuallyHiddenProps {
FILE: packages/actify/src/hooks/mergeRefs.tsx
type PossibleRef (line 5) | type PossibleRef<T> = React.Ref<T> | null | undefined
function setRef (line 7) | function setRef<T>(ref: PossibleRef<T>, value: T) {
function mergeRefs (line 15) | function mergeRefs<T>(...refs: PossibleRef<T>[]) {
function useMergedRefs (line 23) | function useMergedRefs<T>(...refs: PossibleRef<T>[]) {
FILE: packages/actify/src/hooks/useControllable.ts
type UseControllableProps (line 5) | type UseControllableProps<T> = {
FILE: packages/actify/src/hooks/useControllableState.ts
function useCallbackRef (line 5) | function useCallbackRef<T extends (...args: any[]) => any>(
function useControllableProp (line 17) | function useControllableProp<T>(prop: T | undefined, state: T) {
type UseControllableStateProps (line 23) | interface UseControllableStateProps<T> {
function useControllableState (line 30) | function useControllableState<T>(props: UseControllableStateProps<T>) {
FILE: packages/actify/src/hooks/useInputState.tsx
type Value (line 5) | type Value = string | readonly string[] | number | undefined
type useInputStateProps (line 7) | interface useInputStateProps<T> {
function useInputState (line 14) | function useInputState<T>({
FILE: packages/actify/src/hooks/usePrevious.ts
function usePrevious (line 3) | function usePrevious<T>(value: T) {
FILE: packages/actify/src/utils/utils.tsx
constant DEFAULT_SLOT (line 30) | const DEFAULT_SLOT = Symbol('default')
type SlottedValue (line 32) | interface SlottedValue<T> {
type SlottedContextValue (line 36) | type SlottedContextValue<T> = SlottedValue<T> | T | null | undefined
type ContextValue (line 37) | type ContextValue<T, E> = SlottedContextValue<WithRef<T, E>>
type ProviderValue (line 39) | type ProviderValue<T> = [Context<T>, T]
type ProviderValues (line 40) | type ProviderValues<A, B, C, D, E, F, G, H, I, J, K> =
type ProviderProps (line 116) | interface ProviderProps<A, B, C, D, E, F, G, H, I, J, K> {
function Provider (line 121) | function Provider<A, B, C, D, E, F, G, H, I, J, K>({
type StyleProps (line 133) | interface StyleProps {
type DOMProps (line 140) | interface DOMProps extends StyleProps, SharedDOMProps {
type ScrollableProps (line 145) | interface ScrollableProps<T extends Element> {
type StyleRenderProps (line 150) | interface StyleRenderProps<T> {
type RenderProps (line 163) | interface RenderProps<T> extends StyleRenderProps<T> {
type RenderPropsHookOptions (line 170) | interface RenderPropsHookOptions<T>
function useRenderProps (line 180) | function useRenderProps<T>(props: RenderPropsHookOptions<T>) {
function composeRenderProps (line 240) | function composeRenderProps<T, U, V extends T>(
type WithRef (line 249) | type WithRef<T, E> = T & { ref?: RefObject<E | null> }
type SlotProps (line 251) | interface SlotProps {
function useSlottedContext (line 259) | function useSlottedContext<T>(
function useContextProps (line 292) | function useContextProps<T, U extends SlotProps, E extends Element>(
function useSlot (line 338) | function useSlot(): [RefCallback<Element>, boolean] {
function useEnterAnimation (line 360) | function useEnterAnimation(
function useExitAnimation (line 373) | function useExitAnimation(
function useAnimation (line 406) | function useAnimation(
function removeDataAttributes (line 454) | function removeDataAttributes<T>(props: T): T {
type RACValidation (line 468) | interface RACValidation {
FILE: packages/create-actify/index.ts
function init (line 13) | async function init() {
function formatTargetDir (line 55) | function formatTargetDir(targetDir: string | undefined) {
Condensed preview — 416 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (887K chars).
[
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 834,
"preview": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Describe the b"
},
{
"path": ".github/ISSUE_TEMPLATE/custom.md",
"chars": 126,
"preview": "---\nname: Custom issue template\nabout: Describe this issue template's purpose here.\ntitle: ''\nlabels: ''\nassignees: ''\n\n"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 595,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your fea"
},
{
"path": ".github/workflows/docs-deploy.yml",
"chars": 1464,
"preview": "name: Deploy Next.js SSG site to Pages\r\n\r\non:\r\n # Runs on pushes targeting the default branch\r\n push:\r\n branches: ["
},
{
"path": ".gitignore",
"chars": 298,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": ".npmrc",
"chars": 46,
"preview": "auto-install-peers = true\r\nnode-linker=hoisted"
},
{
"path": ".prettierrc",
"chars": 135,
"preview": "{\n \"tabWidth\": 2,\n \"semi\": false,\n \"printWidth\": 80,\n \"singleQuote\": true,\n \"trailingComma\": \"none\",\n \"bracketSame"
},
{
"path": "LICENSE.md",
"chars": 1077,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2023 Lerte Smith\n\nPermission is hereby granted, free of charge, to any person obtai"
},
{
"path": "README.md",
"chars": 4003,
"preview": "<p align=\"center\">\n <a href=\"https://actifyjs.com\">\n <img alt=\"Actify Logo\" width=\"100\" src=\"https://actifyjs.com/ac"
},
{
"path": "apps/docs/.gitignore",
"chars": 398,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "apps/docs/content/components/accordion.md",
"chars": 755,
"preview": "---\r\ntitle: Accordion\r\ndescription: Accordion display a list of high-level options that can expand/collapse to reveal mo"
},
{
"path": "apps/docs/content/components/app-bars/bottom-app-bar.md",
"chars": 172,
"preview": "---\r\ntitle: Bottom app bar\r\ndescription: Bottom app bars display navigation and key actions at the bottom of mobile and "
},
{
"path": "apps/docs/content/components/app-bars/top-app-bar.md",
"chars": 157,
"preview": "---\r\ntitle: Top app bars\r\ndescription: The top app bar displays information and actions relating to the current screen.\r"
},
{
"path": "apps/docs/content/components/autocomplete.md",
"chars": 249,
"preview": "---\ntitle: Autocomplete\ndescription: Autocomplete component offers simple and flexible type-ahead functionality. This is"
},
{
"path": "apps/docs/content/components/avatar.md",
"chars": 137,
"preview": "---\r\ntitle: Avatar\r\ndescription: Avatar is a component that can be used to display a user's avatar.\r\n---\r\n\r\n## Usage\r\n\r\n"
},
{
"path": "apps/docs/content/components/badges.md",
"chars": 454,
"preview": "---\r\ntitle: Badge\r\ndescription: Badges show notifications, counts, or status information on navigation items and icons\r\n"
},
{
"path": "apps/docs/content/components/before-after.md",
"chars": 1032,
"preview": "---\r\ntitle: Before After\r\ndescription: Before after show a before and after image of a product.\r\n---\r\n\r\n## Usage\r\n\r\n<usa"
},
{
"path": "apps/docs/content/components/buttons/button.md",
"chars": 8766,
"preview": "---\r\ntitle: Button\r\ndescription: Buttons have label text that describes the action that will occur if a user taps a butt"
},
{
"path": "apps/docs/content/components/buttons/fab.md",
"chars": 151,
"preview": "---\r\ntitle: Floating action buttons\r\ndescription: Floating action buttons (FABs) help people take primary actions\r\n---\r\n"
},
{
"path": "apps/docs/content/components/buttons/icon-button.md",
"chars": 133,
"preview": "---\r\ntitle: Icon buttons\r\ndescription: Icon buttons help people take minor actions with one tap\r\n---\r\n\r\n## Usage\r\n\r\n<usa"
},
{
"path": "apps/docs/content/components/buttons/segmented-button.md",
"chars": 321,
"preview": "---\r\ntitle: Segmented button\r\ndescription: Segmented buttons help people select options, switch views, or sort elements\r"
},
{
"path": "apps/docs/content/components/cards.md",
"chars": 939,
"preview": "---\r\ntitle: Cards\r\ndescription: Cards display content and actions about a single subject\r\n---\r\n\r\n## Usage\r\n\r\n<usage></us"
},
{
"path": "apps/docs/content/components/carousel.md",
"chars": 1147,
"preview": "---\r\ntitle: Carousel\r\ndescription: Carousels show a collection of items that can be scrolled on and off the screen\r\n---\r"
},
{
"path": "apps/docs/content/components/checkbox.md",
"chars": 1275,
"preview": "---\r\ntitle: Checkbox\r\ndescription: Checkboxes let users select one or more items from a list, or turn an item on or off\r"
},
{
"path": "apps/docs/content/components/chips.md",
"chars": 532,
"preview": "---\r\ntitle: Chips\r\ndescription: Chips help people enter information, make selections, filter content, or trigger actions"
},
{
"path": "apps/docs/content/components/date-pickers.md",
"chars": 1349,
"preview": "---\r\ntitle: Date pickers\r\ndescription: Date pickers let people select a date, or a range of dates\r\n---\r\n\r\n## Usage\r\n\r\n<u"
},
{
"path": "apps/docs/content/components/dialogs.md",
"chars": 120,
"preview": "---\r\ntitle: Dialogs\r\ndescription: Dialogs provide important prompts in a user flow\r\n---\r\n\r\n## Usage\r\n\r\n<usage></usage>\r\n"
},
{
"path": "apps/docs/content/components/divider.md",
"chars": 667,
"preview": "---\r\ntitle: Divider\r\ndescription: Dividers are thin lines that group content in lists or other containers\r\n---\r\n\r\n## Usa"
},
{
"path": "apps/docs/content/components/focus-ring.md",
"chars": 1098,
"preview": "---\r\ntitle: Focus Ring\r\n---\r\n\r\n## Usage\r\n\r\n<usage></usage>\r\n\r\n## Props\r\n| Name | Type "
},
{
"path": "apps/docs/content/components/label.md",
"chars": 407,
"preview": "---\r\ntitle: Label\r\ndescription: Use original html label tag, but prevented text selection when double clicked\r\n---\r\n\r\n##"
},
{
"path": "apps/docs/content/components/lists.md",
"chars": 967,
"preview": "---\r\ntitle: Lists\r\ndescription: Lists are continuous, vertical indexes of text and images\r\n---\r\n\r\n## Usage\r\n\r\n<usage></u"
},
{
"path": "apps/docs/content/components/menus.md",
"chars": 2305,
"preview": "---\r\ntitle: Menus\r\ndescription: Menus display a list of choices on a temporary surface\r\n---\r\n\r\n## Usage\r\n\r\n<usage></usag"
},
{
"path": "apps/docs/content/components/navigation/navigation-bar.md",
"chars": 148,
"preview": "---\r\ntitle: Navigation bar\r\ndescription: Navigation bars let people switch between UI views on smaller devices\r\n---\r\n\r\n#"
},
{
"path": "apps/docs/content/components/navigation/navigation-drawer.md",
"chars": 687,
"preview": "---\r\ntitle: Navigation drawer\r\ndescription: Navigation drawers let people switch between UI views on larger devices\r\n---"
},
{
"path": "apps/docs/content/components/navigation/navigation-rail.md",
"chars": 152,
"preview": "---\r\ntitle: Navigation rail\r\ndescription: Navigation rails let people switch between UI views on mid-sized devices\r\n---\r"
},
{
"path": "apps/docs/content/components/pagination.md",
"chars": 581,
"preview": "---\r\ntitle: Pagination\r\ndescription: Pagination is a component that allows users to navigate between multiple pages.\r\n--"
},
{
"path": "apps/docs/content/components/progress/circular-progress.md",
"chars": 963,
"preview": "---\r\ntitle: CircularProgress\r\ndescription: Circular progress is a visual indicator that communicates the status of a pro"
},
{
"path": "apps/docs/content/components/progress/linear-progress.md",
"chars": 847,
"preview": "---\r\ntitle: LinearProgress\r\ndescription: Linear progress indicators visualize the linear progress of a task, where the p"
},
{
"path": "apps/docs/content/components/radio.md",
"chars": 917,
"preview": "---\r\ntitle: Radio button\r\ndescription: Radio buttons let people select one option from a set of options\r\n---\r\n\r\n## Usage"
},
{
"path": "apps/docs/content/components/ripple.md",
"chars": 153,
"preview": "---\r\ntitle: Ripple\r\ndescription: Ripples are state layers used to communicate the status of a component or interactive e"
},
{
"path": "apps/docs/content/components/select.md",
"chars": 3962,
"preview": "---\r\ntitle: Select\r\ndescription: Select fields components are used for collecting user provided information from a list "
},
{
"path": "apps/docs/content/components/sheets/bottom-sheets.md",
"chars": 503,
"preview": "---\r\ntitle: Bottom sheets\r\ndescription: Bottom sheets show secondary content anchored to the bottom of the screen\r\n---\r\n"
},
{
"path": "apps/docs/content/components/sheets/side-sheets.md",
"chars": 841,
"preview": "---\r\ntitle: Side sheets\r\ndescription: Side sheets are surfaces containing supplementary content or actions to support ta"
},
{
"path": "apps/docs/content/components/sliders.md",
"chars": 1094,
"preview": "---\r\ntitle: Sliders\r\ndescription: Sliders let users make selections from a range of values\r\n---\r\n\r\n## Usage\r\n\r\n<usage></"
},
{
"path": "apps/docs/content/components/snackbar.md",
"chars": 141,
"preview": "---\ntitle: Snackbar\ndescription: Snackbars show short updates about app processes at the bottom of the screen\n---\n\n## Us"
},
{
"path": "apps/docs/content/components/swiper.md",
"chars": 125,
"preview": "---\r\ntitle: Swiper\r\ndescription: Swiper is simple banner slider with a lot of features.\r\n---\r\n\r\n## Usage\r\n\r\n<usage></usa"
},
{
"path": "apps/docs/content/components/switch.md",
"chars": 5252,
"preview": "---\r\ntitle: Switch\r\ndescription: Switches toggle the state of an item on or off\r\n---\r\n\r\n## Usage\r\n\r\n<usage></usage>\r\n\r\n#"
},
{
"path": "apps/docs/content/components/table.md",
"chars": 5100,
"preview": "---\r\ntitle: Table\r\ndescription: Table is a component that allows you to display tabular data.\r\n---\r\n\r\n## Usage\r\n\r\n<usage"
},
{
"path": "apps/docs/content/components/tabs.md",
"chars": 804,
"preview": "---\r\ntitle: Tabs\r\ndescription: Tabs organize content across different screens and views\r\n---\r\n\r\n## Usage\r\n\r\n<usage></usa"
},
{
"path": "apps/docs/content/components/terminal.md",
"chars": 675,
"preview": "---\r\ntitle: Terminal\r\ndescription: Tabs organize content across different screens and views\r\n---\r\n\r\n## Usage\r\n\r\n<usage><"
},
{
"path": "apps/docs/content/components/text-fields.md",
"chars": 12792,
"preview": "---\r\ntitle: Text fields\r\ndescription: Text fields let users enter text into a UI\r\n---\r\n\r\n## Usage\r\n\r\n<usage></usage>\r\n\r\n"
},
{
"path": "apps/docs/content/components/time-pickers.md",
"chars": 131,
"preview": "---\r\ntitle: Time pickers\r\ndescription: Time pickers help users select and set a specific time\r\n---\r\n\r\n## Usage\r\n\r\n<usage"
},
{
"path": "apps/docs/content/components/tooltips.md",
"chars": 7258,
"preview": "---\r\ntitle: Tooltips\r\ndescription: Tooltips display brief labels or messages\r\n---\r\n\r\n## Usage\r\n\r\n<usage></usage>\r\n\r\n## P"
},
{
"path": "apps/docs/content/getting-started/icons.md",
"chars": 140,
"preview": "---\r\ntitle: Icon\r\n---\r\n\r\n> Icons are based on <a href=\"https://fonts.google.com/icons\" target=\"_blank\">Material Icons</a"
},
{
"path": "apps/docs/content/getting-started/installation.md",
"chars": 4677,
"preview": "---\r\ntitle: Installation\r\n---\r\n\r\n## Prerequisites\r\n\r\n> Actify is working with Tailwind CSS classes and you need to have "
},
{
"path": "apps/docs/content/getting-started/theme.md",
"chars": 43,
"preview": "---\r\ntitle: Theme\r\n---\r\n\r\n<theme></theme>\r\n"
},
{
"path": "apps/docs/content/getting-started/why-actify.md",
"chars": 1007,
"preview": "---\r\ntitle: Why Actify\r\n---\r\n\r\n## What is Actify?\r\n\r\nActify is an open source react component library written in Vite + "
},
{
"path": "apps/docs/next.config.mjs",
"chars": 129,
"preview": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n distDir: 'dist',\n output: 'export'\n}\n\nexport default ne"
},
{
"path": "apps/docs/package.json",
"chars": 1102,
"preview": "{\n \"name\": \"docs\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"ne"
},
{
"path": "apps/docs/postcss.config.mjs",
"chars": 89,
"preview": "const config = {\n plugins: {\n '@tailwindcss/postcss': {}\n }\n}\nexport default config\n"
},
{
"path": "apps/docs/src/app/(docs)/[...slug]/page.tsx",
"chars": 1205,
"preview": "import { getAllDocSlugs, getDocData } from '@/lib/doc'\r\n\r\nimport Markdown from '@/components/Markdown'\r\nimport TableOfCo"
},
{
"path": "apps/docs/src/app/(docs)/layout.tsx",
"chars": 777,
"preview": "'use client'\r\n\r\nimport Aside from '@/components/Aside'\r\nimport EditOnGitHub from '@/components/EditOnGitHub'\r\nimport { t"
},
{
"path": "apps/docs/src/app/app.css",
"chars": 5649,
"preview": "@import 'tailwindcss';\n@plugin \"@tailwindcss/typography\";\n\n@custom-variant dark (&:where([data-theme=dark], [data-theme="
},
{
"path": "apps/docs/src/app/fonts.ts",
"chars": 363,
"preview": "import { Fira_Code, Poppins } from 'next/font/google'\r\n\r\nexport const poppins = Poppins({\r\n display: 'swap',\r\n subsets"
},
{
"path": "apps/docs/src/app/layout.tsx",
"chars": 540,
"preview": "import './app.css'\n\nimport { Metadata } from 'next'\nimport { poppins } from './fonts'\n\nexport const metadata: Metadata ="
},
{
"path": "apps/docs/src/app/page.tsx",
"chars": 2943,
"preview": "import { Icon, LinkButton } from 'actify'\n\nimport Link from 'next/link'\nimport Logo from '@/components/Logo'\nimport Spon"
},
{
"path": "apps/docs/src/app/template.tsx",
"chars": 591,
"preview": "'use client'\r\n\r\nimport App from '@/components/App'\r\nimport Console from '@/components/Console'\r\nimport Footer from '@/co"
},
{
"path": "apps/docs/src/components/App.tsx",
"chars": 367,
"preview": "import React from 'react'\r\nimport packageInfo from 'actify/package.json'\r\n\r\nexport default function App({ children }: { "
},
{
"path": "apps/docs/src/components/AppDrawer.tsx",
"chars": 741,
"preview": "'use client'\r\n\r\nimport {\r\n DrawerActivator,\r\n DrawerContent,\r\n Icon,\r\n IconButton,\r\n NavigationDrawer\r\n} from 'acti"
},
{
"path": "apps/docs/src/components/Aside.tsx",
"chars": 4083,
"preview": "'use client'\r\n\r\nimport { List, ListGroup, ListItem } from 'actify'\r\n\r\nimport GettingStarted from './GettingStarted'\r\nimp"
},
{
"path": "apps/docs/src/components/Console.tsx",
"chars": 7327,
"preview": "import React from 'react'\n\nconst Console = () => {\n const svgToBase64 = (svgElement: Node) => {\n const svgString = n"
},
{
"path": "apps/docs/src/components/DocPreview.tsx",
"chars": 1905,
"preview": "'use client'\r\n\r\nimport * as Actify from 'actify'\r\n\r\nimport { LivePreview, LiveProvider } from 'react-live'\r\n\r\nimport Syn"
},
{
"path": "apps/docs/src/components/DocTabs.tsx",
"chars": 2375,
"preview": "'use client'\r\n\r\nimport { TabItem, Tabs } from 'actify'\r\n\r\nimport React from 'react'\r\nimport SyntaxHighlighter from '@/co"
},
{
"path": "apps/docs/src/components/DocUsage.tsx",
"chars": 2335,
"preview": "'use client'\r\n\r\nimport { Icon, TabItem, Tabs, TooltipGroup } from 'actify'\r\n\r\nimport OpenInCodeSandbox from '@/component"
},
{
"path": "apps/docs/src/components/Dropdown.tsx",
"chars": 1088,
"preview": "import { Button, Icon } from 'actify'\r\n\r\nimport NavLink from './NavLink'\r\nimport React from 'react'\r\n\r\ninterface Dropdow"
},
{
"path": "apps/docs/src/components/EditOnGitHub.tsx",
"chars": 482,
"preview": "import { Button, Icon } from 'actify'\r\n\r\ntype EditOnGitHubProps = {\r\n pathname: string | null\r\n}\r\nconst EditOnGitHub = "
},
{
"path": "apps/docs/src/components/Footer.tsx",
"chars": 1654,
"preview": "'use client'\r\n\r\nimport { Icon } from 'actify'\r\nimport React from 'react'\r\nimport { tv } from 'tailwind-variants'\r\n\r\ncons"
},
{
"path": "apps/docs/src/components/GettingStarted.tsx",
"chars": 963,
"preview": "import { ListGroup, ListItem } from 'actify'\r\n\r\nimport NavLink from './NavLink'\r\n\r\nconst GettingStarted = () => {\r\n ret"
},
{
"path": "apps/docs/src/components/Header.tsx",
"chars": 4008,
"preview": "'use client'\r\n\r\nimport { Icon, IconButton, LinkButton, Spacer } from 'actify'\r\n\r\nimport AppDrawer from '@/components/App"
},
{
"path": "apps/docs/src/components/Logo.tsx",
"chars": 873,
"preview": "'use client'\r\n\r\nimport React from 'react'\r\nimport { motion } from 'motion/react'\r\n\r\nconst Logo = ({ height }: React.Comp"
},
{
"path": "apps/docs/src/components/Markdown.tsx",
"chars": 2505,
"preview": "import DocPreview from '@/components/DocPreview'\r\nimport DocTabs from '@/components/DocTabs'\r\nimport DocUsage from '@/co"
},
{
"path": "apps/docs/src/components/NavLink.tsx",
"chars": 656,
"preview": "'use client'\r\n\r\nimport Link from 'next/link'\r\nimport { usePathname } from 'next/navigation'\r\n\r\ninterface NavLinkProps {\r"
},
{
"path": "apps/docs/src/components/NgrokerLogo.tsx",
"chars": 3426,
"preview": "const NgrokerLogo = () => {\r\n return (\r\n <svg width=\"137\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <pa"
},
{
"path": "apps/docs/src/components/OpenInCodeSandbox.tsx",
"chars": 9800,
"preview": "import { IconButton, Tooltip, TooltipTrigger } from 'actify'\r\n\r\nimport React from 'react'\r\nimport { getParameters } from"
},
{
"path": "apps/docs/src/components/OpenInStackblitz.tsx",
"chars": 9430,
"preview": "import { IconButton, Tooltip, TooltipTrigger } from 'actify'\r\n\r\nimport React from 'react'\r\nimport packageInfo from 'acti"
},
{
"path": "apps/docs/src/components/QzyLogo.tsx",
"chars": 13721,
"preview": "const Logo = () => {\r\n return (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"150.016\"\r\n heigh"
},
{
"path": "apps/docs/src/components/Search.tsx",
"chars": 2706,
"preview": "'use client'\r\n\r\nimport '@docsearch/css'\r\n\r\nimport { Button, Icon } from 'actify'\r\nimport { DocSearchModal, useDocSearchK"
},
{
"path": "apps/docs/src/components/Sponsors.tsx",
"chars": 1070,
"preview": "import { LinkButton } from 'actify'\r\nimport NgrokerLogo from '@/components/NgrokerLogo'\r\nimport TaildoorLogo from '@/com"
},
{
"path": "apps/docs/src/components/SyntaxHighlighter.tsx",
"chars": 2353,
"preview": "'use client'\n\nimport { Icon, IconButton } from 'actify'\nimport React, { useState } from 'react'\n\nimport { cn } from '@/u"
},
{
"path": "apps/docs/src/components/TableOfContents.tsx",
"chars": 1857,
"preview": "'use client'\r\n\r\nimport { useEffect, useState } from 'react'\r\n\r\nconst generateSlug = (str: string) => {\r\n str = str?.rep"
},
{
"path": "apps/docs/src/components/TaildoorLogo.tsx",
"chars": 27327,
"preview": "const TaildoorLogo = () => {\r\n return (\r\n <svg\r\n height=\"32\"\r\n viewBox=\"0 0 1675.615 400\"\r\n xmlns=\"ht"
},
{
"path": "apps/docs/src/components/ThemeChanger.tsx",
"chars": 12291,
"preview": "'use client'\r\n\r\nimport {\r\n ColorMode,\r\n changeColor,\r\n changeColorAndMode,\r\n changeColorMode,\r\n getCurrentMode,\r\n "
},
{
"path": "apps/docs/src/components/ViewSource.tsx",
"chars": 1489,
"preview": "import { Icon, IconButton, Tooltip, TooltipTrigger } from 'actify'\r\n\r\nconst hyphenToPascalCase = (str: string) => {\r\n r"
},
{
"path": "apps/docs/src/hooks/useAutoTheme.ts",
"chars": 957,
"preview": "import {\r\n changeColor,\r\n getCurrentMode,\r\n getCurrentSeedColor\r\n} from '../utils/theme'\r\n\r\nimport React from 'react'"
},
{
"path": "apps/docs/src/hooks/useMounted.ts",
"chars": 203,
"preview": "import { useEffect, useState } from 'react'\r\n\r\nexport const useMounted = () => {\r\n const [mounted, setMounted] = useSta"
},
{
"path": "apps/docs/src/lib/doc.ts",
"chars": 1120,
"preview": "import fs from 'fs'\r\nimport matter from 'gray-matter'\r\nimport path from 'path'\r\n\r\nconst docsDirectory = path.join(proces"
},
{
"path": "apps/docs/src/lib/raw.ts",
"chars": 209,
"preview": "import fs from 'fs/promises'\r\n\r\nexport async function getFileRaw(filepath: string) {\r\n let content = undefined\r\n try {"
},
{
"path": "apps/docs/src/usages/accordion.tsx",
"chars": 2606,
"preview": "import {\r\n Accordion,\r\n AccordionContent,\r\n AccordionHeader,\r\n AccordionItem,\r\n Icon\r\n} from 'actify'\r\n\r\nexport def"
},
{
"path": "apps/docs/src/usages/app-bars/bottom-app-bar.tsx",
"chars": 524,
"preview": "import {\r\n BottomAppBar,\r\n BottomAppBarFab,\r\n BottomAppBarIcons,\r\n Fab,\r\n Icon\r\n} from 'actify'\r\n\r\nexport default ("
},
{
"path": "apps/docs/src/usages/app-bars/top-app-bar.tsx",
"chars": 331,
"preview": "import { TopAppBar } from 'actify'\r\n\r\nexport default () => {\r\n return (\r\n <div className=\"space-y-2\">\r\n <TopApp"
},
{
"path": "apps/docs/src/usages/autocomplete.tsx",
"chars": 717,
"preview": "import { Autocomplete, AutocompleteItem } from 'actify'\n\nexport default () => {\n return (\n <div className=\"max-sm:fl"
},
{
"path": "apps/docs/src/usages/avatar.tsx",
"chars": 101,
"preview": "import { Avatar } from 'actify'\r\n\r\nexport default () => <Avatar className=\"size-12 rounded-full\" />\r\n"
},
{
"path": "apps/docs/src/usages/badges.tsx",
"chars": 855,
"preview": "import { Badge, Button, Icon, IconButton, Slider } from 'actify'\r\n\r\nimport { useState } from 'react'\r\n\r\nexport default ("
},
{
"path": "apps/docs/src/usages/before-after.tsx",
"chars": 147,
"preview": "import { BeforeAfter } from 'actify'\r\n\r\nexport default () => {\r\n return <BeforeAfter before=\"/images/before.jpg\" after="
},
{
"path": "apps/docs/src/usages/buttons/button.tsx",
"chars": 2843,
"preview": "import { Button } from 'actify'\r\n\r\nexport default () => {\r\n return (\r\n <div className=\"flex flex-col gap-4 *:text-xl"
},
{
"path": "apps/docs/src/usages/buttons/fab.tsx",
"chars": 841,
"preview": "import { Fab, Icon } from 'actify'\r\n\r\nexport default () => {\r\n return (\r\n <div className=\"flex gap-4\">\r\n <Fab c"
},
{
"path": "apps/docs/src/usages/buttons/icon-button.tsx",
"chars": 777,
"preview": "import { Icon, IconButton } from 'actify'\r\n\r\nexport default () => {\r\n return (\r\n <div className=\"flex items-center g"
},
{
"path": "apps/docs/src/usages/buttons/segmented-button.tsx",
"chars": 1598,
"preview": "import { Icon, SegmentedButton, SegmentedButtonSet } from 'actify'\r\n\r\nimport React from 'react'\r\n\r\nexport default () => "
},
{
"path": "apps/docs/src/usages/cards.tsx",
"chars": 1989,
"preview": "import { Card } from 'actify'\r\n\r\nexport default () => {\r\n return (\r\n <div className=\"flex-wrap lg:flex-nowrap flex g"
},
{
"path": "apps/docs/src/usages/carousel.tsx",
"chars": 1323,
"preview": "import { Carousel, CarouselItem } from 'actify'\r\n\r\nexport default () => {\r\n return (\r\n <Carousel autoPlay control in"
},
{
"path": "apps/docs/src/usages/checkbox.tsx",
"chars": 1674,
"preview": "import { Checkbox, CheckboxGroup } from 'actify'\r\nimport React, { useEffect, useState } from 'react'\r\n\r\nexport default ("
},
{
"path": "apps/docs/src/usages/chips.tsx",
"chars": 1986,
"preview": "import { ChipGroup, ChipItem, useListData, type Selection } from 'actify'\r\n\r\nimport React from 'react'\r\n\r\nexport default"
},
{
"path": "apps/docs/src/usages/dialogs.tsx",
"chars": 1232,
"preview": "import {\r\n Button,\r\n Dialog,\r\n DialogActivator,\r\n Modal,\r\n TextField,\r\n useDialogState\r\n} from 'actify'\r\n\r\nimport "
},
{
"path": "apps/docs/src/usages/divider.tsx",
"chars": 388,
"preview": "import { Divider } from 'actify'\r\n\r\nexport default () => {\r\n return (\r\n <div className=\"flex flex-col gap-2\">\r\n "
},
{
"path": "apps/docs/src/usages/focus-ring.tsx",
"chars": 752,
"preview": "import { FocusRing, useFocusRing } from 'actify'\r\n\r\nimport React from 'react'\r\n\r\nfunction FocusRingInput({ inward }: { i"
},
{
"path": "apps/docs/src/usages/lists.tsx",
"chars": 457,
"preview": "import { List, ListItem, ListGroup } from 'actify'\r\n\r\nexport default () => {\r\n const list = ['HTML', 'Tailwind CSS', 'V"
},
{
"path": "apps/docs/src/usages/menus.tsx",
"chars": 1209,
"preview": "import {\r\n Icon,\r\n IconButton,\r\n Menu,\r\n MenuButton,\r\n MenuItem,\r\n MenuPopover,\r\n Submenu\r\n} from 'actify'\r\n\r\nimp"
},
{
"path": "apps/docs/src/usages/navigation/navigation-bar.tsx",
"chars": 747,
"preview": "import { Icon, ListItem, NavigationBar } from 'actify'\r\n\r\nexport default () => {\r\n const list = [\r\n {\r\n label: "
},
{
"path": "apps/docs/src/usages/navigation/navigation-drawer.tsx",
"chars": 2542,
"preview": "import {\r\n DrawerActivator,\r\n DrawerContent,\r\n Icon,\r\n IconButton,\r\n NavigationDrawer,\r\n Tooltip,\r\n TooltipGroup\r"
},
{
"path": "apps/docs/src/usages/navigation/navigation-rail.tsx",
"chars": 519,
"preview": "import { NavigationRail } from 'actify'\r\n\r\nexport default () => {\r\n const items = [\r\n {\r\n label: 'Home',\r\n "
},
{
"path": "apps/docs/src/usages/pagination.tsx",
"chars": 406,
"preview": "import { Pagination } from 'actify'\r\nimport { useState } from 'react'\r\n\r\nexport default () => {\r\n const totalPages = 20"
},
{
"path": "apps/docs/src/usages/progress/circular-progress.tsx",
"chars": 1101,
"preview": "import { CircularProgress, Label, Slider, Switch } from 'actify'\r\n\r\nimport { useState } from 'react'\r\n\r\nexport default ("
},
{
"path": "apps/docs/src/usages/progress/linear-progress.tsx",
"chars": 1112,
"preview": "import { Label, LinearProgress, Slider, Switch } from 'actify'\r\n\r\nimport { useState } from 'react'\r\n\r\nexport default () "
},
{
"path": "apps/docs/src/usages/radio.tsx",
"chars": 896,
"preview": "import { Radio, RadioGroup } from 'actify'\r\n\r\nexport default () => {\r\n return (\r\n <div className=\"flex flex-col gap-"
},
{
"path": "apps/docs/src/usages/ripple.tsx",
"chars": 651,
"preview": "import { Label, Ripple } from 'actify'\r\n\r\nimport { useId } from 'react'\r\n\r\nexport default () => {\r\n const id = useId()\r"
},
{
"path": "apps/docs/src/usages/select.tsx",
"chars": 1531,
"preview": "import { Select, SelectOption } from 'actify'\r\n\r\nimport React from 'react'\r\n\r\nexport default () => {\r\n const [selectedK"
},
{
"path": "apps/docs/src/usages/sheets/bottom-sheets.tsx",
"chars": 636,
"preview": "import {\r\n BottomSheets,\r\n BottomSheetsActivator,\r\n BottomSheetsContent,\r\n Button\r\n} from 'actify'\r\n\r\nexport default"
},
{
"path": "apps/docs/src/usages/sheets/side-sheets.tsx",
"chars": 891,
"preview": "import {\r\n Button,\r\n SideSheets,\r\n SideSheetsAction,\r\n SideSheetsActivator,\r\n SideSheetsBody,\r\n SideSheetsContent,"
},
{
"path": "apps/docs/src/usages/sliders.tsx",
"chars": 626,
"preview": "import { Slider } from 'actify'\r\n\r\nexport default () => {\r\n return (\r\n <div className=\"flex flex-col\">\r\n <div c"
},
{
"path": "apps/docs/src/usages/snackbar.tsx",
"chars": 547,
"preview": "import { Button, SnackbarProvider } from 'actify'\n\nexport default () => {\n return (\n <SnackbarProvider>\n {(stat"
},
{
"path": "apps/docs/src/usages/swiper.tsx",
"chars": 1084,
"preview": "import { Swiper, SwiperItem } from 'actify'\r\n\r\nexport default () => {\r\n const items = [\r\n {\r\n title: 'Swiper 1'"
},
{
"path": "apps/docs/src/usages/switch.tsx",
"chars": 919,
"preview": "import { Label, Switch } from 'actify'\r\n\r\nexport default () => {\r\n return (\r\n <>\r\n <div className=\"flex gap-2 f"
},
{
"path": "apps/docs/src/usages/table.tsx",
"chars": 1993,
"preview": "import {\r\n Cell,\r\n Column,\r\n Row,\r\n Table,\r\n TableBody,\r\n TableHeader,\r\n useAsyncList\r\n} from 'actify'\r\n\r\ninterfa"
},
{
"path": "apps/docs/src/usages/tabs.tsx",
"chars": 2113,
"preview": "import { Divider, TabItem, Tabs } from 'actify'\r\n\r\nexport default () => {\r\n return (\r\n <>\r\n <Tabs>\r\n <Ta"
},
{
"path": "apps/docs/src/usages/terminal.tsx",
"chars": 227,
"preview": "import { Terminal } from 'actify'\r\n\r\nexport default () => {\r\n return (\r\n <Terminal>\r\n <span className=\"text-ind"
},
{
"path": "apps/docs/src/usages/text-fields.tsx",
"chars": 1042,
"preview": "import { Icon, IconButton, TextField } from 'actify'\r\n\r\nimport { useState } from 'react'\r\n\r\nexport default () => {\r\n co"
},
{
"path": "apps/docs/src/usages/tooltips.tsx",
"chars": 251,
"preview": "import { Button, Tooltip, TooltipTrigger } from 'actify'\r\n\r\nexport default () => {\r\n return (\r\n <>\r\n <TooltipTr"
},
{
"path": "apps/docs/src/utils/apply-theme-string.ts",
"chars": 1663,
"preview": "type WithStylesheet = typeof globalThis & {\r\n [stylesheetName: string]: CSSStyleSheet | undefined\r\n}\r\n\r\n/**\r\n * Applies"
},
{
"path": "apps/docs/src/utils/cn.ts",
"chars": 166,
"preview": "import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: Cla"
},
{
"path": "apps/docs/src/utils/material-color-helpers.ts",
"chars": 5086,
"preview": "import {\r\n Hct,\r\n MaterialDynamicColors,\r\n SchemeContent,\r\n argbFromHex,\r\n hexFromArgb\r\n} from '@material/material-"
},
{
"path": "apps/docs/src/utils/theme.ts",
"chars": 4663,
"preview": "import {\r\n applyMaterialTheme,\r\n themeFromSourceColor\r\n} from './material-color-helpers.ts'\r\n\r\n/** Color mode, either "
},
{
"path": "apps/docs/src/views/icon.tsx",
"chars": 2695,
"preview": "'use client'\r\n\r\nimport { Icon, Label, LinearProgress, Switch, TextField } from 'actify'\r\nimport { RefObject, useEffect, "
},
{
"path": "apps/docs/src/views/icons.json",
"chars": 63168,
"preview": "[\r\n \"Search\",\r\n \"Home\",\r\n \"Menu\",\r\n \"Close\",\r\n \"Settings\",\r\n \"Check_Circle\",\r\n \"Favorite\",\r\n \"Add\",\r\n \"Delete\","
},
{
"path": "apps/docs/src/views/theme.tsx",
"chars": 8303,
"preview": "'use client'\r\n\r\nimport {\r\n changeColor,\r\n getCurrentSeedColor,\r\n getCurrentThemeString\r\n} from '@/utils/theme'\r\nimpor"
},
{
"path": "apps/docs/tsconfig.json",
"chars": 782,
"preview": "{\n \"compilerOptions\": {\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n "
},
{
"path": "biome.json",
"chars": 496,
"preview": "{\n\t\"$schema\": \"https://biomejs.dev/schemas/2.2.6/schema.json\",\n\t\"vcs\": {\n\t\t\"enabled\": false,\n\t\t\"clientKind\": \"git\",\n\t\t\"u"
},
{
"path": "package.json",
"chars": 373,
"preview": "{\n \"name\": \"actifyjs\",\n \"private\": true,\n \"scripts\": {\n \"build\": \"turbo run build\",\n \"dev\": \"turbo run dev --no"
},
{
"path": "packages/actify/package.json",
"chars": 2011,
"preview": "{\n \"name\": \"actify\",\n \"version\": \"0.5.7\",\n \"license\": \"MIT\",\n \"author\": \"Lerte Smith\",\n \"keywords\": [\n \"actify\","
},
{
"path": "packages/actify/rollup.config.mjs",
"chars": 1804,
"preview": "import commonjs from '@rollup/plugin-commonjs'\r\nimport { exec } from 'child_process'\r\nimport json from '@rollup/plugin-j"
},
{
"path": "packages/actify/src/animations/index.ts",
"chars": 766,
"preview": "const STANDARD = [0.2, 0, 0, 1] as const\r\nconst STANDARD_ACCELERATE = [0.3, 0, 1, 1] as const\r\nconst STANDARD_DECELERATE"
},
{
"path": "packages/actify/src/components/Accordion/Accordion.tsx",
"chars": 1071,
"preview": "'use client'\r\n\r\nimport { AccordionProps, AccordionProvider } from './AccordionContext'\r\nimport {\r\n Children,\r\n Compone"
},
{
"path": "packages/actify/src/components/Accordion/AccordionContent.tsx",
"chars": 1335,
"preview": "'use client'\r\n\r\nimport React, { useMemo } from 'react'\r\n\r\nimport { Slot } from './../Slot'\r\nimport { Text } from './../T"
},
{
"path": "packages/actify/src/components/Accordion/AccordionContext.tsx",
"chars": 796,
"preview": "'use client'\r\n\r\nimport React, { createContext, useContext } from 'react'\r\n\r\nexport type AccordionProps = {\r\n multiple?:"
},
{
"path": "packages/actify/src/components/Accordion/AccordionHeader.tsx",
"chars": 1840,
"preview": "'use client'\r\n\r\nimport React, { useMemo } from 'react'\r\n\r\nimport { Icon } from './../Icon'\r\nimport { Slot } from './../S"
},
{
"path": "packages/actify/src/components/Accordion/AccordionItem.tsx",
"chars": 767,
"preview": "'use client'\r\n\r\nimport React, { Children, cloneElement, isValidElement } from 'react'\r\n\r\nimport clsx from 'clsx'\r\nimport"
},
{
"path": "packages/actify/src/components/Accordion/accordion.module.css",
"chars": 576,
"preview": ".accordion {\n display: flex;\n gap: 16px;\n border-radius: 8px;\n flex-direction: column;\n}\n\n.accordion-item {\n paddin"
},
{
"path": "packages/actify/src/components/Accordion/index.ts",
"chars": 198,
"preview": "export { Accordion } from './Accordion'\r\nexport { AccordionItem } from './AccordionItem'\r\nexport { AccordionHeader } fro"
},
{
"path": "packages/actify/src/components/ActionMenu/ActionMenu.tsx",
"chars": 1471,
"preview": "import { AriaButtonProps, Placement, useMenuTrigger } from 'react-aria'\nimport type { AriaMenuProps, MenuTriggerProps } "
},
{
"path": "packages/actify/src/components/ActionMenu/Menu.tsx",
"chars": 1346,
"preview": "import { AriaMenuProps, useMenu } from 'react-aria'\n\nimport { MenuItem } from './MenuItem'\nimport { MenuItems } from './"
},
{
"path": "packages/actify/src/components/ActionMenu/MenuItem.tsx",
"chars": 1325,
"preview": "import { mergeProps, useFocusRing, useMenuItem } from 'react-aria'\n\nimport { FocusRing } from './../FocusRing'\nimport { "
},
{
"path": "packages/actify/src/components/ActionMenu/MenuItems.tsx",
"chars": 986,
"preview": "import { MenuItem } from './MenuItem'\nimport type { Node } from '@react-types/shared'\nimport React from 'react'\nimport {"
},
{
"path": "packages/actify/src/components/ActionMenu/index.ts",
"chars": 115,
"preview": "export { ActionMenu } from './ActionMenu'\nexport { Item as MenuItem, Section as MenuSection } from 'react-stately'\n"
},
{
"path": "packages/actify/src/components/ActionMenu/menu.module.css",
"chars": 1966,
"preview": ".menu {\n display: none;\n inset: auto;\n border: none;\n padding: 0px;\n overflow: visible;\n background-color: rgba(0,"
},
{
"path": "packages/actify/src/components/Autocomplete/Autocomplete.tsx",
"chars": 2510,
"preview": "import { AriaComboBoxProps, useComboBox, useFilter } from 'react-aria'\nimport { ComboBoxStateOptions, useComboBoxState }"
},
{
"path": "packages/actify/src/components/Autocomplete/autocomplete.module.css",
"chars": 105,
"preview": ".autocomplete {\n width: 100%;\n position: relative;\n display: inline-flex;\n flex-direction: column;\n}\n"
},
{
"path": "packages/actify/src/components/Autocomplete/index.ts",
"chars": 103,
"preview": "export { Autocomplete } from './Autocomplete'\nexport { Item as AutocompleteItem } from 'react-stately'\n"
},
{
"path": "packages/actify/src/components/Avatar/Avatar.tsx",
"chars": 403,
"preview": "import React from 'react'\r\n\r\nexport interface AvatarProps extends React.ComponentProps<'img'> {}\r\n\r\nconst Avatar = (prop"
},
{
"path": "packages/actify/src/components/Avatar/index.ts",
"chars": 35,
"preview": "export { Avatar } from './Avatar'\r\n"
},
{
"path": "packages/actify/src/components/Badges/Badges.tsx",
"chars": 895,
"preview": "'use client'\r\n\r\nimport React, { useMemo } from 'react'\r\n\r\nimport clsx from 'clsx'\r\nimport styles from './badges.module.c"
},
{
"path": "packages/actify/src/components/Badges/badges.module.css",
"chars": 782,
"preview": ".root {\r\n display: inline-flex;\r\n position: relative;\r\n}\r\n.badge {\r\n padding: 4px;\r\n display: grid;\r\n font-size: 0."
},
{
"path": "packages/actify/src/components/Badges/index.tsx",
"chars": 33,
"preview": "export { Badge } from './Badges'\n"
},
{
"path": "packages/actify/src/components/BeforeAfter/BeforeAfter.tsx",
"chars": 1716,
"preview": "'use client'\r\n\r\nimport { Icon } from './../Icon'\r\nimport React from 'react'\r\nimport styles from './before-after.module.c"
},
{
"path": "packages/actify/src/components/BeforeAfter/before-after.module.css",
"chars": 1327,
"preview": ".root {\n height: fit-content;\n display: grid;\n place-content: center;\n}\n.inner {\n position: relative;\n display: gri"
},
{
"path": "packages/actify/src/components/BeforeAfter/index.ts",
"chars": 45,
"preview": "export { BeforeAfter } from './BeforeAfter'\r\n"
},
{
"path": "packages/actify/src/components/BottomAppBar/BottomAppBar.tsx",
"chars": 530,
"preview": "import { Elevation } from './../Elevation'\r\nimport React from 'react'\r\nimport clsx from 'clsx'\r\nimport styles from './bo"
},
{
"path": "packages/actify/src/components/BottomAppBar/BottomAppBarFab.tsx",
"chars": 399,
"preview": "import React from 'react'\nimport clsx from 'clsx'\nimport styles from './bottom-app-bar.module.css'\n\ninterface BottomAppB"
},
{
"path": "packages/actify/src/components/BottomAppBar/BottomAppBarIcons.tsx",
"chars": 409,
"preview": "import React from 'react'\nimport clsx from 'clsx'\nimport styles from './bottom-app-bar.module.css'\n\ninterface BottomAppB"
},
{
"path": "packages/actify/src/components/BottomAppBar/bottom-app-bar.module.css",
"chars": 602,
"preview": ".root {\n display: flex;\n padding-left: 1rem /* 16px */;\n padding-right: 1rem /* 16px */;\n height: 5rem /* 80px */;\n "
},
{
"path": "packages/actify/src/components/BottomAppBar/index.ts",
"chars": 154,
"preview": "export { BottomAppBar } from './BottomAppBar'\nexport { BottomAppBarIcons } from './BottomAppBarIcons'\nexport { BottomApp"
},
{
"path": "packages/actify/src/components/BottomSheets/BottomSheets.tsx",
"chars": 373,
"preview": "'use client'\r\n\r\nimport {\r\n BottomSheetsProvider,\r\n BottomSheetsProviderProps\r\n} from './BottomSheetsContext'\r\n\r\nconst "
},
{
"path": "packages/actify/src/components/BottomSheets/BottomSheetsActivator.tsx",
"chars": 805,
"preview": "'use client'\r\n\r\nimport React from 'react'\r\nimport { Slot } from './../Slot'\r\nimport { useBottomSheets } from './BottomSh"
},
{
"path": "packages/actify/src/components/BottomSheets/BottomSheetsContent.tsx",
"chars": 2301,
"preview": "'use client'\r\n\r\nimport { AnimatePresence, motion } from 'motion/react'\r\nimport React, { useEffect, useState } from 'reac"
},
{
"path": "packages/actify/src/components/BottomSheets/BottomSheetsContext.tsx",
"chars": 1116,
"preview": "'use client'\r\n\r\nimport React, { createContext, useContext } from 'react'\r\n\r\nimport { useControllableState } from './../."
},
{
"path": "packages/actify/src/components/BottomSheets/bottom-sheets.module.css",
"chars": 1707,
"preview": ".root {\n position: fixed;\n overflow: hidden;\n z-index: 50;\n inset: 0;\n opacity: 0;\n transform: translate(var(--tw-"
},
{
"path": "packages/actify/src/components/BottomSheets/index.ts",
"chars": 171,
"preview": "export { BottomSheets } from './BottomSheets'\n\nexport { BottomSheetsActivator } from './BottomSheetsActivator'\nexport { "
},
{
"path": "packages/actify/src/components/Buttons/Button.tsx",
"chars": 1889,
"preview": "'use client'\n\nimport {\n Button as AriaButton,\n ButtonProps as AriaButtonProps\n} from 'react-aria-components'\nimport { "
},
{
"path": "packages/actify/src/components/Buttons/Fab.tsx",
"chars": 1410,
"preview": "'use client'\n\nimport {\n AriaButtonProps,\n mergeProps,\n useButton,\n useFocusRing\n} from 'react-aria'\nimport React, { "
},
{
"path": "packages/actify/src/components/Buttons/IconButton.tsx",
"chars": 1312,
"preview": "'use client'\n\nimport {\n Button as AriaButton,\n ButtonProps as AriaButtonProps\n} from 'react-aria-components'\nimport Re"
},
{
"path": "packages/actify/src/components/Buttons/LinkButton.tsx",
"chars": 2086,
"preview": "'use client'\n\nimport { AriaButtonProps, useFocusRing } from 'react-aria'\nimport React, { useId } from 'react'\n\nimport { "
},
{
"path": "packages/actify/src/components/Buttons/fab.module.css",
"chars": 880,
"preview": ".fab {\n border: 0 solid #e5e7eb;\n appearance: button;\n background-color: transparent;\n background-image: none;\n fon"
},
{
"path": "packages/actify/src/components/Buttons/icon-button.module.css",
"chars": 704,
"preview": ".btn {\n border: 0 solid #e5e7eb;\n appearance: button;\n background-color: transparent;\n background-image: none;\n fon"
},
{
"path": "packages/actify/src/components/Buttons/index.ts",
"chars": 146,
"preview": "export { Button } from './Button'\nexport { Fab } from './Fab'\nexport { IconButton } from './IconButton'\nexport { LinkBut"
},
{
"path": "packages/actify/src/components/Buttons/styles/button.module.css",
"chars": 2799,
"preview": ".btn {\n border: 0 solid #e5e7eb;\n appearance: button;\n background-color: transparent;\n background-image: none;\n\n bo"
},
{
"path": "packages/actify/src/components/Buttons/styles/color.module.css",
"chars": 206,
"preview": ".secondary {\n --md-sys-color-primary: var(--md-sys-color-secondary);\n}\n.tertiary {\n --md-sys-color-primary: var(--md-s"
},
{
"path": "packages/actify/src/components/Buttons/styles/variant.module.css",
"chars": 23072,
"preview": ".filled {\n --_container-color: var(\n --md-filled-button-container-color,\n var(--md-sys-color-primary, #6750a4)\n "
},
{
"path": "packages/actify/src/components/Cards/Card.tsx",
"chars": 973,
"preview": "'use client'\r\n\r\nimport { Elevation } from './../Elevation'\r\nimport React from 'react'\r\nimport { Ripple } from './../Ripp"
},
{
"path": "packages/actify/src/components/Cards/card.module.css",
"chars": 466,
"preview": ".root {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n border-radius: 0.75rem /* 12px */;\n}\n."
},
{
"path": "packages/actify/src/components/Cards/index.ts",
"chars": 30,
"preview": "export { Card } from './Card'\n"
},
{
"path": "packages/actify/src/components/Carousel/Carousel.tsx",
"chars": 1125,
"preview": "'use client'\r\n\r\nimport { CarouselContent } from './CarouselContent'\r\nimport { CarouselControl } from './CarouselControl'"
},
{
"path": "packages/actify/src/components/Carousel/CarouselContent.tsx",
"chars": 2596,
"preview": "'use client'\r\n\r\nimport { AnimatePresence, motion, wrap } from 'motion/react'\r\nimport React, { Children, isValidElement, "
}
]
// ... and 216 more files (download for full content)
About this extraction
This page contains the full source code of the actifyjs/actify GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 416 files (784.0 KB), approximately 239.7k tokens, and a symbol index with 244 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.