@patreon/studio
Version:
Patreon Studio Design System
103 lines • 6.86 kB
JavaScript
export { default as styled, css } from 'styled-components';
export { Avatar } from './components/Avatar';
export { ActionBar } from './components/ActionBar';
export { Badge } from './components/Badge';
export { Banner } from './components/Banner';
export { Box } from './components/Box';
export { Button } from './components/Button';
export { Card } from './components/Card';
export { CardWithHeader } from './components/CardWithHeader';
export { Checkbox } from './components/Checkbox';
export { Collapse } from './components/Collapse';
export { DisplayText, DisplayTextWithCss } from './components/DisplayText';
// TODO: Replace with Menu or Select component
export { Dropdown } from './components/Dropdown';
export * from './components/Icon/catalog';
export { Image } from './components/Image';
export { InlineError } from './components/InlineError';
export { ImpliedInput } from './components/ImpliedInput';
export { InlineSuccess } from './components/InlineSuccess';
export { LoadingSpinner } from './components/LoadingSpinner';
export { PatreonMark, PatreonWordmark } from './components/Logo';
// TODO: Replace with Menu or Toggle component
export { Popover } from './components/Popover';
export { RadioButton, RadioGroup, RadioInput } from './components/Radio';
// TODO: Evaluate if we can remove grid components, many of these
// can be replaced with a stack component or flexbox. We should try to distill
// some of our layout patterns as a new layout component language that is more
// tailored to our needs. These should probably live in prf since they imply
// product specific patterns, but we should consider a better set of primitives
// for building layouts.
export { Grid, Row, Col } from './components/Grid';
export { Stack, StackWithCss } from './components/Stack';
export { TextInput } from './components/TextInput';
export { StudioProvider } from './components/StudioProvider';
export { Toaster, ToasterConsumer, useToaster } from './components/Toast';
export { Toggle } from './components/Toggle';
export { Tooltip } from './components/Tooltip';
export {
// TODO: TopNav is only used by LegacyNavigation
// TODO: TopNav.Search is used by Fox search and LegacyNavigation
TopNav, } from './components/TopNav';
export { VisuallyHiddenText } from './components/VisuallyHiddenText';
export { TextLink } from './components/TextLink';
export { BodyText, BodyTextWithCss } from './components/BodyText';
export { HeadingText, HeadingTextWithCss } from './components/HeadingText';
export { DataText, DataTextWithCss } from './components/DataText';
export { Divider } from './components/Divider';
export { Dialog } from './components/Dialog';
export { Chip } from './components/Chip';
export { CardLayout } from './components/CardLayout';
export { Spacer, SpacerWithCss } from './components/Spacer';
export { WideContent, NarrowContent, MiniContent, FluidContent, TwoColumnArea, ThreeColumnArea, AreaSpan, } from './components/Areas';
export { SegmentedControl } from './components/SegmentedControl';
export { Select } from './components/Select/Select';
export { Pill } from './components/Pill/Pill';
export { useCurrentColorScheme } from './components/ColorSchemeProvider';
export { StudioLoggerProvider } from './components/LoggingProvider';
export { useLogger } from './hooks/useLogger';
export { Takeover } from './components/Takeover/Takeover';
export { Alert } from './components/Alert';
export { Drawer } from './components/Drawer';
export * from './types/tokens';
export { isTokenColorMode } from './utilities/token-mode';
export { useTokenWithOpacity } from './hooks/useTokenWithOpacity';
export { cssForDarkMode, cssForLightMode, cssForColorScheme } from './utilities/color-scheme';
export { useColorSystemContainerState, ColorSystemContainer } from './components/ColorSystemContainer';
export { useGeneratedColorPalette, generateColorPalette } from './components/ColorSystem';
export { InputGroup } from './components/InputGroup/InputGroup';
export { useExtractTokenValue } from './hooks/extract-tokens/useExtractTokenValue';
export { useExtractTokenValuePair } from './hooks/extract-tokens/useExtractTokenValuePair';
export { useExtractedTokenCss } from './hooks/extract-tokens/useExtractedTokenCss';
export { PortalPassthrough } from './components/PortalPassthrough';
export { tokens } from './tokens';
export { typeTokens } from './tokens/typography';
export { useTokenModes } from './components/TokenModeProvider';
export { breakpointNames, breakpoints, breakpointsInPixels } from './utilities/breakpoint-definitions';
export { mediaForBreakpoint } from './utilities/breakpoints';
export { convertLegacyUnitValue, convertLegacyUnitValues } from './utilities/legacy-units';
export { useSwipe } from './hooks/useSwipe';
export { useOverlayStack, OverlayStackComponent } from './components/OverlayStackProvider';
export { OpaqueResponsive, wrapResponsive, mergeResponsive, mergeNamedResponsive, cssForResponsive, cssForResponsiveProp, hasResponsiveValue, } from './utilities/opaque-responsive';
export { cssForLegacyResponsive, legacyResponsiveProp, } from './utilities/legacy-responsive';
export { cssForBodyText, cssForBoldBodyText, cssForHeadingText, cssForDisplayText, cssForDataBodyText, cssForDataHeadingText, cssForDataDisplayText, cssForButtonText, } from './utilities/type-bundles';
export { isHexColor } from './utilities/color-system';
export { cssForEllipsis } from './utilities/css-bundles';
export { tokenWithOpacity, cssWithTransparentToken } from './utilities/color-mix';
export { useCurrentBreakpoint, isBreakpointAvailable } from './hooks/useCurrentBreakpoint';
export { useCurrentResponsiveValue, isResponsiveValueAvailable } from './hooks/useCurrentResponsiveValue';
export { tokenDefinitionsClassName } from './styles/token-definitions';
export { tokenScreenModeClassName, tokenColorModeClassName, tokenSharedModeClassName } from './styles/token-modes';
export { TokenModeContainer } from './components/TokenModeContainer';
export { cssForCustomText } from './utilities/custom-type-bundle/cssForCustomText';
export { escapeForCustomText } from './utilities/custom-type-bundle/escapeForCustomText';
export { classNameForBodyText } from './styles/classNameForBodyText';
export { classNameForHeadingText } from './styles/classNameForHeadingText';
export { classNameForDisplayText } from './styles/classNameForDisplayText';
export { classNameForDataBodyText } from './styles/classNameForDataBodyText';
export { classNameForDataHeadingText } from './styles/classNameForDataHeadingText';
export { classNameForDataDisplayText } from './styles/classNameForDataDisplayText';
export { classNameForTextLayout } from './styles/classNameForTextLayout';
export { classNameForColor } from './styles/classNameForColor';
export { classNameForTextLinkStyle } from './styles/classNameForTextLinkStyle';
//# sourceMappingURL=index.js.map