@wallarm-org/design-system 0.6.0 → 0.6.1

package/dist/components/Checkmark/Checkmark.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { Check, Minus } from "../../icons/index.js";
+import { Check, CheckboxIndeterminate } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 const Checkmark = ({ checkedState = false, ...props })=>/*#__PURE__*/ jsx("div", {
         className: cn('flex items-center justify-center self-start my-2', 'w-16 h-16', 'rounded-4 shadow-xs overlay transition-all data-focus-visible:ring-3', '[&_svg]:icon-sm [&_svg]:text-icon-primary-alt [&_svg]:shrink-0 [&_svg]:pointer-events-none', 'bg-bg-surface-3 border border-border-primary', '[&[data-hover]:not([data-active]):not([data-state=checked]):not([data-state=indeterminate])]:bg-states-primary-hover', '[&[data-active]:not([data-state=checked]):not([data-state=indeterminate])]:bg-states-primary-pressed', '[&[data-focus-visible]:not([data-state=checked]):not([data-state=indeterminate])]:ring-focus-primary', 'data-[state=checked]:bg-bg-fill-brand', 'data-[state=checked]:border-bg-fill-brand', 'data-[state=checked]:border-none', 'data-[state=indeterminate]:bg-bg-fill-brand', 'data-[state=indeterminate]:border-bg-fill-brand', 'data-[state=indeterminate]:border-none', '[&[data-hover]:not([data-active]):is([data-state=checked])]:overlay-states-on-fill-hover', '[&[data-hover]:not([data-active]):is([data-state=indeterminate])]:overlay-states-on-fill-hover', '[&[data-active][data-state=checked]]:overlay-states-on-fill-pressed', '[&[data-active][data-state=indeterminate]]:overlay-states-on-fill-pressed', '[&[data-focus-visible][data-state=checked]]:ring-focus-brand', '[&[data-focus-visible][data-state=indeterminate]]:ring-focus-brand'),
         "data-state": 'indeterminate' === checkedState ? 'indeterminate' : checkedState ? 'checked' : 'unchecked',
         ...props,
-        children: 'indeterminate' === checkedState ? /*#__PURE__*/ jsx(Minus, {}) : checkedState ? /*#__PURE__*/ jsx(Check, {}) : false
+        children: 'indeterminate' === checkedState ? /*#__PURE__*/ jsx(CheckboxIndeterminate, {}) : checkedState ? /*#__PURE__*/ jsx(Check, {}) : false
     });
 export { Checkmark };

package/dist/components/Code/Code.d.ts

@@ -7,7 +7,7 @@ declare const codeVariants: (props?: ({
     italic?: boolean | null | undefined;
     truncate?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type CodeNativeProps = Omit<HTMLAttributes<HTMLParagraphElement>, 'className'>;
+type CodeNativeProps = HTMLAttributes<HTMLParagraphElement>;
 type CodeVariantProps = VariantProps<typeof codeVariants>;
 interface CodeBaseProps {
     asChild?: boolean;

package/dist/components/Code/Code.js

@@ -32,7 +32,7 @@ const codeVariants = cva('font-mono leading-sm', {
         italic: false
     }
 });
-const Code = ({ size = 'l', weight = 'regular', color = 'primary', italic = false, asChild = false, truncate = false, lineClamp, ...props })=>{
+const Code = ({ size = 'l', weight = 'regular', color = 'primary', italic = false, asChild = false, truncate = false, lineClamp, className, ...props })=>{
     const Comp = asChild ? Slot : 'p';
     return /*#__PURE__*/ jsx(Comp, {
         ...props,
@@ -42,7 +42,7 @@ const Code = ({ size = 'l', weight = 'regular', color = 'primary', italic = fals
             color,
             italic,
             truncate
-        }), lineClamp && `line-clamp-${lineClamp}`)
+        }), lineClamp && `line-clamp-${lineClamp}`, className)
     });
 };
 Code.displayName = 'Code';

