@dhasdk/simple-ui 1.0.65 → 1.0.66

package/README.md

@@ -53,6 +53,8 @@ Tooltip
 
 ## Changelog
 
+1.0.66 - added **`inline`** prop to **`RadioGroup`**, allows for a flex-row layout of RadioGroup items as opposed to the default flex-column layout
+
 1.0.65 - changed **label** on **`Input`** component to a **`ReactNode`** type. Also updated **aria-label** 
 handling logic to compensate (dev can enter **aria-label** manually, if not present and label is of 
 type string, will use **label** as the **aria-label**).
@@ -1437,6 +1439,7 @@ Full list of props below
 | classNameInput  | **`string`**  | Yes | see below  | a group of alternate css classes that can be specified by the developer for use in the input element of the component.  | 
 | classNameLabel  | **`string`**  | Yes | see below | a group of alternate css classes that can be specified by the developer for use in the label element of the component.  | 
 | dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the fieldset element that wraps RadioGroup for testing purposes |
+| inline | boolean | Yes | false | If **`true`**, the radio group is layed out in a flex-row instead of a flex-column. |
 | method | (id: string, value: string) => void  | Yes | undefined | A callback method that is called anytime a radio item is clicked on. The value **`method={(id, value) => console.log("id/value: " + id + "/" + value)}`** might print something like **id/value: 2/value-2** |
 | options  | **`string`**  | No |  | Array of RadioOption objects that define the options available for selection. | 
 | selectedId  | **`string`**  | Yes |  | A string value matching one of the passed in **`id`** values in the options array. This **`selectedId`** will be pre-selected. |
@@ -1445,11 +1448,21 @@ Full list of props below
 
 - label:
   
-  **`flex items-center gap-1 cursor-pointer border border-black disabled ? opacity-50 cursor-not-allowed`**
+```tsx
+twMerge(
+    "flex items-center gap-1 cursor-pointer",
+    inline ? "mr-4 mb-1" : "mb-2",
+    disabled ? "opacity-50 cursor-not-allowed" : "",
+    classNameLabel
+  )
+```
 
 - input:
 
-  **`appearance-none w-4 h-4 rounded-[50%] border border-black bg-clip-content checked:bg-black checked:p-[2.5px] checked:border-black`**
+```tsx
+  appearance-none w-4 h-4 rounded-[50%] border border-black bg-clip-content 
+  checked:bg-black checked:p-[2.5px] checked:border-black
+```
 
 
 2. Options interface