@creativecodeco/ui 0.2.0 → 0.3.0

package/lib/index.d.ts

@@ -3,5 +3,5 @@ export * from './theme';
 export * from './ui/components';
 export * from './ui/forms';
 export * from './ui/provider';
-export * from './types';
+export type * from './types';
 export * from './utils';

package/lib/index.js

@@ -3,5 +3,4 @@ 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/main.css

@@ -4,4 +4,5 @@
 
 @import './avatar.css';
 @import './checkbox.css';
+@import './radio.css';
 @import './text-box.css';

package/lib/theme/css/radio.css

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

package/lib/theme/main.css

@@ -658,6 +658,11 @@ html {
     color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
   }
 
+  .radio-primary:hover {
+    --tw-border-opacity: 1;
+    border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
+  }
+
   .table tr.hover:hover,
   .table tr.hover:nth-child(even):hover {
     --tw-bg-opacity: 1;
@@ -1329,6 +1334,23 @@ html {
   box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset,
       0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset;
 }
+.radio-primary {
+  --chkbg: var(--p);
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
+}
+.radio-primary:focus-visible {
+  outline-color: var(--fallback-p,oklch(var(--p)/1));
+}
+.radio-primary:checked,
+    .radio-primary[aria-checked="true"] {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+}
 .radio:disabled {
   cursor: not-allowed;
   opacity: 0.2;
@@ -1553,6 +1575,12 @@ html {
 .cursor-pointer {
   cursor: pointer;
 }
+.justify-start {
+  justify-content: flex-start;
+}
+.gap-3 {
+  gap: 0.75rem;
+}
 .\!rounded {
   border-radius: 0.25rem !important;
 }
@@ -1807,6 +1835,183 @@ html {
   height: 2rem;
   width: 2rem;
 }
+@media (hover:hover) {
+
+  .radio-color-primary:hover {
+    --tw-border-opacity: 1;
+    border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
+  }
+}
+.radio-color-primary {
+  --chkbg: var(--p);
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
+}
+.radio-color-primary:focus-visible {
+  outline-color: var(--fallback-p,oklch(var(--p)/1));
+}
+.radio-color-primary:checked,.radio-color-primary[aria-checked="true"] {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+}
+@media (hover:hover) {
+
+  .radio-color-secondary:hover {
+    --tw-border-opacity: 1;
+    border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
+  }
+}
+.radio-color-secondary {
+  --chkbg: var(--s);
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
+}
+.radio-color-secondary:focus-visible {
+  outline-color: var(--fallback-s,oklch(var(--s)/1));
+}
+.radio-color-secondary:checked,.radio-color-secondary[aria-checked="true"] {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
+}
+@media (hover:hover) {
+
+  .radio-color-accent:hover {
+    --tw-border-opacity: 1;
+    border-color: var(--fallback-a,oklch(var(--a)/var(--tw-border-opacity)));
+  }
+}
+.radio-color-accent {
+  --chkbg: var(--a);
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-a,oklch(var(--a)/var(--tw-border-opacity)));
+}
+.radio-color-accent:focus-visible {
+  outline-color: var(--fallback-a,oklch(var(--a)/1));
+}
+.radio-color-accent:checked,.radio-color-accent[aria-checked="true"] {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-a,oklch(var(--a)/var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-a,oklch(var(--a)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
+}
+@media (hover:hover) {
+
+  .radio-color-success:hover {
+    --tw-border-opacity: 1;
+    border-color: var(--fallback-su,oklch(var(--su)/var(--tw-border-opacity)));
+  }
+}
+.radio-color-success {
+  --chkbg: var(--su);
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-su,oklch(var(--su)/var(--tw-border-opacity)));
+}
+.radio-color-success:focus-visible {
+  outline-color: var(--fallback-su,oklch(var(--su)/1));
+}
+.radio-color-success:checked,.radio-color-success[aria-checked="true"] {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-su,oklch(var(--su)/var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
+}
+@media (hover:hover) {
+
+  .radio-color-warning:hover {
+    --tw-border-opacity: 1;
+    border-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-border-opacity)));
+  }
+}
+.radio-color-warning {
+  --chkbg: var(--wa);
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-border-opacity)));
+}
+.radio-color-warning:focus-visible {
+  outline-color: var(--fallback-wa,oklch(var(--wa)/1));
+}
+.radio-color-warning:checked,.radio-color-warning[aria-checked="true"] {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
+}
+@media (hover:hover) {
+
+  .radio-color-info:hover {
+    --tw-border-opacity: 1;
+    border-color: var(--fallback-in,oklch(var(--in)/var(--tw-border-opacity)));
+  }
+}
+.radio-color-info {
+  --chkbg: var(--in);
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-in,oklch(var(--in)/var(--tw-border-opacity)));
+}
+.radio-color-info:focus-visible {
+  outline-color: var(--fallback-in,oklch(var(--in)/1));
+}
+.radio-color-info:checked,.radio-color-info[aria-checked="true"] {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-in,oklch(var(--in)/var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
+}
+@media (hover:hover) {
+
+  .radio-color-error:hover {
+    --tw-border-opacity: 1;
+    border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
+  }
+}
+.radio-color-error {
+  --chkbg: var(--er);
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
+}
+.radio-color-error:focus-visible {
+  outline-color: var(--fallback-er,oklch(var(--er)/1));
+}
+.radio-color-error:checked,.radio-color-error[aria-checked="true"] {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
+}
+[type="radio"].radio-size-xs {
+  height: 1rem;
+  width: 1rem;
+}
+[type="radio"].radio-size-sm {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+[type="radio"].radio-size-md {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+[type="radio"].radio-size-lg {
+  height: 2rem;
+  width: 2rem;
+}
 .text-box-size-xs {
   height: 1.5rem;
   padding-left: 0.5rem;

package/lib/types/ui/base/constants.types.d.ts

@@ -1 +1,3 @@
 export type SizeType = 'xs' | 'sm' | 'md' | 'lg';
+export type ColorType = 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error';
+export type PositionType = 'left' | 'right';

package/lib/types/ui/components/avatar.types.d.ts

@@ -1,4 +1,4 @@
-import { SizeType } from '../../../types';
+import type { SizeType } from '../../../types';
 export interface AvatarType {
     src: string;
     size?: SizeType;

package/lib/types/ui/forms/checkbox.types.d.ts

@@ -1,11 +1,17 @@
-import type { ErrorType, SizeType } from '../../../types';
-export interface CheckboxType extends ErrorType {
+import type { ColorType, ErrorType, PositionType, SizeType } from '../../../types';
+export interface CheckboxItemType {
+    label?: string;
+    checked?: boolean;
+    value: string | number;
+}
+export interface CheckboxType extends CheckboxItemType, ErrorType {
     name: string;
     label?: string;
     checked?: boolean;
-    position?: 'left' | 'right';
-    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error';
+    position?: PositionType;
+    color?: ColorType;
     size?: SizeType;
     disabled?: boolean;
+    onChange?: (value: CheckboxItemType) => void;
 }
 export type CheckboxRef = HTMLInputElement;

package/lib/types/ui/forms/index.d.ts

@@ -1,3 +1,4 @@
 export type * from './checkbox.types';
 export type * from './dropdown.types';
+export type * from './radio.types';
 export type * from './text-box.types';

package/lib/types/ui/forms/radio.types.d.ts

@@ -0,0 +1,20 @@
+import type { ColorType, ErrorType, PositionType, SizeType } from '../../../types';
+export interface RadioItemType {
+    label?: string;
+    checked?: boolean;
+    value?: string | number;
+}
+export interface RadioType extends RadioItemType, ErrorType {
+    name: string;
+    label?: string;
+    checked?: boolean;
+    position?: PositionType;
+    color?: ColorType;
+    size?: SizeType;
+    disabled?: boolean;
+    onChange?: (value: RadioItemType) => void;
+}
+export type RadioRef = HTMLInputElement;
+export interface RadioListType extends RadioType {
+    options: Omit<RadioType, 'name'>[];
+}

package/lib/types/ui/forms/radio.types.js

@@ -0,0 +1 @@
+export {};

package/lib/ui/forms/checkbox/checkbox.component.js

@@ -1,11 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import cls from 'classnames';
-const Checkbox = forwardRef(({ name, label, isError, checked, disabled, error, position = 'left', color, size = 'md', ...otherProps }, ref) => {
-    const checkbox = () => (_jsx("input", { id: name, name: name, "data-testid": name, ref: ref, type: 'checkbox', checked: checked, className: cls('checkbox', {
+const Checkbox = forwardRef(({ name, label, isError, disabled, error, position = 'left', color, size = 'md', checked, value, onChange, ...otherProps }, ref) => {
+    const handleChange = (e) => {
+        onChange?.({
+            isChecked: e.target.checked,
+            value,
+            label
+        });
+    };
+    const checkbox = () => (_jsx("input", { id: name, name: name, "data-testid": name, ref: ref, type: 'checkbox', className: cls('checkbox', {
             [`checkbox-color-${color}`]: color,
             [`checkbox-size-${size}`]: size
-        }), disabled: disabled, ...otherProps }));
+        }), disabled: disabled, checked: checked, onChange: handleChange, ...otherProps }));
     return (_jsxs(_Fragment, { children: [_jsxs("label", { className: cls('label', {
                     'cursor-pointer': !disabled,
                     'cursor-not-allowed': disabled

package/lib/ui/forms/index.d.ts

@@ -1,3 +1,5 @@
 export * from '../../ui/forms/checkbox';
 export * from '../../ui/forms/dropdown';
+export * from '../../ui/forms/radio';
+export * from '../../ui/forms/radio-list';
 export * from '../../ui/forms/text-box';

package/lib/ui/forms/index.js

@@ -1,3 +1,5 @@
 export * from '../../ui/forms/checkbox';
 export * from '../../ui/forms/dropdown';
+export * from '../../ui/forms/radio';
+export * from '../../ui/forms/radio-list';
 export * from '../../ui/forms/text-box';

package/lib/ui/forms/radio/index.d.ts

@@ -0,0 +1,2 @@
+import Radio from './radio.component';
+export { Radio };

package/lib/ui/forms/radio/index.js

@@ -0,0 +1,2 @@
+import Radio from './radio.component';
+export { Radio };

package/lib/ui/forms/radio/radio.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { RadioType } from '../../../types';
+declare const Radio: React.ForwardRefExoticComponent<RadioType & React.RefAttributes<HTMLInputElement>>;
+export default Radio;

package/lib/ui/forms/radio/radio.component.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import cls from 'classnames';
+const Radio = forwardRef(({ name, label, isError, disabled, error, position = 'left', color, size = 'md', checked, value, onChange, ...otherProps }, ref) => {
+    const handleChange = (e) => {
+        onChange?.({
+            isChecked: e.target.checked,
+            value,
+            label
+        });
+    };
+    const radio = () => (_jsx("input", { ref: ref, id: name, name: name, "data-testid": name, type: 'radio', className: cls('radio', {
+            [`radio-color-${color}`]: color,
+            [`radio-size-${size}`]: size
+        }), disabled: disabled, checked: checked, onChange: handleChange, ...otherProps }));
+    return (_jsxs(_Fragment, { children: [_jsxs("label", { className: cls('label justify-start gap-3', {
+                    'cursor-pointer': !disabled,
+                    'cursor-not-allowed': disabled
+                }), children: [position === 'left' && radio(), label && _jsx("span", { className: 'label-text', children: label }), position === 'right' && radio()] }), isError && _jsx("p", { className: 'text-red-500', children: error })] }));
+});
+export default Radio;

package/lib/ui/forms/radio-list/index.d.ts

@@ -0,0 +1,2 @@
+import RadioList from './radio-list.component';
+export { RadioList };

package/lib/ui/forms/radio-list/index.js

@@ -0,0 +1,2 @@
+import RadioList from './radio-list.component';
+export { RadioList };

package/lib/ui/forms/radio-list/radio-list.component.d.ts

@@ -0,0 +1,3 @@
+import type { RadioListType } from '../../../types';
+declare const RadioList: ({ name, options, isError, error, value, ...otherOptions }: RadioListType) => import("react/jsx-runtime").JSX.Element | undefined;
+export default RadioList;

package/lib/ui/forms/radio-list/radio-list.component.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio } from '../../../ui/forms';
+const RadioList = ({ name, options, isError, error, value, ...otherOptions }) => {
+    if (!options || options.length === 0) {
+        return;
+    }
+    return (_jsxs("div", { className: 'form-control', children: [options.map((option) => (_jsx(Radio, { name: name, ...option, ...otherOptions, checked: String(option.value) === String(value) }, option.value))), isError && _jsx("p", { className: 'text-red-500', children: error })] }));
+};
+export default RadioList;

package/package.json

@@ -10,7 +10,7 @@
     "framework design",
     "design system"
   ],
-  "version": "0.2.0",
+  "version": "0.3.0",
   "homepage": "https://github.com/creativecodeco/ui",
   "author": {
     "name": "John Toro",