@fragments-sdk/ui 0.8.7 → 0.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/ui",
-  "version": "0.8.7",
+  "version": "0.8.9",
   "license": "MIT",
   "description": "Customizable UI components built on Base UI headless primitives",
   "author": "Conan McNicholl",
@@ -113,7 +113,7 @@
     "@tanstack/react-table": "^8.21.3",
     "vitest": "^2.1.8",
     "vitest-axe": "^0.1.0",
-    "@fragments-sdk/cli": "0.7.10"
+    "@fragments-sdk/cli": "0.7.14"
   },
   "files": [
     "src",

package/src/assets/fragments-logo.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useTheme } from '../components/Theme';
 
 export interface FragmentsLogoProps {
   /** Size of the logo in pixels */
@@ -9,13 +8,11 @@ export interface FragmentsLogoProps {
 }
 
 export function FragmentsLogo({ size = 20, className }: FragmentsLogoProps) {
-  const { resolvedMode } = useTheme();
-
   return (
     <svg
       width={size}
       height={size}
-      viewBox="0 0 24 24"
+      viewBox="0 0 313 313"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
@@ -23,15 +20,19 @@ export function FragmentsLogo({ size = 20, className }: FragmentsLogoProps) {
       aria-label="Fragments"
       style={{
         display: 'block',
-        color: resolvedMode === 'light' ? 'var(--fui-text-primary, #1a1a1a)' : 'var(--fui-text-primary, #fafafa)',
-        transition: 'color 0.2s ease',
       }}
     >
       <path
-        d="M12 2L14.09 8.26L20.18 8.26L15.45 12.14L17.18 18.74L12 15.06L6.82 18.74L8.55 12.14L3.82 8.26L9.91 8.26L12 2Z"
+        d="M0 0 C0.66 0 1.32 0 2 0 C2.44915771 1.11036621 2.89831543 2.22073242 3.36108398 3.36474609 C5.02448839 7.47624399 6.68896082 11.58730879 8.35375977 15.69824219 C9.07475556 17.4790482 9.79545992 19.25997224 10.51586914 21.04101562 C11.55018113 23.59796585 12.58553337 26.15449267 13.62109375 28.7109375 C13.94403915 29.50994476 14.26698456 30.30895203 14.59971619 31.13217163 C16.19708004 35.11169509 16.19708004 35.11169509 18 39 C19.20124512 38.51007568 20.40249023 38.02015137 21.64013672 37.51538086 C26.08360877 35.70549367 30.53113526 33.90576527 34.97998047 32.10913086 C36.90754131 31.32903603 38.8339805 30.54616387 40.75927734 29.76049805 C43.52153337 28.63384447 46.28762525 27.51713176 49.0546875 26.40234375 C49.9193161 26.047202 50.7839447 25.69206024 51.67477417 25.32615662 C52.47545319 25.00574905 53.2761322 24.68534149 54.10107422 24.35522461 C54.8072287 24.06876572 55.51338318 23.78230682 56.24093628 23.48716736 C58 23 58 23 60 24 C59.86219116 25.00367111 59.72438232 26.00734222 59.58239746 27.04142761 C58.28387817 36.50187641 56.98888338 45.96280185 55.69733429 55.42420483 C55.03323014 60.28833769 54.36788707 65.15229436 53.69970703 70.01586914 C53.05487906 74.70980656 52.41331285 79.4041793 51.77400208 84.09887123 C51.52956667 85.88956898 51.28395802 87.68010698 51.03715515 89.47047997 C50.69158107 91.97884874 50.35018922 94.48775395 50.00976562 96.99682617 C49.85547844 98.10597633 49.85547844 98.10597633 49.69807434 99.23753357 C48.93275528 104.60532842 48.93275528 104.60532842 49 110 C51.32435526 112.56551965 51.32435526 112.56551965 54.4375 114.875 C55.44683594 115.67679687 56.45617187 116.47859375 57.49609375 117.3046875 C58.66326288 118.20416355 59.83130281 119.10251027 61 120 C62.4563086 121.1320675 63.91200142 122.26492745 65.3671875 123.3984375 C68.35227531 125.71950904 71.33808056 128.03965504 74.32421875 130.359375 C89.62305789 142.24595607 89.62305789 142.24595607 96.92114258 148.0065918 C99.92433339 150.37646565 102.9407021 152.72675391 105.9765625 155.0546875 C106.62850586 155.55782471 107.28044922 156.06096191 107.95214844 156.5793457 C109.20934807 157.54906228 110.4702822 158.5139614 111.73535156 159.47338867 C113.19394094 160.6026395 114.6025991 161.79585667 116 163 C116 163.66 116 164.32 116 165 C102.8 170.28 89.6 175.56 76 181 C77.86086989 186.58260966 79.70250471 191.91987008 81.91796875 197.3359375 C82.45520863 198.66010331 82.99231431 199.98432357 83.52929688 201.30859375 C84.36354168 203.35675743 85.19946537 205.40420746 86.0378418 207.45068359 C86.8565564 209.4523021 87.66889009 211.45641719 88.48046875 213.4609375 C89.20592896 215.23670166 89.20592896 215.23670166 89.94604492 217.04833984 C91 220 91 220 91 223 C79.76335968 221.89929604 68.59134385 220.4134701 57.41796875 218.80078125 C56.0117313 218.59852473 54.60549145 218.39628486 53.19924927 218.19406128 C47.37601718 217.35531323 41.55328668 216.51328174 35.73217773 215.65991211 C32.12684379 215.13171562 28.52041037 214.61169027 24.91314125 214.09688377 C23.55197972 213.90101035 22.19125641 213.70206465 20.83101463 213.49990273 C18.94079737 213.2192088 17.04891283 212.94981285 15.15698242 212.6809082 C14.08542404 212.52483597 13.01386566 212.36876373 11.90983582 212.20796204 C8.98220432 211.99872817 6.80225306 212.14520505 4 213 C1.68432244 215.34578532 1.68432244 215.34578532 -0.4375 218.4375 C-1.3152504 219.63105922 -2.19422599 220.82371808 -3.07421875 222.015625 C-3.77877197 222.98145508 -3.77877197 222.98145508 -4.49755859 223.96679688 C-7.17825784 227.59449647 -9.97097654 231.13494187 -12.75 234.6875 C-13.95214291 236.23152175 -15.15396209 237.77579559 -16.35546875 239.3203125 C-18.75284575 242.39926526 -21.15151383 245.47720771 -23.55078125 248.5546875 C-24.13214844 249.30097412 -24.71351563 250.04726074 -25.3125 250.81616211 C-26.47197342 252.30448729 -27.63212139 253.79228722 -28.79296875 255.27954102 C-31.79430217 259.1326386 -34.7658914 263.00497591 -37.69921875 266.91015625 C-38.59338501 268.09629517 -38.59338501 268.09629517 -39.50561523 269.30639648 C-40.64732551 270.82393638 -41.78377901 272.34544898 -42.91430664 273.87133789 C-43.4221167 274.54543701 -43.92992676 275.21953613 -44.453125 275.9140625 C-45.12069824 276.8105249 -45.12069824 276.8105249 -45.80175781 277.72509766 C-46.3948877 278.35617432 -46.3948877 278.35617432 -47 279 C-47.66 279 -48.32 279 -49 279 C-50.96212054 274.28808256 -52.91913452 269.57408813 -54.87158203 264.8581543 C-55.53556926 263.25634568 -56.20091363 261.65509889 -56.86767578 260.05444336 C-57.82948138 257.74481601 -58.78628113 255.43316786 -59.7421875 253.12109375 C-60.03809784 252.41351425 -60.33400818 251.70593475 -60.6388855 250.97691345 C-62.39865479 246.70420474 -63.81133258 242.46643059 -65 238 C-66.748573 238.72703125 -66.748573 238.72703125 -68.5324707 239.46875 C-72.85205273 241.26313903 -77.17447777 243.05058761 -81.49780273 244.8359375 C-83.36968192 245.6100827 -85.24078147 246.38611585 -87.11108398 247.1640625 C-89.79729431 248.28100172 -92.48622194 249.39115363 -95.17578125 250.5 C-96.43217155 251.0249707 -96.43217155 251.0249707 -97.71394348 251.56054688 C-98.49452621 251.88087891 -99.27510895 252.20121094 -100.0793457 252.53125 C-101.10859917 252.95760742 -101.10859917 252.95760742 -102.15864563 253.39257812 C-104 254 -104 254 -107 254 C-106.38702969 244.01103699 -105.14356314 234.16554776 -103.71484375 224.26953125 C-103.49166937 222.70112209 -103.26890376 221.13265472 -103.04652405 219.56413269 C-102.46646968 215.47925444 -101.88174263 211.39506027 -101.29571533 207.31103516 C-100.35327219 200.73753842 -99.41796067 194.16302373 -98.48288155 187.58847618 C-98.1564261 185.29817168 -97.82787851 183.00817478 -97.49900818 180.71821594 C-97.29999383 179.32492706 -97.10102193 177.93163211 -96.90209961 176.53833008 C-96.72746689 175.32067459 -96.55283417 174.1030191 -96.37290955 172.84846497 C-95.95673057 170.14828216 -95.95673057 170.14828216 -96 168 C-97.73593235 166.51556315 -99.5439466 165.11537809 -101.375 163.75 C-102.57737611 162.84448409 -103.77916711 161.93819087 -104.98046875 161.03125 C-105.63063965 160.54269531 -106.28081055 160.05414063 -106.95068359 159.55078125 C-110.55827512 156.82080491 -114.12050501 154.03267419 -117.6875 151.25 C-119.2329817 150.04675783 -120.77855573 148.84363424 -122.32421875 147.640625 C-123.4851001 146.73666992 -123.4851001 146.73666992 -124.66943359 145.81445312 C-127.70053775 143.45459915 -130.73270421 141.09611399 -133.76538086 138.73828125 C-135.2473302 137.58549208 -136.7286203 136.43185492 -138.20922852 135.27734375 C-142.16907937 132.19131595 -146.14172445 129.12367845 -150.1328125 126.078125 C-150.968125 125.43746094 -151.8034375 124.79679687 -152.6640625 124.13671875 C-154.27735996 122.89985736 -155.89443035 121.66789828 -157.515625 120.44140625 C-158.23492187 119.88839844 -158.95421875 119.33539063 -159.6953125 118.765625 C-160.33484863 118.27868164 -160.97438477 117.79173828 -161.63330078 117.29003906 C-162.08431152 116.86432617 -162.53532227 116.43861328 -163 116 C-163 115.34 -163 114.68 -163 114 C-159.05338679 112.36346798 -155.10643175 110.72776378 -151.15917969 109.09277344 C-149.82087295 108.53830454 -148.48265433 107.98362292 -147.14453125 107.42871094 C-139.44878529 104.23751089 -131.74681584 101.06582921 -124 98 C-124 94.50826651 -124.12587382 93.19541524 -125.37695312 90.1652832 C-125.6772644 89.4280452 -125.97757568 88.69080719 -126.2869873 87.93122864 C-126.61509399 87.145681 -126.94320068 86.36013336 -127.28125 85.55078125 C-127.61419067 84.73755905 -127.94713135 83.92433685 -128.29016113 83.08647156 C-129.35356169 80.49240029 -130.42639476 77.90236248 -131.5 75.3125 C-132.57178084 72.71121358 -133.64161171 70.10914111 -134.70983887 67.50639343 C-135.37509077 65.8872214 -136.04276171 64.26904084 -136.7130127 62.65193176 C-139 57.10959212 -139 57.10959212 -139 56 C-128.71788454 56.57902817 -118.60937008 57.77022185 -108.42578125 59.25 C-106.88361003 59.47072616 -105.34138789 59.69109684 -103.79911804 59.91113281 C-100.59943549 60.36868553 -97.40024874 60.82951286 -94.20141602 61.29296875 C-90.10224258 61.88673347 -86.00211152 62.47355546 -81.90162373 63.0581665 C-78.73150688 63.51064134 -75.56180471 63.96596543 -72.39223289 64.42224121 C-70.87925541 64.63983761 -69.36617533 64.85672194 -67.8529911 65.07287598 C-65.74964295 65.37391995 -63.64685672 65.6786164 -61.54418945 65.984375 C-59.75220879 66.24299316 -59.75220879 66.24299316 -57.92402649 66.50683594 C-55 67 -55 67 -52 68 C-51.72704102 67.41621582 -51.45408203 66.83243164 -51.17285156 66.23095703 C-50.0222272 64.0422798 -48.7616631 62.24487911 -47.234375 60.3046875 C-46.68136719 59.59828125 -46.12835938 58.891875 -45.55859375 58.1640625 C-44.96175781 57.40867188 -44.36492187 56.65328125 -43.75 55.875 C-42.4738667 54.24746768 -41.19782762 52.61986147 -39.921875 50.9921875 C-39.26896484 50.16170898 -38.61605469 49.33123047 -37.94335938 48.47558594 C-34.94875903 44.66085635 -31.97486342 40.8301261 -29 37 C-27.84123575 35.51034672 -26.68238114 34.02076372 -25.5234375 32.53125 C-23.11007978 29.42855421 -20.69891694 26.32416745 -18.2890625 23.21875 C-15.37070965 19.45853492 -12.44663484 15.70283967 -9.51855469 11.95019531 C-8.14540014 10.18672931 -6.77902989 8.41824058 -5.4140625 6.6484375 C-4.69992188 5.73320312 -3.98578125 4.81796875 -3.25 3.875 C-2.65703125 3.10929687 -2.0640625 2.34359375 -1.453125 1.5546875 C-0.97359375 1.04164062 -0.4940625 0.52859375 0 0 Z M13 49 C11.19413716 51.33321158 9.43296372 53.68459433 7.6875 56.0625 C3.57826075 61.6053237 -0.59931715 67.07192895 -4.9375 72.4375 C-9.7348096 78.37822614 -14.41026916 84.40155529 -19.02124023 90.48803711 C-20.01602028 91.79863075 -21.02655386 93.09740383 -22.05183411 94.38427734 C-23.56007215 96.40932687 -24.86075532 98.38690506 -26.16607666 100.53651428 C-32.50851227 110.43218992 -32.50851227 110.43218992 -38.70957947 111.84541321 C-43.07120386 111.85412331 -47.27815399 111.01496689 -51.54296875 110.1796875 C-53.12126541 109.92862526 -54.70068456 109.68453049 -56.28108215 109.447052 C-60.42245668 108.80659017 -64.54294522 108.07692569 -68.66546631 107.32568359 C-72.84865266 106.57815454 -77.04430644 105.90990392 -81.24023438 105.23828125 C-85.96462751 104.48050324 -90.68635718 103.71626103 -95.39823914 102.88375854 C-96.11786835 102.75838715 -96.83749756 102.63301575 -97.57893372 102.50384521 C-99.51300169 102.16533681 -101.44584831 101.81987047 -103.37858582 101.47384644 C-107.32653394 100.95727444 -111.02360237 100.91998097 -115 101 C-112.00586783 104.13603417 -108.8301233 106.75910562 -105.375 109.375 C-104.20922102 110.26247675 -103.04388107 111.15053041 -101.87890625 112.0390625 C-101.25387207 112.51504883 -100.62883789 112.99103516 -99.98486328 113.48144531 C-96.41061604 116.21598625 -92.86262817 118.984265 -89.3125 121.75 C-87.77736558 122.94534053 -86.24220904 124.14065266 -84.70703125 125.3359375 C-83.5480835 126.23844238 -83.5480835 126.23844238 -82.36572266 127.15917969 C-79.97834147 129.01685297 -77.58906474 130.87206146 -75.19921875 132.7265625 C-74.41184326 133.33790039 -73.62446777 133.94923828 -72.81323242 134.57910156 C-71.33074833 135.73004119 -69.84787368 136.88047804 -68.36450195 138.03027344 C-67.01259063 139.08036933 -65.67170048 140.14486969 -64.34437561 141.22587585 C-62.02122983 143.06424988 -62.02122983 143.06424988 -59.35183716 144.504776 C-56.27629214 146.42977332 -54.18957724 148.09116803 -52 151 C-51.20822539 156.5848229 -52.2256255 161.79580139 -53.2109375 167.28515625 C-53.45434694 168.87046394 -53.6927638 170.45654548 -53.92642212 172.0433197 C-54.55294455 176.21011173 -55.24342604 180.36371913 -55.94897461 184.51776123 C-56.6547281 188.73337445 -57.30498287 192.95744302 -57.95703125 197.18164062 C-58.69126794 201.93605834 -59.42983688 206.68890457 -60.21884155 211.43458557 C-60.33772736 212.15930054 -60.45661316 212.8840155 -60.57910156 213.63069153 C-60.89993407 215.58064497 -61.22628548 217.52968816 -61.55307007 219.47865295 C-62.00330443 223.02603548 -62.07892585 226.42830985 -62 230 C-58.08850736 226.2381273 -54.67181931 222.25774191 -51.3125 218 C-50.52431885 217.00770386 -50.52431885 217.00770386 -49.72021484 215.99536133 C-45.66465027 210.87593154 -41.67284933 205.70969026 -37.703125 200.5234375 C-34.44666615 196.27126324 -31.1616472 192.04136001 -27.875 187.8125 C-27.276875 187.04188232 -26.67875 186.27126465 -26.0625 185.47729492 C-22.19790491 180.50814811 -18.27807161 175.59449634 -14.2578125 170.75 C-12.80545465 169.08851681 -12.80545465 169.08851681 -13 167 C-12.11795898 167.16798096 -11.23591797 167.33596191 -10.32714844 167.5090332 C2.98243851 169.97884782 16.37888309 171.80824495 29.78808594 173.64428711 C33.12038971 174.10117495 36.45201813 174.5624606 39.78336716 175.02622509 C42.99575424 175.47256854 46.20884378 175.91378982 49.421875 176.35546875 C50.61141785 176.52104782 51.80096069 176.68662689 53.02655029 176.85722351 C54.13250549 177.00770645 55.23846069 177.15818939 56.37792969 177.31323242 C57.82990753 177.51283821 57.82990753 177.51283821 59.31121826 177.71647644 C61.89792132 177.98923612 64.40133049 178.0519136 67 178 C59.69602778 170.52647128 51.4038789 164.26608595 43.11035156 157.93603516 C38.94091798 154.74628459 34.8377003 151.4811169 30.75 148.1875 C24.37118189 143.05045656 17.89283728 138.05311746 11.37011719 133.1003418 C10.68336914 132.57867432 9.99662109 132.05700684 9.2890625 131.51953125 C8.67756348 131.05651611 8.06606445 130.59350098 7.43603516 130.11645508 C6 129 6 129 5 128 C5.20652009 118.98059 6.58687607 109.99001362 7.84765625 101.0703125 C8.11681266 99.12281203 8.3859637 97.1753108 8.65479946 95.22776604 C9.21536806 91.17558016 9.78257514 87.12431884 10.34979248 83.07305908 C10.82077088 79.70834133 11.28998533 76.343403 11.7542572 72.97775269 C12.10057403 70.46961577 12.45093992 67.96203362 12.80592346 65.45510864 C13.56859579 59.9212011 14.22353382 54.58783628 14 49 C13.67 49 13.34 49 13 49 Z M-63 230 C-62 232 -62 232 -62 232 Z"
         fill="currentColor"
-        opacity="0.9"
+        transform="translate(180,17)"
       />
     </svg>
   );
 }
+
+/**
+ * Raw SVG string of the Fragments logo for use in non-React contexts
+ * (e.g. viewer <img> tags, favicons). Fill is `currentColor` by default.
+ */
+export const fragmentsLogoSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="313" height="313" viewBox="0 0 313 313" fill="none"><path d="M0 0 C0.66 0 1.32 0 2 0 C2.44915771 1.11036621 2.89831543 2.22073242 3.36108398 3.36474609 C5.02448839 7.47624399 6.68896082 11.58730879 8.35375977 15.69824219 C9.07475556 17.4790482 9.79545992 19.25997224 10.51586914 21.04101562 C11.55018113 23.59796585 12.58553337 26.15449267 13.62109375 28.7109375 C13.94403915 29.50994476 14.26698456 30.30895203 14.59971619 31.13217163 C16.19708004 35.11169509 16.19708004 35.11169509 18 39 C19.20124512 38.51007568 20.40249023 38.02015137 21.64013672 37.51538086 C26.08360877 35.70549367 30.53113526 33.90576527 34.97998047 32.10913086 C36.90754131 31.32903603 38.8339805 30.54616387 40.75927734 29.76049805 C43.52153337 28.63384447 46.28762525 27.51713176 49.0546875 26.40234375 C49.9193161 26.047202 50.7839447 25.69206024 51.67477417 25.32615662 C52.47545319 25.00574905 53.2761322 24.68534149 54.10107422 24.35522461 C54.8072287 24.06876572 55.51338318 23.78230682 56.24093628 23.48716736 C58 23 58 23 60 24 C59.86219116 25.00367111 59.72438232 26.00734222 59.58239746 27.04142761 C58.28387817 36.50187641 56.98888338 45.96280185 55.69733429 55.42420483 C55.03323014 60.28833769 54.36788707 65.15229436 53.69970703 70.01586914 C53.05487906 74.70980656 52.41331285 79.4041793 51.77400208 84.09887123 C51.52956667 85.88956898 51.28395802 87.68010698 51.03715515 89.47047997 C50.69158107 91.97884874 50.35018922 94.48775395 50.00976562 96.99682617 C49.85547844 98.10597633 49.85547844 98.10597633 49.69807434 99.23753357 C48.93275528 104.60532842 48.93275528 104.60532842 49 110 C51.32435526 112.56551965 51.32435526 112.56551965 54.4375 114.875 C55.44683594 115.67679687 56.45617187 116.47859375 57.49609375 117.3046875 C58.66326288 118.20416355 59.83130281 119.10251027 61 120 C62.4563086 121.1320675 63.91200142 122.26492745 65.3671875 123.3984375 C68.35227531 125.71950904 71.33808056 128.03965504 74.32421875 130.359375 C89.62305789 142.24595607 89.62305789 142.24595607 96.92114258 148.0065918 C99.92433339 150.37646565 102.9407021 152.72675391 105.9765625 155.0546875 C106.62850586 155.55782471 107.28044922 156.06096191 107.95214844 156.5793457 C109.20934807 157.54906228 110.4702822 158.5139614 111.73535156 159.47338867 C113.19394094 160.6026395 114.6025991 161.79585667 116 163 C116 163.66 116 164.32 116 165 C102.8 170.28 89.6 175.56 76 181 C77.86086989 186.58260966 79.70250471 191.91987008 81.91796875 197.3359375 C82.45520863 198.66010331 82.99231431 199.98432357 83.52929688 201.30859375 C84.36354168 203.35675743 85.19946537 205.40420746 86.0378418 207.45068359 C86.8565564 209.4523021 87.66889009 211.45641719 88.48046875 213.4609375 C89.20592896 215.23670166 89.20592896 215.23670166 89.94604492 217.04833984 C91 220 91 220 91 223 C79.76335968 221.89929604 68.59134385 220.4134701 57.41796875 218.80078125 C56.0117313 218.59852473 54.60549145 218.39628486 53.19924927 218.19406128 C47.37601718 217.35531323 41.55328668 216.51328174 35.73217773 215.65991211 C32.12684379 215.13171562 28.52041037 214.61169027 24.91314125 214.09688377 C23.55197972 213.90101035 22.19125641 213.70206465 20.83101463 213.49990273 C18.94079737 213.2192088 17.04891283 212.94981285 15.15698242 212.6809082 C14.08542404 212.52483597 13.01386566 212.36876373 11.90983582 212.20796204 C8.98220432 211.99872817 6.80225306 212.14520505 4 213 C1.68432244 215.34578532 1.68432244 215.34578532 -0.4375 218.4375 C-1.3152504 219.63105922 -2.19422599 220.82371808 -3.07421875 222.015625 C-3.77877197 222.98145508 -3.77877197 222.98145508 -4.49755859 223.96679688 C-7.17825784 227.59449647 -9.97097654 231.13494187 -12.75 234.6875 C-13.95214291 236.23152175 -15.15396209 237.77579559 -16.35546875 239.3203125 C-18.75284575 242.39926526 -21.15151383 245.47720771 -23.55078125 248.5546875 C-24.13214844 249.30097412 -24.71351563 250.04726074 -25.3125 250.81616211 C-26.47197342 252.30448729 -27.63212139 253.79228722 -28.79296875 255.27954102 C-31.79430217 259.1326386 -34.7658914 263.00497591 -37.69921875 266.91015625 C-38.59338501 268.09629517 -38.59338501 268.09629517 -39.50561523 269.30639648 C-40.64732551 270.82393638 -41.78377901 272.34544898 -42.91430664 273.87133789 C-43.4221167 274.54543701 -43.92992676 275.21953613 -44.453125 275.9140625 C-45.12069824 276.8105249 -45.12069824 276.8105249 -45.80175781 277.72509766 C-46.3948877 278.35617432 -46.3948877 278.35617432 -47 279 C-47.66 279 -48.32 279 -49 279 C-50.96212054 274.28808256 -52.91913452 269.57408813 -54.87158203 264.8581543 C-55.53556926 263.25634568 -56.20091363 261.65509889 -56.86767578 260.05444336 C-57.82948138 257.74481601 -58.78628113 255.43316786 -59.7421875 253.12109375 C-60.03809784 252.41351425 -60.33400818 251.70593475 -60.6388855 250.97691345 C-62.39865479 246.70420474 -63.81133258 242.46643059 -65 238 C-66.748573 238.72703125 -66.748573 238.72703125 -68.5324707 239.46875 C-72.85205273 241.26313903 -77.17447777 243.05058761 -81.49780273 244.8359375 C-83.36968192 245.6100827 -85.24078147 246.38611585 -87.11108398 247.1640625 C-89.79729431 248.28100172 -92.48622194 249.39115363 -95.17578125 250.5 C-96.43217155 251.0249707 -96.43217155 251.0249707 -97.71394348 251.56054688 C-98.49452621 251.88087891 -99.27510895 252.20121094 -100.0793457 252.53125 C-101.10859917 252.95760742 -101.10859917 252.95760742 -102.15864563 253.39257812 C-104 254 -104 254 -107 254 C-106.38702969 244.01103699 -105.14356314 234.16554776 -103.71484375 224.26953125 C-103.49166937 222.70112209 -103.26890376 221.13265472 -103.04652405 219.56413269 C-102.46646968 215.47925444 -101.88174263 211.39506027 -101.29571533 207.31103516 C-100.35327219 200.73753842 -99.41796067 194.16302373 -98.48288155 187.58847618 C-98.1564261 185.29817168 -97.82787851 183.00817478 -97.49900818 180.71821594 C-97.29999383 179.32492706 -97.10102193 177.93163211 -96.90209961 176.53833008 C-96.72746689 175.32067459 -96.55283417 174.1030191 -96.37290955 172.84846497 C-95.95673057 170.14828216 -95.95673057 170.14828216 -96 168 C-97.73593235 166.51556315 -99.5439466 165.11537809 -101.375 163.75 C-102.57737611 162.84448409 -103.77916711 161.93819087 -104.98046875 161.03125 C-105.63063965 160.54269531 -106.28081055 160.05414063 -106.95068359 159.55078125 C-110.55827512 156.82080491 -114.12050501 154.03267419 -117.6875 151.25 C-119.2329817 150.04675783 -120.77855573 148.84363424 -122.32421875 147.640625 C-123.4851001 146.73666992 -123.4851001 146.73666992 -124.66943359 145.81445312 C-127.70053775 143.45459915 -130.73270421 141.09611399 -133.76538086 138.73828125 C-135.2473302 137.58549208 -136.7286203 136.43185492 -138.20922852 135.27734375 C-142.16907937 132.19131595 -146.14172445 129.12367845 -150.1328125 126.078125 C-150.968125 125.43746094 -151.8034375 124.79679687 -152.6640625 124.13671875 C-154.27735996 122.89985736 -155.89443035 121.66789828 -157.515625 120.44140625 C-158.23492187 119.88839844 -158.95421875 119.33539063 -159.6953125 118.765625 C-160.33484863 118.27868164 -160.97438477 117.79173828 -161.63330078 117.29003906 C-162.08431152 116.86432617 -162.53532227 116.43861328 -163 116 C-163 115.34 -163 114.68 -163 114 C-159.05338679 112.36346798 -155.10643175 110.72776378 -151.15917969 109.09277344 C-149.82087295 108.53830454 -148.48265433 107.98362292 -147.14453125 107.42871094 C-139.44878529 104.23751089 -131.74681584 101.06582921 -124 98 C-124 94.50826651 -124.12587382 93.19541524 -125.37695312 90.1652832 C-125.6772644 89.4280452 -125.97757568 88.69080719 -126.2869873 87.93122864 C-126.61509399 87.145681 -126.94320068 86.36013336 -127.28125 85.55078125 C-127.61419067 84.73755905 -127.94713135 83.92433685 -128.29016113 83.08647156 C-129.35356169 80.49240029 -130.42639476 77.90236248 -131.5 75.3125 C-132.57178084 72.71121358 -133.64161171 70.10914111 -134.70983887 67.50639343 C-135.37509077 65.8872214 -136.04276171 64.26904084 -136.7130127 62.65193176 C-139 57.10959212 -139 57.10959212 -139 56 C-128.71788454 56.57902817 -118.60937008 57.77022185 -108.42578125 59.25 C-106.88361003 59.47072616 -105.34138789 59.69109684 -103.79911804 59.91113281 C-100.59943549 60.36868553 -97.40024874 60.82951286 -94.20141602 61.29296875 C-90.10224258 61.88673347 -86.00211152 62.47355546 -81.90162373 63.0581665 C-78.73150688 63.51064134 -75.56180471 63.96596543 -72.39223289 64.42224121 C-70.87925541 64.63983761 -69.36617533 64.85672194 -67.8529911 65.07287598 C-65.74964295 65.37391995 -63.64685672 65.6786164 -61.54418945 65.984375 C-59.75220879 66.24299316 -59.75220879 66.24299316 -57.92402649 66.50683594 C-55 67 -55 67 -52 68 C-51.72704102 67.41621582 -51.45408203 66.83243164 -51.17285156 66.23095703 C-50.0222272 64.0422798 -48.7616631 62.24487911 -47.234375 60.3046875 C-46.68136719 59.59828125 -46.12835938 58.891875 -45.55859375 58.1640625 C-44.96175781 57.40867188 -44.36492187 56.65328125 -43.75 55.875 C-42.4738667 54.24746768 -41.19782762 52.61986147 -39.921875 50.9921875 C-39.26896484 50.16170898 -38.61605469 49.33123047 -37.94335938 48.47558594 C-34.94875903 44.66085635 -31.97486342 40.8301261 -29 37 C-27.84123575 35.51034672 -26.68238114 34.02076372 -25.5234375 32.53125 C-23.11007978 29.42855421 -20.69891694 26.32416745 -18.2890625 23.21875 C-15.37070965 19.45853492 -12.44663484 15.70283967 -9.51855469 11.95019531 C-8.14540014 10.18672931 -6.77902989 8.41824058 -5.4140625 6.6484375 C-4.69992188 5.73320312 -3.98578125 4.81796875 -3.25 3.875 C-2.65703125 3.10929687 -2.0640625 2.34359375 -1.453125 1.5546875 C-0.97359375 1.04164062 -0.4940625 0.52859375 0 0 Z M13 49 C11.19413716 51.33321158 9.43296372 53.68459433 7.6875 56.0625 C3.57826075 61.6053237 -0.59931715 67.07192895 -4.9375 72.4375 C-9.7348096 78.37822614 -14.41026916 84.40155529 -19.02124023 90.48803711 C-20.01602028 91.79863075 -21.02655386 93.09740383 -22.05183411 94.38427734 C-23.56007215 96.40932687 -24.86075532 98.38690506 -26.16607666 100.53651428 C-32.50851227 110.43218992 -32.50851227 110.43218992 -38.70957947 111.84541321 C-43.07120386 111.85412331 -47.27815399 111.01496689 -51.54296875 110.1796875 C-53.12126541 109.92862526 -54.70068456 109.68453049 -56.28108215 109.447052 C-60.42245668 108.80659017 -64.54294522 108.07692569 -68.66546631 107.32568359 C-72.84865266 106.57815454 -77.04430644 105.90990392 -81.24023438 105.23828125 C-85.96462751 104.48050324 -90.68635718 103.71626103 -95.39823914 102.88375854 C-96.11786835 102.75838715 -96.83749756 102.63301575 -97.57893372 102.50384521 C-99.51300169 102.16533681 -101.44584831 101.81987047 -103.37858582 101.47384644 C-107.32653394 100.95727444 -111.02360237 100.91998097 -115 101 C-112.00586783 104.13603417 -108.8301233 106.75910562 -105.375 109.375 C-104.20922102 110.26247675 -103.04388107 111.15053041 -101.87890625 112.0390625 C-101.25387207 112.51504883 -100.62883789 112.99103516 -99.98486328 113.48144531 C-96.41061604 116.21598625 -92.86262817 118.984265 -89.3125 121.75 C-87.77736558 122.94534053 -86.24220904 124.14065266 -84.70703125 125.3359375 C-83.5480835 126.23844238 -83.5480835 126.23844238 -82.36572266 127.15917969 C-79.97834147 129.01685297 -77.58906474 130.87206146 -75.19921875 132.7265625 C-74.41184326 133.33790039 -73.62446777 133.94923828 -72.81323242 134.57910156 C-71.33074833 135.73004119 -69.84787368 136.88047804 -68.36450195 138.03027344 C-67.01259063 139.08036933 -65.67170048 140.14486969 -64.34437561 141.22587585 C-62.02122983 143.06424988 -62.02122983 143.06424988 -59.35183716 144.504776 C-56.27629214 146.42977332 -54.18957724 148.09116803 -52 151 C-51.20822539 156.5848229 -52.2256255 161.79580139 -53.2109375 167.28515625 C-53.45434694 168.87046394 -53.6927638 170.45654548 -53.92642212 172.0433197 C-54.55294455 176.21011173 -55.24342604 180.36371913 -55.94897461 184.51776123 C-56.6547281 188.73337445 -57.30498287 192.95744302 -57.95703125 197.18164062 C-58.69126794 201.93605834 -59.42983688 206.68890457 -60.21884155 211.43458557 C-60.33772736 212.15930054 -60.45661316 212.8840155 -60.57910156 213.63069153 C-60.89993407 215.58064497 -61.22628548 217.52968816 -61.55307007 219.47865295 C-62.00330443 223.02603548 -62.07892585 226.42830985 -62 230 C-58.08850736 226.2381273 -54.67181931 222.25774191 -51.3125 218 C-50.52431885 217.00770386 -50.52431885 217.00770386 -49.72021484 215.99536133 C-45.66465027 210.87593154 -41.67284933 205.70969026 -37.703125 200.5234375 C-34.44666615 196.27126324 -31.1616472 192.04136001 -27.875 187.8125 C-27.276875 187.04188232 -26.67875 186.27126465 -26.0625 185.47729492 C-22.19790491 180.50814811 -18.27807161 175.59449634 -14.2578125 170.75 C-12.80545465 169.08851681 -12.80545465 169.08851681 -13 167 C-12.11795898 167.16798096 -11.23591797 167.33596191 -10.32714844 167.5090332 C2.98243851 169.97884782 16.37888309 171.80824495 29.78808594 173.64428711 C33.12038971 174.10117495 36.45201813 174.5624606 39.78336716 175.02622509 C42.99575424 175.47256854 46.20884378 175.91378982 49.421875 176.35546875 C50.61141785 176.52104782 51.80096069 176.68662689 53.02655029 176.85722351 C54.13250549 177.00770645 55.23846069 177.15818939 56.37792969 177.31323242 C57.82990753 177.51283821 57.82990753 177.51283821 59.31121826 177.71647644 C61.89792132 177.98923612 64.40133049 178.0519136 67 178 C59.69602778 170.52647128 51.4038789 164.26608595 43.11035156 157.93603516 C38.94091798 154.74628459 34.8377003 151.4811169 30.75 148.1875 C24.37118189 143.05045656 17.89283728 138.05311746 11.37011719 133.1003418 C10.68336914 132.57867432 9.99662109 132.05700684 9.2890625 131.51953125 C8.67756348 131.05651611 8.06606445 130.59350098 7.43603516 130.11645508 C6 129 6 129 5 128 C5.20652009 118.98059 6.58687607 109.99001362 7.84765625 101.0703125 C8.11681266 99.12281203 8.3859637 97.1753108 8.65479946 95.22776604 C9.21536806 91.17558016 9.78257514 87.12431884 10.34979248 83.07305908 C10.82077088 79.70834133 11.28998533 76.343403 11.7542572 72.97775269 C12.10057403 70.46961577 12.45093992 67.96203362 12.80592346 65.45510864 C13.56859579 59.9212011 14.22353382 54.58783628 14 49 C13.67 49 13.34 49 13 49 Z M-63 230 C-62 232 -62 232 -62 232 Z" fill="currentColor" transform="translate(180,17)"/></svg>`;

package/src/blocks/CommandPalette.block.ts

@@ -0,0 +1,34 @@
+import { defineBlock } from '@fragments-sdk/cli/core';
+
+export default defineBlock({
+  name: 'Command Palette',
+  description: 'Modal command palette for quick actions, composed with Dialog and Command',
+  category: 'navigation',
+  components: ['Dialog', 'Command'],
+  tags: ['command', 'palette', 'search', 'spotlight', 'quick-actions'],
+  code: `
+<Dialog>
+  <Dialog.Trigger asChild>
+    <Button variant="secondary">Open Command Palette</Button>
+  </Dialog.Trigger>
+  <Dialog.Content size="sm">
+    <Command>
+      <Command.Input placeholder="Search commands..." />
+      <Command.List>
+        <Command.Group heading="Actions">
+          <Command.Item onItemSelect={() => console.log('new')}>New File</Command.Item>
+          <Command.Item onItemSelect={() => console.log('open')}>Open Recent</Command.Item>
+          <Command.Item onItemSelect={() => console.log('save')}>Save All</Command.Item>
+        </Command.Group>
+        <Command.Separator />
+        <Command.Group heading="Settings">
+          <Command.Item onItemSelect={() => console.log('prefs')}>Preferences</Command.Item>
+          <Command.Item onItemSelect={() => console.log('keys')}>Keyboard Shortcuts</Command.Item>
+        </Command.Group>
+        <Command.Empty>No results found.</Command.Empty>
+      </Command.List>
+    </Command>
+  </Dialog.Content>
+</Dialog>
+`.trim(),
+});

package/src/blocks/PaginatedTable.block.ts

@@ -0,0 +1,36 @@
+import { defineBlock } from '@fragments-sdk/cli/core';
+
+export default defineBlock({
+  name: 'Paginated Table',
+  description: 'Data table with pagination controls at the bottom',
+  category: 'dashboard',
+  components: ['Card', 'Table', 'Pagination'],
+  tags: ['table', 'pagination', 'data', 'dashboard', 'list'],
+  code: `
+const columns = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' },
+  { accessorKey: 'status', header: 'Status' },
+];
+
+const data = [
+  { name: 'John Doe', email: 'john@example.com', status: 'Active' },
+  { name: 'Jane Smith', email: 'jane@example.com', status: 'Pending' },
+  { name: 'Bob Wilson', email: 'bob@example.com', status: 'Active' },
+];
+
+<Card>
+  <Card.Header>
+    <Card.Title>Users</Card.Title>
+  </Card.Header>
+  <Table data={data} columns={columns} />
+  <Card.Footer>
+    <Pagination totalPages={10} defaultPage={1}>
+      <Pagination.Previous />
+      <Pagination.Items />
+      <Pagination.Next />
+    </Pagination>
+  </Card.Footer>
+</Card>
+`.trim(),
+});

package/src/blocks/SettingsDrawer.block.ts

@@ -0,0 +1,47 @@
+import { defineBlock } from '@fragments-sdk/cli/core';
+
+export default defineBlock({
+  name: 'Settings Drawer',
+  description: 'Side panel for editing settings with form fields and save/cancel actions',
+  category: 'settings',
+  components: ['Drawer', 'Form', 'Field', 'Button', 'Switch'],
+  tags: ['drawer', 'settings', 'form', 'panel', 'editor'],
+  code: `
+<Drawer>
+  <Drawer.Trigger asChild>
+    <Button variant="secondary">Settings</Button>
+  </Drawer.Trigger>
+  <Drawer.Content size="md">
+    <Drawer.Close />
+    <Drawer.Header>
+      <Drawer.Title>Settings</Drawer.Title>
+      <Drawer.Description>Manage your preferences.</Drawer.Description>
+    </Drawer.Header>
+    <Drawer.Body>
+      <Form>
+        <Stack gap="md">
+          <Field>
+            <Field.Label>Display Name</Field.Label>
+            <Field.Control>
+              <Input placeholder="Enter name" />
+            </Field.Control>
+          </Field>
+          <Field>
+            <Field.Label>Email Notifications</Field.Label>
+            <Field.Control>
+              <Switch defaultChecked />
+            </Field.Control>
+          </Field>
+        </Stack>
+      </Form>
+    </Drawer.Body>
+    <Drawer.Footer>
+      <Drawer.Close asChild>
+        <Button variant="secondary">Cancel</Button>
+      </Drawer.Close>
+      <Button variant="primary">Save Changes</Button>
+    </Drawer.Footer>
+  </Drawer.Content>
+</Drawer>
+`.trim(),
+});

package/src/components/Badge/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Button as BaseButton } from '@base-ui/react/button';
 import styles from './Badge.module.scss';

package/src/components/Button/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Button as BaseButton } from '@base-ui/react/button';
 import styles from './Button.module.scss';

package/src/components/Card/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import styles from './Card.module.scss';
 // Import globals to ensure CSS variables are defined

package/src/components/Checkbox/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import styles from './Checkbox.module.scss';

package/src/components/Command/Command.fragment.tsx

@@ -0,0 +1,237 @@
+import React from 'react';
+import { defineFragment } from '@fragments-sdk/cli/core';
+import { Command } from '.';
+import { Dialog } from '../Dialog';
+import { Button } from '../Button';
+
+export default defineFragment({
+  component: Command,
+
+  meta: {
+    name: 'Command',
+    description: 'A searchable command palette for quick actions. Combines an input with a filterable, keyboard-navigable list of actions.',
+    category: 'navigation',
+    status: 'stable',
+    tags: ['command', 'palette', 'search', 'spotlight', 'quick-actions', 'cmdk'],
+    since: '0.8.2',
+  },
+
+  usage: {
+    when: [
+      'Quick-access command palettes (Ctrl+K)',
+      'Searchable action menus',
+      'Inline command lists with filtering',
+      'Application-wide search interfaces',
+    ],
+    whenNot: [
+      'Simple dropdown menus (use Menu)',
+      'Form field selection (use Select or Combobox)',
+      'Static navigation (use Sidebar or Tabs)',
+      'Search with complex result types (build custom)',
+    ],
+    guidelines: [
+      'Compose inside Dialog for modal command palette usage',
+      'Use Command.Group to organize items by category',
+      'Provide Command.Empty for no-results feedback',
+      'Use keywords prop for items that should match on aliases',
+      'Keep item labels short and action-oriented',
+    ],
+    accessibility: [
+      'Uses combobox + listbox ARIA pattern',
+      'Keyboard navigation with ArrowUp/ArrowDown, Enter to select',
+      'Home/End jump to first/last item',
+      'aria-activedescendant tracks focused item',
+    ],
+  },
+
+  props: {
+    children: {
+      type: 'node',
+      description: 'Command.Input, Command.List, and other sub-components',
+      required: true,
+    },
+    search: {
+      type: 'string',
+      description: 'Controlled search value',
+    },
+    defaultSearch: {
+      type: 'string',
+      description: 'Default search value (uncontrolled)',
+      default: "''",
+    },
+    onSearchChange: {
+      type: 'function',
+      description: 'Called when search input changes',
+    },
+    filter: {
+      type: 'function',
+      description: 'Custom filter function. Return 0 to hide, >0 to show.',
+    },
+    loop: {
+      type: 'boolean',
+      description: 'Whether to loop keyboard navigation',
+      default: 'true',
+    },
+  },
+
+  relations: [
+    { component: 'Dialog', relationship: 'sibling', note: 'Compose inside Dialog for modal command palette' },
+    { component: 'Listbox', relationship: 'sibling', note: 'Command uses Listbox-like keyboard navigation internally' },
+    { component: 'Combobox', relationship: 'alternative', note: 'Use Combobox for form field selection with search' },
+  ],
+
+  contract: {
+    propsSummary: [
+      'search: string - controlled search value',
+      'onSearchChange: (search) => void - search change handler',
+      'filter: (value, search, keywords?) => number - custom filter',
+      'loop: boolean - loop keyboard navigation (default: true)',
+      'Command.Item value: string - filter match value',
+      'Command.Item keywords: string[] - extra filter terms',
+      'Command.Item onItemSelect: () => void - selection handler',
+    ],
+    subComponents: [
+      {
+        name: 'Command.Input',
+        props: ['placeholder: string', 'className: string'],
+      },
+      {
+        name: 'Command.List',
+        props: ['children: ReactNode'],
+      },
+      {
+        name: 'Command.Item',
+        props: [
+          'value: string - filter value',
+          'keywords: string[] - extra keywords',
+          'disabled: boolean',
+          'onItemSelect: () => void',
+        ],
+      },
+      {
+        name: 'Command.Group',
+        props: ['heading: string - group label', 'children: ReactNode'],
+      },
+      {
+        name: 'Command.Empty',
+        props: ['children: ReactNode - empty state message'],
+      },
+      {
+        name: 'Command.Separator',
+        props: [],
+      },
+    ],
+    scenarioTags: [
+      'navigation.command',
+      'search.palette',
+      'action.quick',
+    ],
+    a11yRules: ['A11Y_COMBOBOX_ROLE', 'A11Y_LISTBOX_ROLE', 'A11Y_ACTIVE_DESCENDANT'],
+  },
+
+  ai: {
+    compositionPattern: 'compound',
+    subComponents: ['Input', 'List', 'Item', 'Group', 'Empty', 'Separator'],
+    requiredChildren: ['Input', 'List'],
+    commonPatterns: [
+      '<Dialog><Dialog.Trigger><Button>Open Palette</Button></Dialog.Trigger><Dialog.Content size="sm"><Command><Command.Input placeholder="Search..." /><Command.List><Command.Group heading="Actions"><Command.Item onItemSelect={() => {}}>Action 1</Command.Item></Command.Group><Command.Empty>No results.</Command.Empty></Command.List></Command></Dialog.Content></Dialog>',
+    ],
+  },
+
+  variants: [
+    {
+      name: 'Default',
+      description: 'Inline command list with search',
+      render: () => (
+        <div style={{ maxWidth: '400px', width: '100%' }}>
+          <Command>
+            <Command.Input placeholder="Type a command..." />
+            <Command.List>
+              <Command.Item onItemSelect={() => {}}>Open File</Command.Item>
+              <Command.Item onItemSelect={() => {}}>Save Document</Command.Item>
+              <Command.Item onItemSelect={() => {}}>Print</Command.Item>
+              <Command.Empty>No results found.</Command.Empty>
+            </Command.List>
+          </Command>
+        </div>
+      ),
+    },
+    {
+      name: 'Dialog Command Palette',
+      description: 'Command palette inside a Dialog',
+      render: () => (
+        <Dialog>
+          <Dialog.Trigger asChild>
+            <Button variant="secondary">Open Command Palette</Button>
+          </Dialog.Trigger>
+          <Dialog.Content size="sm">
+            <Command>
+              <Command.Input placeholder="Search commands..." />
+              <Command.List>
+                <Command.Group heading="Actions">
+                  <Command.Item onItemSelect={() => {}}>New File</Command.Item>
+                  <Command.Item onItemSelect={() => {}}>Open Recent</Command.Item>
+                </Command.Group>
+                <Command.Separator />
+                <Command.Group heading="Settings">
+                  <Command.Item onItemSelect={() => {}}>Preferences</Command.Item>
+                  <Command.Item onItemSelect={() => {}}>Keyboard Shortcuts</Command.Item>
+                </Command.Group>
+                <Command.Empty>No results found.</Command.Empty>
+              </Command.List>
+            </Command>
+          </Dialog.Content>
+        </Dialog>
+      ),
+    },
+    {
+      name: 'With Groups',
+      description: 'Organized by category groups',
+      render: () => (
+        <div style={{ maxWidth: '400px', width: '100%' }}>
+          <Command>
+            <Command.Input placeholder="Search..." />
+            <Command.List>
+              <Command.Group heading="Suggestions">
+                <Command.Item onItemSelect={() => {}}>Calendar</Command.Item>
+                <Command.Item onItemSelect={() => {}}>Calculator</Command.Item>
+              </Command.Group>
+              <Command.Separator />
+              <Command.Group heading="Settings">
+                <Command.Item onItemSelect={() => {}}>Profile</Command.Item>
+                <Command.Item onItemSelect={() => {}}>Billing</Command.Item>
+                <Command.Item disabled onItemSelect={() => {}}>
+                  Team (coming soon)
+                </Command.Item>
+              </Command.Group>
+              <Command.Empty>No results found.</Command.Empty>
+            </Command.List>
+          </Command>
+        </div>
+      ),
+    },
+    {
+      name: 'With Icons',
+      description: 'Items with leading icons',
+      render: () => (
+        <div style={{ maxWidth: '400px', width: '100%' }}>
+          <Command>
+            <Command.Input placeholder="What do you need?" />
+            <Command.List>
+              <Command.Item onItemSelect={() => {}}>
+                <span style={{ marginRight: '0.5rem', fontSize: '1rem' }}>+</span> New Document
+              </Command.Item>
+              <Command.Item onItemSelect={() => {}}>
+                <span style={{ marginRight: '0.5rem', fontSize: '1rem' }}>{'>'}</span> Open Folder
+              </Command.Item>
+              <Command.Item onItemSelect={() => {}}>
+                <span style={{ marginRight: '0.5rem', fontSize: '1rem' }}>?</span> Search
+              </Command.Item>
+              <Command.Empty>No results found.</Command.Empty>
+            </Command.List>
+          </Command>
+        </div>
+      ),
+    },
+  ],
+});

package/src/components/Command/Command.module.scss

@@ -0,0 +1,153 @@
+@use '../../tokens/variables' as *;
+@use '../../tokens/mixins' as *;
+
+// ============================================
+// Command container
+// ============================================
+
+.command {
+  @include surface-elevated;
+
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: var(--fui-shadow-md);
+}
+
+// ============================================
+// Input area
+// ============================================
+
+.inputWrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--fui-space-2, 0.5rem);
+  padding: var(--fui-padding-item-sm, 0.5rem) var(--fui-padding-container-md, 1rem);
+  border-bottom: 1px solid var(--fui-border);
+
+  svg {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    color: var(--fui-text-secondary);
+  }
+}
+
+.input {
+  @include text-base;
+
+  width: 100%;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: var(--fui-font-size-sm, 0.875rem);
+  color: var(--fui-text-primary);
+  padding: var(--fui-space-1, 0.25rem) 0;
+
+  &::placeholder {
+    color: var(--fui-text-tertiary);
+  }
+}
+
+// ============================================
+// List area
+// ============================================
+
+.list {
+  overflow-y: auto;
+  max-height: 300px;
+  padding: var(--fui-padding-item-xs, 0.25rem);
+}
+
+// ============================================
+// Item
+// ============================================
+
+.item {
+  @include button-reset;
+  @include text-base;
+
+  display: flex;
+  align-items: center;
+  gap: var(--fui-space-2, 0.5rem);
+  width: 100%;
+  padding: var(--fui-padding-item-xs, 0.25rem) var(--fui-padding-item-md, 0.75rem);
+  border-radius: var(--fui-radius-sm, 0.25rem);
+  cursor: pointer;
+  text-align: left;
+  color: var(--fui-text-primary);
+  background: transparent;
+  border: none;
+  font-size: var(--fui-font-size-sm, 0.875rem);
+  transition: background-color 0.1s ease;
+
+  &:hover {
+    background-color: var(--fui-bg-hover);
+  }
+}
+
+.itemActive {
+  background-color: var(--fui-bg-hover);
+}
+
+.itemDisabled {
+  color: var(--fui-text-tertiary);
+  cursor: not-allowed;
+
+  &:hover {
+    background-color: transparent;
+  }
+}
+
+// ============================================
+// Group
+// ============================================
+
+.group {
+  &:not(:first-child) {
+    margin-top: var(--fui-space-1, 0.25rem);
+  }
+}
+
+.groupHeading {
+  padding: var(--fui-padding-item-xs, 0.25rem) var(--fui-padding-item-md, 0.75rem);
+  font-size: var(--fui-font-size-xs, 0.75rem);
+  font-weight: var(--fui-font-weight-medium, 500);
+  color: var(--fui-text-tertiary);
+}
+
+// ============================================
+// Empty state
+// ============================================
+
+.empty {
+  padding: var(--fui-padding-item-md, 0.75rem);
+  font-size: var(--fui-font-size-sm, 0.875rem);
+  color: var(--fui-text-secondary);
+  text-align: center;
+}
+
+// ============================================
+// Separator
+// ============================================
+
+.separator {
+  height: 1px;
+  margin: var(--fui-space-1, 0.25rem) 0;
+  background-color: var(--fui-border);
+}
+
+// ============================================
+// Accessibility: High Contrast Mode
+// ============================================
+
+@media (prefers-contrast: more) {
+  .command {
+    border-width: 2px;
+  }
+
+  .itemActive {
+    outline: 2px solid var(--fui-color-accent);
+    outline-offset: -2px;
+  }
+}