thailife-react 0.0.17 → 0.0.19

package/dist/styles/index.css

@@ -0,0 +1,601 @@
+/* CSS Variables for Theme */
+:root {
+  /* Colors */
+  --color-primary: #007AC2;
+  --color-error: #ff1100;
+  --color-dark: #333333;
+  --color-light: #666666;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  
+  /* Gray Scale */
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  
+  /* Spacing */
+  --spacing-0: 0;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+  --spacing-10: 2.5rem;
+  --spacing-12: 3rem;
+  --spacing-16: 4rem;
+  --spacing-18: 4.5rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+  --spacing-32: 8rem;
+  --spacing-40: 10rem;
+  --spacing-48: 12rem;
+  --spacing-56: 14rem;
+  --spacing-64: 16rem;
+  --spacing-88: 22rem;
+  
+  /* Font Sizes */
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 3rem;
+  --font-size-6xl: 3.75rem;
+  
+  /* Font Families */
+  --font-family-sans: "Inter", system-ui, sans-serif;
+  --font-family-serif: "Georgia", "Cambria", "Times New Roman", "Times", serif;
+  --font-family-mono: "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+  
+  /* Border Radius */
+  --border-radius-none: 0;
+  --border-radius-sm: 0.125rem;
+  --border-radius-base: 0.25rem;
+  --border-radius-md: 0.375rem;
+  --border-radius-lg: 0.5rem;
+  --border-radius-xl: 0.75rem;
+  --border-radius-2xl: 1rem;
+  --border-radius-3xl: 1.5rem;
+  --border-radius-full: 9999px;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  
+  /* Transitions */
+  --transition-fast: 150ms ease-in-out;
+  --transition-base: 300ms ease-in-out;
+  --transition-slow: 500ms ease-in-out;
+}
+
+/* Reset and Base Styles */
+* {
+  box-sizing: border-box;
+}
+
+/* Button Component */
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: var(--border-radius-md);
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-base);
+  outline: none;
+  padding: var(--spacing-2) var(--spacing-4);
+  font-size: var(--font-size-sm);
+}
+
+.btn:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Button Variants */
+.btn--contained {
+  background-color: var(--color-primary);
+  color: var(--color-white);
+}
+
+.btn--contained:hover:not(:disabled) {
+  background-color: #005a8f;
+}
+
+.btn--outlined {
+  background-color: transparent;
+  border: 1px solid var(--color-primary);
+  color: var(--color-primary);
+}
+
+.btn--outlined:hover:not(:disabled) {
+  background-color: rgba(0, 122, 194, 0.1);
+}
+
+.btn--link {
+  background-color: transparent;
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+
+.btn--link:hover:not(:disabled) {
+  text-decoration: none;
+}
+
+/* Button Sizes */
+.btn--sm {
+  padding: var(--spacing-3) var(--spacing-3);
+  font-size: var(--font-size-sm);
+}
+
+.btn--md {
+  padding: var(--spacing-2) var(--spacing-4);
+  font-size: var(--font-size-sm);
+}
+
+.btn--lg {
+  padding: var(--spacing-3) var(--spacing-6);
+  font-size: var(--font-size-base);
+}
+
+/* Button Colors */
+.btn--error {
+  background-color: var(--color-error);
+  color: var(--color-white);
+}
+
+.btn--dark {
+  background-color: var(--color-dark);
+  color: var(--color-white);
+}
+
+.btn--light {
+  background-color: var(--color-light);
+  color: var(--color-white);
+}
+
+/* Button Full Width */
+.btn--full-width {
+  width: 100%;
+}
+
+/* Input Component */
+.input-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.input-container--full-width {
+  width: 100%;
+}
+
+.input-label {
+  margin-bottom: var(--spacing-1);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--color-gray-700);
+}
+
+.input {
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--border-radius-md);
+  transition: border-color var(--transition-base);
+  outline: none;
+  font-family: var(--font-family-sans);
+  padding: var(--spacing-2) var(--spacing-4);
+  font-size: var(--font-size-sm);
+}
+
+.input:focus {
+  border-color: var(--color-primary);
+}
+
+.input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--color-gray-50);
+}
+
+.input--error {
+  border-color: var(--color-error);
+}
+
+.input--error:focus {
+  border-color: var(--color-error);
+}
+
+.input--full-width {
+  width: 100%;
+}
+
+.input-helper-text {
+  margin-top: var(--spacing-1);
+  font-size: var(--font-size-xs);
+  color: var(--color-gray-500);
+}
+
+.input-helper-text--error {
+  color: var(--color-error);
+}
+
+/* Checkbox Component */
+.checkbox-container {
+  display: flex;
+  align-items: flex-start;
+}
+
+.checkbox-container--full-width {
+  width: 100%;
+}
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  height: var(--spacing-5);
+}
+
+.checkbox {
+  border-radius: var(--border-radius-md);
+  border: 1px solid var(--color-gray-300);
+  transition: all var(--transition-base);
+  outline: none;
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+}
+
+.checkbox:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-primary);
+}
+
+.checkbox:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.checkbox--error {
+  border-color: var(--color-error);
+}
+
+.checkbox--error:focus {
+  box-shadow: 0 0 0 2px var(--color-error);
+}
+
+.checkbox-label-container {
+  margin-left: var(--spacing-3);
+}
+
+.checkbox-label {
+  font-weight: 500;
+  color: var(--color-gray-700);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+}
+
+/* Radio Component */
+.radio-container {
+  display: flex;
+  align-items: flex-start;
+}
+
+.radio-container--full-width {
+  width: 100%;
+}
+
+.radio-wrapper {
+  display: flex;
+  align-items: center;
+  height: var(--spacing-5);
+}
+
+.radio {
+  border: 2px solid var(--color-gray-300);
+  transition: all var(--transition-base);
+  outline: none;
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+}
+
+.radio:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-primary);
+}
+
+.radio:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.radio--error {
+  border-color: var(--color-error);
+}
+
+.radio--error:focus {
+  box-shadow: 0 0 0 2px var(--color-error);
+}
+
+.radio-label-container {
+  margin-left: var(--spacing-3);
+}
+
+.radio-label {
+  font-weight: 500;
+  color: var(--color-gray-700);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+}
+
+/* Select Component */
+.select-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.select-container--full-width {
+  width: 100%;
+}
+
+.select-label {
+  margin-bottom: var(--spacing-1);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--color-gray-700);
+}
+
+.select-wrapper {
+  position: relative;
+}
+
+.select {
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--border-radius-md);
+  transition: border-color var(--transition-base);
+  outline: none;
+  appearance: none;
+  background-color: var(--color-white);
+  font-family: var(--font-family-sans);
+  padding: var(--spacing-2) var(--spacing-4);
+  font-size: var(--font-size-sm);
+}
+
+.select:focus {
+  border-color: var(--color-primary);
+}
+
+.select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--color-gray-50);
+}
+
+.select--error {
+  border-color: var(--color-error);
+}
+
+.select--error:focus {
+  border-color: var(--color-error);
+}
+
+.select--full-width {
+  width: 100%;
+}
+
+.select-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  padding-right: var(--spacing-3);
+  pointer-events: none;
+}
+
+/* Textarea Component */
+.textarea-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.textarea-container--full-width {
+  width: 100%;
+}
+
+.textarea-label {
+  margin-bottom: var(--spacing-1);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--color-gray-700);
+}
+
+.textarea {
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--border-radius-md);
+  transition: border-color var(--transition-base);
+  outline: none;
+  resize: vertical;
+  font-family: var(--font-family-sans);
+  padding: var(--spacing-2) var(--spacing-4);
+  font-size: var(--font-size-sm);
+}
+
+.textarea:focus {
+  border-color: var(--color-primary);
+}
+
+.textarea:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--color-gray-50);
+}
+
+.textarea--error {
+  border-color: var(--color-error);
+}
+
+.textarea--error:focus {
+  border-color: var(--color-error);
+}
+
+.textarea--full-width {
+  width: 100%;
+}
+
+/* InputFile Component */
+.input-file-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.input-file-container--full-width {
+  width: 100%;
+}
+
+.input-file-label {
+  margin-bottom: var(--spacing-1);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--color-gray-700);
+}
+
+.input-file-wrapper {
+  position: relative;
+}
+
+.input-file-hidden {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.input-file-upload-area {
+  border: 2px dashed var(--color-gray-300);
+  transition: all var(--transition-base);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-2) var(--spacing-4);
+  font-size: var(--font-size-base);
+}
+
+.input-file-upload-area:hover {
+  border-color: var(--color-primary);
+}
+
+.input-file-upload-area:focus-within {
+  border-color: var(--color-primary);
+}
+
+.input-file-upload-area--error {
+  border-color: var(--color-error);
+}
+
+.input-file-upload-area--error:hover {
+  border-color: var(--color-error);
+}
+
+.input-file-upload-area--error:focus-within {
+  border-color: var(--color-error);
+}
+
+.input-file-upload-area--full-width {
+  width: 100%;
+}
+
+.input-file-button-text {
+  color: var(--color-gray-600);
+}
+
+.input-file-multiple-text {
+  margin-left: var(--spacing-1);
+  font-size: var(--font-size-xs);
+  color: var(--color-gray-500);
+}
+
+/* Utility Classes */
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.font-bold {
+  font-weight: bold;
+}
+
+.font-normal {
+  font-weight: normal;
+}
+
+.font-light {
+  font-weight: 300;
+}
+
+.rounded {
+  border-radius: var(--border-radius-md);
+}
+
+.rounded-sm {
+  border-radius: var(--border-radius-sm);
+}
+
+.rounded-lg {
+  border-radius: var(--border-radius-lg);
+}
+
+.rounded-full {
+  border-radius: var(--border-radius-full);
+}
+
+.shadow {
+  box-shadow: var(--shadow-base);
+}
+
+.shadow-sm {
+  box-shadow: var(--shadow-sm);
+}
+
+.shadow-md {
+  box-shadow: var(--shadow-md);
+}
+
+.shadow-lg {
+  box-shadow: var(--shadow-lg);
+}
+
+.shadow-xl {
+  box-shadow: var(--shadow-xl);
+}

