@maelstrom-futurism/input 0.7.4-alpha.9

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright 2025 OSMstudios
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/Input.d.ts

@@ -0,0 +1,48 @@
+import React, { HTMLInputTypeAttribute } from "react";
+export type Variant = "normal" | "material";
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Normal or Material variant
+     */
+    variant?: Variant;
+    /**
+     * A valid HTML5 type. (Required)
+     */
+    type: HTMLInputTypeAttribute;
+    /**
+     * A unique (in form) field name (Required)
+     */
+    name: string;
+    /**
+     * The label to display above the input.  Leave blank to hide.
+     */
+    label?: string;
+    /**
+     * Text to use as a placeholder
+     */
+    placeholder?: string;
+    /**
+     * Use textarea?
+     */
+    multiline?: boolean;
+    /**
+     * Literal input value for use outside traditional form
+     */
+    value?: string;
+    /**
+     * Is this input required? Used by FormValidator
+     */
+    required?: boolean;
+    /**
+     * Value used for preloaded state
+     */
+    defaultValue?: string;
+    /**
+     * Called whenever the value changes. For use of Inputs outside traditional forms
+     */
+    onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
+    forwardedRef?: any;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<unknown>>;
+export default Input;
+//# sourceMappingURL=Input.d.ts.map

package/dist/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../src/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAMtD,MAAM,MAAM,OAAO,GACb,QAAQ,GACR,UAAU,CAAC;AAEjB,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAE3E;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,IAAI,EAAE,sBAAsB,CAAC;IAE7B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE1D,YAAY,CAAC,EAAE,GAAG,CAAC;CACtB;AAED,QAAA,MAAM,KAAK,4EAoBT,CAAC;AAIH,eAAe,KAAK,CAAC"}

package/dist/Input.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import React from "react";
+import { useTheme } from "@maelstrom-futurism/core";
+import { fcContainer, materialStyledInput, normalStyledInput } from "./styles";
+const Input = React.forwardRef(({ variant = "normal", type, name, label, ...rest }, ref) => {
+    const theme = useTheme();
+    const isMaterial = variant === "material";
+    const additionalStyles = isMaterial ? materialStyledInput(theme) : normalStyledInput(theme);
+    return (_jsxs("div", { css: [fcContainer, additionalStyles], children: [_jsx("input", { id: name, name: name, type: type, ref: ref, placeholder: " ", ...rest }), label && _jsx("label", { htmlFor: name, children: label }), isMaterial && _jsx("span", { className: "underline" })] }));
+});
+export default Input;
+//# sourceMappingURL=Input.js.map

package/dist/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../src/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AA8D/E,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAE,OAAO,GAAG,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,EAAc,EAAE,GAAS,EAAE,EAAE;IACzG,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,OAAO,KAAK,UAAU,CAAC;IAE1C,MAAM,gBAAgB,GAAG,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAA;IAE3F,OAAO,CACL,eAAK,GAAG,EAAE,CAAC,WAAW,EAAE,gBAAgB,CAAC,aACrC,gBACM,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,WAAW,EAAC,GAAG,KACX,IAAI,GACZ,EACD,KAAK,IAAI,gBAAO,OAAO,EAAE,IAAI,YAAG,KAAK,GAAS,EAC9C,UAAU,IAAI,eAAM,SAAS,EAAC,WAAW,GAAG,IAC3C,CACP,CAAC;AACN,CAAC,CAAC,CAAC;AAIH,eAAe,KAAK,CAAC"}

package/dist/Textarea.d.ts

@@ -0,0 +1,10 @@
+interface TextAreaProps extends React.ClassAttributes<HTMLTextAreaElement> {
+    name: string;
+    label: string;
+    rows?: number;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+declare const TextArea: ({ name, label, value, ...rest }: TextAreaProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default TextArea;
+//# sourceMappingURL=Textarea.d.ts.map

package/dist/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../src/Textarea.tsx"],"names":[],"mappings":"AAGA,UAAU,aAAc,SAAQ,KAAK,CAAC,eAAe,CAAC,mBAAmB,CAAC;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAClE;AAID,QAAA,MAAM,QAAQ,GAAI,iCAAiC,aAAa,qDAwB/D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/Textarea.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from "@emotion/react";
+import { useTheme } from "@maelstrom-futurism/core";
+const TextArea = ({ name, label, value, ...rest }) => {
+    const theme = useTheme();
+    const fcContainer = css `
+        margin-top: 0.5em;
+    `;
+    const textAreaStyles = css `
+        border: solid 1px ${theme.color("content")};
+        border-radius: ${theme.inputRadius};
+        padding: 0.5em 1em;
+        width: 100%;
+        font-size: 1em;
+        color: ${theme.color("textColor")};
+        background-color: ${theme.color("content")};
+        outline: 1px solid ${theme.color("secondary")};
+    `;
+    return (_jsxs("div", { css: fcContainer, children: [label && _jsx("label", { htmlFor: name, children: label }), _jsx("textarea", { css: textAreaStyles, ...rest })] }));
+};
+export default TextArea;
+//# sourceMappingURL=Textarea.js.map

package/dist/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../src/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAYpD,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,EAAiB,EAAE,EAAE;IAChE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,WAAW,GAAG,GAAG,CAAA;;KAEtB,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,CAAA;4BACF,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC;yBACzB,KAAK,CAAC,WAAW;;;;iBAIzB,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;4BACb,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC;6BACrB,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;KAChD,CAAC;IAEF,OAAO,CACH,eAAK,GAAG,EAAE,WAAW,aAChB,KAAK,IAAI,gBAAO,OAAO,EAAE,IAAI,YAAG,KAAK,GAAS,EAC/C,mBAAU,GAAG,EAAE,cAAc,KAAM,IAAI,GAAa,IAClD,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Input } from "./Input";
+export { default as TextArea } from "./Textarea";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as Input } from "./Input";
+export { default as TextArea } from "./Textarea";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/styles.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from '@maelstrom-futurism/core';
+export declare const fcContainer: import("@emotion/react").SerializedStyles;
+export declare const materialStyledInput: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const normalStyledInput: (theme: Theme) => import("@emotion/react").SerializedStyles;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAKjD,eAAO,MAAM,WAAW,2CAGvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,KAAK,8CAuD/C,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,8CA8C7C,CAAC"}

