tonkean-tcltext 1.0.0

package/dist/tokens/inputs.json

@@ -0,0 +1,304 @@
+{
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "inputs": {
+        "sizes": {
+            "small": {
+                "padding": {
+                    "vertical": "6px",
+                    "horizontal": "12px"
+                },
+                "fontSize": "12px",
+                "minHeight": "28px"
+            },
+            "regular": {
+                "padding": {
+                    "vertical": "8px",
+                    "horizontal": "16px"
+                },
+                "fontSize": "14px",
+                "minHeight": "36px"
+            },
+            "large": {
+                "padding": {
+                    "vertical": "10px",
+                    "horizontal": "20px"
+                },
+                "fontSize": "16px",
+                "minHeight": "44px"
+            }
+        },
+        "borderRadius": "4px",
+        "borderWidth": "1px",
+        "types": {
+            "basic": {
+                "default": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.300"
+                },
+                "active": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.600"
+                },
+                "disabledPlaceholder": {
+                    "background": "gray.100",
+                    "text": "gray.800",
+                    "placeholder": "gray.800",
+                    "border": "1px solid gray.300"
+                },
+                "error": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid red.500",
+                    "label": "red.500",
+                    "errorMessage": "red.500"
+                }
+            },
+            "datePicker": {
+                "default": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.300",
+                    "icon": "gray.500"
+                },
+                "withValue": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.300",
+                    "icon": "gray.500"
+                },
+                "open": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.600",
+                    "icon": "gray.500"
+                }
+            },
+            "singleSelector": {
+                "default": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.300",
+                    "icon": "gray.500"
+                },
+                "selected": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.300",
+                    "icon": "gray.500"
+                },
+                "search": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.300",
+                    "icon": "gray.500"
+                },
+                "open": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.600",
+                    "icon": "gray.500"
+                },
+                "disabled": {
+                    "background": "gray.100",
+                    "text": "gray.400",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.300",
+                    "icon": "gray.400"
+                },
+                "error": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid red.500",
+                    "icon": "gray.500",
+                    "label": "red.500",
+                    "errorMessage": "red.500"
+                }
+            },
+            "multipleSelector": {
+                "default": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.300",
+                    "icon": "gray.500",
+                    "tagBackground": "purple.100",
+                    "tagText": "purple.700"
+                },
+                "selected": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.300",
+                    "icon": "gray.500",
+                    "tagBackground": "purple.100",
+                    "tagText": "purple.700"
+                },
+                "search": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.300",
+                    "icon": "gray.500",
+                    "tagBackground": "purple.100",
+                    "tagText": "purple.700"
+                },
+                "open": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.600",
+                    "icon": "gray.500",
+                    "tagBackground": "purple.100",
+                    "tagText": "purple.700"
+                },
+                "disabled": {
+                    "background": "gray.100",
+                    "text": "gray.400",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.300",
+                    "icon": "gray.400",
+                    "tagBackground": "gray.200",
+                    "tagText": "gray.400"
+                },
+                "error": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid red.500",
+                    "icon": "gray.500",
+                    "tagBackground": "purple.100",
+                    "tagText": "purple.700",
+                    "label": "red.500",
+                    "errorMessage": "red.500"
+                }
+            },
+            "expressionSelector": {
+                "default": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.300",
+                    "icon": "purple.600",
+                    "tagBackground": "purple.100",
+                    "tagText": "purple.700",
+                    "tagOperatorBackground": "purple.600",
+                    "tagOperatorText": "basic.white"
+                },
+                "withSelected": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.300",
+                    "icon": "purple.600",
+                    "tagBackground": "purple.100",
+                    "tagText": "purple.700",
+                    "tagOperatorBackground": "purple.600",
+                    "tagOperatorText": "basic.white"
+                },
+                "open": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.600",
+                    "icon": "purple.600",
+                    "tagBackground": "purple.100",
+                    "tagText": "purple.700",
+                    "tagOperatorBackground": "purple.600",
+                    "tagOperatorText": "basic.white"
+                }
+            },
+            "numberInput": {
+                "default": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.300",
+                    "icon": "gray.500"
+                },
+                "active": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.600",
+                    "icon": "gray.500"
+                },
+                "disabledPlaceholder": {
+                    "background": "gray.100",
+                    "text": "gray.800",
+                    "placeholder": "gray.800",
+                    "border": "1px solid gray.300",
+                    "icon": "gray.400"
+                },
+                "error": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid red.500",
+                    "label": "red.500",
+                    "errorMessage": "red.500",
+                    "icon": "gray.500"
+                }
+            },
+            "statusInput": {
+                "default": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.300",
+                    "icon": "gray.500"
+                },
+                "selected": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.300",
+                    "icon": "gray.500"
+                },
+                "selectedStatus": {
+                    "background": "green.500",
+                    "text": "basic.white",
+                    "placeholder": "gray.400",
+                    "border": "1px solid green.500",
+                    "icon": "basic.white",
+                    "statusDot": "green.500"
+                },
+                "disabled": {
+                    "background": "gray.100",
+                    "text": "gray.400",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.300",
+                    "icon": "gray.400"
+                },
+                "error": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid red.500",
+                    "icon": "gray.500",
+                    "label": "red.500",
+                    "errorMessage": "red.500"
+                },
+                "open": {
+                    "background": "basic.white",
+                    "text": "gray.900",
+                    "placeholder": "gray.400",
+                    "border": "1px solid gray.600",
+                    "icon": "gray.500"
+                }
+            }
+        }
+    }
+}

