@xola/ui-kit 3.0.4 → 3.0.8

package/index.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap");
 
 @tailwind base;
@@ -6,11 +6,28 @@
 @tailwind utilities;
 
 @layer base {
+    :root {
+        /* https://rsms.me/inter/#usage */
+        font-feature-settings:
+            "liga" 1,
+            "calt" 1; /* fix for Chrome */
+    }
+
     html {
         /* Never change this default! */
         @apply text-black text-base;
     }
 
+    /* For testing advanced typographic features */
+    .font-ligatures {
+        font-feature-settings:
+            "liga" 1,
+            "calt" 1,
+            "dlig" 1,
+            "ss03" 1,
+            "ss02" 1 !important;
+    }
+
     a {
         @apply text-primary hover:underline;
     }

package/index.d.ts

@@ -1,265 +1,72 @@
 // This is just to make the auto-import work.
 // Next step is to add types for the props.
 export {
-    AccountIcon,
-    AddNoteIcon,
-    AddSquareIcon,
     Alert,
     almostZero,
-    AnnounceIcon,
-    AppIcon,
-    ArchiveIcon,
-    ArrowCcwIcon,
-    ArrowCwIcon,
-    ArrowDownIcon,
-    ArrowRightIcon,
-    ArrowTopRightIcon,
-    ArrowUpIcon,
-    AtIcon,
+    AppStoreBadge,
     Avatar,
     Badge,
-    BalloonIcon,
-    BankCheckIcon,
-    BarGraphIcon,
-    BaseInput,
-    BellIcon,
-    BookmarkIcon,
-    BoxIcon,
     Breadcrumb,
     Breakdown,
-    BriefcaseIcon,
     Button,
-    ButtonCodeIcon,
     ButtonGroup,
-    CakeIcon,
-    CalendarDayIcon,
-    CalendarIcon,
-    CalendarMonthIcon,
-    CalendarWeekIcon,
-    CapacityIcon,
-    CardAltIcon,
-    CardIcon,
-    CartIcon,
-    CashIcon,
     Checkbox,
-    CheckboxIcon,
-    CheckIcon,
-    ChecklistIcon,
-    ChevronDownIcon,
-    ChevronLeftIcon,
-    ChevronRightIcon,
-    ChevronUpIcon,
-    ChipIcon,
-    CircleCheckIcon,
-    CircleCrossIcon,
-    CircleCrownIcon,
-    CircleDollarIcon,
-    CircleDotIcon,
-    CircleInfinityIcon,
-    CircleInfoIcon,
-    CircleKeyIcon,
     CircleNotch,
-    CirclePauseIcon,
-    CirclePlusIcon,
-    CircleSubtractIcon,
-    ClipboardIcon,
-    ClockAltIcon,
-    ClockIcon,
-    ClockManualIcon,
-    CloseCircleIcon,
-    CloseIcon,
-    CollapseIcon,
     ComboBox,
-    CommentAltIcon,
-    CommentIcon,
     compactNumber,
-    CompassIcon,
-    CopyIcon,
     Counter,
-    CouponIcon,
-    CrmIcon,
-    CrownIcon,
     Currency,
-    DashboardIcon,
     dateFromObjectId,
     DatePicker,
     DatePickerPopover,
-    DecreaseIcon,
-    DepositIcon,
-    DisabledIcon,
-    DisputeIcon,
     Dot,
-    DotCircleIcon,
-    DoubleCheckIcon,
-    DownArrowIcon,
-    DownloadIcon,
+    DotProgress,
     Drawer,
-    DropdownIcon,
-    DumbbellIcon,
-    DuplicateIcon,
-    DurationIcon,
-    EditIcon,
-    EditNoteIcon,
-    EditNotesIcon,
-    EllipsisIcon,
-    EmailCheckedIcon,
-    EmailIcon,
-    EmailResendIcon,
-    EmailSendIcon,
-    EmptyChecklistIcon,
-    EquipmentIcon,
-    ExportIcon,
-    EyeClosedIcon,
-    EyeIcon,
-    FaceNeutralIcon,
-    FaceSadIcon,
-    FaceSmileIcon,
     FadeIn,
-    FilterIcon,
-    FilterIconOld,
-    FlagIcon,
     flash,
-    FlexFee2Icon,
-    FlexFeeIcon,
-    FoodIcon,
-    ForkIcon,
     formatDate,
     formatTime,
     FormGroup,
-    FunnelIcon,
     getChildByType,
     getChildrenByType,
     getInitials,
     getSymbol,
-    GiftIcon,
-    GlobeIcon,
-    HandIcon,
-    HandshakeIcon,
     HeaderToolbar,
-    HelpCenterIcon,
-    HiddenIcon,
-    HouseIcon,
-    ImageIcon,
     ImageUpload,
-    InfinityIcon,
     InlineValuePopover,
     Input,
-    InvoiceIcon,
     isOSX,
     isZeroDecimal,
     Key,
-    KeyIcon,
-    KioskIcon,
     Label,
-    LabelIcon,
-    LandscapeIcon,
-    LightIcon,
-    LinkIcon,
-    LockIcon,
     Login,
     Logo,
-    LogoutIcon,
-    MagicIcon,
-    MedicalIcon,
-    MegaphoneIcon,
-    MenuIcon,
-    MinusIcon,
-    MixedChecklistIcon,
-    MobileIcon,
     Modal,
-    MoneyAddIcon,
-    MoneyBackIcon,
-    MoneyIcon,
-    MountainIcon,
-    MouseIcon,
     Number,
     numberFormat,
-    PassIcon,
-    PauseIcon,
-    PenIcon,
     Phone,
-    PhoneIcon,
-    PhotosIcon,
-    PiggyBankIcon,
-    PinIcon,
-    PipeIcon,
-    PlusIcon,
-    PolicyIcon,
+    PlayMarketBadge,
     Popover,
     PopoverList,
-    PrintIcon,
-    ProductsIcon,
     Provider,
-    QuestionIcon,
-    QuestionnaireIcon,
     RangeSlider,
-    ReceiptIcon,
-    ReceptionBellIcon,
-    ReceptionBellMoneyIcon,
-    RefreshIcon,
-    RefundIcon,
     RelativeDateRange,
-    RosterIcon,
-    RoundedSquareIcon,
     roundNumber,
-    RulerIcon,
     Search,
-    SearchAltIcon,
-    SearchIcon,
     Select,
-    SendIcon,
-    SeniorIcon,
-    SeniorV2Icon,
-    SeniorV3Icon,
-    ServiceIcon,
-    SettingsIcon,
-    ShapesIcon,
-    ShareIcon,
-    ShirtIcon,
-    ShoppingBagIcon,
     Sidebar,
     Skeleton,
     SlideDown,
     Spinner,
-    SplitPaymentIcon,
-    SquareIcon,
-    StackIcon,
-    StarFilledIcon,
-    StarIcon,
-    StoreCreditIcon,
     SubmitButton,
     Switch,
     Table,
     Tabs,
     Tag,
-    TaxIcon,
     Textarea,
     theme,
-    ThumbsDownIcon,
-    ThumbsUpIcon,
-    TicketIcon,
-    ToggleButton,
     Tooltip,
-    TransferArrowIcon,
-    TrashIcon,
-    UnlinkIcon,
-    useId,
+    ToggleButton,
     useIsClient,
-    UserAddIcon,
-    UserChangedIcon,
-    UserIcon,
-    UserSubtractIcon,
-    ValuePopoverText,
-    VeteranIcon,
-    ViewNotesIcon,
-    VoucherIcon,
-    WaitlistIcon,
-    WarningDiamondIcon,
-    WarningIcon,
-    WarningTriangleIcon,
-    WeightIcon,
-    WifiIcon,
-    WriteIcon,
-    XolaBotIcon,
-    XrayIcon,
+    useViewportHeight,
 } from "./build/ui-kit.es";

package/package.json

@@ -1,53 +1,60 @@
 {
     "name": "@xola/ui-kit",
-    "version": "3.0.4",
+    "version": "3.0.8",
     "description": "Xola UI Kit",
     "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/xola/ui-kit.git"
+    },
     "files": [
         "build",
         "index.css",
+        "index.d.ts",
         "tailwind.config.js",
         "postcss.config.js",
-        "index.d.ts"
+        "ui-kit.es.js"
     ],
     "main": "build/ui-kit.es.js",
-    "module": "build/ui-kit.es",
+    "module": "build/ui-kit.es.js",
     "types": "build/index.d.ts",
     "scripts": {
         "prepare": "node scripts/prepare && vite build",
-        "start": "node scripts/prepare && start-storybook -p 6006 -s public --no-open",
-        "dev": "node scripts/prepare && start-storybook -p 6006 -s public --no-manager-cache --no-open",
-        "build": "node scripts/prepare && vite build && cp index.d.ts build",
-        "build:storybook": "node scripts/prepare && build-storybook -s public",
+        "start": "./scripts/storybook",
+        "dev": "./scripts/storybook start --no-manager-cache",
+        "build": "npm run prepare && vite build && cp index.d.ts build",
+        "build:storybook": "npm run build && ./scripts/storybook build",
         "clean": "rm -rf node_modules/.vite",
+        "lint": "xola-lint src",
         "lint:fix": "xola-lint src --fix",
         "lint:report": "xola-lint src --reporter=json src > eslint_report.json",
         "format": "prettier -l --write src",
-        "test": "jest",
+        "test": "vitest run",
         "chromatic": "chromatic --exit-zero-on-changes --build-script-name build:storybook"
     },
     "dependencies": {
-        "@headlessui/react": "^1.4.0",
+        "@headlessui/react": "1.6",
         "@tailwindcss/forms": "^0.5.6",
-        "@tailwindcss/line-clamp": "^0.3.1",
+        "@tailwindcss/line-clamp": "^0.4.4",
         "@tippyjs/react": "^4.2.6",
         "clsx": "^1.2.1",
-        "dayjs": "^1.11.10",
-        "downshift": "^6.1.5",
-        "get-user-locale": "^1.4.0",
-        "google-libphonenumber": "^3.2.22",
-        "lodash": "^4.17.21",
+        "dayjs": "^1.11.13",
+        "downshift": "^6.1.12",
+        "get-user-locale": "^1.5.1",
+        "google-libphonenumber": "^3.2.39",
+        "lodash-es": "^4.17.21",
         "nouislider-react": "^3.4.1",
         "prop-types": "^15.8.1",
-        "react": "^18.2.0",
+        "react": "^18.3.1",
         "react-day-picker": "^7.4.10",
-        "react-dom": "^18.2.0",
-        "react-hot-toast": "^2.1.0",
-        "react-hotkeys-hook": "^3.4.0",
-        "react-select": "^5.7.0",
-        "react18-json-view": "^0.2.6",
+        "react-dom": "^18.3.1",
+        "react-hot-toast": "^2.4.1",
+        "react-hotkeys-hook": "^3.4.7",
+        "react-select": "^5.8.1",
+        "react-textarea-autosize": "^8.5.3",
+        "react18-json-view": "^0.2.8",
         "storybook-addon-designs": "^6.3.1",
-        "tailwind-merge": "^2.0.0",
+        "tailwind-merge": "^2.5.5",
         "tippy.js": "^6.3.7"
     },
     "devDependencies": {
@@ -58,36 +65,36 @@
         "@storybook/addon-links": "^6.5.10",
         "@storybook/addon-postcss": "^2.0.0",
         "@storybook/addons": "^6.5.10",
+        "@storybook/builder-webpack5": "^6.5.16",
+        "@storybook/manager-webpack5": "^6.5.16",
         "@storybook/react": "^6.5.10",
         "@storybook/theming": "^6.5.10",
-        "@types/react": "^18.2.22",
-        "@types/react-dom": "^18.2.7",
-        "@xola/jslint": "^2.2.1",
+        "@types/react": "^18.3.8",
+        "@types/react-dom": "^18.3.0",
+        "@xola/jslint": "^3.0.1",
         "autoprefixer": "^10.4.5",
-        "babel-jest": "^27.2.0",
         "babel-loader": "^8.2.2",
         "chromatic": "^6.11.4",
-        "jest": "^29.7.0",
         "postcss": "^8.4.5",
-        "prettier": "2.8",
+        "prettier": "^3.3.3",
         "prettier-plugin-tailwindcss": "^0.4.1",
         "storybook-css-modules-preset": "^1.1.1",
         "tailwindcss": "^3.1.8",
         "typescript": "4.7",
-        "vite": "3.2"
+        "vite": "^5.4.11",
+        "vitest": "^2.1.1",
+        "webpack": "^5.97.1"
     },
     "peerDependencies": {
         "@types/react": "^18.2.22",
         "@types/react-dom": "^18.2.7",
         "autoprefixer": "^10.3.1",
         "postcss": "^8.3.6",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
         "tailwindcss": "^3.1.8",
-        "vite": "3.2"
+        "vite": "^5.4.11"
     },
     "engines": {
-        "node": ">=16"
+        "node": ">=18"
     },
     "prettier": {
         "semi": true,

package/tailwind.config.js

@@ -103,6 +103,7 @@ const spacing = {
     48: "192px",
     50: "200px",
     52: "208px",
+    54: "216px",
     56: "224px",
     60: "240px",
     64: "256px",
@@ -110,10 +111,11 @@ const spacing = {
     72: "288px",
     75: "300px",
     80: "320px",
-    82: "350px",
+    85: "340px",
     96: "384px",
     100: "400px",
     105: "420px",
+    110: "440px",
     125: "500px",
     150: "600px",
     140: "560px",
@@ -170,7 +172,7 @@ module.exports = {
         // Figma: https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%F0%9F%9B%A0-Xola-DS-Desktop-Master-%F0%9F%9B%A0?node-id=1885%3A51905
         extend: {
             fontFamily: {
-                sans: ["Inter", ...defaultTheme.fontFamily.sans],
+                sans: ["InterVariable", "Inter", ...defaultTheme.fontFamily.sans],
                 mono: ["Roboto Mono", ...defaultTheme.fontFamily.mono],
             },
 
@@ -219,5 +221,5 @@ module.exports = {
         },
     },
 
-    plugins: [require("@tailwindcss/forms")],
+    plugins: [require("@tailwindcss/forms"), require("@tailwindcss/line-clamp")],
 };