@grupor5/raya 0.2.34 → 0.2.35

package/dist/index.js

@@ -4106,6 +4106,7 @@ function DatePickerWithRange({
     ] })
   ] });
 }
+var defaultIncludesFilter = (value, search) => value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;
 var Dropdown = React28__namespace.forwardRef(
   ({
     label,
@@ -4117,7 +4118,8 @@ var Dropdown = React28__namespace.forwardRef(
     name,
     error,
     helperText,
-    required
+    required,
+    filter
   }, ref) => {
     const [open, setOpen] = React28__namespace.useState(false);
     const [inputValue, setInputValue] = React28__namespace.useState("");
@@ -4163,6 +4165,7 @@ var Dropdown = React28__namespace.forwardRef(
         {
           ref: popoverRef,
           className: "relative",
+          filter: filter != null ? filter : defaultIncludesFilter,
           onKeyDown: (e) => {
             if (e.key === "Escape") {
               e.preventDefault();

package/dist/index.mjs

@@ -4075,6 +4075,7 @@ function DatePickerWithRange({
     ] })
   ] });
 }
+var defaultIncludesFilter = (value, search) => value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;
 var Dropdown = React28.forwardRef(
   ({
     label,
@@ -4086,7 +4087,8 @@ var Dropdown = React28.forwardRef(
     name,
     error,
     helperText,
-    required
+    required,
+    filter
   }, ref) => {
     const [open, setOpen] = React28.useState(false);
     const [inputValue, setInputValue] = React28.useState("");
@@ -4132,6 +4134,7 @@ var Dropdown = React28.forwardRef(
         {
           ref: popoverRef,
           className: "relative",
+          filter: filter != null ? filter : defaultIncludesFilter,
           onKeyDown: (e) => {
             if (e.key === "Escape") {
               e.preventDefault();

package/dist/molecules/dropdown/index.d.mts

@@ -15,6 +15,7 @@ interface DropdownProps {
     error?: string | boolean;
     helperText?: string;
     required?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
 }
 declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLInputElement>>;
 

package/dist/molecules/dropdown/index.d.ts

@@ -15,6 +15,7 @@ interface DropdownProps {
     error?: string | boolean;
     helperText?: string;
     required?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
 }
 declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLInputElement>>;
 

package/dist/molecules/dropdown/index.js

@@ -75,6 +75,7 @@ var Label = React2__namespace.forwardRef((_a, ref) => {
   );
 });
 Label.displayName = LabelPrimitive__namespace.Root.displayName;
+var defaultIncludesFilter = (value, search) => value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;
 var Dropdown = React2__namespace.forwardRef(
   ({
     label,
@@ -86,7 +87,8 @@ var Dropdown = React2__namespace.forwardRef(
     name,
     error,
     helperText,
-    required
+    required,
+    filter
   }, ref) => {
     const [open, setOpen] = React2__namespace.useState(false);
     const [inputValue, setInputValue] = React2__namespace.useState("");
@@ -132,6 +134,7 @@ var Dropdown = React2__namespace.forwardRef(
         {
           ref: popoverRef,
           className: "relative",
+          filter: filter != null ? filter : defaultIncludesFilter,
           onKeyDown: (e) => {
             if (e.key === "Escape") {
               e.preventDefault();

package/dist/molecules/dropdown/index.mjs

@@ -52,6 +52,7 @@ var Label = React2.forwardRef((_a, ref) => {
   );
 });
 Label.displayName = LabelPrimitive.Root.displayName;
+var defaultIncludesFilter = (value, search) => value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;
 var Dropdown = React2.forwardRef(
   ({
     label,
@@ -63,7 +64,8 @@ var Dropdown = React2.forwardRef(
     name,
     error,
     helperText,
-    required
+    required,
+    filter
   }, ref) => {
     const [open, setOpen] = React2.useState(false);
     const [inputValue, setInputValue] = React2.useState("");
@@ -109,6 +111,7 @@ var Dropdown = React2.forwardRef(
         {
           ref: popoverRef,
           className: "relative",
+          filter: filter != null ? filter : defaultIncludesFilter,
           onKeyDown: (e) => {
             if (e.key === "Escape") {
               e.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grupor5/raya",
-  "version": "0.2.34",
+  "version": "0.2.35",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -66,7 +66,8 @@
     "clean": "rm -rf dist",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test": "jest",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "validate-grid": "node ./scripts/validate-grid.js",
     "validate-colors": "node ./scripts/validate-colors.js",
     "validate-typography-colors": "node ./scripts/validate-typography-colors.js",
@@ -84,18 +85,22 @@
     "@storybook/addon-links": "8.6.14",
     "@storybook/react": "8.6.14",
     "@storybook/react-vite": "8.6.14",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/lodash": "^4.17.18",
     "@types/node": "^24.0.3",
     "@vitejs/plugin-react": "^4.5.2",
     "autoprefixer": "^10.4.21",
     "chromatic": "^13.0.1",
-    "jest": "^29.0.0",
+    "jsdom": "^28.0.0",
     "postcss": "^8.0.0",
     "tailwindcss": "^3.0.0",
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.5.0",
     "typescript": "^5.0.0",
-    "vite": "^6.3.5"
+    "vite": "^6.3.5",
+    "vitest": "^4.0.18"
   },
   "dependencies": {
     "@grupor5/raya-icons": "^0.1.6",

package/dist/typography-sizes-test.html

@@ -1,109 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Typography Sizes Test - Raya Design System</title>
-    <link rel="stylesheet" href="./tailwind.css">
-    <style>
-        body { font-family: 'Rubik', sans-serif; padding: 2rem; background: #f9fafb; }
-        .test-section { margin-bottom: 3rem; padding: 2rem; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
-        .test-item { margin-bottom: 1rem; padding: 1rem; border-left: 4px solid #8b859e; background: #faf9fb; }
-        .class-name { font-family: monospace; font-size: 12px; color: #706984; margin-bottom: 0.5rem; }
-        .size-info { font-family: monospace; font-size: 10px; color: #a8a3b6; }
-    </style>
-</head>
-<body>
-    <h1 class="text-display-xl" style="margin-bottom: 2rem; color: #8b859e;">Typography Sizes Test</h1>
-    <p style="margin-bottom: 2rem; color: #706984;">Testing all typography classes from the Raya Design System. Each text shows its actual rendered size.</p>
-    
-    <div class="test-section">
-        <h2 style="margin-bottom: 1rem; color: #8b859e;">Display Scale (NEW - Up to 60px)</h2>
-        
-        <div class="test-item">
-            <div class="class-name">text-display-xxl</div>
-            <div class="text-display-xxl">Display XXL - 60px</div>
-            <div class="size-info">60px / 72px line-height</div>
-        </div>
-        
-        <div class="test-item">
-            <div class="class-name">text-display-xl</div>
-            <div class="text-display-xl">Display XL - 56px</div>
-            <div class="size-info">56px / 68px line-height</div>
-        </div>
-        
-        <div class="test-item">
-            <div class="class-name">text-display-l</div>
-            <div class="text-display-l">Display L - 52px</div>
-            <div class="size-info">52px / 64px line-height</div>
-        </div>
-        
-        <div class="test-item">
-            <div class="class-name">text-display-m</div>
-            <div class="text-display-m">Display M - 48px</div>
-            <div class="size-info">48px / 60px line-height</div>
-        </div>
-        
-        <div class="test-item">
-            <div class="class-name">text-display-s</div>
-            <div class="text-display-s">Display S - 44px</div>
-            <div class="size-info">44px / 56px line-height</div>
-        </div>
-        
-        <div class="test-item">
-            <div class="class-name">text-display-xs</div>
-            <div class="text-display-xs">Display XS - 40px</div>
-            <div class="size-info">40px / 52px line-height</div>
-        </div>
-    </div>
-    
-    <div class="test-section">
-        <h2 style="margin-bottom: 1rem; color: #8b859e;">Heading Scale</h2>
-        
-        <div class="test-item">
-            <div class="class-name">text-heading-xl</div>
-            <div class="text-heading-xl">Heading XL - 36px</div>
-            <div class="size-info">36px / 44px line-height</div>
-        </div>
-        
-        <div class="test-item">
-            <div class="class-name">text-heading-lg</div>
-            <div class="text-heading-lg">Heading L - 32px</div>
-            <div class="size-info">32px / 40px line-height</div>
-        </div>
-        
-        <div class="test-item">
-            <div class="class-name">text-heading-md</div>
-            <div class="text-heading-md">Heading M - 28px</div>
-            <div class="size-info">28px / 36px line-height</div>
-        </div>
-        
-        <div class="test-item">
-            <div class="class-name">text-heading-sm</div>
-            <div class="text-heading-sm">Heading S - 24px</div>
-            <div class="size-info">24px / 32px line-height</div>
-        </div>
-    </div>
-    
-    <div class="test-section">
-        <h2 style="margin-bottom: 1rem; color: #8b859e;">Typography Component Tests</h2>
-        <p style="margin-bottom: 1rem; color: #706984;">Testing Typography component with new display variants:</p>
-        
-        <div class="test-item">
-            <div class="class-name">Typography variant="display-xxl"</div>
-            <div class="text-display-xxl">60px Typography Component</div>
-        </div>
-        
-        <div class="test-item">
-            <div class="class-name">Typography variant="display-xl"</div>
-            <div class="text-display-xl">56px Typography Component</div>
-        </div>
-        
-        <div class="test-item">
-            <div class="class-name">Typography variant="display-l"</div>
-            <div class="text-display-l">52px Typography Component</div>
-        </div>
-    </div>
-
-</body>
-</html>