@beryl-ui/react 2.1.0 → 2.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Robson H. Rodrigues
+
+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/index.js

@@ -81,8 +81,8 @@ var import_styled_components = __toESM(require("styled-components"));
 var AvatarContainer = (0, import_styled_components.default)(Avatar.Root)`
   border-radius: ${({ theme: theme2 }) => theme2.radii.full};
   display: inline-block;
-  width: ${({ theme: theme2 }) => theme2.space[12]};
-  height: ${({ theme: theme2 }) => theme2.space[12]};
+  width: ${({ theme: theme2 }) => theme2.space[16]};
+  height: ${({ theme: theme2 }) => theme2.space[16]};
   overflow: hidden;
 `;
 var AvatarImage = (0, import_styled_components.default)(Avatar.Image)`
@@ -119,7 +119,7 @@ Avatar2.displayName = "Avatar";
 // src/components/Box/styles.ts
 var import_styled_components2 = require("styled-components");
 var BoxContainer = import_styled_components2.styled.div`
-  padding: ${({ theme: theme2 }) => theme2.space[4]};
+  padding: ${({ theme: theme2 }) => theme2.space[6]};
   border-radius: ${({ theme: theme2 }) => theme2.radii.md};
   background-color: ${({ theme: theme2 }) => theme2.colors.gray800};
   border: 1px solid ${({ theme: theme2 }) => theme2.colors.gray600};
@@ -157,6 +157,10 @@ var ButtonContainer = import_styled_components3.styled.button`
     cursor: not-allowed;
   }
 
+  &:focus {
+    box-shadow: 0 0 0 2px ${({ theme: theme2 }) => theme2.colors.gray100};
+  }
+
   svg {
     width: ${({ theme: theme2 }) => theme2.space[4]};
     height: ${({ theme: theme2 }) => theme2.space[4]};
@@ -437,12 +441,19 @@ var import_react2 = require("react");
 var import_styled_components9 = require("styled-components");
 var TextInputContainer = import_styled_components9.styled.div`
   background-color: ${({ theme: theme2 }) => theme2.colors.gray900};
-  padding: ${({ theme: theme2 }) => `${theme2.space[3]} ${theme2.space[4]}`};
   border-radius: ${({ theme: theme2 }) => theme2.radii.sm};
   box-sizing: border-box;
   border: 2px solid ${({ theme: theme2 }) => theme2.colors.gray900};
   display: flex;
-  align-items: baseline;
+  align-items: center;
+
+  padding: ${({ theme: theme2, size = "md" }) => {
+  const paddingMap = {
+    sm: `${theme2.space[2]} ${theme2.space[3]}`,
+    md: `${theme2.space[3]} ${theme2.space[4]}`
+  };
+  return paddingMap[size];
+}};
 
   &:has(input:focus) {
     border-color: ${({ theme: theme2 }) => theme2.colors.emerald300};

package/dist/index.mjs

@@ -39,8 +39,8 @@ import styled from "styled-components";
 var AvatarContainer = styled(Avatar.Root)`
   border-radius: ${({ theme: theme2 }) => theme2.radii.full};
   display: inline-block;
-  width: ${({ theme: theme2 }) => theme2.space[12]};
-  height: ${({ theme: theme2 }) => theme2.space[12]};
+  width: ${({ theme: theme2 }) => theme2.space[16]};
+  height: ${({ theme: theme2 }) => theme2.space[16]};
   overflow: hidden;
 `;
 var AvatarImage = styled(Avatar.Image)`
@@ -77,7 +77,7 @@ Avatar2.displayName = "Avatar";
 // src/components/Box/styles.ts
 import { styled as styled2 } from "styled-components";
 var BoxContainer = styled2.div`
-  padding: ${({ theme: theme2 }) => theme2.space[4]};
+  padding: ${({ theme: theme2 }) => theme2.space[6]};
   border-radius: ${({ theme: theme2 }) => theme2.radii.md};
   background-color: ${({ theme: theme2 }) => theme2.colors.gray800};
   border: 1px solid ${({ theme: theme2 }) => theme2.colors.gray600};
@@ -115,6 +115,10 @@ var ButtonContainer = styled3.button`
     cursor: not-allowed;
   }
 
+  &:focus {
+    box-shadow: 0 0 0 2px ${({ theme: theme2 }) => theme2.colors.gray100};
+  }
+
   svg {
     width: ${({ theme: theme2 }) => theme2.space[4]};
     height: ${({ theme: theme2 }) => theme2.space[4]};
@@ -395,12 +399,19 @@ import { forwardRef as forwardRef2 } from "react";
 import { styled as styled9 } from "styled-components";
 var TextInputContainer = styled9.div`
   background-color: ${({ theme: theme2 }) => theme2.colors.gray900};
-  padding: ${({ theme: theme2 }) => `${theme2.space[3]} ${theme2.space[4]}`};
   border-radius: ${({ theme: theme2 }) => theme2.radii.sm};
   box-sizing: border-box;
   border: 2px solid ${({ theme: theme2 }) => theme2.colors.gray900};
   display: flex;
-  align-items: baseline;
+  align-items: center;
+
+  padding: ${({ theme: theme2, size = "md" }) => {
+  const paddingMap = {
+    sm: `${theme2.space[2]} ${theme2.space[3]}`,
+    md: `${theme2.space[3]} ${theme2.space[4]}`
+  };
+  return paddingMap[size];
+}};
 
   &:has(input:focus) {
     border-color: ${({ theme: theme2 }) => theme2.colors.emerald300};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beryl-ui/react",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "React components for the beryl-ui Design System.",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -14,10 +14,11 @@
     "url": "https://github.com/Robson16"
   },
   "keywords": [
-    "ignite",
-    "rocketseat",
+    "design-system",
+    "react",
+    "components",
     "typescript",
-    "react"
+    "styled-components"
   ],
   "scripts": {
     "build": "tsup src/index.tsx --format esm,cjs --dts --external react,styled-components",