@creativecodeco/ui 0.4.1 → 0.4.2

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 (5) hide show
  1. package/lib/theme/css/text-box.css +57 -31
  2. package/lib/theme/main.css +93 -0
  3. package/lib/types/ui/forms/text-box.types.d.ts +2 -1
  4. package/lib/ui/forms/text-box/text-box.component.js +10 -7
  5. package/package.json +25 -25
package/lib/theme/css/text-box.css CHANGED
@@ -1,48 +1,50 @@
1
- .text-box-size-xs {
2
- @apply input-xs;
1
+ .text-box-size {
2
+ &-xs {
3
+ @apply input-xs;
3
4
 
4
- &.text-box-with-left-icon {
5
- @apply pl-8;
6
- }
5
+ &.text-box-with-left-icon {
6
+ @apply pl-8;
7
+ }
7
8
 
8
- &.text-box-with-right-icon {
9
- @apply pr-8;
9
+ &.text-box-with-right-icon {
10
+ @apply pr-8;
11
+ }
10
12
  }
11
- }
12
13
 
13
- .text-box-size-sm {
14
- @apply input-sm;
14
+ &-sm {
15
+ @apply input-sm;
15
16
 
16
- &.text-box-with-left-icon {
17
- @apply pl-8;
18
- }
17
+ &.text-box-with-left-icon {
18
+ @apply pl-8;
19
+ }
19
20
 
20
- &.text-box-with-right-icon {
21
- @apply pr-8;
21
+ &.text-box-with-right-icon {
22
+ @apply pr-8;
23
+ }
22
24
  }
23
- }
24
25
 
25
- .text-box-size-md {
26
- @apply input-md;
26
+ &-md {
27
+ @apply input-md;
27
28
 
28
- &.text-box-with-left-icon {
29
- @apply pl-9;
30
- }
29
+ &.text-box-with-left-icon {
30
+ @apply pl-9;
31
+ }
31
32
 
32
- &.text-box-with-right-icon {
33
- @apply pr-9;
33
+ &.text-box-with-right-icon {
34
+ @apply pr-9;
35
+ }
34
36
  }
35
- }
36
37
 
37
- .text-box-size-lg {
38
- @apply input-lg;
38
+ &-lg {
39
+ @apply input-lg;
39
40
 
40
- &.text-box-with-left-icon {
41
- @apply pl-9;
42
- }
41
+ &.text-box-with-left-icon {
42
+ @apply pl-9;
43
+ }
43
44
 
44
- &.text-box-with-right-icon {
45
- @apply pr-9;
45
+ &.text-box-with-right-icon {
46
+ @apply pr-9;
47
+ }
46
48
  }
47
49
  }
48
50
 
@@ -85,3 +87,27 @@
85
87
  @apply top-6 right-3;
86
88
  }
87
89
  }
90
+
91
+ .text-box-color {
92
+ &-primary {
93
+ @apply input-primary;
94
+ }
95
+ &-secondary {
96
+ @apply input-secondary;
97
+ }
98
+ &-accent {
99
+ @apply input-accent;
100
+ }
101
+ &-success {
102
+ @apply input-success;
103
+ }
104
+ &-warning {
105
+ @apply input-warning;
106
+ }
107
+ &-info {
108
+ @apply input-info;
109
+ }
110
+ &-error {
111
+ @apply input-error;
112
+ }
113
+ }
package/lib/theme/main.css CHANGED
@@ -622,6 +622,35 @@ html {
622
622
  max-width: 1536px;
623
623
  }
624
624
  }
625
+ .alert {
626
+ display: grid;
627
+ width: 100%;
628
+ grid-auto-flow: row;
629
+ align-content: flex-start;
630
+ align-items: center;
631
+ justify-items: center;
632
+ gap: 1rem;
633
+ text-align: center;
634
+ border-radius: var(--rounded-box, 1rem);
635
+ border-width: 1px;
636
+ --tw-border-opacity: 1;
637
+ border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
638
+ padding: 1rem;
639
+ --tw-text-opacity: 1;
640
+ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
641
+ --alert-bg: var(--fallback-b2,oklch(var(--b2)/1));
642
+ --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
643
+ background-color: var(--alert-bg);
644
+ }
645
+ @media (min-width: 640px) {
646
+
647
+ .alert {
648
+ grid-auto-flow: column;
649
+ grid-template-columns: auto minmax(auto,1fr);
650
+ justify-items: start;
651
+ text-align: start;
652
+ }
653
+ }
625
654
  .avatar {
626
655
  position: relative;
627
656
  display: inline-flex;
@@ -1432,6 +1461,7 @@ html {
1432
1461
  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
1433
1462
  --tw-bg-opacity: 1;
1434
1463
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
1464
+ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
1435
1465
  --tw-text-opacity: 0.2;
1436
1466
  }
1437
1467
  .select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder {
@@ -3372,3 +3402,66 @@ html {
3372
3402
  top: 1.5rem;
3373
3403
  right: 0.75rem;
3374
3404
  }
3405
+ .text-box-color-primary {
3406
+ --tw-border-opacity: 1;
3407
+ border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
3408
+ }
3409
+ .text-box-color-primary:focus,.text-box-color-primary:focus-within {
3410
+ --tw-border-opacity: 1;
3411
+ border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
3412
+ outline-color: var(--fallback-p,oklch(var(--p)/1));
3413
+ }
3414
+ .text-box-color-secondary {
3415
+ --tw-border-opacity: 1;
3416
+ border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
3417
+ }
3418
+ .text-box-color-secondary:focus,.text-box-color-secondary:focus-within {
3419
+ --tw-border-opacity: 1;
3420
+ border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
3421
+ outline-color: var(--fallback-s,oklch(var(--s)/1));
3422
+ }
3423
+ .text-box-color-accent {
3424
+ --tw-border-opacity: 1;
3425
+ border-color: var(--fallback-a,oklch(var(--a)/var(--tw-border-opacity)));
3426
+ }
3427
+ .text-box-color-accent:focus,.text-box-color-accent:focus-within {
3428
+ --tw-border-opacity: 1;
3429
+ border-color: var(--fallback-a,oklch(var(--a)/var(--tw-border-opacity)));
3430
+ outline-color: var(--fallback-a,oklch(var(--a)/1));
3431
+ }
3432
+ .text-box-color-success {
3433
+ --tw-border-opacity: 1;
3434
+ border-color: var(--fallback-su,oklch(var(--su)/var(--tw-border-opacity)));
3435
+ }
3436
+ .text-box-color-success:focus,.text-box-color-success:focus-within {
3437
+ --tw-border-opacity: 1;
3438
+ border-color: var(--fallback-su,oklch(var(--su)/var(--tw-border-opacity)));
3439
+ outline-color: var(--fallback-su,oklch(var(--su)/1));
3440
+ }
3441
+ .text-box-color-warning {
3442
+ --tw-border-opacity: 1;
3443
+ border-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-border-opacity)));
3444
+ }
3445
+ .text-box-color-warning:focus,.text-box-color-warning:focus-within {
3446
+ --tw-border-opacity: 1;
3447
+ border-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-border-opacity)));
3448
+ outline-color: var(--fallback-wa,oklch(var(--wa)/1));
3449
+ }
3450
+ .text-box-color-info {
3451
+ --tw-border-opacity: 1;
3452
+ border-color: var(--fallback-in,oklch(var(--in)/var(--tw-border-opacity)));
3453
+ }
3454
+ .text-box-color-info:focus,.text-box-color-info:focus-within {
3455
+ --tw-border-opacity: 1;
3456
+ border-color: var(--fallback-in,oklch(var(--in)/var(--tw-border-opacity)));
3457
+ outline-color: var(--fallback-in,oklch(var(--in)/1));
3458
+ }
3459
+ .text-box-color-error {
3460
+ --tw-border-opacity: 1;
3461
+ border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
3462
+ }
3463
+ .text-box-color-error:focus,.text-box-color-error:focus-within {
3464
+ --tw-border-opacity: 1;
3465
+ border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
3466
+ outline-color: var(--fallback-er,oklch(var(--er)/1));
3467
+ }
package/lib/types/ui/forms/text-box.types.d.ts CHANGED
@@ -1,11 +1,12 @@
1
1
  /// <reference types="react" />
