@dimaan/ui 0.0.9 → 0.0.10

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.
package/dist/index.js CHANGED
@@ -5,6 +5,7 @@ import { twMerge } from 'tailwind-merge';
5
5
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
6
6
  import { Loader2, Check, Minus, ChevronDown, ChevronUp, ChevronLeft, Menu, ChevronsUpDown, ChevronRight } from 'lucide-react';
7
7
  import { useFormContext, Controller } from 'react-hook-form';
8
+ import * as RadixRadioGroup from '@radix-ui/react-radio-group';
8
9
  import * as RadixSelect from '@radix-ui/react-select';
9
10
  import * as RadixSwitch from '@radix-ui/react-switch';
10
11
 
@@ -911,86 +912,67 @@ var inputBaseClass = "group/input relative inline-flex w-full items-center text-
911
912
  var Input = forwardRef(function Input2({
912
913
  variant = "default",
913
914
  inputSize = "md",
914
- label,
915
- helperText,
916
- error,
917
915
  leadingIcon,
918
916
  trailingIcon,
919
- fullWidth = true,
920
917
  type = "text",
921
918
  id,
922
919
  className,
923
920
  wrapperClassName,
924
- containerClassName,
925
- "aria-invalid": ariaInvalidProp,
926
- "aria-describedby": ariaDescribedByProp,
921
+ "aria-invalid": ariaInvalid,
922
+ "aria-describedby": ariaDescribedBy,
927
923
  disabled,
928
924
  ...props
929
925
  }, ref) {
930
926
  const generatedId = useId();
931
927
  const inputId = id ?? generatedId;
932
- const helperId = `${inputId}-helper`;
933
- const errorId = `${inputId}-error`;
934
- const hasError = error !== void 0 && error !== null && error !== false;
935
- const ariaInvalid = ariaInvalidProp ?? (hasError ? true : void 0);
936
- const describedByIds = [
937
- ariaDescribedByProp,
938
- hasError ? errorId : null,
939
- !hasError && helperText ? helperId : null
940
- ].filter(Boolean).join(" ");
941
- const ariaDescribedBy = describedByIds.length > 0 ? describedByIds : void 0;
942
- return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", fullWidth && "w-full", containerClassName), children: [
943
- label !== void 0 && label !== null && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "text-sm font-medium text-foreground select-none", children: label }),
944
- /* @__PURE__ */ jsxs(
945
- "div",
946
- {
947
- "data-slot": "input-wrapper",
948
- className: cn(
949
- inputBaseClass,
950
- inputVariantClass[variant],
951
- inputSizeClass[inputSize],
952
- wrapperClassName
928
+ return /* @__PURE__ */ jsxs(
929
+ "div",
930
+ {
931
+ "data-slot": "input-wrapper",
932
+ className: cn(
933
+ inputBaseClass,
934
+ inputVariantClass[variant],
935
+ inputSizeClass[inputSize],
936
+ wrapperClassName
937
+ ),
938
+ "aria-invalid": ariaInvalid,
939
+ "data-disabled": disabled ? "true" : void 0,
940
+ children: [
941
+ leadingIcon ? /* @__PURE__ */ jsx(
942
+ "span",
943
+ {
944
+ "aria-hidden": "true",
945
+ className: "inline-flex h-4 w-4 items-center justify-center text-muted-foreground",
946
+ children: leadingIcon
947
+ }
948
+ ) : null,
949
+ /* @__PURE__ */ jsx(
950
+ "input",
951
+ {
952
+ ref,
953
+ id: inputId,
954
+ type,
955
+ disabled,
956
+ "aria-invalid": ariaInvalid,
957
+ "aria-describedby": ariaDescribedBy,
958
+ className: cn(
959
+ "h-full w-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
960
+ className
961
+ ),
962
+ ...props
963
+ }
953
964
  ),
954
- "aria-invalid": ariaInvalid,
955
- "data-disabled": disabled ? "true" : void 0,
956
- children: [
957
- leadingIcon ? /* @__PURE__ */ jsx(
958
- "span",
959
- {
960
- "aria-hidden": "true",
961
- className: "inline-flex h-4 w-4 items-center justify-center text-muted-foreground",
962
- children: leadingIcon
963
- }
964
- ) : null,
965
- /* @__PURE__ */ jsx(
966
- "input",
967
- {
968
- ref,
969
- id: inputId,
970
- type,
971
- disabled,
972
- "aria-invalid": ariaInvalid,
973
- "aria-describedby": ariaDescribedBy,
974
- className: cn(
975
- "h-full w-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
976
- className
977
- ),
978
- ...props
979
- }
980
- ),
981
- trailingIcon ? /* @__PURE__ */ jsx(
982
- "span",
983
- {
984
- "aria-hidden": "true",
985
- className: "inline-flex h-4 w-4 items-center justify-center text-muted-foreground",
986
- children: trailingIcon
987
- }
988
- ) : null
989
- ]
990
- }
991
- ),
992
- hasError ? /* @__PURE__ */ jsx("p", { id: errorId, className: "text-xs text-destructive", children: error }) : helperText ? /* @__PURE__ */ jsx("p", { id: helperId, className: "text-xs text-muted-foreground", children: helperText }) : null
993
- ] });
965
+ trailingIcon ? /* @__PURE__ */ jsx(
966
+ "span",
967
+ {
968
+ "aria-hidden": "true",
969
+ className: "inline-flex h-4 w-4 items-center justify-center text-muted-foreground",
970
+ children: trailingIcon
971
+ }
972
+ ) : null
973
+ ]
974
+ }
975
+ );
994
976
  });
