mokona-ui 0.0.2 → 0.0.3

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.
Files changed (15) hide show
  1. package/dist/{chunk-CQQEMZCN.js → chunk-I47PN4D6.js} +30 -12
  2. package/dist/chunk-I47PN4D6.js.map +1 -0
  3. package/dist/{chunk-EQTM3PIY.cjs → chunk-ZZY5C6OY.cjs} +30 -11
  4. package/dist/chunk-ZZY5C6OY.cjs.map +1 -0
  5. package/dist/index.cjs +6 -2
  6. package/dist/index.d.cts +1 -1
  7. package/dist/index.d.ts +1 -1
  8. package/dist/index.js +1 -1
  9. package/dist/textfield.cjs +6 -2
  10. package/dist/textfield.d.cts +7 -2
  11. package/dist/textfield.d.ts +7 -2
  12. package/dist/textfield.js +1 -1
  13. package/package.json +1 -1
  14. package/dist/chunk-CQQEMZCN.js.map +0 -1
  15. package/dist/chunk-EQTM3PIY.cjs.map +0 -1
package/dist/{chunk-CQQEMZCN.js → chunk-I47PN4D6.js} RENAMED
@@ -1,11 +1,36 @@
1
1
  import { __objRest, __spreadValues, cn } from './chunk-6H52OI5L.js';
2
2
  import * as React from 'react';
3
3
  import * as Label from '@radix-ui/react-label';
4
+ import { cva } from 'class-variance-authority';
4
5
  import { jsxs, jsx } from 'react/jsx-runtime';
5
6
 
