@giv-igniteui/react 2.0.0 → 2.0.1

package/dist/index.js

@@ -67,7 +67,15 @@ __export(index_exports, {
   MultiStep: () => MultiStep,
   Text: () => Text,
   TextArea: () => TextArea,
-  TextInput: () => TextInput
+  TextInput: () => TextInput,
+  config: () => config,
+  createTheme: () => createTheme,
+  css: () => css,
+  getCssText: () => getCssText,
+  globalCss: () => globalCss,
+  keyframes: () => keyframes,
+  styled: () => styled,
+  theme: () => theme
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -86,7 +94,8 @@ var colors = {
   ignite300: "#00B37E",
   ignite500: "#00875F",
   ignite700: "#015F43",
-  ignite900: "#00291D"
+  ignite900: "#00291D",
+  test: "#FFF"
 };
 var space = {
   1: "0.25rem",
@@ -174,7 +183,7 @@ var {
 
 // src/components/Box.tsx
 var Box = styled("div", {
-  padding: "$4",
+  padding: "$6",
   borderRadius: "$md",
   backgroundColor: "$gray800",
   border: "1px solid $gray600"
@@ -239,8 +248,8 @@ var Avatar = __toESM(require("@radix-ui/react-avatar"));
 var AvatarContainer = styled(Avatar.Root, {
   borderRadius: "$full",
   display: "inline-block",
-  width: "$12",
-  height: "$12",
+  width: "$16",
+  height: "$16",
   overflow: "hidden"
 });
 var AvatarImage = styled(Avatar.Image, {
@@ -297,6 +306,9 @@ var Button = styled("button", {
   "&:disabled": {
     cursor: "not-allowed"
   },
+  "&:focus": {
+    boxShadow: "0 0 0 2px $colors$gray-100"
+  },
   variants: {
     variant: {
       primary: {
@@ -347,6 +359,9 @@ var Button = styled("button", {
 });
 Button.displayName = "Button";
 
+// src/components/TextInput/index.tsx
+var import_react2 = require("react");
+
 // src/components/TextInput/styles.ts
 var TextInputContainer = styled("div", {
   backgroundColor: "$gray900",
@@ -355,13 +370,26 @@ var TextInputContainer = styled("div", {
   boxSizing: "border-box",
   border: "2px solid $gray900",
   display: "flex",
-  alignItems: "baseline",
+  alignItems: "center",
+  variants: {
+    size: {
+      sm: {
+        padding: "$3"
+      },
+      md: {
+        padding: "$4"
+      }
+    }
+  },
   "&:has(input:focus)": {
     borderColor: "$ignite300"
   },
   "&:has(input:disabled)": {
     opacity: 0.5,
     cursor: "not-allowed"
+  },
+  defaultVariants: {
+    size: "md"
   }
 });
 var Prefix = styled("span", {
@@ -384,20 +412,22 @@ var Input = styled("input", {
   "&:disabled": {
     cursor: "not-allowed"
   },
-  "&:placeholder": {
+  "&::placeholder": {
     color: "$gray400"
   }
 });
 
 // src/components/TextInput/index.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function TextInput(_a) {
-  var _b = _a, { prefix } = _b, props = __objRest(_b, ["prefix"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(TextInputContainer, { children: [
-    !!prefix && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Prefix, { children: prefix }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Input, __spreadValues({}, props))
-  ] });
-}
+var TextInput = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { prefix } = _b, props = __objRest(_b, ["prefix"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(TextInputContainer, { children: [
+      !!prefix && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Prefix, { children: prefix }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Input, __spreadValues({ ref }, props))
+    ] });
+  }
+);
 TextInput.displayName = "TextInput";
 
 // src/components/TextArea.tsx
@@ -449,7 +479,7 @@ var CheckboxContainer = styled(Checkbox.Root, {
   '&[data-state="checked"]': {
     backgroundColor: "$ignite300"
   },
-  "&:focus": {
+  '&:focus, &[data-state="checked"]': {
     border: "2px solid $ignite300"
   }
 });
@@ -542,5 +572,13 @@ MultiStep.displayName = "MultiStep";
   MultiStep,
   Text,
   TextArea,
-  TextInput
+  TextInput,
+  config,
+  createTheme,
+  css,
+  getCssText,
+  globalCss,
+  keyframes,
+  styled,
+  theme
 });

package/dist/index.mjs

@@ -45,7 +45,8 @@ var colors = {
   ignite300: "#00B37E",
   ignite500: "#00875F",
   ignite700: "#015F43",
-  ignite900: "#00291D"
+  ignite900: "#00291D",
+  test: "#FFF"
 };
 var space = {
   1: "0.25rem",
@@ -133,7 +134,7 @@ var {
 
 // src/components/Box.tsx
 var Box = styled("div", {
-  padding: "$4",
+  padding: "$6",
   borderRadius: "$md",
   backgroundColor: "$gray800",
   border: "1px solid $gray600"
@@ -198,8 +199,8 @@ import * as Avatar from "@radix-ui/react-avatar";
 var AvatarContainer = styled(Avatar.Root, {
   borderRadius: "$full",
   display: "inline-block",
-  width: "$12",
-  height: "$12",
+  width: "$16",
+  height: "$16",
   overflow: "hidden"
 });
 var AvatarImage = styled(Avatar.Image, {
@@ -256,6 +257,9 @@ var Button = styled("button", {
   "&:disabled": {
     cursor: "not-allowed"
   },
+  "&:focus": {
+    boxShadow: "0 0 0 2px $colors$gray-100"
+  },
   variants: {
     variant: {
       primary: {
@@ -306,6 +310,9 @@ var Button = styled("button", {
 });
 Button.displayName = "Button";
 
+// src/components/TextInput/index.tsx
+import { forwardRef } from "react";
+
 // src/components/TextInput/styles.ts
 var TextInputContainer = styled("div", {
   backgroundColor: "$gray900",
@@ -314,13 +321,26 @@ var TextInputContainer = styled("div", {
   boxSizing: "border-box",
   border: "2px solid $gray900",
   display: "flex",
-  alignItems: "baseline",
+  alignItems: "center",
+  variants: {
+    size: {
+      sm: {
+        padding: "$3"
+      },
+      md: {
+        padding: "$4"
+      }
+    }
+  },
   "&:has(input:focus)": {
     borderColor: "$ignite300"
   },
   "&:has(input:disabled)": {
     opacity: 0.5,
     cursor: "not-allowed"
+  },
+  defaultVariants: {
+    size: "md"
   }
 });
 var Prefix = styled("span", {
@@ -343,20 +363,22 @@ var Input = styled("input", {
   "&:disabled": {
     cursor: "not-allowed"
   },
-  "&:placeholder": {
+  "&::placeholder": {
     color: "$gray400"
   }
 });
 
 // src/components/TextInput/index.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function TextInput(_a) {
-  var _b = _a, { prefix } = _b, props = __objRest(_b, ["prefix"]);
-  return /* @__PURE__ */ jsxs2(TextInputContainer, { children: [
-    !!prefix && /* @__PURE__ */ jsx2(Prefix, { children: prefix }),
-    /* @__PURE__ */ jsx2(Input, __spreadValues({}, props))
-  ] });
-}
+var TextInput = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { prefix } = _b, props = __objRest(_b, ["prefix"]);
+    return /* @__PURE__ */ jsxs2(TextInputContainer, { children: [
+      !!prefix && /* @__PURE__ */ jsx2(Prefix, { children: prefix }),
+      /* @__PURE__ */ jsx2(Input, __spreadValues({ ref }, props))
+    ] });
+  }
+);
 TextInput.displayName = "TextInput";
 
 // src/components/TextArea.tsx
@@ -408,7 +430,7 @@ var CheckboxContainer = styled(Checkbox.Root, {
   '&[data-state="checked"]': {
     backgroundColor: "$ignite300"
   },
-  "&:focus": {
+  '&:focus, &[data-state="checked"]': {
     border: "2px solid $ignite300"
   }
 });
@@ -500,5 +522,13 @@ export {
   MultiStep,
   Text,
   TextArea,
-  TextInput
+  TextInput,
+  config,
+  createTheme,
+  css,
+  getCssText,
+  globalCss,
+  keyframes,
+  styled,
+  theme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@giv-igniteui/react",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/Avatar/index.tsx

@@ -1,18 +1,18 @@
-import { ComponentProps } from 'react'
-import { AvatarContainer, AvatarImage, AvatarFallback } from './styles'
-import { User } from 'phosphor-react'
-
-export interface AvatarProps extends ComponentProps<typeof AvatarImage> {}
-
-export function Avatar(props: AvatarProps) {
-  return (
-    <AvatarContainer>
-      <AvatarImage {...props} />
-      <AvatarFallback delayMs={600}>
-        <User />
-      </AvatarFallback>
-    </AvatarContainer>
-  )
-}
-
-Avatar.displayName = 'Avatar'
+import { ComponentProps } from 'react'
+import { AvatarContainer, AvatarImage, AvatarFallback } from './styles'
+import { User } from 'phosphor-react'
+
+export interface AvatarProps extends ComponentProps<typeof AvatarImage> {}
+
+export function Avatar(props: AvatarProps) {
+  return (
+    <AvatarContainer>
+      <AvatarImage {...props} />
+      <AvatarFallback delayMs={600}>
+        <User />
+      </AvatarFallback>
+    </AvatarContainer>
+  )
+}
+
+Avatar.displayName = 'Avatar'

package/src/components/Avatar/styles.ts

@@ -1,29 +1,29 @@
-import * as Avatar from '@radix-ui/react-avatar'
-import { styled } from '../../styles'
-
-export const AvatarContainer = styled(Avatar.Root, {
-  borderRadius: '$full',
-  display: 'inline-block',
-  width: '$12',
-  height: '$12',
-  overflow: 'hidden',
-})
-export const AvatarImage = styled(Avatar.Image, {
-  width: '100%',
-  height: '100%',
-  objectFit: 'cover',
-  borderRadius: '$full',
-})
-export const AvatarFallback = styled(Avatar.Fallback, {
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  backgroundColor: '$gray600',
-  color: '$gray800',
-  svg: {
-    width: '$6',
-    height: '$6',
-  },
-})
+import * as Avatar from '@radix-ui/react-avatar'
+import { styled } from '../../styles'
+
+export const AvatarContainer = styled(Avatar.Root, {
+  borderRadius: '$full',
+  display: 'inline-block',
+  width: '$16',
+  height: '$16',
+  overflow: 'hidden',
+})
+export const AvatarImage = styled(Avatar.Image, {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  borderRadius: '$full',
+})
+export const AvatarFallback = styled(Avatar.Fallback, {
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: '$gray600',
+  color: '$gray800',
+  svg: {
+    width: '$6',
+    height: '$6',
+  },
+})

package/src/components/Box.tsx

@@ -1,12 +1,12 @@
-import { ComponentProps } from 'react'
-import { styled } from '../styles'
-
-export const Box = styled('div', {
-  padding: '$4',
-  borderRadius: '$md',
-  backgroundColor: '$gray800',
-  border: '1px solid $gray600',
-})
-
-export interface BoxProps extends ComponentProps<typeof Box> {}
-Box.displayName = 'Box'
+import { ComponentProps } from 'react'
+import { styled } from '../styles'
+
+export const Box = styled('div', {
+  padding: '$6',
+  borderRadius: '$md',
+  backgroundColor: '$gray800',
+  border: '1px solid $gray600',
+})
+
+export interface BoxProps extends ComponentProps<typeof Box> {}
+Box.displayName = 'Box'

package/src/components/Button.tsx

@@ -1,84 +1,87 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-
-export const Button = styled('button', {
-  all: 'unset',
-  borderRadius: '$sm',
-  fontSize: '$sm',
-  fontWeight: '$medium',
-  fontFamily: '$default',
-  textAlign: 'center',
-  minWidth: 120,
-  boxSizing: 'border-box',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  gap: '$2',
-  cursor: 'pointer',
-  padding: '0 $4',
-
-  svg: {
-    width: '$4',
-    height: '$4',
-  },
-
-  '&:disabled': {
-    cursor: 'not-allowed',
-  },
-
-  variants: {
-    variant: {
-      primary: {
-        color: '$white',
-        background: '$ignite500',
-
-        '&:not(:disabled):hover': {
-          background: '$ignite300',
-        },
-        '&:disabled': {
-          backgroundColor: '$gray200',
-        },
-      },
-      secondary: {
-        color: '$ignite300',
-        border: '2px solid $ignite300',
-        '&:not(:disabled):hover': {
-          background: '$ignite500',
-          color: '$white',
-        },
-        '&:disabled': {
-          color: '$gray200',
-          borderColor: '$gray200',
-        },
-      },
-      tertiary: {
-        color: '$gray100',
-
-        '&:not(:disabled):hover': {
-          background: '$white',
-        },
-        '&:disabled': {
-          color: '$gray600',
-        },
-      },
-    },
-    size: {
-      sm: {
-        height: 38,
-      },
-      md: {
-        height: 46,
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'primary',
-    size: 'md',
-  },
-})
-
-export interface ButtonProps extends ComponentProps<typeof Button> {
-  as?: ElementType
-}
-
-Button.displayName = 'Button'
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+
+export const Button = styled('button', {
+  all: 'unset',
+  borderRadius: '$sm',
+  fontSize: '$sm',
+  fontWeight: '$medium',
+  fontFamily: '$default',
+  textAlign: 'center',
+  minWidth: 120,
+  boxSizing: 'border-box',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '$2',
+  cursor: 'pointer',
+  padding: '0 $4',
+
+  svg: {
+    width: '$4',
+    height: '$4',
+  },
+
+  '&:disabled': {
+    cursor: 'not-allowed',
+  },
+  '&:focus': {
+    boxShadow: '0 0 0 2px $colors$gray-100',
+  },
+
+  variants: {
+    variant: {
+      primary: {
+        color: '$white',
+        background: '$ignite500',
+
+        '&:not(:disabled):hover': {
+          background: '$ignite300',
+        },
+        '&:disabled': {
+          backgroundColor: '$gray200',
+        },
+      },
+      secondary: {
+        color: '$ignite300',
+        border: '2px solid $ignite300',
+        '&:not(:disabled):hover': {
+          background: '$ignite500',
+          color: '$white',
+        },
+        '&:disabled': {
+          color: '$gray200',
+          borderColor: '$gray200',
+        },
+      },
+      tertiary: {
+        color: '$gray100',
+
+        '&:not(:disabled):hover': {
+          background: '$white',
+        },
+        '&:disabled': {
+          color: '$gray600',
+        },
+      },
+    },
+    size: {
+      sm: {
+        height: 38,
+      },
+      md: {
+        height: 46,
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'md',
+  },
+})
+
+export interface ButtonProps extends ComponentProps<typeof Button> {
+  as?: ElementType
+}
+
+Button.displayName = 'Button'

package/src/components/Checkbox/index.tsx

@@ -1,20 +1,20 @@
-import { Check } from 'phosphor-react'
-import { CheckboxContainer, CheckboxIndicator } from './styles'
-import { ComponentProps } from 'react'
-
-export interface CheckboxProps
-  extends ComponentProps<typeof CheckboxContainer> {}
-
-// asChild: Funciona como um elemento filho: assim, CheckboxIndicator não criará um novo elemento na tela
-
-export function Checkbox(props: CheckboxProps) {
-  return (
-    <CheckboxContainer {...props}>
-      <CheckboxIndicator asChild>
-        <Check weight="bold" />
-      </CheckboxIndicator>
-    </CheckboxContainer>
-  )
-}
-
-Checkbox.displayName = 'Checkbox'
+import { Check } from 'phosphor-react'
+import { CheckboxContainer, CheckboxIndicator } from './styles'
+import { ComponentProps } from 'react'
+
+export interface CheckboxProps
+  extends ComponentProps<typeof CheckboxContainer> {}
+
+// asChild: Funciona como um elemento filho: assim, CheckboxIndicator não criará um novo elemento na tela
+
+export function Checkbox(props: CheckboxProps) {
+  return (
+    <CheckboxContainer {...props}>
+      <CheckboxIndicator asChild>
+        <Check weight="bold" />
+      </CheckboxIndicator>
+    </CheckboxContainer>
+  )
+}
+
+Checkbox.displayName = 'Checkbox'