995
977
  function LanguageSwitcher({
996
978
  languages,
@@ -1030,6 +1012,131 @@ function LanguageSwitcher({
1030
1012
  );
1031
1013
  }
1032
1014
 
1015
+ // src/components/radio-group/radioGroupVariants.ts
1016
+ var radioItemSizeClass = {
1017
+ sm: "size-4",
1018
+ md: "size-5",
1019
+ lg: "size-6"
1020
+ };
1021
+ var radioIndicatorSizeClass = {
1022
+ sm: "size-1.5",
1023
+ md: "size-2",
1024
+ lg: "size-2.5"
1025
+ };
1026
+ var radioLabelSizeClass = {
1027
+ sm: "text-xs",
1028
+ md: "text-sm",
1029
+ lg: "text-base"
1030
+ };
1031
+ var radioItemBaseClass = "aspect-square shrink-0 rounded-full border border-input bg-background text-primary outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background hover:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 data-[state=checked]:border-primary";
1032
+ var radioIndicatorBaseClass = "flex h-full w-full items-center justify-center";
1033
+ var radioIndicatorDotClass = "rounded-full bg-primary";
1034
+ var radioOptionRowClass = "flex cursor-pointer items-start gap-2 has-[button:disabled]:cursor-not-allowed";
1035
+ var radioGroupBaseClass = "flex gap-3";
1036
+ var radioGroupOrientationClass = {
1037
+ vertical: "flex-col",
1038
+ horizontal: "flex-row flex-wrap"
1039
+ };
1040
+ var RadioGroup = forwardRef(function RadioGroup2({
1041
+ radioSize = "md",
1042
+ orientation = "vertical",
1043
+ value,
1044
+ defaultValue,
1045
+ onValueChange,
1046
+ onChange,
1047
+ onBlur,
1048
+ name,
1049
+ disabled,
1050
+ required,
1051
+ id,
1052
+ options,
1053
+ className,
1054
+ "aria-label": ariaLabel,
1055
+ "aria-labelledby": ariaLabelledBy,
1056
+ "aria-describedby": ariaDescribedBy,
1057
+ "aria-invalid": ariaInvalid,
1058
+ children
1059
+ }, ref) {
1060
+ const generatedId = useId();
1061
+ const groupId = id ?? generatedId;
1062
+ const handleValueChange = useCallback(
1063
+ (next) => {
1064
+ onValueChange?.(next);
1065
+ if (onChange) {
1066
+ const synthetic = {
1067
+ target: { value: next, name },
1068
+ currentTarget: { value: next, name },
1069
+ type: "change"
1070
+ };
1071
+ onChange(synthetic);
1072
+ }
1073
+ },
1074
+ [onValueChange, onChange, name]
1075
+ );
1076
+ return /* @__PURE__ */ jsx(
1077
+ RadixRadioGroup.Root,
1078
+ {
1079
+ ref,
1080
+ id: groupId,
1081
+ value,
1082
+ defaultValue,
1083
+ onValueChange: handleValueChange,
1084
+ onBlur,
1085
+ disabled,
1086
+ required,
1087
+ name,
1088
+ orientation,
1089
+ "aria-label": ariaLabel,
1090
+ "aria-labelledby": ariaLabelledBy,
1091
+ "aria-describedby": ariaDescribedBy,
1092
+ "aria-invalid": ariaInvalid,
1093
+ "data-slot": "radio-group",
1094
+ className: cn(radioGroupBaseClass, radioGroupOrientationClass[orientation], className),
1095
+ children: children ?? options?.map((opt) => /* @__PURE__ */ jsx(
1096
+ RadioGroupOptionRow,
1097
+ {
1098
+ option: opt,
1099
+ radioSize,
1100
+ groupId
1101
+ },
1102
+ opt.value
1103
+ ))
1104
+ }
1105
+ );
1106
+ });
1107
+ function RadioGroupOptionRow({ option, radioSize, groupId }) {
1108
+ const itemId = `${groupId}-${option.value}`;
1109
+ return /* @__PURE__ */ jsxs("label", { htmlFor: itemId, className: radioOptionRowClass, children: [
1110
+ /* @__PURE__ */ jsx(
1111
+ RadixRadioGroup.Item,
1112
+ {
1113
+ id: itemId,
1114
+ value: option.value,
1115
+ disabled: option.disabled,
1116
+ "data-slot": "radio-item",
1117
+ className: cn(radioItemBaseClass, radioItemSizeClass[radioSize], "mt-0.5"),
1118
+ children: /* @__PURE__ */ jsx(RadixRadioGroup.Indicator, { className: radioIndicatorBaseClass, children: /* @__PURE__ */ jsx("span", { className: cn(radioIndicatorDotClass, radioIndicatorSizeClass[radioSize]) }) })
1119
+ }
1120
+ ),
1121
+ /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 leading-tight", children: [
1122
+ /* @__PURE__ */ jsx("span", { className: cn("block font-medium text-foreground", radioLabelSizeClass[radioSize]), children: option.label }),
1123
+ option.description ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: option.description }) : null
1124
+ ] })
1125
+ ] });
1126
+ }
1127
+ var RadioGroupItem = forwardRef(function RadioGroupItem2({ className, radioSize = "md", ...props }, ref) {
1128
+ return /* @__PURE__ */ jsx(
1129
+ RadixRadioGroup.Item,
1130
+ {
1131
+ ref,
1132
+ "data-slot": "radio-item",
1133
+ className: cn(radioItemBaseClass, radioItemSizeClass[radioSize], className),
1134
+ ...props,
1135
+ children: /* @__PURE__ */ jsx(RadixRadioGroup.Indicator, { className: radioIndicatorBaseClass, children: /* @__PURE__ */ jsx("span", { className: cn(radioIndicatorDotClass, radioIndicatorSizeClass[radioSize]) }) })
1136
+ }
1137
+ );
1138
+ });
1139
+
1033
1140
  // src/components/select/selectVariants.ts
