@rango-dev/ui 0.0.0-experimental-936229e8-20251208

package/src/components/Divider/Divider.styles.ts

@@ -0,0 +1,203 @@
+import { styled } from '../../theme.js';
+
+export const DividerContainer = styled('div', {
+  flexShrink: 0,
+  variants: {
+    size: {
+      2: {},
+      4: {},
+      8: {},
+      10: {},
+      12: {},
+      16: {},
+      18: {},
+      20: {},
+      24: {},
+      30: {},
+      32: {},
+      36: {},
+      40: {},
+    },
+    direction: {
+      vertical: {},
+      horizontal: {},
+    },
+  },
+  compoundVariants: [
+    {
+      size: 2,
+      direction: 'horizontal',
+      css: {
+        width: 2,
+      },
+    },
+    {
+      size: 2,
+      direction: 'vertical',
+      css: {
+        height: 2,
+      },
+    },
+    {
+      size: 4,
+      direction: 'horizontal',
+      css: {
+        width: '$4',
+      },
+    },
+    {
+      size: 4,
+      direction: 'vertical',
+      css: {
+        height: '$4',
+      },
+    },
+    {
+      size: 8,
+      direction: 'horizontal',
+      css: {
+        width: '$8',
+      },
+    },
+    {
+      size: 8,
+      direction: 'vertical',
+      css: {
+        height: '$8',
+      },
+    },
+    {
+      size: 10,
+      direction: 'horizontal',
+      css: {
+        width: '$10',
+      },
+    },
+    {
+      size: 10,
+      direction: 'vertical',
+      css: {
+        height: '$10',
+      },
+    },
+    {
+      size: 12,
+      direction: 'horizontal',
+      css: {
+        width: '$12',
+      },
+    },
+    {
+      size: 12,
+      direction: 'vertical',
+      css: {
+        height: '$12',
+      },
+    },
+    {
+      size: 16,
+      direction: 'horizontal',
+      css: {
+        width: '$16',
+      },
+    },
+    {
+      size: 16,
+      direction: 'vertical',
+      css: {
+        height: '$16',
+      },
+    },
+    {
+      size: 18,
+      direction: 'horizontal',
+      css: {
+        width: '$18',
+      },
+    },
+    {
+      size: 18,
+      direction: 'vertical',
+      css: {
+        height: '$18',
+      },
+    },
+    {
+      size: 20,
+      direction: 'horizontal',
+      css: {
+        width: '$20',
+      },
+    },
+    {
+      size: 20,
+      direction: 'vertical',
+      css: {
+        height: '$20',
+      },
+    },
+    {
+      size: 24,
+      direction: 'horizontal',
+      css: {
+        width: '$24',
+      },
+    },
+    {
+      size: 24,
+      direction: 'vertical',
+      css: {
+        height: '$24',
+      },
+    },
+    {
+      size: 30,
+      direction: 'horizontal',
+      css: {
+        width: '$30',
+      },
+    },
+    {
+      size: 30,
+      direction: 'vertical',
+      css: {
+        height: '$30',
+      },
+    },
+    {
+      size: 32,
+      direction: 'horizontal',
+      css: {
+        width: '$32',
+      },
+    },
+    {
+      size: 36,
+      direction: 'vertical',
+      css: {
+        height: '$36',
+      },
+    },
+    {
+      size: 36,
+      direction: 'horizontal',
+      css: {
+        width: '$36',
+      },
+    },
+    {
+      size: 32,
+      direction: 'vertical',
+      css: {
+        height: '$32',
+      },
+    },
+    {
+      size: 40,
+      direction: 'vertical',
+      css: {
+        height: '$40',
+      },
+    },
+  ],
+});

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,15 @@
+import type { PropTypes } from './Divider.types.js';
+
+import React from 'react';
+
+import { DividerContainer } from './Divider.styles.js';
+
+const DEFAULT_SIZE = 12;
+
+export function Divider({
+  size = DEFAULT_SIZE,
+  direction = 'vertical',
+  ...props
+}: PropTypes) {
+  return <DividerContainer size={size} direction={direction} {...props} />;
+}

package/src/components/Divider/Divider.types.ts

