@zonos/amino 6.0.0-alpha.9 → 6.0.2

package/utils/cn.d.ts

@@ -1,10 +1,6 @@
 import { type ClassValue } from 'clsx';
 /**
- * Merges class names using clsx and tailwind-merge.
- * Use this instead of raw `clsx()` when composing Tailwind utility classes
- * to ensure conflicting utilities resolve correctly (last-wins).
- *
- * @example
- * cn('px-4 py-2', isLarge && 'px-8', className)
+ * Merges class names using clsx and a custom configured tailwind-merge.
+ * Understands custom Zonos Amino design tokens properly.
  */
 export declare const cn: (...inputs: ClassValue[]) => string;

package/utils/cn.js

@@ -1 +1 @@
-"use strict";var r=require("clsx"),e=require("tailwind-merge");exports.cn=function(){for(var t=[],i=0;i<arguments.length;i++)t[i]=arguments[i];return e.twMerge(r.clsx(t))};
+"use strict";var e=require("clsx"),t=function(e){return e.includes("amino-")},r=function(e){return/-(0|1000)$/.test(e)},n=require("tailwind-merge").extendTailwindMerge({extend:{classGroups:{basis:[{basis:[t]}],"bg-color":[{bg:[r]}],"border-color":[{border:[t,r]}],"font-size":[{text:[t]}],"font-weight":[{font:[t]}],leading:[{leading:[t]}],shadow:[{shadow:[t,function(e){return/^(raised|btn|input|select|focus|glow)-/.test(e)}]}],"text-color":[{text:[r]}]},theme:{color:[t,r],"drop-shadow":[t],radius:[t],spacing:[t]}}});exports.cn=function(){for(var t=[],r=0;r<arguments.length;r++)t[r]=arguments[r];return n(e.clsx(t))};

package/utils/hooks/useCountryOptions.d.ts