package/dist/components/Country/Country.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, FC, ReactNode, Ref } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type CountryCode } from './countries';
+export declare const countryVariants: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CountryVariantsProps = VariantProps<typeof countryVariants>;
+type CountryNativeProps = Omit<ComponentProps<'div'>, 'children'>;
+interface CountryBaseProps {
+    ref?: Ref<HTMLDivElement>;
+    asChild?: boolean;
+    code: CountryCode;
+    children?: ReactNode;
+}
+export type CountryProps = CountryNativeProps & CountryVariantsProps & CountryBaseProps;
+export declare const Country: FC<CountryProps>;
+export {};

package/dist/components/Country/Country.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+import { CountryContext } from "./CountryContext.js";
+import { countries } from "./countries.js";
+const countryVariants = cva('inline-flex items-center gap-6 w-fit', {
+    variants: {
+        size: {
+            small: '',
+            medium: ''
+        }
+    }
+});
+const Country = ({ ref, asChild = false, code, size = 'medium', className, children, ...props })=>{
+    const countryData = countries[code];
+    const Comp = asChild ? Slot : 'div';
+    return /*#__PURE__*/ jsx(CountryContext.Provider, {
+        value: {
+            code,
+            size: size ?? 'medium',
+            countryData
+        },
+        children: /*#__PURE__*/ jsx(Comp, {
+            ...props,
+            ref: ref,
+            "data-slot": "country",
+            className: cn(countryVariants({
+                size
+            }), className),
+            children: children
+        })
+    });
+};
+Country.displayName = 'Country';
+export { Country, countryVariants };

package/dist/components/Country/CountryContext.d.ts

@@ -0,0 +1,9 @@
+import type { CountryCode, countries } from './countries';
+import type { Size } from './types';
+export interface CountryContextValue {
+    code: CountryCode;
+    size: Size;
+    countryData: (typeof countries)[CountryCode] | undefined;
+}
+export declare const CountryContext: import("react").Context<CountryContextValue | null>;
+export declare function useCountryContext(): CountryContextValue;

package/dist/components/Country/CountryContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+const CountryContext = createContext(null);
+function useCountryContext() {
+    const ctx = useContext(CountryContext);
+    if (!ctx) throw new Error('useCountryContext must be used within a Country component');
+    return ctx;
+}
+export { CountryContext, useCountryContext };

package/dist/components/Country/CountryFlag.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentProps, FC } from 'react';
+export declare const countryFlagVariants: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CountryFlagProps = Omit<ComponentProps<'img'>, 'src' | 'alt'>;
+export declare const CountryFlag: FC<CountryFlagProps>;

package/dist/components/Country/CountryFlag.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+import { useCountryContext } from "./CountryContext.js";
+const countryFlagVariants = cva('shrink-0 rounded-full object-cover', {
+    variants: {
+        size: {
+            small: 'size-16',
+            medium: 'size-20'
+        }
+    }
+});
+const CountryFlag = ({ className, ...props })=>{
+    const { code, size, countryData } = useCountryContext();
+    if (!countryData?.flag) return null;
+    return /*#__PURE__*/ jsx("img", {
+        ...props,
+        src: countryData.flag,
+        alt: countryData.name ?? code,
+        "data-slot": "country-flag",
+        className: cn(countryFlagVariants({
+            size
+        }), className)
+    });
+};
+export { CountryFlag, countryFlagVariants };

package/dist/components/Country/CountryName.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps, FC } from 'react';
+export type CountryNameProps = ComponentProps<'span'>;
+export declare const CountryName: FC<CountryNameProps>;

package/dist/components/Country/CountryName.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from "../OverflowTooltip/index.js";
+import { Text } from "../Text/index.js";
+import { useCountryContext } from "./CountryContext.js";
+const CountryName = ({ className, ...props })=>{
+    const { code, size, countryData } = useCountryContext();
+    return /*#__PURE__*/ jsxs(OverflowTooltip, {
+        children: [
+            /*#__PURE__*/ jsx(OverflowTooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx(Text, {
+                    size: 'small' === size ? 'xs' : 'sm',
+                    "data-slot": "country-name",
+                    lineClamp: 1,
+                    truncate: true,
+                    children: countryData?.name ?? code
+                })
+            }),
+            /*#__PURE__*/ jsx(OverflowTooltipContent, {
+                children: countryData?.name ?? code
+            })
+        ]
+    });
+};
+CountryName.displayName = 'CountryName';
+export { CountryName };