jvetrau-ds 0.2.7 → 0.2.8

package/components/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var button = require('./button');
-var input = require('./input/input');
+var input = require('./input');
 var textarea = require('./textarea/textarea');
 var select = require('./select/select');
 var dropdown = require('./dropdown/dropdown');

package/components/index.d.ts

@@ -1,8 +1,8 @@
 export { default as Button } from './button';
 export { buttonLink, } from './button';
 export type { ButtonProps, } from './button';
-export { default as Input } from './input/input';
-export type { InputProps } from './input/input';
+export { default as Input, } from './input';
+export type { InputProps, InputWidth, } from './input';
 export { default as Textarea } from './textarea/textarea';
 export type { TextareaProps } from './textarea/textarea';
 export { default as Select } from './select/select';

package/components/index.js

@@ -1,5 +1,5 @@
 export { default as Button, buttonLink } from './button';
-export { default as Input } from './input/input';
+export { default as Input } from './input';
 export { default as Textarea } from './textarea/textarea';
 export { default as Select } from './select/select';
 export { default as Dropdown } from './dropdown/dropdown';

package/components/input/index.cjs

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var input = require('./input');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -8,6 +10,13 @@ var input__default = /*#__PURE__*/_interopDefault(input);
 
 
 
-module.exports = input__default.default;
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function () { return input.Input; }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () { return input__default.default; }
+});
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/components/input/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './input';
-export type { InputProps } from './input';
+export { default, Input, } from './input';
+export type { InputProps, InputWidth, } from './input';

package/components/input/index.js

@@ -1,3 +1,3 @@
-export { default } from './input';
+export { Input, default } from './input';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/components/input/input.cjs