@@ -0,0 +1,11 @@
+import type { DividerContainer } from './Divider.styles.js';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof DividerContainer>;
+type BaseSizes = Exclude<BaseProps['size'], object>;
+
+export interface PropTypes {
+  size?: BaseSizes;
+  direction?: 'vertical' | 'horizontal';
+  className?: string;
+}

package/src/components/Divider/index.ts

@@ -0,0 +1 @@
+export { Divider } from './Divider.js';

package/src/components/Flags/Bengali.tsx

@@ -0,0 +1,25 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Bengali(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx={256} cy={256} r={256} fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#496e2d" d="M0 0h512v512H0z" />
+        <circle cx={200.3} cy={256} r={111.3} fill="#d80027" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Catalonia.tsx

@@ -0,0 +1,31 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Catalonia(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path
+          fill="#ffda44"
+          d="M0 0v57l32 29-32 28v57l32 29-32 28v57l32 28-32 28v57l32 29-32 28v57h512v-57l-32-28 32-29v-57l-32-28 32-28v-57l-32-28 32-29v-57l-32-28 32-29V0H0z"
+        />
+        <path
+          fill="#d80027"
+          d="M0 57h512v57H0Zm0 114h512v57H0Zm0 114h512v56H0Zm0 113h512v57H0Z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Chinese.tsx

@@ -0,0 +1,28 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Chinese(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx={256} cy={256} r={256} fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#d80027" d="M0 0h512v512H0z" />
+        <path
+          fill="#ffda44"
+          d="m140.1 155.8 22.1 68h71.5l-57.8 42.1 22.1 68-57.9-42-57.9 42 22.2-68-57.9-42.1H118zm163.4 240.7-16.9-20.8-25 9.7 14.5-22.5-16.9-20.9 25.9 6.9 14.6-22.5 1.4 26.8 26 6.9-25.1 9.6zm33.6-61 8-25.6-21.9-15.5 26.8-.4 7.9-25.6 8.7 25.4 26.8-.3-21.5 16 8.6 25.4-21.9-15.5zm45.3-147.6L370.6 212l19.2 18.7-26.5-3.8-11.8 24-4.6-26.4-26.6-3.8 23.8-12.5-4.6-26.5 19.2 18.7zm-78.2-73-2 26.7 24.9 10.1-26.1 6.4-1.9 26.8-14.1-22.8-26.1 6.4 17.3-20.5-14.2-22.7 24.9 10.1z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Cyprus.tsx

@@ -0,0 +1,32 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Cyprus(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#eee" d="M0 0h512v512H0z" />
+        <path
+          fill="#6da544"
+          d="M400.7 222.6h-33.4a111.3 111.3 0 0 1-222.6 0h-33.4c0 66.2 44.5 122 105.2 139.2a37 37 0 0 0 3.9 40.5l36.3-29.2 36.4 29.2a37 37 0 0 0 3.7-40.8 144.8 144.8 0 0 0 103.9-138.9z"
+        />
+        <path
+          fill="#ffda44"
+          d="M167 211.5s0 55.6 55.6 55.6l11.1 11.2H256s11.1-33.4 33.4-33.4c0 0 0-22.3 22.3-22.3H345s-11-44.5 44.6-77.9l-22.3-11.1s-78 55.6-133.6 44.5v22.2h-22.2l-11.2-11-33.3 22.2z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Denmark.tsx

@@ -0,0 +1,31 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Denmark(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path
+          fill="#d80027"
+          d="M0 0h133.6l32.7 20.3 34-20.3H512v222.6L491.4 256l20.6 33.4V512H200.3l-31.7-20.4-35 20.4H0V289.4l29.4-33L0 222.7z"
+        />
+        <path
+          fill="#eee"
+          d="M133.6 0v222.6H0v66.8h133.6V512h66.7V289.4H512v-66.8H200.3V0h-66.7z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/English.tsx

@@ -0,0 +1,35 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function English(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path
+          fill="#eee"
+          d="m0 0 8 22-8 23v23l32 54-32 54v32l32 48-32 48v32l32 54-32 54v68l22-8 23 8h23l54-32 54 32h32l48-32 48 32h32l54-32 54 32h68l-8-22 8-23v-23l-32-54 32-54v-32l-32-48 32-48v-32l-32-54 32-54V0l-22 8-23-8h-23l-54 32-54-32h-32l-48 32-48-32h-32l-54 32L68 0H0z"
+        />
+        <path
+          fill="#0052b4"
+          d="M336 0v108L444 0Zm176 68L404 176h108zM0 176h108L0 68ZM68 0l108 108V0Zm108 512V404L68 512ZM0 444l108-108H0Zm512-108H404l108 108Zm-68 176L336 404v108z"
+        />
+        <path
+          fill="#d80027"
+          d="M0 0v45l131 131h45L0 0zm208 0v208H0v96h208v208h96V304h208v-96H304V0h-96zm259 0L336 131v45L512 0h-45zM176 336 0 512h45l131-131v-45zm160 0 176 176v-45L381 336h-45z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Finland.tsx

@@ -0,0 +1,31 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Finland(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx={256} cy={256} r={256} fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path
+          fill="#eee"
+          d="M0 0h133.6l35.3 16.7L200.3 0H512v222.6l-22.6 31.7 22.6 35.1V512H200.3l-32-19.8-34.7 19.8H0V289.4l22.1-33.3L0 222.6z"
+        />
+        <path
+          fill="#0052b4"
+          d="M133.6 0v222.6H0v66.8h133.6V512h66.7V289.4H512v-66.8H200.3V0h-66.7z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Flags.constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_SIZE = '1em';

package/src/components/Flags/Flags.types.ts

@@ -0,0 +1,3 @@
+export type FlagPropTypes = {
+  size?: number;
+};

package/src/components/Flags/French.tsx

@@ -0,0 +1,26 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function French(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z" />
+        <path fill="#0052b4" d="M0 0h167v512H0z" />
+        <path fill="#d80027" d="M345 0h167v512H345z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/German.tsx

@@ -0,0 +1,26 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function German(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx={256} cy={256} r={256} fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#ffda44" d="m0 345 256.7-25.5L512 345v167H0z" />
+        <path fill="#d80027" d="m0 167 255-23 257 23v178H0z" />
+        <path fill="#333" d="M0 0h512v167H0z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Greece.tsx

@@ -0,0 +1,31 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Greece(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx={256} cy={256} r={256} fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path
+          fill="#0052b4"
+          d="M0 0h99l29 32 28-32h356v57l-32 28 32 29v57l-32 28 32 29v57l-32 28 32 28v57l-32 29 32 28v57H0v-57l32-28-32-29v-56l32-29-32-28V171l32-29-32-28Z"
+        />
+        <path
+          fill="#eee"
+          d="M99 0v114H0v57h99v114H0v57h512v-57H156V171h100v-57H156V0Zm157 57v57h256V57Zm0 114v57h256v-57ZM0 398v57h512v-57z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Hindi.tsx

@@ -0,0 +1,29 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Hindi(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx={256} cy={256} r={256} fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#eee" d="m0 160 256-32 256 32v192l-256 32L0 352z" />
+        <path fill="#ff9811" d="M0 0h512v160H0Z" />
+        <path fill="#6da544" d="M0 352h512v160H0Z" />
+        <circle cx={256} cy={256} r={72} fill="#0052b4" />
+        <circle cx={256} cy={256} r={48} fill="#eee" />
+        <circle cx={256} cy={256} r={24} fill="#0052b4" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Hungary.tsx

@@ -0,0 +1,29 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Hungary(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path
+          fill="#eee"
+          d="m0 167 253.8-19.3L512 167v178l-254.9 32.3L0 345z"
+        />
+        <path fill="#d80027" d="M0 0h512v167H0z" />
+        <path fill="#6da544" d="M0 345h512v167H0z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/India.tsx

@@ -0,0 +1,29 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function India(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#eee" d="m0 160 256-32 256 32v192l-256 32L0 352z" />
+        <path fill="#ff9811" d="M0 0h512v160H0Z" />
+        <path fill="#6da544" d="M0 352h512v160H0Z" />
+        <circle cx="256" cy="256" r="72" fill="#0052b4" />
+        <circle cx="256" cy="256" r="48" fill="#eee" />
+        <circle cx="256" cy="256" r="24" fill="#0052b4" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Indonesian.tsx

@@ -0,0 +1,25 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Indonesian(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx={256} cy={256} r={256} fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#eee" d="m0 256 249.6-41.3L512 256v256H0z" />
+        <path fill="#a2001d" d="M0 0h512v256H0z" />
+      </g>
+    </svg>
+  );
+}