feat: figma (#175)

qwikerx · Aug 13, 2024 · 200389e · 200389e
1 parent 68b1c25
commit 200389e
Show file tree

Hide file tree

Showing 7 changed files with 6 additions and 6 deletions.
diff --git a/...lic/thumbnails/website/teaxtarea-dark.svg → ...blic/thumbnails/website/textarea-dark.svg b/...lic/thumbnails/website/teaxtarea-dark.svg → ...blic/thumbnails/website/textarea-dark.svg
diff --git a/...ic/thumbnails/website/teaxtarea-light.svg → ...lic/thumbnails/website/textarea-light.svg b/...ic/thumbnails/website/teaxtarea-light.svg → ...lic/thumbnails/website/textarea-light.svg
diff --git a/apps/web/src/generated-examples.ts b/apps/web/src/generated-examples.ts
@@ -817,7 +817,7 @@ export const examples: Record<string, Example[]> = {
       description: 'This example can be used for the color of the checkbox component by applying the color attribute to the input element.',
       url: '/examples/[theme-rtl]/checkbox/06-colors',
       content:
-        "import { component$, useSignal } from '@builder.io/qwik'\nimport { Checkbox, FlowbiteTheme } from 'flowbite-qwik'\n\nexport default component$(() => {\n  const val = useSignal(true)\n\n  return (\n    <>\n      <div class=\"flex gap-3 p-3\">\n        {(['blue', 'green', 'red', 'pink', 'purple'] as FlowbiteTheme[]).map((color) => (\n          <Checkbox bind:checked={val} color={color}>\n            {color}\n          </Checkbox>\n        ))}\n      </div>\n    </>\n  )\n})",
+        "import { component$, useSignal } from '@builder.io/qwik'\nimport { Checkbox, FlowbiteTheme } from 'flowbite-qwik'\n\nexport default component$(() => {\n  const val = useSignal(true)\n\n  return (\n    <>\n      <div class=\"flex flex-wrap gap-3 p-3\">\n        {(['blue', 'green', 'red', 'pink', 'purple'] as FlowbiteTheme[]).map((color) => (\n          <Checkbox bind:checked={val} color={color}>\n            {color}\n          </Checkbox>\n        ))}\n      </div>\n    </>\n  )\n})",
       height: '100',
     },
   ],

diff --git a/apps/web/src/routes/docs/layout.tsx b/apps/web/src/routes/docs/layout.tsx
@@ -41,7 +41,7 @@ export default component$(() => {
         <Sidebar
           collapsed={collapsed}
           theme={{
-            aside: 'sm:sticky sm:top-16 sm:block',
+            aside: 'sm:sticky sm:top-16 sm:block border-none',
             nav: 'max-sm:px-0 max-sm:pl-2 max-sm:pt-20 pt-8 lg:-mt-1',
             collapse: {
               main: 'text-sm font-semibold tracking-wide hover:bg-transparent text-gray-900 dark:hover:bg-transparent hover:text-purple-600 dark:hover:text-purple-600',

diff --git a/apps/web/src/routes/examples/[theme-rtl]/checkbox/06-colors/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/checkbox/06-colors/index.tsx
@@ -14,7 +14,7 @@ export default component$(() => {
 
   return (
     <>
-      <div class="flex gap-3 p-3">
+      <div class="flex flex-wrap gap-3 p-3">
         {(['blue', 'green', 'red', 'pink', 'purple'] as FlowbiteTheme[]).map((color) => (
           <Checkbox bind:checked={val} color={color}>
             {color}

diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flowbite-qwik",
-  "version": "0.35.3",
+  "version": "0.35.4",
   "description": "Unofficial Qwik components built for Flowbite and Tailwind CSS",
   "keywords": [
     "design-system",

diff --git a/packages/lib/src/components/Input/Input.tsx b/packages/lib/src/components/Input/Input.tsx
@@ -69,9 +69,9 @@ export const Input = component$<InputProps>(
             type={type}
             disabled={disabled}
             required={required}
-            class={[inputClasses.value, prefix ? 'pl-10' : '']}
+            class={twMerge(inputClasses.value, prefix && 'pl-10', suffix && 'pr-11')}
           />
-          {Boolean(suffix) && <div class="absolute right-2.5 top-1/2 -translate-y-1/2 pr-11">{suffix}</div>}
+          {Boolean(suffix) && <div class="absolute right-2.5 top-1/2 -translate-y-1/2">{suffix}</div>}
         </div>
         {Boolean(validationMessage) && <p class={validationWrapperClasses}>{validationMessage}</p>}