freemium-ui 2.0.91 → 2.1.0-alpha.1

package/lib/Radio.d.ts

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+import React$1 from 'react';
+import { RadioGroupProps as RadioGroupProps$1, RadioGroupContextValue } from '@radix-ui/react-radio-group';
+
+type RadioProps = Pick<RadioGroupProps$1, 'name' | 'disabled' | 'dir'> & Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue'> & {
+    /**
+     * Is the Radio button selected
+     */
+    checked?: boolean;
+    /**
+     * Whether disabled select
+     */
+    readOnly?: boolean;
+    /**
+     * Whether disabled select
+     */
+    isRequired?: boolean;
+    /**
+     * label for the radio button
+     */
+    label?: string;
+};
+interface RadioItemProps {
+    [key: string]: any;
+}
+type RadioGroupProps<T extends RadioItemProps = RadioItemProps> = Pick<RadioGroupProps$1, 'name' | 'disabled' | 'dir' | 'value' | 'defaultValue'> & Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue'> & {
+    /**
+     * Select options
+     */
+    options?: Array<T>;
+    /**
+     * Id accessor of radio button
+     */
+    idAccessor?: string;
+    /**
+     * Name accesssor of radio button
+     */
+    nameAccessor?: string;
+    /**
+     * Function to be called when the selected item changes
+     */
+    onChange?: RadioGroupContextValue['onValueChange'];
+    /**
+     * Whether disabled select
+     */
+    isRequired?: boolean;
+    /**
+     * Whether disabled select
+     */
+    readOnly?: boolean;
+    /**
+     * The description of the content
+     */
+    label?: string;
+    errorText?: string;
+    isErrored?: boolean;
+};
+
+/**
+ * Radio displays a radio button on the user interface and enables assigning a state (selected or deselected) to it. In the selected state, the button displayed is highlighted. fw-radio provides child elements for fw-radio-group, to populate the Radio Group component’s list.
+ */
+declare const Radio: ({ checked, className, disabled, id, isRequired, label, name, readOnly, ...htmlAttributes }: RadioProps) => React$1.JSX.Element;
+
+/**
+ * RadioGroup displays a group of options with radio buttons and enables selection of one option from the list.
+ */
+declare const RadioGroup: ({ options, defaultValue, idAccessor, nameAccessor, onChange, className, id, isErrored, errorText, disabled, isRequired, label, readOnly, value, ...props }: RadioGroupProps) => React$1.JSX.Element;
+
+export { Radio, RadioGroup, type RadioGroupProps, type RadioItemProps, type RadioProps };

package/lib/Radio.js

@@ -0,0 +1,10 @@
+export{R as Radio,a as RadioGroup}from"./RadioGroup-DM_Y48_b.js"
+;import"./styled-components.browser.esm-Bq2p-e5F.js";import"react"
+;import"./index-D8E8s0tV.js";import"./index-ByHJlnsx.js";import"react-dom"
+;import"./index-BnDw8kbT.js";import"./keyframes-PnzFl0I5.js"
+;import"./index-B9EcTy5B.js";import"./index-CeIB4COQ.js"
+;import"./index-BdTXfGkV.js";import"./index-DtILdK5l.js"
+;import"./index-Cjkk7z9c.js";import"./index-BxNZ3C71.js"
+;import"./index-BY9lf-do.js";import"./index-BROhcSiX.js"
+;import"./index-DtzckyT3.js";import"./index-Dy5ztCxm.js"
+;import"./ErrorText-Uvye7uop.js";

package/lib/RadioGroup-DM_Y48_b.js