1034
1141
  var selectVariantClass = {
1035
1142
  default: "border border-input bg-background hover:border-ring",
@@ -1740,69 +1847,50 @@ var Textarea = forwardRef(function Textarea2({
1740
1847
  variant = "default",
1741
1848
  textareaSize = "md",
1742
1849
  resize = "vertical",
1743
- label,
1744
- helperText,
1745
- error,
1746
- fullWidth = true,
1747
1850
  rows = 4,
1748
1851
  id,
1749
1852
  className,
1750
1853
  wrapperClassName,
1751
- containerClassName,
1752
- "aria-invalid": ariaInvalidProp,
1753
- "aria-describedby": ariaDescribedByProp,
1854
+ "aria-invalid": ariaInvalid,
1855
+ "aria-describedby": ariaDescribedBy,
1754
1856
  disabled,
1755
1857
  ...props
1756
1858
  }, ref) {
1757
1859
  const generatedId = useId();
1758
1860
  const textareaId = id ?? generatedId;
1759
- const helperId = `${textareaId}-helper`;
1760
- const errorId = `${textareaId}-error`;
1761
- const hasError = error !== void 0 && error !== null && error !== false;
1762
- const ariaInvalid = ariaInvalidProp ?? (hasError ? true : void 0);
1763
- const describedByIds = [
1764
- ariaDescribedByProp,
1765
- hasError ? errorId : null,
1766
- !hasError && helperText ? helperId : null
1767
- ].filter(Boolean).join(" ");
1768
- const ariaDescribedBy = describedByIds.length > 0 ? describedByIds : void 0;
1769
- return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", fullWidth && "w-full", containerClassName), children: [
1770
- label !== void 0 && label !== null && /* @__PURE__ */ jsx("label", { htmlFor: textareaId, className: "text-sm font-medium text-foreground select-none", children: label }),
1771
- /* @__PURE__ */ jsx(
1772
- "div",
1773
- {
1774
- "data-slot": "textarea-wrapper",
1775
- className: cn(
1776
- textareaBaseClass,
1777
- textareaVariantClass[variant],
1778
- textareaSizeClass[textareaSize],
1779
- wrapperClassName
1780
- ),
1781
- "aria-invalid": ariaInvalid,
1782
- "data-disabled": disabled ? "true" : void 0,
1783
- children: /* @__PURE__ */ jsx(
1784
- "textarea",
1785
- {
1786
- ref,
1787
- id: textareaId,
1788
- rows,
1789
- disabled,
1790
- "aria-invalid": ariaInvalid,
1791
- "aria-describedby": ariaDescribedBy,
1792
- className: cn(
1793
- "w-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
1794
- textareaResizeClass[resize],
1795
- className
1796
- ),
1797
- ...props
1798
- }
1799
- )
1800
- }
1801
- ),
1802
- hasError ? /* @__PURE__ */ jsx("p", { id: errorId, className: "text-xs text-destructive", children: error }) : helperText ? /* @__PURE__ */ jsx("p", { id: helperId, className: "text-xs text-muted-foreground", children: helperText }) : null
1803
- ] });
1861
+ return /* @__PURE__ */ jsx(
1862
+ "div",
1863
+ {
1864
+ "data-slot": "textarea-wrapper",
1865
+ className: cn(
1866
+ textareaBaseClass,
1867
+ textareaVariantClass[variant],
1868
+ textareaSizeClass[textareaSize],
1869
+ wrapperClassName
1870
+ ),
1871
+ "aria-invalid": ariaInvalid,
1872
+ "data-disabled": disabled ? "true" : void 0,
1873
+ children: /* @__PURE__ */ jsx(
1874
+ "textarea",
1875
+ {
1876
+ ref,
1877
+ id: textareaId,
1878
+ rows,
1879
+ disabled,
1880
+ "aria-invalid": ariaInvalid,
1881
+ "aria-describedby": ariaDescribedBy,
1882
+ className: cn(
1883
+ "w-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
1884
+ textareaResizeClass[resize],
1885
+ className
1886
+ ),
1887
+ ...props
1888
+ }
1889
+ )
1890
+ }
1891
+ );
1804
1892
  });
1805
1893
 
1806
- export { AppShell, Avatar, Button, Checkbox, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, Field, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, LanguageSwitcher, Select, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Switch, Table, Textarea, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, selectBaseClass, selectSizeClass, selectVariantClass, switchThumbBaseClass, switchThumbClass, switchTrackBaseClass, switchTrackClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, useDashboardLayout, useDirection };
1894
+ export { AppShell, Avatar, Button, Checkbox, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, Field, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, LanguageSwitcher, RadioGroup, RadioGroupItem, Select, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Switch, Table, Textarea, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, radioGroupBaseClass, radioGroupOrientationClass, radioIndicatorBaseClass, radioIndicatorDotClass, radioIndicatorSizeClass, radioItemBaseClass, radioItemSizeClass, radioLabelSizeClass, radioOptionRowClass, selectBaseClass, selectSizeClass, selectVariantClass, switchThumbBaseClass, switchThumbClass, switchTrackBaseClass, switchTrackClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, useDashboardLayout, useDirection };
1807
1895
  //# sourceMappingURL=index.js.map
1808
1896
  //# sourceMappingURL=index.js.map