@lar-works/design-system 0.2.1 → 0.3.0

package/src/typography/Typography.tsx

@@ -13,6 +13,9 @@ const textStyles = {
     lead: 'text-[17px] leading-[1.6] tracking-[-0.011em] sm:text-lg sm:leading-[1.6] text-pretty',
     /** Running copy on marketing pages. */
     prose: 'text-[15px] leading-[1.65] tracking-[-0.006em] text-pretty',
+    /** The surrounding text's size and, unless a `tone` is given, its colour: a message inside a note or a form that
+     *  sets its own type. */
+    inherit: '',
 } as const;
 
 /** T3's headings: semibold with tightening tracking as they grow; the hero takes t3.codes' display setting. */
@@ -51,22 +54,42 @@ interface TypographyProps extends HTMLAttributes<HTMLElement> {
 export interface TextProps extends TypographyProps {
     as?: 'p' | 'span' | 'div';
     variant?: keyof typeof textStyles;
+    /** Keeps the text on one line, such as a date that shouldn't break. */
+    nowrap?: boolean;
+    /** Lines its figures up as a table's. */
+    numeric?: boolean;
+    /** Lets a long word, such as a path, break anywhere. */
+    breaks?: boolean;
+    /** Takes a line of its own in a wrapping row. */
+    ownLine?: boolean;
+    /** Shows it only in a container under 40rem (`narrow`) or, on one line, in one 40rem or wider (`wide`), where the
+     *  same words show elsewhere in the other. */
+    only?: keyof typeof containers | undefined;
 }
 
+const containers = { narrow: '@min-[40rem]:hidden', wide: 'whitespace-nowrap @max-[40rem]:hidden' } as const;
+
 export function Text({
     as: Tag = 'p',
     variant = 'body',
-    tone = 'default',
+    tone = variant === 'inherit' ? undefined : 'default',
     truncate,
+    nowrap = false,
+    numeric = false,
+    breaks = false,
+    ownLine = false,
+    only,
     loading,
     className = '',
     children,
     ...props
 }: TextProps) {
+    const layout = `${numeric ? ' tabular-nums' : ''}${breaks ? ' wrap-anywhere' : ''}${ownLine ? ' w-full' : ''}${only ? ` ${containers[only]}` : ''}`;
+
     return (
         <Tag
             {...props}
-            className={`${textStyles[variant]} ${tones[tone]} ${tone === 'muted' && (variant === 'lead' || variant === 'prose') ? 'dark:text-[#a3a3aa]' : ''} ${truncate ? 'truncate' : ''} ${loading ? `relative ${Tag === 'span' ? 'inline-block w-full' : ''}` : ''} ${className}`}
+            className={`${textStyles[variant]} ${tone ? tones[tone] : ''} ${tone === 'muted' && (variant === 'lead' || variant === 'prose') ? 'dark:text-[#a3a3aa]' : ''} ${truncate ? 'truncate' : ''} ${nowrap ? 'whitespace-nowrap' : ''} ${loading ? `relative ${Tag === 'span' ? 'inline-block w-full' : ''}` : ''} ${className}${layout}`}
         >
             {loading ? <LoadingText /> : children}
         </Tag>

package/src/typography/index.ts

@@ -1,3 +1,3 @@
+export { Code, type CodeProps } from './Code';
 export { InlineLink, Link, LinkBox, LinkOverlay, type LinkOverlayProps, type LinkProps } from './Link';
 export { Heading, type HeadingProps, Text, type TextProps } from './Typography';
-export { Code } from '@ninna-ui/primitives';

package/dist/feedback/index.js

@@ -1,11 +0,0 @@
-import { StatusIndicator } from "./StatusIndicator.js";
-import { SkeletonLoader } from "./SkeletonLoader.js";
-import { Alert as Alert$1 } from "./Alert.js";
-import { AsyncState } from "./AsyncState.js";
-import { dismissAllNotifications, showErrorNotification, showSuccessNotification } from "./ErrorNotification.js";
-import { Notifications } from "./Notifications.js";
-import { ProgressStatusRow } from "./ProgressStatusRow.js";
-import { StatusPopoverContent } from "./StatusPopoverContent.js";
-import { StatusRow } from "./StatusRow.js";
-import { Loading as Loading$1 } from "@ninna-ui/feedback";
-export { Alert$1 as Alert, AsyncState, Loading$1 as Loading, Notifications, ProgressStatusRow, SkeletonLoader, StatusIndicator, StatusPopoverContent, StatusRow, dismissAllNotifications, showErrorNotification, showSuccessNotification };

package/dist/typography/index.js

@@ -1,4 +0,0 @@
-import { Heading, Text } from "./Typography.js";
-import { InlineLink, Link as Link$1, LinkBox as LinkBox$1, LinkOverlay as LinkOverlay$1 } from "./Link.js";
-import { Code as Code$1 } from "@ninna-ui/primitives";
-export { Code$1 as Code, Heading, InlineLink, Link$1 as Link, LinkBox$1 as LinkBox, LinkOverlay$1 as LinkOverlay, Text };