@klu_dev/ui-klu-green 1.1.0 → 1.1.1

package/README.md

@@ -14,6 +14,8 @@ npm install @klu_dev/ui-klu-green
 - Input
 - Button
 - BackButton
+- Select
+- Typography
 
 ## Antes de comenzar a agregar componentes
 
@@ -147,4 +149,128 @@ export default function Navigation() {
     </div>
   )
 }
-```
+```
+
+## Uso Typography
+Componente versátil para el manejo de textos, títulos y etiquetas con soporte para puntos decorativos (showDot).
+
+```tsx
+import { Typography } from "@klu_dev/ui-klu-green"
+
+export default function TypographyExamples() {
+  return (
+    <div className="uiklu-flex uiklu-flex-col uiklu-gap-6 uiklu-p-8 uiklu-bg-black">
+      {/* Título principal con punto decorativo */}
+      <Typography size="xxxl" color="white" align="center" showDot>
+        BIENVENIDO A KLU
+      </Typography>
+
+      {/* Subtítulo alineado a la izquierda */}
+      <Typography size="xxl" color="primary" align="left">
+        Tu banca digital
+      </Typography>
+
+      {/* Cuerpo de texto con color base */}
+      <Typography size="md" color="white" align="left">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+        Sed do eiusmod tempor incididunt ut labore.
+      </Typography>
+
+      {/* Nota pequeña alineada a la derecha */}
+      <Typography size="xs" color="white" align="right">
+        Versión 2.0.0
+      </Typography>
+    </div>
+  )
+}
+```
+- **Props de Typography:**
+
+| Prop | Tipo | Descripción |
+| :--- | :--- | :--- |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl'` | Escala de tamaño de fuente. |
+| `color` | `'primary' \| 'white' \| 'black'` | Paleta de colores predefinida. |
+| `align` | `'left' \| 'center' \| 'right'` | Alineación horizontal del texto. |
+| `showDot` | `boolean` | Si es `true`, agrega un punto decorativo al final. |
+
+
+
+## Uso Select
+Componente de selección desplegable basado en Radix UI, con soporte para tamaños fijos, estado de error y scroll automático.
+- **Ejemplo básico:**
+```tsx
+import { 
+  Select, 
+  SelectTrigger, 
+  SelectValue, 
+  SelectContent, 
+  SelectItem 
+} from "@klu_dev/ui-klu-green"
+
+export default function BasicSelect() {
+  return (
+    <Select>
+      <SelectTrigger size="md">
+        <SelectValue placeholder="Selecciona un país" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="mx">México</SelectItem>
+        <SelectItem value="us">Estados Unidos</SelectItem>
+        <SelectItem value="es">España</SelectItem>
+      </SelectContent>
+    </Select>
+  )
+}
+```
+- **Validación y mensajes de error:**
+```tsx
+import { 
+  Select, 
+  SelectTrigger, 
+  SelectValue, 
+  SelectContent, 
+  SelectItem,
+  SelectErrorMessage 
+} from "@klu_dev/ui-klu-green"
+import { useState } from "react"
+
+export default function FormSelect() {
+  const [value, setValue] = useState("")
+  const [error, setError] = useState("")
+
+  const handleValidation = () => {
+    if (!value) setError("Debes seleccionar una opción para continuar")
+  }
+
+  return (
+    <div className="uiklu-flex uiklu-flex-col uiklu-gap-2">
+      <Select value={value} onValueChange={(val) => { setValue(val); setError(""); }}>
+        <SelectTrigger error={!!error} size="lg">
+          <SelectValue placeholder="Selecciona una opción" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="1">Plan Básico</SelectItem>
+          <SelectItem value="2">Plan Premium</SelectItem>
+        </SelectContent>
+      </Select>
+      
+      {/* Mensaje de error dedicado */}
+      <SelectErrorMessage message={error} />
+      
+      <button onClick={handleValidation} className="uiklu-mt-4">
+        Validar
+      </button>
+    </div>
+  )
+}
+```
+
+- **Props de Select:**
+
+
+| Size | Ancho (Width) | Clase CSS (uiklu) |
+| :--- | :--- | :--- |
+| `sm` | `150px` | `uiklu-w-[150px]` |
+| `md` | `250px` | `uiklu-w-[250px]` |
+| `lg` | `350px` | `uiklu-w-[350px]` |
+| `full` | `100%` | `uiklu-w-full` |

