@creativecodeco/ui 0.0.5 → 0.2.0

package/README.md

@@ -25,11 +25,11 @@ yarn add @creativecodeco/ui
 ### Dependencies
 
 ```bash
-npm install --save-dev tailwindcss postcss postcss-import autoprefixer usehooks-ts
+npm install --save-dev tailwindcss postcss postcss-import autoprefixer usehooks-ts cssnano
 
 or
 
-yarn add -D tailwindcss postcss postcss-import autoprefixer usehooks-ts
+yarn add -D tailwindcss postcss postcss-import autoprefixer usehooks-ts cssnano
 ```
 
 ### Setting Tailwind
@@ -46,13 +46,45 @@ const themeConfig = {
     ...creativeCodeTheme.content,
     './src/**/*.{js,jsx,ts,tsx}',
     './app/**/*.{js,jsx,ts,tsx}',
-    './node_modules/@creativecodeco/ui/lib/**/*.{js,jsx,ts,tsx}',
   ],
 };
 
 export default themeConfig;
 ```
 
+#### Custom theme
+
+```js
+/** @type {import('tailwindcss').Config} */
+import { creativeCodeTheme } from '@creativecodeco/ui';
+
+const themeConfig = {
+  ...creativeCodeTheme,
+  content: [
+    ...creativeCodeTheme.content,
+    './src/**/*.{js,jsx,ts,tsx}',
+    './app/**/*.{js,jsx,ts,tsx}',
+  ],
+  daisyui: {
+    ...creativeCodeTheme.daisyui,
+    themes: [
+      {
+        customTheme: {
+          ...require('daisyui/src/theming/themes')['light'],
+          primary: '#08448c',
+          secondary: '#427AA1',
+          neutral: '#EBF2FA',
+          accent: '#679436',
+          other: '#A5BE00',
+        },
+      },
+    ],
+  },
+};
+
+export default themeConfig;
+```
+
 ### Setting Postcss
 
 Create file `postcss.config.js` and add
@@ -64,6 +96,7 @@ module.exports = {
     'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
+    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
   },
 };
 ```
@@ -75,7 +108,7 @@ Add on layout `layout.tsx`
 ```tsx
 import { CreativeCodeUIProvider } from '@creativecodeco/ui';
 
-import '@creativecodeco/ui/lib/theme/main.css';
+import '@creativecodeco/ui/lib/theme/css/main.css';
 
 export default function RootLayout({ children }) {
   return (

package/lib/index.d.ts

@@ -1,5 +1,7 @@
 export * from './helpers';
 export * from './theme';
+export * from './ui/components';
 export * from './ui/forms';
 export * from './ui/provider';
 export * from './types';
+export * from './utils';

package/lib/index.js

@@ -1,5 +1,7 @@
 export * from './helpers';
 export * from './theme';
+export * from './ui/components';
 export * from './ui/forms';
 export * from './ui/provider';
 export * from './types';
+export * from './utils';

package/lib/theme/css/avatar.css

@@ -0,0 +1,37 @@
+.avatar-size {
+  &-xs {
+    @apply w-8;
+
+    > span {
+      @apply text-xs;
+    }
+  }
+
+  &-sm {
+    @apply w-12;
+
+    > span {
+      @apply text-sm;
+    }
+  }
+
+  &-md {
+    @apply w-16;
+
+    > span {
+      @apply text-xl;
+    }
+  }
+
+  &-lg {
+    @apply w-24;
+
+    > span {
+      @apply text-3xl;
+    }
+  }
+}
+
+.avatar-ring {
+  @apply ring ring-primary ring-offset-base-100 ring-offset-2;
+}

package/lib/theme/css/checkbox.css

@@ -0,0 +1,47 @@
+.checkbox-color {
+  &-primary {
+    @apply checkbox-primary;
+  }
+
+  &-secondary {
+    @apply checkbox-secondary;
+  }
+
+  &-accent {
+    @apply checkbox-accent;
+  }
+
+  &-success {
+    @apply checkbox-success;
+  }
+
+  &-warning {
+    @apply checkbox-warning;
+  }
+
+  &-info {
+    @apply checkbox-info;
+  }
+
+  &-error {
+    @apply checkbox-error;
+  }
+}
+
+.checkbox-size {
+  &-xs {
+    @apply checkbox-xs;
+  }
+
+  &-sm {
+    @apply checkbox-sm;
+  }
+
+  &-md {
+    @apply checkbox-md;
+  }
+
+  &-lg {
+    @apply checkbox-lg;
+  }
+}

package/lib/theme/css/main.css

@@ -2,4 +2,6 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+@import './avatar.css';
+@import './checkbox.css';
 @import './text-box.css';