@creativecodeco/ui 0.6.2 → 1.0.0

package/lib/theme/css/button.css

@@ -1,71 +1,67 @@
 .button {
-  &-link {
-    @apply btn-link;
+  &:focus,
+  &:hover,
+  &:active {
+    @apply btn-active;
   }
+}
 
-  &-outline {
-    @apply btn-outline;
-  }
+.button-link {
+  @apply btn-link;
+}
 
-  &-color {
-    &-neutral {
-      @apply btn-neutral;
-    }
+.button-outline {
+  @apply btn-outline;
+}
 
-    &-primary {
-      @apply btn-primary;
-    }
+.button-color-neutral {
+  @apply btn-neutral;
+}
 
-    &-secondary {
-      @apply btn-secondary;
-    }
+.button-color-primary {
+  @apply btn-primary;
+}
 
-    &-accent {
-      @apply btn-accent;
-    }
+.button-color-secondary {
+  @apply btn-secondary;
+}
 
-    &-success {
-      @apply btn-success;
-    }
+.button-color-accent {
+  @apply btn-accent;
+}
 
-    &-warning {
-      @apply btn-warning;
-    }
+.button-color-success {
+  @apply btn-success;
+}
 
-    &-info {
-      @apply btn-info;
-    }
+.button-color-warning {
+  @apply btn-warning;
+}
 
-    &-error {
-      @apply btn-error;
-    }
+.button-color-info {
+  @apply btn-info;
+}
 
-    &-ghost {
-      @apply btn-ghost;
-    }
-  }
+.button-color-error {
+  @apply btn-error;
+}
 
-  &-size {
-    &-lg {
-      @apply btn-lg;
-    }
+.button-color-ghost {
+  @apply btn-ghost;
+}
 
-    &-sm {
-      @apply btn-sm;
-    }
+.button-size-lg {
+  @apply btn-lg;
+}
 
-    &-xs {
-      @apply btn-xs;
-    }
-  }
+.button-size-sm {
+  @apply btn-sm;
+}
 
-  &-loading {
-    @apply pointer-events-none cursor-default;
-  }
+.button-size-xs {
+  @apply btn-xs;
+}
 
-  &:focus,
-  &:hover,
-  &:active {
-    @apply btn-active;
-  }
+.button-loading {
+  @apply pointer-events-none cursor-default;
 }

package/lib/theme/css/checkbox.css

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

package/lib/theme/css/main.css

@@ -1,6 +1,5 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss';
+@plugin "daisyui";
 
 @import './accordion.css';
 @import './avatar.css';
@@ -9,4 +8,4 @@
 @import './checkbox.css';
 @import './radio.css';
 @import './span.css';
-@import './text-box.css';
+@import './textbox.css';

package/lib/theme/css/radio.css

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

package/lib/theme/css/span.css

@@ -1,5 +1,3 @@
-.span {
-  &-loading {
-    @apply loading loading-spinner;
-  }
+.span-loading {
+  @apply loading loading-spinner;
 }

package/lib/theme/css/textbox.css

@@ -0,0 +1,115 @@
+.textbox-size-xs {
+  @apply input-xs;
+
+  &.textbox-with-left-icon {
+    @apply pl-8;
+  }
+
+  &.textbox-with-right-icon {
+    @apply pr-8;
+  }
+}
+
+.textbox-size-sm {
+  @apply input-sm;
+
+  &.textbox-with-left-icon {
+    @apply pl-8;
+  }
+
+  &.textbox-with-right-icon {
+    @apply pr-8;
+  }
+}
+
+.textbox-size-md {
+  @apply input-md;
+
+  &.textbox-with-left-icon {
+    @apply pl-9;
+  }
+
+  &.textbox-with-right-icon {
+    @apply pr-9;
+  }
+}
+
+.textbox-size-lg {
+  @apply input-lg;
+
+  &.textbox-with-left-icon {
+    @apply pl-9;
+  }
+
+  &.textbox-with-right-icon {
+    @apply pr-9;
+  }
+}
+
+.textbox-left-icon {
+  @apply absolute z-10;
+}
+
+.textbox-left-icon-size-xs {
+  @apply top-[5px] left-2;
+}
+
+.textbox-left-icon-size-sm {
+  @apply top-2 left-2;
+}
+
+.textbox-left-icon-size-md {
+  @apply top-4 left-3;
+}
+
+.textbox-left-icon-size-lg {
+  @apply top-6 left-3;
+}
+
+.textbox-right-icon {
+  @apply absolute z-10;
+}
+
+.textbox-right-icon-size-xs {
+  @apply top-[5px] right-2;
+}
+
+.textbox-right-icon-size-sm {
+  @apply top-2 right-2;
+}
+
+.textbox-right-icon-size-md {
+  @apply top-3 right-3;
+}
+
+.textbox-right-icon-size-lg {
+  @apply top-6 right-3;
+}
+
+.textbox-color-primary {
+  @apply input-primary;
+}
+
+.textbox-color-secondary {
+  @apply input-secondary;
+}
+
+.textbox-color-accent {
+  @apply input-accent;
+}
+
+.textbox-color-success {
+  @apply input-success;
+}
+
+.textbox-color-warning {
+  @apply input-warning;
+}
+
+.textbox-color-info {
+  @apply input-info;
+}
+
+.textbox-color-error {
+  @apply input-error;
+}

package/lib/theme/index.js

@@ -1,13 +1,17 @@
-export const creativeCodeTheme = {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.creativeCodeTheme = void 0;
+exports.creativeCodeTheme = {
     content: [
-        "./src/**/*.{html,js,ts,jsx,tsx,mdx}",
-        "./node_modules/creativecodeco/ui/lib/**/*.{js,jsx,ts,tsx}",
+        './src/**/*.{html,js,ts,jsx,tsx,mdx}',
+        './node_modules/creativecodeco/ui/lib/**/*.{js,jsx,ts,tsx}'
     ],
     theme: {
-        extend: {},
+        extend: {}
     },
     daisyui: {
-        themes: ["light"],
+        themes: ['light']
     },
-    plugins: [require("daisyui")],
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    plugins: [require('daisyui')]
 };