package/dist/index.css

@@ -145,6 +145,9 @@ button,
 .uiklu-relative{
     position: relative;
 }
+.uiklu-left-3{
+    left: 0.75rem;
+}
 .uiklu-right-6{
     right: 1.5rem;
 }
@@ -154,12 +157,18 @@ button,
 .uiklu-z-10{
     z-index: 10;
 }
+.uiklu-z-50{
+    z-index: 50;
+}
 .uiklu-m-0{
     margin: 0px;
 }
 .uiklu-mb-2{
     margin-bottom: 0.5rem;
 }
+.uiklu-ml-2{
+    margin-left: 0.5rem;
+}
 .uiklu-mt-1{
     margin-top: 0.25rem;
 }
@@ -175,6 +184,9 @@ button,
 .uiklu-inline-flex{
     display: inline-flex;
 }
+.uiklu-h-3\.5{
+    height: 0.875rem;
+}
 .uiklu-h-4{
     height: 1rem;
 }
@@ -199,9 +211,21 @@ button,
 .uiklu-h-full{
     height: 100%;
 }
+.uiklu-max-h-96{
+    max-height: 24rem;
+}
 .uiklu-max-h-\[60px\]{
     max-height: 60px;
 }
+.uiklu-min-h-\[500px\]{
+    min-height: 500px;
+}
+.uiklu-min-h-screen{
+    min-height: 100vh;
+}
+.uiklu-w-3\.5{
+    width: 0.875rem;
+}
 .uiklu-w-4{
     width: 1rem;
 }
@@ -229,6 +253,9 @@ button,
 .uiklu-w-\[600px\]{
     width: 600px;
 }
