{children}
29 |
30 |
32 | {children}
6 | }
7 |
8 | export { SideSheetsAction }
9 |
--------------------------------------------------------------------------------
/apps/docs/src/usages/tooltips.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Tooltip, TooltipTrigger } from 'actify'
2 |
3 | export default () => {
4 | return (
5 | <>
6 |
8 | {children}
9 |
10 | )
11 | }
12 |
13 | export { CarouselItem }
14 |
--------------------------------------------------------------------------------
/packages/actify/src/components/SideSheets/index.ts:
--------------------------------------------------------------------------------
1 | export { SideSheets } from './SideSheets'
2 |
3 | export { SideSheetsAction } from './SideSheetsAction'
4 | export { SideSheetsActivator } from './SideSheetsActivator'
5 | export { SideSheetsBody } from './SideSheetsBody'
6 | export { SideSheetsContent } from './SideSheetsContent'
7 | export { SideSheetsHeader } from './SideSheetsHeader'
8 |
--------------------------------------------------------------------------------
/packages/actify/src/components/VisuallyHidden/visually-hidden.module.css:
--------------------------------------------------------------------------------
1 | .visually-hidden {
2 | /* https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss */
3 | position: absolute;
4 | border: 0;
5 | width: 1px;
6 | height: 1px;
7 | padding: 0;
8 | margin: -1px;
9 | overflow: hidden;
10 | clip: rect(0, 0, 0, 0);
11 | white-space: nowrap;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Checkbox/checkbox-group.module.css:
--------------------------------------------------------------------------------
1 | .checkbox-group[aria-orientation='horizontal'] {
2 | gap: 14px;
3 | align-items: center;
4 | }
5 | .checkbox-group[aria-orientation='vertical'] {
6 | flex-direction: column;
7 | }
8 | .description {
9 | font-size: 12px;
10 | }
11 | .error-message {
12 | font-size: 12px;
13 | color: var(--md-sys-color-error);
14 | }
15 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Select/TrailingIcon.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from '../Icon'
2 | import clsx from 'clsx'
3 | import styles from './trailingIcon.module.css'
4 |
5 | export const TrailingIcon = ({ isOpen }: { isOpen: boolean }) => {
6 | return (
7 |
6 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/apps/docs/content/components/buttons/segmented-button.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Segmented button
3 | description: Segmented buttons help people select options, switch views, or sort elements
4 | ---
5 |
6 | ## Usage
7 |
8 |
9 | {children}
10 |
11 | )
12 | }
13 |
14 | export { SwiperItem }
15 |
--------------------------------------------------------------------------------
/apps/docs/src/app/fonts.ts:
--------------------------------------------------------------------------------
1 | import { Fira_Code, Poppins } from 'next/font/google'
2 |
3 | export const poppins = Poppins({
4 | display: 'swap',
5 | subsets: ['latin'],
6 | variable: '--font-poppins',
7 | weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900']
8 | })
9 |
10 | export const fira_code = Fira_Code({
11 | subsets: ['latin'],
12 | variable: '--font-fira-code',
13 | display: 'swap'
14 | })
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
26 | .next
27 | .turbo
28 |
29 |
30 | # Contentlayer
31 | .contentlayer
32 |
--------------------------------------------------------------------------------
/apps/docs/src/components/App.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import packageInfo from 'actify/package.json'
3 |
4 | export default function App({ children }: { children: React.ReactNode }) {
5 | return (
6 |
11 | {children}
12 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "actifyjs",
3 | "private": true,
4 | "scripts": {
5 | "build": "turbo run build",
6 | "dev": "turbo run dev --no-cache --continue"
7 | },
8 | "dependencies": {
9 | "@changesets/cli": "^2.27.9",
10 | "@manypkg/cli": "^0.22.0",
11 | "eslint": "^9.13.0",
12 | "turbo": "^2.2.3"
13 | },
14 | "packageManager": "pnpm@9.5.0",
15 | "devDependencies": {
16 | "@biomejs/biome": "2.2.6"
17 | }
18 | }
--------------------------------------------------------------------------------
/packages/actify/src/components/Menus/ListBox.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { ListBox as AriaListBox, ListBoxProps } from 'react-aria-components'
4 |
5 | import styles from './listbox.module.css'
6 |
7 | const ListBox =
9 | {children}
10 |
11 | )
12 | }
13 |
14 | export { SegmentedButtonSet }
15 |
--------------------------------------------------------------------------------
/packages/create-actify/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "create-actify",
3 | "version": "0.0.1",
4 | "author": "Lerte Smith",
5 | "publishConfig": {
6 | "registry": "https://registry.npmjs.com/"
7 | },
8 | "type": "module",
9 | "scripts": {},
10 | "dependencies": {
11 | "prompts": "^2.4.2"
12 | },
13 | "devDependencies": {
14 | "@types/prompts": "^2.4.9",
15 | "kolorist": "^1.8.0",
16 | "minimist": "^1.2.8"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/packages/actify/src/components/NavigationBar/navigation-bar.module.css:
--------------------------------------------------------------------------------
1 | .root {
2 | width: 100%;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | min-height: 5rem /* 80px */;
7 | background-color: var(--md-sys-color-surface);
8 | }
9 | .list {
10 | display: grid;
11 | width: 100%;
12 | height: 100%;
13 | gap: 0.5rem /* 8px */;
14 | padding: 0.75rem 0.5rem 1rem;
15 | grid-template-columns: repeat(4, minmax(0, 1fr));
16 | }
17 |
--------------------------------------------------------------------------------
/apps/docs/content/components/label.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Label
3 | description: Use original html label tag, but prevented text selection when double clicked
4 | ---
5 |
6 | ## Usage with Checkbox
7 |
8 |
6 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/packages/actify/src/components/BottomSheets/BottomSheets.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import {
4 | BottomSheetsProvider,
5 | BottomSheetsProviderProps
6 | } from './BottomSheetsContext'
7 |
8 | const BottomSheets = (props: BottomSheetsProviderProps) => {
9 | const { children, ...rest } = props
10 | return
7 | Content above
8 |
11 |
12 | Content left
13 |
16 |
14 | {children}
15 |
16 | )
17 | }
18 |
19 | export { BottomAppBarFab }
20 |
--------------------------------------------------------------------------------
/apps/docs/content/components/badges.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Badge
3 | description: Badges show notifications, counts, or status information on navigation items and icons
4 | ---
5 |
6 | ## Usage
7 |
8 |
14 | {children}
15 |
16 | )
17 | }
18 |
19 | export { BottomAppBarIcons }
20 |
--------------------------------------------------------------------------------
/apps/docs/src/usages/lists.tsx:
--------------------------------------------------------------------------------
1 | import { List, ListItem, ListGroup } from 'actify'
2 |
3 | export default () => {
4 | const list = ['HTML', 'Tailwind CSS', 'Vue']
5 |
6 | return (
7 | -
8 | {list.map((item) => (
9 |
10 | {children}
11 |
13 | )
14 | }
15 |
16 | BottomAppBar.displayName = 'Actify.BottomAppBar'
17 |
18 | export { BottomAppBar }
19 |
--------------------------------------------------------------------------------
/apps/docs/src/usages/app-bars/bottom-app-bar.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | BottomAppBar,
3 | BottomAppBarFab,
4 | BottomAppBarIcons,
5 | Fab,
6 | Icon
7 | } from 'actify'
8 |
9 | export default () => {
10 | return (
11 |
15 |
17 | )
18 | }
19 |
20 | NavigationBar.displayName = 'Actify.NavigationBar'
21 |
22 | export { NavigationBar }
23 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Pagination/PaginationNumber.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { Button } from './../Buttons'
4 |
5 | const PaginationNumber = ({
6 | page,
7 | isActive,
8 | position,
9 | onPageChange
10 | }: {
11 | isActive: boolean
12 | page: number | string
13 | onPageChange?: (_: number) => void
14 | position?: 'first' | 'last' | 'middle' | 'single'
15 | }) => {
16 | return isActive || position === 'middle' ? (
17 |
18 | ) : (
19 |
22 | )
23 | }
24 |
25 | export { PaginationNumber }
26 |
--------------------------------------------------------------------------------
/packages/actify/src/components/SideSheets/SideSheetsBody.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { Divider } from './../Divider'
4 | import React from 'react'
5 | import clsx from 'clsx'
6 | import styles from './side-sheets.module.css'
7 | import { useSideSheets } from './SideSheetsContext'
8 |
9 | const SideSheetsBody = (props: React.ComponentProps<'div'>) => {
10 | const { divider } = useSideSheets()
11 | const { className, children } = props
12 |
13 | return (
14 | - {children}
{children}
17 | {divider &&
6 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Accordion/accordion.module.css:
--------------------------------------------------------------------------------
1 | .accordion {
2 | display: flex;
3 | gap: 16px;
4 | border-radius: 8px;
5 | flex-direction: column;
6 | }
7 |
8 | .accordion-item {
9 | padding: 16px;
10 | border-width: 1px;
11 | border-radius: 6px;
12 | }
13 |
14 | .accordion-header {
15 | display: flex;
16 | font-weight: 500;
17 | cursor: pointer;
18 | align-items: center;
19 | justify-content: space-between;
20 | }
21 |
22 | .accordion-content {
23 | display: grid;
24 | transition-duration: 300ms;
25 | grid-template-rows: 0fr;
26 | transition-property: grid-template-rows;
27 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
28 | font-size: 16px;
29 | &.active {
30 | grid-template-rows: 1fr;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Table/TableHeaderRow.tsx:
--------------------------------------------------------------------------------
1 | import { GridNode } from '@react-types/grid'
2 | import React from 'react'
3 | import { TableState } from 'react-stately'
4 | import { useTableHeaderRow } from 'react-aria'
5 |
6 | interface TableHeaderRowProps
7 |
15 |
10 |
11 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/packages/actify/src/components/BottomAppBar/bottom-app-bar.module.css:
--------------------------------------------------------------------------------
1 | .root {
2 | display: flex;
3 | padding-left: 1rem /* 16px */;
4 | padding-right: 1rem /* 16px */;
5 | height: 5rem /* 80px */;
6 | width: 100%;
7 | position: relative;
8 | align-items: center;
9 | max-width: 20rem /* 320px */;
10 | justify-content: center;
11 | background-color: var(--md-sys-color-primary);
12 | }
13 | .icons {
14 | flex-grow: 1;
15 | display: grid;
16 | place-items: center;
17 | grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
18 | }
19 | .fab {
20 | margin-inline-end: 0.25rem /* 4px */;
21 | min-width: 3rem /* 48px*/;
22 | display: flex;
23 | height: 100%;
24 | position: relative;
25 | align-items: center;
26 | justify-content: center;
27 | }
28 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Menus/ListBoxItem.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import {
4 | ListBoxItem as AriaListBoxItem,
5 | ListBoxItemProps
6 | } from 'react-aria-components'
7 |
8 | import { FocusRing } from '../FocusRing'
9 | import { Ripple } from '../Ripple'
10 | import clsx from 'clsx'
11 | import styles from './listbox-item.module.css'
12 |
13 | const ListBoxItem = ({ style, className, ...props }: ListBoxItemProps) => {
14 | return (
15 |
12 |
15 |
16 |
17 |
18 |
23 |
18 | {children}
19 |
20 |
12 | {[...Array(total)].map((_, index) => (
13 |
21 | ))}
22 |
23 | )
24 | }
25 |
26 | export { CarouselIndicator }
27 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Table/TableRowGroup.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useTableRowGroup } from 'react-aria'
3 |
4 | type TableRowGroupProps = {
5 | className?: string
6 | style?: React.CSSProperties
7 | type?: keyof HTMLElementTagNameMap
8 | children: React.ReactNode
9 | }
10 | const TableRowGroup = ({ type = 'thead', children }: TableRowGroupProps) => {
11 | const { rowGroupProps } = useTableRowGroup()
12 | const Element = type
13 | return (
14 |
6 |
7 | Actify
8 | Ngroker
9 | Taildoor
10 | Hugola
11 |
12 |
13 | Actify
14 | Ngroker
15 | Taildoor
16 | Hugola
17 |
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/packages/actify/src/components/SideSheets/SideSheetsHeader.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { Icon } from './../Icon'
4 | import { IconButton } from './../Buttons'
5 | import React from 'react'
6 | import clsx from 'clsx'
7 | import styles from './side-sheets.module.css'
8 | import { useSideSheets } from './SideSheetsContext'
9 |
10 | const SideSheetsHeader = ({
11 | className,
12 | children
13 | }: React.ComponentProps<'div'>) => {
14 | const { setOpen } = useSideSheets()
15 |
16 | return (
17 |
18 | setOpen?.(false)}>
20 | close
21 |
22 |
23 | )
24 | }
25 |
26 | export { SideSheetsHeader }
27 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Carousel/carousel-indicator.module.css:
--------------------------------------------------------------------------------
1 | .carousel-indicator {
2 | position: absolute;
3 | bottom: 1.25rem;
4 | left: 50%;
5 | z-index: 30;
6 | display: flex;
7 | transform: translateX(-50%);
8 | gap: 0.75rem;
9 | }
10 | .button {
11 | border: 0 solid #e5e7eb;
12 | appearance: button;
13 | background-image: none;
14 | cursor: pointer;
15 |
16 | width: 0.75rem /* 12px */;
17 | height: 0.75rem /* 12px */;
18 | border-radius: 9999px;
19 | }
20 | .indicator {
21 | background-color: var(--md-sys-color-background);
22 | }
23 | .indicator:hover {
24 | background-color: var(--md-sys-color-on-primary);
25 | }
26 | .active {
27 | background-color: var(--md-sys-color-primary-container);
28 | }
29 | .active:hover {
30 | background-color: var(--md-sys-color-on-primary-container);
31 | }
32 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Lists/List.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React, { useId } from 'react'
4 |
5 | import { ListContext } from './ListContext'
6 | import { Transition } from 'motion/react'
7 | import clsx from 'clsx'
8 | import styles from './list.module.css'
9 |
10 | interface ListProps extends React.ComponentProps<'ul'> {
11 | transition?: Transition
12 | }
13 |
14 | const List = (props: ListProps) => {
15 | const { className, children, transition, ...rest } = props
16 | const layoutId = useId()
17 |
18 | return (
19 | {children}
19 | -
21 | {children}
22 |
16 | {title && (
17 |
23 | )
24 | }
25 |
26 | Dialog.displayName = 'Actify.Dialog'
27 |
28 | export { Dialog }
29 |
--------------------------------------------------------------------------------
/packages/actify/src/hooks/mergeRefs.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useCallback } from 'react'
4 |
5 | type PossibleRef18 | {title} 19 |
20 | )} 21 | {children} 22 |
23 | {state.selectedItem?.props.children}
24 |
25 | )
26 | }
27 |
28 | export { TabPanel }
29 |
--------------------------------------------------------------------------------
/apps/docs/src/usages/focus-ring.tsx:
--------------------------------------------------------------------------------
1 | import { FocusRing, useFocusRing } from 'actify'
2 |
3 | import React from 'react'
4 |
5 | function FocusRingInput({ inward }: { inward?: boolean }) {
6 | const { isFocused, focusProps } = useFocusRing()
7 |
8 | return (
9 |
10 |
11 | {isFocused &&
19 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Buttons/icon-button.module.css:
--------------------------------------------------------------------------------
1 | .btn {
2 | border: 0 solid #e5e7eb;
3 | appearance: button;
4 | background-color: transparent;
5 | background-image: none;
6 | font-feature-settings: inherit;
7 | font-variation-settings: inherit;
8 | letter-spacing: inherit;
9 | color: inherit;
10 | padding: 0;
11 | cursor: pointer;
12 |
13 | width: 2.5rem /* 40px */;
14 | height: 2.5rem /* 40px */;
15 | position: relative;
16 | color: currentColor;
17 | display: inline-flex;
18 | align-items: center;
19 | border-radius: 9999px;
20 | justify-content: center;
21 | }
22 | .btn:focus-visible {
23 | outline: none;
24 | }
25 | .text-outline {
26 | --tw-text-opacity: 1;
27 | color: var(--md-sys-color-outline) / var(--tw-text-opacity);
28 | }
29 | .icon-button {
30 | position: absolute;
31 | width: max(48px, 100%);
32 | height: max(48px, 100%);
33 | }
34 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Icon/icon.module.css:
--------------------------------------------------------------------------------
1 | .icon {
2 | display: inline-flex;
3 | & i {
4 | font-size: var(--md-icon-size, 24px);
5 | width: var(--md-icon-size, 24px);
6 | height: var(--md-icon-size, 24px);
7 | color: inherit;
8 | font-variation-settings: inherit;
9 | font-weight: 400;
10 | font-family: var(--md-icon-font, Material Symbols Outlined);
11 | display: inline-flex;
12 | font-style: normal;
13 | place-items: center;
14 | place-content: center;
15 | line-height: 1;
16 | overflow: hidden;
17 | letter-spacing: normal;
18 | text-transform: none;
19 | user-select: none;
20 | white-space: nowrap;
21 | overflow-wrap: normal;
22 | flex-shrink: 0;
23 | -webkit-font-smoothing: antialiased;
24 | text-rendering: optimizelegibility;
25 | }
26 | }
27 |
28 | .icon-filled i {
29 | font-variation-settings: 'FILL' 1;
30 | }
--------------------------------------------------------------------------------
/packages/actify/src/components/Menus/menu-popover.module.css:
--------------------------------------------------------------------------------
1 | .popover {
2 | box-shadow: 0 2px 6px 2px rgb(0, 0, 0, .15);
3 | border-radius: 4px;
4 | overflow: hidden;
5 | }
6 |
7 | .popover:focus-visible {
8 | outline: none;
9 | }
10 |
11 | .underlay {
12 | position: fixed;
13 | inset: 0;
14 | }
15 |
16 | .dialog {
17 | display: block;
18 | list-style-type: none;
19 | margin: 0;
20 | outline: none;
21 | box-sizing: border-box;
22 | background-color: var(
23 | --md-menu-container-color,
24 | var(--md-sys-color-surface-container, #f3edf7)
25 | );
26 | height: inherit;
27 | max-height: inherit;
28 | overflow: hidden;
29 | min-width: inherit;
30 | max-width: inherit;
31 | border-radius: var(
32 | --md-menu-container-shape,
33 | var(--md-sys-shape-corner-extra-small, 4px)
34 | );
35 | scrollbar-width: inherit;
36 | }
37 |
38 | .dialog.open {
39 | overflow: auto;
40 | }
--------------------------------------------------------------------------------
/apps/docs/content/components/tabs.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Tabs
3 | description: Tabs organize content across different screens and views
4 | ---
5 |
6 | ## Usage
7 |
8 |
20 |
23 | type outward
21 |
24 |
27 | type inward
25 |
6 |
7 | menu
8 |
9 |
10 |
24 |
25 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/apps/docs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowJs": true,
5 | "skipLibCheck": true,
6 | "strict": true,
7 | "noEmit": true,
8 | "esModuleInterop": true,
9 | "module": "esnext",
10 | "moduleResolution": "bundler",
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "jsx": "preserve",
14 | "incremental": true,
15 | "allowImportingTsExtensions": true,
16 | "plugins": [{ "name": "next" }],
17 | "paths": {
18 | "@/*": ["./src/*"],
19 | "actify": ["./../../packages/actify/src"],
20 | "actify/package.json": ["./../../packages/actify/package.json"]
21 | },
22 | "target": "ES2017"
23 | },
24 | "include": [
25 | "**/*.ts",
26 | "**/*.tsx",
27 | ".next/types/**/*.ts",
28 | "next-env.d.ts",
29 | "dist/types/**/*.ts"
30 | ],
31 | "exclude": ["node_modules"]
32 | }
33 |
--------------------------------------------------------------------------------
/apps/docs/src/usages/navigation/navigation-bar.tsx:
--------------------------------------------------------------------------------
1 | import { Icon, ListItem, NavigationBar } from 'actify'
2 |
3 | export default () => {
4 | const list = [
5 | {
6 | label: 'Home',
7 | icon:
21 | {state.visibleToasts.map((toast) => (
22 |
25 | )
26 | }
27 |
28 | export { ToastRegion }
29 |
--------------------------------------------------------------------------------
/apps/docs/content/components/progress/linear-progress.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: LinearProgress
3 | description: Linear progress indicators visualize the linear progress of a task, where the progress is displayed as a bar.
4 | ---
5 |
6 | ## Usage
7 |
8 |
18 | {Children.map(
19 | children,
20 | (child) =>
21 | isValidElement(child) &&
22 | cloneElement(child, {
23 | index,
24 | // @ts-ignore
25 | ...child.props
26 | })
27 | )}
28 |
29 | )
30 | }
31 |
32 | export { AccordionItem }
33 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Snackbar/toast.module.css:
--------------------------------------------------------------------------------
1 | .toast-region {
2 | position: fixed;
3 | z-index: 999;
4 | bottom: 16px;
5 | left: 50%;
6 | transform: translateX(-50%);
7 | display: flex;
8 | flex-direction: column;
9 | gap: 8px;
10 | }
11 |
12 | .toast {
13 | --_container-elevation: 3;
14 | --_container-shadow-color: var(--md-sys-color-shadow);
15 | position: relative;
16 | display: flex;
17 | align-items: center;
18 | gap: 16px;
19 | height: 48px;
20 | padding-inline-start: 16px;
21 | padding-inline-end: 16px;
22 | background-color: var(--md-sys-color-inverse-surface);
23 | color: var(--md-sys-color-inverse-on-surface);
24 | border-radius: 4px;
25 | }
26 |
27 | .toast-content {
28 | width: 344px;
29 | }
30 |
31 | .toast-title {
32 | white-space: nowrap;
33 | overflow: hidden;
34 | text-overflow: ellipsis;
35 | }
36 |
37 | .close-button {
38 | color: var(--md-sys-color-inverse-on-surface);
39 | }
40 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Table/TableCheckboxCell.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | AriaTableCellProps,
3 | Key,
4 | useTableCell,
5 | useTableSelectionCheckbox
6 | } from 'react-aria'
7 |
8 | import { Checkbox } from './../Checkbox'
9 | import React from 'react'
10 | import { TableState } from 'react-stately'
11 |
12 | interface TableCheckboxCellProps
6 | photo_camera} size="small" />
7 |
8 | home} />
9 |
10 |
24 |
25 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Badges/badges.module.css:
--------------------------------------------------------------------------------
1 | .root {
2 | display: inline-flex;
3 | position: relative;
4 | }
5 | .badge {
6 | padding: 4px;
7 | display: grid;
8 | font-size: 0.75rem;
9 | font-weight: 500;
10 | line-height: 1;
11 | min-width: 1.5rem;
12 | min-height: 1.5rem;
13 | top: 4%;
14 | position: absolute;
15 | right: 2%;
16 | border-radius: 9999px;
17 | place-items: center;
18 | transform: translate(50%, -50%);
19 | }
20 | .primary {
21 | color: var(--md-sys-color-on-primary);
22 | background-color: var(--md-sys-color-primary);
23 | }
24 | .secondary {
25 | color: var(--md-sys-color-on-secondary);
26 | background-color: var(--md-sys-color-secondary);
27 | }
28 | .tertiary {
29 | color: var(--md-sys-color-on-tertiary);
30 | background-color: var(--md-sys-color-tertiary);
31 | }
32 | .error {
33 | color: var(--md-sys-color-on-error);
34 | background-color: var(--md-sys-color-error);
35 | }
36 |
--------------------------------------------------------------------------------
/packages/actify/src/components/SideSheets/SideSheetsActivator.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React from 'react'
4 | import { Slot } from './../Slot'
5 | import { useSideSheets } from './SideSheetsContext'
6 |
7 | export interface ActivatorProps extends React.ComponentProps<'div'> {
8 | asChild?: boolean
9 | }
10 | const SideSheetsActivator = ({
11 | asChild,
12 | className,
13 | children,
14 | ...rest
15 | }: ActivatorProps) => {
16 | const { open, setOpen } = useSideSheets()
17 |
18 | const handleClick = () => {
19 | setOpen?.(!open)
20 | }
21 |
22 | if (asChild) {
23 | return (
24 |
32 | {children}
33 |
34 | )
35 | }
36 |
37 | export { SideSheetsActivator }
38 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Accordion/AccordionContext.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React, { createContext, useContext } from 'react'
4 |
5 | export type AccordionProps = {
6 | multiple?: boolean
7 | open?: Array
25 | {item.rendered}
26 |
29 | )
30 | }
31 |
32 | export { Tab }
33 |
--------------------------------------------------------------------------------
/apps/docs/content/components/radio.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Radio button
3 | description: Radio buttons let people select one option from a set of options
4 | ---
5 |
6 | ## Usage
7 |
8 |
16 |
17 |
18 | person
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
34 |
35 | )
36 | }
37 |
--------------------------------------------------------------------------------
/apps/docs/src/usages/radio.tsx:
--------------------------------------------------------------------------------
1 | import { Radio, RadioGroup } from 'actify'
2 |
3 | export default () => {
4 | return (
5 |
6 |
9 | Actify
10 | Ngroker
11 | Taildoor
12 | Hugola
13 |
14 |
15 |
22 |
27 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/packages/actify/src/components/BottomSheets/BottomSheetsActivator.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React from 'react'
4 | import { Slot } from './../Slot'
5 | import { useBottomSheets } from './BottomSheetsContext'
6 |
7 | export interface BottomSheetsActivatorProps
8 | extends React.ComponentProps<'div'> {
9 | asChild?: boolean
10 | }
11 |
12 | const BottomSheetsActivator = ({
13 | asChild,
14 | className,
15 | children,
16 | ...rest
17 | }: BottomSheetsActivatorProps) => {
18 | const { open, setOpen } = useBottomSheets()
19 |
20 | const handlePress = () => {
21 | setOpen?.(!open)
22 | }
23 |
24 | if (asChild) {
25 | return (
26 | Radio With label
7 | 8 |RadioGroup With label
16 |
34 | {children}
35 |
36 | )
37 | }
38 |
39 | export { BottomSheetsActivator }
40 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Field/FilledField.tsx:
--------------------------------------------------------------------------------
1 | import { Field, FieldProps } from './Field'
2 |
3 | import React from 'react'
4 | import styles from './styles/field.module.css'
5 |
6 | interface FilledFieldProps extends FieldProps, React.ComponentProps<'div'> {}
7 |
8 | const renderBackground = () => {
9 | return (
10 | {children}
29 |
7 |
13 |
14 |
15 | label
16 |
20 |
24 |
25 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/apps/docs/src/usages/sheets/side-sheets.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Button,
3 | SideSheets,
4 | SideSheetsAction,
5 | SideSheetsActivator,
6 | SideSheetsBody,
7 | SideSheetsContent,
8 | SideSheetsHeader
9 | } from 'actify'
10 |
11 | export default () => {
12 | return (
13 |
27 | {container}
28 | {start}
29 | {end}
30 | {children}
31 | {overline}
32 | {headline}
33 | {supportingText}
34 | {trailingSupportingText}
35 |
36 | )
37 | }
38 |
39 | Item.displayName = 'Actify.Item'
40 |
41 | export { Item }
42 |
--------------------------------------------------------------------------------
/packages/actify/src/components/ListBox/ListBox.tsx:
--------------------------------------------------------------------------------
1 | import { AriaListBoxOptions, useListBox } from 'react-aria'
2 |
3 | import { ListBoxOption } from './ListBoxOption'
4 | import { ListState } from 'react-stately'
5 | import React from 'react'
6 | import styles from './listbox.module.css'
7 |
8 | interface ListBoxProps- }
24 | >
25 | {[...state.collection].map((item) => (
26 |
33 | {children}
34 |
35 | )
36 | }
37 |
38 | export { DrawerActivator }
39 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Badges/Badges.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React, { useMemo } from 'react'
4 |
5 | import clsx from 'clsx'
6 | import styles from './badges.module.css'
7 |
8 | interface BadgeProps extends React.ComponentProps<'div'> {
9 | value?: string | number
10 | color?: 'primary' | 'secondary' | 'tertiary' | 'error'
11 | }
12 |
13 | const Badge = (props: BadgeProps) => {
14 | const { color = 'error', value, className, style, children, ...rest } = props
15 |
16 | const badge = useMemo(() => {
17 | if (!value) return false
18 | if (parseInt(value.toString()) > 999) {
19 | return '999+'
20 | } else {
21 | return value
22 | }
23 | }, [value])
24 |
25 | const classes = clsx(styles['badge'], styles[color])
26 |
27 | return (
28 |
29 | {children}
30 | {badge && (
31 |
32 | {badge}
33 |
34 | )}
35 |
36 | )
37 | }
38 |
39 | export { Badge }
40 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Table/TableSelectAllCell.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | AriaTableCellProps,
3 | VisuallyHidden,
4 | useTableColumnHeader,
5 | useTableSelectAllCheckbox
6 | } from 'react-aria'
7 |
8 | import { Checkbox } from '../Checkbox'
9 | import React from 'react'
10 | import { TableState } from 'react-stately'
11 |
12 | interface TableSelectAllCellProps
24 |
25 |
29 |
26 | {children}
27 |
28 |
30 |
36 | )
37 | }
38 |
39 | Card.displayName = 'Actify.Card'
40 |
41 | export { Card }
42 |
--------------------------------------------------------------------------------
/packages/actify/src/components/ActionMenu/MenuItems.tsx:
--------------------------------------------------------------------------------
1 | import { MenuItem } from './MenuItem'
2 | import type { Node } from '@react-types/shared'
3 | import React from 'react'
4 | import { TreeState } from 'react-stately'
5 | import styles from './menu.module.css'
6 | import { useMenuSection } from 'react-aria'
7 |
8 | interface MenuSectionProps{children}
31 | {ripple && -
29 | {[...section.childNodes].map((node) => (
30 |
37 | ))}
38 |
12 |
13 |
20 | )
21 |
22 | const OutlinedField = (props: OutlinedFieldProps) => {
23 | const { children, ...rest } = props
24 |
25 | return (
26 |
14 |
15 |
16 |
18 |
19 | {floatingLabel}
17 | {children}
32 |
8 |
28 | )
29 | }
30 |
31 | export default Sponsors
32 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Lists/list-group.module.css:
--------------------------------------------------------------------------------
1 | .root {
2 | position: relative;
3 | cursor: pointer;
4 | isolation: isolate;
5 | padding-left: 1rem /* 16px */;
6 | padding-right: 1rem /* 16px */;
7 | }
8 | .item {
9 | display: flex;
10 | align-items: center;
11 | height: 3.5rem /* 56px */;
12 | justify-content: space-between;
13 | }
14 | .icon {
15 | transition-property: transform;
16 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
17 | transition-duration: 150ms;
18 | }
19 | .icon-open {
20 | --tw-rotate: 90deg;
21 | transform: translate(var(--tw-translate-x), var(--tw-translate-y))
22 | rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
23 | scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
24 | }
25 | .hovered {
26 | position: absolute;
27 | inset: 0;
28 | z-index: -1;
29 | height: 3.5rem /* 56px */;
30 | background-color: var(--md-sys-color-surface-variant);
31 | }
32 | .content {
33 | display: grid;
34 | grid-template-rows: 0fr;
35 | transition-property: all;
36 | transition-duration: 300ms;
37 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
38 | }
39 | .content-open {
40 | grid-template-rows: 1fr;
41 | }
42 |
--------------------------------------------------------------------------------
/apps/docs/src/usages/text-fields.tsx:
--------------------------------------------------------------------------------
1 | import { Icon, IconButton, TextField } from 'actify'
2 |
3 | import { useState } from 'react'
4 |
5 | export default () => {
6 | const [showPassword, setShowPassword] = useState(false)
7 | const handleClick = () => {
8 | setShowPassword((prev) => !prev)
9 | }
10 |
11 | return (
12 | <>
13 |
33 | Sponsors
9 |
10 |
11 |
15 |
17 |
18 |
19 |
23 |
25 |
26 |
27 |
22 |
25 | )
26 |
27 | return (
28 |
29 |
30 |
34 |
35 | )
36 | }
37 |
--------------------------------------------------------------------------------
/packages/actify/src/hooks/useControllable.ts:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useCallback, useEffect, useState } from 'react'
4 |
5 | type UseControllableProps
17 |
23 |
24 |
36 | )
37 | }
38 |
39 | export default Dropdown
40 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Accordion/Accordion.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { AccordionProps, AccordionProvider } from './AccordionContext'
4 | import {
5 | Children,
6 | ComponentProps,
7 | cloneElement,
8 | isValidElement,
9 | useState
10 | } from 'react'
11 |
12 | import clsx from 'clsx'
13 | import styles from './accordion.module.css'
14 |
15 | interface AccordionRootProps extends AccordionProps, ComponentProps<'div'> {}
16 |
17 | const Accordion = (props: AccordionRootProps) => {
18 | const { multiple, children, className, open: openProp, ...rest } = props
19 | const [open, setOpen] = useState
25 | {items?.map((item, index) => (
26 |
31 | {item.text}
32 |
33 | ))}
34 |
35 |
24 | {Children.map(
25 | children,
26 | (child, index) =>
27 | isValidElement(child) &&
28 | cloneElement(child, {
29 | index,
30 | // @ts-ignore
31 | ...child.props
32 | })
33 | )}
34 |
35 |
27 |
33 | close
34 |
35 |
37 | )
38 | }
39 |
40 | export { Toast }
41 |
--------------------------------------------------------------------------------
/apps/docs/src/usages/progress/circular-progress.tsx:
--------------------------------------------------------------------------------
1 | import { CircularProgress, Label, Slider, Switch } from 'actify'
2 |
3 | import { useState } from 'react'
4 |
5 | export default () => {
6 | const [value, setValue] = useState
28 |
32 |
29 | {props.toast.content}
30 |
31 |
15 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Icon/Icon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import clsx from 'clsx'
3 | import styles from './icon.module.css'
4 |
5 | interface IconProps extends React.ComponentProps<'span'> {
6 | fill?: boolean
7 | }
8 | const Icon = ({ className, children, fill, ...rest }: IconProps) => {
9 | return (
10 |
15 |
42 | )
43 | }
44 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Carousel/Carousel.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { CarouselContent } from './CarouselContent'
4 | import { CarouselControl } from './CarouselControl'
5 | import { CarouselIndicator } from './CarouselIndicator'
6 | import { CarouselProvider } from './CarouselContext'
7 | import React from 'react'
8 | import clsx from 'clsx'
9 | import styles from './carousel.module.css'
10 |
11 | interface CarouselProps extends React.ComponentProps<'div'> {
12 | autoPlay?: boolean
13 | control?: boolean
14 | infinite?: boolean
15 | indicator?: boolean
16 | children?: React.ReactNode[]
17 | }
18 |
19 | const Carousel = (props: CarouselProps) => {
20 | const {
21 | autoPlay,
22 | control,
23 | infinite,
24 | indicator,
25 | children,
26 | className,
27 | ...rest
28 | } = props
29 |
30 | return (
31 |
33 | {children}
34 |
37 |
19 |
20 |
36 | )
37 | }
38 |
39 | export { ChipGroup }
40 |
--------------------------------------------------------------------------------
/packages/actify/src/components/SideSheets/SideSheetsContext.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React, { createContext, useContext } from 'react'
4 |
5 | import { useControllableState } from './../../hooks/useControllableState'
6 |
7 | interface SideSheetsProps {
8 | open?: boolean
9 | defaultOpen?: boolean
10 | divider?: boolean
11 | setOpen?: (open: boolean) => void
12 | }
13 |
14 | const SideSheetsContext = createContext
21 | {[...state.collection].map((item) => (
22 |
25 | {description && (
26 |
27 | {description}
28 |
29 | )}
30 | {errorMessage && (
31 |
32 | {errorMessage}
33 |
34 | )}
35 |
27 | {/* outline */}
28 |
35 |
36 | {/* trigger button */}
37 |
44 |
45 | )
46 | }
47 |
48 | export { OutlinedField }
49 |
--------------------------------------------------------------------------------
/packages/actify/src/components/BottomSheets/BottomSheetsContext.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React, { createContext, useContext } from 'react'
4 |
5 | import { useControllableState } from './../../hooks/useControllableState'
6 |
7 | interface BottomSheetsProps {
8 | open?: boolean
9 | defaultOpen?: boolean
10 | setOpen?: (open: boolean) => void
11 | }
12 |
13 | const BottomSheetsContext = createContext
37 | {supportingOrErrorText()}
38 | {counterText()}
39 |
40 |
41 | {`${supportingOrErrorText()} ${counterText()}`}
42 |
43 |
16 |
17 | {(close) => (
18 |
25 | )}
26 |
27 |
30 |
31 |
41 |
42 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/apps/docs/src/usages/menus.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Icon,
3 | IconButton,
4 | Menu,
5 | MenuButton,
6 | MenuItem,
7 | MenuPopover,
8 | Submenu
9 | } from 'actify'
10 |
11 | import React from 'react'
12 |
13 | export default () => {
14 | return (
15 |
16 |
17 |
18 |
19 |
20 |
21 |
24 | More_Horiz
25 |
26 | }
27 | >
28 |
29 |
30 |
31 |
32 |
33 |
34 |
47 |
48 |
49 |
50 |
51 | )
52 | }
53 |
--------------------------------------------------------------------------------
/apps/docs/src/usages/carousel.tsx:
--------------------------------------------------------------------------------
1 | import { Carousel, CarouselItem } from 'actify'
2 |
3 | export default () => {
4 | return (
5 | 
12 | 
19 | 
26 | 27 | Custom Text 28 |
29 |
29 | {label && }
30 | {children}
31 | {description && (
32 |
42 | )
43 | }
44 |
45 | export { CheckboxGroup }
46 |
--------------------------------------------------------------------------------
/packages/actify/src/components/Tooltips/TooltipTrigger.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { ReactNode, createContext, useRef } from 'react'
4 | import {
5 | TooltipTriggerProps,
6 | TooltipTriggerState,
7 | useTooltipTriggerState
8 | } from 'react-stately'
9 |
10 | import { FocusableElement } from '@react-types/shared'
11 | import { FocusableProvider } from '@react-aria/focus'
12 | import { Provider } from './../../utils'
13 | import { TooltipContext } from './Tooltip'
14 | import { useTooltipTrigger } from 'react-aria'
15 |
16 | export interface TooltipTriggerComponentProps extends TooltipTriggerProps {
17 | children: ReactNode
18 | }
19 |
20 | export const TooltipTriggerStateContext =
21 | createContext
33 | {description}
34 |
35 | )}
36 | {isInvalid && (
37 |
38 | {validationErrors.join(' ')}
39 |
40 | )}
41 | -
31 | {[...state.collection].map((item) =>
32 | item.type == 'section' ? (
33 |
52 | {children as React.ReactNode}
53 |
54 | )
55 | }
56 |
57 | export { AccordionContent }
58 |
--------------------------------------------------------------------------------