@@ -0,0 +1,42 @@
+import{u as e,_ as n,a,e as r,b as o}from"./styled-components.browser.esm-Bq2p-e5F.js"
+;import i from"react";import{I as d,R as l,S as t}from"./index-D8E8s0tV.js"
+;import{$ as c,a as s,b as u}from"./index-B9EcTy5B.js"
+;import{E as m}from"./ErrorText-Uvye7uop.js"
+;var b,p,f,h,g,x=e.div(b||(b=n(["\n  direction: ",";\n"],["\n  direction: ",";\n"])),(function(e){
+return e.theme.direction
+})),v=e(c)(p||(p=n(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"]))),k=e(s)(f||(f=n(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  &::after {\n    content: '';\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: ",";\n  }\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  &::after {\n    content: '';\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: ",";\n  }\n"])),(function(e){
+var n=e.theme;return"dark"===n.mode?n.colors.common.black:n.colors.common.white
+})),y=e(u)(h||(h=n(["\n  background-color: ",";\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 1px solid transparent;\n  padding: 0;\n  margin: 0;\n  outline-offset: 3px;\n  direction: ",";\n  background-color: ",";\n  &[data-state='unchecked'] {\n    border-color: ",";\n    background-color: unset;\n  }\n  &[data-disabled] {\n    border-color: ",";\n    background: ",";\n  }\n  &:hover:not([data-disabled]) {\n    box-shadow: 0 0 0 3px ","30;\n  }\n"],["\n  background-color: ",";\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 1px solid transparent;\n  padding: 0;\n  margin: 0;\n  outline-offset: 3px;\n  direction: ",";\n  background-color: ",";\n  &[data-state='unchecked'] {\n    border-color: ",";\n    background-color: unset;\n  }\n  &[data-disabled] {\n    border-color: ",";\n    background: ",";\n  }\n  &:hover:not([data-disabled]) {\n    box-shadow: 0 0 0 3px ","30;\n  }\n"])),(function(e){
+var n=e.theme;return"dark"===n.mode?n.colors.common.black:n.colors.common.white
+}),(function(e){return e.theme.direction}),(function(e){
+return e.theme.colors.common.accent}),(function(e){
+return e.theme.colors.border.hover}),(function(e){
+return e.theme.colors.border.disabled}),(function(e){var n=e.theme
+;return"linear-gradient\n        (0deg, #cfd7df, #cfd7df),\n      linear-gradient(0deg, ".concat(n.colors.fill.medium,", ").concat(n.colors.fill.medium,")")
+}),(function(e){return e.theme.colors.border.hover
+})),E=e.div(g||(g=n(["\n  display: flex;\n  align-items: center;\n  direction: ",";\n"],["\n  display: flex;\n  align-items: center;\n  direction: ",";\n"])),(function(e){
+return e.theme.direction})),R=function(e){
+var n=e.checked,t=e.className,c=e.disabled,s=e.id,u=e.isRequired,m=e.label,b=e.name,p=e.readOnly,f=a(e,["checked","className","disabled","id","isRequired","label","name","readOnly"]),h=r()
+;return i.createElement(v,o({
+className:"RadioGroupRoot ".concat(null!=t?t:"").trim(),id:s,name:b,
+"aria-label":m||"Radio button",value:n?"default":"",required:u,disabled:c,
+"aria-readonly":p,dir:h.direction},f),i.createElement(E,null,i.createElement(y,{
+checked:n,"aria-checked":n,className:"RadioGroupItem",disabled:c,
+"aria-readonly":p,value:"default",id:"default"},i.createElement(k,{
+className:"RadioGroupIndicator"})),m&&i.createElement(d,{className:"RadioLabel",
+disabled:c,"aria-readonly":p,"aria-label":m,htmlFor:s
+},m,m&&u&&i.createElement(l,null,"*"))))},N=function(e){
+var n=e.options,c=e.defaultValue,s=e.idAccessor,u=void 0===s?"id":s,b=e.nameAccessor,p=void 0===b?"name":b,f=e.onChange,h=e.className,g=e.id,R=e.isErrored,N=e.errorText,w=e.disabled,G=e.isRequired,j=e.label,q=e.readOnly,I=e.value,A=a(e,["options","defaultValue","idAccessor","nameAccessor","onChange","className","id","isErrored","errorText","disabled","isRequired","label","readOnly","value"]),C=r()
+;return i.createElement(x,null,j&&i.createElement(t,{id:g,
+className:"input-label"
+},j,j&&G&&i.createElement(l,null,"*")),i.createElement(v,o({defaultValue:c,
+value:I,onValueChange:function(e){q||w||null==f||f(e)},"aria-readonly":q,id:g,
+"aria-label":j||"Radio Group","aria-labelledby":j?g:void 0,
+className:"RadioGroupRoot ".concat(null!=h?h:"").trim(),dir:C.direction
+},A),null==n?void 0:n.map((function(e){return i.createElement(E,{
+key:null==e?void 0:e[u],className:"RadioContainer"},i.createElement(y,{
+className:"RadioGroupItem",disabled:e.disabled,value:null==e?void 0:e[u],
+id:null==e?void 0:e[u],"aria-label":null==e?void 0:e[p]},i.createElement(k,{
+className:"RadioGroupIndicator"})),i.createElement(d,{className:"RadioLabel",
+disabled:e.disabled,htmlFor:null==e?void 0:e[u]},null==e?void 0:e[p]))
+}))),R&&N&&i.createElement(m,null,N))};export{R,N as a};