tonkean-tcltext 1.0.0 → 1.1.0

package/README.md

@@ -5,7 +5,7 @@ Design system components and tokens for Tonkean app, including the TCLText compo
 ## Installation
 
 ```bash
-npm install tonkean-design-system
+npm install tonkean-tcltext
 ```
 
 ## Usage
@@ -15,8 +15,8 @@ npm install tonkean-design-system
 The TCLText component provides text truncation with automatic tooltip display on hover.
 
 ```tsx
-import { TCLText, TCLFontSize } from 'tonkean-design-system';
-import 'tonkean-design-system/tokens.css';
+import { TCLText, TCLFontSize } from 'tonkean-tcltext';
+import 'tonkean-tcltext/tokens.css';
 
 function App() {
   return (
@@ -33,7 +33,7 @@ function App() {
 ### Using Storybook Typography Tokens Directly
 
 ```tsx
-import { TCLText } from 'tonkean-design-system';
+import { TCLText } from 'tonkean-tcltext';
 
 function App() {
   return (
@@ -47,16 +47,58 @@ function App() {
 }
 ```
 
-### Importing Tokens
+### Importing All Design Tokens
 
 ```tsx
-import { colors, typography, buttons, inputs } from 'tonkean-design-system';
+import { colors, typography, buttons, inputs } from 'tonkean-tcltext';
+import type { Colors, Typography, Buttons, Inputs } from 'tonkean-tcltext';
 
-// Access token values
+// Access color tokens
 const primaryColor = colors.colors.purple[600];
+const gray200 = colors.colors.gray[200];
+
+// Access typography tokens
 const baseFontSize = typography.typography.fontSizes.base;
+const robotoFont = typography.typography.fontFamilies.roboto;
+
+// Access button tokens
+const defaultButton = buttons.buttons.variants.default;
+const buttonSizes = buttons.buttons.sizes;
+
+// Access input tokens
+const inputTypes = inputs.inputs.types;
+const inputSizes = inputs.inputs.sizes;
 ```
 
+### Available Token Categories
+
+#### Colors
+- Basic: `black`, `white`
+- Gray: `50` through `900`
+- Red: `50` through `900`
+- Yellow: `50` through `900`
+- Green: `50` through `900`
+- Blue: `50` through `900`
+- Purple: `50` through `900`
+- Pink: `50` through `900`
+
+#### Typography
+- Font Families: `lato`, `roboto`
+- Font Sizes: `xs`, `sm`, `base`, `lg`, `xl`, `2xl`
+- Font Weights: `regular`, `medium`, `bold`
+- Line Heights: `tight`, `snug`, `normal`, `relaxed`, `loose`
+- Letter Spacing: `tighter`, `tight`, `normal`, `wide`, `wider`, `widest`
+
+#### Buttons
+- Variants: `default`, `secondary`, `outline`, `destructive`, `warning`, `link`, `ghost`, `multiaction`
+- Sizes: `small`, `regular`, `large`
+- States: `default`, `hover`, `disabled`
+
+#### Inputs
+- Types: `basic`
+- Sizes: `regular`
+- States: `default`, `hover`, `focus`, `disabled`, `disabledPlaceholder`
+
 ### CSS Tokens
 
 Import the CSS file to use CSS variables:

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { TCLText, TCLFontSize } from './components/TCLText';
 export type { TCLTextProps } from './components/TCLText';
 export { colors, typography, buttons, inputs } from './tokens';
+export type { Colors, Typography, Buttons, Inputs } from './tokens';
 export { useTooltipOnTruncation } from './components/hooks/useTooltipOnTruncation';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC5D,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGzD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAG/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC5D,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGzD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAC/D,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC"}

package/dist/index.js

@@ -1,6 +1,6 @@
 // Export TCLText component
 export { TCLText, TCLFontSize } from './components/TCLText';
-// Export tokens
+// Export all design tokens
 export { colors, typography, buttons, inputs } from './tokens';
 // Export hooks
 export { useTooltipOnTruncation } from './components/hooks/useTooltipOnTruncation';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAG5D,gBAAgB;AAChB,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAE/D,eAAe;AACf,OAAO,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAG5D,2BAA2B;AAC3B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAG/D,eAAe;AACf,OAAO,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tonkean-tcltext",
-  "version": "1.0.0",
-  "description": "Design system components and tokens for Tonkean app, including TCLText component",
+  "version": "1.1.0",
+  "description": "Complete design system package with TCLText component, design tokens (colors, typography, buttons, inputs), and CSS variables for Tonkean app",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",