nicolium: rtl

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/nicolium/src/components/list.tsx

@@ -2,7 +2,6 @@ import { Link, type LinkOptions } from '@tanstack/react-router';
 import clsx from 'clsx';
 import React, { useState } from 'react';
 
-import HStack from '@/components/ui/hstack';
 import Icon from '@/components/ui/icon';
 import Select from '@/components/ui/select';
 import { SelectDropdown } from '@/features/forms';
@@ -103,11 +102,11 @@ const ListItem: React.FC<IListItem> = ({
       </div>
 
       {'to' in rest || href || onClick ? (
-        <HStack space={1} alignItems='center' className='⁂-list-item__body'>
+        <div className='⁂-list-item__body'>
           {children}
 
           <Icon src={require('@phosphor-icons/core/regular/caret-right.svg')} aria-hidden />
-        </HStack>
+        </div>
       ) : null}
 
       {!('to' in rest) && typeof onClick === 'undefined' ? renderChildren() : null}

packages/nicolium/src/styles/new/components.scss

@@ -280,6 +280,9 @@
   overflow: hidden;
   background-image: linear-gradient(to right, rgb(var(--color-gradient-start) / 0.1), rgb(var(--color-gradient-end) / 0.1));
 
+  [dir="rtl"] & {
+    flex-direction: row-reverse;
+  }
 
   &--md {
     padding: 0.5rem 1rem;
@@ -332,9 +335,16 @@
   }
 
   &__body {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
     overflow: hidden;
     color: rgb(var(--color-gray-700));
 
+    [dir="rtl"] & {
+      flex-direction: row-reverse;
+    }
+
     .dark & {
       color: rgb(var(--color-gray-600));
     }

packages/nicolium/src/styles/new/layout.scss

@@ -408,6 +408,7 @@ body {
   display: flex;
   width: 100%;
   align-items: center;
+  gap: 1rem;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   font-size: 0.875rem;
@@ -415,9 +416,8 @@ body {
   font-weight: 600;
   transition: color, background-color, border-color, text-decoration-color, fill, stroke 200ms cubic-bezier(0.4, 0, 0.2, 1);
 
-
-  & > :not([hidden]) ~ :not([hidden]) {
-    margin-left: 1rem;
+  [dir="rtl"] & {
+    flex-direction: row-reverse;
   }
 
   @media (height >= 960px) {
@@ -431,7 +431,6 @@ body {
     padding: 0.625rem;
     transition: color, background-color, border-color, text-decoration-color, fill, stroke 200ms cubic-bezier(0.4, 0, 0.2, 1);
 
-
     svg {
       width: 1.25rem;
       height: 1.25rem;