// Copyright 2025 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only import type { ReactNode } from 'react'; import React, { useMemo } from 'react'; import type { Meta } from '@storybook/react'; import { AxoScrollArea } from './AxoScrollArea.dom.js'; import { tw } from './tw.dom.js'; import { getScrollbarGutters } from './_internal/scrollbars.dom.js'; import { AxoSymbol } from './AxoSymbol.dom.js'; export default { title: 'Axo/AxoScrollArea', } satisfies Meta; function Box(props: { children: ReactNode }) { return (
{props.children}
); } function MaybeMask(props: { mask?: boolean; children: ReactNode }) { if (props.mask) { return {props.children}; } return <>{props.children}; } function VerticalTemplate(props: { items: number; centered?: boolean; fit?: boolean; hints?: boolean; mask?: boolean; }) { const paddingInline = useMemo(() => { return getScrollbarGutters('thin', 'custom').vertical; }, []); return (

Header

{props.hints && } {props.hints && }
{Array.from({ length: props.items }, (_, index) => { return {index + 1}; })}

Footer

); } function VerticalVariants(props: { mask?: boolean; hints?: boolean }) { return (
); } export function Vertical(): JSX.Element { return ; } export function VerticalWithHints(): JSX.Element { return ; } export function VerticalWithMask(): JSX.Element { return ; } function HorizontalTemplate(props: { items: number; centered?: boolean; fit?: boolean; hints?: boolean; mask?: boolean; }) { return (
{props.hints && } {props.hints && }
{Array.from({ length: props.items }, (_, index) => { return {index + 1}; })}
); } function HorizontalVariants(props: { mask?: boolean; hints?: boolean }) { return (
); } export function Horizontal(): JSX.Element { return ; } export function HorizontalWithHints(): JSX.Element { return ; } export function HorizontalWithMask(): JSX.Element { return ; } function BothTemplate(props: { cols: number; rows: number; centered?: boolean; fit?: boolean; hints?: boolean; mask?: boolean; }) { return (
{props.hints && } {props.hints && } {props.hints && } {props.hints && }
{Array.from({ length: props.rows }, (_, row) => { return (
{Array.from({ length: props.cols }, (_2, col) => { return {col + 1}; })}
); })}
); } function BothVariants(props: { mask?: boolean; hints?: boolean }) { return (
); } export function Both(): JSX.Element { return ; } export function BothWithHints(): JSX.Element { return ; } export function BothWithMask(): JSX.Element { return ; }