@tcn/ui 0.3.3 → 0.4.0

package/dist/tokens/key/key.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"key.js","sources":["../../../src/tokens/key/key.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { HStack, HStackProps } from '../../stacks/h_stack.js';\n\nexport const Key = ({ children, className, hAlign = 'start', ...props }: HStackProps) => {\n  return (\n    <HStack className={clsx(className, 'tcn-key')} hAlign={hAlign} {...props}>\n      {children}\n    </HStack>\n  );\n};\n"],"names":["Key","children","className","hAlign","props","jsx","HStack","clsx"],"mappings":";;;AAGO,MAAMA,IAAM,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,IAAS,SAAS,GAAGC,QAE5D,gBAAAC,EAACC,GAAA,EAAO,WAAWC,EAAKL,GAAW,SAAS,GAAG,QAAAC,GAAiB,GAAGC,GAChE,UAAAH,EAAA,CACH;"}

package/dist/tokens/value/value.d.ts

@@ -0,0 +1,3 @@
+import { HStackProps } from '../../stacks/h_stack.js';
+export declare const Value: ({ children, className, hAlign, ...props }: HStackProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=value.d.ts.map

package/dist/tokens/value/value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.d.ts","sourceRoot":"","sources":["../../../src/tokens/value/value.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE9D,eAAO,MAAM,KAAK,GAAI,2CAAmD,WAAW,4CAMnF,CAAC"}

package/dist/tokens/value/value.js

@@ -0,0 +1,8 @@
+import { jsx as e } from "react/jsx-runtime";
+import a from "clsx";
+import { HStack as c } from "../../stacks/h_stack.js";
+const p = ({ children: r, className: o, hAlign: t = "end", ...m }) => /* @__PURE__ */ e(c, { className: a(o, "tcn-value"), hAlign: t, ...m, children: r });
+export {
+  p as Value
+};
+//# sourceMappingURL=value.js.map

package/dist/tokens/value/value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.js","sources":["../../../src/tokens/value/value.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { HStack, HStackProps } from '../../stacks/h_stack.js';\n\nexport const Value = ({ children, className, hAlign = 'end', ...props }: HStackProps) => {\n  return (\n    <HStack className={clsx(className, 'tcn-value')} hAlign={hAlign} {...props}>\n      {children}\n    </HStack>\n  );\n};\n"],"names":["Value","children","className","hAlign","props","jsx","HStack","clsx"],"mappings":";;;AAGO,MAAMA,IAAQ,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,IAAS,OAAO,GAAGC,QAE5D,gBAAAC,EAACC,GAAA,EAAO,WAAWC,EAAKL,GAAW,WAAW,GAAG,QAAAC,GAAiB,GAAGC,GAClE,UAAAH,EAAA,CACH;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "type": "module",
   "description": "",
   "author": "TCN",

package/src/actions/__docs__/actions.mdx

@@ -7,58 +7,93 @@ import { Gallery } from './components/gallery';
 
 # Actions
 
-Interactive elements that triggers an action, or event. For example submitting a form, closing a modal, or deleting an entity.
+Actions are interactive elements that trigger an event, or manage a workflow setting.
 
 - [Actions](#actions)
+  - [Base Action](#base-action)
   - [Button](#button)
-  - [Utility (Slim Button)](#utility)
-  - [Button Group](#button-group)
+    - [As Utility](#utility-button)
+  - [Toggle](#toggle)
+    - [As Utility](#utility-toggle)
+  - [Action Group](#action-group)
+
+## Base Action
+
+```tsx
+export interface BaseButtonOwnProps {
+  size?: Size;
+  color?: string;
+  utility?: boolean;
+}
+```
+
+Base actions are the foundation for all actions. They are used to build the button and toggle components.
+
+`size`: Customize the size of actions in relation to one another on a surface.
+
+`color`: Override the accent color for the action. 
+
+`utility`: Flag the button as a utility, used to create compact actions.
+
 
 ## Button
 
-Relaxed, text based actions for high level page, or surface decisions (Cancel, Save, etc.)
+Actions for high level page, or surface decisions. 
+Buttons trigger an action or event, for example, submitting a form, closing a modal, or deleting an entity.
+Across a surface buttons are expected to have hierarchy, with one primary action per surface.
+They also can have severity levels, which reflect to the user the level of impact for high consequence actions.
+Buttons do not store selected state, and should reflect a single action or behavior per button.
+
+### Text Button
 
-<Gallery minColumnWidth="350px">
+<Gallery minColumnWidth="400px">
 
 <Showcase
   title="Baseline"
   description="The default, out-of-the-box button with no additional props."
-  of={ActionStories.ButtonBaselineShowcase}
+  of={ActionStories.ButtonBaseline}
   width="180px"
 />
 
 <Showcase
   title="Hierarchy"
   description="Visually indicates the importance of an action and its relationship to other actions. A primary action should be limited to one per surface."
-  of={ActionStories.HierarchyShowcase}
+  of={ActionStories.ButtonHierarchy}
   width="380px"
 />
 
 <Showcase
   title="Size"
   description="Used to customize the size of actions in relation to one another on a surface. Use sparingly, do not use as a replacement for hierarchy."
-  of={ActionStories.SizeShowcase}
+  of={ActionStories.ButtonSize}
   width="320px"
 />
 
 <Showcase
   title="Disabled"
   description="Prevents interaction and reduces visual prominence."
-  of={ActionStories.DisabledShowcase}
+  of={ActionStories.ButtonDisabled}
   width="420px"
 />
 
 <Showcase
   title="With Icons"
   description="Icons can be added to buttons with the use of Icon and Spacer components."
-  of={ActionStories.IconShowcase}
+  of={ActionStories.ButtonWithIcons}
   width="300px"
 />
 
+<Showcase
+  title="Full Width"
+  description="Fill container width for mobile or prominent CTAs."
+  of={ActionStories.ButtonFullWidth}
+  width="340px"
+/>
+
 <Showcase
   title="Severity"
   description="Visual indication of the severity of consequential, one-time actions."
-  of={ActionStories.SeverityShowcase}
+  of={ActionStories.ButtonSeverity}
   width="300px"
 >
   <Markdown>
@@ -84,77 +119,166 @@ Use sparingly for consequential, one-time actions such as:
   description="
   Override accent color for heavily brand or product specific actions. 
   Use sparingly, should be avoided to create cohesion and consistency between UIs."
-  of={ActionStories.ColorShowcase}
-  width="420px"
-/>
+  of={ActionStories.ButtonCustomColors}
+  width="480px"
+/> 
+
 
 <Showcase
-  title="Full Width"
-  description="Fill container width for mobile or prominent CTAs."
-  of={ActionStories.FullWidth}
+  title="Interactive State"
+  description="Visual indication of the interactive state of a button."
+  of={ActionStories.ButtonInteractiveStates}
   width="340px"
 />
 
 </Gallery>
 
 
+### Utility Button
 
-## Utility
+Examples of the utility prop set to true on the button component.
 
-Compact, icon-based actions.  Used as re-usable tooling for item rows, utility bars, or supplemental behavior on elements (Close Panel, Copy Entity, ect)
 
 <Gallery>
 
 <Showcase
   title="Baseline"
-  description="The default, out-of-the-box utility button with no additional props."
-  of={ActionStories.SlimButtonBaselineShowcase}
+  of={ActionStories.UtilityButtonBaseline}
   width="180px"
-/>
+/> 
 
 <Showcase
   title="Hierarchy"
-  description="Visually indicates the importance of an action and its relationship to other actions. A primary action should be limited to one per surface."
-  of={ActionStories.SlimButtonHierarchy}
+  of={ActionStories.UtilityButtonHierarchy}
   width="240px"
 />
 
 <Showcase
   title="Size"
-  description="Used to customize the size of actions in relation to one another on a surface. Use sparingly, do not use as a replacement for hierarchy."
-  of={ActionStories.SlimButtonSizes}
+  of={ActionStories.UtilityButtonSizes}
   width="220px"
 />
 
 <Showcase
   title="Disabled"
-  description="Prevents interaction and reduces visual prominence."
-  of={ActionStories.SlimButtonDisabled}
+  of={ActionStories.UtilityButtonDisabled}
   width="240px"
 />
 
 <Showcase
   title="Severity"
-  description="Visual indication of the severity of consequential, one-time actions."
-  of={ActionStories.SlimButtonSeverity}
+  of={ActionStories.UtilityButtonSeverity}
   width="140px"
 />
 
 <Showcase
   title="Custom Colors"
-  description="Override accent color for heavily brand or product specific actions. Use sparingly, should be avoided to create cohesion and consistency between UIs."
-  of={ActionStories.SlimButtonColors}
+  of={ActionStories.UtilityButtonColors}
   width="140px"
 />
 
+  <Showcase
+    title="Interactive State"
+    of={ActionStories.UtilityButtonInteractiveStates}
+    width="140px"
+  />
+
 </Gallery>
 
-## Button Group
 
-Visually grouped and styled buttons for closely related actions. The `hierarchy` and `size` props set on the ButtonGroup are automatically inherited by all child Button elements, ensuring visual consistency without needing to configure each button individually.
+## Toggle
+
+Buttons with selected state for workflow or surface settings.
+Toggles don't store severity or hierarchy directly.
+They share the same visual hierarchy and severity across the same surface or group.
+Different groups or surfaces can elevate the importance or visual weight of its settings depending on the context, and current workflow.
+
+<Gallery minColumnWidth="240px">
+
+<Showcase
+  title="Baseline"
+  of={ActionStories.ToggleBaseline}
+  width="180px"
+/>
+
+<Showcase
+  title="Size"
+  of={ActionStories.ToggleSize}
+  width="280px"
+/>
+
+<Showcase
+  title="Disabled"
+  of={ActionStories.ToggleDisabled}
+  width="220px"
+/>
+
+<Showcase
+  title="With Icons"
+  of={ActionStories.ToggleWithIcons}
+  width="180px"
+/>
+
+<Showcase
+  title="Custom Colors"
+  of={ActionStories.ToggleCustomColors}
+  width="280px"
+/>
+
+<Showcase
+  title="Interactive State"
+  of={ActionStories.ToggleInteractiveStates}
+  width="240px"
+/>
+
+</Gallery>
+
+## Button Group
 
 <Gallery minColumnWidth="380px">
 
+</Gallery>
+
+### Utility Toggle
+
+<Gallery>
+
+<Showcase
+  title="Baseline"
+  of={ActionStories.UtilityToggleBaseline}
+  width="80px"
+/>
+
+<Showcase
+  title="Size"
+  of={ActionStories.UtilityToggleSize}
+  width="160px"
+/>
+
+<Showcase
+  title="Disabled"
+  of={ActionStories.UtilityToggleDisabled}
+  width="120px"
+/>
+
+<Showcase
+  title="Custom Colors"
+  of={ActionStories.UtilityToggleCustomColors}
+  width="80px"
+/>
+
+<Showcase
+  title="Interactive State"
+  of={ActionStories.UtilityToggleInteractiveStates}
+  width="140px"
+/>
+
+</Gallery>
+
+
+## Action Group
+
+<Gallery>
 <Showcase
   title="Baseline"
   description="The default, out-of-the-box button group with no additional props."
@@ -191,4 +315,5 @@ Visually grouped and styled buttons for closely related actions. The `hierarchy`
   of={ActionStories.ButtonGroupWithIcons}
 />
 
+
 </Gallery>