+.uiklu-w-\[var\(--radix-select-trigger-width\)\]{
+    width: var(--radix-select-trigger-width);
+}
 .uiklu-w-fit{
     width: -moz-fit-content;
     width: fit-content;
@@ -236,15 +263,39 @@ button,
 .uiklu-w-full{
     width: 100%;
 }
+.uiklu-min-w-\[150px\]{
+    min-width: 150px;
+}
+.uiklu-min-w-\[250px\]{
+    min-width: 250px;
+}
+.uiklu-min-w-\[350px\]{
+    min-width: 350px;
+}
+.uiklu-min-w-\[var\(--radix-select-trigger-width\)\]{
+    min-width: var(--radix-select-trigger-width);
+}
 .uiklu-max-w-\[600px\]{
     max-width: 600px;
 }
 .uiklu-flex-shrink-0{
     flex-shrink: 0;
 }
+.uiklu-shrink-0{
+    flex-shrink: 0;
+}
+.uiklu-translate-y-1{
+    --tw-translate-y: 0.25rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .uiklu-cursor-pointer{
     cursor: pointer;
 }
+.uiklu-select-none{
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+}
 .uiklu-appearance-none{
     -webkit-appearance: none;
        -moz-appearance: none;
@@ -262,12 +313,18 @@ button,
 .uiklu-justify-center{
     justify-content: center;
 }
+.uiklu-justify-between{
+    justify-content: space-between;
+}
 .uiklu-gap-1{
     gap: 0.25rem;
 }
 .uiklu-gap-1\.5{
     gap: 0.375rem;
 }
+.uiklu-gap-10{
+    gap: 2.5rem;
+}
 .uiklu-gap-2{
     gap: 0.5rem;
 }
@@ -286,6 +343,11 @@ button,
 .uiklu-overflow-hidden{
     overflow: hidden;
 }
+.uiklu-truncate{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 .uiklu-text-ellipsis{
     text-overflow: ellipsis;
 }
@@ -295,12 +357,21 @@ button,
 .uiklu-rounded-2xl{
     border-radius: 1rem;
 }
+.uiklu-rounded-\[20px\]{
+    border-radius: 20px;
+}
 .uiklu-rounded-\[48px\]{
     border-radius: 48px;
 }
 .uiklu-rounded-\[50px\]{
     border-radius: 50px;
 }
+.uiklu-rounded-full{
+    border-radius: 9999px;
+}
+.uiklu-rounded-none{
+    border-radius: 0px;
+}
 .uiklu-rounded-xl{
     border-radius: 0.75rem;
 }
@@ -345,6 +416,10 @@ button,
     --tw-border-opacity: 1;
     border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
+.uiklu-border-gray-700{
+    --tw-border-opacity: 1;
+    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
+}
 .uiklu-border-outlinesecondary{
     --tw-border-opacity: 1;
     border-color: hsl(var(--uiklu-outlinesecondary) / var(--tw-border-opacity, 1));
@@ -356,10 +431,22 @@ button,
 .uiklu-border-transparent{
     border-color: transparent;
 }
+.uiklu-bg-\[\#050a0a\]{
+    --tw-bg-opacity: 1;
+    background-color: rgb(5 10 10 / var(--tw-bg-opacity, 1));
+}
 .uiklu-bg-background{
     --tw-bg-opacity: 1;
     background-color: hsl(var(--uiklu-background) / var(--tw-bg-opacity, 1));
 }
+.uiklu-bg-destructive{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-destructive) / var(--tw-bg-opacity, 1));
+}
+.uiklu-bg-gray-200{
+    --tw-bg-opacity: 1;
+    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
 .uiklu-bg-green-100{
     --tw-bg-opacity: 1;
     background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
@@ -405,9 +492,18 @@ button,
 .uiklu-p-0{
     padding: 0px;
 }
+.uiklu-p-1{
+    padding: 0.25rem;
+}
 .uiklu-p-10{
     padding: 2.5rem;
 }
+.uiklu-p-20{
+    padding: 5rem;
+}
+.uiklu-p-4{
+    padding: 1rem;
+}
 .uiklu-p-6{
     padding: 1.5rem;
 }
@@ -418,6 +514,10 @@ button,
     padding-left: 0.5rem;
     padding-right: 0.5rem;
 }
+.uiklu-px-3{
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+}
 .uiklu-px-4{
     padding-left: 1rem;
     padding-right: 1rem;
@@ -446,12 +546,31 @@ button,
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
 }
+.uiklu-py-2\.5{
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+}
+.uiklu-pl-10{
+    padding-left: 2.5rem;
+}
 .uiklu-pr-14{
     padding-right: 3.5rem;
 }
+.uiklu-pr-4{
+    padding-right: 1rem;
+}
+.uiklu-text-left{
+    text-align: left;
+}
 .uiklu-text-center{
     text-align: center;
 }
+.uiklu-text-right{
+    text-align: right;
+}
+.uiklu-text-justify{
+    text-align: justify;
+}
 .uiklu-font-mono{
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -476,6 +595,15 @@ button,
 .uiklu-text-\[18px\]{
     font-size: 18px;
 }
+.uiklu-text-\[24px\]{
+    font-size: 24px;
+}
+.uiklu-text-\[32px\]{
+    font-size: 32px;
+}
+.uiklu-text-\[40px\]{
+    font-size: 40px;
+}
 .uiklu-text-base{
     font-size: 1rem;
     line-height: 1.5rem;
@@ -496,21 +624,44 @@ button,
     font-size: 0.75rem;
     line-height: 1rem;
 }
+.uiklu-font-\[600\]{
+    font-weight: 600;
+}
+.uiklu-font-\[700\]{
+    font-weight: 700;
+}
 .uiklu-font-bold{
     font-weight: 700;
 }
 .uiklu-font-medium{
     font-weight: 500;
 }
+.uiklu-font-normal{
+    font-weight: 400;
+}
 .uiklu-uppercase{
     text-transform: uppercase;
 }
 .uiklu-leading-none{
     line-height: 1;
 }
+.uiklu-leading-normal{
+    line-height: 1.5;
+}
 .uiklu-leading-tight{
     line-height: 1.25;
 }
+.uiklu-tracking-wider{
+    letter-spacing: 0.05em;
+}
+.uiklu-text-\[\#F99B1C\]{
+    --tw-text-opacity: 1;
+    color: rgb(249 155 28 / var(--tw-text-opacity, 1));
+}
+.uiklu-text-baseblack{
+    --tw-text-opacity: 1;
+    color: hsl(var(--uiklu-baseblack) / var(--tw-text-opacity, 1));
+}
 .uiklu-text-basewhite{
     --tw-text-opacity: 1;
     color: hsl(var(--uiklu-basewhite) / var(--tw-text-opacity, 1));
@@ -527,6 +678,10 @@ button,
     --tw-text-opacity: 1;
     color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
+.uiklu-text-gray-600{
+    --tw-text-opacity: 1;
+    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
 .uiklu-text-green-700{
     --tw-text-opacity: 1;
     color: rgb(21 128 61 / var(--tw-text-opacity, 1));
@@ -546,13 +701,26 @@ button,
     --tw-text-opacity: 1;
     color: hsl(var(--uiklu-primary-foreground) / var(--tw-text-opacity, 1));
 }
+.uiklu-text-secondary{
+    --tw-text-opacity: 1;
+    color: hsl(var(--uiklu-secondary) / var(--tw-text-opacity, 1));
+}
 .uiklu-text-white{
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
+.uiklu-antialiased{
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
 .uiklu-opacity-70{
     opacity: 0.7;
 }
+.uiklu-shadow-md{
+    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .uiklu-outline-none{
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -567,6 +735,10 @@ button,
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
 }
+.hover\:uiklu-bg-gray-300:hover{
+    --tw-bg-opacity: 1;
+    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
+}
 .hover\:uiklu-bg-outlinesecondary\/10:hover{
     background-color: hsl(var(--uiklu-outlinesecondary) / 0.1);
 }
@@ -579,6 +751,9 @@ button,
 .hover\:uiklu-opacity-100:hover{
     opacity: 1;
 }
+.hover\:uiklu-opacity-80:hover{
+    opacity: 0.8;
+}
 .hover\:uiklu-opacity-90:hover{
     opacity: 0.9;
 }
@@ -593,6 +768,13 @@ button,
     --tw-border-opacity: 1;
     border-color: hsl(var(--uiklu-destructive) / var(--tw-border-opacity, 1));
 }
+.focus\:uiklu-bg-primary\/10:focus{
+    background-color: hsl(var(--uiklu-primary) / 0.1);
+}
+.focus\:uiklu-text-primary:focus{
+    --tw-text-opacity: 1;
+    color: hsl(var(--uiklu-primary) / var(--tw-text-opacity, 1));
+}
 .active\:uiklu-opacity-70:active{
     opacity: 0.7;
 }
@@ -602,4 +784,7 @@ button,
 .disabled\:uiklu-opacity-50:disabled{
     opacity: 0.5;
 }
+.data-\[placeholder\]\:uiklu-opacity-40[data-placeholder]{
+    opacity: 0.4;
+}
 

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@klu_dev/ui-klu-green",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Librería de componentes UI",
   "type": "module",
-
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-
-  "files": ["dist"],
-
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -20,12 +19,10 @@
       "import": "./dist/index.css"
     }
   },
-
   "peerDependencies": {
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
-
   "scripts": {
     "build": "tsup && npm run build:css",
     "build:css": "postcss src/index.css -o dist/index.css",
@@ -33,11 +30,11 @@
     "build-storybook": "storybook build",
     "dev": "vite"
   },
-
   "dependencies": {
     "@fontsource-variable/geist": "^5.2.8",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-toast": "^1.2.15",
     "class-variance-authority": "^0.7.1",
@@ -46,7 +43,6 @@
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0"
   },
-
   "devDependencies": {
     "@chromatic-com/storybook": "^5.1.1",
     "@eslint/js": "^9.39.4",
@@ -68,4 +64,4 @@
     "vite": "^8.0.4",
     "vite-plugin-dts": "^4.5.4"
   }
-}
+}