azeriand-library 1.6.0 → 1.7.0

package/dist/components/input/input.d.ts

@@ -0,0 +1,16 @@
+import { CardProps } from '../card/card';
+export type InputProps = CardProps & {
+    type?: string;
+    value?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    size?: number;
+    maxLength?: number;
+    onChange?: (value: string) => void;
+    iconPosition?: 'left' | 'right';
+    centerText?: boolean;
+    icon?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare function Input({ type, value, disabled, placeholder, size, maxLength, onChange, iconPosition, centerText, icon, className, ...cardProps }: InputProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -4,3 +4,4 @@ export { Button } from './components/button/button';
 export { Badge } from './components/badge/badge';
 export { Checkbox } from './components/checkbox/checkbox';
 export { SectionName } from './components/section-name/section-name';
+export { Input } from './components/input/input';

package/dist/index.esm.js

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode(".card{\n    /* border-radius: 20px; */\n    color: var(--card-text-color, white);\n}\n\n.card.glass{\n    background-color: color-mix(in oklch, var(--glass-color), transparent 80%);\n    border: 1px solid color-mix(in oklch, var(--glass-color), transparent 40%);\n    -webkit-backface-visibility: hidden;\n    -webkit-perspective: 1000;\n    -webkit-transform: translate3d(0,0,0);\n    -webkit-transform: translateZ(0);\n    backface-visibility: hidden;\n    perspective: 1000;\n    transform: translate3d(0,0,0);\n    transform: translateZ(0);\n}\n\n.card.mate{\n    background-color: var(--glass-color);\n}\n\n.card.outlined{\n    border: solid white 2px;\n}\n\nbutton .card.ghost:hover, button .card.outlined:hover{\n    background: color-mix(in oklch, var(--glass-color), transparent 80%);\n}\n\nbutton .card.glass:hover{\n    box-shadow: 0 4px 10px color-mix(in oklch, var(--glass-color), transparent 85%);\n}\n\nbutton .card.mate:hover{\n    background-color: color-mix(in oklch, var(--glass-color), white 10%) \n}\nbutton{\n    background: none;\n	color: inherit;\n	border: none;\n	padding: 0;\n	font: inherit;\n	cursor: pointer;\n	outline: inherit;\n    font-weight: bold;\n}\n\nbutton:focus {\n    outline: revert;\n}\n.section-name{\n    color: hsla(0, 0%, 100%, 0.7);\n}"));
+      elementStyle.appendChild(document.createTextNode(".card{\n    /* border-radius: 20px; */\n    color: var(--card-text-color, white);\n}\n\n.card.glass{\n    background-color: color-mix(in oklch, var(--glass-color), transparent 80%);\n    border: 1px solid color-mix(in oklch, var(--glass-color), transparent 40%);\n    -webkit-backface-visibility: hidden;\n    -webkit-perspective: 1000;\n    -webkit-transform: translate3d(0,0,0);\n    -webkit-transform: translateZ(0);\n    backface-visibility: hidden;\n    perspective: 1000;\n    transform: translate3d(0,0,0);\n    transform: translateZ(0);\n}\n\n.card.mate{\n    background-color: var(--glass-color);\n}\n\n.card.outlined{\n    border: solid white 2px;\n}\n\nbutton .card.ghost:hover, button .card.outlined:hover{\n    background: color-mix(in oklch, var(--glass-color), transparent 80%);\n}\n\nbutton .card.glass:hover{\n    box-shadow: 0 4px 10px color-mix(in oklch, var(--glass-color), transparent 85%);\n}\n\nbutton .card.mate:hover{\n    background-color: color-mix(in oklch, var(--glass-color), white 10%) \n}\nbutton{\n    background: none;\n	color: inherit;\n	border: none;\n	padding: 0;\n	font: inherit;\n	cursor: pointer;\n	outline: inherit;\n    font-weight: bold;\n}\n\nbutton:focus {\n    outline: revert;\n}\n.section-name{\n    color: hsla(0, 0%, 100%, 0.7);\n}input:disabled{\n    color: hsla(0, 0%, 100%, 0.5);\n    font-weight: bold;\n}\n\ninput::-moz-placeholder{\n    color: hsla(0, 0%, 100%, 0.5);\n    \n}\n\ninput::placeholder{\n    color: hsla(0, 0%, 100%, 0.5);\n    \n}\n\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput:focus{\n    outline: none;\n}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -228,12 +228,25 @@ function Checkbox({ label, checkedDefault = false, onChange }) {
 function SectionName({ section, className }) {
   return /* @__PURE__ */ jsx("div", { className: `uppercase font-bold tracking-[0.15rem] w-fit section-name ${className}`, children: section });
 }
+function Input({ type, value, disabled, placeholder, size, maxLength, onChange, iconPosition = "left", centerText = false, icon, className, ...cardProps }) {
+  function inputUpdated(ev) {
+    onChange == null ? void 0 : onChange(ev.target.value);
+  }
+  const classnames = `flex`;
+  const inputClassName = `flex justify-center items-center border-none bg-none py-[0.5rem] px-[1rem] m-0 w-full ${centerText ? "text-center" : ""}`;
+  const directionClassName = iconPosition === "left" ? "pl-2" : "flex-row-reverse pr-2";
+  return /* @__PURE__ */ jsx("div", { className: classnames, children: /* @__PURE__ */ jsxs(Card, { className: `flex justify-center items-center rounded-md ${className} ${icon ? directionClassName : ""}`, noBlur: true, noPadding: true, ...cardProps, style: cardProps.style, children: [
+    icon && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: icon }),
+    /* @__PURE__ */ jsx("input", { className: inputClassName, onChange: inputUpdated, placeholder, value, disabled, type, size, maxLength, style: cardProps.style })
+  ] }) });
+}
 export {
   Avatar,
   Badge,
   Button,
   Card,
   Checkbox,
+  Input,
   SectionName
 };
 //# sourceMappingURL=index.esm.js.map