package/dist/tokens/types.d.ts

@@ -0,0 +1,9 @@
+import colors from './colors.json';
+import typography from './typography.json';
+import buttons from './buttons.json';
+import inputs from './inputs.json';
+export type Colors = typeof colors.colors;
+export type Typography = typeof typography.typography;
+export type Buttons = typeof buttons.buttons;
+export type Inputs = typeof inputs.inputs;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAC3C,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,MAAM,MAAM,eAAe,CAAC;AAEnC,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,MAAM,CAAC;AAC1C,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,UAAU,CAAC;AACtD,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,OAAO,CAAC;AAC7C,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,MAAM,CAAC"}

package/dist/tokens/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/tokens/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":""}

package/dist/tokens/typography.json

@@ -0,0 +1,37 @@
+{
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "typography": {
+        "fontFamilies": {
+            "lato": ["Lato", "system-ui", "sans-serif"],
+            "roboto": ["Roboto", "system-ui", "sans-serif"]
+        },
+        "fontSizes": {
+            "xs": "10px",
+            "sm": "12px",
+            "base": "14px",
+            "lg": "16px",
+            "xl": "20px",
+            "2xl": "24px"
+        },
+        "fontWeights": {
+            "regular": "400",
+            "medium": "500",
+            "bold": "700"
+        },
+        "lineHeights": {
+            "tight": "1.25",
+            "snug": "1.375",
+            "normal": "1.5",
+            "relaxed": "1.625",
+            "loose": "2"
+        },
+        "letterSpacing": {
+            "tighter": "-0.05em",
+            "tight": "-0.025em",
+            "normal": "0em",
+            "wide": "0.025em",
+            "wider": "0.05em",
+            "widest": "0.1em"
+        }
+    }
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "tonkean-tcltext",
+  "version": "1.0.0",
+  "description": "Design system components and tokens for Tonkean app, including TCLText component",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/styles/tokens.css"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./tokens.css": "./src/styles/tokens.css"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "tsc -p tsconfig.build.json",
+    "build-storybook": "storybook build",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "design-system",
+    "tokens",
+    "typography",
+    "ui"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.1.0",
+    "@storybook/addon-interactions": "^8.1.0",
+    "@storybook/addon-links": "^8.1.0",
+    "@storybook/blocks": "^8.1.0",
+    "@storybook/react": "^8.1.0",
+    "@storybook/react-vite": "^8.6.14",
+    "@storybook/test": "^8.1.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^8.1.0",
+    "typescript": "^5.3.0"
+  }
+}