@creativecodeco/ui 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/README.md +4 -2
  2. package/lib/helpers/react-hook-form/controller.component.d.ts +1 -1
  3. package/lib/theme/css/main.css +5 -0
  4. package/lib/theme/css/text-box.css +87 -0
  5. package/lib/theme/main.css +1313 -0
  6. package/lib/types/helpers/controller.types.d.ts +5 -2
  7. package/lib/types/index.d.ts +2 -2
  8. package/lib/types/ui/forms/drop-down.types.d.ts +11 -0
  9. package/lib/types/ui/forms/drop-down.types.js +1 -0
  10. package/lib/types/ui/forms/index.d.ts +3 -2
  11. package/lib/types/ui/forms/text-box.types.d.ts +4 -0
  12. package/lib/ui/forms/drop-down/drop-down.component.d.ts +4 -0
  13. package/lib/ui/forms/drop-down/drop-down.component.js +43 -0
  14. package/lib/ui/forms/drop-down/index.d.ts +2 -0
  15. package/lib/ui/forms/drop-down/index.js +2 -0
  16. package/lib/ui/forms/index.d.ts +3 -2
  17. package/lib/ui/forms/index.js +3 -2
  18. package/lib/ui/forms/text-box/text-box.component.js +11 -4
  19. package/lib/ui/provider/creativecode/creativecode-ui.provider.d.ts +2 -0
  20. package/lib/ui/provider/creativecode/creativecode-ui.provider.js +9 -0
  21. package/lib/ui/provider/index.d.ts +1 -1
  22. package/lib/ui/provider/index.js +1 -1
  23. package/package.json +51 -35
  24. package/lib/theme/tailwindcss/input.css +0 -3
  25. package/lib/theme/tailwindcss/main.css +0 -5
  26. package/lib/ui/provider/creativecode-ui.provider.d.ts +0 -2
  27. package/lib/ui/provider/creativecode-ui.provider.js +0 -5
package/README.md CHANGED
@@ -25,11 +25,11 @@ yarn add @creativecodeco/ui
25
25
  ### Dependencies
26
26
 
27
27
  ```bash
28
- npm install --save-dev tailwindcss postcss postcss-import autoprefixer
28
+ npm install --save-dev tailwindcss postcss postcss-import autoprefixer usehooks-ts
29
29
 
30
30
  or
31
31
 
32
- yarn add -D tailwindcss postcss postcss-import autoprefixer
32
+ yarn add -D tailwindcss postcss postcss-import autoprefixer usehooks-ts
33
33
  ```
34
34
 
35
35
  ### Setting Tailwind
@@ -75,6 +75,8 @@ Add on layout `layout.tsx`
75
75
  ```tsx
76
76
  import { CreativeCodeUIProvider } from '@creativecodeco/ui';
77
77
 
78
+ import '@creativecodeco/ui/lib/theme/main.css';
79
+
78
80
  export default function RootLayout({ children }) {
79
81
  return (
80
82
  <html>
package/lib/helpers/react-hook-form/controller.component.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { type FieldPath, type FieldValues } from 'react-hook-form';
2
- import { ControllerType } from '../../types/helpers/controller.types';
2
+ import type { ControllerType } from '../../types/helpers/controller.types';
3
3
  export default function Controller<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, name, as: Input, defaultValue, shouldUnregister, rules, ...rest }: ControllerType<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
package/lib/theme/css/main.css ADDED
@@ -0,0 +1,5 @@
1
+ @import 'tailwindcss/base';
2
+ @import 'tailwindcss/components';
3
+ @import 'tailwindcss/utilities';
4
+
5
+ @import './text-box.css';
package/lib/theme/css/text-box.css ADDED
@@ -0,0 +1,87 @@
1
+ .text-box-size-xs {
2
+ @apply input-xs;
3
+
4
+ &.text-box-with-left-icon {
5
+ @apply pl-8;
6
+ }
7
+
8
+ &.text-box-with-right-icon {
9
+ @apply pr-8;
10
+ }
11
+ }
12
+
13
+ .text-box-size-sm {
14
+ @apply input-sm;
15
+
16
+ &.text-box-with-left-icon {
17
+ @apply pl-8;
18
+ }
19
+
20
+ &.text-box-with-right-icon {
21
+ @apply pr-8;
22
+ }
23
+ }
24
+
25
+ .text-box-size-md {
26
+ @apply input-md;
27
+
28
+ &.text-box-with-left-icon {
29
+ @apply pl-9;
30
+ }
31
+
32
+ &.text-box-with-right-icon {
33
+ @apply pr-9;
34
+ }
35
+ }
36
+
37
+ .text-box-size-lg {
38
+ @apply input-lg;
39
+
40
+ &.text-box-with-left-icon {
41
+ @apply pl-9;
42
+ }
43
+
44
+ &.text-box-with-right-icon {
45
+ @apply pr-9;
46
+ }
47
+ }
48
+
49
+ .text-box-left-icon {
50
+ @apply absolute;
51
+
52
+ &-size-xs {
53
+ @apply top-[5px] left-2;
54
+ }
55
+
56
+ &-size-sm {
57
+ @apply top-2 left-2;
58
+ }
59
+
60
+ &-size-md {
61
+ @apply top-4 left-3;
62
+ }
63
+
64
+ &-size-lg {
65
+ @apply top-6 left-3;
66
+ }
67
+ }
68
+
69
+ .text-box-right-icon {
70
+ @apply absolute;
71
+
72
+ &-size-xs {
73
+ @apply top-[5px] right-2;
74
+ }
75
+
76
+ &-size-sm {
77
+ @apply top-2 right-2;
78
+ }
79
+
80
+ &-size-md {
81
+ @apply top-4 right-3;
82
+ }
83
+
84
+ &-size-lg {
85
+ @apply top-6 right-3;
86
+ }
87
+ }