@@ -24,10 +24,10 @@ declare const schemaCountry: z.ZodObject<{
     label: string;
     displayName: string;
     value: string;
+    languageCode: string | null;
     code3: string | null;
     currencyCode: string;
     fraudRisk: number;
-    languageCode: string | null;
     numericCode: string | null;
     phoneCode: string[];
     upsCode: string | null;
@@ -39,10 +39,10 @@ declare const schemaCountry: z.ZodObject<{
     label: string;
     displayName: string;
     value: string;
+    languageCode: string | null;
     code3: string | null;
     currencyCode: string;
     fraudRisk: number;
-    languageCode: string | null;
     numericCode: string | null;
     phoneCode: string[];
     upsCode: string | null;

package/utils/prepCountryOptions.d.ts

@@ -9,10 +9,10 @@ export declare const prepCountryOptions: <CountryCode extends string = string>({
     active: boolean;
     code: CountryCode;
     displayName: string;
+    languageCode: string | null;
     code3: string | null;
     currencyCode: string;
     fraudRisk: number;
-    languageCode: string | null;
     numericCode: string | null;
     upsCode: string | null;
     zipRegex: string | null;

package/utils/translations/supportedLanguages.d.ts

@@ -78,5 +78,5 @@ export declare const supportedLanguages: readonly [{
 export type SupportedLanguageCode = (typeof supportedLanguages)[number]['code'];
 export declare const supportedLanguageOptions: {
     label: "dansk" | "Deutsche" | "English" | "Español" | "Français" | "bahasa Indonesia" | "Italiano" | "日本語" | "한국어" | "Nederlands" | "norsk" | "Polskie" | "Português" | "русский" | "svenska" | "ไทย" | "Türk" | "Tiếng Việt" | "中文";
-    value: "DE" | "ES" | "FR" | "ID" | "IT" | "NL" | "NO" | "PL" | "PT" | "RU" | "SV" | "TH" | "TR" | "VI" | "DA" | "EN" | "JA" | "KO" | "ZH_CN";
+    value: "DA" | "DE" | "EN" | "ES" | "FR" | "ID" | "IT" | "JA" | "KO" | "NL" | "NO" | "PL" | "PT" | "RU" | "SV" | "TH" | "TR" | "VI" | "ZH_CN";
 }[];

package/components/connection-map/ConnectionMap.d.ts

@@ -1,75 +0,0 @@
-import type { BaseProps } from "../../types/BaseProps";
-import type { GeoJsonWorld } from "../../types/GeoJsonWorld";
-import type { CountryOption } from "../../utils/hooks/useCountryOptions";
-type Props = BaseProps & {
-    /**
-     * Array of country options to be used for mapping country names to ISO codes
-     */
-    countries: CountryOption[];
-    /**
-     * ISO country code for the origin country
-     */
-    from: string;
-    /**
-     * Height of the map in pixels
-     * @default 400
-     */
-    height?: number;
-    /**
-     * ISO country code for the destination country
-     */
-    to: string;
-    /**
-     * GeoJSON data containing world map information
-     */
-    worldData: GeoJsonWorld | null;
-};
-/**
- * A geographic map component that visualizes connections between two countries.
- * Displays a world map with highlighted countries and a connecting line between them,
- * automatically centering and scaling the view for optimal visualization.
- *
- * @example Basic usage
- * ```tsx
- * const { countryOptions } = useCountryOptions();
- * const [worldData, setWorldData] = useState<GeoJsonWorld | null>(null);
- *
- * useEffect(() => {
- *   fetch('/zonos-countries-geojson.json')
- *     .then(response => response.json())
- *     .then(data => setWorldData(data));
- * }, []);
- *
- * <ConnectionMap
- *   countries={countryOptions}
- *   from="US"
- *   to="JP"
- *   worldData={worldData}
- * />
- * ```
- *
- * @example With custom height
- * ```tsx
- * <ConnectionMap
- *   countries={countryOptions}
- *   from="GB"
- *   to="AU"
- *   height={600}
- *   worldData={worldData}
- * />
- * ```
- *
- * @example With custom styling
- * ```tsx
- * <ConnectionMap
- *   className="custom-map-container"
- *   countries={countryOptions}
- *   from="CA"
- *   to="BR"
- *   style={{ border: '1px solid var(--amino-gray-200)' }}
- *   worldData={worldData}
- * />
- * ```
- */
-export declare const ConnectionMap: ({ className, countries, from, height, style, to, worldData, }: Props) => import("react").JSX.Element;
-export {};

package/components/connection-map/ConnectionMap.js

@@ -1 +0,0 @@
-"use strict";var e=require("../../tslib.es6-cdc5f922.js"),r=require("react"),t=require("react-simple-maps"),i=require("d3-geo"),s=require("topojson-client"),a=require("../skeleton/Skeleton.js"),o=require("../../styles/constants/theme.js"),n=require("../../utils/cn.js"),l=require("../../utils/getCountryCodeByName.js"),u=require("react/jsx-runtime");require("clsx"),require("tailwind-merge");exports.ConnectionMap=function(c){var d=c.className,h=c.countries,m=c.from,g=c.height,f=void 0===g?400:g,j=c.style,x=c.to,b=c.worldData,p=e.__read(r.useState([0,0]),2),y=p[0],v=p[1],k=e.__read(r.useState(1),2),q=k[0],_=k[1],C=e.__read(r.useState([0,0,0]),2),M=C[0],w=C[1],N=r.useMemo(function(){return b?s.feature(b,b.objects.countries).features:null},[b]),S=r.useCallback(function(e){var r=null==N?void 0:N.find(function(r){var t;return l.getCountryCodeByName(null===(t=r.properties)||void 0===t?void 0:t.name,h)===e});return r?i.geoCentroid(r):[0,0]},[h,N]),D=!(N&&h.length&&m&&x);return r.useEffect(function(){if(!D){var r=e.__read(S(m),2),t=r[0],s=r[1],a=e.__read(S(x),2),o=a[0],n=a[1],l=i.geoDistance([t,s],[o,n]),u=i.geoDistance([t,0],[o,0]),c=i.geoDistance([0,s],[0,n]),d=function(e,r){return-19.46498024*e+-92.29376925*r+284.7+(e+r>4?80*(e+r-4):0)}(u,c);_(d);var h=e.__read([(t+o)/2,(s+n)/2],2),g=h[0],f=h[1];v([0,f]);var j=-g;Math.abs(t-o)>180&&(j+=180);var b=Math.abs(f)>55?l*-(Math.abs(f)-50):0,p=c>1&&u>c&&Math.max(s,n)>50?u/c*-5:0;w([j,b+p,0])}},[S,x,m,D]),D?u.jsx(a.Skeleton,{className:"box-border m-0 w-full rounded-amino-12",height:f,style:{padding:"16.5%"}}):u.jsx("div",{className:n.cn("overflow-hidden rounded-amino-12 bg-gray-50 dark:bg-night-gray-50","[&_*]:outline-none",d),style:j,children:u.jsxs(t.ComposableMap,{height:f,projection:"geoEqualEarth",projectionConfig:{center:y,rotate:M,scale:q},children:[u.jsx(t.Geographies,{geography:N,children:function(e){return e.geographies.map(function(e){var r=[x,m].includes(l.getCountryCodeByName(e.properties.name,h));return u.jsx(t.Geography,{fill:r?o.theme.blue100:o.theme.gray0,geography:e,stroke:r?o.theme.blue400:o.theme.gray200,strokeWidth:2},e.rsmKey)})}}),u.jsxs(t.Marker,{coordinates:S(m),children:[u.jsx("circle",{fill:o.theme.blue300,r:10}),u.jsx("circle",{fill:o.theme.blue400,r:7})]}),u.jsxs(t.Marker,{coordinates:S(x),children:[u.jsx("circle",{fill:o.theme.blue300,r:10}),u.jsx("circle",{fill:o.theme.blue400,r:7})]}),u.jsx(t.Line,{from:S(m),stroke:o.theme.blue600,strokeWidth:4,to:S(x)}),u.jsxs(t.Marker,{coordinates:S(m),children:[u.jsx("circle",{fill:"white",r:4}),u.jsx("circle",{fill:o.theme.blue600,r:2})]}),u.jsxs(t.Marker,{coordinates:S(x),children:[u.jsx("circle",{fill:"white",r:4}),u.jsx("circle",{fill:o.theme.blue600,r:2})]})]})})};

package/tailwind.css

@@ -1,16 +0,0 @@
-@import 'tailwindcss';
-@config '../../tailwind.config.ts';
-
-/* Map the Tailwind `dark:` variant to amino's night theme selector */
-@custom-variant dark (&:is([data-theme='night'] *));
-
-/* GlowWrapper ::after positioning and background (shared rule, not per-instance) */
-@layer components {
-  [style*='--amino-glow-wrapper-x']::after {
-    width: min(100%, 400px);
-    height: min(100%, 400px);
-    top: calc(var(--amino-glow-wrapper-y) * 1px - min(50%, calc(400px / 2)));
-    left: calc(var(--amino-glow-wrapper-x) * 1px - min(50%, calc(400px / 2)));
-    background: var(--amino-glow-wrapper-background);
-  }
-}

package/tools/mcp/client.d.ts

@@ -1,37 +0,0 @@
-import type { ComponentDetails, ComponentListing, FindComponentOptions, MCPClientOptions, MCPResponse } from './types';
-/**
- * Client for interacting with MCP server
- */
-export declare class MCPClient {
-    private baseUrl;
-    /**
-     * Create a new MCP client
-     * @param options - Client options
-     */
-    constructor(options: MCPClientOptions);
-    /**
-     * Make a request to the MCP server
-     * @param path - API path
-     * @param options - Fetch options
-     * @returns Response data or error
-     */
-    private request;
-    /**
-     * List all available components
-     * @returns List of components or error
-     */
-    listComponents(): Promise<MCPResponse<ComponentListing>>;
-    /**
-     * Find component by name
-     * @param name - Component name to search for
-     * @param options - Search options
-     * @returns Matching component or error
-     */
-    findComponentByName(name: string, options?: FindComponentOptions): Promise<MCPResponse<ComponentListing>>;
-    /**
-     * Get detailed information about a component
-     * @param id - Component identifier
-     * @returns Component details or error
-     */
-    getComponentDetails(id: string): Promise<MCPResponse<ComponentDetails>>;
-}

package/tools/mcp/index.d.ts

@@ -1,3 +0,0 @@
-export * from './client';
-export * from './tools';
-export * from './types';

package/tools/mcp/tools.d.ts

@@ -1,37 +0,0 @@
-import { MCPClient } from './client';
-import type { ComponentDetails, ComponentListing, FindComponentOptions, MCPResponse } from './types';
-/**
- * Set the default MCP client
- * @param client - MCP client instance
- */
-export declare function setMCPClient(client: MCPClient): void;
-/**
- * List all available components
- *
- * This tool corresponds to the Model Context Protocol's list-components
- * capability, providing a way to discover all components available in the design system.
- *
- * @returns Promise resolving to component listing or error
- */
-export declare function listComponents(): Promise<MCPResponse<ComponentListing>>;
-/**
- * Find component by name
- *
- * This tool corresponds to the Model Context Protocol's find-component-by-name
- * capability, allowing lookup of components by their name.
- *
- * @param name - Component name to search for
- * @param options - Optional search configuration
- * @returns Promise resolving to matching components or error
- */
-export declare function findComponentByName(name: string, options?: FindComponentOptions): Promise<MCPResponse<ComponentListing>>;
-/**
- * Get detailed information about a component
- *
- * This tool corresponds to the Model Context Protocol's get-component-details
- * capability, providing comprehensive information about a specific component.
- *
- * @param id - Component identifier
- * @returns Promise resolving to component details or error
- */
-export declare function getComponentDetails(id: string): Promise<MCPResponse<ComponentDetails>>;

package/tools/mcp/types.d.ts

@@ -1,124 +0,0 @@
-/**
- * Types for Model Context Protocol (MCP) implementation
- */
-export type ComponentListingItem = {
-    /**
-     * Brief description of the component
-     */
-    description?: string;
-    /**
-     * Unique identifier for the component
-     */
-    id: string;
-    /**
-     * Display name of the component
-     */
-    name: string;
-    /**
-     * Path to the component file relative to project root
-     */
-    path: string;
-    /**
-     * Tags associated with the component
-     */
-    tags?: string[];
-};
-export type ComponentListing = {
-    /**
-     * List of available components
-     */
-    components: ComponentListingItem[];
-};
-export type PropDefinition = {
-    /**
-     * Default value for the prop if any
-     */
-    defaultValue?: string;
-    /**
-     * Description of the prop
-     */
-    description?: string;
-    /**
-     * Example usage of the prop
-     */
-    example?: string;
-    /**
-     * Name of the prop
-     */
-    name: string;
-    /**
-     * Whether the prop is required
-     */
-    required: boolean;
-    /**
-     * Type of the prop
-     */
-    type: string;
-};
-export type ComponentDetails = {
-    /**
-     * Full description of the component
-     */
-    description?: string;
-    /**
-     * Usage examples
-     */
-    examples?: string[];
-    /**
-     * Unique identifier for the component
-     */
-    id: string;
-    /**
-     * Name of the component
-     */
-    name: string;
-    /**
-     * Path to the component file
-     */
-    path: string;
-    /**
-     * Component props definition
-     */
-    props: PropDefinition[];
-    /**
-     * Related components
-     */
-    relatedComponents?: string[];
-    /**
-     * Tags associated with the component
-     */
-    tags?: string[];
-};
-export type MCPClientOptions = {
-    /**
-     * Base URL for MCP server
-     */
-    baseUrl: string;
-};
-export type MCPError = {
-    /**
-     * Error code
-     */
-    code?: string;
-    /**
-     * Error message
-     */
-    message: string;
-};
-export type MCPResponse<T> = {
-    /**
-     * Response data
-     */
-    data?: T;
-    /**
-     * Error information if request failed
-     */
-    error?: MCPError;
-};
-export type FindComponentOptions = {
-    /**
-     * Whether to use exact name matching
-     * @default true
-     */
-    exact?: boolean;
-};

package/types/GeoJsonWorld.d.ts

@@ -1,21 +0,0 @@
-import type { BBox } from 'geojson';
-import type { Arc, MultiPolygon, Polygon, Transform } from 'topojson-specification';
-type Properties = {
-    name: string;
-};
-type Geometry = (Polygon | MultiPolygon) & {
-    properties: Properties;
-};
-export type GeoJsonWorld = {
-    arcs: Arc[];
-    bbox: BBox;
-    objects: {
-        countries: {
-            geometries: Geometry[];
-            type: 'GeometryCollection';
-        };
-    };
-    transform: Transform;
-    type: 'Topology';
-};
-export {};