package/dist/styles.js

@@ -0,0 +1,110 @@
+import { css } from '@emotion/react';
+const EASE_FUNCTION = 'cubic-bezier(.65, .05, .36, 1)';
+export const fcContainer = css `
+    position: relative;
+    margin-top: 14px;
+`;
+export const materialStyledInput = (theme) => css `
+    input {
+        color: ${theme.color("textColor")};
+        width: 100%;
+        height: 3rem;
+        border: none;
+        border-bottom: solid 2px ${theme.color("secondary")};
+        background-color: transparent;
+        padding-left: 10px;
+        font-size: ${theme.size("base")};
+        transition: .1s ${EASE_FUNCTION};
+        outline: none;
+        box-sizing: border-box;
+    }
+
+    label {
+        position: absolute;
+        top: 50%;
+        left: 10px;
+        transform: translateY(-50%);
+        color: rgba(255, 255, 255, 0.5);
+        text-align: center;
+        transition: .2s ${EASE_FUNCTION};
+        font-size: 1.2rem;
+        pointer-events: none;
+    }
+
+    input:not(:placeholder-shown) ~ label,
+    input:focus ~ label {
+        top: 0px;
+        left: 10px;
+        font-size: 1rem;
+    }
+
+    & .underline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        transform: scaleX(0);
+        transition: transform 0.2s ${EASE_FUNCTION};
+        border-bottom: 2px solid ${theme.color("secondary")};
+    }
+
+    input:focus ~ .underline {
+        transform: scaleX(1);
+    }
+
+    input:hover {
+        border-bottom: 2px solid ${theme.color("textColor")};
+    }
+
+    input:focus ~ label {
+        color: ${theme.color("primary")} !important;
+    }
+`;
+export const normalStyledInput = (theme) => css `
+    background-color: inherit;
+
+    input {
+        color: ${theme.color("textColor")};
+        height: 3rem;
+        outline: 1px solid ${theme.color("secondary")};
+        border-radius: 5px;
+        border: none;
+        padding-left: 10px;
+        font-size: ${theme.size("base")};
+        transition: .1s ${EASE_FUNCTION};
+        background: transparent;
+        width: 100%;
+    }
+
+    label {
+        position: absolute;
+        top: 50%;
+        left: 10px;
+        transform: translateY(-50%);
+        color: rgba(255, 255, 255, 0.5);
+        background-color: inherit;
+        text-align: center;
+        transition: .2s ${EASE_FUNCTION};
+        font-size: 1.2rem;
+        pointer-events: none;
+        padding: 0 5px;
+    }
+
+    input:not(:placeholder-shown) ~ label,
+    input:focus ~ label {
+        top: 0px;
+        left: 10px;
+        font-size: 1rem;
+    }
+
+    input:focus {
+        outline: 1px solid ${theme.color("primary")} !important;
+    }
+    input:hover {
+        outline: 1px solid ${theme.color("textColor")};
+    }
+    input:focus ~ label {
+        color: ${theme.color("primary")} !important;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAIrC,MAAM,aAAa,GAAG,gCAAgC,CAAC;AAEvD,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;CAG7B,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAY,EAAE,EAAE,CAAC,GAAG,CAAA;;iBAEvC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;;;;mCAIN,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;;;qBAGtC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC;0BACb,aAAa;;;;;;;;;;;;0BAYb,aAAa;;;;;;;;;;;;;;;;;;qCAkBF,aAAa;mCACf,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;;;;;;;;mCAQxB,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;;;;iBAI1C,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC;;CAEtC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAY,EAAE,EAAE,CAAC,GAAG,CAAA;;;;iBAIrC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;;6BAEZ,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;;;;qBAIhC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC;0BACb,aAAa;;;;;;;;;;;;;0BAab,aAAa;;;;;;;;;;;;;;6BAcV,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC;;;6BAGtB,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;;;iBAGpC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC;;CAEtC,CAAC"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@maelstrom-futurism/input",
+  "version": "0.7.4-alpha.9",
+  "description": "Re-usable input components of MF",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "typings": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -Rf dist",
+    "test": "jest --env=jsdom --passWithNoTests",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DawsonG/maelstrom-futurism.git",
+    "directory": "packages/input"
+  },
+  "keywords": [
+    "input",
+    "material-ui"
+  ],
+  "author": "Dawson Goodell <dawsong@osmstudios.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/DawsonG/maelstrom-futurism/issues"
+  },
+  "homepage": "https://github.com/DawsonG/maelstrom-futurism#readme",
+  "dependencies": {
+    "@maelstrom-futurism/core": "^0.7.4-alpha.9"
+  },
+  "peerDependencies": {
+    "@emotion/react": ">= 11.10.5",
+    "react": ">= 18.0.0"
+  },
+  "gitHead": "8c49684db1a6002ee19db00c53ed2e9aac7e484b"
+}