@@ -1,17 +1,23 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var jsxRuntime = require('react/jsx-runtime');
 var classnames = require('../helpers/classnames');
 
 const Input = ({
   state = "default",
+  width = "default",
   className = "",
   disabled = false,
   ...props
 }) => {
   const classes = classnames.classnames("input", className, {
-    error: state === "error",
-    success: state === "success"
+    "input--error": state === "error",
+    "input--success": state === "success",
+    "input--width-short": width === "short",
+    "input--width-default": width === "default",
+    "input--width-max": width === "max"
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
     "input",
@@ -24,6 +30,7 @@ const Input = ({
 };
 var input_default = Input;
 
-module.exports = input_default;
+exports.Input = Input;
+exports.default = input_default;
 //# sourceMappingURL=input.cjs.map
 //# sourceMappingURL=input.cjs.map

package/components/input/input.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/input/input.tsx"],"names":["classnames","jsx"],"mappings":";;;;;AASA,MAAM,QAA8B,CAAC;AAAA,EACnC,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,OAAA,EAAS,SAAA,EAAW;AAAA,IAC7C,OAAO,KAAA,KAAU,OAAA;AAAA,IACjB,SAAS,KAAA,KAAU;AAAA,GACpB,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"input.cjs","sourcesContent":["import React from 'react';\n//import './input.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  state?: 'default' | 'error' | 'success';\n}\n\nconst Input: React.FC<InputProps> = ({\n  state = 'default',\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames('input', className, {\n    error: state === 'error',\n    success: state === 'success',\n  });\n\n  return (\n    <input\n      className={classes}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\nexport default Input;"]}
+{"version":3,"sources":["../../../src/components/input/input.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;;AAWO,MAAM,QAA8B,CAAC;AAAA,EAC1C,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,OAAA,EAAS,SAAA,EAAW;AAAA,IAC7C,gBAAgB,KAAA,KAAU,OAAA;AAAA,IAC1B,kBAAkB,KAAA,KAAU,SAAA;AAAA,IAC5B,sBAAsB,KAAA,KAAU,OAAA;AAAA,IAChC,wBAAwB,KAAA,KAAU,SAAA;AAAA,IAClC,oBAAoB,KAAA,KAAU;AAAA,GAC/B,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,IAAO,aAAA,GAAQ","file":"input.cjs","sourcesContent":["import React from 'react';\nimport { classnames } from '../helpers/classnames';\n\nexport type InputWidth = 'short' | 'default' | 'max';\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  state?: 'default' | 'error' | 'success';\n  width?: InputWidth;\n}\n\nexport const Input: React.FC<InputProps> = ({\n  state = 'default',\n  width = 'default',\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames('input', className, {\n    'input--error': state === 'error',\n    'input--success': state === 'success',\n    'input--width-short': width === 'short',\n    'input--width-default': width === 'default',\n    'input--width-max': width === 'max',\n  });\n\n  return (\n    <input\n      className={classes}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\nexport default Input;\n"]}

package/components/input/input.css

@@ -25,6 +25,7 @@
   --input-height: var(--size-control-height);
   --input-padding-x: var(--padding-control-horz);
 
+  box-sizing: border-box;
   height: var(--input-height);
   padding-inline: var(--input-padding-x);
 
@@ -53,6 +54,21 @@
     background-color var(--input-transition-duration) ease;
 }
 
+.input--width-short {
+  /* size */
+  width: auto;
+}
+
+.input--width-default {
+  /* size */
+  width: 400px;
+}
+
+.input--width-max {
+  /* size */
+  width: 100%;
+}
+
 .input::placeholder {
   color: var(--input-placeholder);
 }

package/components/input/input.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+export type InputWidth = 'short' | 'default' | 'max';
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     state?: 'default' | 'error' | 'success';
+    width?: InputWidth;
 }
-declare const Input: React.FC<InputProps>;
+export declare const Input: React.FC<InputProps>;
 export default Input;

package/components/input/input.js

@@ -3,13 +3,17 @@ import { classnames } from '../helpers/classnames';
 
 const Input = ({
   state = "default",
+  width = "default",
   className = "",
   disabled = false,
   ...props
 }) => {
   const classes = classnames("input", className, {
-    error: state === "error",
-    success: state === "success"
+    "input--error": state === "error",
+    "input--success": state === "success",
+    "input--width-short": width === "short",
+    "input--width-default": width === "default",
+    "input--width-max": width === "max"
   });
   return /* @__PURE__ */ jsx(
     "input",
@@ -22,6 +26,6 @@ const Input = ({
 };
 var input_default = Input;
 
-export { input_default as default };
+export { Input, input_default as default };
 //# sourceMappingURL=input.js.map
 //# sourceMappingURL=input.js.map

package/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":";;;AASA,MAAM,QAA8B,CAAC;AAAA,EACnC,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,OAAA,EAAS,SAAA,EAAW;AAAA,IAC7C,OAAO,KAAA,KAAU,OAAA;AAAA,IACjB,SAAS,KAAA,KAAU;AAAA,GACpB,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"input.js","sourcesContent":["import React from 'react';\n//import './input.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  state?: 'default' | 'error' | 'success';\n}\n\nconst Input: React.FC<InputProps> = ({\n  state = 'default',\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames('input', className, {\n    error: state === 'error',\n    success: state === 'success',\n  });\n\n  return (\n    <input\n      className={classes}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\nexport default Input;"]}
+{"version":3,"sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":";;;AAWO,MAAM,QAA8B,CAAC;AAAA,EAC1C,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,OAAA,EAAS,SAAA,EAAW;AAAA,IAC7C,gBAAgB,KAAA,KAAU,OAAA;AAAA,IAC1B,kBAAkB,KAAA,KAAU,SAAA;AAAA,IAC5B,sBAAsB,KAAA,KAAU,OAAA;AAAA,IAChC,wBAAwB,KAAA,KAAU,SAAA;AAAA,IAClC,oBAAoB,KAAA,KAAU;AAAA,GAC/B,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,IAAO,aAAA,GAAQ","file":"input.js","sourcesContent":["import React from 'react';\nimport { classnames } from '../helpers/classnames';\n\nexport type InputWidth = 'short' | 'default' | 'max';\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  state?: 'default' | 'error' | 'success';\n  width?: InputWidth;\n}\n\nexport const Input: React.FC<InputProps> = ({\n  state = 'default',\n  width = 'default',\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames('input', className, {\n    'input--error': state === 'error',\n    'input--success': state === 'success',\n    'input--width-short': width === 'short',\n    'input--width-default': width === 'default',\n    'input--width-max': width === 'max',\n  });\n\n  return (\n    <input\n      className={classes}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\nexport default Input;\n"]}

package/index.d.ts

@@ -5,7 +5,7 @@
 export { default as Button, buttonLink, } from './components/button';
 export type { ButtonProps, } from './components/button';
 export { default as Input } from './components/input';
-export type { InputProps } from './components/input';
+export type { InputProps, InputWidth, } from './components/input';
 export { default as Textarea } from './components/textarea';
 export type { TextareaProps } from './components/textarea';
 export { default as Select } from './components/select';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -3133,6 +3133,7 @@
   --input-height: var(--size-control-height);
   --input-padding-x: var(--padding-control-horz);
 
+  box-sizing: border-box;
   height: var(--input-height);
   padding-inline: var(--input-padding-x);
 
@@ -3161,6 +3162,21 @@
     background-color var(--input-transition-duration) ease;
 }
 
+.input--width-short {
+  /* size */
+  width: auto;
+}
+
+.input--width-default {
+  /* size */
+  width: 400px;
+}
+
+.input--width-max {
+  /* size */
+  width: 100%;
+}
+
 .input::placeholder {
   color: var(--input-placeholder);
 }