@loadsmart/loadsmart-ui - npm Package Compare versions

Comparing version 0.9.0 to 0.10.0

dist/components/Button/Button.d.ts

 import React, { ButtonHTMLAttributes, ReactNode } from 'react';
 import type ColorScheme from 'utils/types/ColorScheme';
-interface WithSizeProps {
-    size?: 'small' | 'default' | 'large';
+interface WithScaleProps {
+    scale?: 'small' | 'default' | 'large';
 }
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, WithSizeProps {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, WithScaleProps {
     className?: string;
@@ -13,2 +13,3 @@ leading?: ReactNode;
 }
+export declare const BaseButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
@@ -15,0 +16,0 @@ export declare const Caret: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;

dist/components/Button/index.d.ts

@@ -1,2 +0,2 @@
-export { default as Button, SelectorButton, IconButton } from './Button';
+export { default as Button, SelectorButton, IconButton, BaseButton } from './Button';
 export type { ButtonProps } from './Button';

dist/components/Checkbox/Checkbox.d.ts

@@ -1,15 +0,6 @@
-import { InputHTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
 import ColorScheme from 'utils/types/ColorScheme';
-interface WithStyleProps {
-    scale?: 'small' | 'default';
-    scheme?: ColorScheme;
-}
-interface LabelContainerProps extends LabelHTMLAttributes<HTMLLabelElement>, WithStyleProps {
-    selector: ReactNode;
+import { SelectionStyleProps } from 'common/SelectionWrapper';
+export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement>, SelectionStyleProps {
     leading?: ReactNode;
-    trailing?: ReactNode;
-}
-export declare function LabelContainer({ selector, children, leading, trailing, ...others }: LabelContainerProps): JSX.Element;
-export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement>, WithStyleProps {
-    leading?: ReactNode;
     scheme?: ColorScheme;
@@ -16,0 +7,0 @@ trailing?: ReactNode;

dist/index.d.ts

@@ -5,1 +5,3 @@ export { Button, SelectorButton, IconButton } from './components/Button';
 export type { CheckboxProps } from './components/Checkbox';
+export { Radio } from './components/Radio';
+export type { RadioProps } from './components/Radio';

dist/theming/index.js

@@ -1,2 +0,2 @@
-export { e as ThemeAlice, f as ThemeLoadsmart, g as default } from '../index-1498062f.js';
+export { e as ThemeAlice, f as ThemeLoadsmart, g as default } from '../index-940494d9.js';
 //# sourceMappingURL=index.js.map

dist/theming/themes/alice.theme.d.ts

@@ -135,2 +135,28 @@ export declare const OPACITIES: {
     'checkbox-dark-selector-border-color--disabled': string | number;
+    'radio-color': string | number;
+    'radio-font-weight': string | number;
+    'radio-font-size': string | number;
+    'radio-selector-border-radius': string | number;
+    'radio-selector-size': string;
+    'radio-selector-outline': string | number;
+    'radio-small-font-size': string | number;
+    'radio-small-selector-size': string;
+    'radio-selector-background': string | number;
+    'radio-selector-background--hover': string | number;
+    'radio-selector-background--focus': string | number;
+    'radio-selector-background--disabled': string | number;
+    'radio-selector-border-color': string | number;
+    'radio-selector-border-color--hover': string | number;
+    'radio-selector-border-color--focus': string | number;
+    'radio-selector-border-color--disabled': string | number;
+    'radio-selector-border-color--checked': string | number;
+    'radio-dark-color': string | number;
+    'radio-dark-selector-background': string | number;
+    'radio-dark-selector-background--hover': string | number;
+    'radio-dark-selector-background--focus': string | number;
+    'radio-dark-selector-background--disabled': string | number;
+    'radio-dark-selector-border-color': string | number;
+    'radio-dark-selector-border-color--hover': string | number;
+    'radio-dark-selector-border-color--focus': string | number;
+    'radio-dark-selector-border-color--disabled': string | number;
     'space-none': number;
@@ -137,0 +163,0 @@ 'space-2xs': string;

dist/theming/themes/loadsmart.theme.d.ts

@@ -202,2 +202,28 @@ export declare const COLORS: {
     'checkbox-dark-selector-border-color--disabled': string | number;
+    'radio-color': string | number;
+    'radio-font-weight': string | number;
+    'radio-font-size': string | number;
+    'radio-selector-border-radius': string | number;
+    'radio-selector-size': string;
+    'radio-selector-outline': string | number;
+    'radio-small-font-size': string | number;
+    'radio-small-selector-size': string;
+    'radio-selector-background': string | number;
+    'radio-selector-background--hover': string | number;
+    'radio-selector-background--focus': string | number;
+    'radio-selector-background--disabled': string | number;
+    'radio-selector-border-color': string | number;
+    'radio-selector-border-color--hover': string | number;
+    'radio-selector-border-color--focus': string | number;
+    'radio-selector-border-color--disabled': string | number;
+    'radio-selector-border-color--checked': string | number;
+    'radio-dark-color': string | number;
+    'radio-dark-selector-background': string | number;
+    'radio-dark-selector-background--hover': string | number;
+    'radio-dark-selector-background--focus': string | number;
+    'radio-dark-selector-background--disabled': string | number;
+    'radio-dark-selector-border-color': string | number;
+    'radio-dark-selector-border-color--hover': string | number;
+    'radio-dark-selector-border-color--focus': string | number;
+    'radio-dark-selector-border-color--disabled': string | number;
     'space-none': number;
@@ -204,0 +230,0 @@ 'space-2xs': string;

dist/tools/conditional.d.ts

@@ -0,3 +1,30 @@
+/**
+ * Utility to generate style/class name conditions based on a components props.
+ * Expected prop values can be a single value or an array of values.
+ * @example
+ * ```jsx
+ * prop({
+ *  'prop-a': true, // checks `props['prop-a']` === true`
+ *  'props-b': [1, 2], // checks `toArray([1, 2]).includes(props['prop-b'])`
+ * })
+ * ```
+ * @param {...Object} conditions
+ * @returns {(props: Object) => string} Returns function that consumes component props.
+ */
 export declare function prop(conditions: any): (props: any) => boolean;
-export declare function conditional(...conditions: any[]): (props: any) => string;
+/**
+ * Concatenate style properties or class names conditionally.
+ * Conditions can be functions that consume components props,
+ * objects, strings, or numbers (that will be coerced to strings).
+ * @example
+ * ```jsx
+ * conditional(1, 'some-class', {
+ *  'class-a': true,
+ *  'class-b': (props) => props.showClassB,
+ * }, (props) => props.className)
+ * ```
+ * @param conditions
+ * @returns {(props: Object) => string} Returns function that consumes component props.
+ */
+declare function conditional(...conditions: any[]): (props: any) => string;
 export default conditional;

dist/tools/index.js

@@ -1,3 +0,3 @@
-export { c as conditional, p as prop } from '../conditional-04302329.js';
-import '../index-1498062f.js';
+export { c as conditional, p as prop } from '../conditional-cb4666c4.js';
+import '../index-940494d9.js';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Loadsmart UI",
@@ -5,0 +5,0 @@ "main": "dist",

src/theming/themes/alice.theme.ts

@@ -294,4 +294,41 @@ import {
   'checkbox-dark-selector-border-color--disabled': color('neutral-lighter'),
+
+  // radio
+  'radio-color': color('accent'),
+  'radio-font-weight': font.weight('medium'),
+  'radio-font-size': font.size('4'),
+
+  'radio-selector-border-radius': border.radius('circle'),
+  'radio-selector-size': rem('24px'),
+  'radio-selector-outline': shadow('glow-primary'),
+
+  'radio-small-font-size': font.size('5'),
+  'radio-small-selector-size': rem('16px'),
+
+  'radio-selector-background': color('neutral-lightest'),
+  'radio-selector-background--hover': color('neutral-lightest'),
+  'radio-selector-background--focus': color('neutral-lightest'),
+  'radio-selector-background--disabled': color('neutral-light'),
+
+  'radio-selector-border-color': color('neutral-darker'),
+  'radio-selector-border-color--hover': color('accent'),
+  'radio-selector-border-color--focus': color('accent'),
+  'radio-selector-border-color--disabled': color('neutral-darker'),
+
+  'radio-selector-border-color--checked': color('accent'),
+
+  // radio dark
+  'radio-dark-color': color('neutral-lighter'),
+
+  'radio-dark-selector-background': color('neutral-darker'),
+  'radio-dark-selector-background--hover': color('neutral-darker'),
+  'radio-dark-selector-background--focus': color('neutral-darker'),
+  'radio-dark-selector-background--disabled': color('neutral-neutral'),
+
+  'radio-dark-selector-border-color': color('neutral-lighter'),
+  'radio-dark-selector-border-color--hover': color('accent'),
+  'radio-dark-selector-border-color--focus': color('accent'),
+  'radio-dark-selector-border-color--disabled': color('neutral-lighter'),
 }
 
 export default alice

src/theming/themes/loadsmart.theme.ts

@@ -290,4 +290,41 @@ import {
   'checkbox-dark-selector-border-color--disabled': color('neutral-lighter'),
+
+  // radio
+  'radio-color': color('accent'),
+  'radio-font-weight': font.weight('medium'),
+  'radio-font-size': font.size('4'),
+
+  'radio-selector-border-radius': border.radius('circle'),
+  'radio-selector-size': rem('24px'),
+  'radio-selector-outline': shadow('glow-primary'),
+
+  'radio-small-font-size': font.size('5'),
+  'radio-small-selector-size': rem('16px'),
+
+  'radio-selector-background': color('neutral-lightest'),
+  'radio-selector-background--hover': color('neutral-lightest'),
+  'radio-selector-background--focus': color('neutral-lightest'),
+  'radio-selector-background--disabled': color('neutral-light'),
+
+  'radio-selector-border-color': color('neutral-darker'),
+  'radio-selector-border-color--hover': color('accent'),
+  'radio-selector-border-color--focus': color('accent'),
+  'radio-selector-border-color--disabled': color('neutral-darker'),
+
+  'radio-selector-border-color--checked': color('accent'),
+
+  // radio dark
+  'radio-dark-color': color('neutral-lighter'),
+
+  'radio-dark-selector-background': color('neutral-darker'),
+  'radio-dark-selector-background--hover': color('neutral-darker'),
+  'radio-dark-selector-background--focus': color('neutral-darker'),
+  'radio-dark-selector-background--disabled': color('neutral-neutral'),
+
+  'radio-dark-selector-border-color': color('neutral-lighter'),
+  'radio-dark-selector-border-color--hover': color('accent'),
+  'radio-dark-selector-border-color--focus': color('accent'),
+  'radio-dark-selector-border-color--disabled': color('neutral-lighter'),
 }
 
 export default loadsmart

src/tools/conditional.ts

@@ -9,2 +9,15 @@ /* eslint-disable */
 
+/**
+ * Utility to generate style/class name conditions based on a components props.
+ * Expected prop values can be a single value or an array of values.
+ * @example
+ * ```jsx
+ * prop({
+ *  'prop-a': true, // checks `props['prop-a']` === true`
+ *  'props-b': [1, 2], // checks `toArray([1, 2]).includes(props['prop-b'])`
+ * })
+ * ```
+ * @param {...Object} conditions
+ * @returns {(props: Object) => string} Returns function that consumes component props.
+ */
 export function prop(conditions) {
@@ -40,8 +53,2 @@ const safeConditions = toArray(conditions)
 
-/**
- *
- * @param {*} conditions
- * @param {*} props
- * @returns {string[]}
- */
 function handleConditionObject(condition, props) {
@@ -68,3 +75,17 @@ const keys = Object.keys(condition || {})
 
-export function conditional(...conditions) {
+/**
+ * Concatenate style properties or class names conditionally.
+ * Conditions can be functions that consume components props,
+ * objects, strings, or numbers (that will be coerced to strings).
+ * @example
+ * ```jsx
+ * conditional(1, 'some-class', {
+ *  'class-a': true,
+ *  'class-b': (props) => props.showClassB,
+ * }, (props) => props.className)
+ * ```
+ * @param conditions
+ * @returns {(props: Object) => string} Returns function that consumes component props.
+ */
+function conditional(...conditions) {
   return function (props) {
@@ -71,0 +92,0 @@ let classes = []

No alert changes

Improved metrics

Total package byte prevSize

525435

increased by7.24%

Number of package files

102

increased by9.68%

Lines of code

7833

increased by8.78%

No dependency changes