7
+ var textFieldVariants = cva(
8
+ [
9
+ "w-full rounded-xl",
10
+ "text-[var(--color-foreground)]",
11
+ "bg-[var(--color-muted)] outline-none",
12
+ "border-2 border-transparent",
13
+ "placeholder:text-[var(--color-muted-foreground)]",
14
+ "transition-colors duration-150",
15
+ "focus:border-[var(--color-primary)] focus:bg-[var(--color-background)]",
16
+ "disabled:opacity-40 disabled:cursor-not-allowed"
17
+ ],
18
+ {
19
+ variants: {
20
+ size: {
21
+ sm: "h-9 px-3 text-[14px]",
22
+ md: "h-12 px-4 text-[16px]",
23
+ lg: "h-14 px-4 text-[16px]"
24
+ }
25
+ },
26
+ defaultVariants: {
27
+ size: "md"
28
+ }
29
+ }
30
+ );
6
31
  var TextField = React.forwardRef(
7
32
  (_a, ref) => {
8
- var _b = _a, { className, label, helperText, errorMessage, isError, id } = _b, props = __objRest(_b, ["className", "label", "helperText", "errorMessage", "isError", "id"]);
33
+ var _b = _a, { className, label, helperText, errorMessage, isError, size, id } = _b, props = __objRest(_b, ["className", "label", "helperText", "errorMessage", "isError", "size", "id"]);
9
34
  const generatedId = React.useId();
10
35
  const inputId = id != null ? id : generatedId;
11
36
  const hasError = isError || !!errorMessage;
@@ -24,14 +49,7 @@ var TextField = React.forwardRef(
24
49
  ref,
25
50
  id: inputId,
26
51
  className: cn(
27
- "w-full h-12 px-4 rounded-xl",
28
- "text-[16px] text-[var(--color-foreground)]",
29
- "bg-[var(--color-muted)] outline-none",
30
- "border-2 border-transparent",
31
- "placeholder:text-[var(--color-muted-foreground)]",
32
- "transition-colors duration-150",
33
- "focus:border-[var(--color-primary)] focus:bg-[var(--color-background)]",
34
- "disabled:opacity-40 disabled:cursor-not-allowed",
52
+ textFieldVariants({ size }),
35
53
  hasError && "border-[var(--color-negative)] bg-[var(--color-background)]",
36
54
  className
37
55
  ),
@@ -61,6 +79,6 @@ var TextField = React.forwardRef(
61
79
  );
62
80
  TextField.displayName = "TextField";
63
81
 
64
- export { TextField };
65
- //# sourceMappingURL=chunk-CQQEMZCN.js.map
66
- //# sourceMappingURL=chunk-CQQEMZCN.js.map
82
+ export { TextField, textFieldVariants };
83
+ //# sourceMappingURL=chunk-I47PN4D6.js.map
84
+ //# sourceMappingURL=chunk-I47PN4D6.js.map
package/dist/chunk-I47PN4D6.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/TextField/TextField.tsx"],"names":[],"mappings":";;;;;;AAKA,IAAM,iBAAA,GAAoB,GAAA;AAAA,EACxB;AAAA,IACE,mBAAA;AAAA,IACA,gCAAA;AAAA,IACA,sCAAA;AAAA,IACA,6BAAA;AAAA,IACA,kDAAA;AAAA,IACA,gCAAA;AAAA,IACA,wEAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,sBAAA;AAAA,QACJ,EAAA,EAAI,uBAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAWA,IAAM,SAAA,GAAkB,KAAA,CAAA,UAAA;AAAA,EACtB,CAAC,IAA6E,GAAA,KAAQ;AAArF,IAAA,IAAA,EAAA,GAAA,EAAA,EAAE,aAAW,KAAA,EAAO,UAAA,EAAY,YAAA,EAAc,OAAA,EAAS,MAAM,EAAA,EAxChE,GAwCG,EAAA,EAAoE,KAAA,GAAA,SAAA,CAApE,IAAoE,CAAlE,WAAA,EAAW,SAAO,YAAA,EAAY,cAAA,EAAc,WAAS,MAAA,EAAM,IAAA,CAAA,CAAA;AAC5D,IAAA,MAAM,cAAoB,KAAA,CAAA,KAAA,EAAM;AAChC,IAAA,MAAM,UAAU,EAAA,IAAA,IAAA,GAAA,EAAA,GAAM,WAAA;AACtB,IAAA,MAAM,QAAA,GAAW,OAAA,IAAW,CAAC,CAAC,YAAA;AAE9B,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EACZ,QAAA,EAAA;AAAA,MAAA,KAAA,oBACC,GAAA;AAAA,QAAO,KAAA,CAAA,IAAA;AAAA,QAAN;AAAA,UACC,OAAA,EAAS,OAAA;AAAA,UACT,SAAA,EAAU,0DAAA;AAAA,UAET,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,sBAEF,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA,cAAA,CAAA;AAAA,UACC,GAAA;AAAA,UACA,EAAA,EAAI,OAAA;AAAA,UACJ,SAAA,EAAW,EAAA;AAAA,YACT,iBAAA,CAAkB,EAAE,IAAA,EAAM,CAAA;AAAA,YAC1B,QAAA,IAAY,6DAAA;AAAA,YACZ;AAAA,WACF;AAAA,UACA,cAAA,EAAc,QAAA;AAAA,UACd,kBAAA,EACE,WAAW,CAAA,EAAG,OAAO,WAAW,UAAA,GAAa,CAAA,EAAG,OAAO,CAAA,OAAA,CAAA,GAAY;AAAA,SAAA,EAEjE,KAAA;AAAA,OACN;AAAA,MACC,YAAY,YAAA,oBACX,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,GAAG,OAAO,CAAA,MAAA,CAAA;AAAA,UACd,SAAA,EAAU,0CAAA;AAAA,UACV,IAAA,EAAK,OAAA;AAAA,UAEJ,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,MAED,CAAC,YAAY,UAAA,oBACZ,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,GAAG,OAAO,CAAA,OAAA,CAAA;AAAA,UACd,SAAA,EAAU,kDAAA;AAAA,UAET,QAAA,EAAA;AAAA;AAAA;AACH,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AACA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-I47PN4D6.js","sourcesContent":["import * as React from \"react\";\r\nimport * as Label from \"@radix-ui/react-label\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nconst textFieldVariants = cva(\r\n [\r\n \"w-full rounded-xl\",\r\n \"text-[var(--color-foreground)]\",\r\n \"bg-[var(--color-muted)] outline-none\",\r\n \"border-2 border-transparent\",\r\n \"placeholder:text-[var(--color-muted-foreground)]\",\r\n \"transition-colors duration-150\",\r\n \"focus:border-[var(--color-primary)] focus:bg-[var(--color-background)]\",\r\n \"disabled:opacity-40 disabled:cursor-not-allowed\",\r\n ],\r\n {\r\n variants: {\r\n size: {\r\n sm: \"h-9 px-3 text-[14px]\",\r\n md: \"h-12 px-4 text-[16px]\",\r\n lg: \"h-14 px-4 text-[16px]\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n },\r\n }\r\n);\r\n\r\nexport interface TextFieldProps\r\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">,\r\n VariantProps<typeof textFieldVariants> {\r\n label?: string;\r\n helperText?: string;\r\n errorMessage?: string;\r\n isError?: boolean;\r\n}\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\r\n ({ className, label, helperText, errorMessage, isError, size, id, ...props }, ref) => {\r\n const generatedId = React.useId();\r\n const inputId = id ?? generatedId;\r\n const hasError = isError || !!errorMessage;\r\n\r\n return (\r\n <div className=\"flex flex-col gap-1.5 w-full\">\r\n {label && (\r\n <Label.Root\r\n htmlFor={inputId}\r\n className=\"text-[14px] font-semibold text-[var(--color-foreground)]\"\r\n >\r\n {label}\r\n </Label.Root>\r\n )}\r\n <input\r\n ref={ref}\r\n id={inputId}\r\n className={cn(\r\n textFieldVariants({ size }),\r\n hasError && \"border-[var(--color-negative)] bg-[var(--color-background)]\",\r\n className\r\n )}\r\n aria-invalid={hasError}\r\n aria-describedby={\r\n hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined\r\n }\r\n {...props}\r\n />\r\n {hasError && errorMessage && (\r\n <p\r\n id={`${inputId}-error`}\r\n className=\"text-[12px] text-[var(--color-negative)]\"\r\n role=\"alert\"\r\n >\r\n {errorMessage}\r\n </p>\r\n )}\r\n {!hasError && helperText && (\r\n <p\r\n id={`${inputId}-helper`}\r\n className=\"text-[12px] text-[var(--color-muted-foreground)]\"\r\n >\r\n {helperText}\r\n </p>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\nTextField.displayName = \"TextField\";\r\n\r\nexport { TextField, textFieldVariants };\r\n"]}
package/dist/{chunk-EQTM3PIY.cjs → chunk-ZZY5C6OY.cjs} RENAMED
@@ -3,6 +3,7 @@
3
3
  var chunkZTSGHON6_cjs = require('./chunk-ZTSGHON6.cjs');
4
4
  var React = require('react');
5
5
  var Label = require('@radix-ui/react-label');
6
+ var classVarianceAuthority = require('class-variance-authority');
6
7
  var jsxRuntime = require('react/jsx-runtime');
7
8
 
8
9
  function _interopNamespace(e) {
@@ -26,9 +27,33 @@ function _interopNamespace(e) {
26
27
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
27
28
  var Label__namespace = /*#__PURE__*/_interopNamespace(Label);
28
29
 
30
+ var textFieldVariants = classVarianceAuthority.cva(
31
+ [
32
+ "w-full rounded-xl",
33
+ "text-[var(--color-foreground)]",
34
+ "bg-[var(--color-muted)] outline-none",
35
+ "border-2 border-transparent",
36
+ "placeholder:text-[var(--color-muted-foreground)]",
37
+ "transition-colors duration-150",
38
+ "focus:border-[var(--color-primary)] focus:bg-[var(--color-background)]",
39
+ "disabled:opacity-40 disabled:cursor-not-allowed"
40
+ ],
41
+ {
42
+ variants: {
43
+ size: {
44
+ sm: "h-9 px-3 text-[14px]",
45
+ md: "h-12 px-4 text-[16px]",
46
+ lg: "h-14 px-4 text-[16px]"
47
+ }
48
+ },
49
+ defaultVariants: {
50
+ size: "md"
51
+ }
52
+ }
53
+ );
29
54
  var TextField = React__namespace.forwardRef(
30
55
  (_a, ref) => {
31
- var _b = _a, { className, label, helperText, errorMessage, isError, id } = _b, props = chunkZTSGHON6_cjs.__objRest(_b, ["className", "label", "helperText", "errorMessage", "isError", "id"]);
56
+ var _b = _a, { className, label, helperText, errorMessage, isError, size, id } = _b, props = chunkZTSGHON6_cjs.__objRest(_b, ["className", "label", "helperText", "errorMessage", "isError", "size", "id"]);
32
57
  const generatedId = React__namespace.useId();
33
58
  const inputId = id != null ? id : generatedId;
34
59
  const hasError = isError || !!errorMessage;
@@ -47,14 +72,7 @@ var TextField = React__namespace.forwardRef(
47
72
  ref,
48
73
  id: inputId,
49
74
  className: chunkZTSGHON6_cjs.cn(
50
- "w-full h-12 px-4 rounded-xl",
51
- "text-[16px] text-[var(--color-foreground)]",
52
- "bg-[var(--color-muted)] outline-none",
53
- "border-2 border-transparent",
54
- "placeholder:text-[var(--color-muted-foreground)]",
55
- "transition-colors duration-150",
56
- "focus:border-[var(--color-primary)] focus:bg-[var(--color-background)]",
57
- "disabled:opacity-40 disabled:cursor-not-allowed",
75
+ textFieldVariants({ size }),
58
76
  hasError && "border-[var(--color-negative)] bg-[var(--color-background)]",
59
77
  className
60
78
  ),
@@ -85,5 +103,6 @@ var TextField = React__namespace.forwardRef(
85
103
  TextField.displayName = "TextField";
86
104
 
87
105
  exports.TextField = TextField;
88
- //# sourceMappingURL=chunk-EQTM3PIY.cjs.map
89
- //# sourceMappingURL=chunk-EQTM3PIY.cjs.map
106
+ exports.textFieldVariants = textFieldVariants;
107
+ //# sourceMappingURL=chunk-ZZY5C6OY.cjs.map
108
+ //# sourceMappingURL=chunk-ZZY5C6OY.cjs.map
package/dist/chunk-ZZY5C6OY.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/TextField/TextField.tsx"],"names":["cva","React","__objRest","jsxs","jsx","Label","__spreadValues","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAM,iBAAA,GAAoBA,0BAAA;AAAA,EACxB;AAAA,IACE,mBAAA;AAAA,IACA,gCAAA;AAAA,IACA,sCAAA;AAAA,IACA,6BAAA;AAAA,IACA,kDAAA;AAAA,IACA,gCAAA;AAAA,IACA,wEAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,sBAAA;AAAA,QACJ,EAAA,EAAI,uBAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAWA,IAAM,SAAA,GAAkBC,gBAAA,CAAA,UAAA;AAAA,EACtB,CAAC,IAA6E,GAAA,KAAQ;AAArF,IAAA,IAAA,EAAA,GAAA,EAAA,EAAE,aAAW,KAAA,EAAO,UAAA,EAAY,YAAA,EAAc,OAAA,EAAS,MAAM,EAAA,EAxChE,GAwCG,EAAA,EAAoE,KAAA,GAAAC,2BAAA,CAApE,IAAoE,CAAlE,WAAA,EAAW,SAAO,YAAA,EAAY,cAAA,EAAc,WAAS,MAAA,EAAM,IAAA,CAAA,CAAA;AAC5D,IAAA,MAAM,cAAoBD,gBAAA,CAAA,KAAA,EAAM;AAChC,IAAA,MAAM,UAAU,EAAA,IAAA,IAAA,GAAA,EAAA,GAAM,WAAA;AACtB,IAAA,MAAM,QAAA,GAAW,OAAA,IAAW,CAAC,CAAC,YAAA;AAE9B,IAAA,uBACEE,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EACZ,QAAA,EAAA;AAAA,MAAA,KAAA,oBACCC,cAAA;AAAA,QAAOC,gBAAA,CAAA,IAAA;AAAA,QAAN;AAAA,UACC,OAAA,EAAS,OAAA;AAAA,UACT,SAAA,EAAU,0DAAA;AAAA,UAET,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,sBAEFD,cAAA;AAAA,QAAC,OAAA;AAAA,QAAAE,gCAAA,CAAA;AAAA,UACC,GAAA;AAAA,UACA,EAAA,EAAI,OAAA;AAAA,UACJ,SAAA,EAAWC,oBAAA;AAAA,YACT,iBAAA,CAAkB,EAAE,IAAA,EAAM,CAAA;AAAA,YAC1B,QAAA,IAAY,6DAAA;AAAA,YACZ;AAAA,WACF;AAAA,UACA,cAAA,EAAc,QAAA;AAAA,UACd,kBAAA,EACE,WAAW,CAAA,EAAG,OAAO,WAAW,UAAA,GAAa,CAAA,EAAG,OAAO,CAAA,OAAA,CAAA,GAAY;AAAA,SAAA,EAEjE,KAAA;AAAA,OACN;AAAA,MACC,YAAY,YAAA,oBACXH,cAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,GAAG,OAAO,CAAA,MAAA,CAAA;AAAA,UACd,SAAA,EAAU,0CAAA;AAAA,UACV,IAAA,EAAK,OAAA;AAAA,UAEJ,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,MAED,CAAC,YAAY,UAAA,oBACZA,cAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,GAAG,OAAO,CAAA,OAAA,CAAA;AAAA,UACd,SAAA,EAAU,kDAAA;AAAA,UAET,QAAA,EAAA;AAAA;AAAA;AACH,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AACA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-ZZY5C6OY.cjs","sourcesContent":["import * as React from \"react\";\r\nimport * as Label from \"@radix-ui/react-label\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nconst textFieldVariants = cva(\r\n [\r\n \"w-full rounded-xl\",\r\n \"text-[var(--color-foreground)]\",\r\n \"bg-[var(--color-muted)] outline-none\",\r\n \"border-2 border-transparent\",\r\n \"placeholder:text-[var(--color-muted-foreground)]\",\r\n \"transition-colors duration-150\",\r\n \"focus:border-[var(--color-primary)] focus:bg-[var(--color-background)]\",\r\n \"disabled:opacity-40 disabled:cursor-not-allowed\",\r\n ],\r\n {\r\n variants: {\r\n size: {\r\n sm: \"h-9 px-3 text-[14px]\",\r\n md: \"h-12 px-4 text-[16px]\",\r\n lg: \"h-14 px-4 text-[16px]\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n },\r\n }\r\n);\r\n\r\nexport interface TextFieldProps\r\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">,\r\n VariantProps<typeof textFieldVariants> {\r\n label?: string;\r\n helperText?: string;\r\n errorMessage?: string;\r\n isError?: boolean;\r\n}\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\r\n ({ className, label, helperText, errorMessage, isError, size, id, ...props }, ref) => {\r\n const generatedId = React.useId();\r\n const inputId = id ?? generatedId;\r\n const hasError = isError || !!errorMessage;\r\n\r\n return (\r\n <div className=\"flex flex-col gap-1.5 w-full\">\r\n {label && (\r\n <Label.Root\r\n htmlFor={inputId}\r\n className=\"text-[14px] font-semibold text-[var(--color-foreground)]\"\r\n >\r\n {label}\r\n </Label.Root>\r\n )}\r\n <input\r\n ref={ref}\r\n id={inputId}\r\n className={cn(\r\n textFieldVariants({ size }),\r\n hasError && \"border-[var(--color-negative)] bg-[var(--color-background)]\",\r\n className\r\n )}\r\n aria-invalid={hasError}\r\n aria-describedby={\r\n hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined\r\n }\r\n {...props}\r\n />\r\n {hasError && errorMessage && (\r\n <p\r\n id={`${inputId}-error`}\r\n className=\"text-[12px] text-[var(--color-negative)]\"\r\n role=\"alert\"\r\n >\r\n {errorMessage}\r\n </p>\r\n )}\r\n {!hasError && helperText && (\r\n <p\r\n id={`${inputId}-helper`}\r\n className=\"text-[12px] text-[var(--color-muted-foreground)]\"\r\n >\r\n {helperText}\r\n </p>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\nTextField.displayName = \"TextField\";\r\n\r\nexport { TextField, textFieldVariants };\r\n"]}
package/dist/index.cjs CHANGED
@@ -47,7 +47,7 @@ var chunkDT2WYS4C_cjs = require('./chunk-DT2WYS4C.cjs');
47
47
  require('./chunk-XURQVDCN.cjs');
48
48
  var chunkYOWXEZL6_cjs = require('./chunk-YOWXEZL6.cjs');
49
49
  var chunkTCQBQ4Z3_cjs = require('./chunk-TCQBQ4Z3.cjs');
50
- var chunkEQTM3PIY_cjs = require('./chunk-EQTM3PIY.cjs');
50
+ var chunkZZY5C6OY_cjs = require('./chunk-ZZY5C6OY.cjs');
51
51
  var chunkCRA2KDNM_cjs = require('./chunk-CRA2KDNM.cjs');
52
52
  require('./chunk-L7BCDC6S.cjs');
53
53
  var chunkL2APIKHP_cjs = require('./chunk-L2APIKHP.cjs');
@@ -388,7 +388,11 @@ Object.defineProperty(exports, "Divider", {
388
388
  });
389
389
  Object.defineProperty(exports, "TextField", {
390
390
  enumerable: true,
391
- get: function () { return chunkEQTM3PIY_cjs.TextField; }
391
+ get: function () { return chunkZZY5C6OY_cjs.TextField; }
392
+ });
393
+ Object.defineProperty(exports, "textFieldVariants", {
394
+ enumerable: true,
395
+ get: function () { return chunkZZY5C6OY_cjs.textFieldVariants; }
392
396
  });
393
397
  Object.defineProperty(exports, "Checkbox", {
394
398
  enumerable: true,
package/dist/index.d.cts CHANGED
@@ -2,7 +2,7 @@ export { Button, ButtonProps, buttonVariants } from './button.cjs';
2
2
  export { Amount, AmountProps, formatAmount } from './amount.cjs';
3
3
  export { Text, TextProps, textVariants } from './text.cjs';
4
4
  export { Divider, DividerProps } from './divider.cjs';
5
- export { TextField, TextFieldProps } from './textfield.cjs';
5
+ export { TextField, TextFieldProps, textFieldVariants } from './textfield.cjs';
6
6
  export { Checkbox, CheckboxProps } from './checkbox.cjs';
7
7
  export { Toggle, ToggleProps } from './toggle.cjs';
8
8
  export { Textarea, TextareaProps } from './textarea.cjs';
package/dist/index.d.ts CHANGED
@@ -2,7 +2,7 @@ export { Button, ButtonProps, buttonVariants } from './button.js';
2
2
  export { Amount, AmountProps, formatAmount } from './amount.js';
3
3
  export { Text, TextProps, textVariants } from './text.js';
4
4
  export { Divider, DividerProps } from './divider.js';
5
- export { TextField, TextFieldProps } from './textfield.js';
5
+ export { TextField, TextFieldProps, textFieldVariants } from './textfield.js';
6
6
  export { Checkbox, CheckboxProps } from './checkbox.js';
7
7
  export { Toggle, ToggleProps } from './toggle.js';
8
8
  export { Textarea, TextareaProps } from './textarea.js';
package/dist/index.js CHANGED
@@ -45,7 +45,7 @@ export { Button, buttonVariants } from './chunk-RPH25EA6.js';
45
45
  import './chunk-TMR56BBE.js';
46
46
  export { Text, textVariants } from './chunk-5SFQ3UUO.js';
47
47
  export { Divider } from './chunk-YUMTVYGA.js';
48
- export { TextField } from './chunk-CQQEMZCN.js';
48
+ export { TextField, textFieldVariants } from './chunk-I47PN4D6.js';
49
49
  export { Checkbox } from './chunk-OAO2RJEQ.js';
50
50
  import './chunk-NANYEKL2.js';
51
51
  export { Toggle } from './chunk-MTZI5BWA.js';
package/dist/textfield.cjs CHANGED
@@ -1,13 +1,17 @@
1
1
  'use strict';
2
2
 
3
- var chunkEQTM3PIY_cjs = require('./chunk-EQTM3PIY.cjs');
3
+ var chunkZZY5C6OY_cjs = require('./chunk-ZZY5C6OY.cjs');
4
4
  require('./chunk-ZTSGHON6.cjs');
5
5
 
6
6
 
7
7
 
8
8
  Object.defineProperty(exports, "TextField", {
9
9
  enumerable: true,
10
- get: function () { return chunkEQTM3PIY_cjs.TextField; }
10
+ get: function () { return chunkZZY5C6OY_cjs.TextField; }
11
+ });
12
+ Object.defineProperty(exports, "textFieldVariants", {
13
+ enumerable: true,
14
+ get: function () { return chunkZZY5C6OY_cjs.textFieldVariants; }
11
15
  });
12
16
  //# sourceMappingURL=textfield.cjs.map
13
17
  //# sourceMappingURL=textfield.cjs.map
package/dist/textfield.d.cts CHANGED
@@ -1,6 +1,11 @@
1
+ import * as class_variance_authority_types from 'class-variance-authority/types';
1
2
  import * as React from 'react';
3
+ import { VariantProps } from 'class-variance-authority';
2
4
 
3
- interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
5
+ declare const textFieldVariants: (props?: ({
6
+ size?: "sm" | "md" | "lg" | null | undefined;
7
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
8
+ interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof textFieldVariants> {
4
9
  label?: string;
5
10
  helperText?: string;
6
11
  errorMessage?: string;
@@ -8,4 +13,4 @@ interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
8
13
  }
9
14
  declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
10
15
 
11
- export { TextField, type TextFieldProps };
16
+ export { TextField, type TextFieldProps, textFieldVariants };
package/dist/textfield.d.ts CHANGED
@@ -1,6 +1,11 @@
1
+ import * as class_variance_authority_types from 'class-variance-authority/types';
1
2
  import * as React from 'react';
3
+ import { VariantProps } from 'class-variance-authority';
2
4
 
3
- interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
5
+ declare const textFieldVariants: (props?: ({
6
+ size?: "sm" | "md" | "lg" | null | undefined;
7
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
8
+ interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof textFieldVariants> {
4
9
  label?: string;
5
10
  helperText?: string;
6
11
  errorMessage?: string;
@@ -8,4 +13,4 @@ interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
8
13
  }
9
14
  declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
10
15
 
11
- export { TextField, type TextFieldProps };
16
+ export { TextField, type TextFieldProps, textFieldVariants };
package/dist/textfield.js CHANGED
@@ -1,4 +1,4 @@
1
- export { TextField } from './chunk-CQQEMZCN.js';
1
+ export { TextField, textFieldVariants } from './chunk-I47PN4D6.js';
2
2
  import './chunk-6H52OI5L.js';
3
3
  //# sourceMappingURL=textfield.js.map
4
4
  //# sourceMappingURL=textfield.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mokona-ui",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "description": "React UI component library",
5
5
  "author": "jratul",
6
6
  "license": "MIT",
package/dist/chunk-CQQEMZCN.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/TextField/TextField.tsx"],"names":[],"mappings":";;;;;AAWA,IAAM,SAAA,GAAkB,KAAA,CAAA,UAAA;AAAA,EACtB,CAAC,IAAuE,GAAA,KAAQ;AAA/E,IAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAA,SAAA,EAAW,KAAA,EAAO,UAAA,EAAY,YAAA,EAAc,SAAS,EAAA,EAZ1D,GAYG,EAAA,EAA8D,KAAA,GAAA,SAAA,CAA9D,IAA8D,CAA5D,WAAA,EAAW,OAAA,EAAO,YAAA,EAAY,gBAAc,SAAA,EAAS,IAAA,CAAA,CAAA;AACtD,IAAA,MAAM,cAAoB,KAAA,CAAA,KAAA,EAAM;AAChC,IAAA,MAAM,UAAU,EAAA,IAAA,IAAA,GAAA,EAAA,GAAM,WAAA;AACtB,IAAA,MAAM,QAAA,GAAW,OAAA,IAAW,CAAC,CAAC,YAAA;AAE9B,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EACZ,QAAA,EAAA;AAAA,MAAA,KAAA,oBACC,GAAA;AAAA,QAAO,KAAA,CAAA,IAAA;AAAA,QAAN;AAAA,UACC,OAAA,EAAS,OAAA;AAAA,UACT,SAAA,EAAU,0DAAA;AAAA,UAET,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,sBAEF,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA,cAAA,CAAA;AAAA,UACC,GAAA;AAAA,UACA,EAAA,EAAI,OAAA;AAAA,UACJ,SAAA,EAAW,EAAA;AAAA,YACT,6BAAA;AAAA,YACA,4CAAA;AAAA,YACA,sCAAA;AAAA,YACA,6BAAA;AAAA,YACA,kDAAA;AAAA,YACA,gCAAA;AAAA,YACA,wEAAA;AAAA,YACA,iDAAA;AAAA,YACA,QAAA,IAAY,6DAAA;AAAA,YACZ;AAAA,WACF;AAAA,UACA,cAAA,EAAc,QAAA;AAAA,UACd,kBAAA,EACE,WAAW,CAAA,EAAG,OAAO,WAAW,UAAA,GAAa,CAAA,EAAG,OAAO,CAAA,OAAA,CAAA,GAAY;AAAA,SAAA,EAEjE,KAAA;AAAA,OACN;AAAA,MACC,YAAY,YAAA,oBACX,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,GAAG,OAAO,CAAA,MAAA,CAAA;AAAA,UACd,SAAA,EAAU,0CAAA;AAAA,UACV,IAAA,EAAK,OAAA;AAAA,UAEJ,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,MAED,CAAC,YAAY,UAAA,oBACZ,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,GAAG,OAAO,CAAA,OAAA,CAAA;AAAA,UACd,SAAA,EAAU,kDAAA;AAAA,UAET,QAAA,EAAA;AAAA;AAAA;AACH,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AACA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-CQQEMZCN.js","sourcesContent":["import * as React from \"react\";\r\nimport * as Label from \"@radix-ui/react-label\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nexport interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {\r\n label?: string;\r\n helperText?: string;\r\n errorMessage?: string;\r\n isError?: boolean;\r\n}\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\r\n ({ className, label, helperText, errorMessage, isError, id, ...props }, ref) => {\r\n const generatedId = React.useId();\r\n const inputId = id ?? generatedId;\r\n const hasError = isError || !!errorMessage;\r\n\r\n return (\r\n <div className=\"flex flex-col gap-1.5 w-full\">\r\n {label && (\r\n <Label.Root\r\n htmlFor={inputId}\r\n className=\"text-[14px] font-semibold text-[var(--color-foreground)]\"\r\n >\r\n {label}\r\n </Label.Root>\r\n )}\r\n <input\r\n ref={ref}\r\n id={inputId}\r\n className={cn(\r\n \"w-full h-12 px-4 rounded-xl\",\r\n \"text-[16px] text-[var(--color-foreground)]\",\r\n \"bg-[var(--color-muted)] outline-none\",\r\n \"border-2 border-transparent\",\r\n \"placeholder:text-[var(--color-muted-foreground)]\",\r\n \"transition-colors duration-150\",\r\n \"focus:border-[var(--color-primary)] focus:bg-[var(--color-background)]\",\r\n \"disabled:opacity-40 disabled:cursor-not-allowed\",\r\n hasError && \"border-[var(--color-negative)] bg-[var(--color-background)]\",\r\n className\r\n )}\r\n aria-invalid={hasError}\r\n aria-describedby={\r\n hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined\r\n }\r\n {...props}\r\n />\r\n {hasError && errorMessage && (\r\n <p\r\n id={`${inputId}-error`}\r\n className=\"text-[12px] text-[var(--color-negative)]\"\r\n role=\"alert\"\r\n >\r\n {errorMessage}\r\n </p>\r\n )}\r\n {!hasError && helperText && (\r\n <p\r\n id={`${inputId}-helper`}\r\n className=\"text-[12px] text-[var(--color-muted-foreground)]\"\r\n >\r\n {helperText}\r\n </p>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\nTextField.displayName = \"TextField\";\r\n\r\nexport { TextField };\r\n"]}
package/dist/chunk-EQTM3PIY.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/TextField/TextField.tsx"],"names":["React","__objRest","jsxs","jsx","Label","__spreadValues","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,IAAM,SAAA,GAAkBA,gBAAA,CAAA,UAAA;AAAA,EACtB,CAAC,IAAuE,GAAA,KAAQ;AAA/E,IAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAA,SAAA,EAAW,KAAA,EAAO,UAAA,EAAY,YAAA,EAAc,SAAS,EAAA,EAZ1D,GAYG,EAAA,EAA8D,KAAA,GAAAC,2BAAA,CAA9D,IAA8D,CAA5D,WAAA,EAAW,OAAA,EAAO,YAAA,EAAY,gBAAc,SAAA,EAAS,IAAA,CAAA,CAAA;AACtD,IAAA,MAAM,cAAoBD,gBAAA,CAAA,KAAA,EAAM;AAChC,IAAA,MAAM,UAAU,EAAA,IAAA,IAAA,GAAA,EAAA,GAAM,WAAA;AACtB,IAAA,MAAM,QAAA,GAAW,OAAA,IAAW,CAAC,CAAC,YAAA;AAE9B,IAAA,uBACEE,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EACZ,QAAA,EAAA;AAAA,MAAA,KAAA,oBACCC,cAAA;AAAA,QAAOC,gBAAA,CAAA,IAAA;AAAA,QAAN;AAAA,UACC,OAAA,EAAS,OAAA;AAAA,UACT,SAAA,EAAU,0DAAA;AAAA,UAET,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,sBAEFD,cAAA;AAAA,QAAC,OAAA;AAAA,QAAAE,gCAAA,CAAA;AAAA,UACC,GAAA;AAAA,UACA,EAAA,EAAI,OAAA;AAAA,UACJ,SAAA,EAAWC,oBAAA;AAAA,YACT,6BAAA;AAAA,YACA,4CAAA;AAAA,YACA,sCAAA;AAAA,YACA,6BAAA;AAAA,YACA,kDAAA;AAAA,YACA,gCAAA;AAAA,YACA,wEAAA;AAAA,YACA,iDAAA;AAAA,YACA,QAAA,IAAY,6DAAA;AAAA,YACZ;AAAA,WACF;AAAA,UACA,cAAA,EAAc,QAAA;AAAA,UACd,kBAAA,EACE,WAAW,CAAA,EAAG,OAAO,WAAW,UAAA,GAAa,CAAA,EAAG,OAAO,CAAA,OAAA,CAAA,GAAY;AAAA,SAAA,EAEjE,KAAA;AAAA,OACN;AAAA,MACC,YAAY,YAAA,oBACXH,cAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,GAAG,OAAO,CAAA,MAAA,CAAA;AAAA,UACd,SAAA,EAAU,0CAAA;AAAA,UACV,IAAA,EAAK,OAAA;AAAA,UAEJ,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,MAED,CAAC,YAAY,UAAA,oBACZA,cAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,GAAG,OAAO,CAAA,OAAA,CAAA;AAAA,UACd,SAAA,EAAU,kDAAA;AAAA,UAET,QAAA,EAAA;AAAA;AAAA;AACH,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AACA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-EQTM3PIY.cjs","sourcesContent":["import * as React from \"react\";\r\nimport * as Label from \"@radix-ui/react-label\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nexport interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {\r\n label?: string;\r\n helperText?: string;\r\n errorMessage?: string;\r\n isError?: boolean;\r\n}\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\r\n ({ className, label, helperText, errorMessage, isError, id, ...props }, ref) => {\r\n const generatedId = React.useId();\r\n const inputId = id ?? generatedId;\r\n const hasError = isError || !!errorMessage;\r\n\r\n return (\r\n <div className=\"flex flex-col gap-1.5 w-full\">\r\n {label && (\r\n <Label.Root\r\n htmlFor={inputId}\r\n className=\"text-[14px] font-semibold text-[var(--color-foreground)]\"\r\n >\r\n {label}\r\n </Label.Root>\r\n )}\r\n <input\r\n ref={ref}\r\n id={inputId}\r\n className={cn(\r\n \"w-full h-12 px-4 rounded-xl\",\r\n \"text-[16px] text-[var(--color-foreground)]\",\r\n \"bg-[var(--color-muted)] outline-none\",\r\n \"border-2 border-transparent\",\r\n \"placeholder:text-[var(--color-muted-foreground)]\",\r\n \"transition-colors duration-150\",\r\n \"focus:border-[var(--color-primary)] focus:bg-[var(--color-background)]\",\r\n \"disabled:opacity-40 disabled:cursor-not-allowed\",\r\n hasError && \"border-[var(--color-negative)] bg-[var(--color-background)]\",\r\n className\r\n )}\r\n aria-invalid={hasError}\r\n aria-describedby={\r\n hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined\r\n }\r\n {...props}\r\n />\r\n {hasError && errorMessage && (\r\n <p\r\n id={`${inputId}-error`}\r\n className=\"text-[12px] text-[var(--color-negative)]\"\r\n role=\"alert\"\r\n >\r\n {errorMessage}\r\n </p>\r\n )}\r\n {!hasError && helperText && (\r\n <p\r\n id={`${inputId}-helper`}\r\n className=\"text-[12px] text-[var(--color-muted-foreground)]\"\r\n >\r\n {helperText}\r\n </p>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\nTextField.displayName = \"TextField\";\r\n\r\nexport { TextField };\r\n"]}