package/dist/styles/index.d.ts

@@ -1,4 +1,77 @@
-export { default as theme } from "./theme";
-export { default as ThemeProvider } from "./ThemeProvider";
-export type { Theme } from "./theme";
+export declare const cssClasses: {
+    readonly button: "btn";
+    readonly buttonContained: "btn--contained";
+    readonly buttonOutlined: "btn--outlined";
+    readonly buttonLink: "btn--link";
+    readonly buttonSmall: "btn--sm";
+    readonly buttonMedium: "btn--md";
+    readonly buttonLarge: "btn--lg";
+    readonly buttonError: "btn--error";
+    readonly buttonDark: "btn--dark";
+    readonly buttonLight: "btn--light";
+    readonly buttonFullWidth: "btn--full-width";
+    readonly inputContainer: "input-container";
+    readonly inputContainerFullWidth: "input-container--full-width";
+    readonly inputLabel: "input-label";
+    readonly input: "input";
+    readonly inputError: "input--error";
+    readonly inputFullWidth: "input--full-width";
+    readonly inputHelperText: "input-helper-text";
+    readonly inputHelperTextError: "input-helper-text--error";
+    readonly checkboxContainer: "checkbox-container";
+    readonly checkboxContainerFullWidth: "checkbox-container--full-width";
+    readonly checkboxWrapper: "checkbox-wrapper";
+    readonly checkbox: "checkbox";
+    readonly checkboxError: "checkbox--error";
+    readonly checkboxLabelContainer: "checkbox-label-container";
+    readonly checkboxLabel: "checkbox-label";
+    readonly radioContainer: "radio-container";
+    readonly radioContainerFullWidth: "radio-container--full-width";
+    readonly radioWrapper: "radio-wrapper";
+    readonly radio: "radio";
+    readonly radioError: "radio--error";
+    readonly radioLabelContainer: "radio-label-container";
+    readonly radioLabel: "radio-label";
+    readonly selectContainer: "select-container";
+    readonly selectContainerFullWidth: "select-container--full-width";
+    readonly selectLabel: "select-label";
+    readonly selectWrapper: "select-wrapper";
+    readonly select: "select";
+    readonly selectError: "select--error";
+    readonly selectFullWidth: "select--full-width";
+    readonly selectIcon: "select-icon";
+    readonly textareaContainer: "textarea-container";
+    readonly textareaContainerFullWidth: "textarea-container--full-width";
+    readonly textareaLabel: "textarea-label";
+    readonly textarea: "textarea";
+    readonly textareaError: "textarea--error";
+    readonly textareaFullWidth: "textarea--full-width";
+    readonly inputFileContainer: "input-file-container";
+    readonly inputFileContainerFullWidth: "input-file-container--full-width";
+    readonly inputFileLabel: "input-file-label";
+    readonly inputFileWrapper: "input-file-wrapper";
+    readonly inputFileHidden: "input-file-hidden";
+    readonly inputFileUploadArea: "input-file-upload-area";
+    readonly inputFileUploadAreaError: "input-file-upload-area--error";
+    readonly inputFileUploadAreaFullWidth: "input-file-upload-area--full-width";
+    readonly inputFileButtonText: "input-file-button-text";
+    readonly inputFileMultipleText: "input-file-multiple-text";
+    readonly textCenter: "text-center";
+    readonly textLeft: "text-left";
+    readonly textRight: "text-right";
+    readonly fontBold: "font-bold";
+    readonly fontNormal: "font-normal";
+    readonly fontLight: "font-light";
+    readonly rounded: "rounded";
+    readonly roundedSm: "rounded-sm";
+    readonly roundedLg: "rounded-lg";
+    readonly roundedFull: "rounded-full";
+    readonly shadow: "shadow";
+    readonly shadowSm: "shadow-sm";
+    readonly shadowMd: "shadow-md";
+    readonly shadowLg: "shadow-lg";
+    readonly shadowXl: "shadow-xl";
+};
+export type CSSClasses = typeof cssClasses;
+export default cssClasses;
 //# sourceMappingURL=index.d.ts.map

package/dist/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwFb,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC;AAC3C,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "thailife-react",
-  "version": "0.0.17",
-  "description": "A modern UI library built with React and Emotion",
+  "version": "0.0.19",
+  "description": "A modern UI library built with React and CSS",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "style": "dist/styles/index.css",
   "type": "module",
   "files": [
     "dist"
@@ -25,7 +26,7 @@
     "react",
     "ui",
     "components",
-    "emotion",
+    "css",
     "typescript"
   ],
   "author": "ThaiLife",
@@ -80,13 +81,10 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup": "^4.1.0",
+    "rollup-plugin-copy": "3.5.0",
     "storybook": "^7.5.0",
     "ts-jest": "^29.1.0",
     "typescript": "^5.2.0",
     "vite": "^5.0.0"
-  },
-  "dependencies": {
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.1"
   }
 }