@1doc/1ds-react 0.0.1

package/dist/components/Grid/Grid.css

@@ -0,0 +1,154 @@
+/* Base Grid Style - GENERATED FILE - DO NOT EDIT MANUALLY */
+.umds-grid {
+  box-sizing: border-box;
+}
+
+/* Container Styles */
+.umds-grid--container {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap; /* Default wrap */
+}
+
+/* Flex Properties */
+.umds-grid--wrap-nowrap { flex-wrap: nowrap; }
+.umds-grid--wrap-wrap { flex-wrap: wrap; }
+.umds-grid--wrap-wrap-reverse { flex-wrap: wrap-reverse; }
+
+.umds-grid--direction-row { flex-direction: row; }
+.umds-grid--direction-row-reverse { flex-direction: row-reverse; }
+.umds-grid--direction-column { flex-direction: column; }
+.umds-grid--direction-column-reverse { flex-direction: column-reverse; }
+
+.umds-grid--justify-flex-start { justify-content: flex-start; }
+.umds-grid--justify-center { justify-content: center; }
+.umds-grid--justify-flex-end { justify-content: flex-end; }
+.umds-grid--justify-space-between { justify-content: space-between; }
+.umds-grid--justify-space-around { justify-content: space-around; }
+.umds-grid--justify-space-evenly { justify-content: space-evenly; }
+
+.umds-grid--align-flex-start { align-items: flex-start; }
+.umds-grid--align-center { align-items: center; }
+.umds-grid--align-flex-end { align-items: flex-end; }
+.umds-grid--align-stretch { align-items: stretch; }
+.umds-grid--align-baseline { align-items: baseline; }
+
+/* Item Styles */
+.umds-grid--item {
+  margin: 0;
+}
+
+/* Helper for gap calculation */
+/* Formula: calc(P% - (1 - P/100) * gap) */
+
+/* XS (Mobile / Default) */
+.umds-grid--xs-auto { flex-grow: 1; max-width: none; flex-basis: auto; }
+.umds-grid--xs-grow { flex-grow: 1; max-width: 100%; flex-basis: 0; }
+.umds-grid--xs-1 { flex-basis: calc(8.333333% - ((0.916667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(8.333333% - ((0.916667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xs-2 { flex-basis: calc(16.666667% - ((0.833333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(16.666667% - ((0.833333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xs-3 { flex-basis: calc(25.000000% - ((0.750000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(25.000000% - ((0.750000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xs-4 { flex-basis: calc(33.333333% - ((0.666667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(33.333333% - ((0.666667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xs-5 { flex-basis: calc(41.666667% - ((0.583333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(41.666667% - ((0.583333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xs-6 { flex-basis: calc(50.000000% - ((0.500000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(50.000000% - ((0.500000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xs-7 { flex-basis: calc(58.333333% - ((0.416667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(58.333333% - ((0.416667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xs-8 { flex-basis: calc(66.666667% - ((0.333333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(66.666667% - ((0.333333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xs-9 { flex-basis: calc(75.000000% - ((0.250000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(75.000000% - ((0.250000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xs-10 { flex-basis: calc(83.333333% - ((0.166667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(83.333333% - ((0.166667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xs-11 { flex-basis: calc(91.666667% - ((0.083333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(91.666667% - ((0.083333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xs-12 { flex-basis: calc(100.000000% - ((0.000000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(100.000000% - ((0.000000) * var(--umds-grid-gap, 0px))); }
+
+
+/* SM */
+@media (min-width: 640px) {
+.umds-grid--sm-auto { flex-grow: 1; max-width: none; flex-basis: auto; }
+.umds-grid--sm-grow { flex-grow: 1; max-width: 100%; flex-basis: 0; }
+.umds-grid--sm-1 { flex-basis: calc(8.333333% - ((0.916667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(8.333333% - ((0.916667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--sm-2 { flex-basis: calc(16.666667% - ((0.833333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(16.666667% - ((0.833333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--sm-3 { flex-basis: calc(25.000000% - ((0.750000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(25.000000% - ((0.750000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--sm-4 { flex-basis: calc(33.333333% - ((0.666667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(33.333333% - ((0.666667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--sm-5 { flex-basis: calc(41.666667% - ((0.583333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(41.666667% - ((0.583333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--sm-6 { flex-basis: calc(50.000000% - ((0.500000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(50.000000% - ((0.500000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--sm-7 { flex-basis: calc(58.333333% - ((0.416667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(58.333333% - ((0.416667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--sm-8 { flex-basis: calc(66.666667% - ((0.333333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(66.666667% - ((0.333333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--sm-9 { flex-basis: calc(75.000000% - ((0.250000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(75.000000% - ((0.250000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--sm-10 { flex-basis: calc(83.333333% - ((0.166667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(83.333333% - ((0.166667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--sm-11 { flex-basis: calc(91.666667% - ((0.083333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(91.666667% - ((0.083333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--sm-12 { flex-basis: calc(100.000000% - ((0.000000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(100.000000% - ((0.000000) * var(--umds-grid-gap, 0px))); }
+
+}
+
+/* MD */
+@media (min-width: 768px) {
+.umds-grid--md-auto { flex-grow: 1; max-width: none; flex-basis: auto; }
+.umds-grid--md-grow { flex-grow: 1; max-width: 100%; flex-basis: 0; }
+.umds-grid--md-1 { flex-basis: calc(8.333333% - ((0.916667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(8.333333% - ((0.916667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--md-2 { flex-basis: calc(16.666667% - ((0.833333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(16.666667% - ((0.833333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--md-3 { flex-basis: calc(25.000000% - ((0.750000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(25.000000% - ((0.750000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--md-4 { flex-basis: calc(33.333333% - ((0.666667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(33.333333% - ((0.666667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--md-5 { flex-basis: calc(41.666667% - ((0.583333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(41.666667% - ((0.583333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--md-6 { flex-basis: calc(50.000000% - ((0.500000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(50.000000% - ((0.500000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--md-7 { flex-basis: calc(58.333333% - ((0.416667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(58.333333% - ((0.416667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--md-8 { flex-basis: calc(66.666667% - ((0.333333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(66.666667% - ((0.333333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--md-9 { flex-basis: calc(75.000000% - ((0.250000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(75.000000% - ((0.250000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--md-10 { flex-basis: calc(83.333333% - ((0.166667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(83.333333% - ((0.166667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--md-11 { flex-basis: calc(91.666667% - ((0.083333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(91.666667% - ((0.083333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--md-12 { flex-basis: calc(100.000000% - ((0.000000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(100.000000% - ((0.000000) * var(--umds-grid-gap, 0px))); }
+
+}
+
+/* LG */
+@media (min-width: 1024px) {
+.umds-grid--lg-auto { flex-grow: 1; max-width: none; flex-basis: auto; }
+.umds-grid--lg-grow { flex-grow: 1; max-width: 100%; flex-basis: 0; }
+.umds-grid--lg-1 { flex-basis: calc(8.333333% - ((0.916667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(8.333333% - ((0.916667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--lg-2 { flex-basis: calc(16.666667% - ((0.833333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(16.666667% - ((0.833333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--lg-3 { flex-basis: calc(25.000000% - ((0.750000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(25.000000% - ((0.750000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--lg-4 { flex-basis: calc(33.333333% - ((0.666667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(33.333333% - ((0.666667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--lg-5 { flex-basis: calc(41.666667% - ((0.583333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(41.666667% - ((0.583333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--lg-6 { flex-basis: calc(50.000000% - ((0.500000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(50.000000% - ((0.500000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--lg-7 { flex-basis: calc(58.333333% - ((0.416667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(58.333333% - ((0.416667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--lg-8 { flex-basis: calc(66.666667% - ((0.333333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(66.666667% - ((0.333333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--lg-9 { flex-basis: calc(75.000000% - ((0.250000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(75.000000% - ((0.250000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--lg-10 { flex-basis: calc(83.333333% - ((0.166667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(83.333333% - ((0.166667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--lg-11 { flex-basis: calc(91.666667% - ((0.083333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(91.666667% - ((0.083333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--lg-12 { flex-basis: calc(100.000000% - ((0.000000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(100.000000% - ((0.000000) * var(--umds-grid-gap, 0px))); }
+
+}
+
+/* XL */
+@media (min-width: 1280px) {
+.umds-grid--xl-auto { flex-grow: 1; max-width: none; flex-basis: auto; }
+.umds-grid--xl-grow { flex-grow: 1; max-width: 100%; flex-basis: 0; }
+.umds-grid--xl-1 { flex-basis: calc(8.333333% - ((0.916667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(8.333333% - ((0.916667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xl-2 { flex-basis: calc(16.666667% - ((0.833333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(16.666667% - ((0.833333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xl-3 { flex-basis: calc(25.000000% - ((0.750000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(25.000000% - ((0.750000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xl-4 { flex-basis: calc(33.333333% - ((0.666667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(33.333333% - ((0.666667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xl-5 { flex-basis: calc(41.666667% - ((0.583333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(41.666667% - ((0.583333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xl-6 { flex-basis: calc(50.000000% - ((0.500000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(50.000000% - ((0.500000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xl-7 { flex-basis: calc(58.333333% - ((0.416667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(58.333333% - ((0.416667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xl-8 { flex-basis: calc(66.666667% - ((0.333333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(66.666667% - ((0.333333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xl-9 { flex-basis: calc(75.000000% - ((0.250000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(75.000000% - ((0.250000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xl-10 { flex-basis: calc(83.333333% - ((0.166667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(83.333333% - ((0.166667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xl-11 { flex-basis: calc(91.666667% - ((0.083333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(91.666667% - ((0.083333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xl-12 { flex-basis: calc(100.000000% - ((0.000000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(100.000000% - ((0.000000) * var(--umds-grid-gap, 0px))); }
+
+}
+
+/* XXL */
+@media (min-width: 1536px) {
+.umds-grid--xxl-auto { flex-grow: 1; max-width: none; flex-basis: auto; }
+.umds-grid--xxl-grow { flex-grow: 1; max-width: 100%; flex-basis: 0; }
+.umds-grid--xxl-1 { flex-basis: calc(8.333333% - ((0.916667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(8.333333% - ((0.916667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xxl-2 { flex-basis: calc(16.666667% - ((0.833333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(16.666667% - ((0.833333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xxl-3 { flex-basis: calc(25.000000% - ((0.750000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(25.000000% - ((0.750000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xxl-4 { flex-basis: calc(33.333333% - ((0.666667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(33.333333% - ((0.666667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xxl-5 { flex-basis: calc(41.666667% - ((0.583333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(41.666667% - ((0.583333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xxl-6 { flex-basis: calc(50.000000% - ((0.500000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(50.000000% - ((0.500000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xxl-7 { flex-basis: calc(58.333333% - ((0.416667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(58.333333% - ((0.416667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xxl-8 { flex-basis: calc(66.666667% - ((0.333333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(66.666667% - ((0.333333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xxl-9 { flex-basis: calc(75.000000% - ((0.250000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(75.000000% - ((0.250000) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xxl-10 { flex-basis: calc(83.333333% - ((0.166667) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(83.333333% - ((0.166667) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xxl-11 { flex-basis: calc(91.666667% - ((0.083333) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(91.666667% - ((0.083333) * var(--umds-grid-gap, 0px))); }
+.umds-grid--xxl-12 { flex-basis: calc(100.000000% - ((0.000000) * var(--umds-grid-gap, 0px))); flex-grow: 0; max-width: calc(100.000000% - ((0.000000) * var(--umds-grid-gap, 0px))); }
+
+}

package/dist/components/Grid/Grid.d.ts

@@ -0,0 +1,21 @@
+import './Grid.css';
+export interface GridProps {
+    alignItems?: "flex-start" | "center" | "flex-end" | "stretch" | "baseline";
+    children?: any;
+    container?: boolean;
+    direction?: "row" | "row-reverse" | "column" | "column-reverse";
+    item?: boolean;
+    justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+    lg?: boolean | number | "auto";
+    md?: boolean | number | "auto";
+    sm?: boolean | number | "auto";
+    spacing?: string;
+    wrap?: "nowrap" | "wrap" | "wrap-reverse";
+    xl?: boolean | number | "auto";
+    xxl?: boolean | number | "auto";
+    xs?: boolean | number | "auto";
+    className?: string;
+    [key: string]: any;
+}
+declare function Grid(props: GridProps): import("react/jsx-runtime").JSX.Element;
+export default Grid;

package/dist/components/Grid/Grid.js

@@ -0,0 +1,53 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import './Grid.css';
+function Grid(props) {
+    function classes() {
+        const classes = ["umds-grid"];
+        if (props.container) {
+            classes.push("umds-grid--container");
+            if (props.spacing) {
+                classes.push(`umds-grid--spacing-${props.spacing}`);
+            }
+            if (props.wrap)
+                classes.push(`umds-grid--wrap-${props.wrap}`);
+            if (props.direction)
+                classes.push(`umds-grid--direction-${props.direction}`);
+            if (props.justifyContent)
+                classes.push(`umds-grid--justify-${props.justifyContent}`);
+            if (props.alignItems)
+                classes.push(`umds-grid--align-${props.alignItems}`);
+        }
+        if (props.item) {
+            classes.push("umds-grid--item");
+            const sizes = {
+                xs: props.xs,
+                sm: props.sm,
+                md: props.md,
+                lg: props.lg,
+                xl: props.xl,
+                xxl: props.xxl,
+            };
+            Object.entries(sizes).forEach(([key, value]) => {
+                if (value !== undefined) {
+                    const sizeClass = value === true ? "grow" : value;
+                    classes.push(`umds-grid--${key}-${sizeClass}`);
+                }
+            });
+        }
+        if (props.className) {
+            classes.push(props.className);
+        }
+        return classes.filter(Boolean).join(" ");
+    }
+    function style() {
+        const style = {};
+        if (props.container && props.spacing) {
+            const gapValue = `var(--umds-primitive-spacing-${props.spacing})`;
+            style.gap = gapValue;
+            style["--umds-grid-gap"] = gapValue;
+        }
+        return style;
+    }
+    return (_jsx("div", { style: style(), ...props, className: classes(), children: _jsx(_Fragment, { children: props.children }) }));
+}
+export default Grid;

package/dist/components/Icon/Icon.css

@@ -0,0 +1,41 @@
+.umds-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+}
+
+.umds-icon svg {
+    width: 1em;
+    height: 1em;
+}
+
+/* Sizes */
+.umds-icon--sm {
+    font-size: 16px;
+}
+
+.umds-icon--md {
+    font-size: 20px;
+}
+
+.umds-icon--lg {
+    font-size: 24px;
+}
+
+/* Variants */
+.umds-icon--primary {
+    color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-icon--secondary {
+    color: var(--umds-semantic-color-primary-medium);
+}
+
+.umds-icon--neutral {
+    color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-icon--inherit {
+    color: inherit;
+}

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,12 @@
+import './Icon.css';
+export interface IconProps {
+    name?: string;
+    component?: any;
+    size?: "sm" | "md" | "lg";
+    customSize?: string;
+    variant?: "primary" | "secondary" | "neutral" | "inherit";
+    className?: string;
+    [key: string]: any;
+}
+declare function Icon(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default Icon;

package/dist/components/Icon/Icon.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Icon.css';
+function Icon(props) {
+    function classes() {
+        return [
+            "umds-icon",
+            props.name ? `iconoir-${props.name}` : "",
+            // Only apply size class if customSize is not provided
+            props.customSize ? "" : `umds-icon--${props.size || "md"}`,
+            `umds-icon--${props.variant || "inherit"}`,
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function style() {
+        // If customSize is provided, use it for width and height
+        if (props.customSize) {
+            return {
+                width: props.customSize,
+                height: props.customSize,
+                fontSize: props.customSize,
+            };
+        }
+        return undefined;
+    }
+    return (_jsx("span", { style: style(), ...props, className: classes(), children: props.component ? _jsx(props.component, {}) : null }));
+}
+export default Icon;

package/dist/components/Input/Input.css

@@ -0,0 +1,190 @@
+/* Base Wrapper */
+.umds-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-nano);
+  /* 1.5 spacing unit fallback */
+  font-family: var(--umds-semantic-font-family-base);
+  width: 320px;
+  /* Default width */
+}
+
+.umds-input--full-width {
+  width: 100%;
+}
+
+/* Label */
+.umds-input__label {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  /* Font styles handled by Text component */
+}
+
+.umds-input__required {
+  color: var(--umds-semantic-color-feedback-negative-pure);
+  font-weight: bold;
+}
+
+/* Input Container (Box) */
+.umds-input__container {
+  display: flex;
+  align-items: center;
+  position: relative;
+  background-color: var(--umds-semantic-color-background-white);
+  border: 1px solid var(--umds-semantic-color-neutral-dark-up);
+  border-radius: var(--umds-primitive-border-radius-sm);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* Sizes */
+.umds-input--md .umds-input__container {
+  height: var(--umds-primitive-spacing-sm);
+  padding: 0 var(--umds-primitive-spacing-xxxs);
+}
+
+.umds-input--lg .umds-input__container {
+  height: var(--umds-primitive-spacing-md);
+  padding: 0 var(--umds-primitive-spacing-xxs);
+}
+
+.umds-input--sm .umds-input__container {
+  height: var(--umds-primitive-spacing-xs);
+  padding: 0 var(--umds-primitive-spacing-nano);
+}
+
+.umds-input--xs .umds-input__container {
+  height: var(--umds-primitive-spacing-xxs);
+  padding: 0 var(--umds-primitive-spacing-nano);
+}
+
+/* Control (Input element) */
+.umds-input__control {
+  flex: 1;
+  border: none;
+  background: transparent;
+  outline: none;
+  color: var(--umds-semantic-color-neutral-pure);
+  font-size: var(--umds-primitive-font-size-xs);
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.umds-input__control::placeholder {
+  color: var(--umds-semantic-color-neutral-light-down);
+}
+
+.umds-input--lg .umds-input__control {
+  font-size: var(--umds-primitive-font-size-sm);
+}
+
+.umds-input--sm .umds-input__control {
+  font-size: var(--umds-primitive-font-size-xxs);
+}
+
+.umds-input--xs .umds-input__control {
+  font-size: var(--umds-primitive-font-size-xxxs);
+}
+
+/* States */
+.umds-input__container:hover {
+  border-color: var(--umds-semantic-color-neutral-dark-up);
+}
+
+.umds-input__container:focus-within {
+  /* Match Button Focus Style */
+  outline: 2px solid var(--umds-semantic-color-neutral-dark-down);
+  outline-offset: 2px;
+  border-color: var(--umds-semantic-color-neutral-light-medium);
+  /* Keep original border */
+}
+
+/* Error State */
+.umds-input--error .umds-input__container {
+  border-color: var(--umds-semantic-color-feedback-negative-pure);
+}
+
+.umds-input--error .umds-input__container:focus-within {
+  outline: 2px solid var(--umds-semantic-color-feedback-negative-pure);
+  border-color: var(--umds-semantic-color-feedback-negative-pure);
+}
+
+/* Disabled State */
+.umds-input--disabled .umds-input__label,
+.umds-input--disabled .umds-input__message {
+  color: var(--umds-semantic-color-neutral-light-down);
+}
+
+.umds-input--disabled .umds-input__container {
+  background-color: var(--umds-semantic-color-neutral-light-medium);
+  border-color: var(--umds-semantic-color-neutral-light-down);
+  pointer-events: none;
+  /* Prevent interaction */
+}
+
+.umds-input--disabled .umds-input__control {
+  color: var(--umds-semantic-color-neutral-light-down);
+  -webkit-text-fill-color: var(--umds-semantic-color-neutral-light-down);
+  /* Fix for Safari/Chrome disabled text color */
+}
+
+.umds-input--disabled .umds-input__icon-left,
+.umds-input--disabled .umds-input__actions-right {
+  color: var(--umds-semantic-color-neutral-light-down);
+  opacity: 1;
+}
+
+.umds-input--disabled .umds-input__required {
+  opacity: 0.3;
+}
+
+/* Ensure cursor is applied effectively */
+.umds-input--disabled,
+.umds-input--disabled input,
+.umds-input--disabled button {
+  cursor: not-allowed;
+}
+
+/* Read Only State */
+.umds-input--readonly .umds-input__container {
+  background-color: var(--umds-semantic-color-background-light);
+  border-color: var(--umds-semantic-color-neutral-light-medium);
+}
+
+/* Icons */
+.umds-input__icon-left {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: var(--umds-primitive-spacing-nano);
+  color: var(--umds-semantic-color-neutral-dark-up);
+}
+
+.umds-input__actions-right {
+  display: flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-nano);
+  margin-left: var(--umds-primitive-spacing-nano);
+}
+
+.umds-input__action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--umds-semantic-color-neutral-dark-up);
+  transition: color 0.15s ease;
+}
+
+.umds-input__action-btn:hover {
+  color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-input__action-btn:focus {
+  outline: none;
+  color: var(--umds-semantic-color-primary-dark);
+}

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,32 @@
+import './Input.css';
+export interface InputAction {
+    icon: any;
+    onClick?: (event: any) => void;
+    label?: string;
+    tooltip?: string;
+}
+export interface InputProps {
+    label?: any;
+    type?: "text" | "password" | "email" | "number" | "tel" | "url" | "search";
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    helperText?: any;
+    errorMessage?: any;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    size?: "xs" | "sm" | "md" | "lg";
+    fullWidth?: boolean;
+    className?: string;
+    iconLeft?: any;
+    iconsRight?: InputAction[];
+    onChange?: (event: any) => void;
+    onFocus?: (event: any) => void;
+    onBlur?: (event: any) => void;
+    mask?: string;
+    [key: string]: any;
+}
+declare function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;
+export default Input;

package/dist/components/Input/Input.js

@@ -0,0 +1,58 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Input.css';
+"use client";
+import { useState } from "react";
+import Icon from "../Icon/Icon";
+import Text from "../Text/Text";
+function Input(props) {
+    const [isPasswordVisible, setIsPasswordVisible] = useState(() => false);
+    function togglePassword() {
+        setIsPasswordVisible(!isPasswordVisible);
+    }
+    const [internalValue, setInternalValue] = useState(() => props.defaultValue);
+    function inputType() {
+        if (props.type === "password" && isPasswordVisible) {
+            return "text";
+        }
+        return props.type || "text";
+    }
+    function wrapperClasses() {
+        const hasError = props.errorMessage && props.errorMessage.length > 0;
+        return [
+            "umds-input",
+            props.fullWidth ? "umds-input--full-width" : "",
+            hasError ? "umds-input--error" : "",
+            props.disabled ? "umds-input--disabled" : "",
+            props.readOnly ? "umds-input--readonly" : "",
+            `umds-input--${props.size || "md"}`,
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function inputContainerClasses() {
+        const hasError = props.errorMessage && props.errorMessage.length > 0;
+        return [
+            "umds-input__container",
+            hasError ? "umds-input__container--error" : "",
+            props.disabled ? "umds-input__container--disabled" : "",
+            props.readOnly ? "umds-input__container--readonly" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function iconSize() {
+        return props.size === "sm" || props.size === "xs" ? "sm" : "md";
+    }
+    function handleChange(event) {
+        setInternalValue(event.target.value);
+        if (props.onChange) {
+            props.onChange(event);
+        }
+    }
+    return (_jsxs("div", { className: wrapperClasses(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-input__label", children: [_jsx(_Fragment, { children: props.label || "{props.label}" }), props.required ? (_jsx("span", { className: "umds-input__required", children: "*" })) : null] })) : null, _jsxs("div", { className: inputContainerClasses(), children: [props.iconLeft ? (_jsx("div", { className: "umds-input__icon-left", children: typeof props.iconLeft === "string" ? (_jsx(Icon, { name: props.iconLeft, size: iconSize() })) : (_jsx(_Fragment, { children: props.iconLeft || "{props.iconLeft}" })) })) : null, _jsx("input", { className: "umds-input__control", type: inputType(), name: props.name, disabled: props.disabled, readOnly: props.readOnly, placeholder: props.placeholder, value: props.value !== undefined ? props.value : internalValue, defaultValue: props.defaultValue, onChange: (event) => handleChange(event), onFocus: (event) => props.onFocus?.(event), onBlur: (event) => props.onBlur?.(event), "aria-invalid": !!(props.errorMessage && props.errorMessage.length > 0), required: props.required }), _jsxs("div", { className: "umds-input__actions-right", children: [props.type === "password" ? (_jsx("button", { type: "button", className: "umds-input__action-btn", onClick: (event) => togglePassword(), "aria-label": isPasswordVisible ? "Ocultar senha" : "Mostrar senha", children: _jsx(Icon, { name: isPasswordVisible ? "eye-closed" : "eye-solid", size: iconSize() }) })) : null, props.iconsRight?.length ? (_jsx(_Fragment, { children: props.iconsRight?.map((action, index) => (_jsxs("button", { type: "button", className: "umds-input__action-btn", onClick: (e) => {
+                                        e.stopPropagation();
+                                        action.onClick?.(e);
+                                    }, title: action.tooltip, "aria-label": action.label || action.tooltip, children: [typeof action.icon === "string" ? (_jsx(Icon, { name: action.icon, size: iconSize() })) : null, typeof action.icon !== "string" ? _jsx(_Fragment, { children: action.icon }) : null] }))) })) : null] })] }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "error", children: props.errorMessage })) : null, props.helperText ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", children: _jsx(_Fragment, { children: props.helperText || "{props.helperText}" }) })) : null] }));
+}
+export default Input;