kahuna-base-react-components 1.0.6 → 1.1.0

package/src/main.css

@@ -0,0 +1,251 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@font-face {
+    font-family: "Inter";
+    src: local("Inter"), url("./assets/fonts/Inter/Inter-VariableFont_slnt,wght.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: "Aeonik Pro";
+    src: local("Aeonik Pro"), url("./assets/fonts/AeonikPro/AeonikPro-Medium.otf") format("truetype");
+}
+@font-face {
+    font-family: "Aeonik Pro Bold";
+    src: local("Aeonik Pro Bold"), url("./assets/fonts/AeonikPro/AeonikPro-Bold.otf") format("truetype");
+}
+
+.k-title-span {
+    font-feature-settings: 'ss11' on, 'cv09' on, 'liga' off, 'calt' off;
+    font-family: "Aeonik Pro";
+}
+.k-title-span-bold {
+    font-feature-settings: 'ss11' on, 'cv09' on, 'liga' off, 'calt' off;
+    font-family: "Aeonik Pro Bold";
+}
+
+.k-span {
+    font-feature-settings: 'ss11' on, 'cv09' on, 'liga' off, 'calt' off;
+    font-family: "Inter";
+}
+
+.k-span-hover {
+    display: none;
+}
+
+.k-span-hover-div:hover .k-span-hover {
+    display: inline;
+}
+
+
+.k-input-container {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+}
+
+.k-input {
+    color: #111;
+    font-feature-settings: 'ss11' on, 'cv09' on, 'liga' off, 'calt' off;
+    /* Paragraph/Small */
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    /* 142.857% */
+    letter-spacing: -0.084px;
+}
+
+.k-input::placeholder {
+    color: #737373;
+}
+
+.k-input:focus {
+    outline: none !important;
+}
+
+.k-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    align-self: stretch;
+}
+
+
+.k-dropdown-container {
+    display: flex;
+    align-items: center;
+}
+
+.k-dropdown {
+    width: 100%;
+    font-family: Inter;
+}
+
+.k-dropdown:focus {
+    outline: none !important;
+}
+
+.k-slider-input {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    cursor: pointer;
+    outline: none;
+    border-radius: 16px;
+    background: transparent;
+    overflow: visible;
+}
+
+.k-slider-input::-webkit-slider-runnable-track {
+    height: 8px;
+    border-radius: 20px;
+}
+
+.k-slider-input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    cursor: pointer;
+    margin-top: -4px;
+    /* Align the thumb vertically with the track */
+    width: 16px;
+    /* Width of the thumb */
+    height: 16px;
+    /* Height of the thumb */
+    border-radius: 50px;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cg filter='url(%23filter0_di_252_33228)'%3E%3Crect x='6' y='6' width='16' height='16' rx='8' fill='white'/%3E%3Crect x='6.5' y='6.5' width='15' height='15' rx='7.5' stroke='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d_252_33228)'%3E%3Cpath d='M11 14C11 12.3431 12.3431 11 14 11C15.6569 11 17 12.3431 17 14C17 15.6569 15.6569 17 14 17C12.3431 17 11 15.6569 11 14Z' fill='%23B5B5B5'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_di_252_33228' x='0' y='0' width='28' height='28' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.105882 0 0 0 0 0.109804 0 0 0 0 0.113725 0 0 0 0.06 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_252_33228'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_252_33228' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-3'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.894118 0 0 0 0 0.898039 0 0 0 0 0.905882 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect2_innerShadow_252_33228'/%3E%3C/filter%3E%3Cfilter id='filter1_d_252_33228' x='7' y='9' width='14' height='14' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='2'/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.105882 0 0 0 0 0.109804 0 0 0 0 0.113725 0 0 0 0.04 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_252_33228'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_252_33228' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") center / cover;
+    background-size: auto;
+    background-position: center;
+}
+
+.k-tooltip-top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: 10px;
+}
+
+.k-tooltip-right {
+    top: 50%;
+    left: 100%;
+    transform: translateY(-50%);
+    margin-left: 10px;
+}
+
+.k-tooltip-bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 10px;
+}
+
+.k-tooltip-left {
+    top: 50%;
+    right: 100%;
+    transform: translateY(-50%);
+    margin-right: 10px;
+}
+
+.k-tooltip-enter {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
+}
+
+.k-tooltip-exit {
+    opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
+    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
+}
+
+.arrow-left {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: 50%;
+    left: calc(100% - 5px);
+    transform-origin: center;
+    transform: translateY(-50%) rotateZ(45deg);
+    z-index: -100;
+}
+
+.arrow-right {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: 50%;
+    right: calc(100% - 5px);
+    transform-origin: center;
+    transform: translateY(-50%) rotateZ(45deg);
+    z-index: -100;
+}
+
+.arrow-top {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: calc(100% - 5px);
+    left: 50%;
+    transform-origin: center;
+    transform: translateX(-50%) rotateZ(45deg);
+    z-index: -100;
+}
+
+.arrow-bottom {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    bottom: calc(100% - 5px);
+    left: 50%;
+    transform-origin: center;
+    transform: translateX(-50%) rotateZ(45deg);
+    z-index: -100;
+}
+.k-slider-label-input {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    outline: none;
+    border-radius: 16px;
+    background: transparent;
+    overflow: visible;  
+}
+.k-slider-label-input:active {
+   cursor: default !important;   
+}
+.k-slider-label-input::-webkit-slider-runnable-track {
+    border-radius: 20px;
+    height: 48px;
+    z-index: 0;
+}
+
+.k-slider-label-input::-webkit-slider-thumb {
+    margin-top: -4px;
+    /* Align the thumb vertically with the track */
+    /* Width of the thumb */
+    background: url('data:image/svg+xml,%3Csvg%20width%3D%222%22%20height%3D%2216%22%20viewBox%3D%220%200%202%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%222%22%20height%3D%2216%22%20rx%3D%221%22%20fill%3D%22%23666666%22%2F%3E%3C%2Fsvg%3E') no-repeat;
+    /* Height of the thumb */
+    background-size: contain;
+    margin-top: 16px ;
+    background-position: center;
+    position: relative;
+    cursor: grab;
+    opacity: 0;
+}
+.k-slider-label-input::-webkit-slider-thumb:active {
+    cursor: grabbing;
+}
+.k-code-input-character-container {
+    outline: none !important;
+    text-align: center;
+    font-family: "Inter";
+    caret-color: #B7B7B7;  
+}
+.k-code-input-character-container:disabled {
+    background: #F7F7F7 !important;
+    border: none !important;
+}

package/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

package/tsconfig.json

@@ -2,6 +2,8 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
+    "declaration": true,
+    "declarationDir": "dist",
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -16,5 +18,8 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": [
+    "src/stories"
+  ]
 }

package/src/stories/Button.stories.ts

@@ -1,50 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};

package/src/stories/Button.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import './button.css';
-
-interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
-  onClick?: () => void;
-}
-
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={{ backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};