npm - @tcn/ui - Versions diffs - 0.13.1 → 0.15.0 - Mend

@tcn/ui 0.13.1 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (336) hide show

package/src/surfaces/panel/panel.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+import { Scaffold, type ScaffoldProps } from '../../layouts/containers/scaffold.js';
 import clsx from 'clsx';
 import styles from './panel.module.css';

package/src/surfaces/pop_confirm/pop_confirm.stories.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import { Button } from '../../actions/index.js';
-import { Body, Footer, Header, Scaffold, Section } from '../../layouts/index.js';
+import { Footer, Header, Scaffold, Section } from '../../layouts/index.js';
 import { HStack } from '../../stacks/h_stack.js';
 import { PopConfirm, type PopConfirmProps } from './pop_confirm.js';
 import { BodyText, Title } from '../../typography/index.js';
@@ -65,13 +65,11 @@ export const Baseline = (
           <Header>
             <Title>Confirmation Title</Title>
           </Header>
-          <Body>
-            <Scaffold>
-              <Section>
-                <BodyText>Are you sure you want to confirm this action?</BodyText>
-              </Section>
-            </Scaffold>
-          </Body>
+          <Scaffold>
+            <Section>
+              <BodyText>Are you sure you want to confirm this action?</BodyText>
+            </Section>
+          </Scaffold>
           <Footer>
             <Spacer />
             <Button hierarchy="secondary" onClick={cancel}>
@@ -117,16 +115,14 @@ export const ManualCloseOnly = () => {
           <Header>
             <Title>Must confirm or cancel</Title>
           </Header>
-          <Body>
-            <Scaffold>
-              <Section>
-                <BodyText>
-                  No automatic dismissal. The popover stays open until you click Cancel or
-                  Confirm. Clicking or scrolling outside does nothing.
-                </BodyText>
-              </Section>
-            </Scaffold>
-          </Body>
+          <Scaffold>
+            <Section>
+              <BodyText>
+                No automatic dismissal. The popover stays open until you click Cancel or
+                Confirm. Clicking or scrolling outside does nothing.
+              </BodyText>
+            </Section>
+          </Scaffold>
           <Footer>
             <Spacer />
             <Button hierarchy="secondary" onClick={() => setOpen(false)}>
@@ -172,15 +168,13 @@ export const MouseLeaveOnly = () => {
           <Header>
             <Title>Confirm action</Title>
           </Header>
-          <Body>
-            <Scaffold>
-              <Section>
-                <BodyText>
-                  Closes when the pointer leaves the popover and trigger area.
-                </BodyText>
-              </Section>
-            </Scaffold>
-          </Body>
+          <Scaffold>
+            <Section>
+              <BodyText>
+                Closes when the pointer leaves the popover and trigger area.
+              </BodyText>
+            </Section>
+          </Scaffold>
           <Footer>
             <Spacer />
             <Button hierarchy="secondary" onClick={() => setOpen(false)}>
@@ -241,16 +235,14 @@ export const ClickAwayAndScrollAway = () => {
             <Header>
               <Title>Scroll or click away</Title>
             </Header>
-            <Body>
-              <Scaffold>
-                <Section>
-                  <BodyText>
-                    Closes when you click outside or when you scroll outside the popover.
-                    Scroll the container above or below to see it close.
-                  </BodyText>
-                </Section>
-              </Scaffold>
-            </Body>
+            <Scaffold>
+              <Section>
+                <BodyText>
+                  Closes when you click outside or when you scroll outside the popover.
+                  Scroll the container above or below to see it close.
+                </BodyText>
+              </Section>
+            </Scaffold>
             <Footer>
               <Spacer />
               <Button hierarchy="secondary" onClick={() => setOpen(false)}>

package/src/surfaces/tooltip/__stories__/tooltip.stories.tsx CHANGED Viewed

@@ -9,7 +9,7 @@ import { BodyText, Title } from '../../../typography/index.js';
 import { VStack } from '../../../stacks/v_stack.js';
 import styles from './tooltip_stories.module.css';
 import { Modal } from '../../modal/modal.js';
-import { Body, Footer, Header, Scaffold, Section } from '../../../layouts/index.js';
+import { Footer, Header, Scaffold, Section } from '../../../layouts/index.js';
 import { Button } from '../../../actions/button/button/button.js';
 import { Spacer } from '../../../stacks/index.js';
@@ -149,15 +149,13 @@ export const TooltipNestedInPortal = ({
       <Header>
         <Title>Tooltip Nested in Portal</Title>
       </Header>
-      <Body>
-        <Scaffold>
-          <Section>
-            <TooltipComponent label={label} precision={precision} {...args}>
-              <BodyText>Hover to learn more...</BodyText>
-            </TooltipComponent>
-          </Section>
-        </Scaffold>
-      </Body>
+      <Scaffold>
+        <Section>
+          <TooltipComponent label={label} precision={precision} {...args}>
+            <BodyText>Hover to learn more...</BodyText>
+          </TooltipComponent>
+        </Section>
+      </Scaffold>
       <Footer>
         <Spacer />
         <Button hierarchy="primary">OK</Button>

package/src/surfaces/window/window.stories.tsx CHANGED Viewed

@@ -1,13 +1,6 @@
 import { useState } from 'react';
 import { Window, type WindowProps } from './window.js';
-import {
-  Body,
-  Footer,
-  Header,
-  Scaffold,
-  Section,
-  UtilityBar,
-} from '../../layouts/index.js';
+import { Footer, Header, Scaffold, Section, UtilityBar } from '../../layouts/index.js';
 import { BodyText, Title } from '../../typography/index.js';
 import { Spacer } from '../../stacks/spacer.js';
 import { Button } from '../../actions/index.js';
@@ -125,13 +118,11 @@ export const Baseline = ({
             <BugIcon />
           </Button>
         </UtilityBar>
-        <Body>
-          <Scaffold>
-            <Section>
-              <BodyText>This is a window</BodyText>
-            </Section>
-          </Scaffold>
-        </Body>
+        <Scaffold>
+          <Section>
+            <BodyText>This is a window</BodyText>
+          </Section>
+        </Scaffold>
         <Footer>
           <Spacer />
           <Button hierarchy="secondary">Cancel</Button>

package/src/surfaces/window/window.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import React from 'react';
 import { Frame, type FrameProps } from '../../overlay/frame/frame.js';
-import { Scaffold } from '../../layouts/scaffold/scaffold.js';
+import { Scaffold } from '../../layouts/containers/scaffold.js';
 // Styles
 import styles from './window.module.css';

package/src/themes/build_stylesheet.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export function buildStyleSheet(parts: string[]): CSSStyleSheet {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(parts.join('\n'));
+  return sheet;
+}

package/src/themes/theme_variables.ts CHANGED Viewed

@@ -24,6 +24,14 @@ const asyncColors = {
   failed: 'var(--async-color-failed)',
 };
+const actionSeverity = {
+  dangerous: 'var(--action-severity-dangerous)',
+  cautious: 'var(--action-severity-cautious)',
+  neutral: 'var(--action-severity-neutral)',
+  suggested: 'var(--action-severity-suggested)',
+  encouraged: 'var(--action-severity-encouraged)',
+};
 const colors = {
   primary: {
     faint: 'var(--primary-color-faint)',
@@ -78,4 +86,5 @@ export const theme = {
   accentColor: 'var(--accent-color)',
   statusColors,
   asyncColors,
+  actionSeverity,
 };

package/src/themes/themes/ergo/__stories__/components/tone_picker/sb_tone_card.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Header, Body, Scaffold } from '../../../../../../layouts/index.js';
+import { Header, Scaffold } from '../../../../../../layouts/index.js';
 import { Card } from '../../../../../../surfaces/index.js';
 import { Spacer } from '../../../../../../stacks/spacer.js';
 import { Box } from '../../../../../../stacks/index.js';
@@ -29,13 +29,11 @@ export const SB_ToneCard: React.FC<{
           <CheckCircleIcon />
         </Button>
       </Header>
-      <Body>
-        <Scaffold>
-          <Box className={styles.box} />
-          <Box className={styles.box} />
-          <Box className={styles.box} />
-        </Scaffold>
-      </Body>
+      <Scaffold>
+        <Box className={styles.box} />
+        <Box className={styles.box} />
+        <Box className={styles.box} />
+      </Scaffold>
     </Card>
   );
 };

package/src/themes/themes/ergo/__stories__/material.stories.tsx CHANGED Viewed

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { VStack } from '../../../../stacks/v_stack.js';
 import { clsx } from 'clsx';
 import { PlusIcon } from '@tcn/icons/plus_icon.js';
-import { Body, Divider, Footer, Header, Scaffold } from '../../../../layouts/index.js';
+import { Divider, Footer, Header, Scaffold } from '../../../../layouts/index.js';
 import { Panel } from '../../../../surfaces/index.js';
 import { Button } from '../../../../actions/button/button/button.js';
 import { Spacer } from '../../../../stacks/spacer.js';
@@ -119,11 +119,9 @@ export const DynamicSurface = (args: {
             <PlusIcon />
           </Button>
         </Header>
-        <Body>
-          <Scaffold>
-            <SB_TonePicker />
-          </Scaffold>
-        </Body>
+        <Scaffold>
+          <SB_TonePicker />
+        </Scaffold>
         <Footer>
           Disabled Buttons
           <Spacer />