2
2
  import type { IconType } from 'react-icons';
3
- import type { ErrorType, SizeType } from '../../../types';
3
+ import type { ColorType, ErrorType, SizeType } from '../../../types';
4
4
  export interface TextBoxType extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, ErrorType {
5
5
  name: string;
6
6
  label?: string;
7
7
  disabled?: boolean;
8
8
  size?: SizeType;
9
+ color?: ColorType;
9
10
  leftIcon?: IconType;
10
11
  rightIcon?: IconType;
11
12
  rightButton?: boolean;
package/lib/ui/forms/text-box/text-box.component.js CHANGED
@@ -1,18 +1,21 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { forwardRef, useImperativeHandle, useRef } from 'react';
3
3
  import cls from 'classnames';
4
- const TextBox = forwardRef(({ name, label, isError, error, disabled, size = 'md', leftIcon: LeftIcon, rightIcon: RightIcon, rightButton, onClick, ...otherProps }, ref) => {
4
+ const TextBox = forwardRef(({ name, label, isError, error, disabled, size = 'md', color, leftIcon: LeftIcon, rightIcon: RightIcon, rightButton, onClick, ...otherProps }, ref) => {
5
5
  const inputRef = useRef(null);
6
6
  useImperativeHandle(ref, () => inputRef.current);
7
- return (_jsxs("div", { className: 'form-control w-full flex', children: [label && (_jsx("div", { className: 'label', children: _jsx("label", { htmlFor: name, className: 'label-text', children: label }) })), _jsxs("div", { className: 'relative', children: [LeftIcon && (_jsx(LeftIcon, { className: cls('text-box-left-icon', {
8
- [`text-box-left-icon-size-${size}`]: size
9
- }) })), _jsx("input", { ref: inputRef, id: name, name: name, "data-testid": name, ...otherProps, onClick: onClick, className: cls('input input-bordered w-full', `text-box-size-${size}`, {
7
+ return (_jsxs("label", { htmlFor: name, className: 'form-control w-full flex', children: [label && _jsx("span", { className: 'label-text', children: label }), _jsxs("div", { className: 'relative', children: [LeftIcon && (_jsx(LeftIcon, { className: cls('text-box-left-icon', {
8
+ [`text-box-left-icon-size-${size}`]: size,
9
+ 'cursor-not-allowed': disabled
10
+ }) })), _jsx("input", { ref: inputRef, id: name, name: name, "data-testid": name, ...otherProps, onClick: (e) => !disabled && onClick?.(e), className: cls('input input-bordered w-full', `text-box-size-${size}`, {
10
11
  'input-error': isError,
11
12
  'text-box-with-left-icon': LeftIcon,
12
- 'text-box-with-right-icon': RightIcon
13
+ 'text-box-with-right-icon': RightIcon,
14
+ [`text-box-color-${color}`]: !isError && color
13
15
  }), disabled: disabled }), RightIcon && (_jsx(RightIcon, { className: cls('text-box-right-icon', {
14
16
  [`text-box-right-icon-size-${size}`]: size,
15
- 'cursor-pointer': rightButton
16
- }), onClick: () => rightButton && inputRef.current?.click() }))] }), isError && _jsx("p", { className: 'text-red-500', children: error })] }));
17
+ 'cursor-pointer': !disabled && rightButton,
18
+ 'cursor-not-allowed': disabled
19
+ }), onClick: () => rightButton && !disabled && inputRef.current?.click() }))] }), isError && _jsx("p", { className: 'text-red-500', children: error })] }));
17
20
  });
18
21
  export default TextBox;
package/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  "framework design",
11
11
  "design system"
12
12
  ],
13
- "version": "0.4.1",
13
+ "version": "0.4.2",
14
14
  "homepage": "https://github.com/creativecodeco/ui",
15
15
  "author": {
16
16
  "name": "John Toro",
@@ -48,41 +48,41 @@
48
48
  "usehooks-ts": "2.9.1"
49
49
  },
50
50
  "dependencies": {
51
- "postcss": "8.4.33",
51
+ "postcss": "8.4.34",
52
52
  "postcss-import": "16.0.0",
53
53
  "react": "18.2.0",
54
- "react-hook-form": "7.49.3",
54
+ "react-hook-form": "7.50.1",
55
55
  "tailwindcss": "3.4.1",
56
- "usehooks-ts": "2.9.5"
56
+ "usehooks-ts": "2.13.0"
57
57
  },
58
58
  "devDependencies": {
59
- "@babel/core": "7.23.7",
60
- "@babel/preset-env": "7.23.8",
59
+ "@babel/core": "7.23.9",
60
+ "@babel/preset-env": "7.23.9",
61
61
  "@babel/preset-react": "7.23.3",
62
62
  "@babel/preset-typescript": "7.23.3",
63
63
  "@jest/globals": "29.7.0",
64
- "@storybook/addon-essentials": "7.6.10",
65
- "@storybook/addon-interactions": "7.6.10",
66
- "@storybook/addon-links": "7.6.10",
67
- "@storybook/addon-mdx-gfm": "7.6.10",
68
- "@storybook/blocks": "7.6.10",
69
- "@storybook/react": "7.6.10",
70
- "@storybook/react-webpack5": "7.6.10",
71
- "@storybook/test": "7.6.10",
64
+ "@storybook/addon-essentials": "7.6.12",
65
+ "@storybook/addon-interactions": "7.6.12",
66
+ "@storybook/addon-links": "7.6.12",
67
+ "@storybook/addon-mdx-gfm": "7.6.12",
68
+ "@storybook/blocks": "7.6.12",
69
+ "@storybook/react": "7.6.12",
70
+ "@storybook/react-webpack5": "7.6.12",
71
+ "@storybook/test": "7.6.12",
72
72
  "@testing-library/dom": "9.3.4",
73
- "@testing-library/jest-dom": "6.2.1",
74
- "@testing-library/react": "14.1.2",
73
+ "@testing-library/jest-dom": "6.4.2",
74
+ "@testing-library/react": "14.2.1",
75
75
  "@testing-library/user-event": "14.5.2",
76
- "@types/jest": "29.5.11",
77
- "@types/node": "20.11.5",
78
- "@types/react": "18.2.48",
76
+ "@types/jest": "29.5.12",
77
+ "@types/node": "20.11.16",
78
+ "@types/react": "18.2.55",
79
79
  "@types/react-dom": "18.2.18",
80
- "@typescript-eslint/eslint-plugin": "6.19.1",
80
+ "@typescript-eslint/eslint-plugin": "6.21.0",
81
81
  "autoprefixer": "10.4.17",
82
- "chromatic": "10.3.1",
82
+ "chromatic": "10.7.1",
83
83
  "classnames": "2.5.1",
84
84
  "cpx2": "7.0.1",
85
- "daisyui": "4.6.0",
85
+ "daisyui": "4.6.1",
86
86
  "eslint": "8.56.0",
87
87
  "eslint-config-prettier": "9.1.0",
88
88
  "eslint-config-standard": "17.1.0",
@@ -98,17 +98,17 @@
98
98
  "eslint-plugin-standard": "5.0.0",
99
99
  "eslint-plugin-storybook": "0.6.15",
100
100
  "eslint-plugin-unused-imports": "3.0.0",
101
- "husky": "8.0.3",
101
+ "husky": "9.0.10",
102
102
  "jest": "29.7.0",
103
103
  "jest-environment-jsdom": "29.7.0",
104
104
  "jest-junit": "16.0.0",
105
105
  "jest-transform-css": "6.0.1",
106
106
  "postcss-cli": "11.0.0",
107
- "prettier": "3.2.4",
107
+ "prettier": "3.2.5",
108
108
  "prop-types": "15.8.1",
109
109
  "react-dom": "18.2.0",
110
110
  "react-icons": "5.0.1",
111
- "storybook": "7.6.10",
111
+ "storybook": "7.6.12",
112
112
  "storybook-addon-themes": "6.1.0",
113
113
  "string-width": "7.1.0",
114
114
  "ts-jest": "29.1.2",